gitea-mirror/immich
1
0
Fork 0
mirror of https://github.com/immich-app/immich.git synced 2025-12-23 07:29:28 -08:00
Code Issues Packages Projects Releases Wiki Activity

feat: modal routes (#24726)

Browse Source 
feat: new user route
This commit is contained in:
Jason Rasmussen
2025-12-22 10:04:08 -05:00
committed by GitHub
parent dfdbb773ce
commit 165f9e15ee
30 changed files with 672 additions and 570 deletions
Download Patch File Download Diff File Expand all files Collapse all files

44
web/src/lib/modals/LibraryCreateModal.svelte
View File

@@ -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>

41
web/src/lib/modals/LibraryRenameModal.svelte
View File

@@ -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>

133
web/src/lib/modals/UserCreateModal.svelte
View File

@@ -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>

113
web/src/lib/modals/UserEditModal.svelte
View File

@@ -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>