mirror of https://github.com/immich-app/immich.git
refactor: user admin service (#23785)
Jason Rasmussen
GitHub
parent
2611e2ec20
commit
2f40f5aad8
@ -1,19 +1,16 @@
|
||||
<script lang="ts">
|
||||
import { IconButton, type MenuItem } from '@immich/ui';
|
||||
import type { ActionItem } from '$lib/types';
|
||||
import { IconButton, type IconButtonProps } from '@immich/ui';
|
||||
|
||||
type Props = {
|
||||
action: MenuItem;
|
||||
action: ActionItem;
|
||||
};
|
||||
|
||||
const { action }: Props = $props();
|
||||
const { title, icon, onSelect } = $derived(action);
|
||||
const { title, icon, color = 'secondary', props: other = {}, onSelect } = $derived(action);
|
||||
const onclick = (event: Event) => onSelect?.({ event, item: action });
|
||||
</script>
|
||||
|
||||
<IconButton
|
||||
shape="round"
|
||||
color="secondary"
|
||||
variant="ghost"
|
||||
{icon}
|
||||
aria-label={title}
|
||||
onclick={(event: Event) => onSelect?.({ event, item: action })}
|
||||
/>
|
||||
{#if action.$if?.() ?? true}
|
||||
<IconButton variant="ghost" {color} shape="round" {...other as IconButtonProps} {icon} aria-label={title} {onclick} />
|
||||
{/if}
|
||||
|
||||
@ -0,0 +1,18 @@
|
||||
<script lang="ts">
|
||||
import type { ActionItem } from '$lib/types';
|
||||
import { Button, type ButtonProps, Text } from '@immich/ui';
|
||||
|
||||
type Props = {
|
||||
action: ActionItem;
|
||||
};
|
||||
|
||||
const { action }: Props = $props();
|
||||
const { title, icon, color = 'secondary', props: other = {}, onSelect } = $derived(action);
|
||||
const onclick = (event: Event) => onSelect?.({ event, item: action });
|
||||
</script>
|
||||
|
||||
{#if action.$if?.() ?? true}
|
||||
<Button variant="ghost" size="small" {color} {...other as ButtonProps} leadingIcon={icon} {onclick}>
|
||||
<Text class="hidden md:block">{title}</Text>
|
||||
</Button>
|
||||
{/if}
|
||||
@ -0,0 +1,16 @@
|
||||
<script lang="ts">
|
||||
import type { ActionItem } from '$lib/types';
|
||||
import { IconButton, type IconButtonProps } from '@immich/ui';
|
||||
|
||||
type Props = {
|
||||
action: ActionItem;
|
||||
};
|
||||
|
||||
const { action }: Props = $props();
|
||||
const { title, icon, props: other = {}, onSelect } = $derived(action);
|
||||
const onclick = (event: Event) => onSelect?.({ event, item: action });
|
||||
</script>
|
||||
|
||||
{#if action.$if?.() ?? true}
|
||||
<IconButton shape="round" color="primary" {...other as IconButtonProps} {icon} aria-label={title} {onclick} />
|
||||
{/if}
|
||||
@ -0,0 +1,232 @@
|
||||
import { goto } from '$app/navigation';
|
||||
import { eventManager } from '$lib/managers/event-manager.svelte';
|
||||
import PasswordResetSuccessModal from '$lib/modals/PasswordResetSuccessModal.svelte';
|
||||
import UserCreateModal from '$lib/modals/UserCreateModal.svelte';
|
||||
import UserDeleteConfirmModal from '$lib/modals/UserDeleteConfirmModal.svelte';
|
||||
import UserEditModal from '$lib/modals/UserEditModal.svelte';
|
||||
import UserRestoreConfirmModal from '$lib/modals/UserRestoreConfirmModal.svelte';
|
||||
import { serverConfig } from '$lib/stores/server-config.store';
|
||||
import { user as authUser } from '$lib/stores/user.store';
|
||||
import type { ActionItem } from '$lib/types';
|
||||
import { handleError } from '$lib/utils/handle-error';
|
||||
import { getFormatter } from '$lib/utils/i18n';
|
||||
import {
|
||||
createUserAdmin,
|
||||
deleteUserAdmin,
|
||||
restoreUserAdmin,
|
||||
updateUserAdmin,
|
||||
UserStatus,
|
||||
type UserAdminCreateDto,
|
||||
type UserAdminDeleteDto,
|
||||
type UserAdminResponseDto,
|
||||
type UserAdminUpdateDto,
|
||||
} from '@immich/sdk';
|
||||
import { MenuItemType, menuManager, modalManager, toastManager } from '@immich/ui';
|
||||
import {
|
||||
mdiDeleteRestore,
|
||||
mdiDotsVertical,
|
||||
mdiEyeOutline,
|
||||
mdiLockReset,
|
||||
mdiLockSmart,
|
||||
mdiPencilOutline,
|
||||
mdiPlusBoxOutline,
|
||||
mdiTrashCanOutline,
|
||||
} from '@mdi/js';
|
||||
import { DateTime } from 'luxon';
|
||||
import type { MessageFormatter } from 'svelte-i18n';
|
||||
import { get } from 'svelte/store';
|
||||
|
||||
const getDeleteDate = (deletedAt: string): Date =>
|
||||
DateTime.fromISO(deletedAt)
|
||||
.plus({ days: get(serverConfig).userDeleteDelay })
|
||||
.toJSDate();
|
||||
|
||||
export const getUserAdminsActions = ($t: MessageFormatter) => {
|
||||
const Create: ActionItem = {
|
||||
title: $t('create_user'),
|
||||
icon: mdiPlusBoxOutline,
|
||||
onSelect: () => void modalManager.show(UserCreateModal, {}),
|
||||
};
|
||||
|
||||
return { Create };
|
||||
};
|
||||
|
||||
export const getUserAdminActions = ($t: MessageFormatter, user: UserAdminResponseDto) => {
|
||||
const View: ActionItem = {
|
||||
icon: mdiEyeOutline,
|
||||
title: $t('view'),
|
||||
onSelect: () => void goto(`/admin/users/${user.id}`),
|
||||
};
|
||||
|
||||
const Update: ActionItem = {
|
||||
icon: mdiPencilOutline,
|
||||
title: $t('edit'),
|
||||
onSelect: () => void modalManager.show(UserEditModal, { user }),
|
||||
};
|
||||
|
||||
const Delete: ActionItem = {
|
||||
icon: mdiTrashCanOutline,
|
||||
title: $t('delete'),
|
||||
color: 'danger',
|
||||
$if: () => get(authUser).id !== user.id && !user.deletedAt,
|
||||
onSelect: () => void modalManager.show(UserDeleteConfirmModal, { user }),
|
||||
};
|
||||
|
||||
const Restore: ActionItem = {
|
||||
icon: mdiDeleteRestore,
|
||||
title: $t('restore'),
|
||||
color: 'primary',
|
||||
$if: () => !!user.deletedAt && user.status === UserStatus.Deleted,
|
||||
onSelect: () => void modalManager.show(UserRestoreConfirmModal, { user }),
|
||||
props: {
|
||||
title: $t('admin.user_restore_scheduled_removal', {
|
||||
values: { date: getDeleteDate(user.deletedAt!) },
|
||||
}),
|
||||
},
|
||||
};
|
||||
|
||||
const ResetPassword: ActionItem = {
|
||||
icon: mdiLockReset,
|
||||
title: $t('reset_password'),
|
||||
$if: () => get(authUser).id !== user.id,
|
||||
onSelect: () => void handleResetPasswordUserAdmin(user),
|
||||
};
|
||||
|
||||
const ResetPinCode: ActionItem = {
|
||||
icon: mdiLockSmart,
|
||||
title: $t('reset_pin_code'),
|
||||
onSelect: () => void handleResetPinCodeUserAdmin(user),
|
||||
};
|
||||
|
||||
const ContextMenu: ActionItem = {
|
||||
icon: mdiDotsVertical,
|
||||
title: $t('actions'),
|
||||
onSelect: ({ event }) =>
|
||||
void menuManager.show({
|
||||
target: event.currentTarget as HTMLElement,
|
||||
position: 'top-right',
|
||||
items: [
|
||||
View,
|
||||
Update,
|
||||
ResetPassword,
|
||||
ResetPinCode,
|
||||
get(authUser).id === user.id ? undefined : MenuItemType.Divider,
|
||||
Restore,
|
||||
Delete,
|
||||
].filter(Boolean),
|
||||
}),
|
||||
};
|
||||
|
||||
return { View, Update, Delete, Restore, ResetPassword, ResetPinCode, ContextMenu };
|
||||
};
|
||||
|
||||
export const handleCreateUserAdmin = async (dto: UserAdminCreateDto) => {
|
||||
const $t = await getFormatter();
|
||||
|
||||
try {
|
||||
const response = await createUserAdmin({ userAdminCreateDto: dto });
|
||||
eventManager.emit('UserAdminCreate', response);
|
||||
toastManager.success();
|
||||
return true;
|
||||
} catch (error) {
|
||||
handleError(error, $t('errors.unable_to_create_user'));
|
||||
}
|
||||
};
|
||||
|
||||
export const handleUpdateUserAdmin = async (user: UserAdminResponseDto, dto: UserAdminUpdateDto) => {
|
||||
const $t = await getFormatter();
|
||||
|
||||
try {
|
||||
const response = await updateUserAdmin({ id: user.id, userAdminUpdateDto: dto });
|
||||
eventManager.emit('UserAdminUpdate', response);
|
||||
toastManager.success();
|
||||
return true;
|
||||
} catch (error) {
|
||||
handleError(error, $t('errors.unable_to_update_user'));
|
||||
return false;
|
||||
}
|
||||
};
|
||||
|
||||
export const handleDeleteUserAdmin = async (user: UserAdminResponseDto, dto: UserAdminDeleteDto) => {
|
||||
const $t = await getFormatter();
|
||||
|
||||
try {
|
||||
const result = await deleteUserAdmin({ id: user.id, userAdminDeleteDto: dto });
|
||||
eventManager.emit('UserAdminDelete', result);
|
||||
toastManager.success();
|
||||
return true;
|
||||
} catch (error) {
|
||||
handleError(error, $t('errors.unable_to_delete_user'));
|
||||
}
|
||||
};
|
||||
|
||||
export const handleRestoreUserAdmin = async (user: UserAdminResponseDto) => {
|
||||
const $t = await getFormatter();
|
||||
|
||||
try {
|
||||
const response = await restoreUserAdmin({ id: user.id });
|
||||
eventManager.emit('UserAdminRestore', response);
|
||||
toastManager.success();
|
||||
return true;
|
||||
} catch (error) {
|
||||
handleError(error, $t('errors.unable_to_restore_user'));
|
||||
return false;
|
||||
}
|
||||
};
|
||||
|
||||
// TODO move password reset server-side
|
||||
const 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;
|
||||
};
|
||||
|
||||
export const handleResetPasswordUserAdmin = async (user: UserAdminResponseDto) => {
|
||||
const $t = await getFormatter();
|
||||
const prompt = $t('admin.confirm_user_password_reset', { values: { user: user.name } });
|
||||
const success = await modalManager.showDialog({ prompt });
|
||||
if (!success) {
|
||||
return false;
|
||||
}
|
||||
|
||||
try {
|
||||
const dto = { password: generatePassword(), shouldChangePassword: true };
|
||||
const response = await updateUserAdmin({ id: user.id, userAdminUpdateDto: dto });
|
||||
eventManager.emit('UserAdminUpdate', response);
|
||||
toastManager.success();
|
||||
await modalManager.show(PasswordResetSuccessModal, { newPassword: dto.password });
|
||||
return true;
|
||||
} catch (error) {
|
||||
handleError(error, $t('errors.unable_to_reset_password'));
|
||||
return false;
|
||||
}
|
||||
};
|
||||
|
||||
export const handleResetPinCodeUserAdmin = async (user: UserAdminResponseDto) => {
|
||||
const $t = await getFormatter();
|
||||
const prompt = $t('admin.confirm_user_pin_code_reset', { values: { user: user.name } });
|
||||
const success = await modalManager.showDialog({ prompt });
|
||||
if (!success) {
|
||||
return false;
|
||||
}
|
||||
|
||||
try {
|
||||
const response = await updateUserAdmin({ id: user.id, userAdminUpdateDto: { pinCode: null } });
|
||||
eventManager.emit('UserAdminUpdate', response);
|
||||
toastManager.success($t('pin_code_reset_successfully'));
|
||||
return true;
|
||||
} catch (error) {
|
||||
handleError(error, $t('errors.unable_to_reset_pin_code'));
|
||||
return false;
|
||||
}
|
||||
};
|
||||
@ -0,0 +1,4 @@
|
||||
import type { MenuItem } from '@immich/ui';
|
||||
import type { HTMLAttributes } from 'svelte/elements';
|
||||
|
||||
export type ActionItem = MenuItem & { props?: Omit<HTMLAttributes<HTMLElement>, 'color'> };
|
||||
Loading…
Reference in New Issue