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}>
-              {title}
-            </Item>
+            <Item selected={$isActive(href)} {href} {heading}>{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