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">

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

@@ -6,7 +6,7 @@
   import PinCodeInput from '$lib/components/user-settings-page/PinCodeInput.svelte';
   import { handleError } from '$lib/utils/handle-error';
   import { setupPinCode } from '@immich/sdk';
-  import { Button } from '@immich/ui';
+  import { Button, Heading } from '@immich/ui';
   import { t } from 'svelte-i18n';
 
   interface Props {
@@ -54,10 +54,9 @@
 <form autocomplete="off" onsubmit={handleSubmit}>
   <div class="flex flex-col gap-6 place-items-center place-content-center">
     {#if showLabel}
-      <p class="text-dark">{$t('setup_pin_code')}</p>
+      <Heading>{$t('setup_pin_code')}</Heading>
     {/if}
     <PinCodeInput label={$t('new_pin_code')} bind:value={newPinCode} tabindexStart={1} pinLength={6} />
-
     <PinCodeInput label={$t('confirm_new_pin_code')} bind:value={confirmPinCode} tabindexStart={7} pinLength={6} />
   </div>
 

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

@@ -1,4 +1,5 @@
 <script lang="ts">
+  import { Label } from '@immich/ui';
   import { onMount } from 'svelte';
 
   interface Props {
@@ -115,7 +116,7 @@
 
 <div class="flex flex-col gap-1">
   {#if label}
-    <label class="text-xs text-dark" for={pinCodeInputElements[0]?.id}>{label.toUpperCase()}</label>
+    <Label for={pinCodeInputElements[0]?.id}>{label}</Label>
   {/if}
   <div class="flex gap-2">
     {#each { length: pinLength } as _, index (index)}

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

@@ -1,7 +1,9 @@
 <script lang="ts">
   import PinCodeChangeForm from '$lib/components/user-settings-page/PinCodeChangeForm.svelte';
   import PinCodeCreateForm from '$lib/components/user-settings-page/PinCodeCreateForm.svelte';
+  import PinCodeResetModal from '$lib/modals/PinCodeResetModal.svelte';
   import { getAuthStatus } from '@immich/sdk';
+  import { modalManager } from '@immich/ui';
   import { onMount } from 'svelte';
   import { fade } from 'svelte/transition';
 
@@ -11,15 +13,22 @@
     const { pinCode } = await getAuthStatus();
     hasPinCode = pinCode;
   });
+
+  const handleResetPINCode = async () => {
+    const success = await modalManager.show(PinCodeResetModal, {});
+    if (success) {
+      hasPinCode = false;
+    }
+  };
 </script>
 
-<section class="my-4">
+<section>
   {#if hasPinCode}
-    <div in:fade={{ duration: 200 }} class="mt-6">
-      <PinCodeChangeForm />
+    <div in:fade={{ duration: 200 }}>
+      <PinCodeChangeForm onForgot={handleResetPINCode} />
     </div>
   {:else}
-    <div in:fade={{ duration: 200 }} class="mt-6">
+    <div in:fade={{ duration: 200 }}>
       <PinCodeCreateForm onCreated={() => (hasPinCode = true)} />
     </div>
   {/if}