adds separate Basic Onboarding modal

5 years ago · 964ce5cab9
3 changed files with 48 additions and 6 deletions
--- a/packages/builder/src/pages/builder/portal/manage/users/_components/AddUserModal.svelte
+++ b/packages/builder/src/pages/builder/portal/manage/users/_components/AddUserModal.svelte
@ -1,5 +1,11 @@
 <script>
  import { Body, Input, Select, ModalContent } from "@budibase/bbui"
+  import { createEventDispatcher } from "svelte"
+
+  const dispatch = createEventDispatcher()
+  const onChange = ({ detail }) => {
+    if (detail === options[1]) dispatch("basic")
+  }

  const options = ["Email onboarding", "Basic onboarding"]
  let selected = options[0]
@ -17,6 +23,12 @@
    automated email onboarding flow. Otherwise, use our basic onboarding process
    with autogenerated passwords.</Body
  >
-  <Select bind:value={selected} label="Add new user via:" {options} />
+  <Select
+    placeholder=""
+    bind:value={selected}
+    on:change={onChange}
+    {options}
+    label="Add new user via:"
+  />
  <Input label="Email" />
 </ModalContent>
--- a/packages/builder/src/pages/builder/portal/manage/users/_components/BasicOnboardingModal.svelte
+++ b/packages/builder/src/pages/builder/portal/manage/users/_components/BasicOnboardingModal.svelte
@ -0,0 +1,21 @@
+<script>
+  import { ModalContent, Body, Input, ActionButton } from "@budibase/bbui"
+</script>
+
+<ModalContent
+  size="M"
+  title="Basic user onboarding"
+  confirmText="Continue"
+  cancelText="Cancel"
+  showCloseIcon={false}
+>
+  <Body noPadding
+    >Below you will find the user’s username and password. The password will not
+    be accessible from this point. Please download the credentials.</Body
+  >
+  <Input disabled label="Username" value="joebudibase" />
+  <Input disabled label="Password" value="kjhfweiufqohy87t23" />
+  <div class="download">
+    <ActionButton icon="Download">Download user credentials</ActionButton>
+  </div>
+</ModalContent>
--- a/packages/builder/src/pages/builder/portal/manage/users/index.svelte
+++ b/packages/builder/src/pages/builder/portal/manage/users/index.svelte
@ -10,9 +10,9 @@
    Label,
    Layout,
    Modal,
-    ModalContent,
  } from "@budibase/bbui"
  import AddUserModal from "./_components/AddUserModal.svelte"
+  import BasicOnboardingModal from "./_components/BasicOnboardingModal.svelte"
  import { users } from "stores/portal"

  users.init()
@ -27,7 +27,13 @@
  let search
  $: filteredUsers = $users.filter(user => user.email.includes(search || ""))

-  export let modal
+  let userModal
+  let basicOnboardingModal
+
+  function openBasicOnboardingModal() {
+    userModal.hide()
+    basicOnboardingModal.show()
+  }
 </script>

 <Layout>
@ -49,8 +55,8 @@
    </div>
    <div class="buttons">
      <ButtonGroup>
-        <Button tooltip="Coming soon." disabled secondary>Import users</Button>
-        <Button overBackground on:click={modal.show}>Add user</Button>
+        <Button disabled secondary>Import users</Button>
+        <Button overBackground on:click={userModal.show}>Add user</Button>
      </ButtonGroup>
    </div>
    <Table
@ -63,7 +69,10 @@
  </div>
 </Layout>

-<Modal bind:this={modal}><AddUserModal /></Modal>
+<Modal bind:this={userModal}
+  ><AddUserModal on:basic={openBasicOnboardingModal} /></Modal
+>
+<Modal bind:this={basicOnboardingModal}><BasicOnboardingModal /></Modal>

 <style>
  .users {