From 24964497e0e33c418ef9f9210721c46db556d036 Mon Sep 17 00:00:00 2001
From: Sandeep Ramgolam <sandeep@ramgolam.com>
Date: Fri, 16 Aug 2024 20:44:27 +0400
Subject: [PATCH 01/19] enable github button

---
 .../frontendmu-nuxt/auth-utils/useAuth.ts     | 16 ++++-
 .../components/auth/LoginForm.vue             | 66 ++++++-------------
 2 files changed, 33 insertions(+), 49 deletions(-)

diff --git a/packages/frontendmu-nuxt/auth-utils/useAuth.ts b/packages/frontendmu-nuxt/auth-utils/useAuth.ts
index 2f23313f..78d8744b 100644
--- a/packages/frontendmu-nuxt/auth-utils/useAuth.ts
+++ b/packages/frontendmu-nuxt/auth-utils/useAuth.ts
@@ -220,9 +220,19 @@ export default function useAuth(client: DirectusClient<any> & AuthenticationClie
     return false
   })
 
-  function oAuthLogin() {
-    const currentPage = new URL(window.location.origin)
-    return `${DIRECTUS_URL()}/auth/login/google?redirect=${currentPage}redirect`
+  function oAuthLogin(provider: string) {
+    if (provider === 'google') {
+      const currentPage = new URL(window.location.origin)
+      return `${DIRECTUS_URL()}/auth/login/google?redirect=${currentPage}redirect`
+    }
+    else if (provider === 'github') {
+      const currentPage = new URL(window.location.origin)
+      return `${DIRECTUS_URL()}/auth/login/github?redirect=${currentPage}redirect`
+    }
+
+    console.log('Provider not found')
+
+    return false
   }
 
   async function updateUserProfile({ profile_updates }: { profile_updates: DirectusAstroUser }) {
diff --git a/packages/frontendmu-nuxt/components/auth/LoginForm.vue b/packages/frontendmu-nuxt/components/auth/LoginForm.vue
index 8ea3c0d9..edc9a7be 100644
--- a/packages/frontendmu-nuxt/components/auth/LoginForm.vue
+++ b/packages/frontendmu-nuxt/components/auth/LoginForm.vue
@@ -28,7 +28,8 @@ const developmentEnvironment = process.env.NODE_ENV === 'development'
     </h2>
   </div>
   <div class="mt-10 sm:mx-auto sm:w-full sm:max-w-[480px] flex justify-center">
-    <div class="bg-verse-200/10 overflow-hidden dark:bg-verse-500/20 backdrop-blur-sm px-6 py-12 shadow-2xl rounded-lg sm:px-12 w-11/12">
+    <div
+      class="bg-verse-200/10 overflow-hidden dark:bg-verse-500/20 backdrop-blur-sm px-6 py-12 shadow-2xl rounded-lg sm:px-12 w-11/12">
       <div v-if="isLoggedIn">
         <div class="text-center flex flex-col gap-8 text-verse-900 dark:text-verse-100 w-full">
           <span>
@@ -52,41 +53,24 @@ const developmentEnvironment = process.env.NODE_ENV === 'development'
       <div v-else>
         <form v-if="developmentEnvironment" class="space-y-6" @submit.prevent="login()">
           <div>
-            <label
-              for="email"
-              class="block text-sm font-medium leading-6 text-verse-900 dark:text-verse-100"
-            >
+            <label for="email" class="block text-sm font-medium leading-6 text-verse-900 dark:text-verse-100">
               Email address
             </label>
             <div class="mt-2">
-              <input
-                id="email"
-                v-model="email"
-                name="email"
-                type="email"
-                autocomplete="email"
+              <input id="email" v-model="email" name="email" type="email" autocomplete="email"
                 class="block w-full rounded-md border-0 p-1.5 text-verse-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-verse-600 sm:text-sm sm:leading-6"
-                required
-              >
+                required>
             </div>
           </div>
 
           <div>
-            <label
-              for="password"
-              class="block text-sm font-medium leading-6 text-verse-900 dark:text-verse-100"
-            >
+            <label for="password" class="block text-sm font-medium leading-6 text-verse-900 dark:text-verse-100">
               Password
             </label>
             <div class="mt-2">
-              <input
-                id="password"
-                v-model="password"
-                name="password"
-                type="password"
-                autocomplete="current-password" required
-                class="block w-full rounded-md border-0 p-1.5 text-verse-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-verse-600 sm:text-sm sm:leading-6"
-              >
+              <input id="password" v-model="password" name="password" type="password" autocomplete="current-password"
+                required
+                class="block w-full rounded-md border-0 p-1.5 text-verse-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-verse-600 sm:text-sm sm:leading-6">
             </div>
           </div>
 
@@ -103,10 +87,8 @@ const developmentEnvironment = process.env.NODE_ENV === 'development'
                     </div> -->
 
           <div>
-            <button
-              type="submit"
-              class="flex w-full justify-center rounded-md bg-verse-600 px-3 py-1.5 text-sm font-semibold leading-6 text-white shadow-sm hover:bg-verse-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-verse-600"
-            >
+            <button type="submit"
+              class="flex w-full justify-center rounded-md bg-verse-600 px-3 py-1.5 text-sm font-semibold leading-6 text-white shadow-sm hover:bg-verse-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-verse-600">
               Sign in
             </button>
           </div>
@@ -124,25 +106,19 @@ const developmentEnvironment = process.env.NODE_ENV === 'development'
           </div>
 
           <div class="mt-10 grid sm:grid-cols-2 gap-4">
-            <a
-              :href="oAuthLogin()"
-              class="flex w-full items-center justify-center gap-3 rounded-md bg-[#000000] hover:bg-black/50 transition-all duration-300 px-3 py-1.5 text-white focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[#1D9BF0]"
-            >
+            <a :href="oAuthLogin('google')"
+              class="flex w-full items-center justify-center gap-3 rounded-md bg-[#000000] hover:bg-black/50 transition-all duration-300 px-3 py-1.5 text-white focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[#1D9BF0]">
               <Icon name="logos:google-icon" class="h-5 w-5" />
               <span class="text-sm font-semibold leading-6">Google</span>
             </a>
 
-            <a
-              href="#"
-              class="opacity-60 cursor-not-allowed flex w-full items-center justify-center gap-3 rounded-md bg-[#24292F] px-3 py-1.5 text-white focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[#24292F]"
-              disabled
-            >
+            <a href="#"
+              class="flex w-full items-center justify-center gap-3 rounded-md bg-[#000000]  hover:bg-black/50  px-3 py-1.5 text-white focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[#24292F]"
+              disabled>
               <svg class="h-5 w-5" aria-hidden="true" fill="currentColor" viewBox="0 0 20 20">
-                <path
-                  fill-rule="evenodd"
+                <path fill-rule="evenodd"
                   d="M10 0C4.477 0 0 4.484 0 10.017c0 4.425 2.865 8.18 6.839 9.504.5.092.682-.217.682-.483 0-.237-.008-.868-.013-1.703-2.782.605-3.369-1.343-3.369-1.343-.454-1.158-1.11-1.466-1.11-1.466-.908-.62.069-.608.069-.608 1.003.07 1.531 1.032 1.531 1.032.892 1.53 2.341 1.088 2.91.832.092-.647.35-1.088.636-1.338-2.22-.253-4.555-1.113-4.555-4.951 0-1.093.39-1.988 1.029-2.688-.103-.253-.446-1.272.098-2.65 0 0 .84-.27 2.75 1.026A9.564 9.564 0 0110 4.844c.85.004 1.705.115 2.504.337 1.909-1.296 2.747-1.027 2.747-1.027.546 1.379.203 2.398.1 2.651.64.7 1.028 1.595 1.028 2.688 0 3.848-2.339 4.695-4.566 4.942.359.31.678.921.678 1.856 0 1.338-.012 2.419-.012 2.747 0 .268.18.58.688.482A10.019 10.019 0 0020 10.017C20 4.484 15.522 0 10 0z"
-                  clip-rule="evenodd"
-                />
+                  clip-rule="evenodd" />
               </svg>
               <span class="text-sm font-semibold leading-6">GitHub</span>
             </a>
@@ -150,10 +126,8 @@ const developmentEnvironment = process.env.NODE_ENV === 'development'
         </div>
       </div>
 
-      <div
-        class="absolute bottom-0 left-0 bg-zinc-500/20 dark:bg-verse-500/20 backdrop-blur-2xl  right-0 z-10 h-0"
-        :style="{ height: countDownPercentage }"
-      />
+      <div class="absolute bottom-0 left-0 bg-zinc-500/20 dark:bg-verse-500/20 backdrop-blur-2xl  right-0 z-10 h-0"
+        :style="{ height: countDownPercentage }" />
     </div>
   </div>
 </template>

From a22fdbff54785c88ac4b4a401cdbcdf26a2fdcd0 Mon Sep 17 00:00:00 2001
From: Sandeep Ramgolam <sandeep@ramgolam.com>
Date: Fri, 16 Aug 2024 20:52:00 +0400
Subject: [PATCH 02/19] add github auth function

---
 packages/frontendmu-nuxt/components/auth/LoginForm.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/frontendmu-nuxt/components/auth/LoginForm.vue b/packages/frontendmu-nuxt/components/auth/LoginForm.vue
index edc9a7be..25f2bd14 100644
--- a/packages/frontendmu-nuxt/components/auth/LoginForm.vue
+++ b/packages/frontendmu-nuxt/components/auth/LoginForm.vue
@@ -112,7 +112,7 @@ const developmentEnvironment = process.env.NODE_ENV === 'development'
               <span class="text-sm font-semibold leading-6">Google</span>
             </a>
 
-            <a href="#"
+            <a :href="oAuthLogin('github')"
               class="flex w-full items-center justify-center gap-3 rounded-md bg-[#000000]  hover:bg-black/50  px-3 py-1.5 text-white focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[#24292F]"
               disabled>
               <svg class="h-5 w-5" aria-hidden="true" fill="currentColor" viewBox="0 0 20 20">

From 7fdee0508f1552226e4eff3ef2b2da8cd28d63e1 Mon Sep 17 00:00:00 2001
From: Sandeep Ramgolam <sandeep@ramgolam.com>
Date: Fri, 16 Aug 2024 21:57:32 +0400
Subject: [PATCH 03/19] chore: Update redirect URL for GitHub authentication

---
 packages/frontendmu-nuxt/auth-utils/useAuth.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/frontendmu-nuxt/auth-utils/useAuth.ts b/packages/frontendmu-nuxt/auth-utils/useAuth.ts
index 78d8744b..b27f0b97 100644
--- a/packages/frontendmu-nuxt/auth-utils/useAuth.ts
+++ b/packages/frontendmu-nuxt/auth-utils/useAuth.ts
@@ -227,7 +227,7 @@ export default function useAuth(client: DirectusClient<any> & AuthenticationClie
     }
     else if (provider === 'github') {
       const currentPage = new URL(window.location.origin)
-      return `${DIRECTUS_URL()}/auth/login/github?redirect=${currentPage}redirect`
+      return `${DIRECTUS_URL()}/auth/login/github?redirect_uri=${currentPage}redirect`
     }
 
     console.log('Provider not found')

From d421b4a6bdece100d19da906b5c58beae3af867b Mon Sep 17 00:00:00 2001
From: Sandeep Ramgolam <sandeep@ramgolam.com>
Date: Fri, 16 Aug 2024 22:48:14 +0400
Subject: [PATCH 04/19] add discord

---
 packages/frontendmu-nuxt/auth-utils/useAuth.ts         | 6 +++++-
 packages/frontendmu-nuxt/components/auth/LoginForm.vue | 7 +++++++
 2 files changed, 12 insertions(+), 1 deletion(-)

diff --git a/packages/frontendmu-nuxt/auth-utils/useAuth.ts b/packages/frontendmu-nuxt/auth-utils/useAuth.ts
index b27f0b97..f13eba10 100644
--- a/packages/frontendmu-nuxt/auth-utils/useAuth.ts
+++ b/packages/frontendmu-nuxt/auth-utils/useAuth.ts
@@ -227,7 +227,11 @@ export default function useAuth(client: DirectusClient<any> & AuthenticationClie
     }
     else if (provider === 'github') {
       const currentPage = new URL(window.location.origin)
-      return `${DIRECTUS_URL()}/auth/login/github?redirect_uri=${currentPage}redirect`
+      return `${DIRECTUS_URL()}/auth/login/github?redirect=${currentPage}redirect`
+    }
+    else if (provider === 'discord') {
+      const currentPage = new URL(window.location.origin)
+      return `${DIRECTUS_URL()}/auth/login/discord?redirect=${currentPage}redirect`
     }
 
     console.log('Provider not found')
diff --git a/packages/frontendmu-nuxt/components/auth/LoginForm.vue b/packages/frontendmu-nuxt/components/auth/LoginForm.vue
index 25f2bd14..f4788779 100644
--- a/packages/frontendmu-nuxt/components/auth/LoginForm.vue
+++ b/packages/frontendmu-nuxt/components/auth/LoginForm.vue
@@ -122,6 +122,13 @@ const developmentEnvironment = process.env.NODE_ENV === 'development'
               </svg>
               <span class="text-sm font-semibold leading-6">GitHub</span>
             </a>
+
+            <a :href="oAuthLogin('discord')"
+              class="flex w-full items-center justify-center gap-3 rounded-md bg-[#000000]  hover:bg-black/50  px-3 py-1.5 text-white focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[#24292F]"
+              disabled>
+              <Icon name="logos:discord-icon" class="h-5 w-5" />
+              <span class="text-sm font-semibold leading-6">Discord</span>
+            </a>
           </div>
         </div>
       </div>

From 066a1d04b28f83f18d6db8ceaedbd08366088ab2 Mon Sep 17 00:00:00 2001
From: Sandeep Ramgolam <sandeep@ramgolam.com>
Date: Mon, 2 Sep 2024 21:04:17 +0400
Subject: [PATCH 05/19] deploy mode cookie

---
 packages/frontendmu-nuxt/auth-utils/useAuth.ts | 1 +
 1 file changed, 1 insertion(+)

diff --git a/packages/frontendmu-nuxt/auth-utils/useAuth.ts b/packages/frontendmu-nuxt/auth-utils/useAuth.ts
index f13eba10..cd7cbcf7 100644
--- a/packages/frontendmu-nuxt/auth-utils/useAuth.ts
+++ b/packages/frontendmu-nuxt/auth-utils/useAuth.ts
@@ -114,6 +114,7 @@ export default function useAuth(client: DirectusClient<any> & AuthenticationClie
           credentials: 'include', // this is required in order to send the refresh token cookie
           body: JSON.stringify({
             refresh_token: getCookieValue('directus_session_token'),
+            mode: 'cookie',
           }),
         },
       )

From 8686920682400f932044dfb55ebf1b497d7fac73 Mon Sep 17 00:00:00 2001
From: Sandeep Ramgolam <sandeep@ramgolam.com>
Date: Mon, 2 Sep 2024 22:00:09 +0400
Subject: [PATCH 06/19] add provider only fetch profile picture if provider is
 google

---
 packages/frontendmu-nuxt/auth-utils/useAuth.ts | 4 ++--
 packages/frontendmu-nuxt/utils/helpers.ts      | 1 +
 packages/frontendmu-nuxt/utils/types.ts        | 2 ++
 3 files changed, 5 insertions(+), 2 deletions(-)

diff --git a/packages/frontendmu-nuxt/auth-utils/useAuth.ts b/packages/frontendmu-nuxt/auth-utils/useAuth.ts
index cd7cbcf7..f27cca8c 100644
--- a/packages/frontendmu-nuxt/auth-utils/useAuth.ts
+++ b/packages/frontendmu-nuxt/auth-utils/useAuth.ts
@@ -114,7 +114,6 @@ export default function useAuth(client: DirectusClient<any> & AuthenticationClie
           credentials: 'include', // this is required in order to send the refresh token cookie
           body: JSON.stringify({
             refresh_token: getCookieValue('directus_session_token'),
-            mode: 'cookie',
           }),
         },
       )
@@ -124,7 +123,7 @@ export default function useAuth(client: DirectusClient<any> & AuthenticationClie
       setCookie(response.data)
       await getCurrentUser()
       setAuth(true)
-      if (!rawUser.value?.profile_picture) {
+      if (!rawUser.value?.profile_picture && rawUser.value?.provider === 'google') {
         const picture = await cloudFunctionUpdateProfilePicture(rawUser.value?.id || '')
         console.log(picture)
       }
@@ -176,6 +175,7 @@ export default function useAuth(client: DirectusClient<any> & AuthenticationClie
       'Events.Events_id.title',
       'profile_picture',
       'role.name',
+      'provider',
     ]
 
     try {
diff --git a/packages/frontendmu-nuxt/utils/helpers.ts b/packages/frontendmu-nuxt/utils/helpers.ts
index 9f6651fb..b857b9fa 100644
--- a/packages/frontendmu-nuxt/utils/helpers.ts
+++ b/packages/frontendmu-nuxt/utils/helpers.ts
@@ -53,6 +53,7 @@ export function mapToValidUser(user: any): User {
     profile_picture: user.profile_picture || '',
     google: user.google,
     role: user.role.name,
+    provider: user.provider,
   }
 }
 
diff --git a/packages/frontendmu-nuxt/utils/types.ts b/packages/frontendmu-nuxt/utils/types.ts
index e2ed71af..0fb012d0 100644
--- a/packages/frontendmu-nuxt/utils/types.ts
+++ b/packages/frontendmu-nuxt/utils/types.ts
@@ -36,6 +36,7 @@ export interface User {
   github_username?: string
   profile_picture?: string | null
   role: 'sso_google' | 'Admin'
+  provider: string
 }
 
 // export type Transport = "car" | "bus" | "need a ride";
@@ -177,6 +178,7 @@ export interface DirectusAstroUser {
   github_username?: string
   profile_picture?: string
   Events?: { Events_id: DirectusEvent | string }[]
+  provider?: string
 }
 
 export type ToastTypes = 'SUCCESS' | 'WARNING' | 'INFO' | 'ERROR'

From 16f0fe12f208b59618e0a2a4afb0b0eae46faab3 Mon Sep 17 00:00:00 2001
From: Sandeep Ramgolam <sandeep@ramgolam.com>
Date: Mon, 2 Sep 2024 22:11:15 +0400
Subject: [PATCH 07/19] Revert "add provider"

This reverts commit 8686920682400f932044dfb55ebf1b497d7fac73.
---
 packages/frontendmu-nuxt/auth-utils/useAuth.ts | 4 ++--
 packages/frontendmu-nuxt/utils/helpers.ts      | 1 -
 packages/frontendmu-nuxt/utils/types.ts        | 2 --
 3 files changed, 2 insertions(+), 5 deletions(-)

diff --git a/packages/frontendmu-nuxt/auth-utils/useAuth.ts b/packages/frontendmu-nuxt/auth-utils/useAuth.ts
index f27cca8c..cd7cbcf7 100644
--- a/packages/frontendmu-nuxt/auth-utils/useAuth.ts
+++ b/packages/frontendmu-nuxt/auth-utils/useAuth.ts
@@ -114,6 +114,7 @@ export default function useAuth(client: DirectusClient<any> & AuthenticationClie
           credentials: 'include', // this is required in order to send the refresh token cookie
           body: JSON.stringify({
             refresh_token: getCookieValue('directus_session_token'),
+            mode: 'cookie',
           }),
         },
       )
@@ -123,7 +124,7 @@ export default function useAuth(client: DirectusClient<any> & AuthenticationClie
       setCookie(response.data)
       await getCurrentUser()
       setAuth(true)
-      if (!rawUser.value?.profile_picture && rawUser.value?.provider === 'google') {
+      if (!rawUser.value?.profile_picture) {
         const picture = await cloudFunctionUpdateProfilePicture(rawUser.value?.id || '')
         console.log(picture)
       }
@@ -175,7 +176,6 @@ export default function useAuth(client: DirectusClient<any> & AuthenticationClie
       'Events.Events_id.title',
       'profile_picture',
       'role.name',
-      'provider',
     ]
 
     try {
diff --git a/packages/frontendmu-nuxt/utils/helpers.ts b/packages/frontendmu-nuxt/utils/helpers.ts
index b857b9fa..9f6651fb 100644
--- a/packages/frontendmu-nuxt/utils/helpers.ts
+++ b/packages/frontendmu-nuxt/utils/helpers.ts
@@ -53,7 +53,6 @@ export function mapToValidUser(user: any): User {
     profile_picture: user.profile_picture || '',
     google: user.google,
     role: user.role.name,
-    provider: user.provider,
   }
 }
 
diff --git a/packages/frontendmu-nuxt/utils/types.ts b/packages/frontendmu-nuxt/utils/types.ts
index 0fb012d0..e2ed71af 100644
--- a/packages/frontendmu-nuxt/utils/types.ts
+++ b/packages/frontendmu-nuxt/utils/types.ts
@@ -36,7 +36,6 @@ export interface User {
   github_username?: string
   profile_picture?: string | null
   role: 'sso_google' | 'Admin'
-  provider: string
 }
 
 // export type Transport = "car" | "bus" | "need a ride";
@@ -178,7 +177,6 @@ export interface DirectusAstroUser {
   github_username?: string
   profile_picture?: string
   Events?: { Events_id: DirectusEvent | string }[]
-  provider?: string
 }
 
 export type ToastTypes = 'SUCCESS' | 'WARNING' | 'INFO' | 'ERROR'

From 11a4995559314e3cf707dc9b2cebd668117dddfd Mon Sep 17 00:00:00 2001
From: Sandeep Ramgolam <sandeep@ramgolam.com>
Date: Mon, 2 Sep 2024 22:22:44 +0400
Subject: [PATCH 08/19] request provider for self

---
 packages/frontendmu-nuxt/auth-utils/useAuth.ts | 1 +
 1 file changed, 1 insertion(+)

diff --git a/packages/frontendmu-nuxt/auth-utils/useAuth.ts b/packages/frontendmu-nuxt/auth-utils/useAuth.ts
index cd7cbcf7..aef9540f 100644
--- a/packages/frontendmu-nuxt/auth-utils/useAuth.ts
+++ b/packages/frontendmu-nuxt/auth-utils/useAuth.ts
@@ -176,6 +176,7 @@ export default function useAuth(client: DirectusClient<any> & AuthenticationClie
       'Events.Events_id.title',
       'profile_picture',
       'role.name',
+      'provider',
     ]
 
     try {

From 8e5b77217c3c97a404eb7da1644266e4f9ff8261 Mon Sep 17 00:00:00 2001
From: Sandeep Ramgolam <sandeep@ramgolam.com>
Date: Mon, 2 Sep 2024 22:34:09 +0400
Subject: [PATCH 09/19] show profile pic for github users

---
 .../frontendmu-nuxt/auth-utils/useAuth.ts     |  1 +
 .../components/auth/LoggedUser.vue            | 52 ++++++++++++++-----
 packages/frontendmu-nuxt/utils/types.ts       |  2 +
 3 files changed, 43 insertions(+), 12 deletions(-)

diff --git a/packages/frontendmu-nuxt/auth-utils/useAuth.ts b/packages/frontendmu-nuxt/auth-utils/useAuth.ts
index aef9540f..366944fe 100644
--- a/packages/frontendmu-nuxt/auth-utils/useAuth.ts
+++ b/packages/frontendmu-nuxt/auth-utils/useAuth.ts
@@ -172,6 +172,7 @@ export default function useAuth(client: DirectusClient<any> & AuthenticationClie
       'meal',
       'occupation',
       'github_username',
+      'external_identifier',
       'Events.Events_id.id',
       'Events.Events_id.title',
       'profile_picture',
diff --git a/packages/frontendmu-nuxt/components/auth/LoggedUser.vue b/packages/frontendmu-nuxt/components/auth/LoggedUser.vue
index e92ad89f..6f0b7605 100644
--- a/packages/frontendmu-nuxt/components/auth/LoggedUser.vue
+++ b/packages/frontendmu-nuxt/components/auth/LoggedUser.vue
@@ -16,34 +16,57 @@ onMounted(() => {
 <template>
   <div class="dark:text-zinc-200 dark:ring-white/10 pl-4">
     <BaseButton
-      v-if="!isLoggedIn" href="/login" color="primary" class="font-medium hidden md:block"
+      v-if="!isLoggedIn"
+      href="/login"
+      color="primary"
+      class="font-medium hidden md:block"
       @click="setUrl()"
     >
       Log In
     </BaseButton>
     <BaseButton
-      v-if="!isLoggedIn" href="/login" color="primary" class="font-medium block md:hidden" size="sm"
+      v-if="!isLoggedIn"
+      href="/login"
+      color="primary"
+      class="font-medium block md:hidden"
+      size="sm"
       @click="setUrl()"
     >
       Log In
     </BaseButton>
-    <div v-else class="flex gap-2 items-center">
-      <Menu as="div" class="relative inline-block text-left">
+    <div
+      v-else
+      class="flex gap-2 items-center"
+    >
+      <Menu
+        as="div"
+        class="relative inline-block text-left"
+      >
         <div>
           <MenuButton
             class="inline-flex items-center w-full justify-center gap-x-1.5 rounded-full  text-sm font-semibold text-verse-900 dark:text-verse-100 shadow-sm  ring-gray-300 hover:bg-gray-50"
           >
-            <div v-if="avatarUrl">
-              <img class="w-10 aspect-square rounded-full" :src="avatarUrl">
-            </div>
+            <template v-if="user?.provider === 'github'">
+              <img :src="`https://github.com/${user?.external_identifier}.png`">
+            </template>
+            <template v-else>
+              <div v-if="avatarUrl">
+                <img
+                  class="w-10 aspect-square rounded-full"
+                  :src="avatarUrl"
+                >
+              </div>
+            </template>
             <!-- <ChevronDownIcon class="-mr-1 h-5 w-5 text-gray-400" aria-hidden="true" /> -->
           </MenuButton>
         </div>
 
         <transition
           enter-active-class="transition ease-out duration-100"
-          enter-from-class="transform opacity-0 scale-95" enter-to-class="transform opacity-100 scale-100"
-          leave-active-class="transition ease-in duration-75" leave-from-class="transform opacity-100 scale-100"
+          enter-from-class="transform opacity-0 scale-95"
+          enter-to-class="transform opacity-100 scale-100"
+          leave-active-class="transition ease-in duration-75"
+          leave-from-class="transform opacity-100 scale-100"
           leave-to-class="transform opacity-0 scale-95"
         >
           <MenuItems
@@ -53,7 +76,8 @@ onMounted(() => {
               <MenuItem v-slot="{ active }">
                 <NuxtLink
                   href="/user/me"
-                  class="block px-4 py-2 text-sm" :class="[active ? 'bg-gray-400/10 text-verse-900 dark:text-verse-100' : 'text-verse-900 dark:text-verse-100']"
+                  class="block px-4 py-2 text-sm"
+                  :class="[active ? 'bg-gray-400/10 text-verse-900 dark:text-verse-100' : 'text-verse-900 dark:text-verse-100']"
                 >
                   My
                   Profile
@@ -61,7 +85,8 @@ onMounted(() => {
               </MenuItem>
               <MenuItem v-slot="{ active }">
                 <NuxtLink
-                  class="block px-4 py-2 text-sm cursor-pointer" :class="[active ? 'bg-gray-400/10 text-verse-900 dark:text-verse-100' : 'text-verse-900 dark:text-verse-100']"
+                  class="block px-4 py-2 text-sm cursor-pointer"
+                  :class="[active ? 'bg-gray-400/10 text-verse-900 dark:text-verse-100' : 'text-verse-900 dark:text-verse-100']"
                   @click="logout()"
                 >
                   Logout
@@ -71,7 +96,10 @@ onMounted(() => {
             <div class="text-verse-900 dark:text-verse-100 p-4 text-sm">
               <div class="flex flex-col items-center justify-center gap-2">
                 <div v-if="avatarUrl">
-                  <img class="w-16 aspect-square rounded-full" :src="avatarUrl">
+                  <img
+                    class="w-16 aspect-square rounded-full"
+                    :src="avatarUrl"
+                  >
                 </div>
 
                 {{ user?.full_name }}
diff --git a/packages/frontendmu-nuxt/utils/types.ts b/packages/frontendmu-nuxt/utils/types.ts
index e2ed71af..b74bd26e 100644
--- a/packages/frontendmu-nuxt/utils/types.ts
+++ b/packages/frontendmu-nuxt/utils/types.ts
@@ -36,6 +36,8 @@ export interface User {
   github_username?: string
   profile_picture?: string | null
   role: 'sso_google' | 'Admin'
+  provider?: string
+  external_identifier?: string
 }
 
 // export type Transport = "car" | "bus" | "need a ride";

From f4b7d4c02a28479178bbe73613e70abe82bf9749 Mon Sep 17 00:00:00 2001
From: Sandeep Ramgolam <sandeep@ramgolam.com>
Date: Mon, 2 Sep 2024 22:42:27 +0400
Subject: [PATCH 10/19] display user (yes we are debugging in prod)

---
 packages/frontendmu-nuxt/components/auth/LoggedUser.vue | 8 +++++++-
 1 file changed, 7 insertions(+), 1 deletion(-)

diff --git a/packages/frontendmu-nuxt/components/auth/LoggedUser.vue b/packages/frontendmu-nuxt/components/auth/LoggedUser.vue
index 6f0b7605..acf22e02 100644
--- a/packages/frontendmu-nuxt/components/auth/LoggedUser.vue
+++ b/packages/frontendmu-nuxt/components/auth/LoggedUser.vue
@@ -15,6 +15,9 @@ onMounted(() => {
 
 <template>
   <div class="dark:text-zinc-200 dark:ring-white/10 pl-4">
+    <pre>
+      {{ user }}
+    </pre>
     <BaseButton
       v-if="!isLoggedIn"
       href="/login"
@@ -47,7 +50,10 @@ onMounted(() => {
             class="inline-flex items-center w-full justify-center gap-x-1.5 rounded-full  text-sm font-semibold text-verse-900 dark:text-verse-100 shadow-sm  ring-gray-300 hover:bg-gray-50"
           >
             <template v-if="user?.provider === 'github'">
-              <img :src="`https://github.com/${user?.external_identifier}.png`">
+              <img
+                class="w-10 aspect-square rounded-full"
+                :src="`https://github.com/${user?.external_identifier}.png`"
+              >
             </template>
             <template v-else>
               <div v-if="avatarUrl">

From 25f9d175060755856edc92e4f774b5f3cbdbbc1f Mon Sep 17 00:00:00 2001
From: Sandeep Ramgolam <sandeep@ramgolam.com>
Date: Mon, 2 Sep 2024 22:47:05 +0400
Subject: [PATCH 11/19] add provider and external identifier to valid user

---
 packages/frontendmu-nuxt/utils/helpers.ts | 2 ++
 1 file changed, 2 insertions(+)

diff --git a/packages/frontendmu-nuxt/utils/helpers.ts b/packages/frontendmu-nuxt/utils/helpers.ts
index 9f6651fb..bb5261b0 100644
--- a/packages/frontendmu-nuxt/utils/helpers.ts
+++ b/packages/frontendmu-nuxt/utils/helpers.ts
@@ -53,6 +53,8 @@ export function mapToValidUser(user: any): User {
     profile_picture: user.profile_picture || '',
     google: user.google,
     role: user.role.name,
+    provider: user.provider,
+    external_identifier: user.external_identifier,
   }
 }
 

From 53e72870a74c24ae73aa9ec930c4595172459ff1 Mon Sep 17 00:00:00 2001
From: Sandeep Ramgolam <sandeep@ramgolam.com>
Date: Mon, 2 Sep 2024 22:55:48 +0400
Subject: [PATCH 12/19] hide discord remove pre

---
 .../components/auth/LoggedUser.vue            |   3 -
 .../components/auth/LoginForm.vue             | 114 +++++++++++++-----
 2 files changed, 86 insertions(+), 31 deletions(-)

diff --git a/packages/frontendmu-nuxt/components/auth/LoggedUser.vue b/packages/frontendmu-nuxt/components/auth/LoggedUser.vue
index acf22e02..5bcffef6 100644
--- a/packages/frontendmu-nuxt/components/auth/LoggedUser.vue
+++ b/packages/frontendmu-nuxt/components/auth/LoggedUser.vue
@@ -15,9 +15,6 @@ onMounted(() => {
 
 <template>
   <div class="dark:text-zinc-200 dark:ring-white/10 pl-4">
-    <pre>
-      {{ user }}
-    </pre>
     <BaseButton
       v-if="!isLoggedIn"
       href="/login"
diff --git a/packages/frontendmu-nuxt/components/auth/LoginForm.vue b/packages/frontendmu-nuxt/components/auth/LoginForm.vue
index f4788779..c8f021f2 100644
--- a/packages/frontendmu-nuxt/components/auth/LoginForm.vue
+++ b/packages/frontendmu-nuxt/components/auth/LoginForm.vue
@@ -22,18 +22,25 @@ const developmentEnvironment = process.env.NODE_ENV === 'development'
 
 <template>
   <div class="sm:mx-auto sm:w-full sm:max-w-md">
-    <MiscLogoFec class="w-10 mx-auto dark:text-white" :loading="isLoading" />
+    <MiscLogoFec
+      class="w-10 mx-auto dark:text-white"
+      :loading="isLoading"
+    />
     <h2 class="mt-6 text-center text-2xl font-bold leading-9 tracking-tight text-verse-900 dark:text-verse-100">
       {{ isLoggedIn ? 'Welcome back' : 'Sign in to your account' }}
     </h2>
   </div>
   <div class="mt-10 sm:mx-auto sm:w-full sm:max-w-[480px] flex justify-center">
     <div
-      class="bg-verse-200/10 overflow-hidden dark:bg-verse-500/20 backdrop-blur-sm px-6 py-12 shadow-2xl rounded-lg sm:px-12 w-11/12">
+      class="bg-verse-200/10 overflow-hidden dark:bg-verse-500/20 backdrop-blur-sm px-6 py-12 shadow-2xl rounded-lg sm:px-12 w-11/12"
+    >
       <div v-if="isLoggedIn">
         <div class="text-center flex flex-col gap-8 text-verse-900 dark:text-verse-100 w-full">
           <span>
-            You are logged in as <NuxtLink class="underline" href="/user/me"> {{ user?.full_name }}
+            You are logged in as <NuxtLink
+              class="underline"
+              href="/user/me"
+            > {{ user?.full_name }}
             </NuxtLink>
           </span>
           <div v-if="willRedirect">
@@ -41,7 +48,10 @@ const developmentEnvironment = process.env.NODE_ENV === 'development'
           </div>
 
           <div class="grid grid-cols-2 gap-4 w-full justify-evenly">
-            <BaseButton color="neutral" @click="logout">
+            <BaseButton
+              color="neutral"
+              @click="logout"
+            >
               Logout
             </BaseButton>
             <BaseButton href="/user/me">
@@ -51,26 +61,48 @@ const developmentEnvironment = process.env.NODE_ENV === 'development'
         </div>
       </div>
       <div v-else>
-        <form v-if="developmentEnvironment" class="space-y-6" @submit.prevent="login()">
+        <form
+          v-if="developmentEnvironment"
+          class="space-y-6"
+          @submit.prevent="login()"
+        >
           <div>
-            <label for="email" class="block text-sm font-medium leading-6 text-verse-900 dark:text-verse-100">
+            <label
+              for="email"
+              class="block text-sm font-medium leading-6 text-verse-900 dark:text-verse-100"
+            >
               Email address
             </label>
             <div class="mt-2">
-              <input id="email" v-model="email" name="email" type="email" autocomplete="email"
+              <input
+                id="email"
+                v-model="email"
+                name="email"
+                type="email"
+                autocomplete="email"
                 class="block w-full rounded-md border-0 p-1.5 text-verse-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-verse-600 sm:text-sm sm:leading-6"
-                required>
+                required
+              >
             </div>
           </div>
 
           <div>
-            <label for="password" class="block text-sm font-medium leading-6 text-verse-900 dark:text-verse-100">
+            <label
+              for="password"
+              class="block text-sm font-medium leading-6 text-verse-900 dark:text-verse-100"
+            >
               Password
             </label>
             <div class="mt-2">
-              <input id="password" v-model="password" name="password" type="password" autocomplete="current-password"
+              <input
+                id="password"
+                v-model="password"
+                name="password"
+                type="password"
+                autocomplete="current-password"
                 required
-                class="block w-full rounded-md border-0 p-1.5 text-verse-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-verse-600 sm:text-sm sm:leading-6">
+                class="block w-full rounded-md border-0 p-1.5 text-verse-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-verse-600 sm:text-sm sm:leading-6"
+              >
             </div>
           </div>
 
@@ -87,8 +119,10 @@ const developmentEnvironment = process.env.NODE_ENV === 'development'
                     </div> -->
 
           <div>
-            <button type="submit"
-              class="flex w-full justify-center rounded-md bg-verse-600 px-3 py-1.5 text-sm font-semibold leading-6 text-white shadow-sm hover:bg-verse-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-verse-600">
+            <button
+              type="submit"
+              class="flex w-full justify-center rounded-md bg-verse-600 px-3 py-1.5 text-sm font-semibold leading-6 text-white shadow-sm hover:bg-verse-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-verse-600"
+            >
               Sign in
             </button>
           </div>
@@ -100,41 +134,65 @@ const developmentEnvironment = process.env.NODE_ENV === 'development'
           </div>
 
           <div class="relative">
-            <div class="absolute inset-0 flex items-center" aria-hidden="true">
+            <div
+              class="absolute inset-0 flex items-center"
+              aria-hidden="true"
+            >
               <div class="w-full border-t border-verse-500/20" />
             </div>
           </div>
 
           <div class="mt-10 grid sm:grid-cols-2 gap-4">
-            <a :href="oAuthLogin('google')"
-              class="flex w-full items-center justify-center gap-3 rounded-md bg-[#000000] hover:bg-black/50 transition-all duration-300 px-3 py-1.5 text-white focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[#1D9BF0]">
-              <Icon name="logos:google-icon" class="h-5 w-5" />
+            <a
+              :href="oAuthLogin('google')"
+              class="flex w-full items-center justify-center gap-3 rounded-md bg-[#000000] hover:bg-black/50 transition-all duration-300 px-3 py-1.5 text-white focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[#1D9BF0]"
+            >
+              <Icon
+                name="logos:google-icon"
+                class="h-5 w-5"
+              />
               <span class="text-sm font-semibold leading-6">Google</span>
             </a>
 
-            <a :href="oAuthLogin('github')"
+            <a
+              :href="oAuthLogin('github')"
               class="flex w-full items-center justify-center gap-3 rounded-md bg-[#000000]  hover:bg-black/50  px-3 py-1.5 text-white focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[#24292F]"
-              disabled>
-              <svg class="h-5 w-5" aria-hidden="true" fill="currentColor" viewBox="0 0 20 20">
-                <path fill-rule="evenodd"
+              disabled
+            >
+              <svg
+                class="h-5 w-5"
+                aria-hidden="true"
+                fill="currentColor"
+                viewBox="0 0 20 20"
+              >
+                <path
+                  fill-rule="evenodd"
                   d="M10 0C4.477 0 0 4.484 0 10.017c0 4.425 2.865 8.18 6.839 9.504.5.092.682-.217.682-.483 0-.237-.008-.868-.013-1.703-2.782.605-3.369-1.343-3.369-1.343-.454-1.158-1.11-1.466-1.11-1.466-.908-.62.069-.608.069-.608 1.003.07 1.531 1.032 1.531 1.032.892 1.53 2.341 1.088 2.91.832.092-.647.35-1.088.636-1.338-2.22-.253-4.555-1.113-4.555-4.951 0-1.093.39-1.988 1.029-2.688-.103-.253-.446-1.272.098-2.65 0 0 .84-.27 2.75 1.026A9.564 9.564 0 0110 4.844c.85.004 1.705.115 2.504.337 1.909-1.296 2.747-1.027 2.747-1.027.546 1.379.203 2.398.1 2.651.64.7 1.028 1.595 1.028 2.688 0 3.848-2.339 4.695-4.566 4.942.359.31.678.921.678 1.856 0 1.338-.012 2.419-.012 2.747 0 .268.18.58.688.482A10.019 10.019 0 0020 10.017C20 4.484 15.522 0 10 0z"
-                  clip-rule="evenodd" />
+                  clip-rule="evenodd"
+                />
               </svg>
               <span class="text-sm font-semibold leading-6">GitHub</span>
             </a>
 
-            <a :href="oAuthLogin('discord')"
+            <!-- <a
+              :href="oAuthLogin('discord')"
               class="flex w-full items-center justify-center gap-3 rounded-md bg-[#000000]  hover:bg-black/50  px-3 py-1.5 text-white focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[#24292F]"
-              disabled>
-              <Icon name="logos:discord-icon" class="h-5 w-5" />
+              disabled
+            >
+              <Icon
+                name="logos:discord-icon"
+                class="h-5 w-5"
+              />
               <span class="text-sm font-semibold leading-6">Discord</span>
-            </a>
+            </a> -->
           </div>
         </div>
       </div>
 
-      <div class="absolute bottom-0 left-0 bg-zinc-500/20 dark:bg-verse-500/20 backdrop-blur-2xl  right-0 z-10 h-0"
-        :style="{ height: countDownPercentage }" />
+      <div
+        class="absolute bottom-0 left-0 bg-zinc-500/20 dark:bg-verse-500/20 backdrop-blur-2xl  right-0 z-10 h-0"
+        :style="{ height: countDownPercentage }"
+      />
     </div>
   </div>
 </template>

From 98ff8be2df896ab05f58ff44c4404b6b6de998f5 Mon Sep 17 00:00:00 2001
From: Sandeep Ramgolam <sandeep@ramgolam.com>
Date: Mon, 2 Sep 2024 23:30:37 +0400
Subject: [PATCH 13/19] refactor: Improve user full name handling in
 mapToValidUser function

---
 packages/frontendmu-nuxt/utils/helpers.ts | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/packages/frontendmu-nuxt/utils/helpers.ts b/packages/frontendmu-nuxt/utils/helpers.ts
index bb5261b0..5ac59553 100644
--- a/packages/frontendmu-nuxt/utils/helpers.ts
+++ b/packages/frontendmu-nuxt/utils/helpers.ts
@@ -36,7 +36,7 @@ export function formatDate(date: string) {
 export function mapToValidUser(user: any): User {
   const full_name = user?.full_name
     ? user.full_name
-    : `${user.first_name} ${user.last_name}`
+    : `${user.first_name} ${user.last_name ?? ''}`.trim()
 
   return {
     id: user.id,

From 04593b1efedd3a61010e623a76a6bc5c85e20529 Mon Sep 17 00:00:00 2001
From: Sandeep Ramgolam <sandeep@ramgolam.com>
Date: Mon, 2 Sep 2024 23:30:44 +0400
Subject: [PATCH 14/19] feat: Add provider hint to LoggedUser component

---
 .../components/auth/LoggedUser.vue             | 18 ++++++++++++++++--
 1 file changed, 16 insertions(+), 2 deletions(-)

diff --git a/packages/frontendmu-nuxt/components/auth/LoggedUser.vue b/packages/frontendmu-nuxt/components/auth/LoggedUser.vue
index 5bcffef6..7331163f 100644
--- a/packages/frontendmu-nuxt/components/auth/LoggedUser.vue
+++ b/packages/frontendmu-nuxt/components/auth/LoggedUser.vue
@@ -44,7 +44,7 @@ onMounted(() => {
       >
         <div>
           <MenuButton
-            class="inline-flex items-center w-full justify-center gap-x-1.5 rounded-full  text-sm font-semibold text-verse-900 dark:text-verse-100 shadow-sm  ring-gray-300 hover:bg-gray-50"
+            class="inline-flex relative items-center w-full justify-center gap-x-1.5 rounded-full  text-sm font-semibold text-verse-900 dark:text-verse-100 shadow-sm  ring-gray-300 hover:bg-gray-50"
           >
             <template v-if="user?.provider === 'github'">
               <img
@@ -60,7 +60,21 @@ onMounted(() => {
                 >
               </div>
             </template>
-            <!-- <ChevronDownIcon class="-mr-1 h-5 w-5 text-gray-400" aria-hidden="true" /> -->
+            <!-- Provider Hint -->
+            <div class="absolute bottom-0 right-0 bg-white rounded-full">
+              <div v-if="user?.provider === 'default'">
+                <Icon
+                  class="block w-3 h-3 p-0.5 text-black"
+                  name="fluent:animal-rabbit-24-regular"
+                />
+              </div>
+              <div v-else>
+                <Icon
+                  :name="`carbon:logo-${user?.provider}`"
+                  class="block w-3 h-3 p-0.5 text-black"
+                />
+              </div>
+            </div>
           </MenuButton>
         </div>
 

From 1c721a0d08f1f2894fc741ca2f704968ca148751 Mon Sep 17 00:00:00 2001
From: Sandeep Ramgolam <sandeep@ramgolam.com>
Date: Mon, 2 Sep 2024 23:31:14 +0400
Subject: [PATCH 15/19] feat: Add provider hint to profile

---
 .../components/auth/MyProfile.vue             | 115 ++++++++++++------
 .../components/auth/RsvpAttendeeList.vue      |  11 +-
 packages/frontendmu-nuxt/utils/types.ts       |   2 +
 3 files changed, 87 insertions(+), 41 deletions(-)

diff --git a/packages/frontendmu-nuxt/components/auth/MyProfile.vue b/packages/frontendmu-nuxt/components/auth/MyProfile.vue
index aa620afc..84b6a9e5 100644
--- a/packages/frontendmu-nuxt/components/auth/MyProfile.vue
+++ b/packages/frontendmu-nuxt/components/auth/MyProfile.vue
@@ -100,18 +100,29 @@ function updateProfile() {
 
           <form class="md:col-span-2 pb-16">
             <div class="grid grid-cols-1 gap-x-6 gap-y-8 sm:max-w-xl sm:grid-cols-6">
-              <div v-if="avatarUrl" class="col-span-full flex items-center gap-x-8">
+              <div
+                v-if="avatarUrl"
+                class="col-span-full flex items-center gap-x-8"
+              >
                 <img
-                  :src="avatarUrl || ''" alt=""
+                  :src="avatarUrl || ''"
+                  alt=""
                   class="h-28 w-28 flex-none rounded-lg bg-gray-800 object-cover"
                 >
               </div>
 
               <div class="col-span-full">
-                <label for="email" class="block text-lg font-medium leading-6">Email address</label>
+                <label
+                  for="email"
+                  class="block text-lg font-medium leading-6"
+                >Email address</label>
                 <div class="mt-2">
                   <input
-                    id="email" v-model="userDetails.email" disabled name="email" type="email"
+                    id="email"
+                    v-model="userDetails.email"
+                    disabled
+                    name="email"
+                    type="email"
                     autocomplete="email"
                     class="block w-full pl-2 rounded-md border-0 bg-white/5 py-1.5 shadow-sm ring-1 ring-inset dark:ring-white/10 focus:ring-2 focus:ring-inset focus:ring-indigo-500 sm:text-lg sm:leading-6"
                   >
@@ -119,13 +130,19 @@ function updateProfile() {
               </div>
 
               <div class="col-span-full">
-                <label for="fullname" class="block text-lg font-medium leading-6">Full name</label>
+                <label
+                  for="fullname"
+                  class="block text-lg font-medium leading-6"
+                >Full name</label>
                 <div class="mt-2">
                   <div
                     class="flex rounded-md bg-white/5 ring-1 ring-inset dark:ring-white/10 focus-within:ring-2 focus-within:ring-inset focus-within:ring-indigo-500"
                   >
                     <input
-                      id="fullname" v-model="userDetails.full_name" type="text" name="fullname"
+                      id="fullname"
+                      v-model="userDetails.full_name"
+                      type="text"
+                      name="fullname"
                       autocomplete="username"
                       class="flex-1 border-0 bg-transparent py-1.5 pl-2 focus:ring-0 sm:text-lg sm:leading-6"
                     >
@@ -134,15 +151,21 @@ function updateProfile() {
               </div>
 
               <div class="col-span-full">
-                <label for="github_username" class="block text-lg font-medium leading-6">GitHub
+                <label
+                  for="github_username"
+                  class="block text-lg font-medium leading-6"
+                >GitHub
                   Username</label>
                 <div class="mt-2">
                   <div
                     class="flex rounded-md bg-white/5 ring-1 ring-inset dark:ring-white/10 focus-within:ring-2 focus-within:ring-inset focus-within:ring-indigo-500"
                   >
                     <input
-                      id="github_username" v-model="userDetails.github_username" type="text"
-                      name="github_username" autocomplete="username"
+                      id="github_username"
+                      v-model="userDetails.github_username"
+                      type="text"
+                      name="github_username"
+                      autocomplete="username"
                       class="flex-1 border-0 bg-transparent py-1.5 pl-2 focus:ring-0 sm:text-lg sm:leading-6"
                     >
                   </div>
@@ -150,13 +173,19 @@ function updateProfile() {
               </div>
 
               <div class="col-span-full">
-                <label for="phone" class="block text-lg font-medium leading-6">Phone</label>
+                <label
+                  for="phone"
+                  class="block text-lg font-medium leading-6"
+                >Phone</label>
                 <div class="mt-2">
                   <div
                     class="flex rounded-md bg-white/5 ring-1 ring-inset dark:ring-white/10 focus-within:ring-2 focus-within:ring-inset focus-within:ring-indigo-500"
                   >
                     <input
-                      id="phone" v-model="userDetails.phone" name="phone" autocomplete="phone"
+                      id="phone"
+                      v-model="userDetails.phone"
+                      name="phone"
+                      autocomplete="phone"
                       class="flex-1 border-0 bg-transparent py-1.5 pl-2 focus:ring-0 sm:text-lg sm:leading-6"
                       placeholder="57654321"
                     >
@@ -180,10 +209,16 @@ function updateProfile() {
 
           <div>
             <div class="flex flex-col">
-              <template v-for="event in rawUser?.Events" :key="(event.Events_id as DirectusEvent).id">
+              <template
+                v-for="event in rawUser?.Events"
+                :key="(event.Events_id as DirectusEvent).id"
+              >
                 <template v-if="(typeof event.Events_id !== 'string')">
                   <div>
-                    <NuxtLink :href="`/meetup/${event.Events_id.id}`" class="text-lg font-medium">
+                    <NuxtLink
+                      :href="`/meetup/${event.Events_id.id}`"
+                      class="text-lg font-medium"
+                    >
                       {{
                         event.Events_id.title }}
                     </NuxtLink>
@@ -207,7 +242,10 @@ function updateProfile() {
                   Transport
                 </RadioGroupLabel>
                 <div class="flex gap-4 flex-wrap">
-                  <FormRadio :disabled="isLoading" :options="transportOptions" />
+                  <FormRadio
+                    :disabled="isLoading"
+                    :options="transportOptions"
+                  />
                 </div>
               </RadioGroup>
             </FormLabel>
@@ -218,7 +256,10 @@ function updateProfile() {
                   Meal
                 </RadioGroupLabel>
                 <div class="flex gap-4 flex-wrap">
-                  <FormRadio :disabled="isLoading" :options="foodOptions" />
+                  <FormRadio
+                    :disabled="isLoading"
+                    :options="foodOptions"
+                  />
                 </div>
               </RadioGroup>
             </FormLabel>
@@ -229,7 +270,10 @@ function updateProfile() {
                   Profession
                 </RadioGroupLabel>
                 <div class="flex gap-4 flex-wrap">
-                  <FormRadio :disabled="isLoading" :options="professionOptions" />
+                  <FormRadio
+                    :disabled="isLoading"
+                    :options="professionOptions"
+                  />
                 </div>
               </RadioGroup>
             </FormLabel>
@@ -251,36 +295,26 @@ function updateProfile() {
             <div class="grid grid-cols-1 gap-x-6 gap-y-8 sm:max-w-xl sm:grid-cols-6">
               <div class="col-span-full">
                 <div class="mt-2">
-                  <svg xmlns="http://www.w3.org/2000/svg" width="272" height="92">
-                    <path
-                      fill="#EA4335"
-                      d="M115.75 47.18c0 12.77-9.99 22.18-22.25 22.18s-22.25-9.41-22.25-22.18C71.25 34.32 81.24 25 93.5 25s22.25 9.32 22.25 22.18zm-9.74 0c0-7.98-5.79-13.44-12.51-13.44S80.99 39.2 80.99 47.18c0 7.9 5.79 13.44 12.51 13.44s12.51-5.55 12.51-13.44z"
-                    />
-                    <path
-                      fill="#FBBC05"
-                      d="M163.75 47.18c0 12.77-9.99 22.18-22.25 22.18s-22.25-9.41-22.25-22.18c0-12.85 9.99-22.18 22.25-22.18s22.25 9.32 22.25 22.18zm-9.74 0c0-7.98-5.79-13.44-12.51-13.44s-12.51 5.46-12.51 13.44c0 7.9 5.79 13.44 12.51 13.44s12.51-5.55 12.51-13.44z"
+                  <div v-if="user?.provider === 'default'">
+                    <Icon
+                      class="w-[100px] h-[100px]"
+                      name="fluent:animal-rabbit-24-regular"
                     />
-                    <path
-                      fill="#4285F4"
-                      d="M209.75 26.34v39.82c0 16.38-9.66 23.07-21.08 23.07-10.75 0-17.22-7.19-19.66-13.07l8.48-3.53c1.51 3.61 5.21 7.87 11.17 7.87 7.31 0 11.84-4.51 11.84-13v-3.19h-.34c-2.18 2.69-6.38 5.04-11.68 5.04-11.09 0-21.25-9.66-21.25-22.09 0-12.52 10.16-22.26 21.25-22.26 5.29 0 9.49 2.35 11.68 4.96h.34v-3.61h9.25zm-8.56 20.92c0-7.81-5.21-13.52-11.84-13.52-6.72 0-12.35 5.71-12.35 13.52 0 7.73 5.63 13.36 12.35 13.36 6.63 0 11.84-5.63 11.84-13.36z"
-                    />
-                    <path fill="#34A853" d="M225 3v65h-9.5V3h9.5z" />
-                    <path
-                      fill="#EA4335"
-                      d="m262.02 54.48 7.56 5.04c-2.44 3.61-8.32 9.83-18.48 9.83-12.6 0-22.01-9.74-22.01-22.18 0-13.19 9.49-22.18 20.92-22.18 11.51 0 17.14 9.16 18.98 14.11l1.01 2.52-29.65 12.28c2.27 4.45 5.8 6.72 10.75 6.72 4.96 0 8.4-2.44 10.92-6.14zm-23.27-7.98 19.82-8.23c-1.09-2.77-4.37-4.7-8.23-4.7-4.95 0-11.84 4.37-11.59 12.93z"
-                    />
-                    <path
-                      fill="#4285F4"
-                      d="M35.29 41.41V32H67c.31 1.64.47 3.58.47 5.68 0 7.06-1.93 15.79-8.15 22.01-6.05 6.3-13.78 9.66-24.02 9.66C16.32 69.35.36 53.89.36 34.91.36 15.93 16.32.47 35.3.47c10.5 0 17.98 4.12 23.6 9.49l-6.64 6.64c-4.03-3.78-9.49-6.72-16.97-6.72-13.86 0-24.7 11.17-24.7 25.03 0 13.86 10.84 25.03 24.7 25.03 8.99 0 14.11-3.61 17.39-6.89 2.66-2.66 4.41-6.46 5.1-11.65l-22.49.01z"
+                  </div>
+                  <div v-else>
+                    <Icon
+                      :name="`logos:${user?.provider}`"
+                      class="w-[200px] h-[100px]"
                     />
-                  </svg>
+                  </div>
                 </div>
               </div>
             </div>
 
             <div class="mt-8 flex">
               <button
-                type="submit" class="rounded-md bg-red-500 px-3 py-2 text-sm font-semibold shadow-sm hover:bg-red-400 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-500"
+                type="submit"
+                class="rounded-md bg-red-500 px-3 py-2 text-sm font-semibold shadow-sm hover:bg-red-400 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-500"
                 @click.prevent="logout()"
               >
                 Log me out
@@ -295,7 +329,10 @@ function updateProfile() {
             You are not logged in.
           </div>
 
-          <BaseButton href="/login" color="primary">
+          <BaseButton
+            href="/login"
+            color="primary"
+          >
             Login to RSVP
           </BaseButton>
         </div>
diff --git a/packages/frontendmu-nuxt/components/auth/RsvpAttendeeList.vue b/packages/frontendmu-nuxt/components/auth/RsvpAttendeeList.vue
index 553fb7e6..9207cc54 100644
--- a/packages/frontendmu-nuxt/components/auth/RsvpAttendeeList.vue
+++ b/packages/frontendmu-nuxt/components/auth/RsvpAttendeeList.vue
@@ -96,11 +96,18 @@ onMounted(async () => {
       >
         <div class="flex flex-col gap-4 justify-center">
           <div class="relative flex flex-col items-center">
-            <template v-if="attendee.profile_picture">
+            <template v-if="attendee.provider === 'github'">
+              <img
+                :src="`https://github.com/${attendee.external_identifier}.png`"
+                alt=""
+                class="rounded-full mx-auto w-28 h-28 aspect-square"
+              >
+            </template>
+            <template v-else-if="attendee.profile_picture">
               <img
                 :src="base64Url(attendee.profile_picture)"
                 alt=""
-                class="rounded-full mx-auto w-full max-w-[130px] aspect-square"
+                class="rounded-full mx-auto w-28 h-28 aspect-square"
               >
             </template>
             <template v-else>
diff --git a/packages/frontendmu-nuxt/utils/types.ts b/packages/frontendmu-nuxt/utils/types.ts
index b74bd26e..3ab0ee5e 100644
--- a/packages/frontendmu-nuxt/utils/types.ts
+++ b/packages/frontendmu-nuxt/utils/types.ts
@@ -216,6 +216,8 @@ export interface Attendee {
   name: string
   profile_picture: string
   verified: boolean
+  provider: string
+  external_identifier: string
 }
 
 export interface RSVPResponse {

From 62b8269ce143349c2c63ca531499df7a367e4247 Mon Sep 17 00:00:00 2001
From: Sandeep Ramgolam <sandeep@ramgolam.com>
Date: Tue, 19 Nov 2024 22:02:50 +0400
Subject: [PATCH 16/19] Add AlertDialog component and related subcomponents

---
 .../ui/alert-dialog/AlertDialog.vue           | 14 +++++++
 .../ui/alert-dialog/AlertDialogAction.vue     | 20 +++++++++
 .../ui/alert-dialog/AlertDialogCancel.vue     | 27 ++++++++++++
 .../ui/alert-dialog/AlertDialogContent.vue    | 42 +++++++++++++++++++
 .../alert-dialog/AlertDialogDescription.vue   | 25 +++++++++++
 .../ui/alert-dialog/AlertDialogFooter.vue     | 21 ++++++++++
 .../ui/alert-dialog/AlertDialogHeader.vue     | 16 +++++++
 .../ui/alert-dialog/AlertDialogTitle.vue      | 22 ++++++++++
 .../ui/alert-dialog/AlertDialogTrigger.vue    | 11 +++++
 .../components/ui/alert-dialog/index.ts       |  9 ++++
 10 files changed, 207 insertions(+)
 create mode 100644 packages/frontendmu-nuxt/components/ui/alert-dialog/AlertDialog.vue
 create mode 100644 packages/frontendmu-nuxt/components/ui/alert-dialog/AlertDialogAction.vue
 create mode 100644 packages/frontendmu-nuxt/components/ui/alert-dialog/AlertDialogCancel.vue
 create mode 100644 packages/frontendmu-nuxt/components/ui/alert-dialog/AlertDialogContent.vue
 create mode 100644 packages/frontendmu-nuxt/components/ui/alert-dialog/AlertDialogDescription.vue
 create mode 100644 packages/frontendmu-nuxt/components/ui/alert-dialog/AlertDialogFooter.vue
 create mode 100644 packages/frontendmu-nuxt/components/ui/alert-dialog/AlertDialogHeader.vue
 create mode 100644 packages/frontendmu-nuxt/components/ui/alert-dialog/AlertDialogTitle.vue
 create mode 100644 packages/frontendmu-nuxt/components/ui/alert-dialog/AlertDialogTrigger.vue
 create mode 100644 packages/frontendmu-nuxt/components/ui/alert-dialog/index.ts

diff --git a/packages/frontendmu-nuxt/components/ui/alert-dialog/AlertDialog.vue b/packages/frontendmu-nuxt/components/ui/alert-dialog/AlertDialog.vue
new file mode 100644
index 00000000..8fb30de8
--- /dev/null
+++ b/packages/frontendmu-nuxt/components/ui/alert-dialog/AlertDialog.vue
@@ -0,0 +1,14 @@
+<script setup lang="ts">
+import { type AlertDialogEmits, type AlertDialogProps, AlertDialogRoot, useForwardPropsEmits } from 'radix-vue'
+
+const props = defineProps<AlertDialogProps>()
+const emits = defineEmits<AlertDialogEmits>()
+
+const forwarded = useForwardPropsEmits(props, emits)
+</script>
+
+<template>
+  <AlertDialogRoot v-bind="forwarded">
+    <slot />
+  </AlertDialogRoot>
+</template>
diff --git a/packages/frontendmu-nuxt/components/ui/alert-dialog/AlertDialogAction.vue b/packages/frontendmu-nuxt/components/ui/alert-dialog/AlertDialogAction.vue
new file mode 100644
index 00000000..60e5af73
--- /dev/null
+++ b/packages/frontendmu-nuxt/components/ui/alert-dialog/AlertDialogAction.vue
@@ -0,0 +1,20 @@
+<script setup lang="ts">
+import { buttonVariants } from '@/components/ui/button'
+import { cn } from '@/lib/utils'
+import { AlertDialogAction, type AlertDialogActionProps } from 'radix-vue'
+import { computed, type HTMLAttributes } from 'vue'
+
+const props = defineProps<AlertDialogActionProps & { class?: HTMLAttributes['class'] }>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+</script>
+
+<template>
+  <AlertDialogAction v-bind="delegatedProps" :class="cn(buttonVariants(), props.class)">
+    <slot />
+  </AlertDialogAction>
+</template>
diff --git a/packages/frontendmu-nuxt/components/ui/alert-dialog/AlertDialogCancel.vue b/packages/frontendmu-nuxt/components/ui/alert-dialog/AlertDialogCancel.vue
new file mode 100644
index 00000000..61c5bb8a
--- /dev/null
+++ b/packages/frontendmu-nuxt/components/ui/alert-dialog/AlertDialogCancel.vue
@@ -0,0 +1,27 @@
+<script setup lang="ts">
+import { buttonVariants } from '@/components/ui/button'
+import { cn } from '@/lib/utils'
+import { AlertDialogCancel, type AlertDialogCancelProps } from 'radix-vue'
+import { computed, type HTMLAttributes } from 'vue'
+
+const props = defineProps<AlertDialogCancelProps & { class?: HTMLAttributes['class'] }>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+</script>
+
+<template>
+  <AlertDialogCancel
+    v-bind="delegatedProps"
+    :class="cn(
+      buttonVariants({ variant: 'outline' }),
+      'mt-2 sm:mt-0',
+      props.class,
+    )"
+  >
+    <slot />
+  </AlertDialogCancel>
+</template>
diff --git a/packages/frontendmu-nuxt/components/ui/alert-dialog/AlertDialogContent.vue b/packages/frontendmu-nuxt/components/ui/alert-dialog/AlertDialogContent.vue
new file mode 100644
index 00000000..83fdf990
--- /dev/null
+++ b/packages/frontendmu-nuxt/components/ui/alert-dialog/AlertDialogContent.vue
@@ -0,0 +1,42 @@
+<script setup lang="ts">
+import { cn } from '@/lib/utils'
+import {
+  AlertDialogContent,
+  type AlertDialogContentEmits,
+  type AlertDialogContentProps,
+  AlertDialogOverlay,
+  AlertDialogPortal,
+  useForwardPropsEmits,
+} from 'radix-vue'
+import { computed, type HTMLAttributes } from 'vue'
+
+const props = defineProps<AlertDialogContentProps & { class?: HTMLAttributes['class'] }>()
+const emits = defineEmits<AlertDialogContentEmits>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+
+const forwarded = useForwardPropsEmits(delegatedProps, emits)
+</script>
+
+<template>
+  <AlertDialogPortal>
+    <AlertDialogOverlay
+      class="fixed inset-0 z-50 bg-black/80  data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0"
+    />
+    <AlertDialogContent
+      v-bind="forwarded"
+      :class="
+        cn(
+          'fixed left-1/2 top-1/2 z-50 grid w-full max-w-lg -translate-x-1/2 -translate-y-1/2 gap-4 border bg-background p-6 shadow-lg duration-200 data-[state=open]:animate-in data-[state=closed]:animate-out data-[state=closed]:fade-out-0 data-[state=open]:fade-in-0 data-[state=closed]:zoom-out-95 data-[state=open]:zoom-in-95 data-[state=closed]:slide-out-to-left-1/2 data-[state=closed]:slide-out-to-top-[48%] data-[state=open]:slide-in-from-left-1/2 data-[state=open]:slide-in-from-top-[48%] sm:rounded-lg',
+          props.class,
+        )
+      "
+    >
+      <slot />
+    </AlertDialogContent>
+  </AlertDialogPortal>
+</template>
diff --git a/packages/frontendmu-nuxt/components/ui/alert-dialog/AlertDialogDescription.vue b/packages/frontendmu-nuxt/components/ui/alert-dialog/AlertDialogDescription.vue
new file mode 100644
index 00000000..9f6db432
--- /dev/null
+++ b/packages/frontendmu-nuxt/components/ui/alert-dialog/AlertDialogDescription.vue
@@ -0,0 +1,25 @@
+<script setup lang="ts">
+import { cn } from '@/lib/utils'
+import {
+  AlertDialogDescription,
+  type AlertDialogDescriptionProps,
+} from 'radix-vue'
+import { computed, type HTMLAttributes } from 'vue'
+
+const props = defineProps<AlertDialogDescriptionProps & { class?: HTMLAttributes['class'] }>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+</script>
+
+<template>
+  <AlertDialogDescription
+    v-bind="delegatedProps"
+    :class="cn('text-sm text-muted-foreground', props.class)"
+  >
+    <slot />
+  </AlertDialogDescription>
+</template>
diff --git a/packages/frontendmu-nuxt/components/ui/alert-dialog/AlertDialogFooter.vue b/packages/frontendmu-nuxt/components/ui/alert-dialog/AlertDialogFooter.vue
new file mode 100644
index 00000000..55d0a0eb
--- /dev/null
+++ b/packages/frontendmu-nuxt/components/ui/alert-dialog/AlertDialogFooter.vue
@@ -0,0 +1,21 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
+import { cn } from '@/lib/utils'
+
+const props = defineProps<{
+  class?: HTMLAttributes['class']
+}>()
+</script>
+
+<template>
+  <div
+    :class="
+      cn(
+        'flex flex-col-reverse sm:flex-row sm:justify-end sm:gap-x-2',
+        props.class,
+      )
+    "
+  >
+    <slot />
+  </div>
+</template>
diff --git a/packages/frontendmu-nuxt/components/ui/alert-dialog/AlertDialogHeader.vue b/packages/frontendmu-nuxt/components/ui/alert-dialog/AlertDialogHeader.vue
new file mode 100644
index 00000000..c61c4495
--- /dev/null
+++ b/packages/frontendmu-nuxt/components/ui/alert-dialog/AlertDialogHeader.vue
@@ -0,0 +1,16 @@
+<script setup lang="ts">
+import type { HTMLAttributes } from 'vue'
+import { cn } from '@/lib/utils'
+
+const props = defineProps<{
+  class?: HTMLAttributes['class']
+}>()
+</script>
+
+<template>
+  <div
+    :class="cn('flex flex-col gap-y-2 text-center sm:text-left', props.class)"
+  >
+    <slot />
+  </div>
+</template>
diff --git a/packages/frontendmu-nuxt/components/ui/alert-dialog/AlertDialogTitle.vue b/packages/frontendmu-nuxt/components/ui/alert-dialog/AlertDialogTitle.vue
new file mode 100644
index 00000000..6cd13f93
--- /dev/null
+++ b/packages/frontendmu-nuxt/components/ui/alert-dialog/AlertDialogTitle.vue
@@ -0,0 +1,22 @@
+<script setup lang="ts">
+import { cn } from '@/lib/utils'
+import { AlertDialogTitle, type AlertDialogTitleProps } from 'radix-vue'
+import { computed, type HTMLAttributes } from 'vue'
+
+const props = defineProps<AlertDialogTitleProps & { class?: HTMLAttributes['class'] }>()
+
+const delegatedProps = computed(() => {
+  const { class: _, ...delegated } = props
+
+  return delegated
+})
+</script>
+
+<template>
+  <AlertDialogTitle
+    v-bind="delegatedProps"
+    :class="cn('text-lg font-semibold', props.class)"
+  >
+    <slot />
+  </AlertDialogTitle>
+</template>
diff --git a/packages/frontendmu-nuxt/components/ui/alert-dialog/AlertDialogTrigger.vue b/packages/frontendmu-nuxt/components/ui/alert-dialog/AlertDialogTrigger.vue
new file mode 100644
index 00000000..4f5e2fd0
--- /dev/null
+++ b/packages/frontendmu-nuxt/components/ui/alert-dialog/AlertDialogTrigger.vue
@@ -0,0 +1,11 @@
+<script setup lang="ts">
+import { AlertDialogTrigger, type AlertDialogTriggerProps } from 'radix-vue'
+
+const props = defineProps<AlertDialogTriggerProps>()
+</script>
+
+<template>
+  <AlertDialogTrigger v-bind="props">
+    <slot />
+  </AlertDialogTrigger>
+</template>
diff --git a/packages/frontendmu-nuxt/components/ui/alert-dialog/index.ts b/packages/frontendmu-nuxt/components/ui/alert-dialog/index.ts
new file mode 100644
index 00000000..448d5198
--- /dev/null
+++ b/packages/frontendmu-nuxt/components/ui/alert-dialog/index.ts
@@ -0,0 +1,9 @@
+export { default as AlertDialog } from './AlertDialog.vue'
+export { default as AlertDialogAction } from './AlertDialogAction.vue'
+export { default as AlertDialogCancel } from './AlertDialogCancel.vue'
+export { default as AlertDialogContent } from './AlertDialogContent.vue'
+export { default as AlertDialogDescription } from './AlertDialogDescription.vue'
+export { default as AlertDialogFooter } from './AlertDialogFooter.vue'
+export { default as AlertDialogHeader } from './AlertDialogHeader.vue'
+export { default as AlertDialogTitle } from './AlertDialogTitle.vue'
+export { default as AlertDialogTrigger } from './AlertDialogTrigger.vue'

From acccbe0ad43024e6f5a04087739692010fc8efaa Mon Sep 17 00:00:00 2001
From: Sandeep Ramgolam <sandeep@ramgolam.com>
Date: Tue, 19 Nov 2024 22:02:59 +0400
Subject: [PATCH 17/19] Remove unnecessary return statement in useAuth function

---
 packages/frontendmu-nuxt/auth-utils/useAuth.ts | 2 --
 1 file changed, 2 deletions(-)

diff --git a/packages/frontendmu-nuxt/auth-utils/useAuth.ts b/packages/frontendmu-nuxt/auth-utils/useAuth.ts
index 366944fe..ff1070d6 100644
--- a/packages/frontendmu-nuxt/auth-utils/useAuth.ts
+++ b/packages/frontendmu-nuxt/auth-utils/useAuth.ts
@@ -238,8 +238,6 @@ export default function useAuth(client: DirectusClient<any> & AuthenticationClie
     }
 
     console.log('Provider not found')
-
-    return false
   }
 
   async function updateUserProfile({ profile_updates }: { profile_updates: DirectusAstroUser }) {

From fc613f06f3f2fc7210e1fabe91c90cdda32c7567 Mon Sep 17 00:00:00 2001
From: Sandeep Ramgolam <sandeep@ramgolam.com>
Date: Tue, 19 Nov 2024 22:03:23 +0400
Subject: [PATCH 18/19] Add LoginWithGithub component with OAuth functionality

---
 .../components/auth/LoginWithGithub.vue       | 65 +++++++++++++++++++
 1 file changed, 65 insertions(+)
 create mode 100644 packages/frontendmu-nuxt/components/auth/LoginWithGithub.vue

diff --git a/packages/frontendmu-nuxt/components/auth/LoginWithGithub.vue b/packages/frontendmu-nuxt/components/auth/LoginWithGithub.vue
new file mode 100644
index 00000000..f0886d3b
--- /dev/null
+++ b/packages/frontendmu-nuxt/components/auth/LoginWithGithub.vue
@@ -0,0 +1,65 @@
+<script setup lang="ts">
+import useAuth, { getClient } from '@/auth-utils/useAuth'
+import {
+    AlertDialog,
+    AlertDialogAction,
+    AlertDialogCancel,
+    AlertDialogContent,
+    AlertDialogDescription,
+    AlertDialogFooter,
+    AlertDialogHeader,
+    AlertDialogTitle,
+    AlertDialogTrigger,
+} from '@/components/ui/alert-dialog'
+import { Button } from '@/components/ui/button'
+
+const { oAuthLogin } = useAuth(getClient())
+
+function triggerRedirectToGithub() {
+    window.location.href = oAuthLogin('github')!
+}
+</script>
+
+<template>
+    <AlertDialog>
+        <AlertDialogTrigger as-child>
+            <div class="flex w-full items-center justify-center gap-3 rounded-md bg-[#000000]  hover:bg-black/50  px-3 py-1.5 text-white focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[#24292F]"
+                disabled>
+                <svg class="h-5 w-5" aria-hidden="true" fill="currentColor" viewBox="0 0 20 20">
+                    <path fill-rule="evenodd"
+                        d="M10 0C4.477 0 0 4.484 0 10.017c0 4.425 2.865 8.18 6.839 9.504.5.092.682-.217.682-.483 0-.237-.008-.868-.013-1.703-2.782.605-3.369-1.343-3.369-1.343-.454-1.158-1.11-1.466-1.11-1.466-.908-.62.069-.608.069-.608 1.003.07 1.531 1.032 1.531 1.032.892 1.53 2.341 1.088 2.91.832.092-.647.35-1.088.636-1.338-2.22-.253-4.555-1.113-4.555-4.951 0-1.093.39-1.988 1.029-2.688-.103-.253-.446-1.272.098-2.65 0 0 .84-.27 2.75 1.026A9.564 9.564 0 0110 4.844c.85.004 1.705.115 2.504.337 1.909-1.296 2.747-1.027 2.747-1.027.546 1.379.203 2.398.1 2.651.64.7 1.028 1.595 1.028 2.688 0 3.848-2.339 4.695-4.566 4.942.359.31.678.921.678 1.856 0 1.338-.012 2.419-.012 2.747 0 .268.18.58.688.482A10.019 10.019 0 0020 10.017C20 4.484 15.522 0 10 0z"
+                        clip-rule="evenodd" />
+                </svg>
+                <span class="text-sm font-semibold leading-6">GitHub</span>
+            </div>
+        </AlertDialogTrigger>
+        <AlertDialogContent class="border-white/20">
+            <AlertDialogHeader>
+                <AlertDialogTitle class="flex gap-2 items-center">
+                    <Icon name="carbon:logo-github" class="block w-5 h-5 p-0.5 " />
+
+                    Login with GitHub is experimental !
+                </AlertDialogTitle>
+                <AlertDialogDescription>
+                    <ol class="list-decimal list-outside pl-4 space-y-2">
+                        <li>
+                            Make sure your email address is <a target="_blank" class="underline"
+                                href="https://github.com/settings/emails#toggle_visibility_note">publicly visible on
+                                GitHub. </a>
+                        </li>
+                        <li>
+                            If you have logged in with a Google account previously, the same email will not work if it's
+                            associated to your github account.
+                        </li>
+                    </ol>
+                </AlertDialogDescription>
+            </AlertDialogHeader>
+            <AlertDialogFooter>
+                <AlertDialogCancel>Cancel</AlertDialogCancel>
+                <AlertDialogAction @click="triggerRedirectToGithub()">
+                    Continue
+                </AlertDialogAction>
+            </AlertDialogFooter>
+        </AlertDialogContent>
+    </AlertDialog>
+</template>

From b06ef97b33384b5a3008e2e98964193db9d3a534 Mon Sep 17 00:00:00 2001
From: Sandeep Ramgolam <sandeep@ramgolam.com>
Date: Tue, 19 Nov 2024 22:03:30 +0400
Subject: [PATCH 19/19] Refactor LoginForm.vue for improved readability and
 structure

---
 .../components/auth/LoginForm.vue             | 102 ++++--------------
 1 file changed, 20 insertions(+), 82 deletions(-)

diff --git a/packages/frontendmu-nuxt/components/auth/LoginForm.vue b/packages/frontendmu-nuxt/components/auth/LoginForm.vue
index c8f021f2..a333201f 100644
--- a/packages/frontendmu-nuxt/components/auth/LoginForm.vue
+++ b/packages/frontendmu-nuxt/components/auth/LoginForm.vue
@@ -22,25 +22,18 @@ const developmentEnvironment = process.env.NODE_ENV === 'development'
 
 <template>
   <div class="sm:mx-auto sm:w-full sm:max-w-md">
-    <MiscLogoFec
-      class="w-10 mx-auto dark:text-white"
-      :loading="isLoading"
-    />
+    <MiscLogoFec class="w-10 mx-auto dark:text-white" :loading="isLoading" />
     <h2 class="mt-6 text-center text-2xl font-bold leading-9 tracking-tight text-verse-900 dark:text-verse-100">
       {{ isLoggedIn ? 'Welcome back' : 'Sign in to your account' }}
     </h2>
   </div>
   <div class="mt-10 sm:mx-auto sm:w-full sm:max-w-[480px] flex justify-center">
     <div
-      class="bg-verse-200/10 overflow-hidden dark:bg-verse-500/20 backdrop-blur-sm px-6 py-12 shadow-2xl rounded-lg sm:px-12 w-11/12"
-    >
+      class="bg-verse-200/10 overflow-hidden dark:bg-verse-500/20 backdrop-blur-sm px-6 py-12 shadow-2xl rounded-lg sm:px-12 w-11/12">
       <div v-if="isLoggedIn">
         <div class="text-center flex flex-col gap-8 text-verse-900 dark:text-verse-100 w-full">
           <span>
-            You are logged in as <NuxtLink
-              class="underline"
-              href="/user/me"
-            > {{ user?.full_name }}
+            You are logged in as <NuxtLink class="underline" href="/user/me"> {{ user?.full_name }}
             </NuxtLink>
           </span>
           <div v-if="willRedirect">
@@ -48,10 +41,7 @@ const developmentEnvironment = process.env.NODE_ENV === 'development'
           </div>
 
           <div class="grid grid-cols-2 gap-4 w-full justify-evenly">
-            <BaseButton
-              color="neutral"
-              @click="logout"
-            >
+            <BaseButton color="neutral" @click="logout">
               Logout
             </BaseButton>
             <BaseButton href="/user/me">
@@ -61,48 +51,26 @@ const developmentEnvironment = process.env.NODE_ENV === 'development'
         </div>
       </div>
       <div v-else>
-        <form
-          v-if="developmentEnvironment"
-          class="space-y-6"
-          @submit.prevent="login()"
-        >
+        <form v-if="developmentEnvironment" class="space-y-6" @submit.prevent="login()">
           <div>
-            <label
-              for="email"
-              class="block text-sm font-medium leading-6 text-verse-900 dark:text-verse-100"
-            >
+            <label for="email" class="block text-sm font-medium leading-6 text-verse-900 dark:text-verse-100">
               Email address
             </label>
             <div class="mt-2">
-              <input
-                id="email"
-                v-model="email"
-                name="email"
-                type="email"
-                autocomplete="email"
+              <input id="email" v-model="email" name="email" type="email" autocomplete="email"
                 class="block w-full rounded-md border-0 p-1.5 text-verse-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-verse-600 sm:text-sm sm:leading-6"
-                required
-              >
+                required>
             </div>
           </div>
 
           <div>
-            <label
-              for="password"
-              class="block text-sm font-medium leading-6 text-verse-900 dark:text-verse-100"
-            >
+            <label for="password" class="block text-sm font-medium leading-6 text-verse-900 dark:text-verse-100">
               Password
             </label>
             <div class="mt-2">
-              <input
-                id="password"
-                v-model="password"
-                name="password"
-                type="password"
-                autocomplete="current-password"
+              <input id="password" v-model="password" name="password" type="password" autocomplete="current-password"
                 required
-                class="block w-full rounded-md border-0 p-1.5 text-verse-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-verse-600 sm:text-sm sm:leading-6"
-              >
+                class="block w-full rounded-md border-0 p-1.5 text-verse-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-verse-600 sm:text-sm sm:leading-6">
             </div>
           </div>
 
@@ -119,10 +87,8 @@ const developmentEnvironment = process.env.NODE_ENV === 'development'
                     </div> -->
 
           <div>
-            <button
-              type="submit"
-              class="flex w-full justify-center rounded-md bg-verse-600 px-3 py-1.5 text-sm font-semibold leading-6 text-white shadow-sm hover:bg-verse-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-verse-600"
-            >
+            <button type="submit"
+              class="flex w-full justify-center rounded-md bg-verse-600 px-3 py-1.5 text-sm font-semibold leading-6 text-white shadow-sm hover:bg-verse-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-verse-600">
               Sign in
             </button>
           </div>
@@ -134,45 +100,19 @@ const developmentEnvironment = process.env.NODE_ENV === 'development'
           </div>
 
           <div class="relative">
-            <div
-              class="absolute inset-0 flex items-center"
-              aria-hidden="true"
-            >
+            <div class="absolute inset-0 flex items-center" aria-hidden="true">
               <div class="w-full border-t border-verse-500/20" />
             </div>
           </div>
 
           <div class="mt-10 grid sm:grid-cols-2 gap-4">
-            <a
-              :href="oAuthLogin('google')"
-              class="flex w-full items-center justify-center gap-3 rounded-md bg-[#000000] hover:bg-black/50 transition-all duration-300 px-3 py-1.5 text-white focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[#1D9BF0]"
-            >
-              <Icon
-                name="logos:google-icon"
-                class="h-5 w-5"
-              />
+            <a :href="oAuthLogin('google')"
+              class="flex w-full items-center justify-center gap-3 rounded-md bg-[#000000] hover:bg-black/50 transition-all duration-300 px-3 py-1.5 text-white focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[#1D9BF0]">
+              <Icon name="logos:google-icon" class="h-5 w-5" />
               <span class="text-sm font-semibold leading-6">Google</span>
             </a>
 
-            <a
-              :href="oAuthLogin('github')"
-              class="flex w-full items-center justify-center gap-3 rounded-md bg-[#000000]  hover:bg-black/50  px-3 py-1.5 text-white focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-[#24292F]"
-              disabled
-            >
-              <svg
-                class="h-5 w-5"
-                aria-hidden="true"
-                fill="currentColor"
-                viewBox="0 0 20 20"
-              >
-                <path
-                  fill-rule="evenodd"
-                  d="M10 0C4.477 0 0 4.484 0 10.017c0 4.425 2.865 8.18 6.839 9.504.5.092.682-.217.682-.483 0-.237-.008-.868-.013-1.703-2.782.605-3.369-1.343-3.369-1.343-.454-1.158-1.11-1.466-1.11-1.466-.908-.62.069-.608.069-.608 1.003.07 1.531 1.032 1.531 1.032.892 1.53 2.341 1.088 2.91.832.092-.647.35-1.088.636-1.338-2.22-.253-4.555-1.113-4.555-4.951 0-1.093.39-1.988 1.029-2.688-.103-.253-.446-1.272.098-2.65 0 0 .84-.27 2.75 1.026A9.564 9.564 0 0110 4.844c.85.004 1.705.115 2.504.337 1.909-1.296 2.747-1.027 2.747-1.027.546 1.379.203 2.398.1 2.651.64.7 1.028 1.595 1.028 2.688 0 3.848-2.339 4.695-4.566 4.942.359.31.678.921.678 1.856 0 1.338-.012 2.419-.012 2.747 0 .268.18.58.688.482A10.019 10.019 0 0020 10.017C20 4.484 15.522 0 10 0z"
-                  clip-rule="evenodd"
-                />
-              </svg>
-              <span class="text-sm font-semibold leading-6">GitHub</span>
-            </a>
+            <AuthLoginWithGithub />
 
             <!-- <a
               :href="oAuthLogin('discord')"
@@ -189,10 +129,8 @@ const developmentEnvironment = process.env.NODE_ENV === 'development'
         </div>
       </div>
 
-      <div
-        class="absolute bottom-0 left-0 bg-zinc-500/20 dark:bg-verse-500/20 backdrop-blur-2xl  right-0 z-10 h-0"
-        :style="{ height: countDownPercentage }"
-      />
+      <div class="absolute bottom-0 left-0 bg-zinc-500/20 dark:bg-verse-500/20 backdrop-blur-2xl  right-0 z-10 h-0"
+        :style="{ height: countDownPercentage }" />
     </div>
   </div>
 </template>