fix email change issues (#973)

* fix email change

* isolated email update

* update email UI immediately

---------

Co-authored-by: Christian Beutel <>

web/src/lib/components/settings/email_modal.svelte

@@ -9,7 +9,7 @@
 
     interface Props {
         email?: string;
-        onsave?: (email: string) => void;
+        onsave?: (email: string, currentPassword: string) => void;
     }
 
     let { email = "", onsave }: Props = $props();
@@ -18,24 +18,28 @@
 
     export function openModal() {
         setFields("email", email);
+        setFields("currentPassword", "");
         setErrors("email", []);
+        setErrors("currentPassword", []);
         modal.openModal();
     }
 
     const { form, errors, setFields, setErrors } = createForm<{
         email: string;
+        currentPassword: string;
     }>({
-        initialValues: { email: untrack(() => email) },
+        initialValues: { email: untrack(() => email), currentPassword: "" },
         extend: validator({
             schema: z.object({
                 email: z
                     .string()
                     .min(1, "required")
                     .email("not-a-valid-email-address"),
+                currentPassword: z.string().min(1, "required"),
             }),
         }),
         onSubmit: async (form) => {
-            onsave?.(form.email);
+            onsave?.(form.email, form.currentPassword);
             modal.closeModal!();
         },
     });
@@ -48,8 +52,9 @@
     bind:this={modal}
 >
     {#snippet content()}
-        <form id="email-form" use:form>
-            <TextField name="email" error={$errors.email}></TextField>
+        <form id="email-form" use:form class="flex flex-col gap-4">
+            <TextField name="email" label={$_("email")} error={$errors.email}></TextField>
+            <TextField name="currentPassword" type="password" label={$_("current-password")} error={$errors.currentPassword}></TextField>
         </form>
     {/snippet}
     {#snippet footer()}

web/src/lib/stores/user_store.ts

@@ -78,9 +78,10 @@ export async function logout() {
 }
 
 export async function users_update(user: User | { [K in keyof User]?: User[K] }, avatar?: File) {
+    const { email: _email, ...payload } = user as any;
     let r = await fetch('/api/v1/user/' + user.id, {
         method: 'POST',
-        body: JSON.stringify(user)
+        body: JSON.stringify(payload)
     })
 
     if (!r.ok) {
@@ -121,6 +122,22 @@ export async function users_update(user: User | { [K in keyof User]?: User[K] },
     currentUser.set(merged);
 }
 
+export async function users_update_email(userId: string, email: string, currentPassword: string) {
+    const r = await fetch(`/api/v1/user/${userId}/email`, {
+        method: 'POST',
+        body: JSON.stringify({ email, currentPassword }),
+    });
+
+    if (!r.ok) {
+        const response = await r.json();
+        throw new APIError(r.status, response.message, response.detail);
+    }
+
+    const model: User = await r.json();
+    const existing = get(currentUser);
+    currentUser.set({ ...(existing ?? {}), ...model } as User);
+}
+
 export async function users_delete(user: User) {
     const r = await fetch('/api/v1/user/' + user.id, {
         method: 'DELETE',