Merge pull request #4639 from mslourens/merge_create_user_modals

Merge both create user modals for easy switch between the two
4 years ago · 87a38eb31a
4 changed files with 1326 additions and 102 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
@ -2,22 +2,47 @@
  import {
    Body,
    Input,
-    Select,
+    Label,
    ModalContent,
    notifications,
+    Select,
    Toggle,
-    Label,
  } from "@budibase/bbui"
  import { createValidationStore, emailValidator } from "helpers/validation"
  import { users } from "stores/portal"

-  export let disabled
-
+  const password = Math.random().toString(36).substring(2, 22)
  const options = ["Email onboarding", "Basic onboarding"]
-  let selected = options[0]
-  let builder, admin
-
  const [email, error, touched] = createValidationStore("", emailValidator)
+  let disabled
+  let builder
+  let admin
+  let selected = "Email onboarding"
+
+  $: basic = selected === "Basic onboarding"
+
+  function addUser() {
+    if (basic) {
+      createUser()
+    } else {
+      createUserFlow()
+    }
+  }
+
+  async function createUser() {
+    try {
+      await users.create({
+        email: $email,
+        password,
+        builder,
+        admin,
+        forceResetPassword: true,
+      })
+      notifications.success("Successfully created user")
+    } catch (error) {
+      notifications.error("Error creating user")
+    }
+  }

  async function createUserFlow() {
    try {
@ -30,7 +55,7 @@
 </script>

 <ModalContent
-  onConfirm={createUserFlow}
+  onConfirm={addUser}
  size="M"
  title="Add new user"
  confirmText="Add user"
@ -47,17 +72,22 @@
  <Select
    placeholder={null}
    bind:value={selected}
-    on:change
    {options}
    label="Add new user via:"
  />
+
  <Input
    type="email"
+    label="Email"
    bind:value={$email}
    error={$touched && $error}
    placeholder="john@doe.com"
-    label="Email"
  />
+
+  {#if basic}
+    <Input disabled label="Password" value={password} />
+  {/if}
+
  <div>
    <div class="toggle">
      <Label size="L">Development access</Label>
--- a/packages/builder/src/pages/builder/portal/manage/users/_components/BasicOnboardingModal.svelte
+++ b/packages/builder/src/pages/builder/portal/manage/users/_components/BasicOnboardingModal.svelte
@ -1,74 +0,0 @@
-<script>
-  import {
-    ModalContent,
-    Body,
-    Input,
-    notifications,
-    Toggle,
-    Label,
-  } from "@budibase/bbui"
-  import { createValidationStore, emailValidator } from "helpers/validation"
-  import { users } from "stores/portal"
-
-  const [email, error, touched] = createValidationStore("", emailValidator)
-  const password = Math.random().toString(36).slice(2, 20)
-  let builder = false,
-    admin = false
-
-  async function createUser() {
-    try {
-      await users.create({
-        email: $email,
-        password,
-        builder,
-        admin,
-        forceResetPassword: true,
-      })
-      notifications.success("Successfully created user")
-    } catch (error) {
-      notifications.error(error.message)
-    }
-  }
-</script>
-
-<ModalContent
-  onConfirm={createUser}
-  size="M"
-  title="Basic user onboarding"
-  confirmText="Continue"
-  cancelText="Cancel"
-  disabled={$error}
-  error={$touched && $error}
-  showCloseIcon={false}
->
-  <Body size="S">
-    Below you will find the user’s username and password. The password will not
-    be accessible from this point. Please save the credentials.
-  </Body>
-  <Input
-    type="email"
-    label="Email"
-    bind:value={$email}
-    error={$touched && $error}
-  />
-  <Input readonly label="Password" value={password} />
-  <div>
-    <div class="toggle">
-      <Label size="L">Development access</Label>
-      <Toggle text="" bind:value={builder} />
-    </div>
-    <div class="toggle">
-      <Label size="L">Administration access</Label>
-      <Toggle text="" bind:value={admin} />
-    </div>
-  </div>
-</ModalContent>
-
-<style>
-  .toggle {
-    display: grid;
-    grid-template-columns: 78% 1fr;
-    align-items: center;
-    width: 50%;
-  }
-</style>
--- a/packages/builder/src/pages/builder/portal/manage/users/index.svelte
+++ b/packages/builder/src/pages/builder/portal/manage/users/index.svelte
@ -15,7 +15,6 @@
  } from "@budibase/bbui"
  import TagsRenderer from "./_components/TagsTableRenderer.svelte"
  import AddUserModal from "./_components/AddUserModal.svelte"
-  import BasicOnboardingModal from "./_components/BasicOnboardingModal.svelte"
  import { users } from "stores/portal"
  import { onMount } from "svelte"

@ -30,7 +29,6 @@
  }

  let search
-  let email
  $: filteredUsers = $users
    .filter(user => user.email.includes(search || ""))
    .map(user => ({
@ -41,12 +39,6 @@
    }))

  let createUserModal
-  let basicOnboardingModal
-
-  function openBasicOnboardingModal() {
-    createUserModal.hide()
-    basicOnboardingModal.show()
-  }

  onMount(async () => {
    try {
@ -93,9 +85,8 @@
 </Layout>

 <Modal bind:this={createUserModal}>
-  <AddUserModal on:change={openBasicOnboardingModal} />
+  <AddUserModal />
 </Modal>
-<Modal bind:this={basicOnboardingModal}><BasicOnboardingModal {email} /></Modal>

 <style>
  .field {
--- a/packages/client/yarn.lock
+++ b/packages/client/yarn.lock