feat: FRO-2 Implement Login Component (#8)

Reviewed-on: #8
Reviewed-by: lq64 <lq@blackhole.local>
Co-authored-by: Janis <janis.e.20@gmx.de>
Co-committed-by: Janis <janis.e.20@gmx.de>

public/env.js

@@ -0,0 +1,4 @@
+window.__RUNTIME_CONFIG__ = {
+  API_URL: "http://localhost:9000"
+};
+

public/env.template.js

@@ -1,4 +1,4 @@
-globalThis.__RUNTIME_CONFIG__ = {
+window.__RUNTIME_CONFIG__ = {
   API_URL: "${API_URL}"
 };
 

src/composables/useUserInfo.ts

@@ -0,0 +1,19 @@
+import { defineStore } from 'pinia'
+import {ref, type Ref} from 'vue'
+
+export const useUserInfo = defineStore('userInfo', () => {
+  const username: Ref<string | null> = ref(null);
+  const userId: Ref<number | null> = ref(null);
+
+  function setUserInfo(name: string, id: number) {
+    username.value = name;
+    userId.value = id;
+  }
+
+  function clearUserInfo() {
+    username.value = null;
+    userId.value = null;
+  }
+
+  return { username, userId, setUserInfo, clearUserInfo };
+});

src/main.ts

@@ -11,17 +11,18 @@ 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()
 
+app.use(pinia)
 app.use(router)
 app.use(Quasar, {
   plugins: {
     Notify
   },
 })
-app.use(pinia)
 app.use(VueAxios, axios)
 app.use(Particles, {
   init: async engine => {
@@ -29,4 +30,16 @@ app.use(Particles, {
   },
 })
 
+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);
+  }
+);
+
 app.mount('#app')

src/router/index.ts

@@ -1,49 +1,60 @@
 import { createRouter, createWebHistory } from 'vue-router'
-import HomeView from '../views/HomeView.vue'
 import LoginView from '../views/LoginView.vue'
 import MainMenuView from '../views/MainMenuView.vue'
 import createGameView from '../views/CreateGame.vue'
 import joinGameView from "@/views/JoinGameView.vue";
+import axios from "axios";
+import { useUserInfo } from "@/composables/useUserInfo";
+
+const api = window?.__RUNTIME_CONFIG__?.API_URL;
 
 const router = createRouter({
   history: createWebHistory(import.meta.env.BASE_URL),
   routes: [
     {
       path: '/',
-      name: 'home',
+      name: 'mainmenu',
-      component: HomeView,
+      component: MainMenuView,
+      meta: { requiresAuth: true }
     },
     {
       path: '/login',
       name: 'login',
       component: LoginView,
-    },
+      meta: { requiresAuth: false }
-    {
-      path: '/about',
-      name: 'about',
-      // route level code-splitting
-      // this generates a separate chunk (About.[hash].js) for this route
-      // which is lazy-loaded when the route is visited.
-      component: () => import('../views/AboutView.vue'),
-    },
-    {
-      path: '/mainmenu',
-      name: 'mainmenu',
-      component: MainMenuView
     },
     {
       path: '/create',
       name: 'create-Game',
-      component: createGameView
+      component: createGameView,
+      meta: { requiresAuth: true }
     },
     {
       path: '/join',
       name: 'join-Game',
-      component: joinGameView
+      component: joinGameView,
-    },
+      meta: { requiresAuth: true }
-
+    }
-
   ],
 })
 
+router.beforeEach(async (to, from, next) => {
+  const info = useUserInfo();
+  if (!to.meta.requiresAuth) return next();
+  try {
+    await axios.get(`${api}/userInfo`, { withCredentials: true }).then(
+      res => {
+        info.setUserInfo(res.data.username, res.data.userId);
+      }
+    );
+    next();
+  } catch (err) {
+    info.clearUserInfo();
+    next('/login');
+  }
+});
+
 export default router
+
+
+

src/stores/auth.ts

@@ -1,60 +0,0 @@
-import {type credentials, type token, type user} from '@/types/authTypes'
-import { defineStore } from 'pinia'
-import {ref, computed, type Ref} from 'vue'
-
-export const useAuthStore = defineStore('auth', () => {
-  const user: Ref<user | null> = ref(null)
-  const token = ref(localStorage.getItem('token') || null)
-
-  const isAuthenticated = computed(() => !!token.value)
-
-  async function login(credentials: credentials) {
-    const response = await fakeLoginApi(credentials)
-
-    token.value = response.token
-    user.value = response.user
-
-    localStorage.setItem('token', token.value)
-  }
-
-  function setToken(newToken: string) {
-    token.value = newToken
-    localStorage.setItem('token', newToken)
-  }
-
-  function logout() {
-    token.value = null
-    user.value = null
-    localStorage.removeItem('token')
-  }
-
-  async function fetchUser() {
-    if (!token.value) return
-
-    const response = await fakeFetchUserApi(token.value)
-    user.value = response.user
-  }
-
-  return {
-    user,
-    token,
-    isAuthenticated,
-    login,
-    setToken,
-    logout,
-    fetchUser,
-  }
-})
-
-async function fakeLoginApi(credentials: credentials): Promise<token> {
-  return {
-    token: 'abc123',
-    user: { id: 1, name: 'John Doe' }
-  }
-}
-
-async function fakeFetchUserApi(token: string): Promise<{ user: user }> {
-  return {
-    user: { id: 1, name: 'John Doe' }
-  }
-}

src/types/GameTypes.ts

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

src/types/authTypes.ts

@@ -1,16 +0,0 @@
-
-type token = {
-  token: string
-  user: user
-}
-type user = {
-  id: number
-  name: string
-}
-type credentials = {
-  username: string
-  password: string
-}
-
-export type { token, user, credentials }
-

src/views/LoginView.vue

@@ -30,6 +30,7 @@
           style="width: 100%"
           filled
           dark
+          type="password"
           label-color="white"
           color="white"
           v-model="password"
@@ -60,8 +61,8 @@
 import { useQuasar } from 'quasar'
 import { ref } from 'vue'
 import axios from "axios";
-import {useAuthStore} from "@/stores/auth.ts";
 import router from "@/router";
+import {useUserInfo} from "@/composables/useUserInfo.ts";
 
 const api = window?.__RUNTIME_CONFIG__?.API_URL;
 
@@ -71,14 +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}).then(response => {
+  axios.post(`${api}/login`, {username: username.value, password: password.value}, {withCredentials: true}).then((response) => {
-    const auth = useAuthStore()
+    uInfo.setUserInfo(response.data.user.username, response.data.user.id)
-    auth.setToken(response.data.token)
     router.push("/")
   }).catch(() => {
     loginError.value = 'Invalid username or password'
@@ -107,11 +108,6 @@ const options = {
       },
       "polygon": {
         "sides": 5
-      },
-      "image": {
-        "src": "img/github.svg",
-        "width": 100,
-        "height": 100
       }
     },
     "opacity": {