Add optional 30-day remembered sessions

src/routes/settings/users/+page.svelte

@@ -23,6 +23,7 @@
     let username = $state('');
     let displayName = $state('');
     let password = $state('');
+    let currentPassword = $state('');
     let role = $state<UserRole>('viewer');
     let enabled = $state(true);
     let showPassword = $state(false);
@@ -62,7 +63,11 @@
     ];
     const roleDescription = $derived(roles.find((item) => item.value === role)?.description);
     const administrator = $derived($page.data.user?.role === 'admin');
+    const rememberedSession = $derived($page.data.rememberedSession);
     const canViewUsers = $derived(administrator || $page.data.user?.role === 'super_viewer');
+    $effect(() => {
+        if (!createOpen && !editOpen) currentPassword = '';
+    });
 
     async function load() {
         loading = true;
@@ -118,6 +123,7 @@
     });
     function openCreate() {
         if (!administrator) return;
+        currentPassword = '';
         username = '';
         displayName = '';
         password = '';
@@ -130,6 +136,7 @@
     }
     function openEdit(user: AuthUser) {
         if (!administrator) return;
+        currentPassword = '';
         editing = user;
         username = user.username;
         displayName = user.displayName;
@@ -151,7 +158,7 @@
             const response = await fetch('/api/users', {
                 method: 'POST',
                 headers: { 'Content-Type': 'application/json' },
-                body: JSON.stringify({ username, displayName, password, role })
+                body: JSON.stringify({ username, displayName, password, role, currentPassword })
             });
             const body = await response.json();
             if (!response.ok) throw new Error(body.error ?? 'Could not create this user.');
@@ -162,6 +169,7 @@
         } catch (cause) {
             formError = (cause as Error).message;
         } finally {
+            currentPassword = '';
             busy = false;
         }
     }
@@ -183,6 +191,7 @@
                     displayName,
                     role,
                     disabled: !enabled,
+                    currentPassword,
                     ...(password ? { password } : {})
                 })
             });
@@ -200,6 +209,7 @@
         } catch (cause) {
             formError = (cause as Error).message;
         } finally {
+            currentPassword = '';
             busy = false;
         }
     }
@@ -370,6 +380,26 @@
     {/if}
 </section>
 
+{#snippet accountPassword(id: string)}
+    {#if rememberedSession}
+        <Field forId={id} label="Your current password">
+            <Input
+                {id}
+                name="currentPassword"
+                type="password"
+                autocomplete="current-password"
+                required
+                maxlength={128}
+                bind:value={currentPassword}
+                aria-describedby={`${id}-help`}
+            />
+        </Field>
+        <p class="hint" id={`${id}-help`}>
+            Confirm your password to make account changes on this remembered device.
+        </p>
+    {/if}
+{/snippet}
+
 {#if administrator}<Dialog
         bind:open={createOpen}
         title="Add user"
@@ -439,6 +469,7 @@
                 <label class="checkbox"
                     ><input type="checkbox" bind:checked={showPassword} />Show temporary password</label
                 >
+                {@render accountPassword('create-current-password')}
                 <div class="form-actions">
                     <Button
                         disabled={busy}
@@ -518,6 +549,7 @@
                         ><input type="checkbox" bind:checked={showPassword} />Show temporary
                         password</label
                     >{/if}
+                {@render accountPassword('edit-current-password')}
                 <div class="form-actions">
                     <Button
                         disabled={busy}