refactor: password reset success modal (#18239)

web/src/lib/modals/ConfirmModal.svelte

@@ -10,7 +10,6 @@
     confirmColor?: Color;
     cancelText?: string;
     cancelColor?: Color;
-    hideCancelButton?: boolean;
     disabled?: boolean;
     size?: 'small' | 'medium';
     onClose: (confirmed: boolean) => void;
@@ -24,7 +23,6 @@
     confirmColor = 'danger',
     cancelText = $t('cancel'),
     cancelColor = 'secondary',
-    hideCancelButton = false,
     disabled = false,
     size = 'small',
     onClose,
@@ -45,11 +43,9 @@
 
   <ModalFooter>
     <div class="flex gap-3 w-full">
-      {#if !hideCancelButton}
-        <Button shape="round" color={cancelColor} fullWidth onclick={() => onClose(false)}>
-          {cancelText}
-        </Button>
-      {/if}
+      <Button shape="round" color={cancelColor} fullWidth onclick={() => onClose(false)}>
+        {cancelText}
+      </Button>
       <Button shape="round" color={confirmColor} fullWidth onclick={handleConfirm} {disabled}>
         {confirmText}
       </Button>

web/src/lib/modals/PasswordResetSuccessModal.svelte

@@ -1,8 +1,7 @@
 <script lang="ts">
-  import ConfirmModal from '$lib/modals/ConfirmModal.svelte';
   import { copyToClipboard } from '$lib/utils';
-  import { Code, IconButton, Text } from '@immich/ui';
-  import { mdiContentCopy } from '@mdi/js';
+  import { Button, Code, IconButton, Modal, ModalBody, ModalFooter, Text } from '@immich/ui';
+  import { mdiCheck, mdiContentCopy } from '@mdi/js';
   import { t } from 'svelte-i18n';
 
   type Props = {
@@ -13,14 +12,14 @@
   const { onClose, newPassword }: Props = $props();
 </script>
 
-<ConfirmModal
+<Modal
   title={$t('password_reset_success')}
-  confirmText={$t('done')}
-  {onClose}
-  hideCancelButton={true}
-  confirmColor="success"
+  icon={mdiCheck}
+  onClose={() => onClose()}
+  size="small"
+  class="bg-light text-dark"
 >
-  {#snippet promptSnippet()}
+  <ModalBody>
     <div class="flex flex-col gap-4">
       <Text>{$t('admin.user_password_has_been_reset')}</Text>
 
@@ -39,5 +38,13 @@
 
       <Text>{$t('admin.user_password_reset_description')}</Text>
     </div>
-  {/snippet}
-</ConfirmModal>
+  </ModalBody>
+
+  <ModalFooter>
+    <div class="flex gap-3 w-full">
+      <Button shape="round" color="primary" fullWidth onclick={() => onClose()}>
+        {$t('done')}
+      </Button>
+    </div>
+  </ModalFooter>
+</Modal>

web/src/routes/admin/users/[id]/+page.svelte

@@ -8,8 +8,8 @@
   } from '$lib/components/shared-components/notification/notification';
   import UserAvatar from '$lib/components/shared-components/user-avatar.svelte';
   import { AppRoute } from '$lib/constants';
-  import PasswordResetSuccess from '$lib/forms/password-reset-success.svelte';
   import { modalManager } from '$lib/managers/modal-manager.svelte';
+  import PasswordResetSuccessModal from '$lib/modals/PasswordResetSuccessModal.svelte';
   import UserDeleteConfirmModal from '$lib/modals/UserDeleteConfirmModal.svelte';
   import UserEditModal from '$lib/modals/UserEditModal.svelte';
   import { locale } from '$lib/stores/preferences.store';
@@ -116,7 +116,7 @@
         },
       });
 
-      await modalManager.show(PasswordResetSuccess, { newPassword });
+      await modalManager.show(PasswordResetSuccessModal, { newPassword });
     } catch (error) {
       handleError(error, $t('errors.unable_to_reset_password'));
     }