fix: i18n for Profile page, token page and main accounts page

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

@@ -61,10 +61,10 @@ const onValidate = async (_: any, valid: boolean) => {
 <template>
   <div class="flex flex-col items-center">
     <div class="flex flex-col w-150">
-      <div class="flex font-medium text-xl">Profile</div>
+      <div class="flex font-medium text-xl">{{ $t('labels.profile') }}</div>
       <div class="mt-5 flex flex-col border-1 rounded-2xl border-gray-200 p-6 gap-y-2">
-        <div class="flex font-medium text-base">Account details</div>
-        <div class="flex text-gray-500">Control your appearance.</div>
+        <div class="flex font-medium text-base">{{ $t('labels.accountDetails') }}</div>
+        <div class="flex text-gray-500">{{ $t('labels.controlAppearance') }}</div>
         <div class="flex flex-row mt-4">
           <div class="flex h-20 mt-1.5">
             <GeneralUserIcon size="xlarge" />
@@ -79,20 +79,20 @@ const onValidate = async (_: any, valid: boolean) => {
             @finish="onSubmit"
             @validate="onValidate"
           >
-            <div class="text-gray-800 mb-1.5">Name</div>
+            <div class="text-gray-800 mb-1.5">{{ $t('general.name') }}</div>
             <a-form-item name="title" :rules="formRules.title">
               <a-input
                 v-model:value="form.title"
                 class="w-full !rounded-md !py-1.5"
-                placeholder="Name"
+                :placeholder="$t('general.name')"
                 data-testid="nc-account-settings-rename-input"
               />
             </a-form-item>
-            <div class="text-gray-800 mb-1.5">Account Email ID</div>
+            <div class="text-gray-800 mb-1.5">{{ $t('labels.accountEmailID') }}</div>
             <a-input
               v-model:value="email"
               class="w-full !rounded-md !py-1.5"
-              placeholder="Email"
+              :placeholder="$t('general.email')"
               disabled
               data-testid="nc-account-settings-email-input"
             />
@@ -105,8 +105,8 @@ const onValidate = async (_: any, valid: boolean) => {
                 data-testid="nc-account-settings-save"
                 @click="onSubmit"
               >
-                <template #loading> Saving </template>
-                Save
+                <template #loading> {{ $t('general.saving') }} </template>
+                {{ $t('general.save') }}
               </NcButton>
             </div>
           </a-form>

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

@@ -29,7 +29,7 @@ const showNewTokenModal = ref(false)
 
 const currentLimit = ref(10)
 
-const defaultTokenName = 'Untitled token'
+const defaultTokenName = t('labels.untitledToken')
 
 const selectedTokenData = ref<ApiTokenType>({
   description: defaultTokenName,
@@ -147,9 +147,9 @@ const selectInputOnMount: VNodeRef = (el) =>
 const errorMessage = computed(() => {
   const tokenLength = selectedTokenData.value.description?.length
   if (!tokenLength) {
-    return 'Token name should not be empty'
+    return t('msg.info.tokenNameNotEmpty')
   } else if (tokenLength > 255) {
-    return 'Token name should not be more than 255 characters'
+    return t('msg.info.tokenNameMaxLength')
   }
 })
 
@@ -163,7 +163,7 @@ const handleCancel = () => {
   <div class="h-full overflow-y-scroll scrollbar-thin-dull pt-2">
     <div class="max-w-[810px] mx-auto p-4" data-testid="nc-token-list">
       <div class="py-2 flex gap-4 items-center justify-between">
-        <h6 class="text-2xl my-4 text-left font-bold">API Tokens</h6>
+        <h6 class="text-2xl my-4 text-left font-bold">{{ $t('title.apiTokens') }}</h6>
         <NcButton
           :disabled="showNewTokenModal"
           class="!rounded-md"
@@ -180,14 +180,14 @@ const handleCancel = () => {
           </span>
         </NcButton>
       </div>
-      <span>Create personal API tokens to use in automation or external apps.</span>
+      <span>{{ $t('msg.apiTokenCreate') }}</span>
       <div class="w-[780px] mt-5 border-1 rounded-md h-[530px] overflow-y-scroll">
         <div>
           <div class="flex w-full pl-5 bg-gray-50 border-b-1">
-            <span class="py-3.5 text-gray-500 font-medium text-3.5 w-2/9">Token name</span>
-            <span class="py-3.5 text-gray-500 font-medium text-3.5 w-2/9 text-start">Creator</span>
-            <span class="py-3.5 text-gray-500 font-medium text-3.5 w-3/9 text-start">Token</span>
-            <span class="py-3.5 pl-19 text-gray-500 font-medium text-3.5 w-2/9 text-start">Actions</span>
+            <span class="py-3.5 text-gray-500 font-medium text-3.5 w-2/9">{{ $t('title.tokenName') }}</span>
+            <span class="py-3.5 text-gray-500 font-medium text-3.5 w-2/9 text-start">{{ $t('title.creator') }}</span>
+            <span class="py-3.5 text-gray-500 font-medium text-3.5 w-3/9 text-start">{{ $t('labels.token') }}</span>
+            <span class="py-3.5 pl-19 text-gray-500 font-medium text-3.5 w-2/9 text-start">{{ $t('labels.actions') }}</span>
           </div>
           <main>
             <div v-if="showNewTokenModal">
@@ -223,7 +223,7 @@ const handleCancel = () => {
               <NcDivider />
             </div>
             <div v-if="!tokens.length" class="h-118 justify-center flex items-center">
-              <a-empty :image="Empty.PRESENTED_IMAGE_SIMPLE" :description="`${$t('general.no')} ${$t('labels.token')}`" />
+              <a-empty :image="Empty.PRESENTED_IMAGE_SIMPLE" :description="$t('title.noLabels')" />
             </div>
 
             <div v-for="el of tokens" :key="el.id" data-testid="nc-token-list" class="flex border-b-1 pl-5 py-3 justify-between">
@@ -247,7 +247,7 @@ const handleCancel = () => {
               <span class="text-gray-500 font-medium text-3.5 w-2/9">
                 <div class="flex justify-end items-center gap-3 pr-5">
                   <NcTooltip placement="top">
-                    <template #title>show or hide</template>
+                    <template #title>{{ $t('labels.showOrHide') }}</template>
                     <component
                       :is="iconMap.eye"
                       class="nc-toggle-token-visibility hover::cursor-pointer"
@@ -255,11 +255,11 @@ const handleCancel = () => {
                     />
                   </NcTooltip>
                   <NcTooltip placement="top" class="h-4">
-                    <template #title>copy</template>
+                    <template #title>{{ $t('general.copy') }}</template>
                     <component :is="iconMap.copy" class="hover::cursor-pointer" @click="copyToken(el.token)" />
                   </NcTooltip>
                   <NcTooltip placement="top" class="mb-0.5">
-                    <template #title>delete</template>
+                    <template #title>{{ $t('general.delete') }}</template>
                     <component
                       :is="iconMap.delete"
                       data-testid="nc-token-row-action-icon"
@@ -283,7 +283,11 @@ const handleCancel = () => {
       </div>
     </div>
 
-    <GeneralDeleteModal v-model:visible="isModalOpen" entity-name="Token" :on-delete="() => deleteToken(tokenToCopy)">
+    <GeneralDeleteModal
+      v-model:visible="isModalOpen"
+      :entity-name="$t('labels.token')"
+      :on-delete="() => deleteToken(tokenToCopy)"
+    >
       <template #entity-preview>
         <span>
           <div class="flex flex-row items-center py-2.25 px-2.5 bg-gray-50 rounded-lg text-gray-700 mb-4">

packages/nc-gui/lang/en.json

@@ -247,6 +247,8 @@
     "isNotNull": "is not null"
   },
   "title": {
+    "tokenName": "Token name",
+    "creator": "Creator",
     "updateSelectedRows": "Update Selected Rows",
     "noFiltersAdded": "No filters added",
     "editCards": "Edit Cards",
@@ -272,6 +274,7 @@
     "teamAndAuth": "Team & Auth",
     "rolesUserMgmt": "Roles & Users Management",
     "userMgmt": "Users Management",
+    "apiTokens": "API Tokens",
     "apiTokenMgmt": "API Tokens Management",
     "rolesMgmt": "Roles Management",
     "projMeta": "Project Metadata",
@@ -294,6 +297,7 @@
     "generateToken": "Generate Token",
     "APIsAndSupport": "APIs & Support",
     "helpCenter": "Help Center",
+    "noLabels": "No Labels",
     "swaggerDocumentation": "Swagger Documentation",
     "quickImportFrom": "Quick Import From",
     "quickImport": "Quick Import",
@@ -316,7 +320,8 @@
     "userManagement": "User Management",
     "licence": "Licence",
     "defaultView": "Default View",
-    "relations": "Relations"
+    "relations": "Relations",
+    "switchLanguage": "Switch Language"
   },
   "labels": {
     "searchProjects": "Search Projects",
@@ -325,6 +330,11 @@
     "notifyVia": "Notify Via",
     "projName": "Project name",
     "profile": "Profile",
+    "accountDetails": "Account Details",
+    "controlAppearance": "Control your Appearance.",
+    "accountEmailID": "Account Email ID",
+    "backToWorkspace": "Back to Workspace",
+    "untitledToken": "Untitled token",
     "tableName": "Table name",
     "dashboardName": "Dashboard name",
     "noViews": "No views",
@@ -364,6 +374,7 @@
     "where": "Where",
     "cache": "Cache",
     "chat": "Chat",
+    "showOrHide": "Show or Hide",
     "airtable": "Airtable",
     "csvFile": "CSV File",
     "jsonFile": "JSON File",
@@ -695,6 +706,7 @@
     "selectField": "Select field"
   },
   "msg": {
+    "apiTokenCreate": "Create personal API tokens to use in automation or external apps.",
     "selectFieldToSort": "Select Field to Sort",
     "createWebhookMsg1": "Get started with web-hooks!",
     "createWebhookMsg2": "Create web-hooks to power you automations,",
@@ -856,7 +868,9 @@
       "deleteKanbanStackConfirmation": "Deleting this stack will also remove the select option `{stackToBeDeleted}` from the `{groupingField}`. The records will move to the uncategorized stack.",
       "computedFieldEditWarning": "Computed field: contents are read-only. Use column edit menu to reconfigure",
       "computedFieldDeleteWarning": "Computed field: contents are read-only. Unable to clear content.",
-      "noMoreRecords": "No more records"
+      "noMoreRecords": "No more records",
+      "tokenNameNotEmpty": "Token name should not be empty",
+      "tokenNameMaxLength": "Token name should not be more than 255 characters"
     },
     "error": {
       "viewNameRequired": "View name is required",

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

@@ -50,7 +50,7 @@ const logout = async () => {
             >
               <div class="flex flex-row gap-x-2 items-center h-8.5">
                 <GeneralIcon icon="arrowLeft" class="-mt-0.1" />
-                <div class="flex text-xs text-gray-800">Back to Workspace</div>
+                <div class="flex text-xs text-gray-800">{{ $t('labels.backToWorkspace') }}</div>
               </div>
             </div>
 
@@ -151,7 +151,7 @@ const logout = async () => {
             <LazyGeneralReleaseInfo />
 
             <a-tooltip v-if="!appInfo.ee" placement="bottom" :mouse-enter-delay="1">
-              <template #title> Switch language</template>
+              <template #title>{{ $t('title.switchLanguage') }}</template>
 
               <div class="flex pr-4 items-center">
                 <LazyGeneralLanguage class="cursor-pointer text-2xl hover:text-gray-800" />