2021-05-05 04:31:06 +12:00
|
|
|
<script>
|
2021-05-07 19:47:05 +12:00
|
|
|
import GoogleLogo from "./_logos/Google.svelte"
|
2021-05-05 04:31:06 +12:00
|
|
|
import {
|
|
|
|
Button,
|
|
|
|
Heading,
|
|
|
|
Divider,
|
2021-05-05 05:14:13 +12:00
|
|
|
Label,
|
2021-05-05 04:31:06 +12:00
|
|
|
notifications,
|
2021-05-05 05:14:13 +12:00
|
|
|
Layout,
|
2021-05-05 04:31:06 +12:00
|
|
|
Input,
|
|
|
|
Body,
|
|
|
|
} from "@budibase/bbui"
|
|
|
|
import { onMount } from "svelte"
|
|
|
|
import api from "builderStore/api"
|
|
|
|
|
|
|
|
const ConfigTypes = {
|
|
|
|
Google: "google",
|
|
|
|
// Github: "github",
|
|
|
|
// AzureAD: "ad",
|
|
|
|
}
|
|
|
|
|
|
|
|
const ConfigFields = {
|
|
|
|
Google: ["clientID", "clientSecret", "callbackURL"],
|
|
|
|
}
|
2021-05-22 00:46:13 +12:00
|
|
|
const ConfigLabels = {
|
|
|
|
Google: {
|
|
|
|
clientID: "Client ID",
|
|
|
|
clientSecret: "Client secret",
|
|
|
|
callbackURL: "Callback URL",
|
|
|
|
},
|
|
|
|
}
|
2021-05-05 04:31:06 +12:00
|
|
|
|
|
|
|
let google
|
|
|
|
|
|
|
|
async function save(doc) {
|
|
|
|
try {
|
|
|
|
// Save an oauth config
|
|
|
|
const response = await api.post(`/api/admin/configs`, doc)
|
|
|
|
const json = await response.json()
|
|
|
|
if (response.status !== 200) throw new Error(json.message)
|
|
|
|
google._rev = json._rev
|
|
|
|
google._id = json._id
|
2021-05-05 22:03:45 +12:00
|
|
|
|
2021-05-05 04:31:06 +12:00
|
|
|
notifications.success(`Settings saved.`)
|
|
|
|
} catch (err) {
|
|
|
|
notifications.error(`Failed to update OAuth settings. ${err}`)
|
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
onMount(async () => {
|
|
|
|
// fetch the configs for oauth
|
|
|
|
const googleResponse = await api.get(
|
|
|
|
`/api/admin/configs/${ConfigTypes.Google}`
|
|
|
|
)
|
|
|
|
const googleDoc = await googleResponse.json()
|
|
|
|
|
|
|
|
if (!googleDoc._id) {
|
|
|
|
google = {
|
2021-05-05 22:03:45 +12:00
|
|
|
type: ConfigTypes.Google,
|
2021-05-05 04:31:06 +12:00
|
|
|
config: {},
|
|
|
|
}
|
|
|
|
} else {
|
|
|
|
google = googleDoc
|
|
|
|
}
|
|
|
|
})
|
|
|
|
</script>
|
|
|
|
|
2021-05-19 22:07:14 +12:00
|
|
|
<Layout>
|
|
|
|
<Layout gap="XS" noPadding>
|
|
|
|
<Heading size="M">OAuth</Heading>
|
|
|
|
<Body>
|
|
|
|
Every budibase app comes with basic authentication (email/password)
|
|
|
|
included. You can add additional authentication methods from the options
|
|
|
|
below.
|
|
|
|
</Body>
|
|
|
|
</Layout>
|
|
|
|
{#if google}
|
2021-05-07 22:16:09 +12:00
|
|
|
<Divider />
|
2021-05-19 22:07:14 +12:00
|
|
|
<Layout gap="XS" noPadding>
|
|
|
|
<Heading size="S">
|
|
|
|
<span>
|
|
|
|
<GoogleLogo />
|
|
|
|
Google
|
|
|
|
</span>
|
|
|
|
</Heading>
|
|
|
|
<Body size="S">
|
|
|
|
To allow users to authenticate using their Google accounts, fill out the
|
|
|
|
fields below.
|
|
|
|
</Body>
|
|
|
|
</Layout>
|
|
|
|
<Layout gap="XS" noPadding>
|
2021-05-07 22:16:09 +12:00
|
|
|
{#each ConfigFields.Google as field}
|
|
|
|
<div class="form-row">
|
2021-05-22 00:46:13 +12:00
|
|
|
<Label size="L">{ConfigLabels.Google[field]}</Label>
|
2021-05-07 22:16:09 +12:00
|
|
|
<Input bind:value={google.config[field]} />
|
|
|
|
</div>
|
|
|
|
{/each}
|
2021-05-19 22:07:14 +12:00
|
|
|
</Layout>
|
|
|
|
<div>
|
|
|
|
<Button cta on:click={() => save(google)}>Save</Button>
|
|
|
|
</div>
|
|
|
|
{/if}
|
|
|
|
</Layout>
|
2021-05-05 04:31:06 +12:00
|
|
|
|
|
|
|
<style>
|
2021-05-05 05:14:13 +12:00
|
|
|
.form-row {
|
|
|
|
display: grid;
|
|
|
|
grid-template-columns: 20% 1fr;
|
|
|
|
grid-gap: var(--spacing-l);
|
2021-05-07 22:16:09 +12:00
|
|
|
align-items: center;
|
2021-05-05 04:31:06 +12:00
|
|
|
}
|
2021-05-06 04:21:35 +12:00
|
|
|
|
|
|
|
span {
|
|
|
|
display: flex;
|
|
|
|
align-items: center;
|
|
|
|
gap: var(--spacing-s);
|
|
|
|
}
|
2021-05-05 04:31:06 +12:00
|
|
|
</style>
|