chore(frontend): Refactoring

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

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>