feat: ability to conditionally enable auth providers in dashboard (#3225)

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

@@ -1,43 +1,50 @@
 <template>
   <div v-if="nonAdminUser" class="text-center">
-    Logged in as non admin user. Please
-    <span @click="logout()" class="text-red-500 cursor-pointer underline"
-      >sign out</span
-    >
-    and login with an admin account.
+    {{ t('state.non_admin_logged_in') }}
+    <span @click="logout()" class="text-red-500 cursor-pointer underline">{{
+      t('state.sign_out')
+    }}</span>
+    {{ t('state.login_as_admin') }}
   </div>
   <div v-else class="flex flex-1 flex-col">
     <div
       class="p-6 bg-primaryLight rounded-lg border border-primaryDark shadow"
     >
-      <div v-if="mode === 'sign-in'" class="flex flex-col space-y-2">
+      <div
+        v-if="mode === 'sign-in' && allowedAuthProviders"
+        class="flex flex-col space-y-2"
+      >
         <HoppSmartItem
+          v-if="allowedAuthProviders.includes('GITHUB')"
           :loading="signingInWithGitHub"
           :icon="IconGithub"
-          :label="`Continue with GitHub`"
+          :label="t('state.continue_github')"
           class="!items-center"
           @click="signInWithGithub"
         />
         <HoppSmartItem
+          v-if="allowedAuthProviders.includes('GOOGLE')"
           :loading="signingInWithGoogle"
           :icon="IconGoogle"
-          :label="`Continue with Google`"
+          :label="t('state.continue_google')"
           @click="signInWithGoogle"
         />
         <HoppSmartItem
+          v-if="allowedAuthProviders.includes('MICROSOFT')"
           :loading="signingInWithMicrosoft"
           :icon="IconMicrosoft"
-          :label="`Continue with Microsoft`"
+          :label="t('state.continue_microsoft')"
           @click="signInWithMicrosoft"
         />
         <HoppSmartItem
+          v-if="allowedAuthProviders.includes('EMAIL')"
           :icon="IconEmail"
-          :label="`Continue with Email`"
+          :label="t('state.continue_email')"
           @click="mode = 'email'"
         />
       </div>
       <form
-        v-if="mode === 'email'"
+        v-if="mode === 'email' && allowedAuthProviders"
         class="flex flex-col space-y-4"
         @submit.prevent="signInWithEmail"
       >
@@ -52,18 +59,35 @@
         <HoppButtonPrimary
           :loading="signingInWithEmail"
           type="submit"
-          :label="`Send magic link`"
+          :label="t('state.send_magic_link')"
         />
       </form>
+      <div v-if="!allowedAuthProviders">
+        <p>{{ t('state.require_auth_provider') }}</p>
+        <p>{{ t('state.configure_auth') }}</p>
+        <div class="mt-5">
+          <a
+            href="https://docs.hoppscotch.io/documentation/self-host/getting-started"
+          >
+            <HoppButtonSecondary
+              outline
+              filled
+              blank
+              :icon="IconFileText"
+              :label="t('state.self_host_docs')"
+            />
+          </a>
+        </div>
+      </div>
       <div v-if="mode === 'email-sent'" class="flex flex-col px-4">
         <div class="flex flex-col items-center justify-center max-w-md">
           <icon-lucide-inbox class="w-6 h-6 text-accent" />
           <h3 class="my-2 text-lg text-center">
-            We sent a magic link to {{ form.email }}
+            {{ t('state.magic_link_success') }} {{ form.email }}
           </h3>
           <p class="text-center">
-            We sent a magic link to {{ form.email }}. Click on the link to sign
-            in.
+            {{ t('state.magic_link_success') }} {{ form.email }}.
+            {{ t('state.magic_link_sign_in') }}
           </p>
         </div>
       </div>
@@ -71,27 +95,32 @@
 
     <section class="mt-15">
       <div
-        v-if="mode === 'sign-in' && tosLink && privacyPolicyLink"
+        v-if="
+          mode === 'sign-in' &&
+          tosLink &&
+          privacyPolicyLink &&
+          allowedAuthProviders
+        "
         class="text-secondaryLight text-tiny"
       >
-        By signing in, you are agreeing to our
+        {{ t('state.sign_in_agreement') }}
         <HoppSmartAnchor
           class="link"
           :to="tosLink"
           blank
           label="Terms of Service"
         />
-        and
+        {{ t('state.and') }}
         <HoppSmartAnchor
           class="link"
           :to="privacyPolicyLink"
           blank
-          label="Privacy Policy"
+          :label="t('state.privacy_policy')"
         />
       </div>
       <div v-if="mode === 'email'">
         <HoppButtonSecondary
-          :label="'All sign in option'"
+          :label="t('state.sign_in_options')"
           :icon="IconArrowLeft"
           class="!p-0"
           @click="mode = 'sign-in'"
@@ -103,7 +132,7 @@
       >
         <HoppSmartAnchor
           class="link"
-          :label="'Re enter email'"
+          :label="t('state.reenter_email')"
           :icon="IconArrowLeft"
           @click="mode = 'email'"
         />
@@ -119,20 +148,22 @@ import IconGoogle from '~icons/auth/google';
 import IconEmail from '~icons/auth/email';
 import IconMicrosoft from '~icons/auth/microsoft';
 import IconArrowLeft from '~icons/lucide/arrow-left';
+import IconFileText from '~icons/lucide/file-text';
 import { setLocalConfig } from '~/helpers/localpersistence';
 import { useStreamSubscriber } from '~/composables/stream';
 import { useToast } from '~/composables/toast';
 import { auth } from '~/helpers/auth';
+import { HoppButtonPrimary, HoppButtonSecondary } from '@hoppscotch/ui';
 import { useI18n } from '~/composables/i18n';
 
-const t = useI18n();
-
 const { subscribeToStream } = useStreamSubscriber();
 
+const t = useI18n();
 const toast = useToast();
 
 const tosLink = import.meta.env.VITE_APP_TOS_LINK;
 const privacyPolicyLink = import.meta.env.VITE_APP_PRIVACY_POLICY_LINK;
+const allowedAuthProviders = import.meta.env.VITE_ALLOWED_AUTH_PROVIDERS;
 
 // DATA