helpy4/immich
1
0
Fork 0
mirror of https://github.com/immich-app/immich synced 2025-11-14 17:36:12 +00:00
Code Issues Projects Releases Packages Wiki Activity Actions 1

chore(web): migration svelte 5 syntax (#13883)

Browse source
This commit is contained in:
Alex 2024-11-14 08:43:25 -06:00 • committed by GitHub
parent 9203a61709
commit 0b3742cf13
No known key found for this signature in database
GPG key ID: B5690EEEBB952194
310 changed files with 6435 additions and 4176 deletions
Download patch file Download diff file Expand all files Collapse all files

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

@ -10,29 +10,33 @@
import Slider from '../elements/slider.svelte';
import PasswordField from '../shared-components/password-field.svelte';
export let onClose: () => void;
export let onSubmit: () => void;
export let onCancel: () => void;
export let oauthEnabled = false;
interface Props {
onClose: () => void;
onSubmit: () => void;
onCancel: () => void;
oauthEnabled?: boolean;
}
let error: string;
let success: string;
let { onClose, onSubmit, onCancel, oauthEnabled = false }: Props = $props();
let email = '';
let password = '';
let confirmPassword = '';
let name = '';
let shouldChangePassword = true;
let notify = true;
let error = $state('');
let success = $state('');
let canCreateUser = false;
let quotaSize: number | undefined;
let isCreatingUser = false;
let email = $state('');
let password = $state('');
let confirmPassword = $state('');
let name = $state('');
let shouldChangePassword = $state(true);
let notify = $state(true);
$: quotaSizeInBytes = quotaSize ? convertToBytes(quotaSize, ByteUnit.GiB) : null;
$: quotaSizeWarning = quotaSizeInBytes && quotaSizeInBytes > $serverInfo.diskSizeRaw;
let canCreateUser = $state(false);
let quotaSize: number | undefined = $state();
let isCreatingUser = $state(false);
$: {
let quotaSizeInBytes = $derived(quotaSize ? convertToBytes(quotaSize, ByteUnit.GiB) : null);
let quotaSizeWarning = $derived(quotaSizeInBytes && quotaSizeInBytes > $serverInfo.diskSizeRaw);
$effect(() => {
if (password !== confirmPassword && confirmPassword.length > 0) {
error = $t('password_does_not_match');
canCreateUser = false;
@ -40,7 +44,7 @@
error = '';
canCreateUser = true;
}
}
});
async function registerUser() {
if (canCreateUser && !isCreatingUser) {
@ -71,10 +75,15 @@
}
}
}
const onsubmit = async (event: Event) => {
event.preventDefault();
await registerUser();
};
</script>
<FullScreenModal title={$t('create_new_user')} showLogo {onClose}>
<form on:submit|preventDefault={registerUser} autocomplete="off" id="create-new-user-form">
<form {onsubmit} autocomplete="off" id="create-new-user-form">
<div class="my-4 flex flex-col gap-2">
<label class="immich-form-label" for="email">{$t('email')}</label>
<input class="immich-form-input" id="email" bind:value={email} type="email" required />
@ -134,8 +143,9 @@
<p class="text-sm text-immich-primary">{success}</p>
{/if}
</form>
<svelte:fragment slot="sticky-bottom">
<Button color="gray" fullwidth on:click={onCancel}>{$t('cancel')}</Button>
{#snippet stickyBottom()}
<Button color="gray" fullwidth onclick={onCancel}>{$t('cancel')}</Button>
<Button type="submit" disabled={isCreatingUser} fullwidth form="create-new-user-form">{$t('create')}</Button>
</svelte:fragment>
{/snippet}
</FullScreenModal>