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

Merge branch 'BUDI-9127/oauth2-config-validation' into BUDI-9127/edit-delete-configs-frontend

This commit is contained in:
Adria Navarro 2025-03-18 09:04:49 +01:00
parent 6db7ea4458 7f8f4cff97
commit b43bcb00b3
1 changed files with 68 additions and 2 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

70
packages/builder/src/pages/builder/app/[application]/settings/oauth2/AddButton.svelte
View File

@ -7,38 +7,102 @@
Divider, Divider,
Heading, Heading,
Input, Input,
keepOpen,
Link, Link,
Modal, Modal,
ModalContent, ModalContent,
notifications,
} from "@budibase/bbui" } from "@budibase/bbui"
import type { ZodType } from "zod"
import { z } from "zod"
let modal: Modal let modal: Modal
function openModal() { function openModal() {
config = {}
errors = {}
hasBeenSubmitted = false
modal.show() modal.show()
} }
let config: Partial<CreateOAuth2Config> = {} let config: Partial<CreateOAuth2Config> = {}
let errors: Record<string, string> = {}
let hasBeenSubmitted = false
const requiredString = (errorMessage: string) =>
z.string({ required_error: errorMessage }).trim().min(1, errorMessage)
const validateConfig = (config: Partial<CreateOAuth2Config>) => {
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<CreateOAuth2Config>
const validationResult = validator.safeParse(config)
errors = {}
if (!validationResult.success) {
errors = Object.entries(
validationResult.error.formErrors.fieldErrors
).reduce<Record<string, string>>((acc, [field, errors]) => {
if (errors[0]) {
acc[field] = errors[0]
}
return acc
}, {})
}
return validationResult
}
$: saveOAuth2Config = async () => { $: 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)
</script> </script>
<Button cta size="M" on:click={openModal}>Add OAuth2</Button> <Button cta size="M" on:click={openModal}>Add OAuth2</Button>
<Modal bind:this={modal}> <Modal bind:this={modal}>
<ModalContent onConfirm={saveOAuth2Config} size="M"> <ModalContent onConfirm={saveOAuth2Config} size="M">
<Heading size="S">Create new OAuth2 connection</Heading> <Heading size="S">Create new OAuth2 connection</Heading>
<Body size="S"> <Body size="S">
The OAuth 2 authentication below uses the Client Credentials (machine to The OAuth 2 authentication below uses the Client Credentials (machine to
machine) grant type. machine) grant type.
</Body> </Body>
<Divider noGrid noMargin /> <Divider noGrid noMargin />
<Input label="Name*" placeholder="Type here..." bind:value={config.name} /> <Input
label="Name*"
placeholder="Type here..."
bind:value={config.name}
error={errors.name}
/>
<Input <Input
label="Service URL*" label="Service URL*"
placeholder="E.g. www.google.com" placeholder="E.g. www.google.com"
bind:value={config.url} bind:value={config.url}
error={errors.url}
/> />
<div class="field-info"> <div class="field-info">
<Body size="XS" color="var(--spectrum-global-color-gray-700)"> <Body size="XS" color="var(--spectrum-global-color-gray-700)">
@ -50,11 +114,13 @@
label="Client ID*" label="Client ID*"
placeholder="Type here..." placeholder="Type here..."
bind:value={config.clientId} bind:value={config.clientId}
error={errors.clientId}
/> />
<Input <Input
label="Client secret*" label="Client secret*"
placeholder="Type here..." placeholder="Type here..."
bind:value={config.clientSecret} bind:value={config.clientSecret}
error={errors.clientSecret}
/> />
<Body size="S" <Body size="S"
>To learn how to configure OAuth2, our documentation <Link >To learn how to configure OAuth2, our documentation <Link