immich/web/src/routes/admin/user-management/+page.svelte

<script lang="ts">
  import { api, UserResponseDto } from '@api';
  import { onMount } from 'svelte';
  import Icon from '$lib/components/elements/icon.svelte';
  import FullScreenModal from '$lib/components/shared-components/full-screen-modal.svelte';
  import CreateUserForm from '$lib/components/forms/create-user-form.svelte';
  import EditUserForm from '$lib/components/forms/edit-user-form.svelte';
  import DeleteConfirmDialog from '$lib/components/admin-page/delete-confirm-dialoge.svelte';
  import RestoreDialogue from '$lib/components/admin-page/restore-dialoge.svelte';
  import { page } from '$app/stores';
  import { locale } from '$lib/stores/preferences.store';
  import Button from '$lib/components/elements/buttons/button.svelte';
  import UserPageLayout from '$lib/components/layouts/user-page-layout.svelte';
  import type { PageData } from './$types';
  import { mdiCheck, mdiClose, mdiDeleteRestore, mdiPencilOutline, mdiTrashCanOutline } from '@mdi/js';

  export let data: PageData;

  let allUsers: UserResponseDto[] = [];
  let shouldShowEditUserForm = false;
  let shouldShowCreateUserForm = false;
  let shouldShowInfoPanel = false;
  let shouldShowDeleteConfirmDialog = false;
  let shouldShowRestoreDialog = false;
  let selectedUser: UserResponseDto;

  onMount(() => {
    allUsers = $page.data.allUsers;
  });

  const isDeleted = (user: UserResponseDto): boolean => {
    return user.deletedAt != null;
  };

  const deleteDateFormat: Intl.DateTimeFormatOptions = {
    month: 'long',
    day: 'numeric',
    year: 'numeric',
  };

  const getDeleteDate = (user: UserResponseDto): string => {
    let deletedAt = new Date(user.deletedAt ? user.deletedAt : Date.now());
    deletedAt.setDate(deletedAt.getDate() + 7);
    return deletedAt.toLocaleString($locale, deleteDateFormat);
  };

  const onUserCreated = async () => {
    const getAllUsersRes = await api.userApi.getAllUsers({ isAll: false });
    allUsers = getAllUsersRes.data;
    shouldShowCreateUserForm = false;
  };

  const editUserHandler = async (user: UserResponseDto) => {
    selectedUser = user;
    shouldShowEditUserForm = true;
  };

  const onEditUserSuccess = async () => {
    const getAllUsersRes = await api.userApi.getAllUsers({ isAll: false });
    allUsers = getAllUsersRes.data;
    shouldShowEditUserForm = false;
  };

  const onEditPasswordSuccess = async () => {
    const getAllUsersRes = await api.userApi.getAllUsers({ isAll: false });
    allUsers = getAllUsersRes.data;
    shouldShowEditUserForm = false;
    shouldShowInfoPanel = true;
  };

  const deleteUserHandler = async (user: UserResponseDto) => {
    selectedUser = user;
    shouldShowDeleteConfirmDialog = true;
  };

  const onUserDeleteSuccess = async () => {
    const getAllUsersRes = await api.userApi.getAllUsers({ isAll: false });
    allUsers = getAllUsersRes.data;
    shouldShowDeleteConfirmDialog = false;
  };

  const onUserDeleteFail = async () => {
    const getAllUsersRes = await api.userApi.getAllUsers({ isAll: false });
    allUsers = getAllUsersRes.data;
    shouldShowDeleteConfirmDialog = false;
  };

  const restoreUserHandler = async (user: UserResponseDto) => {
    selectedUser = user;
    shouldShowRestoreDialog = true;
  };

  const onUserRestoreSuccess = async () => {
    const getAllUsersRes = await api.userApi.getAllUsers({ isAll: false });
    allUsers = getAllUsersRes.data;
    shouldShowRestoreDialog = false;
  };

  const onUserRestoreFail = async () => {
    // show fail dialog
    const getAllUsersRes = await api.userApi.getAllUsers({ isAll: false });
    allUsers = getAllUsersRes.data;
    shouldShowRestoreDialog = false;
  };
</script>

<UserPageLayout user={data.user} title={data.meta.title} admin>
  <section id="setting-content" class="flex place-content-center sm:mx-4">
    <section class="w-full pb-28 sm:w-5/6 md:w-[850px]">
      {#if shouldShowCreateUserForm}
        <FullScreenModal on:clickOutside={() => (shouldShowCreateUserForm = false)}>
          <CreateUserForm on:user-created={onUserCreated} on:cancel={() => (shouldShowCreateUserForm = false)} />
        </FullScreenModal>
      {/if}

      {#if shouldShowEditUserForm}
        <FullScreenModal on:clickOutside={() => (shouldShowEditUserForm = false)}>
          <EditUserForm
            user={selectedUser}
            canResetPassword={selectedUser?.id !== data.user.id}
            on:edit-success={onEditUserSuccess}
            on:reset-password-success={onEditPasswordSuccess}
          />
        </FullScreenModal>
      {/if}

      {#if shouldShowDeleteConfirmDialog}
        <DeleteConfirmDialog
          user={selectedUser}
          on:user-delete-success={onUserDeleteSuccess}
          on:user-delete-fail={onUserDeleteFail}
          on:cancel={() => (shouldShowDeleteConfirmDialog = false)}
        />
      {/if}

      {#if shouldShowRestoreDialog}
        <RestoreDialogue
          user={selectedUser}
          on:user-restore-success={onUserRestoreSuccess}
          on:user-restore-fail={onUserRestoreFail}
          on:cancel={() => (shouldShowRestoreDialog = false)}
        />
      {/if}

      {#if shouldShowInfoPanel}
        <FullScreenModal on:clickOutside={() => (shouldShowInfoPanel = false)}>
          <div class="w-[500px] max-w-[95vw] rounded-3xl border bg-white p-8 text-sm shadow-sm">
            <h1 class="mb-4 text-lg font-medium text-immich-primary">Password reset success</h1>

            <p>
              The user's password has been reset to the default <code
                class="rounded-md bg-gray-200 px-2 py-1 font-bold text-immich-primary">password</code
              >
              <br />
              Please inform the user, and they will need to change the password at the next log-on.
            </p>

            <div class="mt-6 flex w-full">
              <Button fullwidth on:click={() => (shouldShowInfoPanel = false)}>Done</Button>
            </div>
          </div>
        </FullScreenModal>
      {/if}

      <table class="my-5 hidden w-full text-left sm:block">
        <thead
          class="mb-4 flex h-12 w-full rounded-md border bg-gray-50 text-immich-primary dark:border-immich-dark-gray dark:bg-immich-dark-gray dark:text-immich-dark-primary"
        >
          <tr class="flex w-full place-items-center">
            <th class="w-4/12 text-center text-sm font-medium">Email</th>
            <th class="w-2/12 text-center text-sm font-medium">Name</th>
            <th class="w-2/12 text-center text-sm font-medium">Can import</th>
            <th class="w-2/12 text-center text-sm font-medium">Action</th>
          </tr>
        </thead>
        <tbody class="block max-h-[320px] w-full overflow-y-auto rounded-md border dark:border-immich-dark-gray">
          {#if allUsers}
            {#each allUsers as user, i}
              <tr
                class={`flex h-[80px] w-full place-items-center text-center dark:text-immich-dark-fg ${
                  isDeleted(user)
                    ? 'bg-red-300 dark:bg-red-900'
                    : i % 2 == 0
                      ? 'bg-immich-gray dark:bg-immich-dark-gray/75'
                      : 'bg-immich-bg dark:bg-immich-dark-gray/50'
                }`}
              >
                <td class="w-4/12 text-ellipsis break-all px-2 text-sm">{user.email}</td>
                <td class="w-2/12 text-ellipsis break-all px-2 text-sm">{user.name}</td>
                <td class="w-2/12 text-ellipsis break-all px-2 text-sm">
                  <div class="container mx-auto flex flex-wrap justify-center">
                    {#if user.externalPath}
                      <Icon path={mdiCheck} size="16" />
                    {:else}
                      <Icon path={mdiClose} size="16" />
                    {/if}
                  </div>
                </td>
                <td class="w-2/12 text-ellipsis break-all px-4 text-sm">
                  {#if !isDeleted(user)}
                    <button
                      on:click={() => editUserHandler(user)}
                      class="rounded-full bg-immich-primary p-3 text-gray-100 transition-all duration-150 hover:bg-immich-primary/75 dark:bg-immich-dark-primary dark:text-gray-700"
                    >
                      <Icon path={mdiPencilOutline} size="16" />
                    </button>
                    {#if user.id !== data.user.id}
                      <button
                        on:click={() => deleteUserHandler(user)}
                        class="rounded-full bg-immich-primary p-3 text-gray-100 transition-all duration-150 hover:bg-immich-primary/75 dark:bg-immich-dark-primary dark:text-gray-700"
                      >
                        <Icon path={mdiTrashCanOutline} size="16" />
                      </button>
                    {/if}
                  {/if}
                  {#if isDeleted(user)}
                    <button
                      on:click={() => restoreUserHandler(user)}
                      class="rounded-full bg-immich-primary p-3 text-gray-100 transition-all duration-150 hover:bg-immich-primary/75 dark:bg-immich-dark-primary dark:text-gray-700"
                      title={`scheduled removal on ${getDeleteDate(user)}`}
                    >
                      <Icon path={mdiDeleteRestore} size="16" />
                    </button>
                  {/if}
                </td>
              </tr>
            {/each}
          {/if}
        </tbody>
      </table>

      <table class="my-5 block w-full text-left sm:hidden">
        <thead
          class="mb-4 flex h-12 w-full rounded-md border bg-gray-50 text-immich-primary dark:border-immich-dark-gray dark:bg-immich-dark-gray dark:text-immich-dark-primary"
        >
          <tr class="flex w-full place-items-center">
            <th class="w-1/4 text-center text-sm font-medium">Name</th>
            <th class="w-1/2 text-center text-sm font-medium">Email</th>
            <th class="w-1/4 text-center text-sm font-medium">Action</th>
          </tr>
        </thead>
        <tbody class="block max-h-[320px] w-full overflow-y-auto rounded-md border dark:border-immich-dark-gray">
          {#if allUsers}
            {#each allUsers as user, i}
              <tr
                class={`flex h-[80px] w-full place-items-center text-center dark:text-immich-dark-fg ${
                  isDeleted(user)
                    ? 'bg-red-300 dark:bg-red-900'
                    : i % 2 == 0
                      ? 'bg-immich-gray dark:bg-immich-dark-gray/75'
                      : 'bg-immich-bg dark:bg-immich-dark-gray/50'
                }`}
              >
                <td class="w-1/4 text-ellipsis break-words px-2 text-sm">{user.name}</td>
                <td class="w-1/2 text-ellipsis break-all px-2 text-sm">{user.email}</td>
                <td class="w-1/4 text-ellipsis px-2 text-sm">
                  {#if !isDeleted(user)}
                    <button
                      on:click={() => editUserHandler(user)}
                      class="rounded-full bg-immich-primary p-2 text-gray-100 transition-all duration-150 hover:bg-immich-primary/75 dark:bg-immich-dark-primary dark:text-gray-700 max-sm:mb-1 sm:p-3"
                    >
                      <Icon path={mdiPencilOutline} size="16" />
                    </button>
                    <button
                      on:click={() => deleteUserHandler(user)}
                      class="rounded-full bg-immich-primary p-2 text-gray-100 transition-all duration-150 hover:bg-immich-primary/75 dark:bg-immich-dark-primary dark:text-gray-700 sm:p-3"
                    >
                      <Icon path={mdiTrashCanOutline} size="16" />
                    </button>
                  {/if}
                  {#if isDeleted(user)}
                    <button
                      on:click={() => restoreUserHandler(user)}
                      class="rounded-full bg-immich-primary p-2 text-gray-100 transition-all duration-150 hover:bg-immich-primary/75 dark:bg-immich-dark-primary dark:text-gray-700 sm:p-3"
                      title={`scheduled removal on ${getDeleteDate(user)}`}
                    >
                      <Icon path={mdiDeleteRestore} size="16" />
                    </button>
                  {/if}
                </td>
              </tr>
            {/each}
          {/if}
        </tbody>
      </table>

      <Button size="sm" on:click={() => (shouldShowCreateUserForm = true)}>Create user</Button>
    </section>
  </section>
</UserPageLayout>