Auth/integration

adapters/auth/auth.transformer.ts

@@ -1,29 +1,30 @@
-import { type User } from '~/interfaces/User'
 import { type SelfInfo } from './auth.type'
+import { transformUser } from '~/adapters/user.transformer'
 
-export const transformSelfInfoFromApi = (userInfo: any): { info: SelfInfo, user: User } => {
-  const info = {
-    userId: userInfo?.id,
+export const transformSelfInfoFromApi = (userInfo: any): SelfInfo => {
+  return {
+    ...transformUser(userInfo),
+    status: userInfo?.status,
+    incompleteUserDetails: userInfo?.incompleteUserDetails,
     roles: {
       archived: userInfo?.roles?.archived,
-      member: userInfo?.roles?.member
+      member: userInfo?.roles?.member,
     },
-    status: userInfo?.status,
-    incompleteUserDetails: userInfo?.incompleteUserDetails
-  }
-
-  const user = {
-    id: userInfo?.id,
-    username: userInfo?.username,
-    firstName: userInfo?.first_name,
-    lastName: userInfo?.last_name,
-    githubId: userInfo?.github_id,
-    githubDisplayName: userInfo?.github_display_name,
-    avatarUrl: userInfo?.picture?.url
   }
+}
 
+export const transformGoalTokenFromApi = (response: any): {
+  token: {
+    exp: number,
+    access: string,
+  },
+  id: string,
+} => {
   return {
-    info,
-    user
+    token: {
+      exp: response?.user?.token?.exp,
+      access: response?.user?.token?.access,
+    },
+    id: response?.user?.id,
   }
-}
+}

adapters/auth/auth.type.ts

@@ -1,9 +1,15 @@
 export interface SelfInfo {
-  userId: string
+  id: string
+  displayName: string
+  username: string
+  firstName: string
+  lastName: string
+  avatar: string
+  initials: string
   roles: {
-    member: boolean
-    archived: boolean
-  }
-  status: string
-  incompleteUserDetails: boolean
+    archived: boolean | undefined;
+    member: boolean | undefined;
+  };
+  status: string | undefined;
+  incompleteUserDetails: boolean | undefined;
 }

adapters/auth/index.ts

@@ -1,44 +1,28 @@
-import axios, { isAxiosError } from 'axios'
-import { transformSelfInfoFromApi } from './auth.transformer'
-import { type ApiResponse } from '~/interfaces/ApiResponse'
-import { type User } from '~/interfaces/User'
+import axios from 'axios'
+import { transformSelfInfoFromApi, transformGoalTokenFromApi } from './auth.transformer'
 import { type SelfInfo } from './auth.type'
-import {
-  type ErrorApiForbidden,
-  type ErrorApiUnauthorized,
-  type ErrorApiUnavailable,
-  type ErrorApiNotFound,
-  type ErrorApiBase
-} from '~/interfaces/ErrorApi'
 import { getConfig } from '~/config'
 
-type GetSelfResponse = ApiResponse<
-{
-  user: User
-  info: SelfInfo
-},
-ErrorApiForbidden | ErrorApiUnauthorized | ErrorApiUnavailable | ErrorApiNotFound | ErrorApiBase
->
-
-export const getSelf = async (): Promise<GetSelfResponse> => {
+export const getSelf = async (): Promise<SelfInfo> => {
   const config = getConfig();
-  const response: GetSelfResponse = await axios
+  const response = await axios
     .get(`${config.RDS_API}/users/self/`, { withCredentials: true })
-    .then(res => ({ data: transformSelfInfoFromApi(res.data) }))
-    .catch((error) => {
-      if (isAxiosError(error)) {
-        if (error.response != null) {
-          const responseData = error.response.data
-          return {
-            error: {
-              status: responseData.statusCode,
-              error: responseData.error,
-              message: responseData.message
-            }
-          }
-        }
-      }
-      throw error // or Log here
-    })
+    .then(res => transformSelfInfoFromApi(res.data))
+
   return response
 }
+
+export const getGoalApiCredentials = async (): Promise<{
+  token: {
+    exp: number,
+    access: string,
+  },
+  id: string,
+}> => {
+  const config = getConfig();
+  const response = await axios
+    .get(`${config.RDS_API}/goals/token/`, { withCredentials: true })
+    .then(res => transformGoalTokenFromApi(res.data))
+
+  return response
+}

components/AppAvatar.vue

@@ -0,0 +1,17 @@
+<template>
+  <v-avatar v-if="props.avatar" v-bind="props.vBind">
+    <v-img :src="props.avatar" />
+  </v-avatar>
+  <v-avatar v-else color="indigo" v-bind="props.vBind">
+    {{ props.initials }}
+  </v-avatar>
+</template>
+
+<script setup lang="ts">
+const props = defineProps({
+  avatar: String,
+  initials: String,
+  vBind: Object,
+});
+
+</script>

components/AppNavBar.vue

@@ -11,44 +11,63 @@
       </ul>
 
       <v-spacer></v-spacer>
+      <template v-if="isUserLoading">
+        Loading...
+      </template>
 
-      <nuxt-link :href="LOGIN">
-        <button class="login">
-          <span class="login__text">Sign In With GitHub</span>
-          <img class="login__image" src="~/assets/github.png" alt="GitHub Icon" height="15px" width="15px">
-        </button>
-      </nuxt-link>
+      <template v-else>
+        <v-menu v-if="!!props.user">
+          <template v-slot:activator="{ props: activator }">
+            <div v-bind="activator" class="user-detail">
+              <span class="username">
+                Hello, {{ props.user.firstName || props.user.username }}
+              </span>
+              <AppAvatar
+                :avatar="props.user.avatar"
+                :initials="props.user.initials"
+              />
+            </div>
+          </template>
+        </v-menu>
+
+        <nuxt-link v-else :href="LOGIN">
+          <button class="login">
+            <span class="login__text">Sign In With GitHub</span>
+            <img class="login__image" src="~/assets/github.png" alt="GitHub Icon" height="15px" width="15px">
+          </button>
+        </nuxt-link>
+      </template>
     </v-container>
   </v-app-bar>
 </template>
 
-<script>
+<script setup lang="ts">
 import { getConfig } from '~/config'
+import type { SelfInfo } from '~/adapters/auth/auth.type';
+import type { PropType } from 'nuxt/dist/app/compat/capi';
+
+const props = defineProps({
+  user: Object as PropType<SelfInfo | null>,
+  isUserLoading: Boolean,
+})
+
+const isClicked = ref(false);
+const LINKS = [
+  { name: 'Welcome', link: 'https://welcome.realdevsquad.com' },
+  { name: 'Events', link: 'https://www.realdevsquad.com/events.html' },
+  { name: 'Members', link: 'https://members.realdevsquad.com/' },
+  { name: 'Crypto', link: 'https://crypto.realdevsquad.com/' },
+  { name: 'Status', link: 'https://status.realdevsquad.com/' }
+]
+const LOGIN = `${getConfig().RDS_API}/auth/github/login`;
 
-export default {
-  name: 'AppNavBar',
-  data() {
-    return {
-      isClicked: false,
-      LINKS: [
-        { name: 'Welcome', link: 'https://welcome.realdevsquad.com' },
-        { name: 'Events', link: 'https://www.realdevsquad.com/events.html' },
-        { name: 'Members', link: 'https://members.realdevsquad.com/' },
-        { name: 'Crypto', link: 'https://crypto.realdevsquad.com/' },
-        { name: 'Status', link: 'https://status.realdevsquad.com/' }
-      ],
-      LOGIN: `${getConfig().RDS_API}/auth/github/login`
-    }
-  },
-  methods: {
-    toggleClicked(value) {
-      this.isClicked = !value
-    },
-    redirectLogin() {
-      window.location.href = this.LOGIN
-    }
-  }
+function toggleClicked(value: boolean) {
+  isClicked.value = !value
 }
+function redirectLogin() {
+  window.location.href = LOGIN
+}
+
 </script>
 
 <style scoped>
@@ -95,4 +114,14 @@ export default {
 .login__image {
   margin-left: 6px;
 }
+
+.user-detail {
+  cursor: pointer;
+}
+
+.username {
+  font-weight: 700;
+  font-size: 1rem;
+  margin-right: 5px;
+}
 </style>

components/PopupAssignee.vue

@@ -10,12 +10,11 @@
 
         <v-tooltip v-else :text="assignee.displayName">
           <template v-slot:activator="{ props }">
-            <v-avatar v-if="assignee.avatar" v-bind="props">
-              <v-img :src="assignee.avatar" />
-            </v-avatar>
-            <v-avatar v-else color="indigo" v-bind="props">
-              {{ assignee.initials }}
-            </v-avatar>
+            <AppAvatar
+              v-bind="props"
+              :avatar="assignee.avatar"
+              :initials="assignee.initials"
+            />
           </template>
         </v-tooltip>
       </v-btn>

layouts/default.vue

@@ -1,7 +1,7 @@
 <template>
   <v-app>
     <v-layout>
-      <AppNavBar />
+      <AppNavBar :user="auth.user" :isUserLoading="auth.isLoading"/>
       <AppSideBar />
       <v-main>
         <slot />
@@ -10,10 +10,10 @@
   </v-app>
 </template>
 
-<script>
-export default {
-  name: 'DefaultLayout'
-}
+<script setup lang="ts">
+import { useAuthStore } from '~/store/auth';
+
+const auth = useAuthStore();
 </script>
 
 <style>

middleware/authenticate.global.ts

@@ -0,0 +1,9 @@
+import { useAuthStore } from "~/store/auth"
+
+export default defineNuxtRouteMiddleware((to, from) => {
+  const authStore = useAuthStore();
+
+  if (!authStore.user) {
+    authStore.signin();
+  }
+})

models/User.ts

@@ -1,5 +1,4 @@
 import { Model, useRepo } from 'pinia-orm'
-import { Goal } from '~/models/Goal'
 
 export class User extends Model {
   static entity = 'users'
@@ -13,8 +12,6 @@ export class User extends Model {
       lastName: this.string(''),
       avatar: this.string(null),
       initials: this.string(''),
-
-      goals: this.hasMany(Goal, 'assignedTo')
     }
   }
 

nuxt.config.ts

@@ -39,6 +39,7 @@ export default defineNuxtConfig({
     public: {
       GOALS_API: process.env.NUXT_PUBLIC_GOAL_API,
       RDS_API: process.env.NUXT_PUBLIC_RDS_API,
+      ENV: process.env.NUXT_PUBLIC_ENV,
     }
   },
   imports: {