budibase/packages/builder/src/pages/builder/auth/org.svelte

72 lines
1.5 KiB
Svelte

<script>
import { Button, Heading, Input, Layout } from "@budibase/bbui"
import { goto } from "@roxi/routify"
import { auth, admin } from "stores/portal"
import Logo from "assets/bb-emblem.svg"
import { get } from "svelte/store"
import { onMount } from "svelte"
let tenantId = get(auth).tenantSet ? get(auth).tenantId : ""
$: multiTenancyEnabled = $admin.multiTenancy
async function setOrg() {
if (tenantId == null || tenantId === "") {
tenantId = "default"
}
await auth.setOrg(tenantId)
// re-init now org selected
await admin.init()
$goto("../")
}
function handleKeydown(evt) {
if (evt.key === "Enter") setOrg()
}
onMount(async () => {
await auth.checkQueryString()
if (!multiTenancyEnabled) {
$goto("../")
} else {
admin.unload()
}
})
</script>
<svelte:window on:keydown={handleKeydown} />
<div class="login">
<div class="main">
<Layout>
<Layout noPadding justifyItems="center">
<img alt="logo" src={Logo} />
<Heading>Set Budibase organisation</Heading>
</Layout>
<Layout gap="XS" noPadding>
<Input label="Organisation" bind:value={tenantId} />
</Layout>
<Layout gap="XS" noPadding>
<Button cta on:click={setOrg}>Set organisation</Button>
</Layout>
</Layout>
</div>
</div>
<style>
.login {
width: 100%;
height: 100%;
display: flex;
flex-direction: column;
justify-content: center;
align-items: center;
}
.main {
width: 300px;
}
img {
width: 48px;
}
</style>