From 7ef36fedffc03428303978585bdff2a78d337056 Mon Sep 17 00:00:00 2001
From: Stephan Richter <s.richter@srsoftware.de>
Date: Tue, 1 Jul 2025 00:29:07 +0200
Subject: [PATCH] preparing for user edit form

---
 frontend/src/App.svelte                       |  8 +---
 frontend/src/Components/Menu.svelte           |  8 ++--
 frontend/src/routes/About.svelte              |  1 -
 frontend/src/routes/Home.svelte               |  5 ---
 frontend/src/routes/User.svelte               |  4 --
 frontend/src/routes/user/EditableField.svelte | 29 ++++++++++++
 frontend/src/routes/user/User.svelte          | 45 +++++++++++++++++++
 frontend/src/translations.svelte.js           |  9 ++--
 translations/src/main/resources/de.json       | 21 +++++++++
 9 files changed, 106 insertions(+), 24 deletions(-)
 delete mode 100644 frontend/src/routes/About.svelte
 delete mode 100644 frontend/src/routes/Home.svelte
 delete mode 100644 frontend/src/routes/User.svelte
 create mode 100644 frontend/src/routes/user/EditableField.svelte
 create mode 100644 frontend/src/routes/user/User.svelte

diff --git a/frontend/src/App.svelte b/frontend/src/App.svelte
index 00f8f0b..a79b5db 100644
--- a/frontend/src/App.svelte
+++ b/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="/about" component={About} />
-            <Route path="/user/:id" component={User} />
+            <Route path="/user" component={User} />
             <Route>
                 <p>Page not found</p>
             </Route>
diff --git a/frontend/src/Components/Menu.svelte b/frontend/src/Components/Menu.svelte
index 1560ee4..b021aea 100644
--- a/frontend/src/Components/Menu.svelte
+++ b/frontend/src/Components/Menu.svelte
@@ -10,11 +10,9 @@
     }
 </script>
 <nav>
-    <a on:click={() => router.navigate('/')}>{t('nav.Home')}</a>
-    <a on:click={gotoAbout}>{t('nav.About')}</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>
+    <a onclick={() => router.navigate('/user')}>{t('menu.users')}</a>
+    <a href="https://svelte.dev/tutorial/svelte/state" target="_blank">{t('menu.tutorial')}</a>
     {#if user.name }
-    <a on:click={logout}>Logout</a>
+    <a onclick={logout}>{t('menu.logout')}</a>
     {/if}
 </nav>
\ No newline at end of file
diff --git a/frontend/src/routes/About.svelte b/frontend/src/routes/About.svelte
deleted file mode 100644
index 7d877fd..0000000
--- a/frontend/src/routes/About.svelte
+++ /dev/null
@@ -1 +0,0 @@
-<h1>About</h1>
\ No newline at end of file
diff --git a/frontend/src/routes/Home.svelte b/frontend/src/routes/Home.svelte
deleted file mode 100644
index c9767dd..0000000
--- a/frontend/src/routes/Home.svelte
+++ /dev/null
@@ -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>
\ No newline at end of file
diff --git a/frontend/src/routes/User.svelte b/frontend/src/routes/User.svelte
deleted file mode 100644
index 5a02139..0000000
--- a/frontend/src/routes/User.svelte
+++ /dev/null
@@ -1,4 +0,0 @@
-<script>
-    let { id } = $props();
-</script>
-<h1>User {id}</h1>
\ No newline at end of file
diff --git a/frontend/src/routes/user/EditableField.svelte b/frontend/src/routes/user/EditableField.svelte
new file mode 100644
index 0000000..f96257f
--- /dev/null
+++ b/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>
\ No newline at end of file
diff --git a/frontend/src/routes/user/User.svelte b/frontend/src/routes/user/User.svelte
new file mode 100644
index 0000000..f1d2c6e
--- /dev/null
+++ b/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>
+
+
diff --git a/frontend/src/translations.svelte.js b/frontend/src/translations.svelte.js
index 857e0ad..ac7ca3f 100644
--- a/frontend/src/translations.svelte.js
+++ b/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){
-        if (!set[key]) return keys[keys.length-1];
-        set = set[key];
+    for (let token of keys){
+        if (!set[token]){
+            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;
diff --git a/translations/src/main/resources/de.json b/translations/src/main/resources/de.json
index 5cf5de1..74f34da 100644
--- a/translations/src/main/resources/de.json
+++ b/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"
   }
 }
\ No newline at end of file