invite flow now working

5 years ago · c843e17b31
2 changed files with 100 additions and 2 deletions
--- a/packages/builder/src/App.svelte
+++ b/packages/builder/src/App.svelte
@ -4,16 +4,17 @@
  import { routes } from "../.routify/routes"
  import { initialise } from "builderStore"
  import { NotificationDisplay } from "@budibase/bbui"
+  import { parse, stringify } from "qs"

  onMount(async () => {
    await initialise()
  })

-  const config = {}
+  const queryHandler = { parse, stringify }
 </script>

 <NotificationDisplay />
-<Router {routes} {config} />
+<Router {routes} config={{ queryHandler }} />
 <div class="modal-container" />

 <style>
--- a/packages/builder/src/pages/builder/invite/index.svelte
+++ b/packages/builder/src/pages/builder/invite/index.svelte
@ -0,0 +1,97 @@
+<script>
+  import {
+    Layout,
+    Heading,
+    Body,
+    Input,
+    Button,
+    notifications,
+  } from "@budibase/bbui"
+  import { goto, params } from "@roxi/routify"
+  import { createValidationStore, requiredValidator } from "helpers/validation"
+  import { users } from "stores/portal"
+
+  const [password, passwordError, passwordTouched] = createValidationStore(
+    "",
+    requiredValidator
+  )
+  const [repeat, _, repeatTouched] = createValidationStore(
+    "",
+    requiredValidator
+  )
+  const inviteCode = $params["?code"]
+
+  async function acceptInvite() {
+    try {
+      const res = await users.acceptInvite(inviteCode, $password)
+      if (!res) {
+        throw new Error(res.message)
+      }
+      notifications.success(`User created.`)
+      $goto("../auth/login")
+    } catch (err) {
+      notifications.error(err)
+    }
+  }
+</script>
+
+<section>
+  <div class="container">
+    <Layout gap="XS">
+      <img src="https://i.imgur.com/ZKyklgF.png" />
+    </Layout>
+    <div class="center">
+      <Layout gap="XS">
+        <Heading size="M">Accept Invitation</Heading>
+        <Body size="M">Please enter a password to setup your user.</Body>
+      </Layout>
+    </div>
+    <Layout gap="XS">
+      <Input
+        label="Password"
+        type="password"
+        error={$passwordTouched && $passwordError}
+        bind:value={$password}
+      />
+      <Input
+        label="Repeat Password"
+        type="password"
+        error={$repeatTouched &&
+          $password !== $repeat &&
+          "Passwords must match"}
+        bind:value={$repeat}
+      />
+    </Layout>
+    <Layout gap="S">
+      <Button
+        disabled={!$passwordTouched || !$repeatTouched || $password !== $repeat}
+        cta
+        on:click={acceptInvite}>Accept invite</Button
+      >
+    </Layout>
+  </div>
+</section>
+
+<style>
+  section {
+    display: flex;
+    align-items: center;
+    justify-content: center;
+    height: 100%;
+  }
+  .container {
+    margin: 0 auto;
+    width: 260px;
+    display: flex;
+    flex-direction: column;
+    justify-content: flex-start;
+    align-items: stretch;
+  }
+  .center {
+    text-align: center;
+  }
+  img {
+    width: 40px;
+    margin: 0 auto;
+  }
+</style>