fix : merged the main with the front branch and fixed all possible issues

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>
-  
-  <script lang="ts">
-  export default {
-    name: 'Header',
-  };
-  </script>
-  
-  <style scoped>
-  header img {
-    width: 100px;
-  }
+</template>
 
-  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

@@ -15,6 +15,7 @@
 </template>
 
 
+
 <script setup lang="ts">
 import { defineProps } from "vue";
 import { useRouter } from 'vue-router'

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">
-    <p>{{["Erreur :(", "Warning :|", "Info :)", "Succes ;)"][data.type]}}</p>
-    <p>{{data.errorMessage}}</p>
-    <div class="loading" :class='["red-loader", "yellow-loader", "blue-loader", "green-loader"][data.type]'></div>
-  </div>
+    <div
+        :class="['red', 'yellow', 'blue', 'green'][errorColor]"
+        class="error-modal"
+    >
+        <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{
-    background-color: #FF9D23;
-     color: white;
-   }
-  .yellow-loader{
+.yellow {
+    background-color: #ff9d23;
+    color: white;
+}
+
+.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 */
-  @keyframes loading {
+/* Animation for the loading bar */
+@keyframes loading {
     0% {
-      width: 100%;
+        width: 100%;
     }
     100% {
-      width: 0;
+        width: 0;
     }
-  }
+}
 
-  @keyframes disappear {
+@keyframes disappear {
     0% {
-      height: 100px;
-      padding: 1em;
-      margin: 1em;
+        height: 100px;
+        padding: 1em;
+        margin: 1em;
     }
     80% {
-      height: 100px;
-      padding: 1em;
-      margin: 1em;
+        height: 100px;
+        padding: 1em;
+        margin: 1em;
     }
     100% {
-      height: 0;
-      margin: 0;
-      padding: 0;
+        height: 0;
+        margin: 0;
+        padding: 0;
     }
-  }
-</style>
+}
+</style>