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

@@ -0,0 +1,50 @@
+<script lang="ts">
+  import { copyToClipboard } from '$lib/utils';
+  import { Button, Code, IconButton, Modal, ModalBody, ModalFooter, Text } from '@immich/ui';
+  import { mdiCheck, mdiContentCopy } from '@mdi/js';
+  import { t } from 'svelte-i18n';
+
+  type Props = {
+    onClose: () => void;
+    newPassword: string;
+  };
+
+  const { onClose, newPassword }: Props = $props();
+</script>
+
+<Modal
+  title={$t('password_reset_success')}
+  icon={mdiCheck}
+  onClose={() => onClose()}
+  size="small"
+  class="bg-light text-dark"
+>
+  <ModalBody>
+    <div class="flex flex-col gap-4">
+      <Text>{$t('admin.user_password_has_been_reset')}</Text>
+
+      <div class="flex justify-center gap-2 items-center">
+        <Code color="primary">{newPassword}</Code>
+        <IconButton
+          icon={mdiContentCopy}
+          shape="round"
+          color="secondary"
+          variant="ghost"
+          onclick={() => copyToClipboard(newPassword)}
+          title={$t('copy_password')}
+          aria-label={$t('copy_password')}
+        />
+      </div>
+
+      <Text>{$t('admin.user_password_reset_description')}</Text>
+    </div>
+  </ModalBody>
+
+  <ModalFooter>
+    <div class="flex gap-3 w-full">
+      <Button shape="round" color="primary" fullWidth onclick={() => onClose()}>
+        {$t('done')}
+      </Button>
+    </div>
+  </ModalFooter>
+</Modal>