implemented password update procedure

frontend/src/Components/ClickInput.svelte

@@ -1,6 +1,6 @@
 <script>
-    import { t } from '../../translations.svelte.js';
-    import { checkUser } from '../../user.svelte.js';
+    import { t } from '../translations.svelte.js';
+    import { checkUser } from '../user.svelte.js';
 
     let { key, onUpdate, value } = $props();
 

frontend/src/Components/ClickSelect.svelte

@@ -1,6 +1,6 @@
 <script>
-    import { t } from '../../translations.svelte.js';
-    import { checkUser } from '../../user.svelte.js';
+    import { t } from '../translations.svelte.js';
+    import { checkUser } from '../user.svelte.js';
 
     let { fetchOptions, key, value, onUpdate } = $props();
 

frontend/src/routes/user/EditPassword.svelte

@@ -0,0 +1,64 @@
+<script>
+    import { t } from '../../translations.svelte.js';
+
+    let { editPassword = $bindable() } = $props();
+
+    let oldPass = $state("");
+    let newPass = $state("");
+    let repeat  = $state("");
+
+    let oldEmpty = $derived(!/\S/.test(oldPass));
+    let newEmpty = $derived(!/\S/.test(newPass));
+    let mismatch = $derived(newPass != repeat);
+
+    function abort(){
+        editPassword = false;
+    }
+
+    async function submit(){
+        const url = `${location.protocol}//${location.host.replace('5173','8080')}/api/user/password`;
+        const data = {
+            old: oldPass,
+            new: newPass
+        };
+        const resp = await fetch(url,{
+            method: 'PATCH',
+            body: JSON.stringify(data),
+            credentials: 'include'
+        });
+        if (resp.ok){
+            const json = await resp.json();
+            console.log(json);
+        }
+    }
+</script>
+
+<style>
+    label{
+        display: block;
+    }
+</style>
+
+<fieldset class="overlay">
+    <legend>{t('user.edit_password')}</legend>
+    <label>
+        <input type="password" bind:value={oldPass} /> {t('user.old_password')}
+        {#if oldEmpty}
+        <span class="error">{t('user.must_not_be_empty')}</span>
+        {/if}
+    </label>
+    <label>
+        <input type="password" bind:value={newPass} /> {t('user.new_password')}
+        {#if newEmpty}
+        <span class="error">{t('user.must_not_be_empty')}</span>
+        {/if}
+    </label>
+    <label>
+        <input type="password" bind:value={repeat} /> {t('user.repeat_new_password')}
+        {#if mismatch}
+        <span class="error">{t('user.mismatch')}</span>
+        {/if}
+    </label>
+    <button onclick={submit} disabled={oldEmpty||newEmpty||mismatch}>{t('user.update')}</button>
+    <button onclick={abort}>{t('user.abort')}</button>
+</fieldset>

frontend/src/routes/user/User.svelte

@@ -1,9 +1,10 @@
 <script>
     import { t } from '../../translations.svelte.js';
     import { user } from '../../user.svelte.js';
-    import EditableField from './EditableField.svelte';
-    import ClickInput from './ClickInput.svelte';
-    import ClickSelect from './ClickSelect.svelte';
+    import ClickInput from '../../Components/ClickInput.svelte';
+    import ClickSelect from '../../Components/ClickSelect.svelte';
+    import EditPassword from './EditPassword.svelte';
+    let editPassword = false;
 
     async function patch(changeset){
         const url = `${location.protocol}//${location.host.replace('5173','8080')}/api/user/${user.id}`;
@@ -65,6 +66,16 @@
                 <ClickSelect key='theme' value={user.theme} fetchOptions={fetchThemes} onUpdate={patch} />
             </td>
         </tr>
+        <tr>
+            <th>{t('user.password')}</th>
+            <td>
+                {#if editPassword}
+                <EditPassword bind:editPassword={editPassword} />
+                {:else}
+                <button onclick={() => editPassword = true}>{t('user.edit_password')}</button>
+                {/if}
+            </td>
+        </tr>
         <tr>
             <th>{t('user.permissions')}</th>
             <td>

frontend/src/translations.svelte.js

@@ -13,7 +13,7 @@ export function t(key,...args){
     for (let token of keys){
         if (!set[token]){
             console.log('Missing translation for '+key);
-            return keys[keys.length-1].replace('_',' ');
+            return keys[keys.length-1].replaceAll('_',' ');
         }
         set = set[token];
     }