creating users from csv

4 years ago · 6eb4f189ce
2 changed files with 53 additions and 10 deletions
--- a/packages/builder/src/pages/builder/portal/manage/users/_components/ImportUsersModal.svelte
+++ b/packages/builder/src/pages/builder/portal/manage/users/_components/ImportUsersModal.svelte
@ -7,20 +7,38 @@
    notifications,
  } from "@budibase/bbui"
  import { groups } from "stores/portal"
+  import { emailValidator } from "../../../../../../helpers/validation"

  import { Constants } from "@budibase/frontend-core"

  const BYTES_IN_MB = 1000000
  const FILE_SIZE_LIMIT = BYTES_IN_MB * 5

-  export let showOnboardingTypeModal
-  let files = []
+  export let createUsersFromCsv

+  let files = []
  let csvString = undefined
+  let userEmails = []
+  let userGroups = []
+  let usersRole = null
+  $: invalidEmails = []
+
+  const validEmails = userEmails => {
+    for (const email of userEmails) {
+      if (emailValidator(email) !== true) invalidEmails.push(email)
+    }
+
+    if (!invalidEmails.length) return true
+
+    notifications.error(
+      `Error, please check the following email${
+        invalidEmails.length > 1 ? "s" : ""
+      }: ${invalidEmails.join(", ")}`
+    )
+
+    return false
+  }

-  /*
-  function parseCsv() {}
-*/
  async function handleFile(evt) {
    const fileArray = Array.from(evt.target.files)
    if (fileArray.some(file => file.size >= FILE_SIZE_LIMIT)) {
@ -37,6 +55,8 @@
    reader.addEventListener("load", function (e) {
      csvString = e.target.result
      files = fileArray
+
+      userEmails = csvString.split("\n")
    })
    reader.readAsText(fileArray[0])
  }
@ -49,8 +69,8 @@
  showCancelButton={false}
  cancelText="Cancel"
  showCloseIcon={false}
-  onConfirm={showOnboardingTypeModal}
-  disabled={!files.length}
+  onConfirm={() => createUsersFromCsv({ userEmails, usersRole, userGroups })}
+  disabled={!userEmails.length || !validEmails(userEmails) || !usersRole}
 >
  <Body size="S">Import your users email addrresses from a CSV</Body>

@ -61,14 +81,18 @@
    </label>
  </div>

-  <RadioGroup options={Constants.BuilderRoleDescriptions} />
+  <RadioGroup
+    bind:value={usersRole}
+    options={Constants.BuilderRoleDescriptions}
+  />

  <Multiselect
+    bind:value={userGroups}
    placeholder="Select User Groups"
    label="User Groups"
    options={$groups}
    getOptionLabel={option => option.name}
-    getOptionValue={option => option.name}
+    getOptionValue={option => option._id}
  />
 </ModalContent>

--- a/packages/builder/src/pages/builder/portal/manage/users/index.svelte
+++ b/packages/builder/src/pages/builder/portal/manage/users/index.svelte
@ -117,6 +117,25 @@
    }
  }

+  const createUsersFromCsv = async userCsvData => {
+    const { userEmails, usersRole, userGroups } = userCsvData
+
+    const users = []
+    for (const email of userEmails) {
+      const newUser = {
+        email: email,
+        role: usersRole,
+        password: Math.random().toString(36).substring(2, 22),
+        forceResetPassword: true,
+      }
+
+      users.push(newUser)
+    }
+
+    userData = { groups: userGroups, users: users }
+    return createUser()
+  }
+
  async function createUser() {
    try {
      await users.create(userData)
@ -258,7 +277,7 @@
 </Modal>

 <Modal bind:this={importUsersModal}>
-  <ImportUsersModal {showOnboardingTypeModal} />
+  <ImportUsersModal {createUsersFromCsv} />
 </Modal>

 <style>