refactor: introduce modal manager (#18039)

web/package-lock.json

@@ -11,7 +11,7 @@
       "dependencies": {
         "@formatjs/icu-messageformat-parser": "^2.9.8",
         "@immich/sdk": "file:../open-api/typescript-sdk",
-        "@immich/ui": "^0.18.1",
+        "@immich/ui": "^0.19.0",
         "@mapbox/mapbox-gl-rtl-text": "0.2.3",
         "@mdi/js": "^7.4.47",
         "@photo-sphere-viewer/core": "^5.11.5",
@@ -1320,9 +1320,9 @@
       "link": true
     },
     "node_modules/@immich/ui": {
-      "version": "0.18.1",
+      "version": "0.19.0",
-      "resolved": "https://registry.npmjs.org/@immich/ui/-/ui-0.18.1.tgz",
+      "resolved": "https://registry.npmjs.org/@immich/ui/-/ui-0.19.0.tgz",
-      "integrity": "sha512-XWWO6OTfH3MektyxCn0hWefZyOGyWwwx/2zHinuShpxTHSyfveJ4mOkFP8DkyMz0dnvJ1EfdkPBMkld3y5R/Hw==",
+      "integrity": "sha512-XVjSUoQVIoe83pxM4q8kmlejb2xep/TZEfoGbasI7takEGKNiWEyXr5eZaXZCSVgq78fcNRr4jyWz290ZAXh7A==",
       "license": "GNU Affero General Public License version 3",
       "dependencies": {
         "@mdi/js": "^7.4.47",

web/package.json

@@ -27,7 +27,7 @@
   "dependencies": {
     "@formatjs/icu-messageformat-parser": "^2.9.8",
     "@immich/sdk": "file:../open-api/typescript-sdk",
-    "@immich/ui": "^0.18.1",
+    "@immich/ui": "^0.19.0",
     "@mapbox/mapbox-gl-rtl-text": "0.2.3",
     "@mdi/js": "^7.4.47",
     "@photo-sphere-viewer/core": "^5.11.5",

web/src/app.css

@@ -8,7 +8,6 @@
     --immich-primary: 66 80 175;
     --immich-bg: 255 255 255;
     --immich-fg: 0 0 0;
-    --immich-gray: 246 246 244;
     --immich-error: 229 115 115;
     --immich-success: 129 199 132;
     --immich-warning: 255 183 77;
@@ -33,6 +32,7 @@
     --immich-ui-warning: 255 170 0;
     --immich-ui-info: 14 165 233;
     --immich-ui-default-border: 209 213 219;
+    --immich-ui-gray: 246 246 246;
   }
 
   .dark {
@@ -45,6 +45,7 @@
     --immich-ui-warning: 255 170 0;
     --immich-ui-info: 14 165 233;
     --immich-ui-default-border: 55 65 81;
+    --immich-ui-gray: 33 33 33;
   }
 }
 

web/src/lib/components/forms/create-user-form.svelte

@@ -1,21 +1,29 @@
 <script lang="ts">
-  import FullScreenModal from '$lib/components/shared-components/full-screen-modal.svelte';
   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 } from '@immich/sdk';
+  import { createUserAdmin, type UserAdminResponseDto } from '@immich/sdk';
-  import { Alert, Button, Field, HelperText, Input, PasswordInput, Stack, Switch } from '@immich/ui';
+  import {
+    Alert,
+    Button,
+    Field,
+    HelperText,
+    Input,
+    Modal,
+    ModalBody,
+    ModalFooter,
+    PasswordInput,
+    Stack,
+    Switch,
+  } from '@immich/ui';
   import { t } from 'svelte-i18n';
 
   interface Props {
-    onClose: () => void;
+    onClose: (user?: UserAdminResponseDto) => void;
-    onSubmit: () => void;
-    onCancel: () => void;
-    oauthEnabled?: boolean;
   }
 
-  let { onClose, onSubmit: onDone, onCancel, oauthEnabled = false }: Props = $props();
+  let { onClose }: Props = $props();
 
   let error = $state('');
   let success = $state(false);
@@ -50,7 +58,7 @@
     error = '';
 
     try {
-      await createUserAdmin({
+      const user = await createUserAdmin({
         userAdminCreateDto: {
           email,
           password,
@@ -63,8 +71,7 @@
 
       success = true;
 
-      onDone();
+      onClose(user);
-
       return;
     } catch (error) {
       handleError(error, $t('errors.unable_to_create_user'));
@@ -74,55 +81,60 @@
   };
 </script>
 
-<form onsubmit={onSubmit} autocomplete="off" id="create-new-user-form">
+<Modal title={$t('create_new_user')} {onClose} size="small" class="text-dark bg-light">
-  <FullScreenModal title={$t('create_new_user')} showLogo {onClose}>
+  <ModalBody>
-    {#if error}
+    <form onsubmit={onSubmit} autocomplete="off" id="create-new-user-form">
-      <Alert color="danger" size="small" title={error} closable />
+      {#if error}
-    {/if}
+        <Alert color="danger" size="small" title={error} closable />
-
-    {#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 $featureFlags.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={!oauthEnabled}>
+      {#if success}
-        <PasswordInput id="password" bind:value={password} autocomplete="new-password" />
+        <p class="text-sm text-immich-primary">{$t('new_user_created')}</p>
-      </Field>
+      {/if}
 
-      <Field label={$t('confirm_password')} required={!oauthEnabled}>
+      <Stack gap={4}>
-        <PasswordInput id="confirmPassword" bind:value={passwordConfirm} autocomplete="new-password" />
+        <Field label={$t('email')} required>
-        <HelperText color="danger">{passwordMismatchMessage}</HelperText>
+          <Input bind:value={email} type="email" />
-      </Field>
+        </Field>
 
-      <Field label={$t('admin.require_password_change_on_login')}>
+        {#if $featureFlags.email}
-        <Switch id="require-password-change" bind:checked={shouldChangePassword} class="text-sm" />
+          <Field label={$t('admin.send_welcome_email')}>
-      </Field>
+            <Switch id="send-welcome-email" bind:checked={notify} class="text-sm" />
-
+          </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" />
-        {#if quotaSizeWarning}
-          <HelperText color="danger">{$t('errors.quota_higher_than_disk_size')}</HelperText>
         {/if}
-      </Field>
-    </Stack>
 
-    {#snippet stickyBottom()}
+        <Field label={$t('password')} required={!$featureFlags.oauth}>
-      <Button color="secondary" fullWidth onclick={onCancel} shape="round">{$t('cancel')}</Button>
+          <PasswordInput id="password" bind:value={password} autocomplete="new-password" />
-      <Button type="submit" disabled={!valid} fullWidth shape="round">{$t('create')}</Button>
+        </Field>
-    {/snippet}
+
-  </FullScreenModal>
+        <Field label={$t('confirm_password')} required={!$featureFlags.oauth}>
-</form>
+          <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" />
+          {#if quotaSizeWarning}
+            <HelperText color="danger">{$t('errors.quota_higher_than_disk_size')}</HelperText>
+          {/if}
+        </Field>
+      </Stack>
+    </form>
+  </ModalBody>
+
+  <ModalFooter>
+    <div class="flex gap-3 w-full">
+      <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
+      >
+    </div>
+  </ModalFooter>
+</Modal>

web/src/lib/components/forms/edit-user-form.svelte

@@ -1,34 +1,26 @@
 <script lang="ts">
-  import { dialogController } from '$lib/components/shared-components/dialog/dialog';
-  import FullScreenModal from '$lib/components/shared-components/full-screen-modal.svelte';
   import { AppRoute } from '$lib/constants';
+  import { modalManager } from '$lib/managers/modal-manager.svelte';
   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 { Button } from '@immich/ui';
+  import { Button, Modal, ModalBody, ModalFooter } from '@immich/ui';
   import { mdiAccountEditOutline } from '@mdi/js';
   import { t } from 'svelte-i18n';
 
   interface Props {
     user: UserAdminResponseDto;
     canResetPassword?: boolean;
-    newPassword: string;
+    onClose: (
-    onClose: () => void;
+      data?: { action: 'update'; data: UserAdminResponseDto } | { action: 'resetPassword'; data: string },
-    onResetPasswordSuccess: () => void;
+    ) => void;
-    onEditSuccess: () => void;
   }
 
-  let {
+  let { user, canResetPassword = true, onClose }: Props = $props();
-    user,
-    canResetPassword = true,
-    newPassword = $bindable(),
-    onClose,
-    onResetPasswordSuccess,
-    onEditSuccess,
-  }: Props = $props();
 
   let quotaSize = $state(user.quotaSizeInBytes === null ? null : convertFromBytes(user.quotaSizeInBytes, ByteUnit.GiB));
+  let newPassword = $state<string>('');
 
   const previousQutoa = user.quotaSizeInBytes;
 
@@ -42,7 +34,7 @@
   const editUser = async () => {
     try {
       const { id, email, name, storageLabel } = user;
-      await updateUserAdmin({
+      const newUser = await updateUserAdmin({
         id,
         userAdminUpdateDto: {
           email,
@@ -52,14 +44,14 @@
         },
       });
 
-      onEditSuccess();
+      onClose({ action: 'update', data: newUser });
     } catch (error) {
       handleError(error, $t('errors.unable_to_update_user'));
     }
   };
 
   const resetPassword = async () => {
-    const isConfirmed = await dialogController.show({
+    const isConfirmed = await modalManager.openDialog({
       prompt: $t('admin.confirm_user_password_reset', { values: { user: user.name } }),
     });
 
@@ -78,7 +70,7 @@
         },
       });
 
-      onResetPasswordSuccess();
+      onClose({ action: 'resetPassword', data: newPassword });
     } catch (error) {
       handleError(error, $t('errors.unable_to_reset_password'));
     }
@@ -107,61 +99,65 @@
   };
 </script>
 
-<FullScreenModal title={$t('edit_user')} icon={mdiAccountEditOutline} {onClose}>
+<Modal title={$t('edit_user')} size="small" icon={mdiAccountEditOutline} {onClose}>
-  <form onsubmit={onSubmit} autocomplete="off" id="edit-user-form">
+  <ModalBody>
-    <div class="my-4 flex flex-col gap-2">
+    <form onsubmit={onSubmit} autocomplete="off" id="edit-user-form">
-      <label class="immich-form-label" for="email">{$t('email')}</label>
+      <div class="my-4 flex flex-col gap-2">
-      <input class="immich-form-input" id="email" name="email" type="email" bind:value={user.email} />
+        <label class="immich-form-label" for="email">{$t('email')}</label>
+        <input class="immich-form-input" id="email" name="email" type="email" bind:value={user.email} />
+      </div>
+
+      <div class="my-4 flex flex-col gap-2">
+        <label class="immich-form-label" for="name">{$t('name')}</label>
+        <input class="immich-form-input" id="name" name="name" type="text" required bind:value={user.name} />
+      </div>
+
+      <div class="my-4 flex flex-col gap-2">
+        <label class="flex items-center gap-2 immich-form-label" for="quotaSize">
+          {$t('admin.quota_size_gib')}
+          {#if quotaSizeWarning}
+            <p class="text-red-400 text-sm">{$t('errors.quota_higher_than_disk_size')}</p>
+          {/if}</label
+        >
+        <input
+          class="immich-form-input"
+          id="quotaSize"
+          name="quotaSize"
+          placeholder={$t('unlimited')}
+          type="number"
+          min="0"
+          bind:value={quotaSize}
+        />
+      </div>
+
+      <div class="my-4 flex flex-col gap-2">
+        <label class="immich-form-label" for="storage-label">{$t('storage_label')}</label>
+        <input
+          class="immich-form-input"
+          id="storage-label"
+          name="storage-label"
+          type="text"
+          bind:value={user.storageLabel}
+        />
+
+        <p>
+          {$t('admin.note_apply_storage_label_previous_assets')}
+          <a href={AppRoute.ADMIN_JOBS} class="text-immich-primary dark:text-immich-dark-primary">
+            {$t('admin.storage_template_migration_job')}
+          </a>
+        </p>
+      </div>
+    </form>
+  </ModalBody>
+
+  <ModalFooter>
+    <div class="flex gap-3 w-full">
+      {#if canResetPassword}
+        <Button shape="round" color="warning" variant="filled" fullWidth onclick={resetPassword}
+          >{$t('reset_password')}</Button
+        >
+      {/if}
+      <Button type="submit" shape="round" fullWidth form="edit-user-form">{$t('confirm')}</Button>
     </div>
-
+  </ModalFooter>
-    <div class="my-4 flex flex-col gap-2">
+</Modal>
-      <label class="immich-form-label" for="name">{$t('name')}</label>
-      <input class="immich-form-input" id="name" name="name" type="text" required bind:value={user.name} />
-    </div>
-
-    <div class="my-4 flex flex-col gap-2">
-      <label class="flex items-center gap-2 immich-form-label" for="quotaSize">
-        {$t('admin.quota_size_gib')}
-        {#if quotaSizeWarning}
-          <p class="text-red-400 text-sm">{$t('errors.quota_higher_than_disk_size')}</p>
-        {/if}</label
-      >
-      <input
-        class="immich-form-input"
-        id="quotaSize"
-        name="quotaSize"
-        placeholder={$t('unlimited')}
-        type="number"
-        min="0"
-        bind:value={quotaSize}
-      />
-    </div>
-
-    <div class="my-4 flex flex-col gap-2">
-      <label class="immich-form-label" for="storage-label">{$t('storage_label')}</label>
-      <input
-        class="immich-form-input"
-        id="storage-label"
-        name="storage-label"
-        type="text"
-        bind:value={user.storageLabel}
-      />
-
-      <p>
-        {$t('admin.note_apply_storage_label_previous_assets')}
-        <a href={AppRoute.ADMIN_JOBS} class="text-immich-primary dark:text-immich-dark-primary">
-          {$t('admin.storage_template_migration_job')}
-        </a>
-      </p>
-    </div>
-  </form>
-
-  {#snippet stickyBottom()}
-    {#if canResetPassword}
-      <Button shape="round" color="warning" variant="filled" fullWidth onclick={resetPassword}
-        >{$t('reset_password')}</Button
-      >
-    {/if}
-    <Button type="submit" shape="round" fullWidth form="edit-user-form">{$t('confirm')}</Button>
-  {/snippet}
-</FullScreenModal>

web/src/lib/components/shared-components/change-location.svelte

@@ -115,7 +115,7 @@
 <ConfirmDialog
   confirmColor="primary"
   title={$t('change_location')}
-  width="wide"
+  size="medium"
   onClose={(confirmed) => (confirmed ? handleConfirm() : onCancel())}
 >
   {#snippet promptSnippet()}

web/src/lib/components/shared-components/dialog/confirm-dialog.svelte

@@ -1,8 +1,7 @@
 <script lang="ts">
-  import { Button, type Color } from '@immich/ui';
+  import { Button, Modal, ModalBody, ModalFooter, type Color } from '@immich/ui';
   import type { Snippet } from 'svelte';
   import { t } from 'svelte-i18n';
-  import FullScreenModal from '../full-screen-modal.svelte';
 
   interface Props {
     title?: string;
@@ -13,7 +12,7 @@
     cancelColor?: Color;
     hideCancelButton?: boolean;
     disabled?: boolean;
-    width?: 'wide' | 'narrow';
+    size?: 'small' | 'medium';
     onClose: (confirmed: boolean) => void;
     promptSnippet?: Snippet;
   }
@@ -27,7 +26,7 @@
     cancelColor = 'secondary',
     hideCancelButton = false,
     disabled = false,
-    width = 'narrow',
+    size = 'small',
     onClose,
     promptSnippet,
   }: Props = $props();
@@ -37,21 +36,23 @@
   };
 </script>
 
-<FullScreenModal {title} onClose={() => onClose(false)} {width}>
+<Modal {title} onClose={() => onClose(false)} {size} class="bg-light text-dark">
-  <div class="text-md py-5 text-center">
+  <ModalBody>
     {#if promptSnippet}{@render promptSnippet()}{:else}
       <p>{prompt}</p>
     {/if}
-  </div>
+  </ModalBody>
 
-  {#snippet stickyBottom()}
+  <ModalFooter>
-    {#if !hideCancelButton}
+    <div class="flex gap-3 w-full">
-      <Button shape="round" color={cancelColor} fullWidth onclick={() => onClose(false)}>
+      {#if !hideCancelButton}
-        {cancelText}
+        <Button shape="round" color={cancelColor} fullWidth onclick={() => onClose(false)}>
+          {cancelText}
+        </Button>
+      {/if}
+      <Button shape="round" color={confirmColor} fullWidth onclick={handleConfirm} {disabled}>
+        {confirmText}
       </Button>
-    {/if}
+    </div>
-    <Button shape="round" color={confirmColor} fullWidth onclick={handleConfirm} {disabled}>
+  </ModalFooter>
-      {confirmText}
+</Modal>
-    </Button>
-  {/snippet}
-</FullScreenModal>

web/src/lib/forms/password-reset-success.svelte

@@ -0,0 +1,43 @@
+<script lang="ts">
+  import ConfirmDialog from '$lib/components/shared-components/dialog/confirm-dialog.svelte';
+  import { copyToClipboard } from '$lib/utils';
+  import { Code, IconButton, Text } from '@immich/ui';
+  import { mdiContentCopy } from '@mdi/js';
+  import { t } from 'svelte-i18n';
+
+  type Props = {
+    onClose: () => void;
+    newPassword: string;
+  };
+
+  const { onClose, newPassword }: Props = $props();
+</script>
+
+<ConfirmDialog
+  title={$t('password_reset_success')}
+  confirmText={$t('done')}
+  {onClose}
+  hideCancelButton={true}
+  confirmColor="success"
+>
+  {#snippet promptSnippet()}
+    <div class="flex flex-col gap-4">
+      <Text>{$t('admin.user_password_has_been_reset')}</Text>
+
+      <div class="flex justify-center gap-2 items-center">
+        <Code color="primary">{newPassword}</Code>
+        <IconButton
+          icon={mdiContentCopy}
+          shape="round"
+          color="secondary"
+          variant="ghost"
+          onclick={() => copyToClipboard(newPassword)}
+          title={$t('copy_password')}
+          aria-label={$t('copy_password')}
+        />
+      </div>
+
+      <Text>{$t('admin.user_password_reset_description')}</Text>
+    </div>
+  {/snippet}
+</ConfirmDialog>

web/src/lib/managers/modal-manager.svelte.ts

@@ -0,0 +1,33 @@
+import ConfirmDialog from '$lib/components/shared-components/dialog/confirm-dialog.svelte';
+import { mount, unmount, type Component, type ComponentProps } from 'svelte';
+
+type OnCloseData<T> = T extends { onClose: (data: infer R) => void } ? R : never;
+// TODO make `props` optional if component only has `onClose`
+// type OptionalIfEmpty<T extends object> = keyof T extends never ? undefined : T;
+
+class ModalManager {
+  open<T extends object, K = OnCloseData<T>>(Component: Component<T>, props: Omit<T, 'onClose'>) {
+    return new Promise<K>((resolve) => {
+      let modal: object = {};
+
+      const onClose = async (data: K) => {
+        await unmount(modal);
+        resolve(data);
+      };
+
+      modal = mount(Component, {
+        target: document.body,
+        props: {
+          ...(props as T),
+          onClose,
+        },
+      });
+    });
+  }
+
+  openDialog(options: Omit<ComponentProps<typeof ConfirmDialog>, 'onClose'>) {
+    return this.open(ConfirmDialog, options);
+  }
+}
+
+export const modalManager = new ModalManager();

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

@@ -6,20 +6,20 @@
   import CreateUserForm from '$lib/components/forms/create-user-form.svelte';
   import EditUserForm from '$lib/components/forms/edit-user-form.svelte';
   import UserPageLayout from '$lib/components/layouts/user-page-layout.svelte';
-  import ConfirmDialog from '$lib/components/shared-components/dialog/confirm-dialog.svelte';
   import {
     NotificationType,
     notificationController,
   } from '$lib/components/shared-components/notification/notification';
+  import PasswordResetSuccess from '$lib/forms/password-reset-success.svelte';
+  import { modalManager } from '$lib/managers/modal-manager.svelte';
   import { locale } from '$lib/stores/preferences.store';
-  import { featureFlags, serverConfig } from '$lib/stores/server-config.store';
+  import { serverConfig } from '$lib/stores/server-config.store';
   import { user } from '$lib/stores/user.store';
   import { websocketEvents } from '$lib/stores/websocket';
-  import { copyToClipboard } from '$lib/utils';
   import { getByteUnitString } from '$lib/utils/byte-units';
   import { UserStatus, searchUsersAdmin, type UserAdminResponseDto } from '@immich/sdk';
-  import { Button, Code, IconButton, Text } from '@immich/ui';
+  import { Button, IconButton } from '@immich/ui';
-  import { mdiContentCopy, mdiDeleteRestore, mdiInfinity, mdiPencilOutline, mdiTrashCanOutline } from '@mdi/js';
+  import { mdiDeleteRestore, mdiInfinity, mdiPencilOutline, mdiTrashCanOutline } from '@mdi/js';
   import { DateTime } from 'luxon';
   import { onMount } from 'svelte';
   import { t } from 'svelte-i18n';
@@ -32,13 +32,9 @@
   let { data }: Props = $props();
 
   let allUsers: UserAdminResponseDto[] = $state([]);
-  let shouldShowEditUserForm = $state(false);
-  let shouldShowCreateUserForm = $state(false);
-  let shouldShowPasswordResetSuccess = $state(false);
   let shouldShowDeleteConfirmDialog = $state(false);
   let shouldShowRestoreDialog = $state(false);
   let selectedUser = $state<UserAdminResponseDto>();
-  let newPassword = $state('');
 
   const refresh = async () => {
     allUsers = await searchUsersAdmin({ withDeleted: true });
@@ -65,25 +61,23 @@
     return DateTime.fromISO(deletedAt).plus({ days: $serverConfig.userDeleteDelay }).toJSDate();
   };
 
-  const onUserCreated = async () => {
+  const handleCreate = async () => {
+    await modalManager.open(CreateUserForm, {});
     await refresh();
-    shouldShowCreateUserForm = false;
   };
 
-  const editUserHandler = (user: UserAdminResponseDto) => {
+  const handleEdit = async (dto: UserAdminResponseDto) => {
-    selectedUser = user;
+    const result = await modalManager.open(EditUserForm, { user: dto, canResetPassword: dto.id !== $user.id });
-    shouldShowEditUserForm = true;
+    switch (result?.action) {
-  };
+      case 'resetPassword': {
-
+        await modalManager.open(PasswordResetSuccess, { newPassword: result.data });
-  const onEditUserSuccess = async () => {
+        break;
-    await refresh();
+      }
-    shouldShowEditUserForm = false;
+      case 'update': {
-  };
+        await refresh();
-
+        break;
-  const onEditPasswordSuccess = async () => {
+      }
-    await refresh();
+    }
-    shouldShowEditUserForm = false;
-    shouldShowPasswordResetSuccess = true;
   };
 
   const deleteUserHandler = (user: UserAdminResponseDto) => {
@@ -110,26 +104,6 @@
 <UserPageLayout title={data.meta.title} admin>
   <section id="setting-content" class="flex place-content-center sm:mx-4">
     <section class="w-full pb-28 lg:w-[850px]">
-      {#if shouldShowCreateUserForm}
-        <CreateUserForm
-          onSubmit={onUserCreated}
-          onCancel={() => (shouldShowCreateUserForm = false)}
-          onClose={() => (shouldShowCreateUserForm = false)}
-          oauthEnabled={$featureFlags.oauth}
-        />
-      {/if}
-
-      {#if shouldShowEditUserForm && selectedUser}
-        <EditUserForm
-          user={selectedUser}
-          bind:newPassword
-          canResetPassword={selectedUser?.id !== $user.id}
-          onEditSuccess={onEditUserSuccess}
-          onResetPasswordSuccess={onEditPasswordSuccess}
-          onClose={() => (shouldShowEditUserForm = false)}
-        />
-      {/if}
-
       {#if shouldShowDeleteConfirmDialog && selectedUser}
         <DeleteConfirmDialog
           user={selectedUser}
@@ -148,37 +122,6 @@
         />
       {/if}
 
-      {#if shouldShowPasswordResetSuccess}
-        <ConfirmDialog
-          title={$t('password_reset_success')}
-          confirmText={$t('done')}
-          onClose={() => (shouldShowPasswordResetSuccess = false)}
-          hideCancelButton={true}
-          confirmColor="success"
-        >
-          {#snippet promptSnippet()}
-            <div class="flex flex-col gap-4">
-              <Text>{$t('admin.user_password_has_been_reset')}</Text>
-
-              <div class="flex justify-center gap-2 items-center">
-                <Code color="primary">{newPassword}</Code>
-                <IconButton
-                  icon={mdiContentCopy}
-                  shape="round"
-                  color="secondary"
-                  variant="ghost"
-                  onclick={() => copyToClipboard(newPassword)}
-                  title={$t('copy_password')}
-                  aria-label={$t('copy_password')}
-                />
-              </div>
-
-              <Text>{$t('admin.user_password_reset_description')}</Text>
-            </div>
-          {/snippet}
-        </ConfirmDialog>
-      {/if}
-
       <table class="my-5 w-full text-start">
         <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"
@@ -224,7 +167,7 @@
                       size="small"
                       icon={mdiPencilOutline}
                       title={$t('edit_user')}
-                      onclick={() => editUserHandler(immichUser)}
+                      onclick={() => handleEdit(immichUser)}
                       aria-label={$t('edit_user')}
                     />
                     {#if immichUser.id !== $user.id}
@@ -256,7 +199,7 @@
           {/if}
         </tbody>
       </table>
-      <Button shape="round" size="small" onclick={() => (shouldShowCreateUserForm = true)}>{$t('create_user')}</Button>
+      <Button shape="round" size="small" onclick={handleCreate}>{$t('create_user')}</Button>
     </section>
   </section>
 </UserPageLayout>

web/tailwind.config.js

@@ -36,7 +36,7 @@ export default {
         danger: 'rgb(var(--immich-ui-danger) / <alpha-value>)',
         warning: 'rgb(var(--immich-ui-warning) / <alpha-value>)',
         info: 'rgb(var(--immich-ui-info) / <alpha-value>)',
-        subtle: 'rgb(var(--immich-gray) / <alpha-value>)',
+        subtle: 'rgb(var(--immich-ui-gray) / <alpha-value>)',
       },
       borderColor: ({ theme }) => ({
         ...theme('colors'),