feat(web): user detail page (#18230)

feat: user detail page

web/src/routes/admin/+page.ts

@@ -3,5 +3,5 @@ import { redirect } from '@sveltejs/kit';
 import type { PageLoad } from './$types';
 
 export const load = (() => {
-  redirect(302, AppRoute.ADMIN_USER_MANAGEMENT);
+  redirect(302, AppRoute.ADMIN_USERS);
 }) satisfies PageLoad;

web/src/routes/admin/user-management/+page.ts

@@ -1,18 +1,5 @@
-import { authenticate, requestServerInfo } from '$lib/utils/auth';
-import { getFormatter } from '$lib/utils/i18n';
-import { searchUsersAdmin } from '@immich/sdk';
+import { AppRoute } from '$lib/constants';
+import { redirect } from '@sveltejs/kit';
 import type { PageLoad } from './$types';
 
-export const load = (async () => {
-  await authenticate({ admin: true });
-  await requestServerInfo();
-  const allUsers = await searchUsersAdmin({ withDeleted: true });
-  const $t = await getFormatter();
-
-  return {
-    allUsers,
-    meta: {
-      title: $t('admin.user_management'),
-    },
-  };
-}) satisfies PageLoad;
+export const load = (() => redirect(307, AppRoute.ADMIN_USERS)) satisfies PageLoad;

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

@@ -6,7 +6,7 @@
     NotificationType,
     notificationController,
   } from '$lib/components/shared-components/notification/notification';
-  import PasswordResetSuccess from '$lib/forms/password-reset-success.svelte';
+  import { AppRoute } from '$lib/constants';
   import { modalManager } from '$lib/managers/modal-manager.svelte';
   import UserCreateModal from '$lib/modals/UserCreateModal.svelte';
   import UserDeleteConfirmModal from '$lib/modals/UserDeleteConfirmModal.svelte';
@@ -18,7 +18,7 @@
   import { websocketEvents } from '$lib/stores/websocket';
   import { getByteUnitString } from '$lib/utils/byte-units';
   import { UserStatus, searchUsersAdmin, type UserAdminResponseDto } from '@immich/sdk';
-  import { Button, IconButton } from '@immich/ui';
+  import { Button, IconButton, Link } from '@immich/ui';
   import { mdiDeleteRestore, mdiInfinity, mdiPencilOutline, mdiTrashCanOutline } from '@mdi/js';
   import { DateTime } from 'luxon';
   import { onMount } from 'svelte';
@@ -64,20 +64,9 @@
   };
 
   const handleEdit = async (dto: UserAdminResponseDto) => {
-    const result = await modalManager.show(UserEditModal, { user: dto, canResetPassword: dto.id !== $user.id });
-    switch (result?.action) {
-      case 'resetPassword': {
-        await modalManager.show(PasswordResetSuccess, { newPassword: result.data });
-        break;
-      }
-      case 'update': {
-        await refresh();
-        break;
-      }
-      case 'resetPinCode': {
-        notificationController.show({ type: NotificationType.Info, message: $t('pin_code_reset_successfully') });
-        break;
-      }
+    const result = await modalManager.show(UserEditModal, { user: dto });
+    if (result) {
+      await refresh();
     }
   };
 
@@ -123,7 +112,7 @@
                     : 'bg-immich-bg dark:bg-immich-dark-gray/50'}"
               >
                 <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}</td
+                  ><Link href="{AppRoute.ADMIN_USERS}/{immichUser.id}">{immichUser.email}</Link></td
                 >
                 <td class="hidden sm:block w-3/12 text-ellipsis break-all px-2 text-sm">{immichUser.name}</td>
                 <td class="hidden xl:block w-3/12 2xl:w-2/12 text-ellipsis break-all px-2 text-sm">

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

@@ -0,0 +1,18 @@
+import { authenticate, requestServerInfo } from '$lib/utils/auth';
+import { getFormatter } from '$lib/utils/i18n';
+import { searchUsersAdmin } from '@immich/sdk';
+import type { PageLoad } from './$types';
+
+export const load = (async () => {
+  await authenticate({ admin: true });
+  await requestServerInfo();
+  const allUsers = await searchUsersAdmin({ withDeleted: true });
+  const $t = await getFormatter();
+
+  return {
+    allUsers,
+    meta: {
+      title: $t('admin.user_management'),
+    },
+  };
+}) satisfies PageLoad;

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

@@ -0,0 +1,343 @@
+<script lang="ts">
+  import { goto } from '$app/navigation';
+  import StatsCard from '$lib/components/admin-page/server-stats/stats-card.svelte';
+  import UserPageLayout from '$lib/components/layouts/user-page-layout.svelte';
+  import {
+    notificationController,
+    NotificationType,
+  } from '$lib/components/shared-components/notification/notification';
+  import UserAvatar from '$lib/components/shared-components/user-avatar.svelte';
+  import { AppRoute } from '$lib/constants';
+  import PasswordResetSuccess from '$lib/forms/password-reset-success.svelte';
+  import { modalManager } from '$lib/managers/modal-manager.svelte';
+  import UserDeleteConfirmModal from '$lib/modals/UserDeleteConfirmModal.svelte';
+  import UserEditModal from '$lib/modals/UserEditModal.svelte';
+  import { locale } from '$lib/stores/preferences.store';
+  import { user as authUser } from '$lib/stores/user.store';
+  import { getBytesWithUnit } from '$lib/utils/byte-units';
+  import { handleError } from '$lib/utils/handle-error';
+  import { updateUserAdmin } from '@immich/sdk';
+  import {
+    Button,
+    Card,
+    CardBody,
+    CardHeader,
+    CardTitle,
+    Code,
+    Container,
+    Field,
+    getByteUnitString,
+    Heading,
+    HStack,
+    Icon,
+    Stack,
+    Switch,
+    Text,
+  } from '@immich/ui';
+  import {
+    mdiAccountOutline,
+    mdiCameraIris,
+    mdiChartPie,
+    mdiChartPieOutline,
+    mdiCheckCircle,
+    mdiFeatureSearchOutline,
+    mdiLockSmart,
+    mdiOnepassword,
+    mdiPencilOutline,
+    mdiPlayCircle,
+    mdiTrashCanOutline,
+  } from '@mdi/js';
+  import { t } from 'svelte-i18n';
+  import type { PageData } from './$types';
+
+  interface Props {
+    data: PageData;
+  }
+
+  let { data }: Props = $props();
+
+  let user = $derived(data.user);
+  const userPreferences = $derived(data.userPreferences);
+  const userStatistics = $derived(data.userStatistics);
+
+  const TiB = 1024 ** 4;
+  const usage = $derived(user.quotaUsageInBytes ?? 0);
+  let [statsUsage, statsUsageUnit] = $derived(getBytesWithUnit(usage, usage > TiB ? 2 : 0));
+
+  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>('');
+
+  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) {
+      await goto(AppRoute.ADMIN_USERS);
+    }
+  };
+
+  const getUsageClass = () => {
+    if (usedPercentage >= 95) {
+      return 'bg-red-500';
+    }
+
+    if (usedPercentage > 80) {
+      return 'bg-yellow-500';
+    }
+
+    return 'bg-immich-primary dark:bg-immich-dark-primary';
+  };
+
+  const handleResetPassword = 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,
+        },
+      });
+
+      await modalManager.show(PasswordResetSuccess, { newPassword });
+    } catch (error) {
+      handleError(error, $t('errors.unable_to_reset_password'));
+    }
+  };
+
+  const handleResetUserPinCode = async () => {
+    const isConfirmed = await modalManager.openDialog({
+      prompt: $t('admin.confirm_user_pin_code_reset', { values: { user: user.name } }),
+    });
+
+    if (!isConfirmed) {
+      return;
+    }
+
+    try {
+      await updateUserAdmin({ id: user.id, userAdminUpdateDto: { pinCode: null } });
+
+      notificationController.show({ type: NotificationType.Info, message: $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>
+
+<UserPageLayout title={data.meta.title} admin>
+  {#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>
+      <Button
+        color="danger"
+        size="small"
+        variant="ghost"
+        leadingIcon={mdiTrashCanOutline}
+        onclick={() => handleDelete()}
+      >
+        <Text class="hidden md:block">{$t('delete_user')}</Text>
+      </Button>
+    </HStack>
+  {/snippet}
+  <div>
+    <Container size="large" center>
+      <div class="grid gap-4 grod-cols-1 lg:grid-cols-2 w-full">
+        <div class="col-span-full flex gap-4 items-center my-4">
+          <UserAvatar {user} size="md" />
+          <Heading tag="h1" size="large">{user.name}</Heading>
+        </div>
+        <div class="col-span-full">
+          <div class="flex flex-col lg:flex-row gap-4 w-full">
+            <StatsCard icon={mdiCameraIris} title={$t('photos').toUpperCase()} value={userStatistics.images} />
+            <StatsCard icon={mdiPlayCircle} title={$t('videos').toUpperCase()} value={userStatistics.videos} />
+            <StatsCard
+              icon={mdiChartPie}
+              title={$t('storage').toUpperCase()}
+              value={statsUsage}
+              unit={statsUsageUnit}
+            />
+          </div>
+        </div>
+        <div>
+          <Card color="secondary">
+            <CardHeader>
+              <div class="flex items-center gap-2">
+                <Icon icon={mdiAccountOutline} size="1.5rem" />
+                <CardTitle>{$t('profile')}</CardTitle>
+              </div>
+            </CardHeader>
+            <CardBody>
+              <Stack gap={2}>
+                <div>
+                  <Heading tag="h3" size="tiny">{$t('name')}</Heading>
+                  <Text>{user.name}</Text>
+                </div>
+                <div>
+                  <Heading tag="h3" size="tiny">{$t('email')}</Heading>
+                  <Text>{user.email}</Text>
+                </div>
+                <div>
+                  <Heading tag="h3" size="tiny">{$t('created_at')}</Heading>
+                  <Text>{user.createdAt}</Text>
+                </div>
+                <div>
+                  <Heading tag="h3" size="tiny">{$t('updated_at')}</Heading>
+                  <Text>{user.updatedAt}</Text>
+                </div>
+                <div>
+                  <Heading tag="h3" size="tiny">{$t('id')}</Heading>
+                  <Code>{user.id}</Code>
+                </div>
+              </Stack>
+            </CardBody>
+          </Card>
+        </div>
+        <Card color="secondary">
+          <CardHeader>
+            <div class="flex items-center gap-2">
+              <Icon icon={mdiFeatureSearchOutline} size="1.5rem" />
+              <CardTitle>{$t('features')}</CardTitle>
+            </div>
+          </CardHeader>
+          <CardBody>
+            <div>
+              <Stack gap={2}>
+                <Field readOnly label={$t('email_notifications')}>
+                  <Switch checked={userPreferences.emailNotifications.enabled} color="primary" />
+                </Field>
+                <Field readOnly label={$t('folders')}>
+                  <Switch checked={userPreferences.folders.enabled} color="primary" />
+                </Field>
+                <Field readOnly label={$t('memories')}>
+                  <Switch checked={userPreferences.memories.enabled} color="primary" />
+                </Field>
+                <Field readOnly label={$t('people')}>
+                  <Switch checked={userPreferences.people.enabled} color="primary" />
+                </Field>
+                <Field readOnly label={$t('rating')}>
+                  <Switch checked={userPreferences.ratings.enabled} color="primary" />
+                </Field>
+                <Field readOnly label={$t('shared_links')}>
+                  <Switch checked={userPreferences.sharedLinks.enabled} color="primary" />
+                </Field>
+                <Field readOnly label={$t('show_supporter_badge')}>
+                  <Switch checked={userPreferences.purchase.showSupportBadge} color="primary" />
+                </Field>
+                <Field readOnly label={$t('tags')}>
+                  <Switch checked={userPreferences.tags.enabled} color="primary" />
+                </Field>
+              </Stack>
+            </div>
+          </CardBody>
+        </Card>
+        <Card color="secondary">
+          <CardHeader>
+            <div class="flex items-center gap-2">
+              <Icon icon={mdiChartPieOutline} size="1.5rem" />
+              <CardTitle>{$t('storage_quota')}</CardTitle>
+            </div>
+          </CardHeader>
+          <CardBody>
+            <div>
+              {#if user.quotaSizeInBytes !== null && user.quotaSizeInBytes >= 0}
+                <Text>
+                  {$t('storage_usage', {
+                    values: {
+                      used: getByteUnitString(usedBytes, $locale, 3),
+                      available: getByteUnitString(availableBytes, $locale, 3),
+                    },
+                  })}
+                </Text>
+              {:else}
+                <Text class="flex items-center gap-1">
+                  <Icon icon={mdiCheckCircle} size="1.25rem" class="text-success" />
+                  {$t('unlimited')}
+                </Text>
+              {/if}
+            </div>
+
+            {#if user.quotaSizeInBytes !== null && user.quotaSizeInBytes >= 0}
+              <div
+                class="storage-status p-4 mt-4 bg-gray-100 dark:bg-immich-dark-primary/10 rounded-lg text-sm w-full"
+                title={$t('storage_usage', {
+                  values: {
+                    used: getByteUnitString(usedBytes, $locale, 3),
+                    available: getByteUnitString(availableBytes, $locale, 3),
+                  },
+                })}
+              >
+                <p class="font-medium text-immich-dark-gray dark:text-white mb-2">{$t('storage')}</p>
+                <div class="mt-4 h-[7px] w-full rounded-full bg-gray-200 dark:bg-gray-700">
+                  <div class="h-[7px] rounded-full {getUsageClass()}" style="width: {usedPercentage}%"></div>
+                </div>
+              </div>
+            {/if}
+          </CardBody>
+        </Card>
+      </div>
+    </Container>
+  </div>
+</UserPageLayout>

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

@@ -0,0 +1,31 @@
+import { AppRoute } from '$lib/constants';
+import { authenticate, requestServerInfo } from '$lib/utils/auth';
+import { getFormatter } from '$lib/utils/i18n';
+import { getUserPreferencesAdmin, getUserStatisticsAdmin, searchUsersAdmin } from '@immich/sdk';
+import { redirect } from '@sveltejs/kit';
+import type { PageLoad } from './$types';
+
+export const load = (async ({ params }) => {
+  await authenticate({ admin: true });
+  await requestServerInfo();
+  const [user] = await searchUsersAdmin({ id: params.id }).catch(() => []);
+  if (!user) {
+    redirect(302, AppRoute.ADMIN_USERS);
+  }
+
+  const [userPreferences, userStatistics] = await Promise.all([
+    getUserPreferencesAdmin({ id: user.id }),
+    getUserStatisticsAdmin({ id: user.id }),
+  ]);
+
+  const $t = await getFormatter();
+
+  return {
+    user,
+    userPreferences,
+    userStatistics,
+    meta: {
+      title: $t('admin.user_details'),
+    },
+  };
+}) satisfies PageLoad;