budibase/packages/builder/src/components/settings/tabs/APIKeys.svelte

55 lines
1.1 KiB
Svelte

<script>
import { Input, Button } from "@budibase/bbui"
import { store } from "builderStore"
import api from "builderStore/api"
import posthog from "posthog-js"
let keys = { budibase: "", sendGrid: "" }
async function updateKey([key, value]) {
const response = await api.put(`/api/keys/${key}`, { value })
const res = await response.json()
if (key === "budibase") posthog.identify(value)
keys = { ...keys, ...res }
}
// Get Keys
async function fetchKeys() {
const response = await api.get(`/api/keys/`)
const res = await response.json()
keys = res
}
fetchKeys()
</script>
<div class="container">
<div class="background">
<Input
on:save={e => updateKey(['budibase', e.detail])}
thin
edit
value={keys.budibase}
label="Budibase" />
</div>
<div class="background">
<Input
on:save={e => updateKey(['sendgrid', e.detail])}
thin
edit
value={keys.sendgrid}
label="Sendgrid" />
</div>
</div>
<style>
.container {
display: grid;
grid-gap: var(--space);
}
.background {
border-radius: 5px;
padding: 12px 0px;
}
</style>