From 6f2179b959317b57749df3e5cd2f59183c1b3ef4 Mon Sep 17 00:00:00 2001
From: Raju Udava <86527202+dstala@users.noreply.github.com>
Date: Fri, 2 Sep 2022 11:17:43 +0530
Subject: [PATCH] refactor: i18n for user management, api management, settings

Signed-off-by: Raju Udava <86527202+dstala@users.noreply.github.com>
---
 .../components/dashboard/settings/Modal.vue   | 27 ++++++++++++-------
 packages/nc-gui-v2/components/tabs/Auth.vue   |  7 +++--
 .../tabs/auth/ApiTokenManagement.vue          | 20 ++++++++------
 .../components/tabs/auth/UserManagement.vue   | 13 +++++----
 .../pages/[projectType]/[projectId]/index.vue |  1 -
 5 files changed, 43 insertions(+), 25 deletions(-)

diff --git a/packages/nc-gui-v2/components/dashboard/settings/Modal.vue b/packages/nc-gui-v2/components/dashboard/settings/Modal.vue
index 550e461c2c..69275b4b6a 100644
--- a/packages/nc-gui-v2/components/dashboard/settings/Modal.vue
+++ b/packages/nc-gui-v2/components/dashboard/settings/Modal.vue
@@ -45,7 +45,7 @@ const { t } = useI18n()
 
 const tabsInfo: TabGroup = {
   teamAndAuth: {
-    title: 'Team and Auth',
+    title: t('title.teamAndAuth'),
     icon: TeamFillIcon,
     subTabs: {
       ...(isUIAllowed('userMgmtTab') && {
@@ -65,7 +65,8 @@ const tabsInfo: TabGroup = {
     },
   },
   appStore: {
-    title: 'App Store',
+    // App Store
+    title: t('title.appStore'),
     icon: StoreFrontOutline,
     subTabs: {
       new: {
@@ -75,29 +76,34 @@ const tabsInfo: TabGroup = {
     },
   },
   metaData: {
-    title: 'Project Metadata',
+    // Project Metadata
+    title: t('title.projMeta'),
     icon: MultipleTableIcon,
     subTabs: {
       metaData: {
-        title: 'Metadata',
+        // Metadata
+        title: t('title.metadata'),
         body: Metadata,
       },
       acl: {
-        title: 'UI Access Control',
+        // UI Access Control
+        title: t('title.uiACL'),
         body: UIAcl,
       },
       misc: {
-        title: 'Misc',
+        title: t('general.misc'),
         body: Misc,
       },
     },
   },
   audit: {
-    title: 'Audit',
+    // Audit
+    title: t('title.audit'),
     icon: NootbookOutline,
     subTabs: {
       audit: {
-        title: 'Audit',
+        // Audit
+        title: t('title.audit'),
         body: AuditTab,
       },
     },
@@ -136,8 +142,11 @@ watch(
     :closable="false"
     @cancel="emits('update:modelValue', false)"
   >
+    <!--    Settings -->
     <div class="flex flex-row justify-between w-full items-center mb-1">
-      <a-typography-title class="ml-4 select-none" type="secondary" :level="5">SETTINGS</a-typography-title>
+      <a-typography-title class="ml-4 select-none" type="secondary" :level="5">
+        {{ $t('activity.settings') }}
+      </a-typography-title>
 
       <a-button type="text" class="!rounded-md border-none -mt-1.5 -mr-1" @click="vModel = false">
         <template #icon>
diff --git a/packages/nc-gui-v2/components/tabs/Auth.vue b/packages/nc-gui-v2/components/tabs/Auth.vue
index bddf636f78..864c6caad3 100644
--- a/packages/nc-gui-v2/components/tabs/Auth.vue
+++ b/packages/nc-gui-v2/components/tabs/Auth.vue
@@ -1,4 +1,5 @@
 <script setup lang="ts">
+import { useI18n } from 'vue-i18n'
 import UserManagement from './auth/UserManagement.vue'
 import ApiTokenManagement from './auth/ApiTokenManagement.vue'
 
@@ -6,14 +7,16 @@ interface Tab {
   title: string
   body: any
 }
-
+const { t } = useI18n()
 const tabsInfo: Tab[] = [
   {
     title: 'Users Management',
+    label: t('title.userMgmt'),
     body: () => UserManagement,
   },
   {
     title: 'API Token Management',
+    label: t('title.userMgmt'),
     body: () => ApiTokenManagement,
   },
 ]
@@ -30,7 +33,7 @@ const selectedTab = $computed(() => tabsInfo[selectedTabKey])
       <a-tab-pane v-for="(tab, key) of tabsInfo" :key="key" class="select-none">
         <template #tab>
           <span>
-            {{ tab.title }}
+            {{ tab.label }}
           </span>
         </template>
       </a-tab-pane>
diff --git a/packages/nc-gui-v2/components/tabs/auth/ApiTokenManagement.vue b/packages/nc-gui-v2/components/tabs/auth/ApiTokenManagement.vue
index b93742917d..50a3701de9 100644
--- a/packages/nc-gui-v2/components/tabs/auth/ApiTokenManagement.vue
+++ b/packages/nc-gui-v2/components/tabs/auth/ApiTokenManagement.vue
@@ -100,13 +100,16 @@ onMounted(() => {
           <CloseIcon class="flex mx-auto" />
         </template>
       </a-button>
+      <!-- Generate Token -->
       <div class="flex flex-row justify-center w-full -mt-1">
-        <a-typography-title :level="5">Generate Token</a-typography-title>
+        <a-typography-title :level="5">{{ $t('title.generateToken') }}</a-typography-title>
       </div>
+      <!-- Description -->
       <div class="flex flex-col mt-3 justify-center space-y-6">
-        <a-input v-model:value="selectedTokenData.description" placeholder="Description" />
+        <a-input v-model:value="selectedTokenData.description" :placeholder="$t('labels.description')" />
+        <!-- Generate -->
         <div class="flex flex-row justify-center">
-          <a-button type="primary" @click="generateToken"> Generate </a-button>
+          <a-button type="primary" @click="generateToken"> {{ $t('general.generate') }} </a-button>
         </div>
       </div>
     </div>
@@ -129,10 +132,11 @@ onMounted(() => {
             <div class="text-gray-500">{{ $t('general.reload') }}</div>
           </div>
         </a-button>
+        <!--        Add New Token -->
         <a-button size="middle" type="primary" ghost @click="openNewTokenModal">
           <div class="flex flex-row justify-center items-center caption capitalize space-x-1">
             <MdiPlusIcon />
-            <div>Add New Token</div>
+            <div>{{ $t('activity.newToken') }}</div>
           </div>
         </a-button>
       </div>
@@ -155,8 +159,8 @@ onMounted(() => {
           <div class="flex flex-row w-2/10 justify-end">
             <a-tooltip placement="bottom">
               <template #title>
-                <span v-if="item.show">Hide API token </span>
-                <span v-else>Show API token </span>
+                <span v-if="item.show"> {{ $t('general.hide') }} </span>
+                <span v-else> {{ $t('general.show') }} </span>
               </template>
               <a-button type="text" class="!rounded-md" @click="item.show = !item.show">
                 <template #icon>
@@ -166,7 +170,7 @@ onMounted(() => {
               </a-button>
             </a-tooltip>
             <a-tooltip placement="bottom">
-              <template #title> Copy token to clipboard </template>
+              <template #title> {{ $t('general.copy') }} </template>
               <a-button type="text" class="!rounded-md" @click="copyToken(item.token)">
                 <template #icon>
                   <MdiContentCopyIcon class="flex mx-auto h-[1rem]" />
@@ -187,7 +191,7 @@ onMounted(() => {
                   <a-menu-item>
                     <div class="flex flex-row items-center py-1 h-[1rem]" @click="openDeleteModal(item)">
                       <MdiDeleteOutlineIcon class="flex" />
-                      <div class="text-xs pl-2">Remove API Token</div>
+                      <div class="text-xs pl-2">{{ $t('general.remove') }}</div>
                     </div>
                   </a-menu-item>
                 </a-menu>
diff --git a/packages/nc-gui-v2/components/tabs/auth/UserManagement.vue b/packages/nc-gui-v2/components/tabs/auth/UserManagement.vue
index a8d8760d7e..077595cb46 100644
--- a/packages/nc-gui-v2/components/tabs/auth/UserManagement.vue
+++ b/packages/nc-gui-v2/components/tabs/auth/UserManagement.vue
@@ -178,7 +178,7 @@ watchDebounced(searchText, () => loadUsers(), { debounce: 300, maxWait: 600 })
     </a-modal>
     <div class="flex flex-row mb-4 mx-4 justify-between pb-2">
       <div class="flex w-1/3">
-        <a-input v-model:value="searchText" placeholder="Filter by email">
+        <a-input v-model:value="searchText" :placeholder="$t('placeholder.filterByEmail')">
           <template #prefix>
             <IcRoundSearch class="text-gray-400" />
           </template>
@@ -189,7 +189,7 @@ watchDebounced(searchText, () => loadUsers(), { debounce: 300, maxWait: 600 })
         <a-button size="middle" type="text" @click="loadUsers()">
           <div class="flex flex-row justify-center items-center caption capitalize space-x-1">
             <MdiReload class="text-gray-500" />
-            <div class="text-gray-500">Reload</div>
+            <div class="text-gray-500">{{ $t('general.reload') }}</div>
           </div>
         </a-button>
         <a-button v-if="isUIAllowed('newUser')" size="middle" type="primary" ghost class="nc-invite-team" @click="onInvite">
@@ -238,9 +238,10 @@ watchDebounced(searchText, () => loadUsers(), { debounce: 300, maxWait: 600 })
               </template>
             </a-button>
           </a-tooltip>
+          <!--          Add user to project -->
           <a-tooltip v-if="!user.project_id" placement="bottom">
             <template #title>
-              <span>Add user to the project</span>
+              <span>{{ $t('activity.addUserToProject') }}</span>
             </template>
             <a-button type="text" class="!rounded-md nc-user-invite" @click="inviteUser(user)">
               <template #icon>
@@ -249,9 +250,10 @@ watchDebounced(searchText, () => loadUsers(), { debounce: 300, maxWait: 600 })
             </a-button>
           </a-tooltip>
 
+          <!--          Remove user from the project -->
           <a-tooltip v-else placement="bottom">
             <template #title>
-              <span>Remove user from the project</span>
+              <span>{{ $t('activity.deleteUser') }}</span>
             </template>
             <a-button type="text" class="!rounded-md nc-user-delete" @click="onDelete(user)">
               <template #icon>
@@ -271,9 +273,10 @@ watchDebounced(searchText, () => loadUsers(), { debounce: 300, maxWait: 600 })
             <template #overlay>
               <a-menu>
                 <a-menu-item>
+                  <!--                  Resend invite Email -->
                   <div class="flex flex-row items-center py-1" @click="resendInvite(user)">
                     <MdiEmailArrowRightOutline class="flex h-[1rem] text-gray-500" />
-                    <div class="text-xs pl-2">Resend invite email</div>
+                    <div class="text-xs pl-2">{{ $t('activity.resendInvite') }}</div>
                   </div>
                 </a-menu-item>
                 <a-menu-item>
diff --git a/packages/nc-gui-v2/pages/[projectType]/[projectId]/index.vue b/packages/nc-gui-v2/pages/[projectType]/[projectId]/index.vue
index ee03063e59..6d066f4d20 100644
--- a/packages/nc-gui-v2/pages/[projectType]/[projectId]/index.vue
+++ b/packages/nc-gui-v2/pages/[projectType]/[projectId]/index.vue
@@ -218,7 +218,6 @@ const copyAuthToken = async () => {
                     </div>
                   </template>
                   <template v-if="!isSharedBase">
-
                     <!-- Copy Project Info -->
                     <a-menu-item key="copy">
                       <div class="nc-project-menu-item group" @click.stop="copyProjectInfo">