Merge pull request 'Mise en place d'un linter, de formatteur et d'actions afin de vérifier que le code du frontend compile bien' (#3) from linter into main

Reviewed-on: #3
Reviewed-by: Theo <tlelez@enseirb-matmeca.fr>
Vu que vous ne voulez pas faire avancer le projet, je vais abuser de mes droits d'administrateur et le faire.

.gitea/workflows/front.yaml

@@ -0,0 +1,24 @@
+name: CI
+on: push
+jobs:
+  build:
+    runs-on: ubuntu-latest
+    steps:
+      - name: Checkout code
+        uses: actions/checkout@v3
+
+      - name: Install everything
+        working-directory: ./front/MyINPulse-front
+        run: npm i
+      
+      - name: Run ESLint
+        working-directory: ./front/MyINPulse-front
+        run: npx eslint
+
+      - name: Run prettier
+        working-directory: ./front/MyINPulse-front
+        run: npx prettier src --check
+
+      - name: Build frontend
+        working-directory: ./front/MyINPulse-front
+        run: npm run build

front/MyINPulse-front/.gitignore

@@ -36,4 +36,4 @@ playwright-report/
 # Custom
 
 .installed
-package-lock.json
+./package-lock.json

front/MyINPulse-front/.prettierrc

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

front/MyINPulse-front/eslint.config.js

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

front/MyINPulse-front/package.json

@@ -26,8 +26,15 @@
     "@types/node": "^22.10.7",
     "@vitejs/plugin-vue": "^5.2.1",
     "@vue/tsconfig": "^0.7.0",
+    "eslint": "^9.20.0",
+    "eslint-config-prettier": "^10.0.1",
+    "eslint-plugin-vue": "^9.32.0",
+    "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",
     "vite-plugin-vue-devtools": "^7.7.0",
     "vue-tsc": "^2.2.0"

front/MyINPulse-front/src/App.vue

@@ -1,75 +1,47 @@
 <script setup lang="ts">
-import { RouterLink, RouterView } from 'vue-router'
+import { RouterView } from "vue-router";
-import HelloWorld from './components/HelloWorld.vue'
-import Header from './components/Header.vue';
-import ProjectComp from './components/Project-comp.vue';
-import CanvasView from './components/canvas/Lean-canvas.vue';
 import ErrorWrapper from "@/views/errorWrapper.vue";
+import ProjectComponent from "@/components/ProjectComponent.vue";
 </script>
 
 <template>
-  <Header />
+    <HeaderComponent />
-  <error-wrapper></error-wrapper>
+    <error-wrapper></error-wrapper>
-  <div id="main">
+    <div id="main">
-      <ProjectComp 
+        <ProjectComponent
-        v-for="(project, index) in projects" 
+            v-for="(project, index) in projects"
-        :key="index"
+            :key="index"
-        :projectName="project.name"
+            :project-name="project.name"
-        :listName="project.members"
+        />
-      />
     </div>
-  <div id="canvas">
+    <RouterView />
-      <button @click="$router.push('/canvas')">Voir Canvas</button>
-  </div>
-  <RouterView />
 </template>
 
-<style scoped>
-
-#canvas { /* My shit */
-  margin-top: 20px;
-}
-button {
-  padding: 10px 15px;
-  background-color: #007bff;
-  color: white;
-  border: none;
-  cursor: pointer;
-  border-radius: 5px;
-}
-button:hover {
-  background-color: #0056b3;
-}
-
-</style>
-
 <script lang="ts">
-//import Header from "@/components/Header.vue";
+import HeaderComponent from "@/components/HeaderComponent.vue";
-//import ProjectComp from "@/components/Project-comp.vue";
 
 export default {
-  name: 'App',
+    name: "App",
-  components: {
+    components: {
-    Header,
+        HeaderComponent,
-    ProjectComp,
+    },
-    CanvasView, // My shit
+    data() {
-  },
+        return {
-  data() {
+            projects: [
-    return {
+                {
-      projects: [
+                    name: "Projet Alpha",
-        {
+                    //link: './project-alpha.html',
-          name: 'Projet Alpha',
+                    //members: ['Alice', 'Bob', 'Charlie'],
-          //link: './project-alpha.html',
+                },
-          members: ['Alice', 'Bob', 'Charlie'],
+                {
-        },
+                    name: "Projet Beta",
-        {
+                    //link: './project-beta.html',
-          name: 'Projet Beta',
+                    //members: ['David', 'Eve', 'Frank'],
-          //link: './project-beta.html',
+                },
-          members: ['David', 'Eve', 'Frank'],
+            ],
-        },
+        };
-      ],
+    },
-    };
-  },
 };
+</script>
 
-</script>
+<style scoped></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: 'Header',
-  };
-  </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/Project-comp.vue

@@ -1,60 +0,0 @@
-<template>
-    <div class="project">
-        <div class="project-header">
-            <h2>{{ projectName }}</h2>
-            <div class="project-buttons">
-                    <button class="info-btn"><a href="./project-example.html">more infos</a></button>
-                    <button class="contact-btn">Contact</button>
-            </div>
-        </div>
-        <div class="project-body">   
-            <ul>
-                <li v-for="(name, index) in listName" :key="index">{{ name }}</li>
-            </ul>    
-        </div>
-    </div>
-</template>
-
-
-<script lang="ts">
-export default {
-    name: 'Project',
-    props: {
-        projectName: String,
-        listName: Array as() => String[], //something isn't working
-    }
-}
-</script>
-
-<style scoped>
-.project {
-    background: linear-gradient(to right, #f4f4f4, #ffffff);
-    border: 1px solid #ddd;
-    border-radius: 10px;
-    padding: 20px;
-    margin: 20px 0;
-    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1);
-    font-family: Arial, sans-serif;
-  }
-  
-  /* Header Styling */
-  .project-header {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-  }
-  
-  .project-header h2 {
-    font-size: 20px;
-    color: #333;
-    margin: 0;
-  }
-  
-  /* Button Container */
-  .project-buttons {
-    display: flex;
-    gap: 10px;
-  }
-
-
-</style>

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

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

front/MyINPulse-front/src/components/canvas/Avantage.vue

@@ -1,21 +0,0 @@
-<template>
-    <div class="cell produit" @click="toggleExpand">
-        <h3>9. Avantage déloyal</h3>
-        <p>Ce qui ne peut pas être facilement copié ou acheté</p>
-    </div>
-  </template>
-  
-  <script>
-  export default {
-    methods: {
-      toggleExpand(event) {
-        event.currentTarget.classList.toggle("expanded");
-      }
-    }
-  };
-  </script>
-  
-  <style scoped>
-  @import "@/components/canvas/style-project.css";
-  </style>
-  

front/MyINPulse-front/src/components/canvas/Canaux.vue

@@ -1,21 +0,0 @@
-<template>
-    <div class="cell produit" @click="toggleExpand">
-        <h3>5. Canaux</h3>
-        <p>Chemins d'accès aux clients</p>
-    </div>
-  </template>
-  
-  <script>
-  export default {
-    methods: {
-      toggleExpand(event) {
-        event.currentTarget.classList.toggle("expanded");
-      }
-    }
-  };
-  </script>
-  
-  <style scoped>
-  @import "@/components/canvas/style-project.css";
-  </style>
-  

front/MyINPulse-front/src/components/canvas/Couts.vue

@@ -1,21 +0,0 @@
-<template>
-    <div class="cell produit" @click="toggleExpand">
-        <h3>7. Structure des coûts</h3>
-        <p>Coûts d'acquisition, distribution, hébergement, employés...</p>
-    </div>
-  </template>
-  
-  <script>
-  export default {
-    methods: {
-      toggleExpand(event) {
-        event.currentTarget.classList.toggle("expanded");
-      }
-    }
-  };
-  </script>
-  
-  <style scoped>
-  @import "@/components/canvas/style-project.css";
-  </style>
-  

front/MyINPulse-front/src/components/canvas/Header.vue

@@ -1,37 +0,0 @@
-<template>
-    <header>
-      <img src="@/assets/logo-inpulse.png" alt="INPulse Logo">
-      <div class="header-buttons">
-        <div class="contact-menu">
-          <button class="contact-button" @click="toggleDropdown">Contact</button>
-          <div class="contact-dropdown" v-show="isDropdownOpen">
-            <button>Contact All</button>
-            <button>Contact Person 1</button>
-            <button>Contact Person 2</button>
-            <button>Contact Person 3</button>
-          </div>
-          <div class="return"><a href="/">return to list project</a></div>
-        </div>
-      </div>
-    </header>
-  </template>
-  
-  <script>
-  export default {
-    data() {
-      return {
-        isDropdownOpen: false
-      };
-    },
-    methods: {
-      toggleDropdown() {
-        this.isDropdownOpen = !this.isDropdownOpen;
-      }
-    }
-  };
-  </script>
-  
-  <style scoped>
-  @import "@/components/canvas/style-project.css";
-  </style>
-  

front/MyINPulse-front/src/components/canvas/Indicateurs.vue

@@ -1,21 +0,0 @@
-<template>
-    <div class="cell produit" @click="toggleExpand">
-        <h3>8. Indicateurs clés</h3>
-        <p>Activités clés que vous souhaitez évaluer</p>
-    </div>
-  </template>
-  
-  <script>
-  export default {
-    methods: {
-      toggleExpand(event) {
-        event.currentTarget.classList.toggle("expanded");
-      }
-    }
-  };
-  </script>
-  
-  <style scoped>
-  @import "@/components/canvas/style-project.css";
-  </style>
-  

front/MyINPulse-front/src/components/canvas/Lean-canvas.vue

@@ -1,42 +0,0 @@
-<template>
-    <div class="canvas">
-      <div class="row">
-        <Probleme />
-        <Segments />
-      </div>
-      <div class="row">
-        <Solution />
-        <Valeur />
-        <Canaux />
-      </div>
-      <div class="row">
-        <Couts />
-        <Revenus />
-      </div>
-      <div class="row">
-        <Indicateurs />
-        <Avantage />
-      </div>
-    </div>
-  </template>
-  
-  <script>
-  import Probleme from "./Probleme.vue";
-  import Segments from "./Segments.vue";
-  import Solution from "./Solution.vue";
-  import Valeur from "./Valeur.vue";
-  import Canaux from "./Canaux.vue";
-  import Revenus from "./Revenus.vue";
-  import Couts from "./Couts.vue";
-  import Indicateurs from "./Indicateurs.vue";
-  import Avantage from "./Avantage.vue";
-  
-  export default {
-    components: { Probleme, Segments, Solution, Valeur, Canaux, Revenus, Couts, Indicateurs, Avantage }
-  };
-  </script>
-  
-  <style scoped>
-  @import "@/components/canvas/style-project.css";
-  </style>
-  

front/MyINPulse-front/src/components/canvas/Probleme.vue

@@ -1,21 +0,0 @@
-<template>
-    <div class="cell produit" @click="toggleExpand">
-      <h3>1. Problème</h3>
-      <p>3 problèmes essentiels à résoudre pour le client</p>
-    </div>
-  </template>
-  
-  <script>
-  export default {
-    methods: {
-      toggleExpand(event) {
-        event.currentTarget.classList.toggle("expanded");
-      }
-    }
-  };
-  </script>
-  
-  <style scoped>
-  @import "@/components/canvas/style-project.css";
-  </style>
-  

front/MyINPulse-front/src/components/canvas/Revenus.vue

@@ -1,21 +0,0 @@
-<template>
-    <div class="cell produit" @click="toggleExpand">
-        <h3>6. Sources de revenus</h3>
-        <p>Modèle de revenus, durée, revenus espérés, marge espérée</p>
-    </div>
-  </template>
-  
-  <script>
-  export default {
-    methods: {
-      toggleExpand(event) {
-        event.currentTarget.classList.toggle("expanded");
-      }
-    }
-  };
-  </script>
-  
-  <style scoped>
-  @import "@/components/canvas/style-project.css";
-  </style>
-  

front/MyINPulse-front/src/components/canvas/Segments.vue

@@ -1,21 +0,0 @@
-<template>
-    <div class="cell produit" @click="toggleExpand">
-        <h3>2. Segments de clients</h3>
-        <p>Clients cibles</p>
-    </div>
-  </template>
-  
-  <script>
-  export default {
-    methods: {
-      toggleExpand(event) {
-        event.currentTarget.classList.toggle("expanded");
-      }
-    }
-  };
-  </script>
-  
-  <style scoped>
-  @import "@/components/canvas/style-project.css";
-  </style>
-  

front/MyINPulse-front/src/components/canvas/Solution.vue

@@ -1,21 +0,0 @@
-<template>
-    <div class="cell produit" @click="toggleExpand">
-        <h3>4. Solution</h3>
-        <p>3 fonctionnalités essentielles pour le client</p>
-    </div>
-  </template>
-  
-  <script>
-  export default {
-    methods: {
-      toggleExpand(event) {
-        event.currentTarget.classList.toggle("expanded");
-      }
-    }
-  };
-  </script>
-  
-  <style scoped>
-  @import "@/components/canvas/style-project.css";
-  </style>
-  

front/MyINPulse-front/src/components/canvas/Valeur.vue

@@ -1,21 +0,0 @@
-<template>
-    <div class="cell produit" @click="toggleExpand">
-        <h3>3. Proposition de valeur unique</h3>
-        <p>Message simple, clair et persuasif expliquant en quoi votre produit est différent et mérite d'être acheté</p>
-    </div>
-  </template>
-  
-  <script>
-  export default {
-    methods: {
-      toggleExpand(event) {
-        event.currentTarget.classList.toggle("expanded");
-      }
-    }
-  };
-  </script>
-  
-  <style scoped>
-  @import "@/components/canvas/style-project.css";
-  </style>
-  

front/MyINPulse-front/src/components/canvas/style-project.css

@@ -1,184 +0,0 @@
-body {
-    font-family: Arial, sans-serif;
-    margin: 0;
-    padding: 10px;
-  }
-  
-  .canvas {
-    display: flex;
-    flex-direction: column;
-    max-width: 1200px;
-    margin: 20px auto;
-    border: 2px dashed #d33;
-    background: #fff;
-  }
-  
-  .row {
-    display: flex;
-  }
-  
-  .cell {
-    flex: 1;
-    border: 1px solid #ddd;
-    padding: 10px;
-    text-align: center;
-    background-color: #f1f1f1;
-  }
-  
-  .produit {
-    background-color: #f9e4e4;
-  }
-  
-  .marche {
-    background-color: #e4f1f9;
-  }
-  
-  .valeur {
-    background-color: #f9f4e4;
-  }
-  
-  h3 {
-    margin: 0;
-    font-size: 18px;
-    color: #333;
-  }
-  
-  p {
-    margin: 5px 0 0;
-    font-size: 14px;
-  }
-  
-
-  body {
-    font-family: Arial, sans-serif;
-    margin: 0;
-    padding: 0;
-    background-color: #f9f9f9;
-  }
-
-  h1 img {
-    height: 80px;
-  }
-
-  .canvas {
-    max-width: 1200px;
-    margin: 20px auto;
-    padding: 20px;
-    border: 2px dashed #d33;
-    background-color: #fff;
-  }
-
-  .row {
-    display: flex;
-    margin-bottom: 10px;
-  }
-
-  .cell {
-    flex: 1;
-    border: 1px solid #ddd;
-    padding: 20px;
-    text-align: center;
-    background-color: #f1f1f1;
-  }
-
-  #ade {
-    max-width: 1200px;
-    margin: 20px auto;
-    padding: 20px;
-    text-align: center;
-    background-color: #e8f5e9;
-    border: 2px solid #4caf50;
-    border-radius: 10px;
-  }
-
-  #ade h3 {
-    color: #2e7d32;
-  }
-
-  #ade p {
-    margin: 10px 0;
-    font-size: 16px;
-    color: #333;
-  }
-  header {
-    display: flex;
-    justify-content: space-between;
-    align-items: center;
-    padding: 10px 20px;
-    background-color: #fff;
-    border-bottom: 2px solid #ddd;
-  }
-
-  header img {
-    height: 60px;
-  }
-
-  header .contact-menu {
-    position: relative;
-  }
-
-  .expanded {
-    transform: scale(1.2); /* L'élément reste agrandi */
-    transition: transform 0.3s ease; /* Animation fluide */
-  }
-
-  .contact-button, .return {
-    padding: 10px 15px;
-    border: none;
-    border-radius: 4px;
-    background-color: #2196f3;
-    color: #fff;
-    cursor: pointer;
-  }
-
- .contact-button:hover, .return:hover {
-    background-color: #1976d2;
-  }
-
-  /* Dropdown styling */
-  .contact-dropdown {
-    position: absolute;
-    right: 0;
-    top: 50px;
-    display: none;
-    flex-direction: column;
-    gap: 10px;
-    padding: 15px;
-    background-color: #fff;
-    border: 1px solid #ddd;
-    border-radius: 8px;
-    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
-    z-index: 10;
-  }
-
-  .contact-dropdown button {
-    padding: 8px 12px;
-    border: none;
-    border-radius: 4px;
-    background-color: #4caf50;
-    color: #fff;
-    cursor: pointer;
-  }
-
-  .contact-dropdown button:hover {
-    background-color: #388e3c;
-  }
-
-  .return {
-    background-color: #f44336;
-  }
-
-  .return:hover {
-    background-color: #d32f2f;
-  }
-
-  .header-buttons {
-    display: flex;
-    align-items: center;
-    gap: 15px;
-  }
-
-
-  a{
-    color: white;
-  }

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

@@ -1,17 +1,43 @@
 <script setup lang="ts">
-const props = defineProps(['data']);
+import { color } from "@/services/popupDisplayer.ts";
+import type { PropType } from "vue";
+
+defineProps({
+    errorMessage: {
+        type: Object as PropType<string>,
+        required: true,
+    },
+    errorColor: {
+        type: Object as PropType<color>,
+        default: color.Red,
+    },
+});
 </script>
 
 <template>
-  <div :class='["red", "yellow", "blue", "green"][data.type]' class="error-modal">
+    <div
-    <p>{{["Erreur :(", "Warning :|", "Info :)", "Succes ;)"][data.type]}}</p>
+        :class="['red', 'yellow', 'blue', 'green'][errorColor]"
-    <p>{{data.errorMessage}}</p>
+        class="error-modal"
-    <div class="loading" :class='["red-loader", "yellow-loader", "blue-loader", "green-loader"][data.type]'></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;
@@ -19,41 +45,45 @@ const props = defineProps(['data']);
     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;
@@ -62,33 +92,33 @@ const props = defineProps(['data']);
     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,77 +1,31 @@
-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 AuthStorePlugin from './plugins/authStore';
+import keycloakService from "./services/keycloak";
-import keycloakService from './services/keycloak';
+import { type AuthStore, useAuthStore } from "@/stores/authStore.ts";
-import {useAuthStore} from "@/stores/authStore.ts";
+
-let store: any;
+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();
         pinia.use(piniaPluginPersistedstate);
         app.use(pinia);
-        app.use(AuthStorePlugin, { pinia });
         store = useAuthStore();
-        app.use(router)
+        keycloakService.CallInitStore(store);
+        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 };
-
-// this shit made by me so i can run the canva vue app
-createApp(App).use(router).mount('#app');
-
-// TODO: fix the comment
-/*
-function tokenInterceptor () {
-    axios.interceptors.request.use(config => {
-        const keycloak = useKeycloak()
-        if (keycloak.authenticated) {
-            // Note that this is a simple example.
-            // you should be careful not to leak tokens to third parties.
-            // in this example the token is added to all usage of axios.
-            config.headers.Authorization = `Bearer ${keycloak.token}`
-        }
-        return config
-    }, error => {
-        console.error("tokenInterceptor: Rejected")
-        return Promise.reject(error)
-    })
-}
-*/
-
-/*
-app.use(VueKeyCloak,{
-    onReady: (keycloak) => {
-        console.log("Ready !")
-        tokenInterceptor()
-    },
-    init: {
-        onLoad: 'login-required',
-        checkLoginIframe: false,
-
-    },
-
-    config: {
-        realm: 'test',
-        url: 'http://localhost:7080',
-        clientId: 'myinpulse'
-    }
-}  );
-*/
-
-
-
-
-export {store};

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

@@ -1,14 +0,0 @@
-// file: src/plugins/authStore.js
-
-import { useAuthStore } from "@/stores/authStore.ts";
-import keycloakService from '@/services/keycloak';
-// Setup auth store as a plugin so it can be accessed globally in our FE
-const authStorePlugin = {
-    install(app: any, option: any) {
-        const store = useAuthStore(option.pinia);
-        app.config.globalProperties.$store = store;
-        keycloakService.CallInitStore(store);
-    }
-}
-
-export default authStorePlugin;

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

@@ -1,24 +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/test.vue'),
+            component: () => import("../views/testComponent.vue"),
-    },
+        },
+    ],
+});
 
-      // route pour les canvas (made by adnane), in fact the two vue apps are separated for now
+export default router;
-    {
-      path: '/canvas',
-      name: 'canvas',
-      component: () => import('../views/CanvasView.vue'),
-    },
-  ],
-})
-
-export default router

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

@@ -1,31 +1,36 @@
-import axios 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,23 +39,29 @@ axiosInstance.interceptors.response.use(
 );
 
 // TODO: spawn a error modal
-function defaultApiErrorHandler(err: string){
+function defaultApiErrorHandler(err: AxiosError) {
-    addNewMessage(err, color.Red);
+    addNewMessage(err.message, color.Red);
 }
 
-function defaultApiSuccessHandler(response: any){
+function defaultApiSuccessHandler(response: AxiosResponse) {
-    addNewMessage(response.data, color.green)
+    addNewMessage(response.data, color.Green);
-}
-function callApi(endpoint: string, onSuccessHandler?: any, onErrorHandler?: any): void {
-    axiosInstance.get(endpoint).then(
-        onSuccessHandler == null ? defaultApiSuccessHandler : onSuccessHandler
-    ).catch(
-        (err) => {
-            onErrorHandler == null ? defaultApiErrorHandler(err): onErrorHandler(err);
-            throw err;
-        }
-    )
 }
 
+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,33 +1,31 @@
-import Keycloak from 'keycloak-js';
+import Keycloak from "keycloak-js";
+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);
     }
 }
 
@@ -42,31 +40,33 @@ 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
  *
  */
-async function initStore(storeInstance: any) {
+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
@@ -83,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);
     }
 }
@@ -97,4 +97,4 @@ const KeycloakService = {
     callSignup: signup,
 };
 
-export default KeycloakService;
+export default KeycloakService;

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

@@ -1,19 +1,43 @@
-import {ref} from "vue";
+import { ref, type Ref } from "vue";
-enum color {Red, Yellow, Blue, green}
 
-function addNewMessage(errorMessage: string, type?: color, timeout?: number){
+enum color {
-    if (timeout == null){
+    Red,
+    Yellow,
+    Blue,
+    Green,
+}
+
+type ErrorMessageContent = {
+    message: string;
+    color: color;
+    id: number;
+    timeout: number;
+};
+
+let id: number = 0;
+const getId = () => {
+    id = id + 1;
+    return id;
+};
+
+function addNewMessage(errorMessage: string, type?: color, timeout?: number) {
+    if (timeout == null) {
         timeout = 5000;
     }
-    if (type == null){
+    if (type == null) {
         type = color.Red;
     }
 
-    const data = {errorMessage: errorMessage, timeout: timeout, type: type, uid: Math.random()*100000};
+    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: any= ref([])
+const errorList: Ref<ErrorMessageContent[]> = ref([]);
 
-export {addNewMessage, errorList, color}
+export { addNewMessage, errorList, color, type ErrorMessageContent };

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

@@ -1,54 +1,61 @@
 import { defineStore } from "pinia";
-import keycloakService from '@/services/keycloak';
+import keycloakService from "@/services/keycloak";
 import type Keycloak from "keycloak-js";
-export const useAuthStore = defineStore("storeAuth", {
+
+const useAuthStore = defineStore("storeAuth", {
     state: () => {
         return {
-            testv: true,
             authenticated: false,
             user: {
                 token: "",
                 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,23 +65,23 @@ export 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);
             }
         },
-        test() {
-            this.testv = !this.testv;
-        },
         // Clear user's store data
         clearUserData() {
             this.authenticated = false;
             this.user = {
                 token: "",
-                    refreshToken: "",
+                refreshToken: "",
-                    username: "",
+                username: "",
             };
-        }
+        },
-    }
+    },
-});
+});
+
+type AuthStore = ReturnType<typeof useAuthStore>;
+
+export { useAuthStore, type AuthStore };

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

@@ -1,15 +0,0 @@
-<template>
-  <div class="about">
-    <h1>This is an about page</h1>
-  </div>
-</template>
-
-<style>
-@media (min-width: 1024px) {
-  .about {
-    min-height: 100vh;
-    display: flex;
-    align-items: center;
-  }
-}
-</style>

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

@@ -1,12 +0,0 @@
-<!-- src/views/CanvasView.vue -->
-<template>
-    <div>
-      <h1>Page Canvas</h1>
-      <LeanCanvas />
-    </div>
-  </template>
-  
-  <script setup lang="ts">
-  import LeanCanvas from '@/components/canvas/Lean-canvas.vue';
-  </script>
-  

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" :data=elm></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/test.vue

@@ -1,75 +0,0 @@
-<script setup lang="ts">
-import {store} from "../main.ts";
-import {callApi} from "@/services/api.ts";
-import ErrorModal from "@/components/errorModal.vue";
-import {errorList} from "@/services/popupDisplayer.ts";
-import TempModal from "@/components/temp-modal.vue";
-import ErrorWrapper from "@/App.vue";
-function addResToTable(id: any){
-  return (req: any) => {
-    console.log(req)
-  }
-}
-
-
-</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>
-  <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>

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

@@ -0,0 +1,79 @@
+<script lang="ts" setup>
+import { store } from "../main.ts";
+import { callApi } from "@/services/api.ts";
+</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>
+</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>