preparing for user edit form

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>
+
+