implemented password update procedure

frontend/src/Components/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/Components/ClickSelect.svelte

@@ -0,0 +1,34 @@
+<script>
+    import { t } from '../translations.svelte.js';
+    import { checkUser } from '../user.svelte.js';
+
+    let { fetchOptions, key, value, onUpdate } = $props();
+
+    let options = $state([]);
+
+    async function loadOptions(){
+        const resp = await fetchOptions();
+        const arr = await resp.json();
+        for (let entry of arr){
+            const value = entry.value;
+            const caption = entry.caption ? entry.caption : value;
+            options.push({caption:caption,value:value})
+        }
+    }
+
+    function propagate(){
+        let changeset = {}
+        changeset[key] = value;
+        onUpdate(changeset);
+    }
+</script>
+
+{#if options.length > 0}
+    <select bind:value onchange={propagate} >
+        {#each options as entry,i}
+        <option value={entry.value}>{entry.caption}</option>
+        {/each}
+    </select>
+{:else}
+    <span onclick={loadOptions}>{value}</span>
+{/if}

frontend/src/Components/EditableField.svelte

@@ -0,0 +1,31 @@
+<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>
+<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>