From 71bcd22444ee4bde8b6a2164889216e87084682c Mon Sep 17 00:00:00 2001
From: Andrew Bastin <andrewbastin.k@gmail.com>
Date: Mon, 14 Aug 2023 21:11:25 +0530
Subject: [PATCH] feat: allow platforms to define additional entries in the
 login dialog

---
 .../src/components/firebase/Login.vue          | 18 +++++++++++++++++-
 .../hoppscotch-common/src/platform/auth.ts     | 14 ++++++++++++++
 2 files changed, 31 insertions(+), 1 deletion(-)

diff --git a/packages/hoppscotch-common/src/components/firebase/Login.vue b/packages/hoppscotch-common/src/components/firebase/Login.vue
index 127bf7066..6e95b563c 100644
--- a/packages/hoppscotch-common/src/components/firebase/Login.vue
+++ b/packages/hoppscotch-common/src/components/firebase/Login.vue
@@ -31,6 +31,14 @@
           :label="`${t('auth.continue_with_email')}`"
           @click="mode = 'email'"
         />
+
+        <HoppSmartItem
+          v-for="loginItem in additonalLoginItems"
+          :key="loginItem.id"
+          :icon="loginItem.icon"
+          :label="loginItem.text(t)"
+          @click="doAdditionalLoginItemClickAction(loginItem)"
+        />
       </div>
       <form
         v-if="mode === 'email'"
@@ -114,7 +122,7 @@
 </template>
 
 <script lang="ts">
-import { defineComponent } from "vue"
+import { defineComponent, computed } from "vue"
 import { platform } from "~/platform"
 import IconGithub from "~icons/auth/github"
 import IconGoogle from "~icons/auth/google"
@@ -125,6 +133,7 @@ import { setLocalConfig } from "~/newstore/localpersistence"
 import { useStreamSubscriber } from "@composables/stream"
 import { useToast } from "@composables/toast"
 import { useI18n } from "@composables/i18n"
+import { LoginItemDef } from "~/platform/auth"
 
 export default defineComponent({
   props: {
@@ -140,6 +149,9 @@ export default defineComponent({
     return {
       subscribeToStream,
       t: useI18n(),
+      additonalLoginItems: computed(
+        () => platform.auth.additionalLoginItems ?? []
+      ),
       toast: useToast(),
       IconGithub,
       IconGoogle,
@@ -170,6 +182,10 @@ export default defineComponent({
     })
   },
   methods: {
+    async doAdditionalLoginItemClickAction(item: LoginItemDef) {
+      await item.onClick()
+      this.$emit("hide-modal")
+    },
     showLoginSuccess() {
       this.toast.success(`${this.t("auth.login_success")}`)
     },
diff --git a/packages/hoppscotch-common/src/platform/auth.ts b/packages/hoppscotch-common/src/platform/auth.ts
index 2426d62e6..529f51133 100644
--- a/packages/hoppscotch-common/src/platform/auth.ts
+++ b/packages/hoppscotch-common/src/platform/auth.ts
@@ -1,5 +1,7 @@
 import { ClientOptions } from "@urql/core"
 import { Observable } from "rxjs"
+import { Component } from "vue"
+import { getI18n } from "~/modules/i18n"
 
 /**
  * A common (and required) set of fields that describe a user.
@@ -39,6 +41,13 @@ export type GithubSignInResult =
   | { type: "account-exists-with-different-cred"; link: () => Promise<void> } // We authenticated correctly, but the provider didn't match, so we give the user the opportunity to link to continue completing auth
   | { type: "error"; err: unknown } // Auth failed completely and we don't know why
 
+export type LoginItemDef = {
+  id: string
+  icon: Component
+  text: (t: ReturnType<typeof getI18n>) => string
+  onClick: () => Promise<void> | void
+}
+
 export type AuthPlatformDef = {
   /**
    * Returns an observable that emits the current user as per the auth implementation.
@@ -212,4 +221,9 @@ export type AuthPlatformDef = {
    * @returns An empty promise that is resolved when the operation is complete
    */
   setDisplayName: (name: string) => Promise<void>
+
+  /**
+   * Defines the additional login items that should be shown in the login screen
+   */
+  additionalLoginItems?: LoginItemDef[]
 }