refactor(web): disable login confirm modal (#18261)

web/src/lib/components/admin-page/settings/auth/auth-settings.svelte

@@ -6,7 +6,8 @@
   import SettingSelect from '$lib/components/shared-components/settings/setting-select.svelte';
   import SettingSwitch from '$lib/components/shared-components/settings/setting-switch.svelte';
   import { SettingInputFieldType } from '$lib/constants';
-  import ConfirmModal from '$lib/modals/ConfirmModal.svelte';
+  import { modalManager } from '$lib/managers/modal-manager.svelte';
+  import AuthDisableLoginConfirmModal from '$lib/modals/AuthDisableLoginConfirmModal.svelte';
   import { OAuthTokenEndpointAuthMethod, type SystemConfigDto } from '@immich/sdk';
   import { isEqual } from 'lodash-es';
   import { t } from 'svelte-i18n';
@@ -24,8 +25,6 @@
 
   let { savedConfig, defaultConfig, config = $bindable(), disabled = false, onReset, onSave }: Props = $props();
 
-  let isConfirmOpen = $state(false);
-
   const handleToggleOverride = () => {
     // click runs before bind
     const previouslyEnabled = config.oauth.mobileOverrideEnabled;
@@ -34,45 +33,19 @@
     }
   };
 
-  const handleSave = (skipConfirm: boolean) => {
+  const handleSave = async (skipConfirm: boolean) => {
     const allMethodsDisabled = !config.oauth.enabled && !config.passwordLogin.enabled;
     if (allMethodsDisabled && !skipConfirm) {
-      isConfirmOpen = true;
+      const isConfirmed = await modalManager.show(AuthDisableLoginConfirmModal, {});
+      if (!isConfirmed) {
         return;
       }
+    }
 
-    isConfirmOpen = false;
     onSave({ passwordLogin: config.passwordLogin, oauth: config.oauth });
   };
 </script>
 
-{#if isConfirmOpen}
-  <ConfirmModal
-    title={$t('admin.disable_login')}
-    onClose={(confirmed) => (confirmed ? handleSave(true) : (isConfirmOpen = false))}
-  >
-    {#snippet promptSnippet()}
-      <div class="flex flex-col gap-4">
-        <p>{$t('admin.authentication_settings_disable_all')}</p>
-        <p>
-          <FormatMessage key="admin.authentication_settings_reenable">
-            {#snippet children({ message })}
-              <a
-                href="https://immich.app/docs/administration/server-commands"
-                rel="noreferrer"
-                target="_blank"
-                class="underline"
-              >
-                {message}
-              </a>
-            {/snippet}
-          </FormatMessage>
-        </p>
-      </div>
-    {/snippet}
-  </ConfirmModal>
-{/if}
-
 <div>
   <div in:fade={{ duration: 500 }}>
     <form autocomplete="off" onsubmit={(e) => e.preventDefault()}>

web/src/lib/modals/AuthDisableLoginConfirmModal.svelte

@@ -0,0 +1,44 @@
+<script lang="ts">
+  import FormatMessage from '$lib/components/i18n/format-message.svelte';
+  import { Button, Modal, ModalBody, ModalFooter } from '@immich/ui';
+  import { mdiCancel } from '@mdi/js';
+  import { t } from 'svelte-i18n';
+
+  interface Props {
+    onClose: (confirmed?: boolean) => void;
+  }
+
+  let { onClose }: Props = $props();
+</script>
+
+<Modal title={$t('admin.disable_login')} icon={mdiCancel} size="small" {onClose}>
+  <ModalBody>
+    <div class="flex flex-col gap-4 text-center">
+      <p>{$t('admin.authentication_settings_disable_all')}</p>
+      <p>
+        <FormatMessage key="admin.authentication_settings_reenable">
+          {#snippet children({ message })}
+            <a
+              href="https://immich.app/docs/administration/server-commands"
+              rel="noreferrer"
+              target="_blank"
+              class="underline"
+            >
+              {message}
+            </a>
+          {/snippet}
+        </FormatMessage>
+      </p>
+    </div>
+  </ModalBody>
+  <ModalFooter>
+    <div class="flex gap-3 w-full">
+      <Button shape="round" color="secondary" fullWidth onclick={() => onClose(false)}>
+        {$t('cancel')}
+      </Button>
+      <Button shape="round" color="danger" fullWidth onclick={() => onClose(true)}>
+        {$t('confirm')}
+      </Button>
+    </div>
+  </ModalFooter>
+</Modal>