Message login qui n'a pas les droits

src/App.vue

@@ -1,82 +1,124 @@
 <template>
-	<v-app>
+  <v-app>
     <Header @logout-success="onLogout" @toggle-drawer="toggleDrawer"/>
     <Navbar :drawer="drawer" @close="drawer = false"/>
-		<Footer />
     <v-main>
-      <v-alert color="red" :title="backendErrorMessage" variant='outlined' density='compact' type='warning' :text='backendErrorDescription' closable v-if="backendError"></v-alert>
+      <div class="error-stack">
+        <v-alert
+          v-for="(error, index) in errorStack"
+          :key="index"
+          color="error"
+          icon="$error"
+          :title="error.message"
+          variant="flat"
+          border="start"
+          class="mb-2 custom-alert"
+          closable
+          @click:close="closeAlert(index)"
+        >
+          {{ error.description }}
+        </v-alert>
+      </div>
       <router-view v-slot="{ Component }">
         <component
           :is="Component"
-          @backendError="setBackendError"
-          @backendSuccess="liftBackendError"
+          @backendError="addError"
+          @backendSuccess="clearErrors"
         />
       </router-view>
     </v-main>
+    <Footer />
   </v-app>
 </template>
 
 <script setup>
-import {onMounted, ref} from 'vue'
+import {ref} from 'vue'
 import Header from '@/components/Structure/Header.vue'
 import Navbar from '@/components/Structure/Navbar.vue'
 import Footer from '@/components/Structure/Footer.vue'
 import router from '@/router/index'
 import {HttpStatusCode} from 'axios'
-import {useTheme} from 'vuetify'
 
-const backendError = ref(false)
-const backendErrorMessage = ref('')
-const backendErrorDescription = ref('')
+const errorStack = ref([])
 const drawer = ref(false)
 
-const theme = useTheme()
-
-function setBackendError(error) {
-  backendError.value = true
-  let titleMessage = ''
+function addError(error) {
+  let newError = {
+    message: 'Erreur',
+    description: ''
+  }
   if(!error.response){
-    backendErrorMessage.value = 'Erreur réseau : ' + error.code
-    backendErrorDescription.value = 'Le serveur ne répond pas. Vérifiez sa disponibilité.'
+    newError.message = 'Erreur réseau : ' + error.code
+    newError.description = 'Le serveur ne répond pas. Vérifiez sa disponibilité.'
   }else{
     if (error.response.status === HttpStatusCode.NotFound){
-      titleMessage = 'Impossible de récupérer les données'
-      backendErrorDescription.value = 'Vérifiez que vos urls d\'appel au serveur sont correctes ainsi que vos clés d\'autorisation ' + '(' + error.config.url + ')'
+      newError.message = 'Impossible de récupérer les données'
+      newError.description = 'Vérifiez que vos urls d\'appel au serveur sont correctes ainsi que vos clés d\'autorisation ' + '(' + error.config.url + ')'
     }
     if(error.response.status === HttpStatusCode.Forbidden){
-      titleMessage = 'Accès rejeté par le serveur'
-      backendErrorDescription.value = 'Vérifiez que vos urls d\'appel au serveur sont correctes ainsi que vos clés d\'autorisation ' + '(' + error.config.url + ')'
+      newError.message = 'Accès rejeté par le serveur'
+      newError.description = 'Vérifiez que vos urls d\'appel au serveur sont correctes ainsi que vos clés d\'autorisation ' + '(' + error.config.url + ')'
     }
     if(error.response.status === HttpStatusCode.Unauthorized){
-      titleMessage = 'Accès refusé par le serveur'
-      backendErrorDescription.value = error.response.data.message + '(' + error.config.url + ')'
+      newError.message = 'Accès refusé par le serveur'
+      newError.description = error.response.data.message + '(' + error.config.url + ')'
     }
     if(error.response.status === HttpStatusCode.BadRequest){
-      titleMessage = 'Accès rejeté par le serveur'
-      backendErrorDescription.value = 'Mauvaise requête : contrôlez les paramètres de votre requête et observez les logs du serveur pour plus d\'informations ' + '(' + error.config.url + ')'
+      newError.message = 'Accès rejeté par le serveur'
+      newError.description = 'Mauvaise requête : contrôlez les paramètres de votre requête et observez les logs du serveur pour plus d\'informations ' + '(' + error.config.url + ')'
     }
     if(error.response.status.toString().startsWith('5')){
-      titleMessage = 'Problème de disponibilité du serveur'
-      backendErrorDescription.value = 'Retentez plus tard. Vérifiez la disponibilité de la base de donnée (Etat des serveurs) en cliquant en bas à gauche sur l\'icone de paramètres. Si le problème perdure, contactez l\'assistance'
+      newError.message = 'Problème de disponibilité du serveur'
+      newError.description = 'Retentez plus tard. Vérifiez la disponibilité de la base de donnée (Etat des serveurs) en cliquant en bas à gauche sur l\'icone de paramètres. Si le problème perdure, contactez l\'assistance'
     }
-    backendErrorMessage.value = 'Erreur ' + error.response.status + ' : ' + titleMessage
+    newError.description = 'Erreur ' + error.response.status
   }
   if(error.response.data.detail){
-    backendErrorDescription.value = error.response.data.detail
+    newError.description = error.response.data.detail
+  }
+  if(error.response.data.message){
+    newError.description = error.response.data.message
   }
   if(error.request.url){
-    backendErrorDescription.value = 'Problème de disponibilité du fichier demandé'
+    newError.description = 'Problème de disponibilité du fichier demandé'
   }
+  errorStack.value.push(newError)
 }
 
-function liftBackendError() {
-  backendError.value = false
+function clearErrors() {
+  errorStack.value = []
 }
 
-function onLogout(){
+function closeAlert(index) {
+  errorStack.value.splice(index, 1)
+}
+
+function onLogout() {
   router.push('identification')
 }
+
 function toggleDrawer() {
-  drawer.value = !drawer.value;
+  drawer.value = !drawer.value
 }
 </script>
+
+<style scoped>
+.error-stack {
+  position: fixed;
+  top: 64px; /* Ajustez cette valeur en fonction de la hauteur de votre barre de navigation */
+  left: 0;
+  right: 0;
+  z-index: 100;
+  padding: 10px;
+}
+
+.custom-alert {
+  background-color: #FFEBEE !important; /* Fond rouge clair */
+  color: #B71C1C !important; /* Texte rouge foncé */
+  opacity: 1 !important; /* Assurez-vous que l'alerte est complètement opaque */
+}
+
+.custom-alert :deep(.v-alert__close) {
+  color: #B71C1C !important; /* Assure que le bouton de fermeture est de la même couleur que le texte */
+}
+</style>