preparing svelte login, mastered translations

frontend/src/Components/Homepage.svelte

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

frontend/src/Components/Login.svelte

@@ -1,5 +1,15 @@
 <script>
     import { t } from '../translations.svelte.js';
+    import { tryLogin } from '../user.svelte.js';
+    let credentials = { username : null, password : null }
+
+    function doLogin(ev){
+        tryLogin(credentials);
+    }
+
+    function init(element){
+        element.focus();
+    }
 </script>
 <style>
     label { display: block; margin: 5px; }
@@ -14,21 +24,22 @@
     }
 </style>
 
+<form on:submit|preventDefault={doLogin}>
+    <fieldset>
+        <legend>{t('login.Login')}</legend>
+        <label>
+            <input type="text" bind:value={credentials.username} required use:init />
+            <span>{t('login.Email_or_Username')}</span>
+        </label>
+        <label>
+            <input type="password" bind:value={credentials.password} required />
+            <span>{t('login.Password')}</span>
+        </label>
+        <button>{t('login.do_login')}</button>
+    </fieldset>
+</form>
 <fieldset>
-    <legend>{t('login.Login')}</legend>
-    <label>
-        <input type="text" />
-        <span>Email/Username</span>
-    </label>
-    <label>
-        <input type="password" />
-        <span>Password</span>
-    </label>
-    <button>Login</button>
-</fieldset>
-
-<fieldset>
-    <legend>OIDC Login</legend>
+    <legend>{t('login.OIDC_Login')}</legend>
     <button>SRSoftware</button>
     <button>ORC ID</button>
 </fieldset>

frontend/src/Components/Menu.svelte

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