feat: FRO-2 Implement Login Component

src/main.ts

@@ -11,6 +11,7 @@ import 'quasar/dist/quasar.css'
 import { createPinia } from 'pinia'
 import axios from 'axios'
 import VueAxios from 'vue-axios'
+import {useUserInfo} from "@/composables/useUserInfo.ts";
 
 const app = createApp(App)
 const pinia = createPinia()
@@ -33,6 +34,8 @@ axios.interceptors.response.use(
   res => res,
   err => {
     if (err.response?.status === 401) {
+      const info = useUserInfo();
+      info.clearUserInfo();
       router.replace({name: 'login'});
     }
     return Promise.reject(err);

src/router/index.ts

@@ -49,6 +49,7 @@ router.beforeEach(async (to, from, next) => {
     );
     next();
   } catch (err) {
+    info.clearUserInfo();
     next('/login');
   }
 });

src/types/GameTypes.ts

@@ -45,3 +45,5 @@ type WonInfo = {
   winner: PodiumPlayer | null
   allPlayers: PodiumPlayer[]
 }
+
+export type { GameInfo, LobbyInfo, TieInfo, TrumpInfo, WonInfo }

src/views/LoginView.vue

@@ -62,6 +62,7 @@ import { useQuasar } from 'quasar'
 import { ref } from 'vue'
 import axios from "axios";
 import router from "@/router";
+import {useUserInfo} from "@/composables/useUserInfo.ts";
 
 const api = window?.__RUNTIME_CONFIG__?.API_URL;
 
@@ -71,12 +72,14 @@ const username = ref(null)
 const password = ref(null)
 const inProgress = ref(false)
 const loginError = ref('')
+const uInfo = useUserInfo()
 
 const onSubmit = () => {
   if (inProgress.value) return
   inProgress.value = true
   loginError.value = ''
-  axios.post(`${api}/login`, {username: username.value, password: password.value}, {withCredentials: true}).then(response => {
+  axios.post(`${api}/login`, {username: username.value, password: password.value}, {withCredentials: true}).then((response) => {
+    uInfo.setUserInfo(response.data.user.username, response.data.user.id)
     router.push("/")
   }).catch(() => {
     loginError.value = 'Invalid username or password'