preparing for user edit form

frontend/src/App.svelte

@@ -3,12 +3,10 @@
     import { loadTranslation } from './translations.svelte.js';
     import { user } from './user.svelte.js';
     import { Router, Route } from 'svelte-tiny-router';
-    import About    from "./routes/About.svelte";
     import Footer   from "./Components/Footer.svelte";
-    import Home     from "./routes/Home.svelte";
     import Login    from "./Components/Login.svelte";
     import Menu     from "./Components/Menu.svelte";
-    import User     from "./routes/User.svelte";
+    import User     from "./routes/user/User.svelte";
 
 
     let translations_ready = false;
@@ -24,9 +22,7 @@
         <!-- https://github.com/notnotsamuel/svelte-tiny-router -->
         <Router>
             <Menu />
-            <Route path="/" component={Home} />
+            <Route path="/user" component={User} />
-            <Route path="/about" component={About} />
-            <Route path="/user/:id" component={User} />
             <Route>
                 <p>Page not found</p>
             </Route>

frontend/src/Components/Menu.svelte

@@ -10,11 +10,9 @@
     }
 </script>
 <nav>
-    <a on:click={() => router.navigate('/')}>{t('nav.Home')}</a>
+    <a onclick={() => router.navigate('/user')}>{t('menu.users')}</a>
-    <a on:click={gotoAbout}>{t('nav.About')}</a>
+    <a href="https://svelte.dev/tutorial/svelte/state" target="_blank">{t('menu.tutorial')}</a>
-    <a on:click={() => router.navigate('/user/5')}>{t('nav.User5')}</a>
-    <a href="https://svelte.dev/tutorial/svelte/state" target="_blank">{t('nav.Tutorial')}</a>
     {#if user.name }
-    <a on:click={logout}>Logout</a>
+    <a onclick={logout}>{t('menu.logout')}</a>
     {/if}
 </nav>

frontend/src/routes/About.svelte

@@ -1 +0,0 @@
-<h1>About</h1>

frontend/src/routes/Home.svelte

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

frontend/src/routes/User.svelte

@@ -1,4 +0,0 @@
-<script>
-    let { id } = $props();
-</script>
-<h1>User {id}</h1>

frontend/src/routes/user/EditableField.svelte

@@ -0,0 +1,29 @@
+<script>
+    import { t } from '../../translations.svelte.js';
+    import { checkUser } from '../../user.svelte.js';
+
+    let { key, value } = $props();
+
+    let input = $state(false);
+
+    function edit(){
+        input = true;
+    }
+
+    function check_key(evt){
+        if (evt.key === 'Enter'){
+            input = false;
+            checkUser();
+        }
+    }
+</script>
+<tr>
+    <th>{t(key)}</th>
+    {#if input}
+    <td >
+        <input type="text" bind:value onkeyup={check_key} />
+    </td>
+    {:else}
+    <td onclick={edit}>{value}</td>
+    {/if}
+</tr>

frontend/src/routes/user/User.svelte

@@ -0,0 +1,45 @@
+<script>
+    import { t } from '../../translations.svelte.js';
+    import { user } from '../../user.svelte.js';
+    import EditableField from './EditableField.svelte';
+
+</script>
+<h1>{t('user.user_module')}</h1>
+
+<fieldset>
+    <legend>
+        {t('user.profile')}
+    </legend>
+    <table>
+        <tbody>
+        <tr>
+            <th>{t('user.id')}</th>
+            <td>{user.id}</td>
+        </tr>
+        <EditableField key='user.name' value={user.name} />
+        <EditableField key='user.login' value={user.login} />
+        <EditableField key='user.email' value={user.email} />
+        <tr>
+            <th>{t('user.language')}</th>
+            <td>{user.language}</td>
+        </tr>
+        <tr>
+            <th>{t('user.theme')}</th>
+            <td>{user.theme}</td>
+        </tr>
+        <tr>
+            <th>{t('user.permissions')}</th>
+            <td>
+                <ul>
+                    {#each user.permissions as permission,i}
+                    <li>{t('user.'+permission)}</li>
+                    {/each}
+                </ul>
+            </td>
+        </tr>
+
+        </tbody>
+    </table>
+</fieldset>
+
+

frontend/src/translations.svelte.js

@@ -10,9 +10,12 @@ export async function loadTranslation(lang){
 export function t(key,...args){
     let set = translations.values;
     let keys = key.split('.');
-    for (let key of keys){
+    for (let token of keys){
-        if (!set[key]) return keys[keys.length-1];
+        if (!set[token]){
-        set = set[key];
+            console.log('Missing translation for '+key);
+            return keys[keys.length-1].replace('_',' ');
+        }
+        set = set[token];
     }
     for (var i in args) set = set.replace(`{${i}}`,args[i]);
     return set;

translations/src/main/resources/de.json

@@ -11,5 +11,26 @@
     "Login"            : "Anmeldung",
     "OIDC_Login"       : "Anmeldung mit OIDC",
     "Password"         : "Passwort"
+  },
+  "menu" : {
+    "logout": "Abmelden",
+    "users": "Benutzer",
+    "tutorial": "Tutorial"
+  },
+  "user" : {
+    "CREATE_USERS": "NUTZER ANLEGEN",
+    "DELETE_USERS": "NUTZER LÖSCHEN",
+    "email": "E-Mail",
+    "id": "Id",
+    "IMPERSONATE": "NUTZER WECHSELN",
+    "language": "Sprache",
+    "LIST_USERS": "NUTZER AUFLISTEN",
+    "login": "Login",
+    "MANAGE_LOGIN_SERVICES": "LOGIN-SERVICES VERWALTEN",
+    "name": "Name",
+    "permissions": "Berechtigungen",
+    "profile": "Profil",
+    "theme": "Design",
+    "user_module" : "Umbrella User-Verwaltung"
   }
 }