implemented dynamic theme loading, working on user edit

frontend/src/App.svelte

@@ -9,12 +9,22 @@
     import User     from "./routes/user/User.svelte";
 
 
-    let translations_ready = false;
+    let translations_ready = $state(false);
     onMount(async () => {
         await loadTranslation('de','Login');
         translations_ready = true;
     });
 
+    function loadTheme(name){
+        if (!name) return;
+        console.log({theme:name});
+        const url = `${location.protocol}//${location.host.replace('5173','8080')}/css/${name}.css`;
+        fetch(url).then(resp => resp.text()).then(css => {
+            document.getElementById('usercss').innerText = css;
+        });
+    }
+
+    $effect(() => loadTheme(user.theme));
 </script>
 
 {#if translations_ready }

frontend/src/app.css

@@ -1,37 +0,0 @@
-a {
-    color: orange;
-}
-body {
-    background: black;
-    color: orange;
-}
-
-fieldset {
-    border: 1px solid orange;
-    border-radius: 4px;
-}
-
-input{
-    background: black;
-    border: 1px dotted orange;
-    border-radius: 4px;
-    padding: 3px;
-    margin: 3px;
-    color: orange;
-}
-
-button{
-    background: orange;
-    border-radius: 5px;
-    padding: 5px 7px;
-    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/routes/user/ClickInput.svelte

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

frontend/src/routes/user/User.svelte

@@ -2,15 +2,20 @@
     import { t } from '../../translations.svelte.js';
     import { user } from '../../user.svelte.js';
     import EditableField from './EditableField.svelte';
+    import ClickInput from './ClickInput.svelte';
 
     async function patch(changeset){
         const url = `${location.protocol}//${location.host.replace('5173','8080')}/api/user/${user.id}`;
 
-        await fetch(url,{
+        const response = await fetch(url,{
             method: 'PATCH',
             credentials: 'include',
             body: JSON.stringify(changeset)
-        })
+        });
+        if (response.ok) {
+            const json = await response.json();
+            for (let key of Object.keys(json)) user[key] = json[key];
+        }
     }
 </script>
 <h1>{t('user.user_module')}</h1>
@@ -25,13 +30,22 @@
             <th>{t('user.id')}</th>
             <td>{user.id}</td>
         </tr>
-        <EditableField key='user.name' value={user.name} onUpdate={patch} />
+        <tr>
+            <th>{t('user.name')}</th>
+            <td><ClickInput key='name' value={user.name} onUpdate={patch} /></td>
+        </tr>
         <tr>
             <th>{t('user.login')}</th>
             <td>{user.login}</td>
         </tr>
-        <EditableField key='user.email' value={user.email} onUpdate={patch} />
-        <EditableField key='user.language' value={user.language} onUpdate={patch} />
+        <tr>
+            <th>{t('user.email')}</th>
+            <td><ClickInput key='email' value={user.email} onUpdate={patch} /></td>
+        </tr>
+        <tr>
+            <th>{t('user.language')}</th>
+            <td><ClickInput key='language' value={user.language} onUpdate={patch} /></td>
+        </tr>
         <tr>
             <th>{t('user.theme')}</th>
             <td>{user.theme}</td>

frontend/src/user.svelte.js

@@ -1,8 +1,10 @@
 export const user = $state({
-    name : null
+    name : null,
+    theme : 'default'
 })
 
 export async function checkUser(){
+    console.log('checkUser()');
     const url = `${location.protocol}//${location.host.replace('5173','8080')}/api/user/whoami`;
     const response = await fetch(url,{
         credentials: 'include'
@@ -34,6 +36,7 @@ export async function tryLogin(credentials){
     if (response.ok){
         const json = await response.json();
         for (let key of Object.keys(json)) user[key] = json[key];
+
     } else {
         alert("Login failed!");
     }