MirrorSave
/
budibase
mirror of https://github.com/Budibase/budibase.git
1
0
Fork 0
Code Issues Packages Projects Releases Wiki Activity

Validation refactor

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 { onMount } from "svelte"
import { FancyForm, FancyInput, ActionButton } from "@budibase/bbui" import { FancyForm, FancyInput, ActionButton } from "@budibase/bbui"
import { TestimonialPage } from "@budibase/frontend-core/src/components" 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 modal
let form let form
@ -26,7 +26,6 @@
$: tenantId = $auth.tenantId $: tenantId = $auth.tenantId
$: cloud = $admin.cloud $: cloud = $admin.cloud
$: imported = $admin.importComplete $: imported = $admin.importComplete
$: multiTenancyEnabled = $admin.multiTenancy
async function save() { async function save() {
form.validate() form.validate()
@ -35,7 +34,8 @@
} }
submitted = true submitted = true
try { try {
const adminUser = { ...formData, tenantId } let adminUser = { ...formData, tenantId }
delete adminUser.confirmationPassword
// Save the admin user // Save the admin user
await API.createAdminUser(adminUser) await API.createAdminUser(adminUser)
notifications.success("Admin user created") notifications.success("Admin user created")
@ -81,13 +81,10 @@
} }
}} }}
validate={() => { validate={() => {
handleError(() => { let fieldError = {
return { email: !formData.email ? "Please enter a valid email" : undefined,
email: !formData.email }
? "Please enter a valid email" errors = handleError({ ...errors, ...fieldError })
: undefined,
}
}, errors)
}} }}
disabled={submitted} disabled={submitted}
error={errors.email} error={errors.email}
@ -103,23 +100,21 @@
} }
}} }}
validate={() => { validate={() => {
handleError(() => { let fieldError = {}
let err = {}
err["password"] = !formData.password fieldError["password"] = !formData.password
? "Please enter a password" ? "Please enter a password"
: undefined
fieldError["confirmationPassword"] =
!passwordsMatch(
formData.password,
formData.confirmationPassword
) && formData.confirmationPassword
? "Passwords must match"
: undefined : undefined
err["confirmationPassword"] = errors = handleError({ ...errors, ...fieldError })
!passwordsMatch(
formData.password,
formData.confirmationPassword
) && formData.confirmationPassword
? "Passwords must match"
: undefined
return err
}, errors)
}} }}
error={errors.password} error={errors.password}
disabled={submitted} disabled={submitted}
@ -135,17 +130,16 @@
} }
}} }}
validate={() => { validate={() => {
handleError(() => { let fieldError = {
return { confirmationPassword:
confirmationPassword: !passwordsMatch(
!passwordsMatch( formData.password,
formData.password, formData.confirmationPassword
formData.confirmationPassword ) && formData.password
) && formData.password ? "Passwords must match"
? "Passwords must match" : undefined,
: undefined, }
} errors = handleError({ ...errors, ...fieldError })
}, errors)
}} }}
error={errors.confirmationPassword} error={errors.confirmationPassword}
disabled={submitted} disabled={submitted}
@ -163,7 +157,7 @@
</Layout> </Layout>
<Layout gap="XS" noPadding justifyItems="center"> <Layout gap="XS" noPadding justifyItems="center">
<div class="user-actions"> <div class="user-actions">
{#if !cloud && !imported && !multiTenancyEnabled} {#if !cloud && !imported}
<ActionButton <ActionButton
quiet quiet
on:click={() => { on:click={() => {

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

@ -1,7 +1,6 @@
exports.handleError = (validate, errors) => { export const handleError = err => {
const err = validate() let update = { ...err }
let update = { ...errors, ...err } return Object.keys(update).reduce((acc, key) => {
errors = Object.keys(update).reduce((acc, key) => {
if (update[key]) { if (update[key]) {
acc[key] = 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 confirm = confirmation?.trim()
let pwd = password?.trim() let pwd = password?.trim()
return ( return (

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

@ -44,7 +44,7 @@
</script> </script>
<TestimonialPage> <TestimonialPage>
<Layout gap="M" noPadding> <Layout gap="S" noPadding>
<img alt="logo" src={$organisation.logoUrl || Logo} /> <img alt="logo" src={$organisation.logoUrl || Logo} />
<span class="heading-wrap"> <span class="heading-wrap">
<Heading size="M"> <Heading size="M">

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

@ -66,7 +66,7 @@
<svelte:window on:keydown={handleKeydown} /> <svelte:window on:keydown={handleKeydown} />
<TestimonialPage> <TestimonialPage>
<Layout gap="M" noPadding> <Layout gap="S" noPadding>
<Layout justifyItems="center" noPadding> <Layout justifyItems="center" noPadding>
{#if loaded} {#if loaded}
<img alt="logo" src={$organisation.logoUrl || Logo} /> <img alt="logo" src={$organisation.logoUrl || Logo} />
@ -92,13 +92,12 @@
} }
}} }}
validate={() => { validate={() => {
handleError(() => { let fieldError = {
return { username: !formData.username
username: !formData.username ? "Please enter a valid email"
? "Please enter a valid email" : undefined,
: undefined, }
} errors = handleError({ ...errors, ...fieldError })
}, errors)
}} }}
error={errors.username} error={errors.username}
/> />
@ -113,13 +112,12 @@
} }
}} }}
validate={() => { validate={() => {
handleError(() => { let fieldError = {
return { password: !formData.password
password: !formData.password ? "Please enter your password"
? "Please enter your password" : undefined,
: undefined, }
} errors = handleError({ ...errors, ...fieldError })
}, errors)
}} }}
error={errors.password} error={errors.password}
/> />

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

@ -10,10 +10,9 @@
const resetCode = $params["?code"] const resetCode = $params["?code"]
let form let form
let formData = {} let formData = {}
let errors = {} let errors = {}
$: console.log(errors) let loaded = false
$: submitted = false $: submitted = false
$: forceResetPassword = $auth?.user?.forceResetPassword $: forceResetPassword = $auth?.user?.forceResetPassword
@ -50,12 +49,15 @@
} catch (error) { } catch (error) {
notifications.error("Error getting org config") notifications.error("Error getting org config")
} }
loaded = true
}) })
</script> </script>
<TestimonialPage> <TestimonialPage>
<Layout gap="M" noPadding> <Layout gap="S" noPadding>
<img alt="logo" src={$organisation.logoUrl || Logo} /> {#if loaded}
<img alt="logo" src={$organisation.logoUrl || Logo} />
{/if}
<Layout gap="XS" noPadding> <Layout gap="XS" noPadding>
<Heading size="M">Reset your password</Heading> <Heading size="M">Reset your password</Heading>
<Body size="M">Please enter the new password you'd like to use.</Body> <Body size="M">Please enter the new password you'd like to use.</Body>
@ -74,23 +76,21 @@
} }
}} }}
validate={() => { validate={() => {
handleError(() => { let fieldError = {}
let err = {}
err["password"] = !formData.password fieldError["password"] = !formData.password
? "Please enter a password" ? "Please enter a password"
: undefined
fieldError["confirmationPassword"] =
!passwordsMatch(
formData.password,
formData.confirmationPassword
) && formData.confirmationPassword
? "Passwords must match"
: undefined : undefined
err["confirmationPassword"] = errors = handleError({ ...errors, ...fieldError })
!passwordsMatch(
formData.password,
formData.confirmationPassword
) && formData.confirmationPassword
? "Passwords must match"
: undefined
return err
}, errors)
}} }}
error={errors.password} error={errors.password}
disabled={submitted} disabled={submitted}
@ -106,17 +106,17 @@
} }
}} }}
validate={() => { validate={() => {
handleError(() => { const isValid =
return { !passwordsMatch(
confirmationPassword: formData.password,
!passwordsMatch( formData.confirmationPassword
formData.password, ) && formData.password
formData.confirmationPassword
) && formData.password let fieldError = {
? "Passwords must match" confirmationPassword: isValid ? "Passwords must match" : null,
: undefined, }
}
}, errors) errors = handleError({ ...errors, ...fieldError })
}} }}
error={errors.confirmationPassword} error={errors.confirmationPassword}
disabled={submitted} disabled={submitted}

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

@ -68,7 +68,7 @@
</script> </script>
<TestimonialPage> <TestimonialPage>
<Layout gap="M" noPadding> <Layout gap="S" noPadding>
<img alt="logo" src={$organisation.logoUrl || Logo} /> <img alt="logo" src={$organisation.logoUrl || Logo} />
<Layout gap="XS" noPadding> <Layout gap="XS" noPadding>
<Heading size="M">Join {company}</Heading> <Heading size="M">Join {company}</Heading>
@ -84,7 +84,7 @@
error={errors.email} error={errors.email}
/> />
<FancyInput <FancyInput
label="First Name" label="First name"
value={formData.firstName} value={formData.firstName}
on:change={e => { on:change={e => {
formData = { formData = {
@ -93,19 +93,19 @@
} }
}} }}
validate={() => { validate={() => {
handleError(() => { let fieldError = {
return { firstName: !formData.firstName
firstName: !formData.firstName ? "Please enter your first name"
? "Please enter your first name" : undefined,
: undefined, }
}
}, errors) errors = handleError({ ...errors, ...fieldError })
}} }}
error={errors.firstName} error={errors.firstName}
disabled={onboarding} disabled={onboarding}
/> />
<FancyInput <FancyInput
label="Last Name (Optional)" label="Last name (optional)"
value={formData.lastName} value={formData.lastName}
on:change={e => { on:change={e => {
formData = { formData = {
@ -126,29 +126,27 @@
} }
}} }}
validate={() => { validate={() => {
handleError(() => { let fieldError = {}
let err = {}
err["password"] = !formData.password fieldError["password"] = !formData.password
? "Please enter a password" ? "Please enter a password"
: undefined
fieldError["confirmationPassword"] =
!passwordsMatch(
formData.password,
formData.confirmationPassword
) && formData.confirmationPassword
? "Passwords must match"
: undefined : undefined
err["confirmationPassword"] = errors = handleError({ ...errors, ...fieldError })
!passwordsMatch(
formData.password,
formData.confirmationPassword
) && formData.confirmationPassword
? "Passwords must match"
: undefined
return err
}, errors)
}} }}
error={errors.password} error={errors.password}
disabled={onboarding} disabled={onboarding}
/> />
<FancyInput <FancyInput
label="Repeat Password" label="Repeat password"
value={formData.confirmationPassword} value={formData.confirmationPassword}
type="password" type="password"
on:change={e => { on:change={e => {
@ -158,17 +156,17 @@
} }
}} }}
validate={() => { validate={() => {
handleError(() => { let fieldError = {
return { confirmationPassword:
confirmationPassword: !passwordsMatch(
!passwordsMatch( formData.password,
formData.password, formData.confirmationPassword
formData.confirmationPassword ) && formData.password
) && formData.password ? "Passwords must match"
? "Passwords must match" : undefined,
: undefined, }
}
}, errors) errors = handleError({ ...errors, ...fieldError })
}} }}
error={errors.confirmationPassword} error={errors.confirmationPassword}
disabled={onboarding} disabled={onboarding}