feat: sign in with microsoft

packages/hoppscotch-app/components/firebase/Login.vue

@@ -21,7 +21,13 @@
           @click.native="signInWithGoogle"
         />
         <SmartItem
-          icon="mail"
+          :loading="signingInWithMicrosoft"
+          svg="auth/microsoft"
+          :label="`${$t('auth.continue_with_microsoft')}`"
+          @click.native="signInWithMicrosoft"
+        />
+        <SmartItem
+          svg="auth/email"
           :label="`${$t('auth.continue_with_email')}`"
           @click.native="mode = 'email'"
         />
@@ -117,6 +123,7 @@ import { defineComponent } from "@nuxtjs/composition-api"
 import {
   signInUserWithGoogle,
   signInUserWithGithub,
+  signInUserWithMicrosoft,
   setProviderInfo,
   currentUser$,
   signInWithEmail,
@@ -144,6 +151,7 @@ export default defineComponent({
       },
       signingInWithGoogle: false,
       signingInWithGitHub: false,
+      signingInWithMicrosoft: false,
       signingInWithEmail: false,
       mode: "sign-in",
     }
@@ -234,6 +242,42 @@ export default defineComponent({
 
       this.signingInWithGitHub = false
     },
+    async signInWithMicrosoft() {
+      this.signingInWithMicrosoft = true
+
+      try {
+        await signInUserWithMicrosoft()
+        this.showLoginSuccess()
+      } catch (e) {
+        console.error(e)
+        // An error happened.
+        if (e.code === "auth/account-exists-with-different-credential") {
+          // Step 2.
+          // User's email already exists.
+          // The pending Microsoft credential.
+          const pendingCred = e.credential
+          this.$toast.info(`${this.$t("auth.account_exists")}`, {
+            duration: 0,
+            closeOnSwipe: false,
+            action: {
+              text: `${this.$t("action.yes")}`,
+              onClick: async (_, toastObject) => {
+                const { user } = await signInUserWithGithub()
+                await linkWithFBCredential(user, pendingCred)
+
+                this.showLoginSuccess()
+
+                toastObject.goAway(0)
+              },
+            },
+          })
+        } else {
+          this.$toast.error(`${this.$t("error.something_went_wrong")}`)
+        }
+      }
+
+      this.signingInWithMicrosoft = false
+    },
     async signInWithEmail() {
       this.signingInWithEmail = true
 

packages/hoppscotch-app/components/teams/Team.vue

@@ -28,16 +28,26 @@
           {{ team.name || t("state.nothing_found") }}
         </label>
         <div class="flex mt-2 overflow-hidden -space-x-1">
-          <img
+          <div
             v-for="(member, index) in team.teamMembers"
             :key="`member-${index}`"
             v-tippy="{ theme: 'tooltip' }"
             :title="member.user.displayName"
-            :src="member.user.photoURL || undefined"
-            :alt="member.user.displayName"
-            class="inline-block w-5 h-5 rounded-full ring-primary ring-2"
-            loading="lazy"
-          />
+            class="inline-flex"
+          >
+            <img
+              v-if="member.user.photoURL"
+              :src="member.user.photoURL"
+              :alt="member.user.displayName"
+              class="inline-block w-5 h-5 rounded-full ring-primary ring-2"
+              loading="lazy"
+            />
+            <SmartIcon
+              v-else
+              name="user"
+              class="rounded-lg svg-icons bg-primaryLight ring-primary ring-2"
+            />
+          </div>
         </div>
       </div>
     </div>