mirror of https://github.com/Budibase/budibase.git
Rory Powell
5 years ago
5 changed files with 246 additions and 69 deletions
@ -0,0 +1,215 @@ |
|||
<script> |
|||
import { onMount } from "svelte" |
|||
import { ModalContent, Layout, Select, Body, Input } from "@budibase/bbui" |
|||
import { AUTH_TYPE_LABELS, AUTH_TYPES } from "./authTypes" |
|||
|
|||
export let configs |
|||
export let currentConfig |
|||
export let onConfirm |
|||
export let onDelete |
|||
|
|||
let form = { |
|||
basic: {}, |
|||
bearer: {}, |
|||
} |
|||
|
|||
let errors = { |
|||
basic: {}, |
|||
bearer: {}, |
|||
} |
|||
|
|||
let blurred = { |
|||
basic: {}, |
|||
bearer: {}, |
|||
} |
|||
|
|||
let hasErrors = false |
|||
let hasChanged = false |
|||
|
|||
onMount(() => { |
|||
if (currentConfig) { |
|||
deconstructConfig() |
|||
} |
|||
}) |
|||
|
|||
/** |
|||
* map the current config's data into the form by type |
|||
*/ |
|||
const deconstructConfig = () => { |
|||
form.name = currentConfig.name |
|||
form.type = currentConfig.type |
|||
|
|||
if (currentConfig.type === AUTH_TYPES.BASIC) { |
|||
form.basic = { |
|||
...currentConfig.config, |
|||
} |
|||
} else if (currentConfig.type === AUTH_TYPES.BEARER) { |
|||
form.bearer = { |
|||
...currentConfig.config, |
|||
} |
|||
} |
|||
} |
|||
|
|||
/** |
|||
* map the form into a new config to save by type |
|||
*/ |
|||
const constructConfig = () => { |
|||
const newConfig = { |
|||
name: form.name, |
|||
type: form.type, |
|||
} |
|||
|
|||
if (form.type === AUTH_TYPES.BASIC) { |
|||
newConfig.config = { |
|||
...form.basic, |
|||
} |
|||
} else if (form.type === AUTH_TYPES.BEARER) { |
|||
newConfig.config = { |
|||
...form.bearer, |
|||
} |
|||
} |
|||
|
|||
return newConfig |
|||
} |
|||
|
|||
/** |
|||
* compare the existing config with the new config to see if there are any changes |
|||
*/ |
|||
const checkChanged = () => { |
|||
if (currentConfig) { |
|||
hasChanged = |
|||
JSON.stringify(currentConfig) !== JSON.stringify(constructConfig()) |
|||
} else { |
|||
hasChanged = true |
|||
} |
|||
} |
|||
|
|||
const checkErrors = () => { |
|||
hasErrors = false |
|||
|
|||
// NAME |
|||
const nameError = () => { |
|||
// Unique name |
|||
if (form.name) { |
|||
errors.name = |
|||
// check for duplicate excluding the current config |
|||
configs.find( |
|||
c => c.name === form.name && c.name !== currentConfig?.name |
|||
) !== undefined |
|||
? "Name must be unique" |
|||
: null |
|||
} |
|||
// Name required |
|||
else { |
|||
errors.name = "Name is required" |
|||
} |
|||
return !!errors.name |
|||
} |
|||
|
|||
// TYPE |
|||
const typeError = () => { |
|||
errors.type = form.type ? null : "Type is required" |
|||
return !!errors.type |
|||
} |
|||
|
|||
// BASIC AUTH |
|||
const basicAuthErrors = () => { |
|||
errors.basic.username = form.basic.username |
|||
? null |
|||
: "Username is required" |
|||
errors.basic.password = form.basic.password |
|||
? null |
|||
: "Password is required" |
|||
|
|||
return !!(errors.basic.username || errors.basic.password || commonError) |
|||
} |
|||
|
|||
// BEARER TOKEN |
|||
const bearerTokenErrors = () => { |
|||
errors.bearer.token = form.bearer.token ? null : "Token is required" |
|||
return !!(errors.bearer.token || commonError) |
|||
} |
|||
|
|||
const commonError = nameError() || typeError() |
|||
if (form.type === AUTH_TYPES.BASIC) { |
|||
hasErrors = basicAuthErrors() || commonError |
|||
} else if (form.type === AUTH_TYPES.BEARER) { |
|||
hasErrors = bearerTokenErrors() || commonError |
|||
} else { |
|||
hasErrors = !!commonError |
|||
} |
|||
} |
|||
|
|||
const onFieldChange = () => { |
|||
checkErrors() |
|||
checkChanged() |
|||
} |
|||
|
|||
const onConfirmInternal = () => { |
|||
onConfirm(constructConfig()) |
|||
} |
|||
</script> |
|||
|
|||
<ModalContent |
|||
title={currentConfig ? "Update Authentication" : "Add Authentication"} |
|||
onConfirm={onConfirmInternal} |
|||
confirmText={currentConfig ? "Update" : "Add"} |
|||
disabled={hasErrors || !hasChanged} |
|||
cancelText={"Cancel"} |
|||
warning={true} |
|||
size="M" |
|||
showSecondaryButton={!!currentConfig} |
|||
secondaryButtonText={"Delete"} |
|||
secondaryAction={onDelete} |
|||
secondaryButtonWarning={true} |
|||
> |
|||
<Layout gap="S"> |
|||
<Body size="S"> |
|||
The authorization header will be automatically generated when you send the |
|||
request. |
|||
</Body> |
|||
<Input |
|||
label="Name" |
|||
bind:value={form.name} |
|||
on:change={onFieldChange} |
|||
on:blur={() => (blurred.name = true)} |
|||
error={blurred.name ? errors.name : null} |
|||
/> |
|||
<Select |
|||
label="Type" |
|||
bind:value={form.type} |
|||
on:change={onFieldChange} |
|||
options={AUTH_TYPE_LABELS} |
|||
on:blur={() => (blurred.type = true)} |
|||
error={blurred.type ? errors.type : null} |
|||
/> |
|||
{#if form.type === AUTH_TYPES.BASIC} |
|||
<Input |
|||
label="Username" |
|||
bind:value={form.basic.username} |
|||
on:change={onFieldChange} |
|||
on:blur={() => (blurred.basic.username = true)} |
|||
error={blurred.basic.username ? errors.basic.username : null} |
|||
/> |
|||
<Input |
|||
label="Password" |
|||
bind:value={form.basic.password} |
|||
on:change={onFieldChange} |
|||
on:blur={() => (blurred.basic.password = true)} |
|||
error={blurred.basic.password ? errors.basic.password : null} |
|||
/> |
|||
{/if} |
|||
{#if form.type === AUTH_TYPES.BEARER} |
|||
<Input |
|||
label="Token" |
|||
bind:value={form.bearer.token} |
|||
on:change={onFieldChange} |
|||
on:blur={() => (blurred.bearer.token = true)} |
|||
error={blurred.bearer.token ? errors.bearer.token : null} |
|||
/> |
|||
{/if} |
|||
</Layout> |
|||
</ModalContent> |
|||
|
|||
<style> |
|||
</style> |
|||
Loading…
Reference in new issue