adds separate Basic Onboarding modal

5 years ago · cb78e68d99
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 disabled secondary>Import users</Button>
-        <Button overBackground on:click={modal.show}>Add user</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 {