refactor: modals (#25162)

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

@@ -1,8 +1,9 @@
 <script lang="ts">
   import PinCodeInput from '$lib/components/user-settings-page/PinCodeInput.svelte';
+  import PinCodeResetModal from '$lib/modals/PinCodeResetModal.svelte';
   import { handleError } from '$lib/utils/handle-error';
   import { changePinCode } from '@immich/sdk';
-  import { Button, Heading, Text, toastManager } from '@immich/ui';
+  import { Button, Heading, modalManager, Text, toastManager } from '@immich/ui';
   import { t } from 'svelte-i18n';
   import { fade } from 'svelte/transition';
 
@@ -12,12 +13,6 @@
   let isLoading = $state(false);
   let canSubmit = $derived(currentPinCode.length === 6 && confirmPinCode.length === 6 && newPinCode === confirmPinCode);
 
-  type Props = {
-    onForgot: () => void;
-  };
-
-  let { onForgot }: Props = $props();
-
   const handleSubmit = async (event: Event) => {
     event.preventDefault();
     await handleChangePinCode();
@@ -51,7 +46,7 @@
         <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}>
+        <button type="button" onclick={() => modalManager.show(PinCodeResetModal, {})}>
           <Text color="muted" class="underline" size="small">{$t('forgot_pin_code_question')}</Text>
         </button>
       </div>

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

@@ -1,9 +1,8 @@
 <script lang="ts">
+  import OnEvents from '$lib/components/OnEvents.svelte';
   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';
 
@@ -14,18 +13,17 @@
     hasPinCode = pinCode;
   });
 
-  const handleResetPINCode = async () => {
-    const success = await modalManager.show(PinCodeResetModal, {});
-    if (success) {
-      hasPinCode = false;
-    }
+  const onUserPinCodeReset = () => {
+    hasPinCode = false;
   };
 </script>
 
+<OnEvents {onUserPinCodeReset} />
+
 <section>
   {#if hasPinCode}
     <div in:fade={{ duration: 200 }}>
-      <PinCodeChangeForm onForgot={handleResetPINCode} />
+      <PinCodeChangeForm />
     </div>
   {:else}
     <div in:fade={{ duration: 200 }}>