Merge branch 'develop' into feature/frontend-gameboard-singleplayer

frontend/src/main.js

@@ -13,7 +13,7 @@ console.log('[main.js] ws connection', wsConnection)
 
 const app = createApp(App)
 
-app.provide('socket', io(wsConnection))
+//app.provide('socket', io(wsConnection))
 app.provide('serverBaseURL', `http://${apiDomain}`)
 app.provide('apiBaseURL', `http://${apiDomain}/api`)
 

frontend/src/pages/login/LoginPage.vue

@@ -1,5 +1,5 @@
 <template>
-    <div class="flex min-h-screen items-center justify-center bg-gray-50 px-4 py-12 sm:px-6 lg:px-8">
+    <div class="flex min-h-screen items-center justify-center px-4 py-12 sm:px-6 lg:px-8">
         <div class="w-full max-w-md space-y-8">
             <div>
                 <h2 class="mt-6 text-center text-3xl font-bold tracking-tight text-gray-900">
@@ -64,16 +64,15 @@ const formData = ref({
 
 
 const handleSubmit = async () => {
-
-    toast.promise(authStore.login(formData.value), {
+    const promise = authStore.login(formData.value)
+    toast.promise(promise, {
         loading: 'Calling API',
-        success: (data) => {
-            return `Login Sucessfull - ${data?.name}`
+        success: (user) => {
+            router.push('/')
+            return `Login Successful - ${user.name}`
         },
-        error: (data) => `[API] Error saving game - ${data?.response?.data?.message}`,
+        error: (error) =>
+            error.response?.data?.message
     })
-
-
-    router.push('/')
 }
 </script>

frontend/src/stores/api.js

@@ -16,12 +16,16 @@ export const useAPIStore = defineStore('api', () => {
     },
   })
 
-  // AUTH
   const postLogin = async (credentials) => {
-    const response = await axios.post(`${API_BASE_URL}/login`, credentials)
-    token.value = response.data.token
-    axios.defaults.headers.common['Authorization'] = `Bearer ${token.value}`
-  }
+  const response = await axios.post(`${API_BASE_URL}/login`, credentials)
+
+  if (!response.data.token) throw response
+
+  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

frontend/src/stores/auth.js

@@ -6,31 +6,51 @@ export const useAuthStore = defineStore('auth', () => {
   const apiStore = useAPIStore()
 
   const currentUser = ref(undefined)
+  const token = ref(localStorage.getItem('token') || null)
 
   const isLoggedIn = computed(() => {
-    return currentUser.value !== undefined
+    return currentUser.value !== undefined && token.value !== null
   })
 
   const currentUserID = computed(() => {
     return currentUser.value?.id
   })
 
+  const setToken = (jwtToken) => {
+    token.value = jwtToken
+    if (jwtToken) {
+      localStorage.setItem('token', jwtToken)
+    } else {
+      localStorage.removeItem('token')
+    }
+  }
+
+  const getToken = () => {
+    return token.value
+  }
+
   const login = async (credentials) => {
-    await apiStore.postLogin(credentials)
-    const response = await apiStore.getAuthUser()
-    currentUser.value = response.data
-    return response.data
+      const loginResp = await apiStore.postLogin(credentials)
+      const userResp = await apiStore.getAuthUser()
+      const jwtToken = loginResp.data.token
+      setToken(jwtToken)
+      currentUser.value = userResp.data
+      return userResp.data
   }
 
   const logout = async () => {
     await apiStore.postLogout()
     currentUser.value = undefined
+    setToken(null)
   }
 
   return {
     currentUser,
     isLoggedIn,
     currentUserID,
+    token,
+    setToken,
+    getToken,
     login,
     logout,
   }

frontend/src/stores/socket.js

@@ -5,15 +5,20 @@ export const useSocketStore = defineStore('socket', () => {
   const socket = inject('socket')
 
   const handleConnection = () => {
-    socket.on('connect', () => {
-      console.log(`[Socket] Connected -- ${socket.id}`)
-    })
-    socket.on('disconnect', () => {
-      console.log(`[Socket] Disconnected -- ${socket.id}`)
-    })
+    try {
+      socket.on('connect', () => {
+        console.log(`[Socket] Connected -- ${socket.id}`)
+      })
+      socket.on('disconnect', () => {
+        console.log(`[Socket] Disconnected -- ${socket.id}`)
+      })
+    } catch (error) {
+      console.error('[Socket] Connection error:', error)
+    }
   }
 
   return {
     handleConnection,
   }
+
 })