From ffdd504008ec9752dfff714b5c856b45606998f9 Mon Sep 17 00:00:00 2001
From: Michel Heusschen <59014050+michelheusschen@users.noreply.github.com>
Date: Fri, 8 Mar 2024 14:45:41 +0100
Subject: [PATCH] refactor(web): admin and user signup forms (#7739)

---
 .../forms/admin-registration-form.svelte      | 28 ++++--------
 .../components/forms/create-user-form.svelte  | 44 ++++++++-----------
 2 files changed, 28 insertions(+), 44 deletions(-)

diff --git a/web/src/lib/components/forms/admin-registration-form.svelte b/web/src/lib/components/forms/admin-registration-form.svelte
index 0781ef226b..0481dbf458 100644
--- a/web/src/lib/components/forms/admin-registration-form.svelte
+++ b/web/src/lib/components/forms/admin-registration-form.svelte
@@ -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}
diff --git a/web/src/lib/components/forms/create-user-form.svelte b/web/src/lib/components/forms/create-user-form.svelte
index d3b52dbd86..00188ec2eb 100644
--- a/web/src/lib/components/forms/create-user-form.svelte
+++ b/web/src/lib/components/forms/create-user-form.svelte
@@ -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}