diff --git a/packages/builder/src/pages/builder/app/[application]/settings/oauth2/AddButton.svelte b/packages/builder/src/pages/builder/app/[application]/settings/oauth2/AddButton.svelte index a06d4ce018..88c0c053e2 100644 --- a/packages/builder/src/pages/builder/app/[application]/settings/oauth2/AddButton.svelte +++ b/packages/builder/src/pages/builder/app/[application]/settings/oauth2/AddButton.svelte @@ -7,38 +7,102 @@ Divider, Heading, Input, + keepOpen, Link, Modal, ModalContent, + notifications, } from "@budibase/bbui" + import type { ZodType } from "zod" + import { z } from "zod" let modal: Modal function openModal() { + config = {} + errors = {} + hasBeenSubmitted = false modal.show() } let config: Partial = {} + let errors: Record = {} + let hasBeenSubmitted = false + + const requiredString = (errorMessage: string) => + z.string({ required_error: errorMessage }).trim().min(1, errorMessage) + + const validateConfig = (config: Partial) => { + const validator = z.object({ + name: requiredString("Name is required.").refine( + val => + !$oauth2.configs + .map(c => c.name.toLowerCase()) + .includes(val.toLowerCase()), + { + message: "This name is already taken.", + } + ), + url: requiredString("Url is required.").url(), + clientId: requiredString("Client ID is required."), + clientSecret: requiredString("Client secret is required."), + }) satisfies ZodType + + const validationResult = validator.safeParse(config) + errors = {} + if (!validationResult.success) { + errors = Object.entries( + validationResult.error.formErrors.fieldErrors + ).reduce>((acc, [field, errors]) => { + if (errors[0]) { + acc[field] = errors[0] + } + return acc + }, {}) + } + + return validationResult + } $: saveOAuth2Config = async () => { - await oauth2.create(config as any) // TODO + hasBeenSubmitted = true + const validationResult = validateConfig(config) + if (validationResult.error) { + return keepOpen + } + + try { + await oauth2.create(validationResult.data) + } catch (e: any) { + notifications.error(e.message) + return keepOpen + } } + + $: hasBeenSubmitted && validateConfig(config) Create new OAuth2 connection + The OAuth 2 authentication below uses the Client Credentials (machine to machine) grant type. - +
@@ -50,12 +114,14 @@ label="Client ID*" placeholder="Type here..." bind:value={config.clientId} + error={errors.clientId} /> To learn how to configure OAuth2, our documentation