preparing svelte login, mastered translations

frontend/src/App.svelte

@@ -1,6 +1,8 @@
 <script>
     import { onMount } from 'svelte';
-    import { loadTranslation } from './translations.svelte.js'
+    import { loadTranslation } from './translations.svelte.js';
+    import { user } from './user.svelte.js';
+
     let translations_ready = false;
     onMount(async () => {
         await loadTranslation('de','Login');
@@ -12,10 +14,13 @@
     import Menu     from "./Components/Menu.svelte";
 </script>
 
-{#if translations_ready}
+{#if translations_ready }
+{#if user.username }
 <Menu />
 <Homepage />
+{:else}
 <Login />
+{/if}
 {:else}
     <p>Loading translations...</p>
 {/if}

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>

frontend/src/app.css

@@ -1,3 +1,6 @@
+a {
+    color: orange;
+}
 body {
     background: black;
     color: orange;
@@ -14,6 +17,7 @@ input{
     border-radius: 4px;
     padding: 3px;
     margin: 3px;
+    color: orange;
 }
 
 button{

frontend/src/translations.svelte.js

@@ -8,12 +8,11 @@ export async function loadTranslation(lang){
 }
 
 export function t(key){
-    var keys = key.split('.');
     let set = translations.values;
+    var keys = key.split('.');
     for (let key of keys){
-        if (set[key]) {
-            set = set[key];
-        } else return key;
+        if (!set[key]) return keys[keys.length-1];
+        set = set[key];
     }
     return set;
 }

frontend/src/user.svelte.js

@@ -0,0 +1,20 @@
+export const user = $state({
+    name : null
+})
+
+export async function tryLogin(credentials){
+    var url = `${location.protocol}//${location.host.replace('5173','8080')}/api/user/login`;
+    let response = await fetch(url,{
+        headers: {
+            'Content-Type':'application/json'
+        },
+        method: 'POST',
+        body: JSON.stringify(credentials)
+    });
+    if (response.ok){
+        const json = await response.json();
+        for (var key of Object.keys(json)) user[key] = json[key];
+    } else {
+        alert("Login failed!");
+    }
+}