feat(web): reset pin code (#20766)

web/src/lib/components/user-settings-page/PinCodeChangeForm.svelte

@@ -6,7 +6,7 @@
   import PinCodeInput from '$lib/components/user-settings-page/PinCodeInput.svelte';
   import { handleError } from '$lib/utils/handle-error';
   import { changePinCode } from '@immich/sdk';
-  import { Button } from '@immich/ui';
+  import { Button, Heading, Text } from '@immich/ui';
   import { t } from 'svelte-i18n';
   import { fade } from 'svelte/transition';
 
@@ -16,11 +16,11 @@
   let isLoading = $state(false);
   let canSubmit = $derived(currentPinCode.length === 6 && confirmPinCode.length === 6 && newPinCode === confirmPinCode);
 
-  interface Props {
-    onChanged?: () => void;
-  }
+  type Props = {
+    onForgot: () => void;
+  };
 
-  let { onChanged }: Props = $props();
+  let { onForgot }: Props = $props();
 
   const handleSubmit = async (event: Event) => {
     event.preventDefault();
@@ -38,8 +38,6 @@
         message: $t('pin_code_changed_successfully'),
         type: NotificationType.Info,
       });
-
-      onChanged?.();
     } catch (error) {
       handleError(error, $t('unable_to_change_pin_code'));
     } finally {
@@ -58,12 +56,13 @@
   <div in:fade={{ duration: 200 }}>
     <form autocomplete="off" onsubmit={handleSubmit} class="mt-6">
       <div class="flex flex-col gap-6 place-items-center place-content-center">
-        <p class="text-dark">{$t('change_pin_code')}</p>
+        <Heading>{$t('change_pin_code')}</Heading>
         <PinCodeInput label={$t('current_pin_code')} bind:value={currentPinCode} tabindexStart={1} pinLength={6} />
-
         <PinCodeInput label={$t('new_pin_code')} bind:value={newPinCode} tabindexStart={7} pinLength={6} />
-
         <PinCodeInput label={$t('confirm_new_pin_code')} bind:value={confirmPinCode} tabindexStart={13} pinLength={6} />
+        <button type="button" onclick={onForgot}>
+          <Text color="muted" class="underline" size="small">{$t('forgot_pin_code_question')}</Text>
+        </button>
       </div>
 
       <div class="flex justify-end gap-2 mt-4">