diff --git a/web/src/lib/modals/ConfirmModal.svelte b/web/src/lib/modals/ConfirmModal.svelte index 75c07aebc6..f045eacbcb 100644 --- a/web/src/lib/modals/ConfirmModal.svelte +++ b/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> diff --git a/web/src/lib/forms/password-reset-success.svelte b/web/src/lib/modals/PasswordResetSuccessModal.svelte similarity index 64% rename from web/src/lib/forms/password-reset-success.svelte rename to web/src/lib/modals/PasswordResetSuccessModal.svelte index d7a2bb8f02..74e035b93b 100644 --- a/web/src/lib/forms/password-reset-success.svelte +++ b/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> diff --git a/web/src/routes/admin/users/[id]/+page.svelte b/web/src/routes/admin/users/[id]/+page.svelte index d5dfda92e2..6cf5530ece 100644 --- a/web/src/routes/admin/users/[id]/+page.svelte +++ b/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')); }