From abe3a1d6f083c88e4484ee7e336ecefa4ec847eb Mon Sep 17 00:00:00 2001
From: Csaky <Tim.Csaky@gov.bc.ca>
Date: Fri, 31 May 2024 15:03:32 -0700
Subject: [PATCH 1/2] Use vee-validate for Invite form

---
 frontend/src/components/common/Invite.vue     | 264 +++++++++---------
 .../src/components/common/ShareButton.vue     |   2 +
 .../src/components/object/ObjectMetadata.vue  |   4 +
 .../src/components/object/ObjectTable.vue     |   4 +-
 frontend/src/services/inviteService.ts        |  34 ++-
 5 files changed, 149 insertions(+), 159 deletions(-)

diff --git a/frontend/src/components/common/Invite.vue b/frontend/src/components/common/Invite.vue
index a65fa153..bf20f5d9 100644
--- a/frontend/src/components/common/Invite.vue
+++ b/frontend/src/components/common/Invite.vue
@@ -1,16 +1,10 @@
 <script setup lang="ts">
-import { computed, ref, } from 'vue';
+import { computed, ref } from 'vue';
 import { storeToRefs } from 'pinia';
-import { Form } from 'vee-validate';
-import {  object, string } from 'yup';
+import { useForm, ErrorMessage, Form } from 'vee-validate';
+import * as yup from 'yup';
 import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome';
-import {
-  Button,
-  RadioButton,
-  Checkbox,
-  useToast,
-  InputSwitch
-} from '@/lib/primevue';
+import { Button, RadioButton, Checkbox, useToast, InputSwitch } from '@/lib/primevue';
 import TextInput from '@/components/form/TextInput.vue';
 import { Share } from '@/components/common';
 import { Spinner } from '@/components/layout';
@@ -60,46 +54,46 @@ const objectPermCodes: Record<string, string> = {
   UPDATE: 'Update'
 };
 
-const formData: Ref<any> = ref({
-  expiresAt: 86400,
-  isRestricted: false,
-  permCodes: ['READ'],
-});
-
 // Permissions selection
 const selectedOptions = computed(() => {
   return props.resourceType === 'bucket' ? bucketPermCodes : objectPermCodes;
 });
 
-const isOptionUnselectable = (optionName: string) => {
-  // Make default permission disabled
-  return optionName === 'Read';
-};
-
-// Form validation
-const schema = object({
-  // TODO: conditional validation
-  // isRestricted: boolean(),
-  // email: string()
-  //   .email()
-  //   .matches(new RegExp(Regex.EMAIL), 'Provide a valid email address')
-  //   .when('isRestricted', {
-  //     is: true,
-  //     then: (schema) => schema
-  //       .required('Email address is required')
-  //   })
-  email: string().matches(new RegExp(Regex.EMAIL), 'Provide a valid email address')
+// Form validation schema
+const schema = yup.object({
+  isRestricted: yup.boolean(),
+  email: yup
+    .string()
+    .matches(new RegExp(Regex.EMAIL), 'Provide a valid email address')
+    .when('isRestricted', {
+      is: true,
+      then: (schema) => schema.required('Email address is required')
+    })
 });
 
-//Action
-async function invite(data: any) {
+// create a vee-validate form context
+const { values, defineField, errors, handleSubmit } = useForm({
+  validationSchema: schema,
+  initialValues: {
+    expiresAt: 86400,
+    permCodes: ['READ'],
+    isRestricted: true,
+    email: ''
+  }
+});
+// maps the input models for vee-validate
+const [expiresAt] = defineField('expiresAt', {});
+const [permCodes] = defineField('permCodes', {});
+const [isRestricted] = defineField('isRestricted', {});
+const [email] = defineField('email', {});
+
+// Invite form is submitted
+const onSubmit = handleSubmit(async (values: any) => {
   inviteLoading.value = true;
   try {
     // set expiry date
-    const expiresAt = Math.floor(Date.now() / 1000) + formData.value.expiresAt;
-    // put input email addresses into an array
-    // NOTE: emails are coming from `data`
-    const emails = formData.value.isRestricted ? [data.email] : [];
+    const expiresAt = Math.floor(Date.now() / 1000) + values.expiresAt;
+    const emails = values.isRestricted ? [values.email] : [];
 
     // TODO: add perms to users already in the system
 
@@ -110,11 +104,11 @@ async function invite(data: any) {
       getUser.value?.profile,
       emails,
       expiresAt,
-      formData.value.permCodes, // use formData because it was bound during setup
+      values.permCodes
     );
 
     // if not restricting to an email, show link
-    if(emails.length == 0) {
+    if (emails.length == 0) {
       inviteLink.value = `${window.location.origin}/invite/${invites[0].token}`;
       toast.success('', 'Invite link created.');
       showInviteLink.value = true;
@@ -129,116 +123,108 @@ async function invite(data: any) {
     toast.error('Creating Invite', error.response?.data.detail, { life: 0 });
   }
   inviteLoading.value = false;
-}
+});
 </script>
 
 <template>
-  <h3 class="mt-1 mb-2">{{ (props.label) }}</h3>
-  <!-- :initial-values="formData" -->
-  <Form
-    :initial-values="formData"
-    :validation-schema="schema"
-    @submit="invite"
-  >
-  <p>Make invite available for</p>
-  <div class="flex flex-wrap gap-3">
-    <div
-      v-for="(value, name) in timeFrames"
-      :key="value"
-      class="flex align-items-center"
-    >
-      <RadioButton
-        v-model="formData.expiresAt"
-        :input-id="value.toString()"
-        :name="name"
-        :value="value"
-      />
-      <label
-        :for="value.toString()"
-        class="ml-2"
+  <h3 class="mt-1 mb-2">{{ props.label }}</h3>
+  <form @submit="onSubmit">
+    <p>Make invite available for</p>
+    <div class="flex flex-wrap gap-3">
+      <div
+        v-for="(value, name) in timeFrames"
+        :key="value"
+        class="flex align-items-center"
+      >
+        <RadioButton
+          v-model="expiresAt"
+          name="expiresAt"
+          :value="value"
+        />
+        <label
+          :for="value.toString()"
+          class="ml-2"
+        >
+          {{ name }}
+        </label>
+      </div>
+    </div>
+
+    <p class="mt-4 mb-2">Access options</p>
+    <div class="flex flex-wrap gap-3">
+      <div
+        v-for="(name, value) in selectedOptions"
+        :key="value"
+        class="flex align-items-center"
       >
-        {{ name }}
-      </label>
+        <Checkbox
+          v-model="permCodes"
+          name="permCodes"
+          :value="value"
+          :disabled="value === 'READ'"
+        />
+        <label
+          :for="value.toString()"
+          class="ml-2"
+        >
+          {{ name }}
+        </label>
+      </div>
+    </div>
+
+    <p class="mt-4 mb-2">Restrict invite to a user signing in to BCBox with the following email address</p>
+    <div class="flex flex-column gap-2">
+      <InputSwitch
+        v-model="isRestricted"
+        name="isRestricted"
+        class="mb-3"
+      />
     </div>
-  </div>
-  <p class="mt-4 mb-2">Access options</p>
-  <div class="flex flex-wrap gap-3">
-    <div
-      v-for="(name, value) in selectedOptions"
-      :key="value"
-      class="flex align-items-center"
-    >
-      <Checkbox
-        v-model="formData.permCodes"
-        :input-id="value.toString()"
-        :name="name"
-        :value="value"
-        :disabled="isOptionUnselectable(name)"
+    <!-- if scoping invite to specific users -->
+    <div v-if="values.isRestricted">
+      <TextInput
+        v-model="email"
+        name="email"
+        type="text"
+        placeholder="Enter email"
+        help-text="The Invite will be emailed to this person"
+        class="invite-email"
       />
-      <label
-        :for="value.toString()"
-        class="ml-2"
-      >
-        {{ name }}
-      </label>
+      <div class="my-4 inline-flex">
+        <Button
+          class="p-button p-button-primary mr-3"
+          :disabled="inviteLoading"
+          type="submit"
+        >
+          <font-awesome-icon
+            icon="fa fa-envelope"
+            class="mr-2"
+          />
+          Send invite link
+        </Button>
+        <Spinner
+          v-if="inviteLoading"
+          class="h-2rem w-2rem"
+        />
+      </div>
     </div>
-  </div>
-  <p class="mt-4 mb-2">Restrict to user's email</p>
-  <!-- <p class="mt-4 mb-2">Restrict invite to a user signing in to BCBox with the following email address</p> -->
-  <div class="flex flex-column gap-2">
-    <InputSwitch
-      v-model="formData.isRestricted"
-      name="isRestricted"
-      class="mb-3"
-    />
-  </div>
-  <!-- if scoping invite to specific users -->
-  <div v-if="formData.isRestricted">
-    <!-- v-model="formData.email" -->
-    <TextInput
-      v-if="formData.isRestricted"
-      v-model="formData.email"
-      name="email"
-      type="email"
-      placeholder="Enter email"
-      help-text="The Invite will be emailed to this person"
-      class="invite-email"
-    />
-    <div class="my-4 inline-flex">
+    <!-- else generating an open invite -->
+    <div v-else>
       <Button
-        class="p-button p-button-primary mr-3"
-        :disabled="inviteLoading"
+        class="p-button p-button-primary my-3 block"
         type="submit"
       >
-        <font-awesome-icon
-          icon="fa fa-envelope"
-          class="mr-2"
-        />
-        Send invite link
+        Generate invite link
       </Button>
-      <Spinner
-        v-if="inviteLoading"
-        class="h-2rem w-2rem"
+      <Share
+        v-if="showInviteLink"
+        label="Invite link"
+        :resource-type="resourceType"
+        :resource="resource"
+        :invite-link="inviteLink"
       />
     </div>
-  </div>
-  <!-- else generating an open invite -->
-  <div v-else>
-    <Button
-      class="p-button p-button-primary my-3 block"
-      type="submit"
-    >
-      Generate invite link
-    </Button>
-    <Share
-      v-if="showInviteLink"
-      label="Invite link"
-      :resource-type="resourceType"
-      :resource="resource"
-      :invite-link="inviteLink"
-    />
-  </div>
-  </Form>
+  </form>
 </template>
 
 <style scoped lang="scss">
diff --git a/frontend/src/components/common/ShareButton.vue b/frontend/src/components/common/ShareButton.vue
index cac9013e..68b70a77 100644
--- a/frontend/src/components/common/ShareButton.vue
+++ b/frontend/src/components/common/ShareButton.vue
@@ -40,6 +40,7 @@ const resource: Ref<Resource | undefined> = computed(() => {
 });
 /* eslint-disable */
 const hasManagePermission: Ref<boolean> = computed(() => {
+  /* eslint-disable */
   return resourceType.value === 'object'
     ? permissionStore.isObjectActionAllowed(
         props.objectId,
@@ -48,6 +49,7 @@ const hasManagePermission: Ref<boolean> = computed(() => {
         resource.value?.bucketId
       )
     : permissionStore.isBucketActionAllowed(props.bucketId, getUserId.value, Permissions.MANAGE);
+  /* eslint-enable */
 });
 
 // Dialog
diff --git a/frontend/src/components/object/ObjectMetadata.vue b/frontend/src/components/object/ObjectMetadata.vue
index 08229d3e..8eaaefb6 100644
--- a/frontend/src/components/object/ObjectMetadata.vue
+++ b/frontend/src/components/object/ObjectMetadata.vue
@@ -38,6 +38,9 @@ const formData: Ref<ObjectMetadataTagFormType> = ref({
   filename: ''
 });
 
+// Emits
+const emit = defineEmits(['on-metadata-success']);
+
 // Actions
 const confirm = useConfirm();
 
@@ -62,6 +65,7 @@ const showModal = () => {
 
 const submitModal = async (values: ObjectMetadataTagFormType) => {
   await metadataStore.replaceMetadata(props.objectId, values.metadata ?? [], versionId.value);
+  emit('on-metadata-success');
   closeModal();
 };
 
diff --git a/frontend/src/components/object/ObjectTable.vue b/frontend/src/components/object/ObjectTable.vue
index a04f1d95..cc01779b 100644
--- a/frontend/src/components/object/ObjectTable.vue
+++ b/frontend/src/components/object/ObjectTable.vue
@@ -211,7 +211,7 @@ const selectedFilters = (payload: any) => {
             @selected-filters="selectedFilters"
           />
 
-          <InputGroup class="ml-4">
+          <span class="ml-4">
             <InputText
               v-model="filters.name.value"
               class="pr-6"
@@ -231,7 +231,7 @@ const selectedFilters = (payload: any) => {
                 }
               "
             />
-          </InputGroup>
+          </span>
           <Button
             v-tooltip.bottom="'Search'"
             class="ml-2"
diff --git a/frontend/src/services/inviteService.ts b/frontend/src/services/inviteService.ts
index 842c3bdf..bb5ee58d 100644
--- a/frontend/src/services/inviteService.ts
+++ b/frontend/src/services/inviteService.ts
@@ -4,7 +4,6 @@ import { invite as inviteEmailTemplate } from '@/utils/emailTemplates';
 const PATH = 'permission/invite';
 
 export default {
-
   /**
    * @function createInvites
    * Create an invite url with the COMS api
@@ -30,8 +29,7 @@ export default {
     expiresAt?: number,
     permCodes?: Array<string>
   ) {
-
-    const inviteData  ={
+    const inviteData = {
       bucketId: resourceType === 'bucket' ? resource?.bucketId : undefined,
       objectId: resourceType === 'object' ? resource.id : undefined,
       expiresAt: expiresAt,
@@ -39,15 +37,17 @@ export default {
     };
 
     // if emails param exists
-    if(emails && emails.length > 0){
+    if (emails && emails.length > 0) {
       // create COMS invites
       const invites = await Promise.all(
-        emails.map(async e => {
-          const token = (await comsAxios().post(`${PATH}`, {
-            ...inviteData,
-            email: e,
-          })).data;
-          return { email: e, token: token};
+        emails.map(async (e) => {
+          const token = (
+            await comsAxios().post(`${PATH}`, {
+              ...inviteData,
+              email: e
+            })
+          ).data;
+          return { email: e, token: token };
         })
       );
       // send invite email notifications
@@ -72,15 +72,14 @@ export default {
    * @param {Array<string>} invites array of email adddresses
    * @returns {Promise<string>} CHES TransactionId
    */
-  emailInvites(resourceType: string, resource: any, currentUser: any, invites: any){
+  emailInvites(resourceType: string, resource: any, currentUser: any, invites: any) {
     try {
       let resourceName, subject;
       // alternate templates depending if resource is a file or a folder
       if (resourceType === 'object') {
         resourceName = resource.name;
         subject = `You have been invited to access ${resourceName} on BCBox`;
-      }
-      else if (resourceType === 'bucket') {
+      } else if (resourceType === 'bucket') {
         resourceName = resource.bucketName;
         subject = `You have been invited to access ${resourceName} on BCBox`;
       }
@@ -89,10 +88,10 @@ export default {
       const body = inviteEmailTemplate(resourceType, resourceName, currentUser);
 
       // define email data matching the structure required by CHES api
-      const emailData:any = {
+      const emailData: any = {
         contexts: invites.map((invite: any) => {
           return {
-            to: [ invite.email ],
+            to: [invite.email],
             context: {
               token: invite.token
             }
@@ -102,9 +101,8 @@ export default {
         body: body
       };
       return appAxios().post('email', emailData);
-    } catch(err) {
-      console.error(`Failed to send Invite notification: ${err}`);
-
+    } catch (err) {
+      return 'Failed to send Invite notification';
     }
   },
 

From 9a3ea0d05750302b608fb4cf033b07077aa90b6d Mon Sep 17 00:00:00 2001
From: Csaky <Tim.Csaky@gov.bc.ca>
Date: Mon, 3 Jun 2024 12:08:53 -0700
Subject: [PATCH 2/2] Add multi-user invite functionality

form validation for a list of invitee emails
remove 'open' invite functionality
---
 .../components/bucket/BucketChildConfig.vue   |   3 +-
 frontend/src/components/common/Invite.vue     | 168 +++++++++++-------
 frontend/src/lib/primevue/index.ts            |   1 +
 frontend/src/services/inviteService.ts        |  38 ++--
 4 files changed, 120 insertions(+), 90 deletions(-)

diff --git a/frontend/src/components/bucket/BucketChildConfig.vue b/frontend/src/components/bucket/BucketChildConfig.vue
index 29511eee..e952e2f3 100644
--- a/frontend/src/components/bucket/BucketChildConfig.vue
+++ b/frontend/src/components/bucket/BucketChildConfig.vue
@@ -103,7 +103,8 @@ const onCancel = () => {
         name="subKey"
         label="Path"
         placeholder="my-documents"
-        :help-text="`The relative path of the subfolder. You can pick a new path or choose an existing object storage path,
+        :help-text="`The relative path of the subfolder.
+          You can pick a new path or choose an existing object storage path,
           but it can't be changed after it is set.<br />
           Folder levels are supported using '/' between levels (for example: 2024/January/my-documents).`"
         class="child-input"
diff --git a/frontend/src/components/common/Invite.vue b/frontend/src/components/common/Invite.vue
index bf20f5d9..2fea8b88 100644
--- a/frontend/src/components/common/Invite.vue
+++ b/frontend/src/components/common/Invite.vue
@@ -1,12 +1,11 @@
 <script setup lang="ts">
 import { computed, ref } from 'vue';
 import { storeToRefs } from 'pinia';
-import { useForm, ErrorMessage, Form } from 'vee-validate';
+import { useForm, ErrorMessage } from 'vee-validate';
 import * as yup from 'yup';
 import { FontAwesomeIcon } from '@fortawesome/vue-fontawesome';
-import { Button, RadioButton, Checkbox, useToast, InputSwitch } from '@/lib/primevue';
+import { Button, RadioButton, Checkbox, useToast, TextArea } from '@/lib/primevue';
 import TextInput from '@/components/form/TextInput.vue';
-import { Share } from '@/components/common';
 import { Spinner } from '@/components/layout';
 
 import { Regex } from '@/utils/constants';
@@ -32,8 +31,6 @@ const toast = useToast();
 
 // State
 const inviteLoading: Ref<boolean> = ref(false);
-const showInviteLink: Ref<boolean> = ref(false);
-const inviteLink: Ref<string> = ref('');
 
 const timeFrames: Record<string, number> = {
   '1 Hour': 3600,
@@ -60,32 +57,48 @@ const selectedOptions = computed(() => {
 });
 
 // Form validation schema
-const schema = yup.object({
-  isRestricted: yup.boolean(),
+const schema = yup.object().shape({
   email: yup
     .string()
     .matches(new RegExp(Regex.EMAIL), 'Provide a valid email address')
-    .when('isRestricted', {
-      is: true,
+    .when('emailType', {
+      is: (string: string) => string === 'single',
       then: (schema) => schema.required('Email address is required')
+    }),
+  multiEmail: yup
+    .array()
+    .transform(function (value, originalValue) {
+      if (this.isType(value) && value !== null) return value;
+      return originalValue ? originalValue.split(/[\r\n ,;]+/).filter((item: string) => item) : [];
+    })
+    .of(
+      yup
+        .string()
+        .matches(new RegExp(Regex.EMAIL), 'Provide a list of valid email addresses separated by commas or semicolons')
+    )
+    .when('emailType', {
+      is: (string: string) => string === 'multi',
+      then: (schema) => schema.min(1, 'Enter one or more email addresses')
     })
 });
 
 // create a vee-validate form context
-const { values, defineField, errors, handleSubmit } = useForm({
+const { values, defineField, handleSubmit } = useForm({
   validationSchema: schema,
   initialValues: {
     expiresAt: 86400,
     permCodes: ['READ'],
-    isRestricted: true,
-    email: ''
+    email: '',
+    emailType: 'single',
+    multiEmail: ''
   }
 });
 // maps the input models for vee-validate
 const [expiresAt] = defineField('expiresAt', {});
 const [permCodes] = defineField('permCodes', {});
-const [isRestricted] = defineField('isRestricted', {});
+const [emailType] = defineField('emailType', {});
 const [email] = defineField('email', {});
+const [multiEmail] = defineField('multiEmail', {});
 
 // Invite form is submitted
 const onSubmit = handleSubmit(async (values: any) => {
@@ -93,32 +106,24 @@ const onSubmit = handleSubmit(async (values: any) => {
   try {
     // set expiry date
     const expiresAt = Math.floor(Date.now() / 1000) + values.expiresAt;
-    const emails = values.isRestricted ? [values.email] : [];
+    // put email(s) into an array
+    let emailArray;
+    if (values.emailType === 'single') emailArray = [values.email];
+    // for list of emails, delimit, de-dupe and remove empty
+    else emailArray = [...new Set(values.multiEmail.split(/[\r\n ,;]+/).filter((item: string) => item))];
 
     // TODO: add perms to users already in the system
-
     // generate invites (for emails not already in the system)
-    const invites = await inviteService.createInvites(
+    await inviteService.createInvites(
       props.resourceType,
       props.resource,
       getUser.value?.profile,
-      emails,
+      emailArray,
       expiresAt,
       values.permCodes
     );
-
-    // if not restricting to an email, show link
-    if (emails.length == 0) {
-      inviteLink.value = `${window.location.origin}/invite/${invites[0].token}`;
-      toast.success('', 'Invite link created.');
-      showInviteLink.value = true;
-    }
-    // else show email confirmation
-    else {
-      // TODO: output report (list of invites sent, CHES trx ID (?))
-      toast.success('', 'Invite notifications sent.', { life: 5000 });
-      showInviteLink.value = false;
-    }
+    // TODO: output report (list of invites sent, CHES trx ID (?))
+    toast.success('', 'Invite notifications sent.', { life: 5000 });
   } catch (error: any) {
     toast.error('Creating Invite', error.response?.data.detail, { life: 0 });
   }
@@ -129,7 +134,7 @@ const onSubmit = handleSubmit(async (values: any) => {
 <template>
   <h3 class="mt-1 mb-2">{{ props.label }}</h3>
   <form @submit="onSubmit">
-    <p>Make invite available for</p>
+    <p class="mb-2">Make invite available for</p>
     <div class="flex flex-wrap gap-3">
       <div
         v-for="(value, name) in timeFrames"
@@ -151,7 +156,7 @@ const onSubmit = handleSubmit(async (values: any) => {
     </div>
 
     <p class="mt-4 mb-2">Access options</p>
-    <div class="flex flex-wrap gap-3">
+    <div class="flex flex-wrap gap-3 mb-4">
       <div
         v-for="(name, value) in selectedOptions"
         :key="value"
@@ -172,16 +177,37 @@ const onSubmit = handleSubmit(async (values: any) => {
       </div>
     </div>
 
-    <p class="mt-4 mb-2">Restrict invite to a user signing in to BCBox with the following email address</p>
-    <div class="flex flex-column gap-2">
-      <InputSwitch
-        v-model="isRestricted"
-        name="isRestricted"
-        class="mb-3"
-      />
+    <p class="mb-2">Send to</p>
+    <div class="flex flex-wrap gap-3 mb-3">
+      <div class="flex align-items-center">
+        <RadioButton
+          v-model="emailType"
+          name="emailType"
+          value="single"
+        />
+        <label
+          for="single"
+          class="ml-2"
+        >
+          Single
+        </label>
+      </div>
+      <div class="flex align-items-center">
+        <RadioButton
+          v-model="emailType"
+          name="emailType"
+          value="multi"
+        />
+        <label
+          for="multi"
+          class="ml-2"
+        >
+          Multiple
+        </label>
+      </div>
     </div>
-    <!-- if scoping invite to specific users -->
-    <div v-if="values.isRestricted">
+
+    <div v-if="values.emailType === 'single'">
       <TextInput
         v-model="email"
         name="email"
@@ -190,38 +216,45 @@ const onSubmit = handleSubmit(async (values: any) => {
         help-text="The Invite will be emailed to this person"
         class="invite-email"
       />
-      <div class="my-4 inline-flex">
-        <Button
-          class="p-button p-button-primary mr-3"
-          :disabled="inviteLoading"
-          type="submit"
-        >
-          <font-awesome-icon
-            icon="fa fa-envelope"
-            class="mr-2"
-          />
-          Send invite link
-        </Button>
-        <Spinner
-          v-if="inviteLoading"
-          class="h-2rem w-2rem"
+    </div>
+    <div v-else>
+      <div class="field">
+        <!-- eslint-disable -->
+        <TextArea
+          v-model="multiEmail"
+          name="multiEmail"
+          type="textarea"
+          placeholder="Enter email(s) separated by commas (, ) or semicolons (; ) - for example: email1@gov.bc.ca, email2@gov.bc.ca"
+          class="multi-email block"
         />
+        <!-- eslint-enable -->
+        <small
+          id="multiEmail-help"
+          class="block"
+        >
+          Enter an email address for each person you are inviting to access this
+          {{ props.resourceType === 'bucket' ? 'folder' : 'file' }}. The email address must be associated with the
+          account they use to sign in to BCBox.
+        </small>
+        <ErrorMessage name="multiEmail" />
       </div>
     </div>
-    <!-- else generating an open invite -->
-    <div v-else>
+
+    <div class="my-4 inline-flex">
       <Button
-        class="p-button p-button-primary my-3 block"
+        class="p-button p-button-primary mr-3"
+        :disabled="inviteLoading"
         type="submit"
       >
-        Generate invite link
+        <font-awesome-icon
+          icon="fa fa-envelope"
+          class="mr-2"
+        />
+        Send invite link
       </Button>
-      <Share
-        v-if="showInviteLink"
-        label="Invite link"
-        :resource-type="resourceType"
-        :resource="resource"
-        :invite-link="inviteLink"
+      <Spinner
+        v-if="inviteLoading"
+        class="h-2rem w-2rem"
       />
     </div>
   </form>
@@ -231,4 +264,7 @@ const onSubmit = handleSubmit(async (values: any) => {
 .invite-email:deep(input) {
   width: 80%;
 }
+.multi-email {
+  width: 100%;
+}
 </style>
diff --git a/frontend/src/lib/primevue/index.ts b/frontend/src/lib/primevue/index.ts
index 77bb82b5..d33c3c0e 100644
--- a/frontend/src/lib/primevue/index.ts
+++ b/frontend/src/lib/primevue/index.ts
@@ -21,6 +21,7 @@ export { default as RadioButton } from 'primevue/radiobutton';
 export { default as TabView } from 'primevue/tabview';
 export { default as TabPanel } from 'primevue/tabpanel';
 export { default as Tag } from 'primevue/tag';
+export { default as TextArea } from 'primevue/textarea';
 export { default as Toast } from 'primevue/toast';
 export { default as Toolbar } from 'primevue/toolbar';
 export { default as TreeTable } from 'primevue/treetable';
diff --git a/frontend/src/services/inviteService.ts b/frontend/src/services/inviteService.ts
index bb5ee58d..7bb5bd3c 100644
--- a/frontend/src/services/inviteService.ts
+++ b/frontend/src/services/inviteService.ts
@@ -36,29 +36,21 @@ export default {
       permCodes: permCodes
     };
 
-    // if emails param exists
-    if (emails && emails.length > 0) {
-      // create COMS invites
-      const invites = await Promise.all(
-        emails.map(async (e) => {
-          const token = (
-            await comsAxios().post(`${PATH}`, {
-              ...inviteData,
-              email: e
-            })
-          ).data;
-          return { email: e, token: token };
-        })
-      );
-      // send invite email notifications
-      await this.emailInvites(resourceType, resource, currentUser, invites);
-      return invites;
-    }
-    // else no emails provided so make an 'open' invite
-    else {
-      const token = (await comsAxios().post(`${PATH}`, inviteData)).data;
-      return [{ token: token }];
-    }
+    // create COMS invites
+    const invites = await Promise.all(
+      emails.map(async (e) => {
+        const token = (
+          await comsAxios().post(`${PATH}`, {
+            ...inviteData,
+            email: e
+          })
+        ).data;
+        return { email: e, token: token };
+      })
+    );
+    // send invite email notifications
+    await this.emailInvites(resourceType, resource, currentUser, invites);
+    return invites;
   },
 
   /**