feat: introducing server configurations in admin dashboard (#3628)

Co-authored-by: jamesgeorge007 <jamesgeorge998001@gmail.com>

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

@@ -6,6 +6,15 @@
     }}</span>
     {{ t('state.login_as_admin') }}
   </div>
+
+  <div v-else-if="fetching" class="flex justify-center py-6">
+    <HoppSmartSpinner />
+  </div>
+
+  <div v-else-if="error">
+    <p class="text-xl">{{ t('state.error') }}</p>
+  </div>
+
   <div v-else class="flex flex-1 flex-col">
     <div
       class="p-6 bg-primaryLight rounded-lg border border-primaryDark shadow"
@@ -143,50 +152,39 @@
 
 <script setup lang="ts">
 import { onMounted, ref } from 'vue';
+import { useI18n } from '~/composables/i18n';
+import { useToast } from '~/composables/toast';
+import { auth } from '~/helpers/auth';
+import { setLocalConfig } from '~/helpers/localpersistence';
+import IconEmail from '~icons/auth/email';
 import IconGithub from '~icons/auth/github';
 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 { 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
 
 const form = ref({
   email: '',
 });
+const fetching = ref(false);
+const error = ref(false);
 const signingInWithGoogle = ref(false);
 const signingInWithGitHub = ref(false);
 const signingInWithMicrosoft = ref(false);
 const signingInWithEmail = ref(false);
 const mode = ref('sign-in');
-
 const nonAdminUser = ref(false);
 
-onMounted(() => {
-  const currentUser$ = auth.getCurrentUserStream();
+const allowedAuthProviders = ref<string[]>([]);
 
-  subscribeToStream(currentUser$, (user) => {
-    if (user && !user.isAdmin) {
-      nonAdminUser.value = true;
-      toast.error(t('state.non_admin_login'));
-    }
-  });
+onMounted(async () => {
+  allowedAuthProviders.value = await getAllowedAuthProviders();
 });
 
 const signInWithGoogle = () => {
@@ -241,6 +239,19 @@ const signInWithEmail = async () => {
   signingInWithEmail.value = false;
 };
 
+const getAllowedAuthProviders = async () => {
+  fetching.value = true;
+  try {
+    const res = await auth.getAllowedAuthProviders();
+    return res;
+  } catch (e) {
+    error.value = true;
+    toast.error(t('state.error_auth_providers'));
+  } finally {
+    fetching.value = false;
+  }
+};
+
 const logout = async () => {
   try {
     await auth.signOutUser();

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

@@ -65,6 +65,7 @@ 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 IconSettings from '~icons/lucide/settings';
 import { useI18n } from '~/composables/i18n';
 
 const t = useI18n();
@@ -90,6 +91,12 @@ const primaryNavigations = [
     to: '/teams',
     exact: false,
   },
+  {
+    label: t('settings.settings'),
+    icon: IconSettings,
+    to: '/settings',
+    exact: true,
+  },
 ];
 </script>