Fix Username, Password, and Email change dialogs

Author: hhvrc

src/lib/api/internal/v1/models/ChangePasswordRequest.ts

@@ -24,7 +24,7 @@ export interface ChangePasswordRequest {
      * @type {string}
      * @memberof ChangePasswordRequest
      */
-    oldPassword: string;
+    currentPassword: string;
     /**
      * 
      * @type {string}
@@ -37,7 +37,7 @@ export interface ChangePasswordRequest {
  * Check if a given object implements the ChangePasswordRequest interface.
  */
 export function instanceOfChangePasswordRequest(value: object): value is ChangePasswordRequest {
-    if (!('oldPassword' in value) || value['oldPassword'] === undefined) return false;
+    if (!('currentPassword' in value) || value['currentPassword'] === undefined) return false;
     if (!('newPassword' in value) || value['newPassword'] === undefined) return false;
     return true;
 }
@@ -52,7 +52,7 @@ export function ChangePasswordRequestFromJSONTyped(json: any, ignoreDiscriminato
     }
     return {
 
-        'oldPassword': json['oldPassword'],
+        'currentPassword': json['currentPassword'],
         'newPassword': json['newPassword'],
     };
 }
@@ -68,7 +68,7 @@ export function ChangePasswordRequestToJSONTyped(value?: ChangePasswordRequest |
 
     return {
 
-        'oldPassword': value['oldPassword'],
+        'currentPassword': value['currentPassword'],
         'newPassword': value['newPassword'],
     };
 }

src/lib/components/input/PasswordInput.svelte

@@ -8,6 +8,7 @@
   import type { AnyComponent } from '$lib/types/AnyComponent';
   import type { ValidationResult } from '$lib/types/ValidationResult';
   import type { TimeoutHandle } from '$lib/types/WAPI';
+  import type { Snippet } from 'svelte';
   import type { FullAutoFill } from 'svelte/elements';
   import PasswordStrengthMeter from './impl/PasswordStrengthMeter.svelte';
 
@@ -133,15 +134,15 @@
   {validationResult}
   {Icon}
   onblur={() => (showPopup = false)}
-  popup={showPopup ? popup : undefined}
+  popup={showPopup ? (popup as Snippet) : undefined}
 >
   {#snippet after()}
     <Button
       type="button"
       class="cursor-pointer"
       onclick={() => (valueShown = !valueShown)}
       variant="ghost"
-      disabled={validationResult === null || (validationResult && !validationResult.valid)}
+      disabled={value.length == 0}
     >
       {#if valueShown}
         <EyeOff />

src/lib/stores/UserStore.ts

@@ -36,6 +36,15 @@ function setSelfName(name: string) {
   });
 }
 
+function setSelfEmail(email: string) {
+  update((state) => {
+    if (!state.self) return state;
+    state.self.email = email;
+    state.all = updateAllFromSelf(state.all, state.self);
+    return state;
+  });
+}
+
 async function setSelf(user: ApiUserSelf) {
   update((state) => ({
     ...state,
@@ -88,6 +97,7 @@ export const UserStore = {
   set,
   update,
   setSelfName,
+  setSelfEmail,
   setSelf,
   refreshSelf,
   reset,

src/routes/(authenticated)/settings/account/ChangeEmail.svelte

@@ -1,19 +1,42 @@
 <script lang="ts">
   import Mail from '@lucide/svelte/icons/mail';
+  import { accountV1Api } from '$lib/api';
   import EmailInput from '$lib/components/input/EmailInput.svelte';
   import { Button } from '$lib/components/ui/button';
+  import { handleApiError } from '$lib/errorhandling/apiErrorHandling';
+  import { UserStore } from '$lib/stores/UserStore';
   import type { ApiUserSelf } from '$lib/types/ApiUser';
+  import { toast } from 'svelte-sonner';
 
   interface Props {
     account: ApiUserSelf;
   }
 
   let { account }: Props = $props();
 
+  let loading = $state(false);
+
   let email = $state<string>('');
+  let emailValid = $state(false);
+
+  async function submitEmail(e: Event) {
+    e.preventDefault();
+    if (loading) return;
+    loading = true;
+
+    try {
+      await accountV1Api.authenticatedAccountChangeEmail({ email });
+
+      toast.success('Email changed successfully');
+
+      UserStore.setSelfEmail(email);
 
-  function submitEmail() {
-    console.log('Submitting email');
+      email = '';
+    } catch (e) {
+      await handleApiError(e);
+    } finally {
+      loading = false;
+    }
   }
 </script>
 
@@ -22,9 +45,16 @@
   placeholder={account.email}
   autocomplete="off"
   bind:value={email}
+  bind:valid={emailValid}
   Icon={Mail}
 >
   {#snippet after()}
-    <Button type="button" onclick={submitEmail} variant="ghost">Change</Button>
+    <Button
+      type="button"
+      onclick={submitEmail}
+      disabled={!emailValid || email === account.email || loading}
+    >
+      Change
+    </Button>
   {/snippet}
 </EmailInput>

src/routes/(authenticated)/settings/account/ChangePassword.svelte

@@ -1,8 +1,13 @@
 <script lang="ts">
   import KeyRound from '@lucide/svelte/icons/key-round';
+  import { accountV1Api } from '$lib/api';
   import PasswordInput from '$lib/components/input/PasswordInput.svelte';
   import { Button } from '$lib/components/ui/button';
+  import { handleApiError } from '$lib/errorhandling/apiErrorHandling';
   import { validatePasswordMatch } from '$lib/inputvalidation/passwordValidator';
+  import { toast } from 'svelte-sonner';
+
+  let loading = $state<boolean>(false);
 
   let currentPassword = $state<string>('');
   let currentPasswordValid = $derived(currentPassword.length > 0);
@@ -11,42 +16,63 @@
   let passwordValid = $state<boolean>(false);
 
   let passwordConfirm = $state<string>('');
+  let passwordConfirmValid = $derived(validatePasswordMatch(passwordConfirm, password));
+
+  async function submitPassword(e: SubmitEvent) {
+    e.preventDefault();
+    loading = true;
+
+    try {
+      await accountV1Api.authenticatedAccountChangePassword({
+        currentPassword,
+        newPassword: password,
+      });
+
+      toast.success('Password has been changed');
 
-  function submitPassword() {
-    console.log('Submitting password');
+      currentPassword = '';
+      password = '';
+      passwordConfirm = '';
+    } catch (e) {
+      await handleApiError(e);
+    } finally {
+      loading = false;
+    }
   }
 
   let canSubmitPassword = $derived(
-    currentPasswordValid && passwordValid && password == passwordConfirm
+    currentPasswordValid && passwordValid && (passwordConfirmValid?.valid ?? false) && !loading
   );
 </script>
 
-<PasswordInput
-  label="Current Password"
-  placeholder="Current Password"
-  autocomplete="off"
-  bind:value={currentPassword}
-  Icon={KeyRound}
-/>
-
-<PasswordInput
-  label="New Password"
-  placeholder="New Password"
-  autocomplete="new-password"
-  bind:value={password}
-  bind:valid={passwordValid}
-  Icon={KeyRound}
-  validate
-  showStrengthMeter
-/>
-
-<PasswordInput
-  label="Confirm New Password"
-  placeholder="Confirm New Password"
-  autocomplete="new-password"
-  bind:value={passwordConfirm}
-  Icon={KeyRound}
-  validate={validatePasswordMatch(passwordConfirm, password)}
-/>
-
-<Button type="submit" disabled={!canSubmitPassword}>Change Password</Button>
+<form class="w-full" onsubmit={submitPassword}>
+  <PasswordInput
+    label="Current Password"
+    placeholder="Current Password"
+    autocomplete="off"
+    bind:value={currentPassword}
+    Icon={KeyRound}
+  />
+
+  <PasswordInput
+    label="New Password"
+    placeholder="New Password"
+    autocomplete="new-password"
+    bind:value={password}
+    bind:valid={passwordValid}
+    Icon={KeyRound}
+    validate
+    showStrengthMeter
+  />
+
+  <PasswordInput
+    label="Confirm New Password"
+    placeholder="Confirm New Password"
+    autocomplete="new-password"
+    bind:value={passwordConfirm}
+    Icon={KeyRound}
+    validate={passwordConfirmValid}
+  />
+
+  <Button type="submit" disabled={!canSubmitPassword}>Change Password</Button>
+</form>

src/routes/(authenticated)/settings/account/ChangeUsername.svelte

@@ -14,9 +14,16 @@
 
   let { account }: Props = $props();
 
+  let loading = $state(false);
+
   let username = $state<string>('');
+  let usernameValid = $state(false);
+
+  async function submitUsername(e: Event) {
+    e.preventDefault();
+    if (loading) return;
+    loading = true;
 
-  async function submitUsername() {
     try {
       await accountV1Api.authenticatedAccountChangeUsername({ username });
 
@@ -33,6 +40,8 @@
 
         return true;
       });
+    } finally {
+      loading = false;
     }
   }
 </script>
@@ -42,9 +51,16 @@
   placeholder={account.name}
   autocomplete="off"
   bind:value={username}
+  bind:valid={usernameValid}
   Icon={User}
 >
   {#snippet after()}
-    <Button type="button" onclick={submitUsername} variant="ghost">Change</Button>
+    <Button
+      type="button"
+      onclick={submitUsername}
+      disabled={!usernameValid || username === account.email || loading}
+    >
+      Change
+    </Button>
   {/snippet}
 </UsernameInput>