chore(frontend): Refactoring

Refactoring zodat de structuur van de authenticatieservice in de client duidelijker is.

frontend/src/views/CallbackPage.vue

@@ -1,13 +1,13 @@
 <script setup lang="ts">
     import {useRouter} from "vue-router";
     import {onMounted} from "vue";
-    import {handleLoginCallback} from "@/store/auth-store.ts";
+    import auth from "../services/auth/auth-service.ts"
 
     const router = useRouter();
 
     onMounted(async () => {
         try {
-            await handleLoginCallback();
+            await auth.handleLoginCallback();
             await router.replace("/"); // Redirect to home (or dashboard)
         } catch (error) {
             console.error("OIDC callback error:", error);

frontend/src/views/HomePage.vue

@@ -1,15 +1,26 @@
 <script setup lang="ts">
-    import {isLoggedIn, authState} from "@/store/auth-store.ts";
+    import auth from "@/services/auth/auth-service.ts";
+    import apiClient from "@/services/api-client.ts";
+    import {ref} from "vue";
+
+    const testResponse = ref(null);
+
+    async function testAuthenticated() {
+        testResponse.value = await apiClient.get("/auth/testAuthenticatedOnly")
+    }
 </script>
 
 <template>
     <main>
         <!-- TODO Placeholder implementation to test the login - replace by a more beautiful page later -->
         <b>Welcome to the dwengo homepage</b>
-        <div v-if="isLoggedIn">
-            <p>Hello {{authState.user?.profile.name}}!</p>
-            <p>Your access token for the backend is: <code>{{authState.user?.access_token}}</code></p>
+        <div v-if="auth.isLoggedIn.value">
+            <p>Hello {{auth.authState.user?.profile.name}}!</p>
+            <p>Your access token for the backend is: <code>{{auth.authState.user?.access_token}}</code></p>
         </div>
+
+        <v-btn @click="testAuthenticated">Send test request</v-btn>
+        <p v-if="testResponse">Response from the test request: {{ testResponse }}</p>
     </main>
 </template>
 <style scoped>

frontend/src/views/LoginPage.vue

@@ -1,30 +1,29 @@
 <script setup lang="ts">
-
-import {isLoggedIn, loginAs, logout, authState} from "@/store/auth-store.ts";
+    import auth from "@/services/auth/auth-service.ts";
 
     function loginAsStudent() {
-        loginAs("student");
+        auth.loginAs("student");
     }
 
     function loginAsTeacher() {
-        loginAs("teacher");
+        auth.loginAs("teacher");
     }
 
     function performLogout() {
-        logout();
+        auth.logout();
     }
 </script>
 
 <template>
     <main>
         <!-- TODO Placeholder implementation to test the login - replace by a more beautiful page later -->
-        <div v-if="!isLoggedIn">
+        <div v-if="!auth.isLoggedIn.value">
             <p>You are currently not logged in.</p>
             <v-btn @click="loginAsStudent">Login as student</v-btn>
             <v-btn @click="loginAsTeacher">Login as teacher</v-btn>
         </div>
-        <div v-if="isLoggedIn">
-            <p>You are currently logged in as {{ authState.user!.profile.name }} ({{ authState.activeRole }})</p>
+        <div v-if="auth.isLoggedIn.value">
+            <p>You are currently logged in as {{ auth.authState.user!.profile.name }} ({{ auth.authState.activeRole }})</p>
             <v-btn @click="performLogout">Logout</v-btn>
         </div>
     </main>