refactor(gui): i18n mapping

Signed-off-by: Pranav C <pranavxc@gmail.com>

packages/nc-gui/components/account/License.vue

@@ -1,9 +1,12 @@
 <script lang="ts" setup>
+import { useNuxtApp } from '#app'
 import { message } from 'ant-design-vue'
 import { extractSdkResponseErrorMsg, useApi } from '#imports'
 
 const { api, isLoading } = useApi()
 
+const {$e} = useNuxtApp()
+
 let key = $ref('')
 
 const loadLicense = async () => {
@@ -22,6 +25,7 @@ const setLicense = async () => {
   } catch (e) {
     message.error(await extractSdkResponseErrorMsg(e))
   }
+  $e('a:account:license')
 }
 
 loadLicense()

packages/nc-gui/components/account/SignupSettings.vue

@@ -4,6 +4,8 @@ import { extractSdkResponseErrorMsg, useApi } from '#imports'
 
 const { api } = useApi()
 
+const { t } = useI18n()
+
 let settings = $ref<{ enable_user_signup?: boolean }>({ enable_user_signup: false })
 
 const loadSettings = async () => {
@@ -18,7 +20,7 @@ const loadSettings = async () => {
 const saveSettings = async () => {
   try {
     await api.orgAppSettings.set(settings)
-    message.success('Settings ky updated')
+    message.success(t('msg.success.settingsSaved'))
   } catch (e) {
     message.error(await extractSdkResponseErrorMsg(e))
   }
@@ -31,11 +33,19 @@ loadSettings()
   <div>
     <div class="text-xl">Settings</div>
     <a-divider class="!my-3" />
-    <a-form-item>
-      <a-checkbox v-model:checked="settings.enable_user_signup" class="nc-checkbox" name="virtual" @change="saveSettings">
-        Enable user signup
-      </a-checkbox>
-    </a-form-item>
+    <div class="-ml-6">
+      <a-form-item>
+        <a-checkbox
+          v-model:checked="settings.enable_user_signup"
+          v-e="['c:account:enable-signup']"
+          class="nc-checkbox"
+          name="virtual"
+          @change="saveSettings"
+        >
+          {{ $t('labels.enableSignup') }}
+        </a-checkbox>
+      </a-form-item>
+    </div>
   </div>
 </template>
 

packages/nc-gui/components/account/Token.vue

@@ -51,17 +51,18 @@ loadTokens()
 
 const deleteToken = async (token: string) => {
   Modal.confirm({
-    title: 'Are you sure you want to delete this token?',
+    title: t('msg.info.deleteTokenConfirmation'),
     type: 'warn',
     onOk: async () => {
       try {
         // todo: delete token
         await api.orgTokens.delete(token)
-        message.success('Token deleted successfully')
+        message.success(t('msg.success.tokenDeleted'))
         await loadTokens()
       } catch (e) {
         message.error(await extractSdkResponseErrorMsg(e))
       }
+      $e('a:account:token:delete')
     },
   })
 }
@@ -77,7 +78,6 @@ const generateToken = async () => {
   } catch (e) {
     message.error(await extractSdkResponseErrorMsg(e))
   }
-
   $e('a:api-token:generate')
 }
 

packages/nc-gui/components/account/UserList.vue

@@ -44,7 +44,7 @@ const loadUsers = async (page = currentPage, limit = currentLimit) => {
     pagination.pageSize = 10
 
     users = response.list as UserType[]
-  } catch (e: any) {
+  } catch (e) {
     message.error(await extractSdkResponseErrorMsg(e))
   }
 }
@@ -56,8 +56,10 @@ const updateRole = async (userId: string, roles: Role) => {
     await api.orgUsers.update(userId, {
       roles,
     } as unknown as UserType)
-    message.success('Role updated successfully')
-  } catch (e: any) {
+    message.success(t('msg.success.roleUpdated'))
+
+    $e('a:org-user:role-updated', { role: roles })
+  } catch (e) {
     message.error(await extractSdkResponseErrorMsg(e))
   }
 }
@@ -70,9 +72,10 @@ const deleteUser = async (userId: string) => {
     onOk: async () => {
       try {
         await api.orgUsers.delete(userId)
-        message.success('User deleted successfully')
+        message.success(t('msg.success.userDeleted'))
         await loadUsers()
-      } catch (e: any) {
+        $e('a:org-user:user-deleted')
+      } catch (e) {
         message.error(await extractSdkResponseErrorMsg(e))
       }
     },
@@ -86,7 +89,7 @@ const resendInvite = async (user: User) => {
     // Invite email sent successfully
     message.success(t('msg.success.inviteEmailSent'))
     await loadUsers()
-  } catch (e: any) {
+  } catch (e) {
     message.error(await extractSdkResponseErrorMsg(e))
   }
 
@@ -177,16 +180,16 @@ const copyPasswordResetUrl = async (user: User) => {
               >
                 <a-select-option :value="Role.OrgLevelCreator" :label="$t(`objects.roleType.orgLevelCreator`)">
                   <div>{{ $t(`objects.roleType.orgLevelCreator`) }}</div>
-                  <span class="text-gray-500 text-xs whitespace-normal"
-                    >Creator can create new projects and access any invited project.</span
-                  >
+                  <span class="text-gray-500 text-xs whitespace-normal">
+                    {{ $t('msg.info.roles.orgCreator') }}
+                  </span>
                 </a-select-option>
 
                 <a-select-option :value="Role.OrgLevelViewer" :label="$t(`objects.roleType.orgLevelViewer`)">
                   <div>{{ $t(`objects.roleType.orgLevelViewer`) }}</div>
-                  <span class="text-gray-500 text-xs whitespace-normal"
-                    >Viewer is not allowed to create new projects but they can access any invited project.</span
-                  >
+                  <span class="text-gray-500 text-xs whitespace-normal">
+                    {{ $t('msg.info.roles.orgViewer') }}
+                  </span>
                 </a-select-option>
               </a-select>
             </div>

packages/nc-gui/components/account/UsersModal.vue

@@ -215,16 +215,16 @@ const emailInput = ref((el) => {
                     <a-select v-model:value="usersData.role" class="nc-user-roles" dropdown-class-name="nc-dropdown-user-role">
                       <a-select-option :value="Role.OrgLevelCreator" :label="$t(`objects.roleType.orgLevelCreator`)">
                         <div>{{ $t(`objects.roleType.orgLevelCreator`) }}</div>
-                        <span class="text-gray-500 text-xs whitespace-normal"
-                          >Creator can create new projects and access any invited project.</span
-                        >
+                        <span class="text-gray-500 text-xs whitespace-normal">
+                          {{ $t('msg.info.roles.orgCreator') }}
+                        </span>
                       </a-select-option>
 
                       <a-select-option :value="Role.OrgLevelViewer" :label="$t(`objects.roleType.orgLevelViewer`)">
                         <div>{{ $t(`objects.roleType.orgLevelViewer`) }}</div>
-                        <span class="text-gray-500 text-xs whitespace-normal"
-                          >Viewer is not allowed to create new projects but they can access any invited project.</span
-                        >
+                        <span class="text-gray-500 text-xs whitespace-normal">
+                          {{ $t('msg.info.roles.orgViewer') }}
+                        </span>
                       </a-select-option>
                     </a-select>
                   </a-form-item>

packages/nc-gui/lang/bn_IN.json

@@ -591,6 +591,7 @@
       "tableDeleted": "Deleted table successfully",
       "generatePublicShareableReadonlyBase": "Generate publicly shareable readonly base",
       "deleteViewConfirmation": "Are you sure you want to delete this view?",
+      "deleteTokenConfirmation": "Are you sure you want to delete this token?",
       "deleteTableConfirmation": "Do you want to delete the table",
       "showM2mTables": "Show M2M Tables",
       "deleteKanbanStackConfirmation": "Deleting this stack will also remove the select option `{stackToBeDeleted}` from the `{groupingField}`. The records will move to the uncategorized stack."

packages/nc-gui/lang/en.json

@@ -299,7 +299,8 @@
     "signUpWithGoogle": "Sign up with Google",
     "signInWithGoogle": "Sign in with Google",
     "agreeToTos": "By signing up, you agree to the Terms of Service",
-    "welcomeToNc": "Welcome to NocoDB!"
+    "welcomeToNc": "Welcome to NocoDB!",
+    "enableSignup": "Enable user signup"
   },
   "activity": {
     "createProject": "Create Project",
@@ -485,6 +486,10 @@
   },
   "msg": {
     "info": {
+      "roles": {
+        "orgCreator": "Creator can create new projects and access any invited project.",
+        "orgViewer": "Viewer is not allowed to create new projects but they can access any invited project."
+      },
       "footerInfo": "Rows per page",
       "upload": "Select file to Upload",
       "upload_sub": "or drag and drop file",
@@ -688,6 +693,7 @@
       "tableDataExported": "Successfully exported all table data",
       "updated": "Successfully updated",
       "sharedViewDeleted": "Deleted shared view successfully",
+      "userDeleted": "User deleted successfully",
       "viewRenamed": "View renamed successfully",
       "tokenGenerated": "Token generated successfully",
       "tokenDeleted": "Token deleted successfully",
@@ -705,7 +711,9 @@
       "webhookTested": "Webhook tested successfully",
       "columnUpdated": "Column updated",
       "columnCreated": "Column created",
-      "passwordChanged": "Password changed successfully. Please login again."
+      "passwordChanged": "Password changed successfully. Please login again.",
+      "settingsSaved": "Settings saved successfully",
+      "roleUpdated": "Role updated successfully"
     }
   }
 }

packages/nc-gui/pages/account/index/users.vue

@@ -1,18 +1,3 @@
-<template>
-  <div class="h-full overflow-y-scroll scrollbar-thin-dull pt-4">
-    <a-tabs v-model:active-key="selectedTabKey" :open-keys="[]" mode="horizontal" class="nc-auth-tabs">
-      <a-tab-pane v-for="tab of tabs" :key="tab.key" class="select-none">
-        <template #tab>
-          <span>
-            {{ tab.label }}
-          </span>
-        </template>
-      </a-tab-pane>
-    </a-tabs>
-    <NuxtPage :tab-key="selectedTabKey"/>
-  </div>
-</template>
-
 <script setup lang="ts">
 import { useUIPermission } from '~/composables/useUIPermission'
 
@@ -21,9 +6,9 @@ const { isUIAllowed } = useUIPermission()
 const tabs = [
   ...(isUIAllowed('superAdminUserManagement')
     ? [
-      { label: 'Users', key: 'list' },
-      { label: 'Settings', key: 'settings' },
-    ]
+        { label: 'Users', key: 'list' },
+        { label: 'Settings', key: 'settings' },
+      ]
     : []),
   { label: 'Reset Password', key: 'password-reset' },
 ]
@@ -32,10 +17,25 @@ const $route = useRoute()
 
 const selectedTabKey = computed({
   get() {
-    return tabs.find(t => t.key === $route.params.tabType)?.key ?? tabs[0].key
+    return tabs.find((t) => t.key === $route.params.tabType)?.key ?? tabs[0].key
   },
   set(val) {
     navigateTo(`/account/users/${val}`)
   },
 })
 </script>
+
+<template>
+  <div class="h-full overflow-y-scroll scrollbar-thin-dull pt-4">
+    <a-tabs v-model:active-key="selectedTabKey" :open-keys="[]" mode="horizontal" class="nc-auth-tabs">
+      <a-tab-pane v-for="tab of tabs" :key="tab.key" class="select-none">
+        <template #tab>
+          <span>
+            {{ tab.label }}
+          </span>
+        </template>
+      </a-tab-pane>
+    </a-tabs>
+    <NuxtPage :tab-key="selectedTabKey" />
+  </div>
+</template>

packages/nc-gui/pages/account/index/users/[[tabType]].vue

@@ -1,3 +1,11 @@
+<script setup lang="ts">
+import { defineProps } from '#imports'
+
+const props = defineProps<{
+  tabKey: string
+}>()
+</script>
+
 <template>
   <template v-if="props.tabKey === 'list'">
     <LazyAccountUserList />
@@ -9,10 +17,3 @@
     <LazyAccountResetPassword />
   </template>
 </template>
-<script setup lang="ts">
-import { defineProps } from '#imports'
-
-const props = defineProps<{
-  tabKey: string
-}>()
-</script>