From 1534218c9416aef6f3f07424cce9d3a2b09f0dcc Mon Sep 17 00:00:00 2001
From: Dean <deanhannigan@gmail.com>
Date: Fri, 27 Jan 2023 17:59:50 +0000
Subject: [PATCH] Validation refactor

---
 .../src/pages/builder/admin/index.svelte      | 66 ++++++++---------
 .../pages/builder/auth/_components/utils.js   |  9 ++-
 .../src/pages/builder/auth/forgot.svelte      |  2 +-
 .../src/pages/builder/auth/login.svelte       | 28 ++++----
 .../src/pages/builder/auth/reset.svelte       | 58 +++++++--------
 .../src/pages/builder/invite/index.svelte     | 70 +++++++++----------
 6 files changed, 111 insertions(+), 122 deletions(-)

diff --git a/packages/builder/src/pages/builder/admin/index.svelte b/packages/builder/src/pages/builder/admin/index.svelte
index 7ef2d6d290..cc1a70b3bc 100644
--- a/packages/builder/src/pages/builder/admin/index.svelte
+++ b/packages/builder/src/pages/builder/admin/index.svelte
@@ -15,7 +15,7 @@
   import { onMount } from "svelte"
   import { FancyForm, FancyInput, ActionButton } from "@budibase/bbui"
   import { TestimonialPage } from "@budibase/frontend-core/src/components"
-  import { handleError, passwordsMatch } from "../auth/_components/utils"
+  import { passwordsMatch, handleError } from "../auth/_components/utils"
 
   let modal
   let form
@@ -26,7 +26,6 @@
   $: tenantId = $auth.tenantId
   $: cloud = $admin.cloud
   $: imported = $admin.importComplete
-  $: multiTenancyEnabled = $admin.multiTenancy
 
   async function save() {
     form.validate()
@@ -35,7 +34,8 @@
     }
     submitted = true
     try {
-      const adminUser = { ...formData, tenantId }
+      let adminUser = { ...formData, tenantId }
+      delete adminUser.confirmationPassword
       // Save the admin user
       await API.createAdminUser(adminUser)
       notifications.success("Admin user created")
@@ -81,13 +81,10 @@
             }
           }}
           validate={() => {
-            handleError(() => {
-              return {
-                email: !formData.email
-                  ? "Please enter a valid email"
-                  : undefined,
-              }
-            }, errors)
+            let fieldError = {
+              email: !formData.email ? "Please enter a valid email" : undefined,
+            }
+            errors = handleError({ ...errors, ...fieldError })
           }}
           disabled={submitted}
           error={errors.email}
@@ -103,23 +100,21 @@
             }
           }}
           validate={() => {
-            handleError(() => {
-              let err = {}
+            let fieldError = {}
 
-              err["password"] = !formData.password
-                ? "Please enter a password"
+            fieldError["password"] = !formData.password
+              ? "Please enter a password"
+              : undefined
+
+            fieldError["confirmationPassword"] =
+              !passwordsMatch(
+                formData.password,
+                formData.confirmationPassword
+              ) && formData.confirmationPassword
+                ? "Passwords must match"
                 : undefined
 
-              err["confirmationPassword"] =
-                !passwordsMatch(
-                  formData.password,
-                  formData.confirmationPassword
-                ) && formData.confirmationPassword
-                  ? "Passwords must match"
-                  : undefined
-
-              return err
-            }, errors)
+            errors = handleError({ ...errors, ...fieldError })
           }}
           error={errors.password}
           disabled={submitted}
@@ -135,17 +130,16 @@
             }
           }}
           validate={() => {
-            handleError(() => {
-              return {
-                confirmationPassword:
-                  !passwordsMatch(
-                    formData.password,
-                    formData.confirmationPassword
-                  ) && formData.password
-                    ? "Passwords must match"
-                    : undefined,
-              }
-            }, errors)
+            let fieldError = {
+              confirmationPassword:
+                !passwordsMatch(
+                  formData.password,
+                  formData.confirmationPassword
+                ) && formData.password
+                  ? "Passwords must match"
+                  : undefined,
+            }
+            errors = handleError({ ...errors, ...fieldError })
           }}
           error={errors.confirmationPassword}
           disabled={submitted}
@@ -163,7 +157,7 @@
     </Layout>
     <Layout gap="XS" noPadding justifyItems="center">
       <div class="user-actions">
-        {#if !cloud && !imported && !multiTenancyEnabled}
+        {#if !cloud && !imported}
           <ActionButton
             quiet
             on:click={() => {
diff --git a/packages/builder/src/pages/builder/auth/_components/utils.js b/packages/builder/src/pages/builder/auth/_components/utils.js
index 0ca42292b9..ebdb4e9881 100644
--- a/packages/builder/src/pages/builder/auth/_components/utils.js
+++ b/packages/builder/src/pages/builder/auth/_components/utils.js
@@ -1,7 +1,6 @@
-exports.handleError = (validate, errors) => {
-  const err = validate()
-  let update = { ...errors, ...err }
-  errors = Object.keys(update).reduce((acc, key) => {
+export const handleError = err => {
+  let update = { ...err }
+  return Object.keys(update).reduce((acc, key) => {
     if (update[key]) {
       acc[key] = update[key]
     }
@@ -9,7 +8,7 @@ exports.handleError = (validate, errors) => {
   }, {})
 }
 
-exports.passwordsMatch = (password, confirmation) => {
+export const passwordsMatch = (password, confirmation) => {
   let confirm = confirmation?.trim()
   let pwd = password?.trim()
   return (
diff --git a/packages/builder/src/pages/builder/auth/forgot.svelte b/packages/builder/src/pages/builder/auth/forgot.svelte
index 13c8331c2d..d58fdf99e0 100644
--- a/packages/builder/src/pages/builder/auth/forgot.svelte
+++ b/packages/builder/src/pages/builder/auth/forgot.svelte
@@ -44,7 +44,7 @@
 </script>
 
 <TestimonialPage>
-  <Layout gap="M" noPadding>
+  <Layout gap="S" noPadding>
     <img alt="logo" src={$organisation.logoUrl || Logo} />
     <span class="heading-wrap">
       <Heading size="M">
diff --git a/packages/builder/src/pages/builder/auth/login.svelte b/packages/builder/src/pages/builder/auth/login.svelte
index b80dac44e7..032cf850fa 100644
--- a/packages/builder/src/pages/builder/auth/login.svelte
+++ b/packages/builder/src/pages/builder/auth/login.svelte
@@ -66,7 +66,7 @@
 <svelte:window on:keydown={handleKeydown} />
 
 <TestimonialPage>
-  <Layout gap="M" noPadding>
+  <Layout gap="S" noPadding>
     <Layout justifyItems="center" noPadding>
       {#if loaded}
         <img alt="logo" src={$organisation.logoUrl || Logo} />
@@ -92,13 +92,12 @@
             }
           }}
           validate={() => {
-            handleError(() => {
-              return {
-                username: !formData.username
-                  ? "Please enter a valid email"
-                  : undefined,
-              }
-            }, errors)
+            let fieldError = {
+              username: !formData.username
+                ? "Please enter a valid email"
+                : undefined,
+            }
+            errors = handleError({ ...errors, ...fieldError })
           }}
           error={errors.username}
         />
@@ -113,13 +112,12 @@
             }
           }}
           validate={() => {
-            handleError(() => {
-              return {
-                password: !formData.password
-                  ? "Please enter your password"
-                  : undefined,
-              }
-            }, errors)
+            let fieldError = {
+              password: !formData.password
+                ? "Please enter your password"
+                : undefined,
+            }
+            errors = handleError({ ...errors, ...fieldError })
           }}
           error={errors.password}
         />
diff --git a/packages/builder/src/pages/builder/auth/reset.svelte b/packages/builder/src/pages/builder/auth/reset.svelte
index 3b1312b051..19bc1a1b7d 100644
--- a/packages/builder/src/pages/builder/auth/reset.svelte
+++ b/packages/builder/src/pages/builder/auth/reset.svelte
@@ -10,10 +10,9 @@
 
   const resetCode = $params["?code"]
   let form
-
   let formData = {}
   let errors = {}
-  $: console.log(errors)
+  let loaded = false
 
   $: submitted = false
   $: forceResetPassword = $auth?.user?.forceResetPassword
@@ -50,12 +49,15 @@
     } catch (error) {
       notifications.error("Error getting org config")
     }
+    loaded = true
   })
 </script>
 
 <TestimonialPage>
-  <Layout gap="M" noPadding>
-    <img alt="logo" src={$organisation.logoUrl || Logo} />
+  <Layout gap="S" noPadding>
+    {#if loaded}
+      <img alt="logo" src={$organisation.logoUrl || Logo} />
+    {/if}
     <Layout gap="XS" noPadding>
       <Heading size="M">Reset your password</Heading>
       <Body size="M">Please enter the new password you'd like to use.</Body>
@@ -74,23 +76,21 @@
             }
           }}
           validate={() => {
-            handleError(() => {
-              let err = {}
+            let fieldError = {}
 
-              err["password"] = !formData.password
-                ? "Please enter a password"
+            fieldError["password"] = !formData.password
+              ? "Please enter a password"
+              : undefined
+
+            fieldError["confirmationPassword"] =
+              !passwordsMatch(
+                formData.password,
+                formData.confirmationPassword
+              ) && formData.confirmationPassword
+                ? "Passwords must match"
                 : undefined
 
-              err["confirmationPassword"] =
-                !passwordsMatch(
-                  formData.password,
-                  formData.confirmationPassword
-                ) && formData.confirmationPassword
-                  ? "Passwords must match"
-                  : undefined
-
-              return err
-            }, errors)
+            errors = handleError({ ...errors, ...fieldError })
           }}
           error={errors.password}
           disabled={submitted}
@@ -106,17 +106,17 @@
             }
           }}
           validate={() => {
-            handleError(() => {
-              return {
-                confirmationPassword:
-                  !passwordsMatch(
-                    formData.password,
-                    formData.confirmationPassword
-                  ) && formData.password
-                    ? "Passwords must match"
-                    : undefined,
-              }
-            }, errors)
+            const isValid =
+              !passwordsMatch(
+                formData.password,
+                formData.confirmationPassword
+              ) && formData.password
+
+            let fieldError = {
+              confirmationPassword: isValid ? "Passwords must match" : null,
+            }
+
+            errors = handleError({ ...errors, ...fieldError })
           }}
           error={errors.confirmationPassword}
           disabled={submitted}
diff --git a/packages/builder/src/pages/builder/invite/index.svelte b/packages/builder/src/pages/builder/invite/index.svelte
index 2e780b5762..4b786db497 100644
--- a/packages/builder/src/pages/builder/invite/index.svelte
+++ b/packages/builder/src/pages/builder/invite/index.svelte
@@ -68,7 +68,7 @@
 </script>
 
 <TestimonialPage>
-  <Layout gap="M" noPadding>
+  <Layout gap="S" noPadding>
     <img alt="logo" src={$organisation.logoUrl || Logo} />
     <Layout gap="XS" noPadding>
       <Heading size="M">Join {company}</Heading>
@@ -84,7 +84,7 @@
           error={errors.email}
         />
         <FancyInput
-          label="First Name"
+          label="First name"
           value={formData.firstName}
           on:change={e => {
             formData = {
@@ -93,19 +93,19 @@
             }
           }}
           validate={() => {
-            handleError(() => {
-              return {
-                firstName: !formData.firstName
-                  ? "Please enter your first name"
-                  : undefined,
-              }
-            }, errors)
+            let fieldError = {
+              firstName: !formData.firstName
+                ? "Please enter your first name"
+                : undefined,
+            }
+
+            errors = handleError({ ...errors, ...fieldError })
           }}
           error={errors.firstName}
           disabled={onboarding}
         />
         <FancyInput
-          label="Last Name (Optional)"
+          label="Last name (optional)"
           value={formData.lastName}
           on:change={e => {
             formData = {
@@ -126,29 +126,27 @@
             }
           }}
           validate={() => {
-            handleError(() => {
-              let err = {}
+            let fieldError = {}
 
-              err["password"] = !formData.password
-                ? "Please enter a password"
+            fieldError["password"] = !formData.password
+              ? "Please enter a password"
+              : undefined
+
+            fieldError["confirmationPassword"] =
+              !passwordsMatch(
+                formData.password,
+                formData.confirmationPassword
+              ) && formData.confirmationPassword
+                ? "Passwords must match"
                 : undefined
 
-              err["confirmationPassword"] =
-                !passwordsMatch(
-                  formData.password,
-                  formData.confirmationPassword
-                ) && formData.confirmationPassword
-                  ? "Passwords must match"
-                  : undefined
-
-              return err
-            }, errors)
+            errors = handleError({ ...errors, ...fieldError })
           }}
           error={errors.password}
           disabled={onboarding}
         />
         <FancyInput
-          label="Repeat Password"
+          label="Repeat password"
           value={formData.confirmationPassword}
           type="password"
           on:change={e => {
@@ -158,17 +156,17 @@
             }
           }}
           validate={() => {
-            handleError(() => {
-              return {
-                confirmationPassword:
-                  !passwordsMatch(
-                    formData.password,
-                    formData.confirmationPassword
-                  ) && formData.password
-                    ? "Passwords must match"
-                    : undefined,
-              }
-            }, errors)
+            let fieldError = {
+              confirmationPassword:
+                !passwordsMatch(
+                  formData.password,
+                  formData.confirmationPassword
+                ) && formData.password
+                  ? "Passwords must match"
+                  : undefined,
+            }
+
+            errors = handleError({ ...errors, ...fieldError })
           }}
           error={errors.confirmationPassword}
           disabled={onboarding}