From 910ac855cf392d24d65037c11e0108ed34123a59 Mon Sep 17 00:00:00 2001 From: Andrew Kingston Date: Thu, 15 Apr 2021 19:28:50 +0100 Subject: [PATCH] Rewrite create app modal to work with new spectrum fields --- .../components/start/CreateAppModal.svelte | 178 ++++++------------ .../src/components/start/Steps/Info.svelte | 12 +- .../src/components/start/Steps/User.svelte | 28 +-- .../src/components/start/Steps/index.js | 1 - 4 files changed, 82 insertions(+), 137 deletions(-) diff --git a/packages/builder/src/components/start/CreateAppModal.svelte b/packages/builder/src/components/start/CreateAppModal.svelte index 999bc493c2..d5eb606037 100644 --- a/packages/builder/src/components/start/CreateAppModal.svelte +++ b/packages/builder/src/components/start/CreateAppModal.svelte @@ -4,7 +4,6 @@ import { store, automationStore, hostingStore } from "builderStore" import { string, object } from "yup" import api, { get } from "builderStore/api" - import Form from "@svelteschool/svelte-forms" import Spinner from "components/common/Spinner.svelte" import { Info, User } from "./Steps" import Indicator from "./Indicator.svelte" @@ -16,44 +15,40 @@ import { onMount } from "svelte" import Logo from "/assets/bb-logo.svg" - //Move this to context="module" once svelte-forms is updated so that it can bind to stores correctly - const createAppStore = writable({ currentStep: 0, values: {} }) - export let template - const infoValidation = { - applicationName: string().required("Your application must have a name."), - } - const userValidation = { - email: string() - .email() - .required("Your application needs a first user."), - password: string().required("Please enter a password for your first user."), - roleId: string().required("You need to select a role for your user."), - } + const currentStep = writable(0) + const values = writable({ roleId: "ADMIN" }) + const errors = writable({}) + const touched = writable({}) + const steps = [Info, User] + let validators = [ + { + applicationName: string().required("Your application must have a name."), + }, + { + email: string() + .email() + .required("Your application needs a first user."), + password: string().required( + "Please enter a password for your first user." + ), + roleId: string() + .nullable() + .required("You need to select a role for your user."), + }, + ] let submitting = false - let errors = {} - let validationErrors = {} - let validationSchemas = [infoValidation, userValidation] - - function buildStep(component) { - return { - component, - errors, - } - } - - // steps need to be initialized for cypress from the get go - let steps = [buildStep(Info), buildStep(User)] + let valid = false + $: checkValidity($values, validators[$currentStep]) onMount(async () => { - let hostingInfo = await hostingStore.actions.fetch() - // re-init the steps based on whether self hosting or cloud hosted + const hostingInfo = await hostingStore.actions.fetch() if (hostingInfo.type === "self") { await hostingStore.actions.fetchDeployedApps() const existingAppNames = svelteGet(hostingStore).deployedAppNames - infoValidation.applicationName = string() + validators[0].applicationName = string() .required("Your application must have a name.") .test( "non-existing-app-name", @@ -63,54 +58,20 @@ appName => appName.toLowerCase() === value.toLowerCase() ) ) - - steps = [buildStep(Info), buildStep(User)] - validationSchemas = [infoValidation, userValidation] } }) - // Handles form navigation - const back = () => { - if ($createAppStore.currentStep > 0) { - $createAppStore.currentStep -= 1 - } - } - const next = () => { - $createAppStore.currentStep += 1 - } - - // $: errors = validationSchemas.validate(values); - $: getErrors( - $createAppStore.values, - validationSchemas[$createAppStore.currentStep] - ) - - async function getErrors(values, schema) { + const checkValidity = async (values, validator) => { + const obj = object().shape(validator) + Object.keys(validator).forEach(key => ($errors[key] = null)) try { - validationErrors = {} - await object(schema).validate(values, { abortEarly: false }) - } catch (error) { - validationErrors = extractErrors(error) - } - } - - const checkValidity = async (values, currentStep) => { - const validity = await object() - .shape(validationSchemas[currentStep]) - .isValid(values) - currentStepIsValid = validity - - // Check full form on last step - if (currentStep === steps.length - 1) { - // Make one big schema from all the small ones - const fullSchema = Object.assign({}, ...validationSchemas) - - // Check full form schema - const formIsValid = await object() - .shape(fullSchema) - .isValid(values) - fullFormIsValid = formIsValid + await obj.validate(values, { abortEarly: false }) + } catch (validationErrors) { + validationErrors.inner.forEach(error => { + $errors[error.path] = error.message + }) } + valid = await obj.isValid(values) } async function createNewApp() { @@ -118,7 +79,7 @@ try { // Create form data to create app let data = new FormData() - data.append("name", $createAppStore.values.applicationName) + data.append("name", $values.applicationName) data.append("useTemplate", template != null) if (template) { data.append("templateName", template.name) @@ -134,7 +95,7 @@ } analytics.captureEvent("App Created", { - name: $createAppStore.values.applicationName, + name: $values.applicationName, appId: appJson._id, template, }) @@ -153,12 +114,12 @@ // Create user const user = { - email: $createAppStore.values.email, - password: $createAppStore.values.password, - roleId: $createAppStore.values.roleId, + email: $values.email, + password: $values.password, + roleId: $values.roleId, } const userResp = await api.post(`/api/users`, user) - const json = await userResp.json() + await userResp.json() $goto(`./${appJson._id}`) } catch (error) { console.error(error) @@ -166,33 +127,14 @@ submitting = false } } - - async function updateKey([key, value]) { - const response = await api.put(`/api/keys/${key}`, { value }) - const res = await response.json() - return res - } - - function extractErrors({ inner }) { - if (!inner) return {} - return inner.reduce((acc, err) => { - return { ...acc, [err.path]: err.message } - }, {}) - } - - let currentStepIsValid = false - let fullFormIsValid = false - $: checkValidity($createAppStore.values, $createAppStore.currentStep) - - let onChange = () => {}
- {#each steps as { active, done }, i} + {#each steps as component, i} {/each}
@@ -201,34 +143,32 @@

Get Started with Budibase

-
- {#each steps as step, i (i)} -
- -
- {/each} -
+ {#each steps as component, i (i)} +
+ +
+ {/each}
- {#if $createAppStore.currentStep > 0} - + {#if $currentStep > 0} + {/if} - {#if $createAppStore.currentStep < steps.length - 1} - {/if} - {#if $createAppStore.currentStep === steps.length - 1} + {#if $currentStep === steps.length - 1} {/if} diff --git a/packages/builder/src/components/start/Steps/Info.svelte b/packages/builder/src/components/start/Steps/Info.svelte index c10fec8fd5..0163eadc68 100644 --- a/packages/builder/src/components/start/Steps/Info.svelte +++ b/packages/builder/src/components/start/Steps/Info.svelte @@ -1,11 +1,14 @@

Create your first User

(blurred.email = true)} + bind:value={$values.email} + on:change={() => ($touched.email = true)} label="Email" - name="email" placeholder="Email" type="email" - error={blurred.email && validationErrors.email} /> + error={$touched.email && $errors.email} /> (blurred.password = true)} + bind:value={$values.password} + on:change={() => ($touched.password = true)} label="Password" - name="password" placeholder="Password" type="password" - error={blurred.password && validationErrors.password} /> - + error={$touched.password && $errors.password} /> +