refactor: modals (#25163)

2026-05-18 03:10:24 +03:00 · 2026-01-09 15:05:20 -05:00
parent 88327fb872
commit 1e4af9731d
18 changed files with 258 additions and 357 deletions
@@ -5,19 +5,7 @@
  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 { Field, FormModal, HelperText, Input, PasswordInput, Stack, Switch } from '@immich/ui';
  import { t } from 'svelte-i18n';

  let success = $state(false);
@@ -73,61 +61,48 @@
  };
 </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>
+<FormModal title={$t('create_new_user')} size="small" disabled={!valid} submitText={$t('create')} {onClose} {onSubmit}>
+  {#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>

-      <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>
+    <Field label={$t('admin.admin_user')}>
+      <Switch bind:checked={isAdmin} />
+    </Field>
+  </Stack>
+</FormModal>
@@ -5,19 +5,7 @@
  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 {
-    Button,
-    Field,
-    HStack,
-    Input,
-    Link,
-    Modal,
-    ModalBody,
-    ModalFooter,
-    NumberInput,
-    Switch,
-    Text,
-  } from '@immich/ui';
+  import { Field, FormModal, Input, Link, NumberInput, Switch, Text } from '@immich/ui';
  import { mdiAccountEditOutline } from '@mdi/js';
  import { t } from 'svelte-i18n';
  import type { PageData } from './$types';
@@ -69,49 +57,36 @@
  };
 </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>
+<FormModal title={$t('edit_user')} size="small" icon={mdiAccountEditOutline} {onClose} {onSubmit}>
+  <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('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('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>
+  <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>
+  <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>
+  {#if user.id !== $authUser.id}
+    <Field label={$t('admin.admin_user')}>
+      <Switch bind:checked={isAdmin} class="mt-4" />
+    </Field>
+  {/if}
+</FormModal>