refactor: user admin service (#23785)

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>