self-hosted/immich
1
0
Fork 0
mirror of https://github.com/immich-app/immich.git synced 2024-12-26 10:50:29 +02:00
Code Issues Releases Activity

refactor(web): admin and user signup forms (#7739)

Browse Source
This commit is contained in:
Michel Heusschen 2024-03-08 14:45:41 +01:00 committed by GitHub
parent 46597aac97
commit ffdd504008
No known key found for this signature in database
GPG Key ID: B5690EEEBB952194
2 changed files with 28 additions and 44 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

28
web/src/lib/components/forms/admin-registration-form.svelte
View File

@ -6,9 +6,12 @@
import Button from '../elements/buttons/button.svelte';
import PasswordField from '../shared-components/password-field.svelte';
let errorMessage: string;
let email = '';
let password = '';
let confirmPassword = '';
let name = '';
let errorMessage: string;
let canRegister = false;
$: {
@ -21,25 +24,12 @@
}
}
async function registerAdmin(event: SubmitEvent & { currentTarget: HTMLFormElement }) {
async function registerAdmin() {
if (canRegister) {
errorMessage = '';
const form = new FormData(event.currentTarget);
const email = form.get('email');
const password = form.get('password');
const name = form.get('name');
try {
await signUpAdmin({
signUpDto: {
email: String(email),
password: String(password),
name: String(name),
},
});
await signUpAdmin({ signUpDto: { email, password, name } });
await goto(AppRoute.AUTH_LOGIN);
} catch (error) {
handleError(error, 'Unable to create admin account');
@ -52,12 +42,12 @@
<form on:submit|preventDefault={registerAdmin} method="post" class="mt-5 flex flex-col gap-5">
<div class="flex flex-col gap-2">
<label class="immich-form-label" for="email">Admin Email</label>
<input class="immich-form-input" id="email" name="email" type="email" autocomplete="email" required />
<input class="immich-form-input" id="email" bind:value={email} type="email" autocomplete="email" required />
</div>
<div class="flex flex-col gap-2">
<label class="immich-form-label" for="password">Admin Password</label>
<PasswordField id="password" name="password" bind:password autocomplete="new-password" />
<PasswordField id="password" bind:password autocomplete="new-password" />
</div>
<div class="flex flex-col gap-2">
@ -67,7 +57,7 @@
<div class="flex flex-col gap-2">
<label class="immich-form-label" for="name">Name</label>
<input class="immich-form-input" id="name" name="name" type="text" autocomplete="name" required />
<input class="immich-form-input" id="name" bind:value={name} type="text" autocomplete="name" required />
</div>
{#if errorMessage}

44
web/src/lib/components/forms/create-user-form.svelte
View File

@ -12,15 +12,18 @@
let error: string;
let success: string;
let email = '';
let password = '';
let confirmPassword = '';
let name = '';
let shouldChangePassword = true;
let canCreateUser = false;
let quotaSize: number | undefined;
let isCreatingUser = false;
$: quotaSizeWarning = quotaSize && convertToBytes(Number(quotaSize), 'GiB') > $serverInfo.diskSizeRaw;
$: quotaSizeInBytes = quotaSize ? convertToBytes(quotaSize, 'GiB') : null;
$: quotaSizeWarning = quotaSizeInBytes && quotaSizeInBytes > $serverInfo.diskSizeRaw;
$: {
if (password !== confirmPassword && confirmPassword.length > 0) {
@ -36,29 +39,19 @@
cancel: void;
}>();
async function registerUser(event: SubmitEvent) {
async function registerUser() {
if (canCreateUser && !isCreatingUser) {
isCreatingUser = true;
error = '';
const formElement = event.target as HTMLFormElement;
const form = new FormData(formElement);
const email = form.get('email');
const password = form.get('password');
const name = form.get('name');
const quotaSize = form.get('quotaSize');
try {
await createUser({
createUserDto: {
email: String(email),
password: String(password),
shouldChangePassword: Boolean(shouldChangePassword),
name: String(name),
quotaSizeInBytes: quotaSize ? convertToBytes(Number(quotaSize), 'GiB') : null,
email,
password,
shouldChangePassword,
name,
quotaSizeInBytes,
},
});
@ -87,12 +80,12 @@
<form on:submit|preventDefault={registerUser} autocomplete="off">
<div class="m-4 flex flex-col gap-2">
<label class="immich-form-label" for="email">Email</label>
<input class="immich-form-input" id="email" name="email" type="email" required />
<input class="immich-form-input" id="email" bind:value={email} type="email" required />
</div>
<div class="m-4 flex flex-col gap-2">
<label class="immich-form-label" for="password">Password</label>
<PasswordField id="password" name="password" bind:password autocomplete="new-password" />
<PasswordField id="password" bind:password autocomplete="new-password" />
</div>
<div class="m-4 flex flex-col gap-2">
@ -109,16 +102,17 @@
<div class="m-4 flex flex-col gap-2">
<label class="immich-form-label" for="name">Name</label>
<input class="immich-form-input" id="name" name="name" type="text" required />
<input class="immich-form-input" id="name" bind:value={name} type="text" required />
</div>
<div class="m-4 flex flex-col gap-2">
<label class="flex items-center gap-2 immich-form-label" for="quotaSize"
>Quota Size (GiB) {#if quotaSizeWarning}
<label class="flex items-center gap-2 immich-form-label" for="quotaSize">
Quota Size (GiB)
{#if quotaSizeWarning}
<p class="text-red-400 text-sm">You set a quota higher than the disk size</p>
{/if}</label
>
<input class="immich-form-input" id="quotaSize" name="quotaSize" type="number" min="0" bind:value={quotaSize} />
{/if}
</label>
<input class="immich-form-input" id="quotaSize" type="number" min="0" bind:value={quotaSize} />
</div>
{#if error}