From eef3a7a69eb9606cb6031e74ee438f80d8bf7743 Mon Sep 17 00:00:00 2001
From: Muhammed Mustafa <mustafa010199@gmail.com>
Date: Wed, 10 Aug 2022 14:46:08 +0530
Subject: [PATCH] fix/follow up on user management

---
 .../components/tabs/auth/UserManagement.vue   | 22 ++++++------
 .../tabs/auth/user-management/ShareBase.vue   | 20 +++++------
 .../tabs/auth/user-management/UsersModal.vue  | 34 ++++++++++---------
 .../useUIPermission/rolePermissions.ts        |  1 +
 packages/nc-gui-v2/lang/en.json               |  1 +
 packages/nc-gui-v2/lib/enums.ts               |  6 ++--
 packages/nc-gui-v2/utils/urlUtils.ts          |  2 +-
 packages/nc-gui-v2/utils/userUtils.ts         |  6 ++--
 8 files changed, 49 insertions(+), 43 deletions(-)

diff --git a/packages/nc-gui-v2/components/tabs/auth/UserManagement.vue b/packages/nc-gui-v2/components/tabs/auth/UserManagement.vue
index 69797b8f40..8e7e643cac 100644
--- a/packages/nc-gui-v2/components/tabs/auth/UserManagement.vue
+++ b/packages/nc-gui-v2/components/tabs/auth/UserManagement.vue
@@ -22,6 +22,7 @@ const toast = useToast()
 const { $api, $e } = useNuxtApp()
 const { project } = useProject()
 const { copy } = useClipboard()
+const { isUIAllowed } = useUIPermission()
 
 let users = $ref<null | User[]>(null)
 let selectedUser = $ref<null | User>(null)
@@ -80,6 +81,7 @@ const deleteUser = async () => {
     await loadUsers()
     showUserDeleteModal = false
   } catch (e: any) {
+    showUserDeleteModal = false
     console.error(e)
     toast.error(await extractSdkResponseErrorMsg(e))
   }
@@ -158,8 +160,8 @@ watchDebounced(searchText, () => loadUsers(), { debounce: 300, maxWait: 600 })
           This action will remove this user from this project
         </div>
         <div class="flex mt-6 justify-center space-x-2">
-          <a-button @click="showUserDeleteModal = false"> Cancel </a-button>
-          <a-button type="primary" danger @click="deleteUser"> Confirm </a-button>
+          <a-button @click="showUserDeleteModal = false"> {{ $t('general.cancel') }} </a-button>
+          <a-button type="primary" danger @click="deleteUser"> {{ $t('general.confirm') }} </a-button>
         </div>
       </div>
     </a-modal>
@@ -179,10 +181,10 @@ watchDebounced(searchText, () => loadUsers(), { debounce: 300, maxWait: 600 })
             <div class="text-gray-500">Reload</div>
           </div>
         </a-button>
-        <a-button size="middle" @click="onInvite">
+        <a-button v-if="isUIAllowed('newUser')" size="middle" @click="onInvite">
           <div class="flex flex-row justify-center items-center caption capitalize space-x-1">
             <MidAccountIcon />
-            <div>Invite Team</div>
+            <div>{{ $t('activity.inviteTeam') }}</div>
           </div>
         </a-button>
       </div>
@@ -192,15 +194,15 @@ watchDebounced(searchText, () => loadUsers(), { debounce: 300, maxWait: 600 })
         <div class="flex flex-row w-4/6 space-x-1 items-center pl-1">
           <EmailIcon class="flex text-gray-500 -mt-0.5" />
 
-          <div class="text-gray-600 text-xs space-x-1">E-mail</div>
+          <div class="text-gray-600 text-xs space-x-1">{{ $t('labels.email') }}</div>
         </div>
         <div class="flex flex-row justify-center w-1/6 space-x-1 items-center pl-1">
           <RolesIcon class="flex text-gray-500 -mt-0.5" />
 
-          <div class="text-gray-600 text-xs">Role</div>
+          <div class="text-gray-600 text-xs">{{ $t('objects.role') }}</div>
         </div>
         <div class="flex flex-row w-1/6 justify-end items-center pl-1">
-          <div class="text-gray-600 text-xs">Actions</div>
+          <div class="text-gray-600 text-xs">{{ $t('labels.actions') }}</div>
         </div>
       </div>
 
@@ -209,14 +211,14 @@ watchDebounced(searchText, () => loadUsers(), { debounce: 300, maxWait: 600 })
           {{ user.email }}
         </div>
         <div class="flex w-1/6 justify-center flex-wrap ml-4">
-          <div :class="`rounded-full px-2 py-1 bg-[${projectRoleTagColors[user.roles]}]`">
+          <div class="rounded-full px-2 py-1" :style="{ backgroundColor: projectRoleTagColors[role] }">
             {{ user.roles }}
           </div>
         </div>
         <div class="flex w-1/6 flex-wrap justify-end">
           <a-tooltip v-if="user.project_id" placement="bottom">
             <template #title>
-              <span>Edit user</span>
+              <span>{{ $t('activity.editUser') }}</span>
             </template>
             <a-button type="text" class="!rounded-md" @click="onEdit(user)">
               <template #icon>
@@ -265,7 +267,7 @@ watchDebounced(searchText, () => loadUsers(), { debounce: 300, maxWait: 600 })
                 <a-menu-item>
                   <div class="flex flex-row items-center py-1" @click="copyInviteUrl(user)">
                     <MdiContentCopyIcon class="flex h-[1rem]" />
-                    <div class="text-xs pl-2">Copy invite URL</div>
+                    <div class="text-xs pl-2">{{ $t('activity.copyInviteURL') }}</div>
                   </div>
                 </a-menu-item>
               </a-menu>
diff --git a/packages/nc-gui-v2/components/tabs/auth/user-management/ShareBase.vue b/packages/nc-gui-v2/components/tabs/auth/user-management/ShareBase.vue
index cdd6506c1c..6c25ec57b1 100644
--- a/packages/nc-gui-v2/components/tabs/auth/user-management/ShareBase.vue
+++ b/packages/nc-gui-v2/components/tabs/auth/user-management/ShareBase.vue
@@ -26,7 +26,7 @@ const { project } = useProject()
 
 const { copy } = useClipboard()
 
-const url = $computed(() => (base && base.uuid ? `${dashboardUrl()}#/nc/base/${base.uuid}` : null))
+const url = $computed(() => (base && base.uuid ? `${dashboardUrl()}/nc/base/${base.uuid}` : null))
 
 const loadBase = async () => {
   try {
@@ -145,14 +145,14 @@ onMounted(() => {
     <div class="flex flex-row items-center space-x-0.5 pl-2 h-[0.8rem]">
       <MdiOpenInNew />
 
-      <div class="text-xs">Shared Base Link</div>
+      <div class="text-xs">{{ $t('activity.shareBase.link') }}</div>
     </div>
     <div v-if="base?.uuid" class="flex flex-row mt-2 bg-red-50 py-4 mx-1 px-2 items-center rounded-sm w-full justify-between">
       <span class="flex text-xs overflow-x-hidden overflow-ellipsis text-gray-700 pl-2">{{ url }}</span>
       <div class="flex border-l-1 pt-1 pl-1">
         <a-tooltip placement="bottom">
           <template #title>
-            <span>Reload</span>
+            <span>{{ $t('general.reload') }}</span>
           </template>
           <a-button type="text" class="!rounded-md mr-1 -mt-1.5 h-[1rem]" @click="recreate">
             <template #icon>
@@ -162,7 +162,7 @@ onMounted(() => {
         </a-tooltip>
         <a-tooltip placement="bottom">
           <template #title>
-            <span>Copy URL</span>
+            <span>{{ $t('activity.copyUrl') }}</span>
           </template>
           <a-button type="text" class="!rounded-md mr-1 -mt-1.5 h-[1rem]" @click="copyUrl">
             <template #icon>
@@ -172,7 +172,7 @@ onMounted(() => {
         </a-tooltip>
         <a-tooltip placement="bottom">
           <template #title>
-            <span>Open new tab</span>
+            <span>{{ $t('activity.openTab') }}</span>
           </template>
           <a-button type="text" class="!rounded-md mr-1 -mt-1.5 h-[1rem]" @click="navigateToSharedBase">
             <template #icon>
@@ -182,7 +182,7 @@ onMounted(() => {
         </a-tooltip>
         <a-tooltip placement="bottom">
           <template #title>
-            <span>Copy embeddable HTML code</span>
+            <span>{{ $t('activity.iFrame') }}</span>
           </template>
           <a-button type="text" class="!rounded-md mr-1 -mt-1.5 h-[1rem]" @click="generateEmbeddableIframe">
             <template #icon>
@@ -197,8 +197,8 @@ onMounted(() => {
       <a-dropdown v-model="showEditBaseDropdown" class="flex">
         <a-button>
           <div class="flex flex-row items-center space-x-2">
-            <div v-if="base?.uuid">Anyone with the link</div>
-            <div v-else>Disable shared base</div>
+            <div v-if="base?.uuid">{{ $t('activity.shareBase.enable') }}</div>
+            <div v-else>{{ $t('activity.shareBase.disable') }}</div>
             <IcRoundKeyboardArrowDown class="h-[1rem]" />
           </div>
         </a-button>
@@ -206,8 +206,8 @@ onMounted(() => {
         <template #overlay>
           <a-menu>
             <a-menu-item>
-              <div v-if="base?.uuid" @click="disableSharedBase">Disable shared base</div>
-              <div v-else @click="createShareBase(ShareBaseRole.Viewer)">Anyone with the link</div>
+              <div v-if="base?.uuid" @click="disableSharedBase">{{ $t('activity.shareBase.disable') }}</div>
+              <div v-else @click="createShareBase(ShareBaseRole.Viewer)">{{ $t('activity.shareBase.enable') }}</div>
             </a-menu-item>
           </a-menu>
         </template>
diff --git a/packages/nc-gui-v2/components/tabs/auth/user-management/UsersModal.vue b/packages/nc-gui-v2/components/tabs/auth/user-management/UsersModal.vue
index 854b3f617a..8b3551bfe5 100644
--- a/packages/nc-gui-v2/components/tabs/auth/user-management/UsersModal.vue
+++ b/packages/nc-gui-v2/components/tabs/auth/user-management/UsersModal.vue
@@ -32,7 +32,7 @@ const { project } = useProject()
 const { $api, $e } = useNuxtApp()
 const { copy } = useClipboard()
 
-const usersData = $ref<Users>({ emails: undefined, role: ProjectRole.Guest, invitationToken: undefined })
+const usersData = $ref<Users>({ emails: undefined, role: ProjectRole.Viewer, invitationToken: undefined })
 const formRef = ref()
 
 const useForm = Form.useForm
@@ -100,9 +100,7 @@ const saveUser = async () => {
 }
 
 const inviteUrl = $computed(() =>
-  usersData.invitationToken
-    ? `${location.origin}${location.pathname}#/user/authentication/signup/${usersData.invitationToken}`
-    : null,
+  usersData.invitationToken ? `${location.origin}/user/authentication/signup/${usersData.invitationToken}` : null,
 )
 
 const copyUrl = async () => {
@@ -117,7 +115,7 @@ const copyUrl = async () => {
 const clickInviteMore = () => {
   $e('c:user:invite-more')
   usersData.invitationToken = undefined
-  usersData.role = ProjectRole.Guest
+  usersData.role = ProjectRole.Viewer
   usersData.emails = undefined
 }
 </script>
@@ -126,7 +124,7 @@ const clickInviteMore = () => {
   <a-modal :footer="null" centered :visible="show" :closable="false" width="max(50vw, 44rem)" @cancel="emit('closed')">
     <div class="flex flex-col">
       <div class="flex flex-row justify-between items-center pb-1.5 mb-2 border-b-1 w-full">
-        <a-typography-title class="select-none" :level="4"> Share: {{ project.title }} </a-typography-title>
+        <a-typography-title class="select-none" :level="4"> {{ $t('activity.share') }}: {{ project.title }} </a-typography-title>
         <a-button type="text" class="!rounded-md mr-1 -mt-1.5" @click="emit('closed')">
           <template #icon>
             <CloseIcon class="flex mx-auto" />
@@ -144,11 +142,11 @@ const clickInviteMore = () => {
 
             <a-alert class="mt-1" type="success" show-icon>
               <template #message>
-                <div class="flex flex-row w-full justify-between items-center">
-                  <div class="flex pl-2 text-green-700">
+                <div class="flex flex-row justify-between items-center py-1">
+                  <div class="flex pl-2 text-green-700 text-xs">
                     {{ inviteUrl }}
                   </div>
-                  <a-button type="text" class="!rounded-md mr-1" @click="copyUrl">
+                  <a-button type="text" class="!rounded-md -mt-0.5" @click="copyUrl">
                     <template #icon>
                       <ContentCopyIcon class="flex mx-auto text-green-700 h-[1rem]" />
                     </template>
@@ -156,15 +154,16 @@ const clickInviteMore = () => {
                 </div>
               </template>
             </a-alert>
+
             <div class="flex text-xs text-gray-500 mt-2 justify-start ml-2">
-              Looks like you have not configured mailer yet! Please copy above invite link and send it to
+              {{ $t('msg.info.userInviteNoSMTP') }}
               {{ usersData.invitationToken && usersData.emails }}
             </div>
             <div class="flex flex-row justify-start mt-4 ml-2">
               <a-button size="small" outlined @click="clickInviteMore">
                 <div class="flex flex-row justify-center items-center space-x-0.5">
                   <SendIcon class="flex mx-auto text-gray-600 h-[0.8rem]" />
-                  <div class="text-xs text-gray-600">Invite more</div>
+                  <div class="text-xs text-gray-600">{{ $t('activity.inviteMore') }}</div>
                 </div>
               </a-button>
             </div>
@@ -195,18 +194,21 @@ const clickInviteMore = () => {
                     <a-input
                       v-model:value="usersData.emails"
                       validate-trigger="onBlur"
-                      placeholder="Email"
+                      :placeholder="$t('labels.email')"
                       :disabled="!!selectedUser"
                     />
                   </a-form-item>
                 </div>
                 <div class="flex flex-col w-1/4">
                   <a-form-item name="role" :rules="[{ required: true, message: 'Role required' }]">
-                    <div class="ml-1 mb-1 text-xs text-gray-500">Select User Role:</div>
+                    <div class="ml-1 mb-1 text-xs text-gray-500">{{ $t('labels.selectUserRole') }}</div>
                     <a-select v-model:value="usersData.role">
                       <a-select-option v-for="(role, index) in Object.keys(projectRoleTagColors)" :key="index" :value="role">
                         <div class="flex flex-row h-full justify-start items-center">
-                          <div :class="`px-2 py-1 flex rounded-full text-xs bg-[${projectRoleTagColors[role]}]`">
+                          <div
+                            class="px-2 py-1 flex rounded-full text-xs"
+                            :style="{ backgroundColor: projectRoleTagColors[role] }"
+                          >
                             {{ role }}
                           </div>
                         </div>
@@ -217,10 +219,10 @@ const clickInviteMore = () => {
               </div>
               <div class="flex flex-row justify-center">
                 <a-button type="primary" html-type="submit">
-                  <div v-if="selectedUser">Save</div>
+                  <div v-if="selectedUser">{{ $t('general.save') }}</div>
                   <div v-else class="flex flex-row justify-center items-center space-x-1.5">
                     <SendIcon class="flex h-[0.8rem]" />
-                    <div>Invite</div>
+                    <div>{{ $t('activity.invite') }}</div>
                   </div>
                 </a-button>
               </div>
diff --git a/packages/nc-gui-v2/composables/useUIPermission/rolePermissions.ts b/packages/nc-gui-v2/composables/useUIPermission/rolePermissions.ts
index 9fff66f69b..b0884700bd 100644
--- a/packages/nc-gui-v2/composables/useUIPermission/rolePermissions.ts
+++ b/packages/nc-gui-v2/composables/useUIPermission/rolePermissions.ts
@@ -17,6 +17,7 @@ const rolePermissions = {
     csvImport: true,
     apiDocs: true,
     projectSettings: true,
+    newUser: false,
   },
   commenter: {
     smartSheet: true,
diff --git a/packages/nc-gui-v2/lang/en.json b/packages/nc-gui-v2/lang/en.json
index 07df8c30dd..34f44632b5 100644
--- a/packages/nc-gui-v2/lang/en.json
+++ b/packages/nc-gui-v2/lang/en.json
@@ -13,6 +13,7 @@
     "edit": "Edit",
     "remove": "Remove",
     "save": "Save",
+    "confirm": "Confirm",
     "cancel": "Cancel",
     "submit": "Submit",
     "create": "Create",
diff --git a/packages/nc-gui-v2/lib/enums.ts b/packages/nc-gui-v2/lib/enums.ts
index b9041b6622..8415616bb1 100644
--- a/packages/nc-gui-v2/lib/enums.ts
+++ b/packages/nc-gui-v2/lib/enums.ts
@@ -5,10 +5,10 @@ export enum Role {
 }
 
 export enum ProjectRole {
-  Owner = 'owner',
+  Creator = 'creator',
   Editor = 'editor',
-  User = 'user',
-  Guest = 'guest',
+  Commenter = 'commenter',
+  Viewer = 'viewer',
 }
 
 export enum ClientType {
diff --git a/packages/nc-gui-v2/utils/urlUtils.ts b/packages/nc-gui-v2/utils/urlUtils.ts
index 5f9427c98b..d7b24ac8b0 100644
--- a/packages/nc-gui-v2/utils/urlUtils.ts
+++ b/packages/nc-gui-v2/utils/urlUtils.ts
@@ -18,7 +18,7 @@ export const replaceUrlsWithLink = (text: string): boolean | string => {
 }
 
 export const dashboardUrl = () => {
-  return `${location.origin}${location.pathname || ''}`
+  return `${location.origin}`
 }
 
 // ref : https://stackoverflow.com/a/5717133
diff --git a/packages/nc-gui-v2/utils/userUtils.ts b/packages/nc-gui-v2/utils/userUtils.ts
index 27f70ef391..b847523f22 100644
--- a/packages/nc-gui-v2/utils/userUtils.ts
+++ b/packages/nc-gui-v2/utils/userUtils.ts
@@ -1,8 +1,8 @@
 import { ProjectRole } from '~/lib/enums'
 
 export const projectRoleTagColors = {
-  [ProjectRole.Owner]: '#cfdffe',
+  [ProjectRole.Creator]: '#d0f1fd',
   [ProjectRole.Editor]: '#c2f5e8',
-  [ProjectRole.User]: '#4caf50',
-  [ProjectRole.Guest]: '#9e9e9e',
+  [ProjectRole.Commenter]: '#ffdaf6',
+  [ProjectRole.Viewer]: '#ffdce5',
 }