feat: introducing i18n support to admin dashboard (#3051)

packages/hoppscotch-sh-admin/src/components/users/InviteModal.vue

@@ -2,7 +2,7 @@
   <HoppSmartModal
     v-if="show"
     dialog
-    title="Invite User"
+    :title="t('users.invite_user')"
     @close="$emit('hide-modal')"
   >
     <template #body>
@@ -17,13 +17,13 @@
           autocomplete="off"
           @keyup.enter="sendInvite"
         />
-        <label for="inviteUserEmail">Email Address</label>
+        <label for="inviteUserEmail">{{ t('users.email_address') }}</label>
       </div>
     </template>
     <template #footer>
       <span class="flex space-x-2">
         <HoppButtonPrimary
-          label="Send Invite"
+          :label="t('users.send_invite')"
           :loading="loadingState"
           @click="sendInvite"
         />
@@ -36,6 +36,9 @@
 <script setup lang="ts">
 import { ref } from 'vue';
 import { useToast } from '~/composables/toast';
+import { useI18n } from '~/composables/i18n';
+
+const t = useI18n();
 
 const toast = useToast();
 
@@ -59,7 +62,7 @@ const email = ref('');
 
 const sendInvite = () => {
   if (email.value.trim() === '') {
-    toast.error('Please enter a valid email address');
+    toast.error(`${t('users.valid_email')}`);
     return;
   }
   emit('send-invite', email.value);

packages/hoppscotch-sh-admin/src/components/users/Table.vue

@@ -2,10 +2,10 @@
   <table class="w-full">
     <thead>
       <tr class="text-secondary border-b border-dividerDark text-sm text-left">
-        <th class="px-3 pb-3">User ID</th>
-        <th class="px-3 pb-3">Name</th>
-        <th class="px-3 pb-3">Email</th>
-        <th class="px-3 pb-3">Date</th>
+        <th class="px-3 pb-3">{{ t('users.id') }}</th>
+        <th class="px-3 pb-3">{{ t('users.name') }}</th>
+        <th class="px-3 pb-3">{{ t('users.email') }}</th>
+        <th class="px-3 pb-3">{{ t('users.date') }}</th>
         <th class="px-3 pb-3"></th>
       </tr>
     </thead>
@@ -36,16 +36,16 @@
               v-if="user.isAdmin"
               class="text-xs font-medium px-3 py-0.5 rounded-full bg-green-900 text-green-300"
             >
-              Admin
+              {{ t('users.admin') }}
             </span>
           </div>
           <div v-else class="flex items-center space-x-3">
-            <span> (Unnamed user) </span>
+            <span> {{ t('users.unnamed') }} </span>
             <span
               v-if="user.isAdmin"
               class="text-xs font-medium px-3 py-0.5 rounded-full bg-green-900 text-green-300"
             >
-              Admin
+              {{ t('users.admin') }}
             </span>
           </div>
         </td>
@@ -138,6 +138,9 @@ import IconUserCheck from '~icons/lucide/user-check';
 import IconMoreHorizontal from '~icons/lucide/more-horizontal';
 import { UsersListQuery } from '~/helpers/backend/graphql';
 import { TippyComponent } from 'vue-tippy';
+import { useI18n } from '~/composables/i18n';
+
+const t = useI18n();
 
 defineProps<{
   usersList: UsersListQuery['admin']['allUsers'];