feat: interraction between the backend and keycloak

front/MyINPulse-front/src/services/api.ts

@@ -14,7 +14,8 @@ axiosInstance.interceptors.response.use(
     async (error) => {
         const originalRequest = error.config;
         if (
-            error.response.status === 401 &&
+            ((error.response && error.response.status === 401) ||
+                error.code == "ERR_NETWORK") &&
             !originalRequest._retry &&
             store.authenticated
         ) {

front/MyINPulse-front/src/views/test.vue

@@ -0,0 +1,73 @@
+<script setup lang="ts">
+import { store } from "../main.ts";
+import { callApi } from "@/services/api.ts";
+import TempModal from "@/components/temp-modal.vue";
+let roleName;
+let username;
+</script>
+
+<template>
+    <h1>Test page</h1>
+    <table class="test" style="width: 100%">
+        <tbody>
+            <tr>
+                <td>Is Currently Authenticated ?</td>
+                <td>{{ store.authenticated }}</td>
+                <td><button @click="store.login">Login</button></td>
+                <td><button @click="store.logout">Logout</button></td>
+                <td><button @click="store.signup">Signup</button></td>
+            </tr>
+            <tr>
+                <td>current token</td>
+                <td>{{ store.user.token }}</td>
+                <td>
+                    <button @click="store.refreshUserToken">Refresh</button>
+                </td>
+            </tr>
+            <tr>
+                <td>Current refresh token</td>
+                <td>{{ store.user.refreshToken }}</td>
+            </tr>
+            <tr>
+                <td>Entrepreneur API call</td>
+                <td><button @click="callApi('random')">call</button></td>
+                <td>res</td>
+                <td></td>
+            </tr>
+            <tr>
+                <td>Admin API call</td>
+                <td><button @click="callApi('random2')">call</button></td>
+                <td>res</td>
+                <td></td>
+            </tr>
+            <tr>
+                <td>Unauth API call</td>
+                <td><button @click="callApi('random3')">call</button></td>
+                <td>res</td>
+                <td id="3"></td>
+            </tr>
+        </tbody>
+    </table>
+    <input v-model="username" />
+    <input v-model="roleName" />
+    <button @click="setRoleToUser(username, roleName)">callAPI</button>
+    <button @click="assignRoleToUser">callAPI2</button>
+    <temp-modal></temp-modal>
+</template>
+
+<style scoped>
+table {
+    width: 100px;
+    table-layout: fixed;
+}
+tr {
+    width: 100%;
+    height: 100%;
+}
+td {
+    border: solid 1px black;
+    width: 20%;
+    height: 100%;
+    overflow: hidden;
+}
+</style>