1
0
Fork 0
mirror of synced 2024-06-02 18:44:54 +12:00
budibase/packages/builder/src/pages/builder/portal/manage/auth/index.svelte

115 lines
2.4 KiB
Svelte
Raw Normal View History

2021-05-05 04:31:06 +12:00
<script>
import GoogleLogo from "./_logos/Google.svelte"
2021-05-05 04:31:06 +12:00
import {
Button,
Heading,
Divider,
2021-05-07 22:16:09 +12:00
Page,
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"],
}
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>
<Page>
2021-05-07 22:16:09 +12:00
<Layout noPadding>
<div>
<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>
</div>
<Divider />
{#if google}
<div>
2021-05-06 04:21:35 +12:00
<Heading size="S">
<span>
<GoogleLogo />
Google
</span>
</Heading>
2021-05-07 22:16:09 +12:00
<Body>
To allow users to authenticate using their Google accounts, fill out
the fields below.
</Body>
</div>
{#each ConfigFields.Google as field}
<div class="form-row">
<Label size="L">{field}</Label>
<Input bind:value={google.config[field]} />
</div>
{/each}
<div>
<Button primary on:click={() => save(google)}>Save</Button>
</div>
<Divider />
{/if}
</Layout>
</Page>
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>