style: fix linting issues met Prettier

frontend/src/config.ts

@@ -1,5 +1,5 @@
 export const apiConfig = {
-    baseUrl: window.location.hostname == "localhost" ? "http://localhost:3000" : window.location.origin
-}
+    baseUrl: window.location.hostname == "localhost" ? "http://localhost:3000" : window.location.origin,
+};
 
 export const loginRoute = "/login";

frontend/src/router/index.ts

@@ -32,7 +32,7 @@ const router = createRouter({
         },
         {
             path: "/callback",
-            component: CallbackPage
+            component: CallbackPage,
         },
         {
             path: "/student/:id",

frontend/src/services/api-client.ts

@@ -1,5 +1,5 @@
 import axios from "axios";
-import {apiConfig} from "@/config.ts";
+import { apiConfig } from "@/config.ts";
 
 const apiClient = axios.create({
     baseURL: apiConfig.baseUrl,

frontend/src/services/auth/auth-config-loader.ts

@@ -1,5 +1,5 @@
 import apiClient from "@/services/api-client.ts";
-import type {FrontendAuthConfig} from "@/services/auth/auth.d.ts";
+import type { FrontendAuthConfig } from "@/services/auth/auth.d.ts";
 
 /**
  * Fetch the authentication configuration from the backend.
@@ -22,6 +22,6 @@ export async function loadAuthConfig() {
             response_type: authConfig.teacher.responseType,
             scope: authConfig.teacher.scope,
             post_logout_redirect_uri: window.location.origin,
-        }
+        },
     };
 }

frontend/src/services/auth/auth-service.ts

@@ -2,15 +2,15 @@
  * Service for all authentication- and authorization-related tasks.
  */
 
-import {computed, reactive} from "vue";
-import type {AuthState, Role, UserManagersForRoles} from "@/services/auth/auth.d.ts";
-import {User, UserManager} from "oidc-client-ts";
-import {loadAuthConfig} from "@/services/auth/auth-config-loader.ts";
-import authStorage from "./auth-storage.ts"
-import {loginRoute} from "@/config.ts";
+import { computed, reactive } from "vue";
+import type { AuthState, Role, UserManagersForRoles } from "@/services/auth/auth.d.ts";
+import { User, UserManager } from "oidc-client-ts";
+import { loadAuthConfig } from "@/services/auth/auth-config-loader.ts";
+import authStorage from "./auth-storage.ts";
+import { loginRoute } from "@/config.ts";
 import apiClient from "@/services/api-client.ts";
 import router from "@/router";
-import type {AxiosError} from "axios";
+import type { AxiosError } from "axios";
 
 const authConfig = await loadAuthConfig();
 
@@ -40,7 +40,7 @@ async function loadUser(): Promise<User | null> {
 const authState = reactive<AuthState>({
     user: null,
     accessToken: null,
-    activeRole: authStorage.getActiveRole() || null
+    activeRole: authStorage.getActiveRole() || null,
 });
 
 const isLoggedIn = computed(() => authState.user !== null);
@@ -70,7 +70,7 @@ async function handleLoginCallback(): Promise<void> {
     if (!activeRole) {
         throw new Error("Login callback received, but the user is not logging in!");
     }
-    authState.user = await userManagers[activeRole].signinCallback() || null;
+    authState.user = (await userManagers[activeRole].signinCallback()) || null;
 }
 
 /**
@@ -104,29 +104,31 @@ async function logout(): Promise<void> {
 }
 
 // Registering interceptor to add the authorization header to each request when the user is logged in.
-apiClient.interceptors.request.use(async (reqConfig) => {
-    const token = authState?.user?.access_token;
-    if (token) {
-        reqConfig.headers.Authorization = `Bearer ${token}`;
-    }
-    return reqConfig;
-}, (error) => Promise.reject(error));
+apiClient.interceptors.request.use(
+    async (reqConfig) => {
+        const token = authState?.user?.access_token;
+        if (token) {
+            reqConfig.headers.Authorization = `Bearer ${token}`;
+        }
+        return reqConfig;
+    },
+    (error) => Promise.reject(error),
+);
 
 // Registering interceptor to refresh the token when a request failed because it was expired.
 apiClient.interceptors.response.use(
-    response => response,
-    async (error: AxiosError<{message?: string}>) => {
+    (response) => response,
+    async (error: AxiosError<{ message?: string }>) => {
         if (error.response?.status === 401) {
             if (error.response!.data.message === "token_expired") {
                 console.log("Access token expired, trying to refresh...");
                 await renewToken();
                 return apiClient(error.config!); // Retry the request
-            }  // Apparently, the user got a 401 because he was not logged in yet at all. Redirect him to login.
-                await initiateLogin()
-            
+            } // Apparently, the user got a 401 because he was not logged in yet at all. Redirect him to login.
+            await initiateLogin();
         }
         return Promise.reject(error);
-    }
+    },
 );
 
-export default {authState, isLoggedIn, initiateLogin, loadUser, handleLoginCallback, loginAs, logout};
+export default { authState, isLoggedIn, initiateLogin, loadUser, handleLoginCallback, loginAs, logout };

frontend/src/services/auth/auth-storage.ts

@@ -1,4 +1,4 @@
-import type {Role} from "@/services/auth/auth.d.ts";
+import type { Role } from "@/services/auth/auth.d.ts";
 
 export default {
     /**
@@ -22,5 +22,5 @@ export default {
      */
     deleteActiveRole() {
         localStorage.removeItem("activeRole");
-    }
-}
+    },
+};

frontend/src/services/auth/auth.d.ts

@@ -1,22 +1,22 @@
-import {type User, UserManager} from "oidc-client-ts";
+import { type User, UserManager } from "oidc-client-ts";
 
 export type AuthState = {
-    user: User | null,
-    accessToken: string | null,
-    activeRole: Role | null
+    user: User | null;
+    accessToken: string | null;
+    activeRole: Role | null;
 };
 
 export type FrontendAuthConfig = {
-    student: FrontendIdpConfig,
-    teacher: FrontendIdpConfig
+    student: FrontendIdpConfig;
+    teacher: FrontendIdpConfig;
 };
 
 export type FrontendIdpConfig = {
-    authority: string,
-    clientId: string,
-    scope: string,
-    responseType: string
+    authority: string;
+    clientId: string;
+    scope: string;
+    responseType: string;
 };
 
 export type Role = "student" | "teacher";
-export type UserManagersForRoles = {student: UserManager, teacher: UserManager};
+export type UserManagersForRoles = { student: UserManager; teacher: UserManager };

frontend/src/views/CallbackPage.vue

@@ -1,7 +1,7 @@
 <script setup lang="ts">
-    import {useRouter} from "vue-router";
-    import {onMounted} from "vue";
-    import auth from "../services/auth/auth-service.ts"
+    import { useRouter } from "vue-router";
+    import { onMounted } from "vue";
+    import auth from "../services/auth/auth-service.ts";
 
     const router = useRouter();
 
@@ -19,6 +19,4 @@
     <p>Logging you in...</p>
 </template>
 
-<style scoped>
-
-</style>
+<style scoped></style>

frontend/src/views/HomePage.vue

@@ -1,12 +1,12 @@
 <script setup lang="ts">
     import auth from "@/services/auth/auth-service.ts";
     import apiClient from "@/services/api-client.ts";
-    import {ref} from "vue";
+    import { ref } from "vue";
 
     const testResponse = ref(null);
 
     async function testAuthenticated() {
-        testResponse.value = await apiClient.get("/auth/testAuthenticatedOnly")
+        testResponse.value = await apiClient.get("/auth/testAuthenticatedOnly");
     }
 </script>
 
@@ -15,14 +15,14 @@
         <!-- TODO Placeholder implementation to test the login - replace by a more beautiful page later -->
         <b>Welcome to the dwengo homepage</b>
         <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>
+            <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>
-
-</style>
+<style scoped></style>

frontend/src/views/LoginPage.vue

@@ -23,12 +23,12 @@
             <v-btn @click="loginAsTeacher">Login as teacher</v-btn>
         </div>
         <div v-if="auth.isLoggedIn.value">
-            <p>You are currently logged in as {{ auth.authState.user!.profile.name }} ({{ auth.authState.activeRole }})</p>
+            <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>
 </template>
 
-<style scoped>
-
-</style>
+<style scoped></style>