From 05c49fce9e968ba94da8653b494719220448345d Mon Sep 17 00:00:00 2001
From: sreehari jayaraj <sreeharivijaya2003@gmail.com>
Date: Mon, 25 Sep 2023 07:07:22 +0000
Subject: [PATCH 1/4] fix: refactor email badges

---
 .../dlg/share-and-collaborate/ManageUsers.vue |   2 +-
 packages/nc-gui/components/nc/Badge.vue       |   6 +-
 .../project/InviteProjectCollabSection.vue    | 339 ------------------
 .../workspace/CollaboratorsList.vue           |   1 -
 .../components/workspace/InviteSection.vue    |   4 +-
 5 files changed, 6 insertions(+), 346 deletions(-)
 delete mode 100644 packages/nc-gui/components/project/InviteProjectCollabSection.vue

diff --git a/packages/nc-gui/components/dlg/share-and-collaborate/ManageUsers.vue b/packages/nc-gui/components/dlg/share-and-collaborate/ManageUsers.vue
index 5be614a071..d66422cfcc 100644
--- a/packages/nc-gui/components/dlg/share-and-collaborate/ManageUsers.vue
+++ b/packages/nc-gui/components/dlg/share-and-collaborate/ManageUsers.vue
@@ -73,7 +73,7 @@ const rolesTypes = [
 <template>
   <div class="flex flex-col mx-4 h-112">
     <div class="flex mt-2.5 mb-2.5 border-b-1 border-gray-50 pb-1.5" :style="{ fontWeight: 500 }">Manage Members</div>
-    <div class="flex mt-2.5 mb-2.5 text-xs" :style="{ fontWeight: 500 }">Project Owner</div>
+    <div class="flex mt-2.5 mb-2.5 text-xs font-bold">Project Owner</div>
     <div v-if="owner" class="flex flex-row px-2 py-2 items-center gap-x-2 border-1 border-gray-100 rounded-md">
       <a-avatar></a-avatar>
       <div class="flex flex-col justify-center">
diff --git a/packages/nc-gui/components/nc/Badge.vue b/packages/nc-gui/components/nc/Badge.vue
index 4a85d84919..df2dee5a2a 100644
--- a/packages/nc-gui/components/nc/Badge.vue
+++ b/packages/nc-gui/components/nc/Badge.vue
@@ -24,9 +24,9 @@ const props = withDefaults(
       'border-red-500 bg-red-100': props.color === 'red',
       'border-gray-300': !props.color,
       'border-1': props.border,
-      '!h-6': props.size === 'sm',
-      '!h-8': props.size === 'md',
-      '!h-10': props.size === 'lg',
+      'h-6': props.size === 'sm',
+      'h-8': props.size === 'md',
+      'h-10': props.size === 'lg',
     }"
   >
     <slot />
diff --git a/packages/nc-gui/components/project/InviteProjectCollabSection.vue b/packages/nc-gui/components/project/InviteProjectCollabSection.vue
deleted file mode 100644
index 9121263de1..0000000000
--- a/packages/nc-gui/components/project/InviteProjectCollabSection.vue
+++ /dev/null
@@ -1,339 +0,0 @@
-<script lang="ts" setup>
-import { OrderedProjectRoles, ProjectRoles } from 'nocodb-sdk'
-import { extractSdkResponseErrorMsg, useDashboard, useManageUsers } from '#imports'
-
-const emit = defineEmits(['invited'])
-
-const inviteData = reactive({
-  email: '',
-  roles: ProjectRoles.VIEWER,
-})
-
-const focusRef = ref<HTMLInputElement>()
-const isDivFocused = ref(false)
-const divRef = ref<HTMLDivElement>()
-
-const emailValidation = reactive({
-  isError: false,
-  message: '',
-})
-
-const validateEmail = (email: string): boolean => {
-  const regEx = /^[^\s@]+@[^\s@]+\.[^\s@]+$/
-  return regEx.test(email)
-}
-
-// all user input emails are stored here
-const emailBadges = ref<Array<string>>([])
-
-const insertOrUpdateString = (str: string) => {
-  // Check if the string already exists in the array
-  const index = emailBadges.value.indexOf(str)
-
-  if (index !== -1) {
-    // If the string exists, remove it
-    emailBadges.value.splice(index, 1)
-  }
-
-  // Add the new string to the array
-  emailBadges.value.push(str)
-}
-
-watch(inviteData, (newVal) => {
-  const isNewEmail = newVal.email.charAt(newVal.email.length - 1) === ',' || newVal.email.charAt(newVal.email.length - 1) === ' '
-  if (isNewEmail && newVal.email.trim().length > 1) {
-    const emailToAdd = newVal.email.split(',')[0].trim() || newVal.email.split(' ')[0].trim()
-    if (!validateEmail(emailToAdd)) {
-      emailValidation.isError = true
-      emailValidation.message = 'INVALID EMAIL'
-      return
-    }
-    /** 
-     if email is already enterd we delete the already
-     existing email and add new one
-     **/
-    if (emailBadges.value.includes(emailToAdd)) {
-      insertOrUpdateString(emailToAdd)
-      inviteData.email = ''
-      return
-    }
-    emailBadges.value.push(emailToAdd)
-    inviteData.email = ''
-  }
-  if (newVal.email.length < 1 && emailValidation.isError) {
-    emailValidation.isError = false
-  }
-})
-
-const handleEnter = () => {
-  if (inviteData.email.length < 1) {
-    emailValidation.isError = true
-    emailValidation.message = 'EMAIL SHOULD NOT BE EMPTY'
-    return
-  }
-  if (!validateEmail(inviteData.email.trim())) {
-    emailValidation.isError = true
-    emailValidation.message = 'INVALID EMAIL'
-    return
-  }
-  inviteData.email += ' '
-  emailValidation.isError = false
-  emailValidation.message = ''
-}
-
-const { dashboardUrl } = useDashboard()
-
-const { inviteUser } = useManageUsers()
-
-const { $e } = useNuxtApp()
-
-const { projectRoles } = useRoles()
-
-const usersData = ref<{
-  invite_token?: string
-  email?: string
-  roles?: string
-}>()
-
-const isInvitingCollaborators = ref(false)
-
-const inviteCollaborator = async () => {
-  if (isInvitingCollaborators.value) return
-
-  isInvitingCollaborators.value = true
-
-  try {
-    emailBadges.value.forEach((el, index) => {
-      // prevent the last email from getting the ","
-      if (index === emailBadges.value.length - 1) {
-        inviteData.email += el
-      } else {
-        inviteData.email += `${el},`
-      }
-    })
-    usersData.value = await inviteUser(inviteData)
-    usersData.roles = inviteData.roles
-    if (usersData.value) {
-      message.success('Invitation sent successfully')
-      inviteData.email = ''
-      emailBadges.value = []
-      emit('invited')
-    }
-  } catch (e: any) {
-    message.error(await extractSdkResponseErrorMsg(e))
-  } finally {
-    inviteData.email = ''
-    isInvitingCollaborators.value = false
-  }
-}
-
-const inviteUrl = computed(() =>
-  usersData.value?.invite_token ? `${dashboardUrl.value}#/signup/${usersData.value.invite_token}` : null,
-)
-
-// allow only lower roles to be assigned
-const allowedRoles = ref<ProjectRoles[]>([])
-
-onMounted(async () => {
-  try {
-    const currentRoleIndex = OrderedProjectRoles.findIndex(
-      (role) => projectRoles.value && Object.keys(projectRoles.value).includes(role),
-    )
-    if (currentRoleIndex !== -1) {
-      allowedRoles.value = OrderedProjectRoles.slice(currentRoleIndex).filter((r) => r && r !== ProjectRoles.OWNER)
-    }
-  } catch (e: any) {
-    message.error(await extractSdkResponseErrorMsg(e))
-  }
-})
-
-const { copy } = useCopy(true)
-
-const { t } = useI18n()
-
-const copyUrl = async () => {
-  if (!inviteUrl.value) return
-  try {
-    await copy(inviteUrl.value)
-
-    // Copied shareable base url to clipboard!
-    message.success(t('msg.success.shareableURLCopied'))
-    inviteData.email = ''
-    emailBadges.value = []
-  } catch (e: any) {
-    message.error(e.message)
-  }
-  $e('c:shared-base:copy-url')
-}
-
-const focusOnDiv = () => {
-  focusRef.value?.focus()
-  isDivFocused.value = true
-}
-
-// remove one email per backspace
-onKeyStroke('Backspace', () => {
-  if (isDivFocused.value && inviteData.email.length < 1) {
-    emailBadges.value.pop()
-  }
-})
-
-// when bulk email is pasted
-const onPaste = (e: ClipboardEvent) => {
-  const pastedText = e.clipboardData?.getData('text')
-  const inputArray = pastedText?.split(',') || pastedText?.split(' ')
-  // if data is pasted to a already existing text in input
-  // we add existingInput + pasted data
-  if (inputArray?.length === 1 && inviteData.email.length > 1) {
-    inputArray[0] = inviteData.email += inputArray[0]
-  }
-  inputArray?.forEach((el) => {
-    if (el.length < 1) {
-      emailValidation.isError = true
-      emailValidation.message = 'EMAIL SHOULD NOT BE EMPTY'
-      return
-    }
-    if (!validateEmail(el.trim())) {
-      emailValidation.isError = true
-      emailValidation.message = 'INVALID EMAIL'
-      return
-    }
-    /** 
-     if email is already enterd we delete the already
-     existing email and add new one
-     **/
-    if (emailBadges.value.includes(el)) {
-      insertOrUpdateString(el)
-      return
-    }
-
-    emailBadges.value.push(el)
-    inviteData.email = ''
-  })
-  inviteData.email = ''
-}
-</script>
-
-<template>
-  <div class="my-2 pt-3 ml-2" data-testid="invite">
-    <template v-if="usersData && usersData.invite_token">
-      <div class="flex flex-col mt-4 border-b-1 pb-5">
-        <div class="flex flex-row items-center pl-1.5 pb-1 h-[1.1rem]">
-          <div class="text-xs ml-0.5 mt-0.5">Copy Invite Token</div>
-        </div>
-
-        <a-alert class="mt-1" type="success" show-icon>
-          <template #message>
-            <div class="flex flex-row justify-between items-center py-1">
-              <div class="flex pl-2 text-green-700 text-xs" data-testid="invite-modal-invitation-url">
-                {{ inviteUrl }}
-              </div>
-
-              <a-button type="text" class="!rounded-md -mt-0.5" @click="copyUrl">
-                <template #icon>
-                  <GeneralIcon icon="copy" class="nc-view-icon"></GeneralIcon>
-                </template>
-              </a-button>
-            </div>
-          </template>
-        </a-alert>
-
-        <div class="flex text-xs text-gray-500 mt-2 justify-start ml-2">
-          {{ $t('msg.info.userInviteNoSMTP') }}
-          {{ usersData.invite_token && usersData.emails }}
-        </div>
-
-        <div class="flex flex-row justify-start mt-4 ml-2">
-          <a-button size="small" outlined @click="usersData = null">
-            <div class="flex flex-row justify-center items-center space-x-0.5">
-              <MaterialSymbolsSendOutline class="flex mx-auto text-gray-600 h-[0.8rem]" />
-
-              <div class="text-xs text-gray-600">{{ $t('activity.inviteMore') }}</div>
-            </div>
-          </a-button>
-        </div>
-      </div>
-    </template>
-
-    <template v-else>
-      <div class="text-xl mb-4">Invite</div>
-      <a-form>
-        <div class="flex gap-2">
-          <div class="flex flex-col">
-            <div
-              ref="divRef"
-              class="flex w-130 border-1 gap-1 items-center min-h-8 flex-wrap max-h-30 overflow-y-scroll rounded-lg nc-scrollbar-md"
-              tabindex="0"
-              :class="{
-                'border-primary/100': isDivFocused,
-                'p-1': emailBadges.length > 1,
-              }"
-              @click="focusOnDiv"
-              @blur="isDivFocused = false"
-            >
-              <span
-                v-for="(email, index) in emailBadges"
-                :key="email"
-                class="text-[14px] border-1 text-brand-500 bg-brand-50 rounded-md ml-1 p-0.5"
-              >
-                {{ email }}
-                <component
-                  :is="iconMap.close"
-                  class="ml-0.5 hover:cursor-pointer w-3.5 h-3.5"
-                  @click="emailBadges.splice(index, 1)"
-                />
-              </span>
-              <input
-                id="email"
-                ref="focusRef"
-                v-model="inviteData.email"
-                :placeholder="emailBadges.length < 1 ? 'Enter emails to send invitation' : ''"
-                class="min-w-50 !outline-0 !focus:outline-0 ml-2 mr-3"
-                data-testid="email-input"
-                @keyup.enter="handleEnter"
-                @paste.prevent="onPaste"
-                @blur="isDivFocused = false"
-              />
-            </div>
-            <span v-if="emailValidation.isError" class="ml-2 text-red-500 text-[12px] mt-1">{{ emailValidation.message }}</span>
-          </div>
-
-          <RolesSelector
-            class="px-1"
-            :role="inviteData.roles"
-            :roles="allowedRoles"
-            :on-role-change="(role: ProjectRoles) => (inviteData.roles = role)"
-            :description="true"
-          />
-
-          <a-button
-            type="primary"
-            class="!rounded-md"
-            :disabled="!emailBadges.length || isInvitingCollaborators || emailValidation.isError"
-            @click="inviteCollaborator"
-          >
-            <div class="flex flex-row items-center gap-x-2 pr-1">
-              <GeneralLoader v-if="isInvitingCollaborators" class="flex" />
-              <MdiPlus v-else />
-              {{ isInvitingCollaborators ? 'Adding' : 'Add' }} User(s)
-            </div>
-          </a-button>
-        </div>
-      </a-form>
-    </template>
-  </div>
-</template>
-
-<style scoped>
-.badge-text {
-  @apply text-[14px] pt-1 text-center font-medium first-letter:uppercase;
-}
-
-:deep(.ant-select .ant-select-selector) {
-  @apply rounded;
-}
-
-:deep(.ant-select-selection-item) {
-  @apply mt-0.75;
-}
-</style>
diff --git a/packages/nc-gui/components/workspace/CollaboratorsList.vue b/packages/nc-gui/components/workspace/CollaboratorsList.vue
index 26daccd9d5..8a0c853a7e 100644
--- a/packages/nc-gui/components/workspace/CollaboratorsList.vue
+++ b/packages/nc-gui/components/workspace/CollaboratorsList.vue
@@ -44,7 +44,6 @@ onMounted(async () => {
 
 <template>
   <div class="nc-collaborator-table-container mt-4 mx-6">
-    <!-- <div class="w-full h-1 border-t-1 border-gray-100 opacity-50 mt-6"></div> -->
     <div class="w-full flex justify-between items-baseline mt-6.5 mb-2 pr-0.25 ml-2">
       <div class="text-xl">Invite Members By Email</div>
       <a-input v-model:value="userSearchText" class="!max-w-90 !rounded-md mr-4" placeholder="Search members">
diff --git a/packages/nc-gui/components/workspace/InviteSection.vue b/packages/nc-gui/components/workspace/InviteSection.vue
index 180d29a647..2ad4cfa01b 100644
--- a/packages/nc-gui/components/workspace/InviteSection.vue
+++ b/packages/nc-gui/components/workspace/InviteSection.vue
@@ -132,7 +132,7 @@ onKeyStroke('Backspace', () => {
 // when bulk email is pasted
 const onPaste = (e: ClipboardEvent) => {
   const pastedText = e.clipboardData?.getData('text')
-  const inputArray = pastedText?.split(',') || pastedText?.split(' ')
+  const inputArray = pastedText?.split(',') || pastedText?.split(' ') || pastedText?.split('')
   // if data is pasted to a already existing text in input
   // we add existingInput + pasted data
   if (inputArray?.length === 1 && inviteData.email.length > 1) {
@@ -151,8 +151,8 @@ const onPaste = (e: ClipboardEvent) => {
       insertOrUpdateString(el)
       return
     }
-
     emailBadges.value.push(el)
+
     inviteData.email = ''
   })
   inviteData.email = ''

From e85c7ebbc0b5b2356604961a7dc94eefadb4cd5d Mon Sep 17 00:00:00 2001
From: sreehari jayaraj <sreeharivijaya2003@gmail.com>
Date: Mon, 25 Sep 2023 07:07:22 +0000
Subject: [PATCH 2/4] fix: refactor and type infer

---
 .../nc-gui/components/dlg/share-and-collaborate/View.vue     | 5 +++--
 packages/nc-gui/components/roles/Badge.vue                   | 2 +-
 packages/nc-gui/components/workspace/InviteSection.vue       | 2 +-
 3 files changed, 5 insertions(+), 4 deletions(-)

diff --git a/packages/nc-gui/components/dlg/share-and-collaborate/View.vue b/packages/nc-gui/components/dlg/share-and-collaborate/View.vue
index 8f5d14efa1..ab3f976b90 100644
--- a/packages/nc-gui/components/dlg/share-and-collaborate/View.vue
+++ b/packages/nc-gui/components/dlg/share-and-collaborate/View.vue
@@ -1,4 +1,5 @@
 <script lang="ts" setup>
+import type { ViewType } from 'nocodb-sdk'
 import { LoadingOutlined } from '@ant-design/icons-vue'
 import ManageUsers from './ManageUsers.vue'
 import { useViewsStore } from '~/store/views'
@@ -14,7 +15,7 @@ const { project } = storeToRefs(projectStore)
 const { navigateToProjectPage } = projectStore
 const { activeView } = storeToRefs(useViewsStore())
 
-let view
+let view: globalThis.Ref<ViewType | undefined>
 if (isViewToolbar) {
   try {
     const store = useSmartsheetStoreOrThrow()
@@ -95,7 +96,7 @@ watch(showShareModal, (val) => {
     :width="formStatus === 'manageCollaborators' ? '60rem' : '40rem'"
   >
     <div v-if="formStatus === 'project-collaborateSaving'" class="flex flex-row w-full px-5 justify-between items-center py-1">
-      <div class="flex text-base" :style="{ fontWeight: 500 }">Adding Members</div>
+      <div class="flex text-base font-bold">Adding Members</div>
       <a-spin :indicator="indicator" />
     </div>
     <template v-else-if="formStatus === 'project-collaborateSaved'">
diff --git a/packages/nc-gui/components/roles/Badge.vue b/packages/nc-gui/components/roles/Badge.vue
index c64cf8ec58..c177552c64 100644
--- a/packages/nc-gui/components/roles/Badge.vue
+++ b/packages/nc-gui/components/roles/Badge.vue
@@ -41,7 +41,7 @@ const roleProperties = computed(() => {
 
 <template>
   <div
-    class="flex items-start"
+    class="flex items-start rounded-md"
     :class="{
       'cursor-pointer': clickableRef,
     }"
diff --git a/packages/nc-gui/components/workspace/InviteSection.vue b/packages/nc-gui/components/workspace/InviteSection.vue
index 2ad4cfa01b..aeda72f1c3 100644
--- a/packages/nc-gui/components/workspace/InviteSection.vue
+++ b/packages/nc-gui/components/workspace/InviteSection.vue
@@ -135,7 +135,7 @@ const onPaste = (e: ClipboardEvent) => {
   const inputArray = pastedText?.split(',') || pastedText?.split(' ') || pastedText?.split('')
   // if data is pasted to a already existing text in input
   // we add existingInput + pasted data
-  if (inputArray?.length === 1 && inviteData.email.length > 1) {
+  if (inputArray?.length === 1 && inviteData.email.length) {
     inputArray[0] = inviteData.email += inputArray[0]
   }
   inputArray?.forEach((el) => {

From 6d2e413150d660cb96d6b6c0f9618497680af4d3 Mon Sep 17 00:00:00 2001
From: sreehari jayaraj <sreeharivijaya2003@gmail.com>
Date: Mon, 25 Sep 2023 07:07:22 +0000
Subject: [PATCH 3/4] fix: ref type and removed unwanted logic

---
 .../nc-gui/components/dlg/share-and-collaborate/View.vue     | 2 +-
 packages/nc-gui/components/workspace/InviteSection.vue       | 5 ++++-
 2 files changed, 5 insertions(+), 2 deletions(-)

diff --git a/packages/nc-gui/components/dlg/share-and-collaborate/View.vue b/packages/nc-gui/components/dlg/share-and-collaborate/View.vue
index ab3f976b90..b24dd2e54e 100644
--- a/packages/nc-gui/components/dlg/share-and-collaborate/View.vue
+++ b/packages/nc-gui/components/dlg/share-and-collaborate/View.vue
@@ -15,7 +15,7 @@ const { project } = storeToRefs(projectStore)
 const { navigateToProjectPage } = projectStore
 const { activeView } = storeToRefs(useViewsStore())
 
-let view: globalThis.Ref<ViewType | undefined>
+let view: Ref<ViewType | undefined>
 if (isViewToolbar) {
   try {
     const store = useSmartsheetStoreOrThrow()
diff --git a/packages/nc-gui/components/workspace/InviteSection.vue b/packages/nc-gui/components/workspace/InviteSection.vue
index aeda72f1c3..914131a3cd 100644
--- a/packages/nc-gui/components/workspace/InviteSection.vue
+++ b/packages/nc-gui/components/workspace/InviteSection.vue
@@ -132,12 +132,15 @@ onKeyStroke('Backspace', () => {
 // when bulk email is pasted
 const onPaste = (e: ClipboardEvent) => {
   const pastedText = e.clipboardData?.getData('text')
-  const inputArray = pastedText?.split(',') || pastedText?.split(' ') || pastedText?.split('')
+
+  const inputArray = pastedText?.split(',') || pastedText?.split(' ')
+
   // if data is pasted to a already existing text in input
   // we add existingInput + pasted data
   if (inputArray?.length === 1 && inviteData.email.length) {
     inputArray[0] = inviteData.email += inputArray[0]
   }
+
   inputArray?.forEach((el) => {
     const isEmailIsValid = emailInputValidation(el)
 

From e6f8a4e75a34fcae3f5211bf16b28a3bc297632e Mon Sep 17 00:00:00 2001
From: sreehari jayaraj <sreeharivijaya2003@gmail.com>
Date: Mon, 25 Sep 2023 07:07:22 +0000
Subject: [PATCH 4/4] fix: added support for single email

---
 .../components/workspace/InviteSection.vue    | 44 ++++++++++++++++---
 1 file changed, 38 insertions(+), 6 deletions(-)

diff --git a/packages/nc-gui/components/workspace/InviteSection.vue b/packages/nc-gui/components/workspace/InviteSection.vue
index 914131a3cd..9b4d533db2 100644
--- a/packages/nc-gui/components/workspace/InviteSection.vue
+++ b/packages/nc-gui/components/workspace/InviteSection.vue
@@ -14,9 +14,10 @@ const isDivFocused = ref(false)
 const divRef = ref<HTMLDivElement>()
 
 const emailValidation = reactive({
-  isError: false,
+  isError: true,
   message: '',
 })
+const singleEmailValue = ref('')
 
 const workspaceStore = useWorkspace()
 
@@ -54,7 +55,28 @@ const emailInputValidation = (input: string): boolean => {
   return true
 }
 
+const isInvitButtonDiabled = computed(() => {
+  if (!emailBadges.value.length && !singleEmailValue.value.length) {
+    return true
+  }
+  if (emailBadges.value.length && inviteData.email) {
+    return true
+  }
+})
+
 watch(inviteData, (newVal) => {
+  // when user only want to enter a single email
+  // we dont convert that as badge
+
+  const isSingleEmailValid = validateEmail(newVal.email)
+  if (isSingleEmailValid && !emailBadges.value.length) {
+    singleEmailValue.value = newVal.email
+    emailValidation.isError = false
+    return
+  }
+  singleEmailValue.value = ''
+
+  // when user enters multiple emails comma sepearted or space sepearted
   const isNewEmail = newVal.email.charAt(newVal.email.length - 1) === ',' || newVal.email.charAt(newVal.email.length - 1) === ' '
   if (isNewEmail && newVal.email.trim().length) {
     const emailToAdd = newVal.email.split(',')[0].trim() || newVal.email.split(' ')[0].trim()
@@ -63,7 +85,7 @@ watch(inviteData, (newVal) => {
       emailValidation.message = 'Invalid Email'
       return
     }
-    /** 
+    /**
      if email is already enterd we delete the already
      existing email and add new one
      **/
@@ -74,6 +96,7 @@ watch(inviteData, (newVal) => {
     }
     emailBadges.value.push(emailToAdd)
     inviteData.email = ''
+    singleEmailValue.value = ''
   }
   if (!newVal.email.length && emailValidation.isError) {
     emailValidation.isError = false
@@ -91,7 +114,14 @@ const handleEnter = () => {
 
 const inviteCollaborator = async () => {
   try {
-    const payloadData = emailBadges.value.join(',')
+    const payloadData = singleEmailValue.value || emailBadges.value.join(',')
+    if (!payloadData.includes(',')) {
+      const validationStatus = validateEmail(payloadData)
+      if (!validationStatus) {
+        emailValidation.isError = true
+        emailValidation.message = 'invalid email'
+      }
+    }
 
     await _inviteCollaborator(payloadData, inviteData.roles)
     message.success('Invitation sent successfully')
@@ -99,6 +129,8 @@ const inviteCollaborator = async () => {
     emailBadges.value = []
   } catch (e: any) {
     message.error(await extractSdkResponseErrorMsg(e))
+  } finally {
+    singleEmailValue.value = ''
   }
 }
 // allow only lower roles to be assigned
@@ -146,7 +178,7 @@ const onPaste = (e: ClipboardEvent) => {
 
     if (!isEmailIsValid) return
 
-    /** 
+    /**
      if email is already enterd we delete the already
      existing email and add new one
      **/
@@ -194,7 +226,7 @@ const onPaste = (e: ClipboardEvent) => {
             ref="focusRef"
             v-model="inviteData.email"
             :placeholder="emailBadges.length < 1 ? 'Enter emails to send invitation' : ''"
-            class="min-w-50 outline-0 ml-2 mr-3"
+            class="min-w-60 outline-0 ml-2 mr-3 flex-grow-1"
             data-testid="email-input"
             @keyup.enter="handleEnter"
             @blur="isDivFocused = false"
@@ -215,7 +247,7 @@ const onPaste = (e: ClipboardEvent) => {
       <NcButton
         type="primary"
         size="small"
-        :disabled="!emailBadges.length || isInvitingCollaborators || emailValidation.isError"
+        :disabled="isInvitButtonDiabled || isInvitingCollaborators || emailValidation.isError"
         :loading="isInvitingCollaborators"
         @click="inviteCollaborator"
       >