basic UI for creating first admin user

5 years ago · 4fc93781dc
4 changed files with 89 additions and 12 deletions
--- a/packages/builder/src/pages/admin/index.svelte
+++ b/packages/builder/src/pages/admin/index.svelte
@ -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>
--- a/packages/builder/src/pages/builder/_layout.svelte
+++ b/packages/builder/src/pages/builder/_layout.svelte
@ -23,7 +23,6 @@
          <div class="nav-top">
            <Navigation>
              <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">
                Hosting
              </Item>
@ -33,15 +32,13 @@
              <Item
                external
                href="https://github.com/Budibase/budibase/discussions"
-                icon="PeopleGroup"
+                icon="PeopleGroup">
              >
                Community
              </Item>
              <Item
                external
                href="https://github.com/Budibase/budibase/issues/new/choose"
-                icon="Bug"
+                icon="Bug">
              >
                Raise an issue
              </Item>
            </Navigation>
--- a/packages/builder/src/pages/portal/_layout.svelte
+++ b/packages/builder/src/pages/portal/_layout.svelte
@ -1,5 +1,5 @@
 <script>
-  import { isActive, url } from "@roxi/routify"
+  import { isActive, url, goto } from "@roxi/routify"
  import { onMount } from "svelte"
  import {
    Icon,
@ -11,7 +11,10 @@
    SideNavigationItem as Item,
  } from "@budibase/bbui"
-  let orgName, orgLogo, onBoardingProgress, user
+  let orgName
  let orgLogo
  let onBoardingProgress
  let user
  async function getInfo() {
    // fetch orgInfo
@ -21,6 +24,10 @@
    // set onBoardingProgress
    onBoardingProgress = 20
    user = { name: "John Doe" }
    if (onBoardingProgress < 21) {
      $goto("../admin")
    }
  }
  onMount(getInfo)
@ -53,9 +60,7 @@
      <div class="menu">
        <Navigation>
          {#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}
        </Navigation>
      </div>
--- a/packages/server/src/api/index.js
+++ b/packages/server/src/api/index.js
@ -74,6 +74,4 @@ for (let route of mainRoutes) {
 router.use(staticRoutes.routes())
 router.use(staticRoutes.allowedMethods())
 router.redirect("/", "/builder")
 module.exports = router