Cutlery/immich
1
0
Fork 1
mirror of https://github.com/immich-app/immich.git synced 2025-11-04 03:27:09 -05:00
Code Issues Packages Projects Releases Wiki Activity

refactor: user delete confirm modal (#23166)

Browse Source
This commit is contained in:
Jason Rasmussen 2025-10-22 13:49:06 -04:00 committed by GitHub
parent f4969694cd
commit 351c0d2a4d
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
1 changed files with 28 additions and 48 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

72
web/src/lib/modals/UserDeleteConfirmModal.svelte
View File

@ -3,57 +3,51 @@
import { serverConfig } from '$lib/stores/server-config.store'; import { serverConfig } from '$lib/stores/server-config.store';
import { handleError } from '$lib/utils/handle-error'; import { handleError } from '$lib/utils/handle-error';
import { deleteUserAdmin, type UserAdminResponseDto, type UserResponseDto } from '@immich/sdk'; import { deleteUserAdmin, type UserAdminResponseDto, type UserResponseDto } from '@immich/sdk';
import { Checkbox, ConfirmModal, Label } from '@immich/ui'; import { Alert, Checkbox, ConfirmModal, Field, Input, Label, Text } from '@immich/ui';
import { t } from 'svelte-i18n'; import { t } from 'svelte-i18n';
interface Props { type Props = {
user: UserResponseDto; user: UserResponseDto;
onClose: (user?: UserAdminResponseDto) => void; onClose: (user?: UserAdminResponseDto) => void;
} };
let { user, onClose }: Props = $props(); let { user, onClose }: Props = $props();
let forceDelete = $state(false); let force = $state(false);
let deleteButtonDisabled = $state(false); let email = $state('');
let userIdInput: string = ''; let disabled = $derived(force && email !== user.email);
const handleClose = async (confirmed: boolean) => {
if (!confirmed) {
onClose();
return;
}
const handleDeleteUser = async () => {
try { try {
const result = await deleteUserAdmin({ const result = await deleteUserAdmin({ id: user.id, userAdminDeleteDto: { force } });
id: user.id,
userAdminDeleteDto: { force: forceDelete },
});
onClose(result); onClose(result);
} catch (error) { } catch (error) {
handleError(error, $t('errors.unable_to_delete_user')); handleError(error, $t('errors.unable_to_delete_user'));
} }
}; };
const handleConfirm = (e: Event) => {
userIdInput = (e.target as HTMLInputElement).value;
deleteButtonDisabled = userIdInput != user.email;
};
</script> </script>
<ConfirmModal <ConfirmModal
title={$t('delete_user')} title={$t('delete_user')}
confirmText={forceDelete ? $t('permanently_delete') : $t('delete')} confirmText={force ? $t('permanently_delete') : $t('delete')}
onClose={(confirmed) => (confirmed ? handleDeleteUser() : onClose())} onClose={handleClose}
disabled={deleteButtonDisabled} {disabled}
> >
{#snippet promptSnippet()} {#snippet promptSnippet()}
<div class="flex flex-col gap-4"> <div class="flex flex-col gap-4">
{#if forceDelete} <Text>
<p> {#if force}
<FormatMessage key="admin.user_delete_immediately" values={{ user: user.name }}> <FormatMessage key="admin.user_delete_immediately" values={{ user: user.name }}>
{#snippet children({ message })} {#snippet children({ message })}
<b>{message}</b> <b>{message}</b>
{/snippet} {/snippet}
</FormatMessage> </FormatMessage>
</p>
{:else} {:else}
<p>
<FormatMessage <FormatMessage
key="admin.user_delete_delay" key="admin.user_delete_delay"
values={{ user: user.name, delay: $serverConfig.userDeleteDelay }} values={{ user: user.name, delay: $serverConfig.userDeleteDelay }}
@ -62,34 +56,20 @@
<b>{message}</b> <b>{message}</b>
{/snippet} {/snippet}
</FormatMessage> </FormatMessage>
</p>
{/if} {/if}
</Text>
<div class="flex justify-center items-center gap-2"> <div class="flex items-center gap-2">
<Checkbox <Checkbox id="queue-user-deletion-checkbox" color="secondary" bind:checked={force} />
id="queue-user-deletion-checkbox"
color="secondary"
bind:checked={forceDelete}
onCheckedChange={() => (deleteButtonDisabled = forceDelete)}
/>
<Label label={$t('admin.user_delete_immediately_checkbox')} for="queue-user-deletion-checkbox" /> <Label label={$t('admin.user_delete_immediately_checkbox')} for="queue-user-deletion-checkbox" />
</div> </div>
{#if forceDelete} {#if force}
<p class="text-danger">{$t('admin.force_delete_user_warning')}</p> <Alert color="danger" icon={false}>{$t('admin.force_delete_user_warning')}</Alert>
<p class="immich-form-label text-sm" id="confirm-user-desc"> <Field label={$t('admin.confirm_email_below', { values: { email: user.email } })}>
{$t('admin.confirm_email_below', { values: { email: user.email } })} <Input bind:value={email} />
</p> </Field>
<input
class="immich-form-input w-full pb-2"
id="confirm-user-id"
aria-describedby="confirm-user-desc"
name="confirm-user-id"
type="text"
oninput={handleConfirm}
/>
{/if} {/if}
</div> </div>
{/snippet} {/snippet}