adds notifications to users pages

packages/builder/src/pages/builder/portal/manage/users/_components/AddUserModal.svelte

@@ -1,20 +1,19 @@
 <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]
+  export let options
+  export let selected
+  export let email = ""
+  export let onConfirm
+  export let disabled
 </script>
 
 <ModalContent
+  {onConfirm}
   size="M"
   title="Add new user options"
   confirmText="Add user"
+  confirmDisabled={disabled}
   cancelText="Cancel"
   showCloseIcon={false}
 >
@@ -26,9 +25,13 @@
   <Select
     placeholder={null}
     bind:value={selected}
-    on:change={onChange}
     {options}
     label="Add new user via:"
   />
-  <Input label="Email" />
+  <Input
+    type="email"
+    bind:value={email}
+    placeholder="john@doe.com"
+    label="Email"
+  />
 </ModalContent>

packages/builder/src/pages/builder/portal/manage/users/_components/BasicOnboardingModal.svelte

@@ -1,5 +1,7 @@
 <script>
   import { ModalContent, Body, Input, ActionButton } from "@budibase/bbui"
+
+  export let email
 </script>
 
 <ModalContent
@@ -13,8 +15,8 @@
     >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" />
+  <Input type="email" disabled label="Username" value={email} />
+  <Input disabled label="Password" value="asduiayewkjh3243i5oucy" />
   <div class="download">
     <ActionButton icon="Download">Download user credentials</ActionButton>
   </div>

packages/builder/src/pages/builder/portal/manage/users/index.svelte

@@ -11,6 +11,7 @@
     Label,
     Layout,
     Modal,
+    notifications,
   } from "@budibase/bbui"
   import AddUserModal from "./_components/AddUserModal.svelte"
   import BasicOnboardingModal from "./_components/BasicOnboardingModal.svelte"
@@ -25,15 +26,22 @@
     // group: {}
   }
 
+  let onboardingOptions = ["Email onboarding", "Basic onboarding"]
+  let selectedOnboardingOption = onboardingOptions[0]
   let search
+  let email
   $: filteredUsers = $users.filter(user => user.email.includes(search || ""))
 
-  let userModal
+  let createUserModal
   let basicOnboardingModal
 
-  function openBasicOnboardingModal() {
-    userModal.hide()
-    basicOnboardingModal.show()
+  function createUserFlow() {
+    if (selectedOnboardingOption === onboardingOptions[0]) {
+      notifications.success("Email sent.")
+    } else {
+      createUserModal.hide()
+      basicOnboardingModal.show()
+    }
   }
 </script>
 
@@ -57,7 +65,7 @@
     <div class="buttons">
       <ButtonGroup>
         <Button disabled secondary>Import users</Button>
-        <Button overBackground on:click={userModal.show}>Add user</Button>
+        <Button overBackground on:click={createUserModal.show}>Add user</Button>
       </ButtonGroup>
     </div>
     <Table
@@ -71,10 +79,16 @@
   </div>
 </Layout>
 
-<Modal bind:this={userModal}
-  ><AddUserModal on:basic={openBasicOnboardingModal} /></Modal
+<Modal bind:this={createUserModal}
+  ><AddUserModal
+    options={onboardingOptions}
+    onConfirm={createUserFlow}
+    disabled={!email}
+    bind:selected={selectedOnboardingOption}
+    bind:email
+  /></Modal
 >
-<Modal bind:this={basicOnboardingModal}><BasicOnboardingModal /></Modal>
+<Modal bind:this={basicOnboardingModal}><BasicOnboardingModal {email} /></Modal>
 
 <style>
   .users {