Validation refactor
This commit is contained in:
parent
d37c0e4b5d
commit
1534218c94
|
@ -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,
|
||||
let fieldError = {
|
||||
email: !formData.email ? "Please enter a valid email" : undefined,
|
||||
}
|
||||
}, errors)
|
||||
errors = handleError({ ...errors, ...fieldError })
|
||||
}}
|
||||
disabled={submitted}
|
||||
error={errors.email}
|
||||
|
@ -103,14 +100,13 @@
|
|||
}
|
||||
}}
|
||||
validate={() => {
|
||||
handleError(() => {
|
||||
let err = {}
|
||||
let fieldError = {}
|
||||
|
||||
err["password"] = !formData.password
|
||||
fieldError["password"] = !formData.password
|
||||
? "Please enter a password"
|
||||
: undefined
|
||||
|
||||
err["confirmationPassword"] =
|
||||
fieldError["confirmationPassword"] =
|
||||
!passwordsMatch(
|
||||
formData.password,
|
||||
formData.confirmationPassword
|
||||
|
@ -118,8 +114,7 @@
|
|||
? "Passwords must match"
|
||||
: undefined
|
||||
|
||||
return err
|
||||
}, errors)
|
||||
errors = handleError({ ...errors, ...fieldError })
|
||||
}}
|
||||
error={errors.password}
|
||||
disabled={submitted}
|
||||
|
@ -135,8 +130,7 @@
|
|||
}
|
||||
}}
|
||||
validate={() => {
|
||||
handleError(() => {
|
||||
return {
|
||||
let fieldError = {
|
||||
confirmationPassword:
|
||||
!passwordsMatch(
|
||||
formData.password,
|
||||
|
@ -145,7 +139,7 @@
|
|||
? "Passwords must match"
|
||||
: undefined,
|
||||
}
|
||||
}, errors)
|
||||
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={() => {
|
||||
|
|
|
@ -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 (
|
||||
|
|
|
@ -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">
|
||||
|
|
|
@ -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 {
|
||||
let fieldError = {
|
||||
username: !formData.username
|
||||
? "Please enter a valid email"
|
||||
: undefined,
|
||||
}
|
||||
}, errors)
|
||||
errors = handleError({ ...errors, ...fieldError })
|
||||
}}
|
||||
error={errors.username}
|
||||
/>
|
||||
|
@ -113,13 +112,12 @@
|
|||
}
|
||||
}}
|
||||
validate={() => {
|
||||
handleError(() => {
|
||||
return {
|
||||
let fieldError = {
|
||||
password: !formData.password
|
||||
? "Please enter your password"
|
||||
: undefined,
|
||||
}
|
||||
}, errors)
|
||||
errors = handleError({ ...errors, ...fieldError })
|
||||
}}
|
||||
error={errors.password}
|
||||
/>
|
||||
|
|
|
@ -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>
|
||||
<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,14 +76,13 @@
|
|||
}
|
||||
}}
|
||||
validate={() => {
|
||||
handleError(() => {
|
||||
let err = {}
|
||||
let fieldError = {}
|
||||
|
||||
err["password"] = !formData.password
|
||||
fieldError["password"] = !formData.password
|
||||
? "Please enter a password"
|
||||
: undefined
|
||||
|
||||
err["confirmationPassword"] =
|
||||
fieldError["confirmationPassword"] =
|
||||
!passwordsMatch(
|
||||
formData.password,
|
||||
formData.confirmationPassword
|
||||
|
@ -89,8 +90,7 @@
|
|||
? "Passwords must match"
|
||||
: undefined
|
||||
|
||||
return err
|
||||
}, errors)
|
||||
errors = handleError({ ...errors, ...fieldError })
|
||||
}}
|
||||
error={errors.password}
|
||||
disabled={submitted}
|
||||
|
@ -106,17 +106,17 @@
|
|||
}
|
||||
}}
|
||||
validate={() => {
|
||||
handleError(() => {
|
||||
return {
|
||||
confirmationPassword:
|
||||
const isValid =
|
||||
!passwordsMatch(
|
||||
formData.password,
|
||||
formData.confirmationPassword
|
||||
) && formData.password
|
||||
? "Passwords must match"
|
||||
: undefined,
|
||||
|
||||
let fieldError = {
|
||||
confirmationPassword: isValid ? "Passwords must match" : null,
|
||||
}
|
||||
}, errors)
|
||||
|
||||
errors = handleError({ ...errors, ...fieldError })
|
||||
}}
|
||||
error={errors.confirmationPassword}
|
||||
disabled={submitted}
|
||||
|
|
|
@ -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 {
|
||||
let fieldError = {
|
||||
firstName: !formData.firstName
|
||||
? "Please enter your first name"
|
||||
: undefined,
|
||||
}
|
||||
}, errors)
|
||||
|
||||
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,14 +126,13 @@
|
|||
}
|
||||
}}
|
||||
validate={() => {
|
||||
handleError(() => {
|
||||
let err = {}
|
||||
let fieldError = {}
|
||||
|
||||
err["password"] = !formData.password
|
||||
fieldError["password"] = !formData.password
|
||||
? "Please enter a password"
|
||||
: undefined
|
||||
|
||||
err["confirmationPassword"] =
|
||||
fieldError["confirmationPassword"] =
|
||||
!passwordsMatch(
|
||||
formData.password,
|
||||
formData.confirmationPassword
|
||||
|
@ -141,14 +140,13 @@
|
|||
? "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,8 +156,7 @@
|
|||
}
|
||||
}}
|
||||
validate={() => {
|
||||
handleError(() => {
|
||||
return {
|
||||
let fieldError = {
|
||||
confirmationPassword:
|
||||
!passwordsMatch(
|
||||
formData.password,
|
||||
|
@ -168,7 +165,8 @@
|
|||
? "Passwords must match"
|
||||
: undefined,
|
||||
}
|
||||
}, errors)
|
||||
|
||||
errors = handleError({ ...errors, ...fieldError })
|
||||
}}
|
||||
error={errors.confirmationPassword}
|
||||
disabled={onboarding}
|
||||
|
|
Loading…
Reference in New Issue