SyntaxSquad/DADProject#9 feat: User info dysplayed in /users/

frontend/src/stores/api.js

@@ -1,3 +1,4 @@
+// src/stores/api.js
 import { defineStore } from 'pinia'
 import axios from 'axios'
 import { inject, ref } from 'vue'
@@ -21,7 +22,10 @@ export const useAPIStore = defineStore('api', () => {
     const response = await axios.post(`${API_BASE_URL}/login`, credentials)
     token.value = response.data.token
     axios.defaults.headers.common['Authorization'] = `Bearer ${token.value}`
+
+    return response
   }
+
   const postLogout = async () => {
     await axios.post(`${API_BASE_URL}/logout`)
     token.value = undefined
@@ -53,11 +57,19 @@ export const useAPIStore = defineStore('api', () => {
     return axios.get(`${API_BASE_URL}/games?${queryParams}`)
   }
 
+  const initToken = (storedToken) => {
+    if (storedToken) {
+      token.value = storedToken
+      axios.defaults.headers.common['Authorization'] = `Bearer ${storedToken}`
+    }
+  }
+
   return {
     postLogin,
     postLogout,
     getAuthUser,
     getGames,
     gameQueryParameters,
+    initToken,
   }
 })

frontend/src/stores/auth.js

@@ -1,6 +1,8 @@
+// src/stores/auth.js
 import { defineStore } from 'pinia'
 import { ref, computed } from 'vue'
 import { useAPIStore } from './api'
+import axios from 'axios'
 
 export const useAuthStore = defineStore('auth', () => {
   const apiStore = useAPIStore()
@@ -20,8 +22,10 @@ export const useAuthStore = defineStore('auth', () => {
     token.value = jwtToken
     if (jwtToken) {
       localStorage.setItem('token', jwtToken)
+      axios.defaults.headers.common['Authorization'] = `Bearer ${jwtToken}`
     } else {
       localStorage.removeItem('token')
+      delete axios.defaults.headers.common['Authorization']
     }
   }
 
@@ -30,20 +34,57 @@ export const useAuthStore = defineStore('auth', () => {
   }
 
   const login = async (credentials) => {
-    await apiStore.postLogin(credentials)
-    const response = await apiStore.getAuthUser()
-    const jwtToken = response
-    const user = response.data
+    try {
+      // postLogin already sets the token and axios headers, and returns the response
+      const loginResponse = await apiStore.postLogin(credentials)
 
-    setToken(jwtToken)
-    currentUser.value = response.data
-    return response.data
+      // Extract the token from the response
+      const jwtToken = loginResponse.data.token
+
+      // Store token in auth store (for localStorage)
+      setToken(jwtToken)
+
+      // Use the user data from login response (it's already there!)
+      currentUser.value = loginResponse.data.user
+
+      return currentUser.value
+    } catch (error) {
+      // Clear everything on login failure
+      setToken(null)
+      currentUser.value = undefined
+      throw error
+    }
   }
 
   const logout = async () => {
-    await apiStore.postLogout()
-    currentUser.value = undefined
-    setToken(null)
+    try {
+      await apiStore.postLogout()
+    } catch (error) {
+      console.error('Logout API call failed:', error)
+    } finally {
+      currentUser.value = undefined
+      setToken(null)
+    }
+  }
+
+  // Initialize auth from localStorage on app start
+  const initAuth = async () => {
+    if (token.value) {
+      axios.defaults.headers.common['Authorization'] = `Bearer ${token.value}`
+      apiStore.initToken(token.value)
+
+      // Try to fetch current user if we don't have it
+      if (!currentUser.value) {
+        try {
+          const userResponse = await apiStore.getAuthUser()
+          currentUser.value = userResponse.data
+        } catch (error) {
+          console.error('Failed to restore user session:', error)
+          // Clear invalid token
+          setToken(null)
+        }
+      }
+    }
   }
 
   return {
@@ -55,5 +96,6 @@ export const useAuthStore = defineStore('auth', () => {
     getToken,
     login,
     logout,
+    initAuth,
   }
 })

frontend/src/stores/user.js

@@ -1,39 +1,58 @@
 import { defineStore } from 'pinia'
 import axios from 'axios'
+import { useAuthStore } from './auth'
 
 export const useUserStore = defineStore('user', {
   state: () => ({
     user: null,
-    token: localStorage.getItem('token') || null,
+    loading: false,
+    error: null
   }),
 
+  getters: {
+    currentUser: (state) => state.user
+  },
+
   actions: {
-    async fetchUser() {
-      if (!this.token) return
+    async fetchUserProfile() {
+      const authStore = useAuthStore()
+      const token = authStore.getToken()
+
+      if (!token) {
+        this.error = 'No authentication token found'
+        throw new Error('No authentication token found')
+      }
+
+      this.loading = true
+      this.error = null
 
       try {
         const response = await axios.get('/api/users/me', {
           headers: {
-            Authorization: `Bearer ${this.token}`
+            Authorization: `Bearer ${token}`,
+            Accept: 'application/json'
           }
         })
 
         this.user = response.data
+        return response.data
       } catch (error) {
-        console.error("Failed to fetch user")
+        this.error = error.response?.data?.message || 'Failed to fetch user profile'
+
+        if (error.response?.status === 401) {
+          authStore.logout()
+        }
+
+        throw error
+      } finally {
+        this.loading = false
       }
     },
 
-    setToken(token) {
-      this.token = token
-      localStorage.setItem('token', token)
-    },
-
-    logout() {
-      this.token = null
+    clearUser() {
       this.user = null
-      localStorage.removeItem('token')
+      this.error = null
+      this.loading = false
     }
   }
 })
-