refactor: user admin service (#23785)

web/src/lib/components/ActionButton.svelte

@@ -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}

web/src/lib/components/HeaderButton.svelte

@@ -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}

web/src/lib/components/TableButton.svelte

@@ -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}

web/src/lib/managers/event-manager.svelte.ts

@@ -1,5 +1,5 @@
 import type { ThemeSetting } from '$lib/managers/theme-manager.svelte';
-import type { AlbumResponseDto, LoginResponseDto, SharedLinkResponseDto } from '@immich/sdk';
+import type { AlbumResponseDto, LoginResponseDto, SharedLinkResponseDto, UserAdminResponseDto } from '@immich/sdk';
 
 export type Events = {
   AppInit: [];
@@ -14,6 +14,11 @@ export type Events = {
   SharedLinkCreate: [SharedLinkResponseDto];
   SharedLinkUpdate: [SharedLinkResponseDto];
   SharedLinkDelete: [SharedLinkResponseDto];
+
+  UserAdminCreate: [UserAdminResponseDto];
+  UserAdminUpdate: [UserAdminResponseDto];
+  UserAdminDelete: [UserAdminResponseDto];
+  UserAdminRestore: [UserAdminResponseDto];
 };
 
 type Listener<EventMap extends Record<string, unknown[]>, K extends keyof EventMap> = (...params: EventMap[K]) => void;

web/src/lib/modals/UserCreateModal.svelte

@@ -1,11 +1,9 @@
 <script lang="ts">
+  import { handleCreateUserAdmin } from '$lib/services/user-admin.service';
   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,
@@ -20,13 +18,12 @@
   } from '@immich/ui';
   import { t } from 'svelte-i18n';
 
-  interface Props {
-    onClose: (user?: UserAdminResponseDto) => void;
-  }
+  type Props = {
+    onClose: () => void;
+  };
 
   let { onClose }: Props = $props();
 
-  let error = $state('');
   let success = $state(false);
 
   let email = $state('');
@@ -57,40 +54,28 @@
     }
 
     isCreatingUser = true;
-    error = '';
 
-    try {
-      const user = await createUserAdmin({
-        userAdminCreateDto: {
-          email,
-          password,
-          shouldChangePassword,
-          name,
-          quotaSizeInBytes,
-          notify,
-          isAdmin,
-        },
-      });
+    const success = await handleCreateUserAdmin({
+      email,
+      password,
+      shouldChangePassword,
+      name,
+      quotaSizeInBytes,
+      notify,
+      isAdmin,
+    });
 
-      success = true;
-
-      onClose(user);
-      return;
-    } catch (error) {
-      handleError(error, $t('errors.unable_to_create_user'));
-    } finally {
-      isCreatingUser = false;
+    if (success) {
+      onClose();
     }
+
+    isCreatingUser = false;
   };
 </script>
 
 <Modal title={$t('create_new_user')} {onClose} size="small">
   <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}

web/src/lib/modals/UserDeleteConfirmModal.svelte

@@ -1,14 +1,15 @@
 <script lang="ts">
   import FormatMessage from '$lib/elements/FormatMessage.svelte';
+  import { handleDeleteUserAdmin } from '$lib/services/user-admin.service';
   import { serverConfig } from '$lib/stores/server-config.store';
-  import { handleError } from '$lib/utils/handle-error';
-  import { deleteUserAdmin, type UserAdminResponseDto, type UserResponseDto } from '@immich/sdk';
+  import { type UserAdminResponseDto } from '@immich/sdk';
   import { Alert, Checkbox, ConfirmModal, Field, Input, Label, Text } from '@immich/ui';
+  import { mdiTrashCanOutline } from '@mdi/js';
   import { t } from 'svelte-i18n';
 
   type Props = {
-    user: UserResponseDto;
-    onClose: (user?: UserAdminResponseDto) => void;
+    user: UserAdminResponseDto;
+    onClose: () => void;
   };
 
   let { user, onClose }: Props = $props();
@@ -17,22 +18,21 @@
   let email = $state('');
   let disabled = $derived(force && email !== user.email);
 
-  const handleClose = async (confirmed: boolean) => {
+  const handleClose = async (confirmed?: boolean) => {
     if (!confirmed) {
       onClose();
       return;
     }
 
-    try {
-      const result = await deleteUserAdmin({ id: user.id, userAdminDeleteDto: { force } });
-      onClose(result);
-    } catch (error) {
-      handleError(error, $t('errors.unable_to_delete_user'));
+    const success = await handleDeleteUserAdmin(user, { force });
+    if (success) {
+      onClose();
     }
   };
 </script>
 
 <ConfirmModal
+  icon={mdiTrashCanOutline}
   title={$t('delete_user')}
   confirmText={force ? $t('permanently_delete') : $t('delete')}
   onClose={handleClose}

web/src/lib/modals/UserEditModal.svelte

@@ -1,10 +1,10 @@
 <script lang="ts">
   import { AppRoute } from '$lib/constants';
+  import { handleUpdateUserAdmin } from '$lib/services/user-admin.service';
   import { user as authUser } from '$lib/stores/user.store';
   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 { type UserAdminResponseDto } from '@immich/sdk';
   import {
     Button,
     Field,
@@ -23,7 +23,7 @@
 
   interface Props {
     user: UserAdminResponseDto;
-    onClose: (data?: UserAdminResponseDto) => void;
+    onClose: () => void;
   }
 
   let { user, onClose }: Props = $props();
@@ -48,28 +48,20 @@
       quotaSizeBytes > userInteraction.serverInfo.diskSizeRaw,
   );
 
-  const handleEditUser = async () => {
-    try {
-      const newUser = await updateUserAdmin({
-        id: user.id,
-        userAdminUpdateDto: {
-          email,
-          name,
-          storageLabel,
-          quotaSizeInBytes: typeof quotaSize === 'number' ? convertToBytes(quotaSize, ByteUnit.GiB) : null,
-          isAdmin,
-        },
-      });
-
-      onClose(newUser);
-    } catch (error) {
-      handleError(error, $t('errors.unable_to_update_user'));
-    }
-  };
-
   const onSubmit = async (event: Event) => {
     event.preventDefault();
-    await handleEditUser();
+
+    const success = await handleUpdateUserAdmin(user, {
+      email,
+      name,
+      storageLabel,
+      quotaSizeInBytes: typeof quotaSize === 'number' ? convertToBytes(quotaSize, ByteUnit.GiB) : null,
+      isAdmin,
+    });
+
+    if (success) {
+      onClose();
+    }
   };
 </script>
 

web/src/lib/modals/UserRestoreConfirmModal.svelte

@@ -1,30 +1,39 @@
 <script lang="ts">
   import FormatMessage from '$lib/elements/FormatMessage.svelte';
-  import { handleError } from '$lib/utils/handle-error';
-  import { restoreUserAdmin, type UserAdminResponseDto, type UserResponseDto } from '@immich/sdk';
-  import { Button, HStack, Modal, ModalBody, ModalFooter } from '@immich/ui';
+  import { handleRestoreUserAdmin } from '$lib/services/user-admin.service';
+  import { type UserAdminResponseDto } from '@immich/sdk';
+  import { ConfirmModal } from '@immich/ui';
   import { mdiDeleteRestore } from '@mdi/js';
   import { t } from 'svelte-i18n';
 
-  interface Props {
-    user: UserResponseDto;
-    onClose: (user?: UserAdminResponseDto) => void;
-  }
+  type Props = {
+    user: UserAdminResponseDto;
+    onClose: () => void;
+  };
 
   let { user, onClose }: Props = $props();
 
-  const handleRestoreUser = async () => {
-    try {
-      const result = await restoreUserAdmin({ id: user.id });
-      onClose(result);
-    } catch (error) {
-      handleError(error, $t('errors.unable_to_restore_user'));
+  const handleClose = async (confirmed: boolean) => {
+    if (!confirmed) {
+      return;
+    }
+
+    const success = await handleRestoreUserAdmin(user);
+    if (success) {
+      onClose();
     }
   };
 </script>
 
-<Modal title={$t('restore_user')} {onClose} icon={mdiDeleteRestore} size="small">
-  <ModalBody>
+<ConfirmModal
+  icon={mdiDeleteRestore}
+  title={$t('restore_user')}
+  confirmText={$t('restore')}
+  confirmColor="primary"
+  size="small"
+  onClose={handleClose}
+>
+  {#snippet promptSnippet()}
     <p>
       <FormatMessage key="admin.user_restore_description" values={{ user: user.name }}>
         {#snippet children({ message })}
@@ -32,16 +41,5 @@
         {/snippet}
       </FormatMessage>
     </p>
-  </ModalBody>
-
-  <ModalFooter>
-    <HStack fullWidth>
-      <Button shape="round" color="secondary" fullWidth onclick={() => onClose()}>
-        {$t('cancel')}
-      </Button>
-      <Button shape="round" color="primary" fullWidth onclick={() => handleRestoreUser()}>
-        {$t('restore')}
-      </Button>
-    </HStack>
-  </ModalFooter>
-</Modal>
+  {/snippet}
+</ConfirmModal>

web/src/lib/services/album.service.ts

@@ -15,7 +15,6 @@ export const handleDeleteAlbum = async (album: AlbumResponseDto, options?: { pro
         ? $t('album_delete_confirmation', { values: { album: album.albumName } })
         : $t('unnamed_album_delete_confirmation');
     const description = $t('album_delete_confirmation_description');
-
     const success = await modalManager.showDialog({ prompt: `${confirmation} ${description}` });
     if (!success) {
       return false;
@@ -24,13 +23,10 @@ export const handleDeleteAlbum = async (album: AlbumResponseDto, options?: { pro
 
   try {
     await deleteAlbum({ id: album.id });
-
     eventManager.emit('AlbumDelete', album);
-
     if (notify) {
       toastManager.success();
     }
-
     return true;
   } catch (error) {
     handleError(error, $t('errors.unable_to_delete_album'));

web/src/lib/services/shared-link.service.ts

@@ -103,24 +103,19 @@ export const handleUpdateSharedLink = async (sharedLink: SharedLinkResponseDto,
 
 export const handleDeleteSharedLink = async (sharedLink: SharedLinkResponseDto): Promise<boolean> => {
   const $t = await getFormatter();
-
   const success = await modalManager.showDialog({
     title: $t('delete_shared_link'),
     prompt: $t('confirm_delete_shared_link'),
     confirmText: $t('delete'),
   });
-
   if (!success) {
     return false;
   }
 
   try {
     await removeSharedLink({ id: sharedLink.id });
-
     eventManager.emit('SharedLinkDelete', sharedLink);
-
     toastManager.success($t('deleted_shared_link'));
-
     return true;
   } catch (error) {
     handleError(error, $t('errors.unable_to_delete_shared_link'));
@@ -130,13 +125,11 @@ export const handleDeleteSharedLink = async (sharedLink: SharedLinkResponseDto):
 
 export const handleRemoveSharedLinkAssets = async (sharedLink: SharedLinkResponseDto, assetIds: string[]) => {
   const $t = await getFormatter();
-
   const success = await modalManager.showDialog({
     title: $t('remove_assets_title'),
     prompt: $t('remove_assets_shared_link_confirmation', { values: { count: assetIds.length } }),
     confirmText: $t('remove'),
   });
-
   if (!success) {
     return false;
   }

web/src/lib/services/user-admin.service.ts

@@ -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;
+  }
+};

web/src/lib/types.ts

@@ -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'> };