basic UI for creating first admin user

This commit is contained in:
Martin McKeaveney 2021-05-05 17:58:09 +01:00
parent df4bbd8205
commit 4fc93781dc
4 changed files with 89 additions and 12 deletions

View File

@ -0,0 +1,77 @@
<script>
import {
Button,
Heading,
Label,
notifications,
Layout,
Input,
Body,
} from "@budibase/bbui"
import { onMount } from "svelte"
import api from "builderStore/api"
let adminUser = {}
async function save(doc) {
try {
// Save the admin user
const response = await api.post(`/api/admin/users`, {
email: adminUser.email,
password: adminUser.password,
roles: {},
admin: {
global: true,
},
})
const json = await response.json()
if (response.status !== 200) throw new Error(json.message)
notifications.success(`Admin user created.`)
} catch (err) {
notifications.error(`Failed to create admin user.`)
}
}
</script>
<section>
<div class="container">
<header>
<Heading size="M">Create an admin user</Heading>
<Body size="S">The admin user has access to everything in budibase.</Body>
</header>
<div class="config-form">
<Layout gap="S">
<Input label="email" bind:value={adminUser.email} />
<Input
label="password"
type="password"
bind:value={adminUser.password} />
<Button cta on:click={save}>Create super admin user</Button>
</Layout>
</div>
</div>
</section>
<style>
section {
display: flex;
align-items: center;
justify-content: center;
height: 100%;
}
header {
text-align: center;
width: 80%;
margin: 0 auto;
}
.config-form {
margin-bottom: 42px;
}
header {
margin-bottom: 42px;
}
</style>

View File

@ -23,7 +23,6 @@
<div class="nav-top"> <div class="nav-top">
<Navigation> <Navigation>
<Item href="/builder/" icon="Apps" selected>Apps</Item> <Item href="/builder/" icon="Apps" selected>Apps</Item>
<Item href="/builder/oauth/" icon="OAuth" selected>OAuth</Item>
<Item external href="https://portal.budi.live/" icon="Servers"> <Item external href="https://portal.budi.live/" icon="Servers">
Hosting Hosting
</Item> </Item>
@ -33,15 +32,13 @@
<Item <Item
external external
href="https://github.com/Budibase/budibase/discussions" href="https://github.com/Budibase/budibase/discussions"
icon="PeopleGroup" icon="PeopleGroup">
>
Community Community
</Item> </Item>
<Item <Item
external external
href="https://github.com/Budibase/budibase/issues/new/choose" href="https://github.com/Budibase/budibase/issues/new/choose"
icon="Bug" icon="Bug">
>
Raise an issue Raise an issue
</Item> </Item>
</Navigation> </Navigation>

View File

@ -1,5 +1,5 @@
<script> <script>
import { isActive, url } from "@roxi/routify" import { isActive, url, goto } from "@roxi/routify"
import { onMount } from "svelte" import { onMount } from "svelte"
import { import {
Icon, Icon,
@ -11,7 +11,10 @@
SideNavigationItem as Item, SideNavigationItem as Item,
} from "@budibase/bbui" } from "@budibase/bbui"
let orgName, orgLogo, onBoardingProgress, user let orgName
let orgLogo
let onBoardingProgress
let user
async function getInfo() { async function getInfo() {
// fetch orgInfo // fetch orgInfo
@ -21,6 +24,10 @@
// set onBoardingProgress // set onBoardingProgress
onBoardingProgress = 20 onBoardingProgress = 20
user = { name: "John Doe" } user = { name: "John Doe" }
if (onBoardingProgress < 21) {
$goto("../admin")
}
} }
onMount(getInfo) onMount(getInfo)
@ -53,9 +60,7 @@
<div class="menu"> <div class="menu">
<Navigation> <Navigation>
{#each menu as { title, href, heading }} {#each menu as { title, href, heading }}
<Item selected={$isActive(href)} href={$url(href)} {heading}> <Item selected={$isActive(href)} {href} {heading}>{title}</Item>
{title}
</Item>
{/each} {/each}
</Navigation> </Navigation>
</div> </div>

View File

@ -74,6 +74,4 @@ for (let route of mainRoutes) {
router.use(staticRoutes.routes()) router.use(staticRoutes.routes())
router.use(staticRoutes.allowedMethods()) router.use(staticRoutes.allowedMethods())
router.redirect("/", "/builder")
module.exports = router module.exports = router