fix: SH admin dashboard setting and onboarding page cleanups (hoppscotch#5290)

Co-authored-by: jamesgeorge007 <[email protected]>

Author: nivedin

packages/hoppscotch-common/src/components/firebase/Login.vue

@@ -27,7 +27,11 @@
             @click="provider.action"
           />
 
-          <hr v-if="additionalLoginItems.length > 0" />
+          <hr
+            v-if="
+              additionalLoginItems.length > 0 && allowedAuthProviders.length
+            "
+          />
 
           <HoppSmartItem
             v-for="loginItem in additionalLoginItems"
@@ -58,7 +62,7 @@
         </form>
 
         <div
-          v-if="!allowedAuthProviders?.length"
+          v-if="!allowedAuthProviders?.length && !additionalLoginItems.length"
           class="flex flex-col items-center text-center"
         >
           <p>{{ t("state.require_auth_provider") }}</p>

packages/hoppscotch-sh-admin/locales/en.json

@@ -176,7 +176,8 @@
   },
   "onboarding": {
     "add_atleast_one_auth_provider": "Please add at least one authentication provider to continue.",
-    "add_configurations": "Please add the configurations for the selected authentication methods.",
+    "add_configurations": "Add Configurations",
+    "add_configurations_description": "Please add the configurations for the selected authentication methods.",
     "add_oauth_config": "Add Auth Configurations",
     "auth_setup": "Authentication Setup",
     "auth_successfully_configured": "authentication has been successfully configured.",
@@ -214,7 +215,8 @@
       "title": "SMTP"
     },
     "smtp_advanced_config_enable": "Enable to configure your own SMTP credentials",
-    "select_auth_provider": "Please select the authentication methods you want to set up.",
+    "select_auth_methods": "Please select authentications",
+    "select_auth_provider": "You can select one or more authentication providers to continue.",
     "select_atleast_one": "Please select at least one authentication provider to continue.",
     "start_onboarding": "Start Onboarding",
     "welcome": "Welcome",

packages/hoppscotch-sh-admin/src/components/onboarding/AuthProviderCard.vue

@@ -0,0 +1,46 @@
+<template>
+  <div
+    class="flex flex-col justify-between space-y-2 p-5 w-56 h-46 cursor-pointer border-2 rounded-lg shadow transition bg-primaryLight border-primaryDark hover:border-accent"
+    :class="{
+      '!bg-primary !border-accentDark': selected,
+    }"
+    @click="$emit('click')"
+  >
+    <div class="flex flex-col space-y-2">
+      <div class="flex items-center justify-between">
+        <span class="text-[0.9rem] text-secondaryDark">
+          {{ t(title) }}
+        </span>
+        <icon-lucide-check
+          v-if="selected"
+          class="svg-icons h-4 w-4 text-accent"
+        />
+      </div>
+
+      <span class="text-secondaryLight w-32">
+        {{ t(description) }}
+      </span>
+    </div>
+
+    <div>
+      <div class="flex items-center -space-x-2">
+        <slot />
+      </div>
+    </div>
+  </div>
+</template>
+
+<script lang="ts" setup>
+import IconLucideCheck from '~icons/lucide/check';
+import { useI18n } from '~/composables/i18n';
+
+defineProps<{
+  title: string;
+  description: string;
+  selected: boolean;
+}>();
+
+const emit = defineEmits(['click']);
+
+const t = useI18n();
+</script>