mirror of
https://github.com/immich-app/immich
synced 2025-11-07 17:27:20 +00:00
refactor: all user admin page modals (#18097)
This commit is contained in:
Daniel Dietzler
GitHub
parent
12610e4a9f
commit
52975eadb3
5 changed files with 29 additions and 65 deletions
|
|
@ -1,106 +0,0 @@
|
|||
<script lang="ts">
|
||||
import Checkbox from '$lib/components/elements/checkbox.svelte';
|
||||
import FormatMessage from '$lib/components/i18n/format-message.svelte';
|
||||
import ConfirmDialog from '$lib/components/shared-components/dialog/confirm-dialog.svelte';
|
||||
import { serverConfig } from '$lib/stores/server-config.store';
|
||||
import { handleError } from '$lib/utils/handle-error';
|
||||
import { deleteUserAdmin, type UserResponseDto } from '@immich/sdk';
|
||||
import { t } from 'svelte-i18n';
|
||||
|
||||
interface Props {
|
||||
user: UserResponseDto;
|
||||
onSuccess: () => void;
|
||||
onFail: () => void;
|
||||
onCancel: () => void;
|
||||
}
|
||||
|
||||
let { user, onSuccess, onFail, onCancel }: Props = $props();
|
||||
|
||||
let forceDelete = $state(false);
|
||||
let deleteButtonDisabled = $state(false);
|
||||
let userIdInput: string = '';
|
||||
|
||||
const handleDeleteUser = async () => {
|
||||
try {
|
||||
const { deletedAt } = await deleteUserAdmin({
|
||||
id: user.id,
|
||||
userAdminDeleteDto: { force: forceDelete },
|
||||
});
|
||||
|
||||
if (deletedAt == undefined) {
|
||||
onFail();
|
||||
} else {
|
||||
onSuccess();
|
||||
}
|
||||
} catch (error) {
|
||||
handleError(error, $t('errors.unable_to_delete_user'));
|
||||
onFail();
|
||||
}
|
||||
};
|
||||
|
||||
const handleConfirm = (e: Event) => {
|
||||
userIdInput = (e.target as HTMLInputElement).value;
|
||||
deleteButtonDisabled = userIdInput != user.email;
|
||||
};
|
||||
</script>
|
||||
|
||||
<ConfirmDialog
|
||||
title={$t('delete_user')}
|
||||
confirmText={forceDelete ? $t('permanently_delete') : $t('delete')}
|
||||
onClose={(confirmed) => (confirmed ? handleDeleteUser() : onCancel())}
|
||||
disabled={deleteButtonDisabled}
|
||||
>
|
||||
{#snippet promptSnippet()}
|
||||
<div class="flex flex-col gap-4">
|
||||
{#if forceDelete}
|
||||
<p>
|
||||
<FormatMessage key="admin.user_delete_immediately" values={{ user: user.name }}>
|
||||
{#snippet children({ message })}
|
||||
<b>{message}</b>
|
||||
{/snippet}
|
||||
</FormatMessage>
|
||||
</p>
|
||||
{:else}
|
||||
<p>
|
||||
<FormatMessage
|
||||
key="admin.user_delete_delay"
|
||||
values={{ user: user.name, delay: $serverConfig.userDeleteDelay }}
|
||||
>
|
||||
{#snippet children({ message })}
|
||||
<b>{message}</b>
|
||||
{/snippet}
|
||||
</FormatMessage>
|
||||
</p>
|
||||
{/if}
|
||||
|
||||
<div class="flex justify-center m-4 gap-2">
|
||||
<Checkbox
|
||||
id="queue-user-deletion-checkbox"
|
||||
label={$t('admin.user_delete_immediately_checkbox')}
|
||||
labelClass="text-sm dark:text-immich-dark-fg"
|
||||
bind:checked={forceDelete}
|
||||
onchange={() => {
|
||||
deleteButtonDisabled = forceDelete;
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
|
||||
{#if forceDelete}
|
||||
<p class="text-immich-error">{$t('admin.force_delete_user_warning')}</p>
|
||||
|
||||
<p class="immich-form-label text-sm" id="confirm-user-desc">
|
||||
{$t('admin.confirm_email_below', { values: { email: user.email } })}
|
||||
</p>
|
||||
|
||||
<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}
|
||||
</div>
|
||||
{/snippet}
|
||||
</ConfirmDialog>
|
||||
|
|
@ -1,47 +0,0 @@
|
|||
<script lang="ts">
|
||||
import FormatMessage from '$lib/components/i18n/format-message.svelte';
|
||||
import ConfirmDialog from '$lib/components/shared-components/dialog/confirm-dialog.svelte';
|
||||
import { handleError } from '$lib/utils/handle-error';
|
||||
import { restoreUserAdmin, type UserResponseDto } from '@immich/sdk';
|
||||
import { t } from 'svelte-i18n';
|
||||
|
||||
interface Props {
|
||||
user: UserResponseDto;
|
||||
onSuccess: () => void;
|
||||
onFail: () => void;
|
||||
onCancel: () => void;
|
||||
}
|
||||
|
||||
let { user, onSuccess, onFail, onCancel }: Props = $props();
|
||||
|
||||
const handleRestoreUser = async () => {
|
||||
try {
|
||||
const { deletedAt } = await restoreUserAdmin({ id: user.id });
|
||||
if (deletedAt == undefined) {
|
||||
onSuccess();
|
||||
} else {
|
||||
onFail();
|
||||
}
|
||||
} catch (error) {
|
||||
handleError(error, $t('errors.unable_to_restore_user'));
|
||||
onFail();
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<ConfirmDialog
|
||||
title={$t('restore_user')}
|
||||
confirmText={$t('continue')}
|
||||
confirmColor="success"
|
||||
onClose={(confirmed) => (confirmed ? handleRestoreUser() : onCancel())}
|
||||
>
|
||||
{#snippet promptSnippet()}
|
||||
<p>
|
||||
<FormatMessage key="admin.user_restore_description" values={{ user: user.name }}>
|
||||
{#snippet children({ message })}
|
||||
<b>{message}</b>
|
||||
{/snippet}
|
||||
</FormatMessage>
|
||||
</p>
|
||||
{/snippet}
|
||||
</ConfirmDialog>
|
||||
|
|
@ -1,140 +0,0 @@
|
|||
<script lang="ts">
|
||||
import { featureFlags } from '$lib/stores/server-config.store';
|
||||
import { userInteraction } from '$lib/stores/user.svelte';
|
||||
import { ByteUnit, convertToBytes } from '$lib/utils/byte-units';
|
||||
import { handleError } from '$lib/utils/handle-error';
|
||||
import { createUserAdmin, type UserAdminResponseDto } from '@immich/sdk';
|
||||
import {
|
||||
Alert,
|
||||
Button,
|
||||
Field,
|
||||
HelperText,
|
||||
Input,
|
||||
Modal,
|
||||
ModalBody,
|
||||
ModalFooter,
|
||||
PasswordInput,
|
||||
Stack,
|
||||
Switch,
|
||||
} from '@immich/ui';
|
||||
import { t } from 'svelte-i18n';
|
||||
|
||||
interface Props {
|
||||
onClose: (user?: UserAdminResponseDto) => void;
|
||||
}
|
||||
|
||||
let { onClose }: Props = $props();
|
||||
|
||||
let error = $state('');
|
||||
let success = $state(false);
|
||||
|
||||
let email = $state('');
|
||||
let password = $state('');
|
||||
let passwordConfirm = $state('');
|
||||
let name = $state('');
|
||||
let shouldChangePassword = $state(true);
|
||||
let notify = $state(true);
|
||||
|
||||
let quotaSize: string | undefined = $state();
|
||||
let isCreatingUser = $state(false);
|
||||
|
||||
let quotaSizeInBytes = $derived(quotaSize === null ? null : convertToBytes(Number(quotaSize), ByteUnit.GiB));
|
||||
let quotaSizeWarning = $derived(
|
||||
quotaSizeInBytes && userInteraction.serverInfo && quotaSizeInBytes > userInteraction.serverInfo.diskSizeRaw,
|
||||
);
|
||||
|
||||
const passwordMismatch = $derived(password !== passwordConfirm && passwordConfirm.length > 0);
|
||||
const passwordMismatchMessage = $derived(passwordMismatch ? $t('password_does_not_match') : '');
|
||||
const valid = $derived(!passwordMismatch && !isCreatingUser);
|
||||
|
||||
const onSubmit = async (event: Event) => {
|
||||
event.preventDefault();
|
||||
|
||||
if (!valid) {
|
||||
return;
|
||||
}
|
||||
|
||||
isCreatingUser = true;
|
||||
error = '';
|
||||
|
||||
try {
|
||||
const user = await createUserAdmin({
|
||||
userAdminCreateDto: {
|
||||
email,
|
||||
password,
|
||||
shouldChangePassword,
|
||||
name,
|
||||
quotaSizeInBytes,
|
||||
notify,
|
||||
},
|
||||
});
|
||||
|
||||
success = true;
|
||||
|
||||
onClose(user);
|
||||
return;
|
||||
} catch (error) {
|
||||
handleError(error, $t('errors.unable_to_create_user'));
|
||||
} finally {
|
||||
isCreatingUser = false;
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<Modal title={$t('create_new_user')} {onClose} size="small" class="text-dark bg-light">
|
||||
<ModalBody>
|
||||
<form onsubmit={onSubmit} autocomplete="off" id="create-new-user-form">
|
||||
{#if error}
|
||||
<Alert color="danger" size="small" title={error} closable />
|
||||
{/if}
|
||||
|
||||
{#if success}
|
||||
<p class="text-sm text-immich-primary">{$t('new_user_created')}</p>
|
||||
{/if}
|
||||
|
||||
<Stack gap={4}>
|
||||
<Field label={$t('email')} required>
|
||||
<Input bind:value={email} type="email" />
|
||||
</Field>
|
||||
|
||||
{#if $featureFlags.email}
|
||||
<Field label={$t('admin.send_welcome_email')}>
|
||||
<Switch id="send-welcome-email" bind:checked={notify} class="text-sm" />
|
||||
</Field>
|
||||
{/if}
|
||||
|
||||
<Field label={$t('password')} required={!$featureFlags.oauth}>
|
||||
<PasswordInput id="password" bind:value={password} autocomplete="new-password" />
|
||||
</Field>
|
||||
|
||||
<Field label={$t('confirm_password')} required={!$featureFlags.oauth}>
|
||||
<PasswordInput id="confirmPassword" bind:value={passwordConfirm} autocomplete="new-password" />
|
||||
<HelperText color="danger">{passwordMismatchMessage}</HelperText>
|
||||
</Field>
|
||||
|
||||
<Field label={$t('admin.require_password_change_on_login')}>
|
||||
<Switch id="require-password-change" bind:checked={shouldChangePassword} class="text-sm text-start" />
|
||||
</Field>
|
||||
|
||||
<Field label={$t('name')} required>
|
||||
<Input bind:value={name} />
|
||||
</Field>
|
||||
|
||||
<Field label={$t('admin.quota_size_gib')}>
|
||||
<Input bind:value={quotaSize} type="number" placeholder={$t('unlimited')} min="0" />
|
||||
{#if quotaSizeWarning}
|
||||
<HelperText color="danger">{$t('errors.quota_higher_than_disk_size')}</HelperText>
|
||||
{/if}
|
||||
</Field>
|
||||
</Stack>
|
||||
</form>
|
||||
</ModalBody>
|
||||
|
||||
<ModalFooter>
|
||||
<div class="flex gap-3 w-full">
|
||||
<Button color="secondary" fullWidth onclick={() => onClose()} shape="round">{$t('cancel')}</Button>
|
||||
<Button type="submit" disabled={!valid} fullWidth shape="round" form="create-new-user-form">{$t('create')}</Button
|
||||
>
|
||||
</div>
|
||||
</ModalFooter>
|
||||
</Modal>
|
||||
|
|
@ -1,163 +0,0 @@
|
|||
<script lang="ts">
|
||||
import { AppRoute } from '$lib/constants';
|
||||
import { modalManager } from '$lib/managers/modal-manager.svelte';
|
||||
import { userInteraction } from '$lib/stores/user.svelte';
|
||||
import { ByteUnit, convertFromBytes, convertToBytes } from '$lib/utils/byte-units';
|
||||
import { handleError } from '$lib/utils/handle-error';
|
||||
import { updateUserAdmin, type UserAdminResponseDto } from '@immich/sdk';
|
||||
import { Button, Modal, ModalBody, ModalFooter } from '@immich/ui';
|
||||
import { mdiAccountEditOutline } from '@mdi/js';
|
||||
import { t } from 'svelte-i18n';
|
||||
|
||||
interface Props {
|
||||
user: UserAdminResponseDto;
|
||||
canResetPassword?: boolean;
|
||||
onClose: (
|
||||
data?: { action: 'update'; data: UserAdminResponseDto } | { action: 'resetPassword'; data: string },
|
||||
) => void;
|
||||
}
|
||||
|
||||
let { user, canResetPassword = true, onClose }: Props = $props();
|
||||
|
||||
let quotaSize = $state(user.quotaSizeInBytes === null ? null : convertFromBytes(user.quotaSizeInBytes, ByteUnit.GiB));
|
||||
let newPassword = $state<string>('');
|
||||
|
||||
const previousQutoa = user.quotaSizeInBytes;
|
||||
|
||||
let quotaSizeWarning = $derived(
|
||||
previousQutoa !== convertToBytes(Number(quotaSize), ByteUnit.GiB) &&
|
||||
!!quotaSize &&
|
||||
userInteraction.serverInfo &&
|
||||
convertToBytes(Number(quotaSize), ByteUnit.GiB) > userInteraction.serverInfo.diskSizeRaw,
|
||||
);
|
||||
|
||||
const editUser = async () => {
|
||||
try {
|
||||
const { id, email, name, storageLabel } = user;
|
||||
const newUser = await updateUserAdmin({
|
||||
id,
|
||||
userAdminUpdateDto: {
|
||||
email,
|
||||
name,
|
||||
storageLabel: storageLabel || '',
|
||||
quotaSizeInBytes: quotaSize === null ? null : convertToBytes(Number(quotaSize), ByteUnit.GiB),
|
||||
},
|
||||
});
|
||||
|
||||
onClose({ action: 'update', data: newUser });
|
||||
} catch (error) {
|
||||
handleError(error, $t('errors.unable_to_update_user'));
|
||||
}
|
||||
};
|
||||
|
||||
const resetPassword = async () => {
|
||||
const isConfirmed = await modalManager.openDialog({
|
||||
prompt: $t('admin.confirm_user_password_reset', { values: { user: user.name } }),
|
||||
});
|
||||
|
||||
if (!isConfirmed) {
|
||||
return;
|
||||
}
|
||||
|
||||
try {
|
||||
newPassword = generatePassword();
|
||||
|
||||
await updateUserAdmin({
|
||||
id: user.id,
|
||||
userAdminUpdateDto: {
|
||||
password: newPassword,
|
||||
shouldChangePassword: true,
|
||||
},
|
||||
});
|
||||
|
||||
onClose({ action: 'resetPassword', data: newPassword });
|
||||
} catch (error) {
|
||||
handleError(error, $t('errors.unable_to_reset_password'));
|
||||
}
|
||||
};
|
||||
|
||||
// TODO move password reset server-side
|
||||
function generatePassword(length: number = 16) {
|
||||
let generatedPassword = '';
|
||||
|
||||
const characterSet = '0123456789' + 'abcdefghijklmnopqrstuvwxyz' + 'ABCDEFGHIJKLMNOPQRSTUVWXYZ' + ',.-{}+!#$%/()=?';
|
||||
|
||||
for (let i = 0; i < length; i++) {
|
||||
let randomNumber = crypto.getRandomValues(new Uint32Array(1))[0];
|
||||
randomNumber = randomNumber / 2 ** 32;
|
||||
randomNumber = Math.floor(randomNumber * characterSet.length);
|
||||
|
||||
generatedPassword += characterSet[randomNumber];
|
||||
}
|
||||
|
||||
return generatedPassword;
|
||||
}
|
||||
|
||||
const onSubmit = async (event: Event) => {
|
||||
event.preventDefault();
|
||||
await editUser();
|
||||
};
|
||||
</script>
|
||||
|
||||
<Modal title={$t('edit_user')} size="small" icon={mdiAccountEditOutline} {onClose}>
|
||||
<ModalBody>
|
||||
<form onsubmit={onSubmit} autocomplete="off" id="edit-user-form">
|
||||
<div class="my-4 flex flex-col gap-2">
|
||||
<label class="immich-form-label" for="email">{$t('email')}</label>
|
||||
<input class="immich-form-input" id="email" name="email" type="email" bind:value={user.email} />
|
||||
</div>
|
||||
|
||||
<div class="my-4 flex flex-col gap-2">
|
||||
<label class="immich-form-label" for="name">{$t('name')}</label>
|
||||
<input class="immich-form-input" id="name" name="name" type="text" required bind:value={user.name} />
|
||||
</div>
|
||||
|
||||
<div class="my-4 flex flex-col gap-2">
|
||||
<label class="flex items-center gap-2 immich-form-label" for="quotaSize">
|
||||
{$t('admin.quota_size_gib')}
|
||||
{#if quotaSizeWarning}
|
||||
<p class="text-red-400 text-sm">{$t('errors.quota_higher_than_disk_size')}</p>
|
||||
{/if}</label
|
||||
>
|
||||
<input
|
||||
class="immich-form-input"
|
||||
id="quotaSize"
|
||||
name="quotaSize"
|
||||
placeholder={$t('unlimited')}
|
||||
type="number"
|
||||
min="0"
|
||||
bind:value={quotaSize}
|
||||
/>
|
||||
</div>
|
||||
|
||||
<div class="my-4 flex flex-col gap-2">
|
||||
<label class="immich-form-label" for="storage-label">{$t('storage_label')}</label>
|
||||
<input
|
||||
class="immich-form-input"
|
||||
id="storage-label"
|
||||
name="storage-label"
|
||||
type="text"
|
||||
bind:value={user.storageLabel}
|
||||
/>
|
||||
|
||||
<p>
|
||||
{$t('admin.note_apply_storage_label_previous_assets')}
|
||||
<a href={AppRoute.ADMIN_JOBS} class="text-immich-primary dark:text-immich-dark-primary">
|
||||
{$t('admin.storage_template_migration_job')}
|
||||
</a>
|
||||
</p>
|
||||
</div>
|
||||
</form>
|
||||
</ModalBody>
|
||||
|
||||
<ModalFooter>
|
||||
<div class="flex gap-3 w-full">
|
||||
{#if canResetPassword}
|
||||
<Button shape="round" color="warning" variant="filled" fullWidth onclick={resetPassword}
|
||||
>{$t('reset_password')}</Button
|
||||
>
|
||||
{/if}
|
||||
<Button type="submit" shape="round" fullWidth form="edit-user-form">{$t('confirm')}</Button>
|
||||
</div>
|
||||
</ModalFooter>
|
||||
</Modal>
|
||||
Loading…
Add table
Add a link
Reference in a new issue