refactor: user admin service (#23785)

e2e/src/web/specs/user-admin.e2e-spec.ts

@@ -52,7 +52,7 @@ test.describe('User Administration', () => {
 
     await page.goto(`/admin/users/${user.userId}`);
 
-    await page.getByRole('button', { name: 'Edit user' }).click();
+    await page.getByRole('button', { name: 'Edit' }).click();
     await expect(page.getByLabel('Admin User')).not.toBeChecked();
     await page.getByText('Admin User').click();
     await expect(page.getByLabel('Admin User')).toBeChecked();
@@ -77,7 +77,7 @@ test.describe('User Administration', () => {
 
     await page.goto(`/admin/users/${user.userId}`);
 
-    await page.getByRole('button', { name: 'Edit user' }).click();
+    await page.getByRole('button', { name: 'Edit' }).click();
     await expect(page.getByLabel('Admin User')).toBeChecked();
     await page.getByText('Admin User').click();
     await expect(page.getByLabel('Admin User')).not.toBeChecked();

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

web/src/routes/admin/users/+page.svelte

@@ -1,19 +1,16 @@
 <script lang="ts">
   import { page } from '$app/stores';
+  import HeaderButton from '$lib/components/HeaderButton.svelte';
   import AdminPageLayout from '$lib/components/layouts/AdminPageLayout.svelte';
-  import { AppRoute } from '$lib/constants';
-  import UserCreateModal from '$lib/modals/UserCreateModal.svelte';
-  import UserDeleteConfirmModal from '$lib/modals/UserDeleteConfirmModal.svelte';
-  import UserRestoreConfirmModal from '$lib/modals/UserRestoreConfirmModal.svelte';
+  import OnEvents from '$lib/components/OnEvents.svelte';
+  import TableButton from '$lib/components/TableButton.svelte';
+  import { getUserAdminActions, getUserAdminsActions } from '$lib/services/user-admin.service';
   import { locale } from '$lib/stores/preferences.store';
-  import { serverConfig } from '$lib/stores/server-config.store';
-  import { user } from '$lib/stores/user.store';
   import { websocketEvents } from '$lib/stores/websocket';
   import { getByteUnitString } from '$lib/utils/byte-units';
-  import { UserStatus, searchUsersAdmin, type UserAdminResponseDto } from '@immich/sdk';
-  import { Button, HStack, Icon, IconButton, Text, modalManager, toastManager } from '@immich/ui';
-  import { mdiDeleteRestore, mdiEyeOutline, mdiInfinity, mdiPlusBoxOutline, mdiTrashCanOutline } from '@mdi/js';
-  import { DateTime } from 'luxon';
+  import { searchUsersAdmin, type UserAdminResponseDto } from '@immich/sdk';
+  import { HStack, Icon, toastManager } from '@immich/ui';
+  import { mdiInfinity } from '@mdi/js';
   import { onMount } from 'svelte';
   import { t } from 'svelte-i18n';
   import type { PageData } from './$types';
@@ -44,36 +41,24 @@
     return websocketEvents.on('on_user_delete', onDeleteSuccess);
   });
 
-  const getDeleteDate = (deletedAt: string): Date => {
-    return DateTime.fromISO(deletedAt).plus({ days: $serverConfig.userDeleteDelay }).toJSDate();
-  };
+  const UserAdminsActions = $derived(getUserAdminsActions($t));
 
-  const handleCreate = async () => {
-    await modalManager.show(UserCreateModal);
+  const onUpdate = async () => {
     await refresh();
   };
-
-  const handleDelete = async (user: UserAdminResponseDto) => {
-    const result = await modalManager.show(UserDeleteConfirmModal, { user });
-    if (result) {
-      await refresh();
-    }
-  };
-
-  const handleRestore = async (user: UserAdminResponseDto) => {
-    const result = await modalManager.show(UserRestoreConfirmModal, { user });
-    if (result) {
-      await refresh();
-    }
-  };
 </script>
 
+<OnEvents
+  onUserAdminCreate={onUpdate}
+  onUserAdminUpdate={onUpdate}
+  onUserAdminDelete={onUpdate}
+  onUserAdminRestore={onUpdate}
+/>
+
 <AdminPageLayout title={data.meta.title}>
   {#snippet buttons()}
     <HStack gap={1}>
-      <Button leadingIcon={mdiPlusBoxOutline} onclick={handleCreate} size="small" variant="ghost" color="secondary">
-        <Text class="hidden md:block">{$t('create_user')}</Text>
-      </Button>
+      <HeaderButton action={UserAdminsActions.Create} />
     </HStack>
   {/snippet}
   <section id="setting-content" class="flex place-content-center sm:mx-4">
@@ -93,20 +78,21 @@
         </thead>
         <tbody class="block w-full overflow-y-auto rounded-md border dark:border-immich-dark-gray">
           {#if allUsers}
-            {#each allUsers as immichUser (immichUser.id)}
+            {#each allUsers as user (user.id)}
+              {@const UserAdminActions = getUserAdminActions($t, user)}
               <tr
-                class="flex h-20 overflow-hidden w-full place-items-center text-center dark:text-immich-dark-fg {immichUser.deletedAt
+                class="flex h-20 overflow-hidden w-full place-items-center text-center dark:text-immich-dark-fg {user.deletedAt
                   ? 'bg-red-300 dark:bg-red-900'
                   : 'even:bg-subtle/20 odd:bg-subtle/80'}"
               >
                 <td class="w-8/12 sm:w-5/12 lg:w-6/12 xl:w-4/12 2xl:w-5/12 text-ellipsis break-all px-2 text-sm">
-                  {immichUser.email}
+                  {user.email}
                 </td>
-                <td class="hidden sm:block w-3/12 text-ellipsis break-all px-2 text-sm">{immichUser.name}</td>
+                <td class="hidden sm:block w-3/12 text-ellipsis break-all px-2 text-sm">{user.name}</td>
                 <td class="hidden xl:block w-3/12 2xl:w-2/12 text-ellipsis break-all px-2 text-sm">
                   <div class="container mx-auto flex flex-wrap justify-center">
-                    {#if immichUser.quotaSizeInBytes !== null && immichUser.quotaSizeInBytes >= 0}
-                      {getByteUnitString(immichUser.quotaSizeInBytes, $locale)}
+                    {#if user.quotaSizeInBytes !== null && user.quotaSizeInBytes >= 0}
+                      {getByteUnitString(user.quotaSizeInBytes, $locale)}
                     {:else}
                       <Icon icon={mdiInfinity} size="16" />
                     {/if}
@@ -115,38 +101,8 @@
                 <td
                   class="flex flex-row flex-wrap justify-center gap-x-2 gap-y-1 w-4/12 lg:w-3/12 xl:w-2/12 text-ellipsis break-all text-sm"
                 >
-                  {#if !immichUser.deletedAt}
-                    <IconButton
-                      shape="round"
-                      size="medium"
-                      icon={mdiEyeOutline}
-                      title={$t('view_user')}
-                      href={`${AppRoute.ADMIN_USERS}/${immichUser.id}`}
-                      aria-label={$t('view_user')}
-                    />
-                    {#if immichUser.id !== $user.id}
-                      <IconButton
-                        shape="round"
-                        size="medium"
-                        icon={mdiTrashCanOutline}
-                        title={$t('delete_user')}
-                        onclick={() => handleDelete(immichUser)}
-                        aria-label={$t('delete_user')}
-                      />
-                    {/if}
-                  {/if}
-                  {#if immichUser.deletedAt && immichUser.status === UserStatus.Deleted}
-                    <IconButton
-                      shape="round"
-                      size="medium"
-                      icon={mdiDeleteRestore}
-                      title={$t('admin.user_restore_scheduled_removal', {
-                        values: { date: getDeleteDate(immichUser.deletedAt) },
-                      })}
-                      onclick={() => handleRestore(immichUser)}
-                      aria-label={$t('admin.user_restore_scheduled_removal')}
-                    />
-                  {/if}
+                  <TableButton action={UserAdminActions.View} />
+                  <TableButton action={UserAdminActions.ContextMenu} />
                 </td>
               </tr>
             {/each}

web/src/routes/admin/users/[id]/+page.svelte

@@ -1,22 +1,18 @@
 <script lang="ts">
+  import HeaderButton from '$lib/components/HeaderButton.svelte';
   import AdminPageLayout from '$lib/components/layouts/AdminPageLayout.svelte';
+  import OnEvents from '$lib/components/OnEvents.svelte';
   import ServerStatisticsCard from '$lib/components/server-statistics/ServerStatisticsCard.svelte';
   import UserAvatar from '$lib/components/shared-components/user-avatar.svelte';
   import DeviceCard from '$lib/components/user-settings-page/device-card.svelte';
   import FeatureSetting from '$lib/components/users/FeatureSetting.svelte';
-  import PasswordResetSuccessModal from '$lib/modals/PasswordResetSuccessModal.svelte';
-  import UserDeleteConfirmModal from '$lib/modals/UserDeleteConfirmModal.svelte';
-  import UserEditModal from '$lib/modals/UserEditModal.svelte';
-  import UserRestoreConfirmModal from '$lib/modals/UserRestoreConfirmModal.svelte';
+  import { getUserAdminActions } from '$lib/services/user-admin.service';
   import { locale } from '$lib/stores/preferences.store';
-  import { user as authUser } from '$lib/stores/user.store';
   import { createDateFormatter, findLocale } from '$lib/utils';
   import { getBytesWithUnit } from '$lib/utils/byte-units';
-  import { handleError } from '$lib/utils/handle-error';
-  import { updateUserAdmin } from '@immich/sdk';
+  import { type UserAdminResponseDto } from '@immich/sdk';
   import {
     Alert,
-    Button,
     Card,
     CardBody,
     CardHeader,
@@ -27,10 +23,8 @@
     Heading,
     HStack,
     Icon,
-    modalManager,
     Stack,
     Text,
-    toastManager,
   } from '@immich/ui';
   import {
     mdiAccountOutline,
@@ -38,12 +32,8 @@
     mdiChartPie,
     mdiChartPieOutline,
     mdiCheckCircle,
-    mdiDeleteRestore,
     mdiDevices,
     mdiFeatureSearchOutline,
-    mdiLockSmart,
-    mdiOnepassword,
-    mdiPencilOutline,
     mdiPlayCircle,
     mdiTrashCanOutline,
   } from '@mdi/js';
@@ -66,8 +56,6 @@
   const usedBytes = $derived(user.quotaUsageInBytes ?? 0);
   const availableBytes = $derived(user.quotaSizeInBytes ?? 1);
   let usedPercentage = $derived(Math.min(Math.round((usedBytes / availableBytes) * 100), 100));
-  let canResetPassword = $derived($authUser.id !== user.id);
-  let newPassword = $state<string>('');
 
   let editedLocale = $derived(findLocale($locale).code);
   let createAtDate: Date = $derived(new Date(user.createdAt));
@@ -75,27 +63,6 @@
   let userCreatedAtDateAndTime: string = $derived(createDateFormatter(editedLocale).formatDateTime(createAtDate));
   let userUpdatedAtDateAndTime: string = $derived(createDateFormatter(editedLocale).formatDateTime(updatedAtDate));
 
-  const handleEdit = async () => {
-    const result = await modalManager.show(UserEditModal, { user: { ...user } });
-    if (result) {
-      user = result;
-    }
-  };
-
-  const handleDelete = async () => {
-    const result = await modalManager.show(UserDeleteConfirmModal, { user });
-    if (result) {
-      user = result;
-    }
-  };
-
-  const handleRestore = async () => {
-    const result = await modalManager.show(UserRestoreConfirmModal, { user });
-    if (result) {
-      user = result;
-    }
-  };
-
   const getUsageClass = () => {
     if (usedPercentage >= 95) {
       return 'bg-red-500';
@@ -108,122 +75,25 @@
     return 'bg-primary';
   };
 
-  const handleResetPassword = async () => {
-    const isConfirmed = await modalManager.showDialog({
-      prompt: $t('admin.confirm_user_password_reset', { values: { user: user.name } }),
-    });
+  const UserAdminActions = $derived(getUserAdminActions($t, user));
 
-    if (!isConfirmed) {
-      return;
-    }
-
-    try {
-      newPassword = generatePassword();
-
-      await updateUserAdmin({
-        id: user.id,
-        userAdminUpdateDto: {
-          password: newPassword,
-          shouldChangePassword: true,
-        },
-      });
-
-      await modalManager.show(PasswordResetSuccessModal, { newPassword });
-    } catch (error) {
-      handleError(error, $t('errors.unable_to_reset_password'));
+  const onUpdate = (update: UserAdminResponseDto) => {
+    if (update.id === user.id) {
+      user = update;
     }
   };
-
-  const handleResetUserPinCode = async () => {
-    const isConfirmed = await modalManager.showDialog({
-      prompt: $t('admin.confirm_user_pin_code_reset', { values: { user: user.name } }),
-    });
-
-    if (!isConfirmed) {
-      return;
-    }
-
-    try {
-      await updateUserAdmin({ id: user.id, userAdminUpdateDto: { pinCode: null } });
-      toastManager.success($t('pin_code_reset_successfully'));
-    } catch (error) {
-      handleError(error, $t('errors.unable_to_reset_pin_code'));
-    }
-  };
-
-  // 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;
-  }
 </script>
 
+<OnEvents onUserAdminUpdate={onUpdate} onUserAdminDelete={onUpdate} onUserAdminRestore={onUpdate} />
+
 <AdminPageLayout title={data.meta.title}>
   {#snippet buttons()}
     <HStack gap={0}>
-      {#if canResetPassword}
-        <Button
-          color="secondary"
-          size="small"
-          variant="ghost"
-          leadingIcon={mdiOnepassword}
-          onclick={handleResetPassword}
-        >
-          <Text class="hidden md:block">{$t('reset_password')}</Text>
-        </Button>
-      {/if}
-
-      <Button
-        color="secondary"
-        size="small"
-        variant="ghost"
-        leadingIcon={mdiLockSmart}
-        onclick={handleResetUserPinCode}
-      >
-        <Text class="hidden md:block">{$t('reset_pin_code')}</Text>
-      </Button>
-      <Button
-        color="secondary"
-        size="small"
-        variant="ghost"
-        leadingIcon={mdiPencilOutline}
-        onclick={() => handleEdit()}
-      >
-        <Text class="hidden md:block">{$t('edit_user')}</Text>
-      </Button>
-      {#if user.deletedAt}
-        <Button
-          color="primary"
-          size="small"
-          variant="ghost"
-          leadingIcon={mdiDeleteRestore}
-          class="ms-1"
-          onclick={() => handleRestore()}
-        >
-          <Text class="hidden md:block">{$t('restore_user')}</Text>
-        </Button>
-      {:else}
-        <Button
-          color="danger"
-          size="small"
-          variant="ghost"
-          leadingIcon={mdiTrashCanOutline}
-          onclick={() => handleDelete()}
-        >
-          <Text class="hidden md:block">{$t('delete_user')}</Text>
-        </Button>
-      {/if}
+      <HeaderButton action={UserAdminActions.ResetPassword} />
+      <HeaderButton action={UserAdminActions.ResetPinCode} />
+      <HeaderButton action={UserAdminActions.Update} />
+      <HeaderButton action={UserAdminActions.Restore} />
+      <HeaderButton action={UserAdminActions.Delete} />
     </HStack>
   {/snippet}
   <div>