CodeMirror/budibase
1
0
Fork 0
mirror of synced 2024-08-15 18:11:40 +12:00
Code Issues Projects Releases Wiki Activity

Validation refactor

Browse source
This commit is contained in:
Dean 2023-01-27 17:59:50 +00:00
parent d37c0e4b5d
commit 1534218c94
6 changed files with 111 additions and 122 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

66
packages/builder/src/pages/builder/admin/index.svelte
View file

@ -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={() => {

9
packages/builder/src/pages/builder/auth/_components/utils.js
View file

@ -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 (

2
packages/builder/src/pages/builder/auth/forgot.svelte
View file

@ -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">

28
packages/builder/src/pages/builder/auth/login.svelte
View file

@ -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}
/>

58
packages/builder/src/pages/builder/auth/reset.svelte
View file

@ -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}

70
packages/builder/src/pages/builder/invite/index.svelte
View file

@ -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}