feat: modal routes (#24726)

feat: new user route

web/src/lib/constants.ts

@@ -1,3 +1,5 @@
+export const UUID_REGEX = /^[\dA-Fa-f]{8}(?:\b-[\dA-Fa-f]{4}){3}\b-[\dA-Fa-f]{12}$/;
+
 export enum AssetAction {
   ARCHIVE = 'archive',
   UNARCHIVE = 'unarchive',
@@ -20,7 +22,9 @@ export enum AssetAction {
 
 export enum AppRoute {
   ADMIN_USERS = '/admin/users',
-  ADMIN_LIBRARY_MANAGEMENT = '/admin/library-management',
+  ADMIN_USERS_NEW = '/admin/users/new',
+  ADMIN_LIBRARIES = '/admin/library-management',
+  ADMIN_LIBRARIES_NEW = '/admin/library-management/new',
   ADMIN_SETTINGS = '/admin/system-settings',
   ADMIN_STATS = '/admin/server-status',
   ADMIN_QUEUES = '/admin/queues',

web/src/lib/modals/LibraryCreateModal.svelte

@@ -1,44 +0,0 @@
-<script lang="ts">
-  import SettingSelect from '$lib/components/shared-components/settings/setting-select.svelte';
-  import { handleCreateLibrary } from '$lib/services/library.service';
-  import { user } from '$lib/stores/user.store';
-  import { searchUsersAdmin } from '@immich/sdk';
-  import { FormModal, Text } from '@immich/ui';
-  import { mdiFolderSync } from '@mdi/js';
-  import { onMount } from 'svelte';
-  import { t } from 'svelte-i18n';
-
-  type Props = {
-    onClose: () => void;
-  };
-
-  let { onClose }: Props = $props();
-
-  let ownerId: string = $state($user.id);
-
-  let userOptions: { value: string; text: string }[] = $state([]);
-
-  onMount(async () => {
-    const users = await searchUsersAdmin({});
-    userOptions = users.map((user) => ({ value: user.id, text: user.name }));
-  });
-
-  const onSubmit = async () => {
-    const success = await handleCreateLibrary({ ownerId });
-    if (success) {
-      onClose();
-    }
-  };
-</script>
-
-<FormModal
-  title={$t('create_library')}
-  icon={mdiFolderSync}
-  {onClose}
-  size="small"
-  {onSubmit}
-  submitText={$t('create')}
->
-  <SettingSelect label={$t('owner')} bind:value={ownerId} options={userOptions} name="user" />
-  <Text color="warning" size="small">{$t('admin.note_cannot_be_changed_later')}</Text>
-</FormModal>

web/src/lib/modals/LibraryRenameModal.svelte

@@ -1,41 +0,0 @@
-<script lang="ts">
-  import { handleRenameLibrary } from '$lib/services/library.service';
-  import type { LibraryResponseDto } from '@immich/sdk';
-  import { Button, Field, HStack, Input, Modal, ModalBody, ModalFooter } from '@immich/ui';
-  import { mdiRenameOutline } from '@mdi/js';
-  import { t } from 'svelte-i18n';
-
-  type Props = {
-    library: LibraryResponseDto;
-    onClose: () => void;
-  };
-
-  let { library, onClose }: Props = $props();
-
-  let newName = $state(library.name);
-
-  const onsubmit = async () => {
-    const success = await handleRenameLibrary(library, newName);
-
-    if (success) {
-      onClose();
-    }
-  };
-</script>
-
-<Modal icon={mdiRenameOutline} title={$t('rename')} {onClose} size="small">
-  <ModalBody>
-    <form {onsubmit} autocomplete="off" id="rename-library-form">
-      <Field label={$t('name')}>
-        <Input bind:value={newName} />
-      </Field>
-    </form>
-  </ModalBody>
-
-  <ModalFooter>
-    <HStack fullWidth>
-      <Button shape="round" fullWidth color="secondary" onclick={() => onClose()}>{$t('cancel')}</Button>
-      <Button shape="round" fullWidth type="submit" form="rename-library-form">{$t('save')}</Button>
-    </HStack>
-  </ModalFooter>
-</Modal>

web/src/lib/modals/UserCreateModal.svelte

@@ -1,133 +0,0 @@
-<script lang="ts">
-  import { featureFlagsManager } from '$lib/managers/feature-flags-manager.svelte';
-  import { handleCreateUserAdmin } from '$lib/services/user-admin.service';
-  import { userInteraction } from '$lib/stores/user.svelte';
-  import { ByteUnit, convertToBytes } from '$lib/utils/byte-units';
-  import {
-    Button,
-    Field,
-    HelperText,
-    HStack,
-    Input,
-    Modal,
-    ModalBody,
-    ModalFooter,
-    PasswordInput,
-    Stack,
-    Switch,
-  } from '@immich/ui';
-  import { t } from 'svelte-i18n';
-
-  type Props = {
-    onClose: () => void;
-  };
-
-  let { onClose }: Props = $props();
-
-  let success = $state(false);
-
-  let email = $state('');
-  let password = $state('');
-  let passwordConfirm = $state('');
-  let name = $state('');
-  let shouldChangePassword = $state(true);
-  let notify = $state(true);
-  let isAdmin = $state(false);
-
-  let quotaSize: string | undefined = $state();
-  let isCreatingUser = $state(false);
-
-  let quotaSizeInBytes = $derived(quotaSize === null ? null : convertToBytes(Number(quotaSize), ByteUnit.GiB));
-  let quotaSizeWarning = $derived(
-    quotaSizeInBytes && userInteraction.serverInfo && quotaSizeInBytes > userInteraction.serverInfo.diskSizeRaw,
-  );
-
-  const passwordMismatch = $derived(password !== passwordConfirm && passwordConfirm.length > 0);
-  const passwordMismatchMessage = $derived(passwordMismatch ? $t('password_does_not_match') : '');
-  const valid = $derived(!passwordMismatch && !isCreatingUser);
-
-  const onSubmit = async (event: Event) => {
-    event.preventDefault();
-
-    if (!valid) {
-      return;
-    }
-
-    isCreatingUser = true;
-
-    const success = await handleCreateUserAdmin({
-      email,
-      password,
-      shouldChangePassword,
-      name,
-      quotaSizeInBytes,
-      notify,
-      isAdmin,
-    });
-
-    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 success}
-        <p class="text-sm text-immich-primary">{$t('new_user_created')}</p>
-      {/if}
-
-      <Stack gap={4}>
-        <Field label={$t('email')} required>
-          <Input bind:value={email} type="email" />
-        </Field>
-
-        {#if featureFlagsManager.value.email}
-          <Field label={$t('admin.send_welcome_email')}>
-            <Switch id="send-welcome-email" bind:checked={notify} class="text-sm" />
-          </Field>
-        {/if}
-
-        <Field label={$t('password')} required={!featureFlagsManager.value.oauth}>
-          <PasswordInput id="password" bind:value={password} autocomplete="new-password" />
-        </Field>
-
-        <Field label={$t('confirm_password')} required={!featureFlagsManager.value.oauth}>
-          <PasswordInput id="confirmPassword" bind:value={passwordConfirm} autocomplete="new-password" />
-          <HelperText color="danger">{passwordMismatchMessage}</HelperText>
-        </Field>
-
-        <Field label={$t('admin.require_password_change_on_login')}>
-          <Switch id="require-password-change" bind:checked={shouldChangePassword} class="text-sm text-start" />
-        </Field>
-
-        <Field label={$t('name')} required>
-          <Input bind:value={name} />
-        </Field>
-
-        <Field label={$t('admin.quota_size_gib')}>
-          <Input bind:value={quotaSize} type="number" placeholder={$t('unlimited')} min="0" step="1" />
-          {#if quotaSizeWarning}
-            <HelperText color="danger">{$t('errors.quota_higher_than_disk_size')}</HelperText>
-          {/if}
-        </Field>
-
-        <Field label={$t('admin.admin_user')}>
-          <Switch bind:checked={isAdmin} />
-        </Field>
-      </Stack>
-    </form>
-  </ModalBody>
-
-  <ModalFooter>
-    <HStack fullWidth>
-      <Button color="secondary" fullWidth onclick={() => onClose()} shape="round">{$t('cancel')}</Button>
-      <Button type="submit" disabled={!valid} fullWidth shape="round" form="create-new-user-form"
-        >{$t('create')}
-      </Button>
-    </HStack>
-  </ModalFooter>
-</Modal>

web/src/lib/modals/UserEditModal.svelte

@@ -1,113 +0,0 @@
-<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 { type UserAdminResponseDto } from '@immich/sdk';
-  import {
-    Button,
-    Field,
-    HStack,
-    Input,
-    Link,
-    Modal,
-    ModalBody,
-    ModalFooter,
-    NumberInput,
-    Switch,
-    Text,
-  } from '@immich/ui';
-  import { mdiAccountEditOutline } from '@mdi/js';
-  import { t } from 'svelte-i18n';
-
-  interface Props {
-    user: UserAdminResponseDto;
-    onClose: () => void;
-  }
-
-  let { user, onClose }: Props = $props();
-
-  let isAdmin = $derived(user.isAdmin);
-  let name = $derived(user.name);
-  let email = $derived(user.email);
-  let storageLabel = $derived(user.storageLabel || '');
-
-  const previousQuota = user.quotaSizeInBytes;
-
-  let quotaSize = $state(
-    typeof user.quotaSizeInBytes === 'number' ? convertFromBytes(user.quotaSizeInBytes, ByteUnit.GiB) : undefined,
-  );
-
-  const quotaSizeBytes = $derived(typeof quotaSize === 'number' ? convertToBytes(quotaSize, ByteUnit.GiB) : null);
-
-  let quotaSizeWarning = $derived(
-    previousQuota !== quotaSizeBytes &&
-      !!quotaSizeBytes &&
-      userInteraction.serverInfo &&
-      quotaSizeBytes > userInteraction.serverInfo.diskSizeRaw,
-  );
-
-  const onSubmit = async (event: Event) => {
-    event.preventDefault();
-
-    const success = await handleUpdateUserAdmin(user, {
-      email,
-      name,
-      storageLabel,
-      quotaSizeInBytes: typeof quotaSize === 'number' ? convertToBytes(quotaSize, ByteUnit.GiB) : null,
-      isAdmin,
-    });
-
-    if (success) {
-      onClose();
-    }
-  };
-</script>
-
-<Modal title={$t('edit_user')} size="small" icon={mdiAccountEditOutline} {onClose}>
-  <ModalBody>
-    <form onsubmit={onSubmit} autocomplete="off" id="edit-user-form">
-      <Field label={$t('email')} required>
-        <Input type="email" bind:value={email} />
-      </Field>
-
-      <Field label={$t('name')} required class="mt-4">
-        <Input bind:value={name} />
-      </Field>
-
-      <Field label={$t('admin.quota_size_gib')} class="mt-4">
-        <NumberInput bind:value={quotaSize} min="0" step="1" placeholder={$t('unlimited')} />
-        {#if quotaSizeWarning}
-          <Text size="small" color="danger">{$t('errors.quota_higher_than_disk_size')}</Text>
-        {/if}
-      </Field>
-
-      <Field label={$t('storage_label')} class="mt-4">
-        <Input bind:value={storageLabel} />
-      </Field>
-
-      <Text size="small" class="mt-2" color="muted">
-        {$t('admin.note_apply_storage_label_previous_assets')}
-        <Link href={AppRoute.ADMIN_QUEUES}>
-          {$t('admin.storage_template_migration_job')}
-        </Link>
-      </Text>
-
-      {#if user.id !== $authUser.id}
-        <Field label={$t('admin.admin_user')}>
-          <Switch bind:checked={isAdmin} class="mt-4" />
-        </Field>
-      {/if}
-    </form>
-  </ModalBody>
-
-  <ModalFooter>
-    <HStack fullWidth>
-      <Button shape="round" color="secondary" fullWidth form="edit-user-form" onclick={() => onClose()}
-        >{$t('cancel')}</Button
-      >
-      <Button type="submit" shape="round" fullWidth form="edit-user-form">{$t('confirm')}</Button>
-    </HStack>
-  </ModalFooter>
-</Modal>

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

@@ -1,12 +1,10 @@
 import { goto } from '$app/navigation';
 import { AppRoute } from '$lib/constants';
 import { eventManager } from '$lib/managers/event-manager.svelte';
-import LibraryCreateModal from '$lib/modals/LibraryCreateModal.svelte';
 import LibraryExclusionPatternAddModal from '$lib/modals/LibraryExclusionPatternAddModal.svelte';
 import LibraryExclusionPatternEditModal from '$lib/modals/LibraryExclusionPatternEditModal.svelte';
 import LibraryFolderAddModal from '$lib/modals/LibraryFolderAddModal.svelte';
 import LibraryFolderEditModal from '$lib/modals/LibraryFolderEditModal.svelte';
-import LibraryRenameModal from '$lib/modals/LibraryRenameModal.svelte';
 import { handleError } from '$lib/utils/handle-error';
 import { getFormatter } from '$lib/utils/i18n';
 import {
@@ -19,6 +17,7 @@ import {
   updateLibrary,
   type CreateLibraryDto,
   type LibraryResponseDto,
+  type UpdateLibraryDto,
 } from '@immich/sdk';
 import { modalManager, toastManager, type ActionItem } from '@immich/ui';
 import { mdiPencilOutline, mdiPlusBoxOutline, mdiSync, mdiTrashCanOutline } from '@mdi/js';
@@ -38,7 +37,7 @@ export const getLibrariesActions = ($t: MessageFormatter, libraries: LibraryResp
     title: $t('create_library'),
     type: $t('command'),
     icon: mdiPlusBoxOutline,
-    onAction: () => handleShowLibraryCreateModal(),
+    onAction: () => goto(AppRoute.ADMIN_LIBRARIES_NEW),
     shortcuts: { shift: true, key: 'n' },
   };
 
@@ -46,11 +45,11 @@ export const getLibrariesActions = ($t: MessageFormatter, libraries: LibraryResp
 };
 
 export const getLibraryActions = ($t: MessageFormatter, library: LibraryResponseDto) => {
-  const Rename: ActionItem = {
+  const Edit: ActionItem = {
     icon: mdiPencilOutline,
     type: $t('command'),
-    title: $t('rename'),
-    onAction: () => modalManager.show(LibraryRenameModal, { library }),
+    title: $t('edit'),
+    onAction: () => goto(`${AppRoute.ADMIN_LIBRARIES}/${library.id}/edit`),
     shortcuts: { key: 'r' },
   };
 
@@ -85,7 +84,7 @@ export const getLibraryActions = ($t: MessageFormatter, library: LibraryResponse
     shortcuts: { shift: true, key: 'r' },
   };
 
-  return { Rename, Delete, AddFolder, AddExclusionPattern, Scan };
+  return { Edit, Delete, AddFolder, AddExclusionPattern, Scan };
 };
 
 export const getLibraryFolderActions = ($t: MessageFormatter, library: LibraryResponseDto, folder: string) => {
@@ -150,7 +149,7 @@ const handleScanLibrary = async (library: LibraryResponseDto) => {
 };
 
 export const handleViewLibrary = async (library: LibraryResponseDto) => {
-  await goto(`${AppRoute.ADMIN_LIBRARY_MANAGEMENT}/${library.id}`);
+  await goto(`${AppRoute.ADMIN_LIBRARIES}/${library.id}`);
 };
 
 export const handleCreateLibrary = async (dto: CreateLibraryDto) => {
@@ -160,33 +159,24 @@ export const handleCreateLibrary = async (dto: CreateLibraryDto) => {
     const library = await createLibrary({ createLibraryDto: dto });
     eventManager.emit('LibraryCreate', library);
     toastManager.success($t('admin.library_created', { values: { library: library.name } }));
-    return true;
+    return library;
   } catch (error) {
     handleError(error, $t('errors.unable_to_create_library'));
-    return false;
   }
 };
 
-export const handleRenameLibrary = async (library: { id: string }, name?: string) => {
+export const handleUpdateLibrary = async (library: LibraryResponseDto, dto: UpdateLibraryDto) => {
   const $t = await getFormatter();
 
-  if (!name) {
-    return false;
-  }
-
   try {
-    const updatedLibrary = await updateLibrary({
-      id: library.id,
-      updateLibraryDto: { name },
-    });
+    const updatedLibrary = await updateLibrary({ id: library.id, updateLibraryDto: dto });
     eventManager.emit('LibraryUpdate', updatedLibrary);
     toastManager.success($t('admin.library_updated'));
+    return true;
   } catch (error) {
     handleError(error, $t('errors.unable_to_update_library'));
     return false;
   }
-
-  return true;
 };
 
 const handleDeleteLibrary = async (library: LibraryResponseDto) => {
@@ -357,7 +347,3 @@ const handleDeleteExclusionPattern = async (library: LibraryResponseDto, exclusi
     handleError(error, $t('errors.unable_to_update_library'));
   }
 };
-
-export const handleShowLibraryCreateModal = async () => {
-  await modalManager.show(LibraryCreateModal, {});
-};

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

@@ -1,10 +1,9 @@
 import { goto } from '$app/navigation';
+import { AppRoute } from '$lib/constants';
 import { eventManager } from '$lib/managers/event-manager.svelte';
 import { serverConfigManager } from '$lib/managers/server-config-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 { user as authUser } from '$lib/stores/user.store';
 import type { HeaderButtonActionItem } from '$lib/types';
@@ -39,7 +38,7 @@ export const getUserAdminsActions = ($t: MessageFormatter) => {
     title: $t('create_user'),
     type: $t('command'),
     icon: mdiPlusBoxOutline,
-    onAction: () => modalManager.show(UserCreateModal, {}),
+    onAction: () => goto(AppRoute.ADMIN_USERS_NEW),
     shortcuts: { shift: true, key: 'n' },
   };
 
@@ -50,7 +49,7 @@ export const getUserAdminActions = ($t: MessageFormatter, user: UserAdminRespons
   const Update: ActionItem = {
     icon: mdiPencilOutline,
     title: $t('edit'),
-    onAction: () => modalManager.show(UserEditModal, { user }),
+    onAction: () => goto(`${AppRoute.ADMIN_USERS}/${user.id}/edit`),
   };
 
   const Delete: ActionItem = {
@@ -103,7 +102,7 @@ export const handleCreateUserAdmin = async (dto: UserAdminCreateDto) => {
     const response = await createUserAdmin({ userAdminCreateDto: dto });
     eventManager.emit('UserAdminCreate', response);
     toastManager.success();
-    return true;
+    return response;
   } catch (error) {
     handleError(error, $t('errors.unable_to_create_user'));
   }

web/src/lib/sidebars/AdminSidebar.svelte

@@ -9,7 +9,7 @@
 <div class="h-full flex flex-col justify-between gap-2">
   <div class="flex flex-col pt-8 pe-4 gap-1">
     <NavbarItem title={$t('users')} href={AppRoute.ADMIN_USERS} icon={mdiAccountMultipleOutline} />
-    <NavbarItem title={$t('external_libraries')} href={AppRoute.ADMIN_LIBRARY_MANAGEMENT} icon={mdiBookshelf} />
+    <NavbarItem title={$t('external_libraries')} href={AppRoute.ADMIN_LIBRARIES} icon={mdiBookshelf} />
     <NavbarItem title={$t('admin.queues')} href={AppRoute.ADMIN_QUEUES} icon={mdiTrayFull} />
     <NavbarItem title={$t('settings')} href={AppRoute.ADMIN_SETTINGS} icon={mdiCog} />
     <NavbarItem title={$t('server_stats')} href={AppRoute.ADMIN_STATS} icon={mdiServer} />