feat: Add provider hint to profile

MrSunshyne · MrSunshyne · commit 1c721a0d08f1 · 2024-09-02T23:31:14.000+04:00
diff --git a/packages/frontendmu-nuxt/components/auth/MyProfile.vue b/packages/frontendmu-nuxt/components/auth/MyProfile.vue
@@ -100,32 +100,49 @@ 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"
                   >
                 </div>
               </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,29 +151,41 @@ 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>
                 </div>
               </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
@@ -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
@@ -216,6 +216,8 @@ export interface Attendee {
   name: string
   profile_picture: string
   verified: boolean
+  provider: string
+  external_identifier: string
 }
 
 export interface RSVPResponse {

Original file line number	Diff line number	Diff line change
`@@ -216,6 +216,8 @@ export interface Attendee {`
`216`	`216`	`name: string`
`217`	`217`	`profile_picture: string`
`218`	`218`	`verified: boolean`
	`219`	`+ provider: string`
	`220`	`+ external_identifier: string`
`219`	`221`	`}`
`220`	`222`
`221`	`223`	`export interface RSVPResponse {`