refactor: all user admin page modals (#18097)

web/src/lib/modals/UserDeleteConfirmModal.svelte

@@ -9,12 +9,10 @@
 
   interface Props {
     user: UserResponseDto;
-    onSuccess: () => void;
-    onFail: () => void;
-    onCancel: () => void;
+    onClose: (confirmed?: true) => void;
   }
 
-  let { user, onSuccess, onFail, onCancel }: Props = $props();
+  let { user, onClose }: Props = $props();
 
   let forceDelete = $state(false);
   let deleteButtonDisabled = $state(false);
@@ -27,14 +25,11 @@
         userAdminDeleteDto: { force: forceDelete },
       });
 
-      if (deletedAt == undefined) {
-        onFail();
-      } else {
-        onSuccess();
+      if (deletedAt !== undefined) {
+        onClose(true);
       }
     } catch (error) {
       handleError(error, $t('errors.unable_to_delete_user'));
-      onFail();
     }
   };
 
@@ -47,7 +42,7 @@
 <ConfirmDialog
   title={$t('delete_user')}
   confirmText={forceDelete ? $t('permanently_delete') : $t('delete')}
-  onClose={(confirmed) => (confirmed ? handleDeleteUser() : onCancel())}
+  onClose={(confirmed) => (confirmed ? handleDeleteUser() : onClose())}
   disabled={deleteButtonDisabled}
 >
   {#snippet promptSnippet()}

web/src/lib/modals/UserRestoreConfirmModal.svelte

@@ -7,24 +7,20 @@
 
   interface Props {
     user: UserResponseDto;
-    onSuccess: () => void;
-    onFail: () => void;
-    onCancel: () => void;
+    onClose: (confirmed?: true) => void;
   }
 
-  let { user, onSuccess, onFail, onCancel }: Props = $props();
+  let { user, onClose }: Props = $props();
 
   const handleRestoreUser = async () => {
     try {
       const { deletedAt } = await restoreUserAdmin({ id: user.id });
-      if (deletedAt == undefined) {
-        onSuccess();
-      } else {
-        onFail();
+
+      if (deletedAt === undefined) {
+        onClose(true);
       }
     } catch (error) {
       handleError(error, $t('errors.unable_to_restore_user'));
-      onFail();
     }
   };
 </script>
@@ -33,7 +29,7 @@
   title={$t('restore_user')}
   confirmText={$t('continue')}
   confirmColor="success"
-  onClose={(confirmed) => (confirmed ? handleRestoreUser() : onCancel())}
+  onClose={(confirmed) => (confirmed ? handleRestoreUser() : onClose())}
 >
   {#snippet promptSnippet()}
     <p>

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

@@ -1,10 +1,6 @@
 <script lang="ts">
   import { page } from '$app/stores';
-  import DeleteConfirmDialog from '$lib/components/admin-page/delete-confirm-dialogue.svelte';
-  import RestoreDialogue from '$lib/components/admin-page/restore-dialogue.svelte';
   import Icon from '$lib/components/elements/icon.svelte';
-  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 {
     NotificationType,
@@ -12,6 +8,10 @@
   } 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 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 { locale } from '$lib/stores/preferences.store';
   import { serverConfig } from '$lib/stores/server-config.store';
   import { user } from '$lib/stores/user.store';
@@ -32,9 +32,6 @@
   let { data }: Props = $props();
 
   let allUsers: UserAdminResponseDto[] = $state([]);
-  let shouldShowDeleteConfirmDialog = $state(false);
-  let shouldShowRestoreDialog = $state(false);
-  let selectedUser = $state<UserAdminResponseDto>();
 
   const refresh = async () => {
     allUsers = await searchUsersAdmin({ withDeleted: true });
@@ -62,12 +59,12 @@
   };
 
   const handleCreate = async () => {
-    await modalManager.open(CreateUserForm, {});
+    await modalManager.open(UserCreateModal, {});
     await refresh();
   };
 
   const handleEdit = async (dto: UserAdminResponseDto) => {
-    const result = await modalManager.open(EditUserForm, { user: dto, canResetPassword: dto.id !== $user.id });
+    const result = await modalManager.open(UserEditModal, { user: dto, canResetPassword: dto.id !== $user.id });
     switch (result?.action) {
       case 'resetPassword': {
         await modalManager.open(PasswordResetSuccess, { newPassword: result.data });
@@ -80,48 +77,24 @@
     }
   };
 
-  const deleteUserHandler = (user: UserAdminResponseDto) => {
-    selectedUser = user;
-    shouldShowDeleteConfirmDialog = true;
+  const handleDelete = async (user: UserAdminResponseDto) => {
+    const result = await modalManager.open(UserDeleteConfirmModal, { user });
+    if (result) {
+      await refresh();
+    }
   };
 
-  const onUserDelete = async () => {
-    await refresh();
-    shouldShowDeleteConfirmDialog = false;
-  };
-
-  const restoreUserHandler = (user: UserAdminResponseDto) => {
-    selectedUser = user;
-    shouldShowRestoreDialog = true;
-  };
-
-  const onUserRestore = async () => {
-    await refresh();
-    shouldShowRestoreDialog = false;
+  const handleRestore = async (user: UserAdminResponseDto) => {
+    const result = await modalManager.open(UserRestoreConfirmModal, { user });
+    if (result) {
+      await refresh();
+    }
   };
 </script>
 
 <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 shouldShowDeleteConfirmDialog && selectedUser}
-        <DeleteConfirmDialog
-          user={selectedUser}
-          onSuccess={onUserDelete}
-          onFail={onUserDelete}
-          onCancel={() => (shouldShowDeleteConfirmDialog = false)}
-        />
-      {/if}
-
-      {#if shouldShowRestoreDialog && selectedUser}
-        <RestoreDialogue
-          user={selectedUser}
-          onSuccess={onUserRestore}
-          onFail={onUserRestore}
-          onCancel={() => (shouldShowRestoreDialog = false)}
-        />
-      {/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"
@@ -176,7 +149,7 @@
                         size="small"
                         icon={mdiTrashCanOutline}
                         title={$t('delete_user')}
-                        onclick={() => deleteUserHandler(immichUser)}
+                        onclick={() => handleDelete(immichUser)}
                         aria-label={$t('delete_user')}
                       />
                     {/if}
@@ -189,7 +162,7 @@
                       title={$t('admin.user_restore_scheduled_removal', {
                         values: { date: getDeleteDate(immichUser.deletedAt) },
                       })}
-                      onclick={() => restoreUserHandler(immichUser)}
+                      onclick={() => handleRestore(immichUser)}
                       aria-label={$t('admin.user_restore_scheduled_removal')}
                     />
                   {/if}