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

packages/hoppscotch-sh-admin/src/components/app/Header.vue

@@ -5,14 +5,18 @@
     <div class="flex items-center">
       <HoppButtonSecondary
         v-tippy="{ theme: 'tooltip' }"
-        title="Open navigation"
+        :title="t('app.open_navigation')"
         :icon="IconMenu"
         class="transform !md:hidden mr-2"
         @click="isOpen = true"
       />
       <HoppButtonSecondary
         v-tippy="{ theme: 'tooltip' }"
-        :title="isExpanded ? 'Collapse sidebar' : 'Expand sidebar'"
+        :title="
+          isExpanded
+            ? `${t('app.collapse_sidebar')}`
+            : `${t('app.expand_sidebar')}`
+        "
         :icon="isExpanded ? IconSidebarClose : IconSidebarOpen"
         class="transform"
         @click="expandSidebar"
@@ -34,13 +38,21 @@
               theme: 'tooltip',
             }"
             :url="currentUser.photoURL"
-            :alt="currentUser.displayName ?? 'No Name'"
-            :title="currentUser.displayName ?? currentUser.email ?? 'No Name'"
+            :alt="currentUser.displayName ?? `${t('app.no_name')}`"
+            :title="
+              currentUser.displayName ??
+              currentUser.email ??
+              `${t('app.no_name')}`
+            "
           />
           <HoppSmartPicture
             v-else
             v-tippy="{ theme: 'tooltip' }"
-            :title="currentUser.displayName ?? currentUser.email ?? 'No Name'"
+            :title="
+              currentUser.displayName ??
+              currentUser.email ??
+              `${t('app.no_name')}`
+            "
             :initial="currentUser.displayName ?? currentUser.email"
           />
           <template #content="{ hide }">
@@ -70,6 +82,9 @@ import { auth } from '~/helpers/auth';
 import IconMenu from '~icons/lucide/menu';
 import IconSidebarOpen from '~icons/lucide/sidebar-open';
 import IconSidebarClose from '~icons/lucide/sidebar-close';
+import { useI18n } from '~/composables/i18n';
+
+const t = useI18n();
 
 const { isOpen, isExpanded } = useSidebar();
 

packages/hoppscotch-sh-admin/src/components/app/Login.vue

@@ -131,6 +131,9 @@ import { setLocalConfig } from '~/helpers/localpersistence';
 import { useStreamSubscriber } from '~/composables/stream';
 import { useToast } from '~/composables/toast';
 import { auth } from '~/helpers/auth';
+import { useI18n } from '~/composables/i18n';
+
+const t = useI18n();
 
 const { subscribeToStream } = useStreamSubscriber();
 
@@ -158,7 +161,7 @@ onMounted(() => {
   subscribeToStream(currentUser$, (user) => {
     if (user && !user.isAdmin) {
       nonAdminUser.value = true;
-      toast.error(`You are logged in. But you're not an admin`);
+      toast.error(`${t('state.non_admin_login')}`);
     }
   });
 });
@@ -174,7 +177,7 @@ async function signInWithGoogle() {
     A auth/account-exists-with-different-credential Firebase error wont happen between Google and any other providers
     Seems Google account overwrites accounts of other providers https://github.com/firebase/firebase-android-sdk/issues/25
     */
-    toast.error(`Failed to sign in with Google`);
+    toast.error(`${t('state.google_signin_failure')}`);
   }
 
   signingInWithGoogle.value = false;
@@ -190,7 +193,7 @@ async function signInWithGithub() {
     A auth/account-exists-with-different-credential Firebase error wont happen between Google and any other providers
     Seems Google account overwrites accounts of other providers https://github.com/firebase/firebase-android-sdk/issues/25
     */
-    toast.error(`Failed to sign in with GitHub`);
+    toast.error(`${t('state.github_signin_failure')}`);
   }
 
   signingInWithGitHub.value = false;
@@ -211,7 +214,7 @@ async function signInWithMicrosoft() {
         @firebase/auth: Auth (9.6.11): INTERNAL ASSERTION FAILED: Pending promise was never set
     They may be related to https://github.com/firebase/firebaseui-web/issues/947
     */
-    toast.error(`Something went wrong`);
+    toast.error(`${t('state.error')}`);
   }
 
   signingInWithMicrosoft.value = false;
@@ -239,10 +242,10 @@ const logout = async () => {
   try {
     await auth.signOutUser();
     window.location.reload();
-    toast.success(`Logged out`);
+    toast.success(`${t('state.logged_out')}`);
   } catch (e) {
     console.error(e);
-    toast.error(`Something went wrong`);
+    toast.error(`${t('state.error')}`);
   }
 };
 </script>

packages/hoppscotch-sh-admin/src/components/app/Logout.vue

@@ -2,14 +2,14 @@
   <div class="flex" @click="openLogoutModal()">
     <HoppSmartItem
       :icon="IconLogOut"
-      :label="'Logout'"
+      :label="t('state.logout')"
       :outline="outline"
       :shortcut="shortcut"
       @click="openLogoutModal()"
     />
     <HoppSmartConfirmModal
       :show="confirmLogout"
-      :title="`Confirm Logout`"
+      :title="t('state.confirm_logout')"
       @hide-modal="confirmLogout = false"
       @resolve="logout"
     />
@@ -22,6 +22,9 @@ import IconLogOut from '~icons/lucide/log-out';
 import { useToast } from '~/composables/toast';
 import { useRouter } from 'vue-router';
 import { auth } from '~/helpers/auth';
+import { useI18n } from '~/composables/i18n';
+
+const t = useI18n();
 
 const router = useRouter();
 
@@ -48,10 +51,10 @@ const logout = async () => {
   try {
     await auth.signOutUser();
     router.push(`/`);
-    toast.success(`Logged out`);
+    toast.success(`${t('state.logged_out')}`);
   } catch (e) {
     console.error(e);
-    toast.error(`Something went wrong`);
+    toast.error(`${t('state.error')}`);
   }
 };
 

packages/hoppscotch-sh-admin/src/components/app/Sidebar.vue

@@ -18,8 +18,10 @@
             <HoppSmartLink class="flex items-center space-x-4" to="/dashboard">
               <img src="/cover.jpg" alt="hoppscotch-logo" class="h-7" />
 
-              <span v-if="isExpanded" class="font-semibold text-accentContrast"
-                >HOPPSCOTCH</span
+              <span
+                v-if="isExpanded"
+                class="font-semibold text-accentContrast"
+                >{{ t('app.name') }}</span
               >
             </HoppSmartLink>
           </div>
@@ -59,28 +61,31 @@
 
 <script setup lang="ts">
 import { HoppSmartLink } from '@hoppscotch/ui';
-import { useSidebar } from '../../composables/useSidebar';
+import { useSidebar } from '~/composables/useSidebar';
 import IconDashboard from '~icons/lucide/layout-dashboard';
 import IconUser from '~icons/lucide/user';
 import IconUsers from '~icons/lucide/users';
+import { useI18n } from '~/composables/i18n';
+
+const t = useI18n();
 
 const { isOpen, isExpanded } = useSidebar();
 
 const primaryNavigations = [
   {
-    label: 'Dashboard',
+    label: t('metrics.dashboard'),
     icon: IconDashboard,
     to: '/dashboard',
     exact: true,
   },
   {
-    label: 'Users',
+    label: t('users.users'),
     icon: IconUser,
     to: '/users',
     exact: false,
   },
   {
-    label: 'Teams',
+    label: t('teams.teams'),
     icon: IconUsers,
     to: '/teams',
     exact: false,