implemented user login.

next: find a solution for routing

frontend/src/App.svelte

@@ -9,18 +9,20 @@
         translations_ready = true;
     });
 
+    import Footer   from "./Components/Footer.svelte";
     import Homepage from "./Components/Homepage.svelte";
     import Login    from "./Components/Login.svelte";
     import Menu     from "./Components/Menu.svelte";
 </script>
 
 {#if translations_ready }
-{#if user.username }
-<Menu />
-<Homepage />
-{:else}
-<Login />
-{/if}
+    <Menu />
+    {#if user.name }
+        <Homepage />
+    {:else}
+        <Login />
+    {/if}
+    <Footer />
 {:else}
     <p>Loading translations...</p>
 {/if}

frontend/src/Components/Footer.svelte

@@ -0,0 +1,6 @@
+<script>
+    import { t } from '../translations.svelte.js';
+</script>
+<footer>
+    {@html t('footer.message','<a href="https://srsoftware.de">SRSoftware</a>')}
+</footer>

frontend/src/Components/Homepage.svelte

@@ -2,4 +2,4 @@
     import { t } from '../translations.svelte.js';
     import { user } from '../user.svelte.js';
 </script>
-<h1>{t('home.Welcome')}, {user.username}</h1>
+<h1>{t('home.Welcome',user.name)}</h1>

frontend/src/Components/Menu.svelte

@@ -3,11 +3,13 @@
     import { user } from '../user.svelte.js';
 
     function logout(){
-        user.username = null;
+        user.name = null;
     }
 </script>
 <nav>
     <a href="/">{t('nav.Home')}</a>
     <a href="https://svelte.dev/tutorial/svelte/state" target="_blank">{t('nav.Tutorial')}</a>
+    {#if user.name }
     <a href="#" on:click={logout}>Logout</a>
+    {/if}
 </nav>

frontend/src/app.css

@@ -27,4 +27,11 @@ button{
     border-width: 2px;
     border-style: solid;
     border-color: yellow red red yellow;
+}
+footer {
+  position: absolute;
+  bottom: 0;
+  width: 100%;
+  text-align: center;
+  margin: 5px;
 }

frontend/src/translations.svelte.js

@@ -7,12 +7,13 @@ export async function loadTranslation(lang){
     translations.values = await fetch(url).then(resp => resp.json());
 }
 
-export function t(key){
+export function t(key,...args){
     let set = translations.values;
-    var keys = key.split('.');
+    let keys = key.split('.');
     for (let key of keys){
         if (!set[key]) return keys[keys.length-1];
         set = set[key];
     }
+    for (var i in args) set = set.replace(`{${i}}`,args[i]);
     return set;
 }