feat: now respect codestyle

front/MyINPulse-front/.prettierrc

@@ -0,0 +1,7 @@
+{
+  "useTabs":false,
+  "semi":true,
+  "trailingComma":"es5",
+  "arrowParens":"always",
+  "tabWidth":4
+}

front/MyINPulse-front/eslint.config.js

@@ -1,29 +1,29 @@
-import eslint from '@eslint/js';
+import eslint from "@eslint/js";
-import eslintConfigPrettier from 'eslint-config-prettier';
+import eslintConfigPrettier from "eslint-config-prettier";
-import eslintPluginVue from 'eslint-plugin-vue';
+import eslintPluginVue from "eslint-plugin-vue";
-import globals from 'globals';
+import globals from "globals";
-import typescriptEslint from 'typescript-eslint';
+import typescriptEslint from "typescript-eslint";
 
 export default typescriptEslint.config(
-    { ignores: ['*.d.ts', '**/coverage', '**/dist'] },
+    { ignores: ["*.d.ts", "**/coverage", "**/dist"] },
     {
         extends: [
             eslint.configs.recommended,
             ...typescriptEslint.configs.recommended,
-            ...eslintPluginVue.configs['flat/recommended'],
+            ...eslintPluginVue.configs["flat/recommended"],
         ],
-        files: ['**/*.{ts,vue}'],
+        files: ["**/*.{ts,vue}"],
         languageOptions: {
-            ecmaVersion: 'latest',
+            ecmaVersion: "latest",
-            sourceType: 'module',
+            sourceType: "module",
             globals: globals.browser,
             parserOptions: {
                 parser: typescriptEslint.parser,
             },
-       },
+        },
         rules: {
             // your rules
         },
     },
     eslintConfigPrettier
-);
+);

front/MyINPulse-front/package.json

@@ -32,6 +32,7 @@
     "globals": "^15.14.0",
     "jiti": "^2.4.2",
     "npm-run-all2": "^7.0.2",
+    "prettier": "3.5.0",
     "typescript": "~5.7.3",
     "typescript-eslint": "^8.23.0",
     "vite": "^6.0.11",

front/MyINPulse-front/src/App.vue

@@ -1,49 +1,47 @@
 <script setup lang="ts">
-import { RouterView } from 'vue-router'
+import { RouterView } from "vue-router";
 import ErrorWrapper from "@/views/errorWrapper.vue";
 import ProjectComponent from "@/components/ProjectComponent.vue";
 </script>
 
 <template>
-  <HeaderComponent />
+    <HeaderComponent />
-  <error-wrapper></error-wrapper>
+    <error-wrapper></error-wrapper>
-  <div id="main">
+    <div id="main">
-      <ProjectComponent
+        <ProjectComponent
-        v-for="(project, index) in projects" 
+            v-for="(project, index) in projects"
-        :key="index"
+            :key="index"
-        :project-name="project.name"
+            :project-name="project.name"
-      />
+        />
     </div>
-  <RouterView />
+    <RouterView />
 </template>
 
 <script lang="ts">
 import HeaderComponent from "@/components/HeaderComponent.vue";
 
 export default {
-  name: 'App',
+    name: "App",
-  components: {
+    components: {
-    HeaderComponent,
+        HeaderComponent,
-  },
+    },
-  data() {
+    data() {
-    return {
+        return {
-      projects: [
+            projects: [
-        {
+                {
-          name: 'Projet Alpha',
+                    name: "Projet Alpha",
-          //link: './project-alpha.html',
+                    //link: './project-alpha.html',
-          //members: ['Alice', 'Bob', 'Charlie'],
+                    //members: ['Alice', 'Bob', 'Charlie'],
-        },
+                },
-        {
+                {
-          name: 'Projet Beta',
+                    name: "Projet Beta",
-          //link: './project-beta.html',
+                    //link: './project-beta.html',
-          //members: ['David', 'Eve', 'Frank'],
+                    //members: ['David', 'Eve', 'Frank'],
-        },
+                },
-      ],
+            ],
-    };
+        };
-  },
+    },
 };
-
 </script>
 
-<style scoped>
+<style scoped></style>
-</style>

front/MyINPulse-front/src/components/HeaderComponent.vue

@@ -1,26 +1,26 @@
 <template>
     <header>
-      <img src="./icons/logo inpulse.png" alt="INPulse" />
+        <img src="./icons/logo inpulse.png" alt="INPulse" />
     </header>
-  </template>
+</template>
-  
-  <script lang="ts">
-  export default {
-    name: 'HeaderComponent',
-  };
-  </script>
-  
-  <style scoped>
-  header img {
-    width: 100px;
-  }
 
-  header{
+<script lang="ts">
+export default {
+    name: "HeaderComponent",
+};
+</script>
+
+<style scoped>
+header img {
+    width: 100px;
+}
+
+header {
     display: flex;
     justify-content: space-between;
     align-items: center;
     padding: 10px 20px;
     background-color: #fff;
     border-bottom: 2px solid #ddd;
-  }
+}
-  </style>
+</style>

front/MyINPulse-front/src/components/ProjectComponent.vue

@@ -3,21 +3,19 @@
         <div class="project-header">
             <h2>{{ projectName }}</h2>
         </div>
-
     </div>
 </template>
 
-
 <script lang="ts">
-import type {PropType} from "vue";
+import type { PropType } from "vue";
 
 export default {
-    name: 'ProjectComponent',
+    name: "ProjectComponent",
     props: {
         projectName: {
-          type: Object as PropType<string>,
+            type: Object as PropType<string>,
-          required: true
+            required: true,
         },
-    }
+    },
-}
+};
-</script>
+</script>

front/MyINPulse-front/src/components/errorModal.vue

@@ -1,29 +1,43 @@
 <script setup lang="ts">
-import {color} from "@/services/popupDisplayer.ts";
+import { color } from "@/services/popupDisplayer.ts";
-import type {PropType} from "vue";
+import type { PropType } from "vue";
 
 defineProps({
-  errorMessage: {
+    errorMessage: {
-    type: Object as PropType<string>,
+        type: Object as PropType<string>,
-    required: true
+        required: true,
-  },
+    },
-  errorColor: {
+    errorColor: {
-    type: Object as PropType<color>,
+        type: Object as PropType<color>,
-    default: color.Red
+        default: color.Red,
-  }
+    },
 });
 </script>
 
 <template>
-  <div :class='["red", "yellow", "blue", "green"][errorColor]' class="error-modal">
+    <div
-    <p>{{["Erreur :(", "Warning :|", "Info :)", "Succes ;)"][errorColor]}}</p>
+        :class="['red', 'yellow', 'blue', 'green'][errorColor]"
-    <p>{{errorMessage}}</p>
+        class="error-modal"
-    <div class="loading" :class='["red-loader", "yellow-loader", "blue-loader", "green-loader"][errorColor]'></div>
+    >
-  </div>
+        <p>
+            {{
+                ["Erreur :(", "Warning :|", "Info :)", "Succes ;)"][errorColor]
+            }}
+        </p>
+        <p>{{ errorMessage }}</p>
+        <div
+            class="loading"
+            :class="
+                ['red-loader', 'yellow-loader', 'blue-loader', 'green-loader'][
+                    errorColor
+                ]
+            "
+        ></div>
+    </div>
 </template>
 
 <style scoped>
-  .error-modal{
+.error-modal {
     margin-bottom: 1em;
     padding: 1em;
     border-radius: 1em;
@@ -31,41 +45,45 @@ defineProps({
     overflow: hidden;
     position: relative;
     animation: disappear 5s linear forwards;
-  }
+}
 
-  .red{
+.red {
     background-color: #ee6055;
     color: white;
-  }
+}
-  .red-loader {
+
+.red-loader {
     background-color: #fa8383;
-  }
+}
 
-  .yellow{
+.yellow {
-    background-color: #FF9D23;
+    background-color: #ff9d23;
-     color: white;
+    color: white;
-   }
+}
-  .yellow-loader{
+
+.yellow-loader {
     background-color: #ffbf81;
-  }
+}
 
-  .blue {
+.blue {
     background-color: #809bce;
     color: white;
-  }
+}
-  .blue-loader{
-    background-color: #95b8d1;
-  }
 
-  .green {
+.blue-loader {
+    background-color: #95b8d1;
+}
+
+.green {
     background-color: green;
     color: white;
-  }
+}
-  .green-loader {
-    background-color: darkgreen;
-  }
 
-  .loading {
+.green-loader {
+    background-color: darkgreen;
+}
+
+.loading {
     box-sizing: border-box;
     position: absolute;
     padding: 0;
@@ -74,33 +92,33 @@ defineProps({
     height: 1em;
     width: 0;
     animation: loading 4s linear forwards;
-  }
+}
 
-  /* Animation for the loading bar */
+/* Animation for the loading bar */
-  @keyframes loading {
+@keyframes loading {
     0% {
-      width: 100%;
+        width: 100%;
     }
     100% {
-      width: 0;
+        width: 0;
     }
-  }
+}
 
-  @keyframes disappear {
+@keyframes disappear {
     0% {
-      height: 100px;
+        height: 100px;
-      padding: 1em;
+        padding: 1em;
-      margin: 1em;
+        margin: 1em;
     }
     80% {
-      height: 100px;
+        height: 100px;
-      padding: 1em;
+        padding: 1em;
-      margin: 1em;
+        margin: 1em;
     }
     100% {
-      height: 0;
+        height: 0;
-      margin: 0;
+        margin: 0;
-      padding: 0;
+        padding: 0;
     }
-  }
+}
-</style>
+</style>

front/MyINPulse-front/src/main.ts

@@ -1,17 +1,16 @@
-import { createApp } from 'vue'
+import { createApp } from "vue";
-import App from './App.vue'
+import App from "./App.vue";
-import router from './router/router.ts'
+import router from "./router/router.ts";
-import {createPinia} from "pinia";
+import { createPinia } from "pinia";
-import piniaPluginPersistedstate from 'pinia-plugin-persistedstate';
+import piniaPluginPersistedstate from "pinia-plugin-persistedstate";
-import keycloakService from './services/keycloak';
+import keycloakService from "./services/keycloak";
-import {type AuthStore, useAuthStore} from "@/stores/authStore.ts";
+import { type AuthStore, useAuthStore } from "@/stores/authStore.ts";
-
 
 let store: AuthStore;
 
 keycloakService.CallInit(() => {
     try {
-        const app = createApp(App)
+        const app = createApp(App);
 
         // Setup pinia store, allowing user to keep logged in status after refresh
         const pinia = createPinia();
@@ -19,19 +18,14 @@ keycloakService.CallInit(() => {
         app.use(pinia);
         store = useAuthStore();
         keycloakService.CallInitStore(store);
-        app.use(router)
+        app.use(router);
 
-        app.mount('#app');
+        app.mount("#app");
     } catch (e) {
-        console.error("Error while initiating Keycloak.")
+        console.error("Error while initiating Keycloak.");
-        console.error(e)
+        console.error(e);
-        createApp(App).mount('#app');
+        createApp(App).mount("#app");
     }
+});
 
-})
+export { store };
-
-
-
-
-
-export {store};

front/MyINPulse-front/src/router/router.ts

@@ -1,17 +1,17 @@
-import { createRouter, createWebHistory } from 'vue-router'
+import { createRouter, createWebHistory } from "vue-router";
 
 const router = createRouter({
-  history: createWebHistory(import.meta.env.BASE_URL),
+    history: createWebHistory(import.meta.env.BASE_URL),
-  routes: [
+    routes: [
-    {
+        {
-      path: '/test',
+            path: "/test",
-      name: 'test',
+            name: "test",
-      // route level code-splitting
+            // route level code-splitting
-      // this generates a separate chunk (About.[hash].js) for this route
+            // this generates a separate chunk (About.[hash].js) for this route
-      // which is lazy-loaded when the route is visited.
+            // which is lazy-loaded when the route is visited.
-      component: () => import('../views/testComponent.vue'),
+            component: () => import("../views/testComponent.vue"),
-    },
+        },
-  ],
+    ],
-})
+});
 
-export default router
+export default router;

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

@@ -1,31 +1,36 @@
-import axios, {type AxiosError, type AxiosResponse} from "axios";
+import axios, { type AxiosError, type AxiosResponse } from "axios";
-import {store} from "@/main.ts";
+import { store } from "@/main.ts";
-import {addNewMessage, color} from "@/services/popupDisplayer.ts";
+import { addNewMessage, color } from "@/services/popupDisplayer.ts";
 
 const axiosInstance = axios.create({
     baseURL: import.meta.env.VITE_BACKEND_URL,
     headers: {
-        'Content-Type': 'application/json',
+        "Content-Type": "application/json",
     },
 });
 
 axiosInstance.interceptors.response.use(
-    response => response, // Directly return successful responses.
+    (response) => response, // Directly return successful responses.
-    async error => {
+    async (error) => {
         const originalRequest = error.config;
-        if (error.response.status === 401 && !originalRequest._retry && store.authenticated) {
+        if (
+            error.response.status === 401 &&
+            !originalRequest._retry &&
+            store.authenticated
+        ) {
             originalRequest._retry = true; // Mark the request as retried to avoid infinite loops.
             try {
                 await store.refreshUserToken();
                 // Update the authorization header with the new access token.
-                axiosInstance.defaults.headers.common['Authorization'] = `Bearer ${store.user.token}`;
+                axiosInstance.defaults.headers.common["Authorization"] =
+                    `Bearer ${store.user.token}`;
                 return axiosInstance(originalRequest); // Retry the original request with the new access token.
             } catch (refreshError) {
                 // Handle refresh token errors by clearing stored tokens and redirecting to the login page.
-                console.error('Token refresh failed:', refreshError);
+                console.error("Token refresh failed:", refreshError);
-                localStorage.removeItem('accessToken');
+                localStorage.removeItem("accessToken");
-                localStorage.removeItem('refreshToken');
+                localStorage.removeItem("refreshToken");
-                window.location.href = '/login';
+                window.location.href = "/login";
                 return Promise.reject(refreshError);
             }
         }
@@ -34,20 +39,29 @@ axiosInstance.interceptors.response.use(
 );
 
 // TODO: spawn a error modal
-function defaultApiErrorHandler(err: AxiosError){
+function defaultApiErrorHandler(err: AxiosError) {
     addNewMessage(err.message, color.Red);
 }
 
-function defaultApiSuccessHandler(response: AxiosResponse){
+function defaultApiSuccessHandler(response: AxiosResponse) {
-    addNewMessage(response.data, color.Green)
+    addNewMessage(response.data, color.Green);
-}
-function callApi(endpoint: string, onSuccessHandler?: (response: AxiosResponse) => void, onErrorHandler?: (error: AxiosError) => void): void {
-    axiosInstance.get(endpoint).then(
-        onSuccessHandler == null ? defaultApiSuccessHandler : onSuccessHandler
-    ).catch(
-            onErrorHandler == null ? defaultApiErrorHandler: onErrorHandler
-    )
 }
 
+function callApi(
+    endpoint: string,
+    onSuccessHandler?: (response: AxiosResponse) => void,
+    onErrorHandler?: (error: AxiosError) => void
+): void {
+    axiosInstance
+        .get(endpoint)
+        .then(
+            onSuccessHandler == null
+                ? defaultApiSuccessHandler
+                : onSuccessHandler
+        )
+        .catch(
+            onErrorHandler == null ? defaultApiErrorHandler : onErrorHandler
+        );
+}
 
-export {callApi}
+export { callApi };

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

@@ -1,34 +1,31 @@
-import Keycloak from 'keycloak-js';
+import Keycloak from "keycloak-js";
-import type {AuthStore} from "@/stores/authStore.ts";
+import type { AuthStore } from "@/stores/authStore.ts";
 
 const options = {
     url: import.meta.env.VITE_KEYCLOAK_URL,
     clientId: import.meta.env.VITE_KEYCLOAK_CLIENT_ID,
-    realm: import.meta.env.VITE_KEYCLOAK_REALM
+    realm: import.meta.env.VITE_KEYCLOAK_REALM,
-}
+};
-
 
 const keycloak = new Keycloak(options);
 let authenticated: boolean | undefined;
 let store = null;
 
-async function login(){
+async function login() {
     try {
-        await keycloak.login() // https://www.keycloak.org/securing-apps/javascript-adapter#:~:text=when%20initialization%20completes.-,login(options),-Redirects%20to%20login
+        await keycloak.login(); // https://www.keycloak.org/securing-apps/javascript-adapter#:~:text=when%20initialization%20completes.-,login(options),-Redirects%20to%20login
         return keycloak;
     } catch (error) {
-        console.log(error)
+        console.log(error);
     }
 }
 
-async function signup(){
+async function signup() {
     try {
-        await keycloak.login(
+        await keycloak.login({ action: "register" }); // https://www.keycloak.org/securing-apps/javascript-adapter#:~:text=when%20initialization%20completes.-,login(options),-Redirects%20to%20login
-            {action: "register"}
-        ) // https://www.keycloak.org/securing-apps/javascript-adapter#:~:text=when%20initialization%20completes.-,login(options),-Redirects%20to%20login
         return keycloak;
     } catch (error) {
-        console.log(error)
+        console.log(error);
     }
 }
 
@@ -43,13 +40,13 @@ async function init(onInitCallback: () => void) {
             onLoad: "check-sso",
             silentCheckSsoRedirectUri: `${location.origin}/silent-check-sso.htm`,
             responseMode: "query",
-        })
+        });
-        onInitCallback()
+        onInitCallback();
     } catch (error) {
-        console.error("Keycloak init failed")
+        console.error("Keycloak init failed");
-        console.error(error)
+        console.error(error);
     }
-};
+}
 
 /**
  * Initializes store with Keycloak user data
@@ -57,17 +54,19 @@ async function init(onInitCallback: () => void) {
  */
 async function initStore(storeInstance: AuthStore) {
     try {
-        store = storeInstance
+        store = storeInstance;
-        console.log(keycloak)
+        console.log(keycloak);
-        await store.initOauth(keycloak)
+        await store.initOauth(keycloak);
 
         // Show alert if user is not authenticated
-        if (!authenticated) { console.warn("not authenticated") }
+        if (!authenticated) {
+            console.warn("not authenticated");
+        }
     } catch (error) {
-        console.error("Keycloak init failed")
+        console.error("Keycloak init failed");
-        console.error(error)
+        console.error(error);
     }
-};
+}
 
 /**
  * Logout user
@@ -84,7 +83,7 @@ async function refreshToken() {
         await keycloak.updateToken(480);
         return keycloak;
     } catch (error) {
-        console.error('Failed to refresh token');
+        console.error("Failed to refresh token");
         console.error(error);
     }
 }
@@ -98,4 +97,4 @@ const KeycloakService = {
     callSignup: signup,
 };
 
-export default KeycloakService;
+export default KeycloakService;

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

@@ -1,6 +1,11 @@
-import {ref} from "vue";
+import { ref, type Ref } from "vue";
-import {type Ref} from "vue";
+
-enum color {Red, Yellow, Blue, Green}
+enum color {
+    Red,
+    Yellow,
+    Blue,
+    Green,
+}
 
 type ErrorMessageContent = {
     message: string;
@@ -11,23 +16,28 @@ type ErrorMessageContent = {
 
 let id: number = 0;
 const getId = () => {
-    id = id+1;
+    id = id + 1;
     return id;
-}
+};
 
-function addNewMessage(errorMessage: string, type?: color, timeout?: number){
+function addNewMessage(errorMessage: string, type?: color, timeout?: number) {
-    if (timeout == null){
+    if (timeout == null) {
         timeout = 5000;
     }
-    if (type == null){
+    if (type == null) {
         type = color.Red;
     }
 
-    const data: ErrorMessageContent = {message: errorMessage, timeout: timeout, color: type, id: getId()};
+    const data: ErrorMessageContent = {
-    errorList.value.push(data)
+        message: errorMessage,
-    setTimeout(() => errorList.value.slice(0, 1), timeout)
+        timeout: timeout,
+        color: type,
+        id: getId(),
+    };
+    errorList.value.push(data);
+    setTimeout(() => errorList.value.slice(0, 1), timeout);
 }
 
-const errorList: Ref<ErrorMessageContent[]>= ref([])
+const errorList: Ref<ErrorMessageContent[]> = ref([]);
 
-export {addNewMessage, errorList, color, type ErrorMessageContent}
+export { addNewMessage, errorList, color, type ErrorMessageContent };

front/MyINPulse-front/src/stores/authStore.ts

@@ -1,5 +1,5 @@
 import { defineStore } from "pinia";
-import keycloakService from '@/services/keycloak';
+import keycloakService from "@/services/keycloak";
 import type Keycloak from "keycloak-js";
 
 const useAuthStore = defineStore("storeAuth", {
@@ -11,44 +11,51 @@ const useAuthStore = defineStore("storeAuth", {
                 refreshToken: "",
                 username: "",
             },
-        }
+        };
     },
     persist: true,
     getters: {},
     actions: {
         // Initialize Keycloak OAuth
         async initOauth(keycloak: Keycloak, clearData = true) {
-            if(clearData) { await this.clearUserData(); }
+            if (clearData) {
+                await this.clearUserData();
+            }
 
             this.authenticated = !!keycloak.authenticated; // the !! removes undefined
-            if (this.authenticated && keycloak.token && keycloak.idTokenParsed && keycloak.refreshToken){
+            if (
+                this.authenticated &&
+                keycloak.token &&
+                keycloak.idTokenParsed &&
+                keycloak.refreshToken
+            ) {
                 this.user.username = keycloak.idTokenParsed.given_name;
                 this.user.token = keycloak.token;
                 this.user.refreshToken = keycloak.refreshToken;
             }
         },
-        async login(){
+        async login() {
             try {
                 const keycloak = await keycloakService.callLogin();
-                if (keycloak)
+                if (keycloak) await this.initOauth(keycloak);
-                    await this.initOauth(keycloak);
             } catch (error) {
-                console.log(error)
+                console.log(error);
             }
         },
         async signup() {
             try {
                 const keycloak = await keycloakService.callSignup();
-                if (keycloak)
+                if (keycloak) await this.initOauth(keycloak);
-                    await this.initOauth(keycloak);
             } catch (error) {
-                console.log(error)
+                console.log(error);
             }
         },
         // Logout user
         async logout() {
             try {
-                await keycloakService.CallLogout(import.meta.env.VITE_APP_URL + "/test");
+                await keycloakService.CallLogout(
+                    import.meta.env.VITE_APP_URL + "/test"
+                );
                 await this.clearUserData();
             } catch (error) {
                 console.error(error);
@@ -58,8 +65,7 @@ const useAuthStore = defineStore("storeAuth", {
         async refreshUserToken() {
             try {
                 const keycloak = await keycloakService.CallTokenRefresh();
-                if (keycloak)
+                if (keycloak) await this.initOauth(keycloak, false);
-                    await this.initOauth(keycloak, false);
             } catch (error) {
                 console.error(error);
             }
@@ -69,13 +75,13 @@ const useAuthStore = defineStore("storeAuth", {
             this.authenticated = false;
             this.user = {
                 token: "",
-                    refreshToken: "",
+                refreshToken: "",
-                    username: "",
+                username: "",
             };
-        }
+        },
-    }
+    },
 });
 
-type AuthStore = ReturnType<typeof useAuthStore>
+type AuthStore = ReturnType<typeof useAuthStore>;
 
-export {useAuthStore, type AuthStore}
+export { useAuthStore, type AuthStore };

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

@@ -1,22 +1,25 @@
 <script setup lang="ts">
-
+import { errorList } from "@/services/popupDisplayer.ts";
-import {errorList} from "@/services/popupDisplayer.ts";
 import ErrorModal from "@/components/errorModal.vue";
 </script>
 
 <template>
-<div class="error-wrapper">
+    <div class="error-wrapper">
-  <error-modal v-for="elm in errorList" :key="elm.id" :error-message=elm.message :error-color="elm.color"></error-modal>
+        <error-modal
-</div>
+            v-for="elm in errorList"
+            :key="elm.id"
+            :error-message="elm.message"
+            :error-color="elm.color"
+        />
+    </div>
 </template>
 
 <style scoped>
-.error-wrapper{
+.error-wrapper {
-  position: absolute;
+    position: absolute;
-  left: 70%;
+    left: 70%;
-  //background-color: blue;
+    //background-color: blue;
-  height: 100%;
+    height: 100%;
-  width: 30%;
+    width: 30%;
-
 }
-</style>
+</style>

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

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