codevdesign 1.0.66 → 1.0.68

package/composants/csqcChaise/chaiseConteneur.vue

@@ -3,7 +3,8 @@
     <!-- Affiche la carte récap si activée et qu'il y a des unités -->
     <div v-if="activerDivPreferences && unites && unites.length > 0">
       <v-card
-        width="375"
+        max-width="375"
+        width="100%"
         variant="outlined"
       >
         <v-card-text class="pt-0 mt-0">

package/composants/csqcEntete.vue

@@ -1,187 +1,229 @@
-<template>
-  <v-app-bar
-    :color="barreCouleur"
-    class="px-0 mx-0"
-    :style="{
-      position: 'sticky',
-      // variables CSS pour les couleurs dynamiques
-      '--entete-texte': texteCouleur,
-      '--entete-icone': iconeCouleur,
-    }"
-    height="82px"
-  >
-    <v-row
-      class="pt-2"
-      @resize="controlAffichage"
-    >
-      <v-col
-        :cols="titreCol"
-        class="pr-0 mr-0 pl-5"
-      >
-        <v-toolbar-title class="titre">
-          <div class="entete-ligne">
-            <!-- GAUCHE -->
-            <div class="entete-gauche">
-              <!-- Barre de retour -->
-              <slot name="retour">
-                <v-icon
-                  v-if="retour"
-                  size="large"
-                  start
-                  :color="iconeCouleur"
-                  icon="mdi-arrow-left-thin"
-                  @click="retournerMenu"
-                />
-              </slot>
-
-              <div class="titre-bloc">
-                <slot name="titre">
-                  <span class="pl-3 titre-texte">{{ props.titre }}</span>
-                </slot>
-
-                <slot name="etat">
-                  <span
-                    v-if="monEtat?.afficher"
-                    class="pl-10"
-                  >
-                    <v-btn
-                      size="small"
-                      :color="monEtat.couleur"
-                      variant="tonal"
-                    >
-                      {{ monEtat.texte }}
-                    </v-btn>
-                  </span>
-                </slot>
-
-                <slot name="etatSecondaire">
-                  <span
-                    v-if="monEtatSecondaire?.afficher"
-                    class="pl-3"
-                  >
-                    <v-btn
-                      size="small"
-                      :color="monEtatSecondaire.couleur"
-                      variant="tonal"
-                    >
-                      {{ monEtatSecondaire.texte }}
-                    </v-btn>
-                  </span>
-                </slot>
-
-                <slot name="soustitre">
-                  <span class="pl-3 soustitre-texte">{{ props.soustitre }}</span>
-                </slot>
-              </div>
-            </div>
-
-            <!-- DROITE -->
-            <div class="entete-droite">
-              <slot name="droite" />
-            </div>
-          </div>
-        </v-toolbar-title>
-      </v-col>
-    </v-row>
-
-    <!-- Barre en bas -->
-    <div style="position: absolute; bottom: 0; left: 0; right: 0; height: 2px; background-color: #808a9d" />
-  </v-app-bar>
-</template>
-
-<script setup lang="ts">
-  import { useRouter } from 'vue-router'
-  import { ref, computed } from 'vue'
-
-  interface EnteteEtat {
-    afficher: boolean
-    couleur: string
-    texte: string
-  }
-
-  interface EnteteEtatSecondaire {
-    afficher: boolean
-    couleur: string
-    texte: string
-  }
-
-  const router = useRouter()
-
-  const props = defineProps<{
-    titre: string
-    soustitre?: string
-    retour?: string
-    etat?: EnteteEtat
-    couleur?: string // couleur de la barre (Vuetify color/hex)
-    couleurTexte?: string
-    couleurIcone?: string
-    etatSecondaire?: EnteteEtatSecondaire
-  }>()
-
-  const titreCol = ref(12)
-
-  // Fallbacks (tes valeurs actuelles)
-  const barreCouleur = computed(() => props.couleur ?? 'white')
-  const texteCouleur = computed(() => props.couleurTexte ?? '#223654')
-  const iconeCouleur = computed(() => props.couleurIcone ?? 'grisMoyen') // peut être un nom de couleur Vuetify ou un hex
-
-  const monEtat = computed<EnteteEtat>(() => props.etat ?? { afficher: false, couleur: 'primary', texte: 'test' })
-  const monEtatSecondaire = computed<EnteteEtatSecondaire>(
-    () => props.etatSecondaire ?? { afficher: false, couleur: 'primary', texte: 'test' },
-  )
-
-  function retournerMenu() {
-    if (props.retour) router.push({ name: props.retour })
-  }
-  function controlAffichage() {
-    /* logique resize */
-  }
-</script>
-
-<style scoped>
-  .titre {
-    font-size: 1.85rem;
-    font-weight: bold;
-    margin-bottom: 15px;
-  }
-  .titre-texte {
-    color: var(--entete-texte, #223654);
-  }
-  .soustitre-texte {
-    display: block;
-    font-size: 1rem;
-    font-weight: normal;
-    color: var(--entete-texte, #223654);
-  }
-  .titre-bloc {
-    display: inline-block;
-    vertical-align: middle;
-    padding-left: 12px;
-  }
-  /* Couleur de l’icône (retour) + hover */
-  .v-icon {
-    color: var(--entete-icone, #6b7280); /* grisMoyen approx si hex */
-  }
-  .v-icon:hover {
-    filter: brightness(0.85);
-  }
-  .entete-ligne {
-    display: flex;
-    align-items: center;
-    width: 100%;
-  }
-
-  .entete-gauche {
-    display: flex;
-    align-items: center;
-    min-width: 0; /* important pour éviter overflow */
-    flex: 1;
-  }
-
-  .entete-droite {
-    display: flex;
-    align-items: center;
-    gap: 12px;
-    padding-right: 16px;
-  }
-</style>
+<template>
+  <v-app-bar
+    :color="barreCouleur"
+    class="px-0 mx-0"
+    :style="{
+      position: 'sticky',
+      // variables CSS pour les couleurs dynamiques
+      '--entete-texte': texteCouleur,
+      '--entete-icone': iconeCouleur,
+    }"
+    height="auto"
+  >
+    <v-row
+      class="pt-2"
+      @resize="controlAffichage"
+    >
+      <v-col
+        :cols="titreCol"
+        class="pr-0 mr-0 pl-5"
+      >
+        <v-toolbar-title class="titre">
+          <div class="entete-ligne">
+            <!-- GAUCHE -->
+            <div class="entete-gauche">
+              <!-- Barre de retour -->
+              <slot name="retour">
+                <v-icon
+                  v-if="retour"
+                  size="large"
+                  start
+                  :color="iconeCouleur"
+                  icon="mdi-arrow-left-thin"
+                  @click="retournerMenu"
+                />
+              </slot>
+
+              <div class="titre-bloc">
+                <slot name="titre">
+                  <span class="pl-3 titre-texte">{{ props.titre }}</span>
+                </slot>
+
+                <slot name="etat">
+                  <span
+                    v-if="monEtat?.afficher"
+                    class="pl-10"
+                  >
+                    <v-btn
+                      size="small"
+                      :color="monEtat.couleur"
+                      variant="tonal"
+                    >
+                      {{ monEtat.texte }}
+                    </v-btn>
+                  </span>
+                </slot>
+
+                <slot name="etatSecondaire">
+                  <span
+                    v-if="monEtatSecondaire?.afficher"
+                    class="pl-3"
+                  >
+                    <v-btn
+                      size="small"
+                      :color="monEtatSecondaire.couleur"
+                      variant="tonal"
+                    >
+                      {{ monEtatSecondaire.texte }}
+                    </v-btn>
+                  </span>
+                </slot>
+
+                <slot name="soustitre">
+                  <span class="pl-3 soustitre-texte">{{ props.soustitre }}</span>
+                </slot>
+              </div>
+            </div>
+
+            <!-- DROITE -->
+            <div class="entete-droite mr-1">
+              <slot name="droite" />
+            </div>
+          </div>
+        </v-toolbar-title>
+      </v-col>
+    </v-row>
+
+    <!-- Barre en bas -->
+    <div style="position: absolute; bottom: 0; left: 0; right: 0; height: 2px; background-color: #808a9d" />
+  </v-app-bar>
+</template>
+
+<script setup lang="ts">
+  import { useRouter } from 'vue-router'
+  import { ref, computed } from 'vue'
+
+  interface EnteteEtat {
+    afficher: boolean
+    couleur: string
+    texte: string
+  }
+
+  interface EnteteEtatSecondaire {
+    afficher: boolean
+    couleur: string
+    texte: string
+  }
+
+  const router = useRouter()
+
+  const props = defineProps<{
+    titre: string
+    soustitre?: string
+    retour?: string
+    etat?: EnteteEtat
+    couleur?: string // couleur de la barre (Vuetify color/hex)
+    couleurTexte?: string
+    couleurIcone?: string
+    etatSecondaire?: EnteteEtatSecondaire
+  }>()
+
+  const titreCol = ref(12)
+
+  // Fallbacks (tes valeurs actuelles)
+  const barreCouleur = computed(() => props.couleur ?? 'white')
+  const texteCouleur = computed(() => props.couleurTexte ?? '#223654')
+  const iconeCouleur = computed(() => props.couleurIcone ?? 'grisMoyen') // peut être un nom de couleur Vuetify ou un hex
+
+  const monEtat = computed<EnteteEtat>(() => props.etat ?? { afficher: false, couleur: 'primary', texte: 'test' })
+  const monEtatSecondaire = computed<EnteteEtatSecondaire>(
+    () => props.etatSecondaire ?? { afficher: false, couleur: 'primary', texte: 'test' },
+  )
+
+  function retournerMenu() {
+    if (props.retour) router.push({ name: props.retour })
+  }
+  function controlAffichage() {
+    /* logique resize */
+  }
+</script>
+
+<style scoped>
+  .titre {
+    font-size: 1.85rem;
+    font-weight: bold;
+    margin-bottom: 15px;
+  }
+  .titre-texte {
+    color: var(--entete-texte, #223654);
+    overflow: hidden;
+    text-overflow: ellipsis;
+    white-space: nowrap;
+    max-width: 100%;
+  }
+  .soustitre-texte {
+    display: block;
+    font-size: 1rem;
+    font-weight: normal;
+    color: var(--entete-texte, #223654);
+  }
+  .titre-bloc {
+    display: inline-block;
+    vertical-align: middle;
+    padding-left: 12px;
+  }
+  /* Couleur de l’icône (retour) + hover */
+  .v-icon {
+    color: var(--entete-icone, #6b7280); /* grisMoyen approx si hex */
+  }
+  .v-icon:hover {
+    filter: brightness(0.85);
+  }
+  .entete-ligne {
+    display: flex;
+    align-items: center;
+    flex-wrap: wrap;
+    width: 100%;
+    gap: 8px;
+  }
+
+  .entete-gauche {
+    display: flex;
+    align-items: center;
+    min-width: 0; /* important pour éviter overflow */
+    flex: 1;
+  }
+
+  .entete-droite {
+    display: flex;
+    align-items: center;
+    gap: 12px;
+    padding-right: 16px;
+    flex-shrink: 0;
+  }
+
+  @media (max-width: 600px) {
+    .entete-gauche {
+      width: 100%;
+    }
+    .entete-droite {
+      width: 100%;
+      padding-right: 8px;
+      padding-left: 0;
+      justify-content: flex-end;
+    }
+    .titre {
+      font-size: 1.2rem;
+    }
+    .titre-bloc {
+      display: flex;
+      flex-direction: column;
+      align-items: flex-start;
+      min-width: 0;
+      max-width: 100%;
+      padding-left: 4px;
+    }
+    .titre-texte {
+      white-space: nowrap;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      max-width: 100%;
+    }
+    :deep(.v-col) {
+      padding-left: 8px !important;
+    }
+    :deep(.v-toolbar-title__placeholder) {
+      padding-inline-start: 0 !important;
+    }
+  }
+</style>

package/outils/rafraichisseurToken.ts

@@ -1,22 +1,38 @@
 class RafraichisseurToken {
   private intervalleEnSecondes = 15
   private secondesAvantExpirationTokenPourRafraichir = 20
-  private skewSeconds = 5 // marge anti-derives d’horloge
+  private skewSeconds = 5 // marge anti-derives d'horloge
   private popupAffiche = false
   private timerId: number | null = null
+  private nomTemoin = 'csqc_jeton_secure_expiration'
+  private urlPortail = ''
+  private refreshPromise: Promise<void> | null = null
 
   // Lance une seule fois
   public async demarrer(nomTemoin: string | null, urlPortail: string): Promise<void> {
     urlPortail = urlPortail.replace(/\/+$/, '')
     if (nomTemoin == null || nomTemoin === '') nomTemoin = 'csqc_jeton_secure_expiration'
-    await this.verifierJeton(nomTemoin, urlPortail)
+    this.nomTemoin = nomTemoin as string
+    this.urlPortail = urlPortail
+    await this.verifierJeton(nomTemoin as string, urlPortail)
     if (this.timerId != null) return
     this.timerId = window.setInterval(() => {
-      this.verifierJeton(nomTemoin, urlPortail)
+      this.verifierJeton(nomTemoin as string, urlPortail)
     }, this.intervalleEnSecondes * 1000)
   }
 
-  // Permet d’arrêter le timer (ex: au logout / destroy)
+  public attendreRefreshSiNecessaire(force = false): Promise<void> {
+    if (this.refreshPromise) return this.refreshPromise
+    if (force || !this.estJetonValide(this.nomTemoin)) {
+      this.refreshPromise = this.rafraichir(this.nomTemoin, this.urlPortail).finally(() => {
+        this.refreshPromise = null
+      })
+      return this.refreshPromise
+    }
+    return Promise.resolve()
+  }
+
+  // Permet d'arrêter le timer (ex: au logout / destroy)
   public arreter(): void {
     if (this.timerId != null) {
       clearInterval(this.timerId)
@@ -32,8 +48,11 @@ class RafraichisseurToken {
     if (this.popupAffiche) return
 
     if (!this.estJetonValide(nomTemoin)) {
-      this.rafraichir(nomTemoin, urlPortail)
-      return
+      if (!this.refreshPromise) {
+        this.refreshPromise = this.rafraichir(nomTemoin, urlPortail).finally(() => {
+          this.refreshPromise = null
+        })
+      }
     }
   }
 
@@ -54,8 +73,6 @@ class RafraichisseurToken {
 
     const exp = Number(token?.exp)
     if (!Number.isFinite(exp)) {
-      // exp manquant/invalide → tente refresh
-
       return false
     }
 
@@ -70,6 +87,8 @@ class RafraichisseurToken {
 
   private async rafraichir(nomCookie: string, urlPortail: string): Promise<void> {
     if (!nomCookie) return
+    //console.log('[RafraichisseurToken] rafraichir() appelé')
+    this.popupAffiche = true // bloquer tout nouveau tick pendant le refresh
     const url = this.getRefreshUrl(urlPortail)
     const controller = new AbortController()
     const timeout = setTimeout(() => controller.abort(), 10_000)
@@ -84,51 +103,73 @@ class RafraichisseurToken {
         signal: controller.signal,
       })
 
-      // redirection (souvent => login) → traiter comme non auth
-
+      // redirection vers Azure AD → session expirée, l'iframe ne peut pas compléter le flow OIDC cross-site
+      //console.log('[RafraichisseurToken] fetch réponse type:', resp.type, 'status:', resp.status)
       if (resp.type === 'opaqueredirect' || resp.status === 302) {
-        this.rafraichirParIframe(nomCookie, urlPortail)
+        this.estDeconnecteAzure(urlPortail)
         return
       }
 
       // OK ou No Content: le cookie devrait être réécrit
       if (resp.status === 200 || resp.status === 204) {
         const jeton = this.lireCookie(nomCookie)
-        if (!jeton) this.rafraichirParIframe(nomCookie, urlPortail)
+        if (!jeton) {
+          //   console.log('[RafraichisseurToken] 200 mais cookie absent → iframe')
+          this.rafraichirParIframe(nomCookie, urlPortail)
+        } else {
+          this.popupAffiche = false // succès, reprendre la surveillance
+        }
         return
       }
 
       // non auth / expiré (401, 419) + IIS timeout (440)
       if (resp.status === 401 || resp.status === 419 || resp.status === 440) {
+        //   console.log('[RafraichisseurToken] statut auth → iframe')
         this.rafraichirParIframe(nomCookie, urlPortail)
         return
       }
 
       console.warn('Rafraichisseur token: statut inattendu', resp.status)
+      this.popupAffiche = false // statut inattendu, permettre un retry
     } catch (err: any) {
       if (err?.name === 'AbortError') console.warn('RafraichisseurToken timeout')
       else console.error('Erreur rafraichisseur de token', err)
-      // on réessaiera au prochain tick
+      this.reloadSiErreurReseau()
     } finally {
       clearTimeout(timeout)
     }
   }
 
   private rafraichirParIframe(nomCookie: string, urlPortail: string): void {
-    // Pour éviter les cross référence, on créé un iframe qui appel portail et force la MAJ du jeton ou l'invalidation du jeton, si jamais l'utilisateur n'est plus connecté
-    // ajax vers le refresh
+    this.popupAffiche = true // bloquer le timer pendant que l'iframe tente l'auth
     let iframe = document.createElement('iframe')
     const url = this.getRefreshUrl(urlPortail)
     iframe.src = `${url}?urlRetour=${encodeURI(window.location.href)}`
     iframe.id = 'idRafrToken'
     iframe.style.display = 'none'
     document.body.appendChild(iframe)
+
+    const iframeTimeout = setTimeout(() => {
+      iframe.onload = null
+      iframe.src = 'about:blank'
+      iframe.remove()
+      this.popupAffiche = false
+      console.warn('[RafraichisseurToken] iframe timeout — popupAffiche réinitialisé')
+    }, 15_000)
+
     iframe.onload = () => {
-      const jetonCSQC = this.lireCookie(nomCookie)
-      if (jetonCSQC == null || jetonCSQC === '') {
+      clearTimeout(iframeTimeout)
+      iframe.onload = null // empêcher les re-entrées sur les redirects OIDC internes
+      const nomSecure = nomCookie.replace('_expiration', '')
+      const cookieAVerifier = nomSecure !== nomCookie ? nomSecure : nomCookie
+      const jeton = this.lireCookie(cookieAVerifier)
+      if (jeton == null || jeton === '') {
         this.estDeconnecteAzure(urlPortail)
+      } else {
+        this.popupAffiche = false // cookie recréé avec succès, reprendre la surveillance
       }
 
+      iframe.src = 'about:blank' // stopper les navigations internes
       iframe.remove()
     }
   }
@@ -176,6 +217,21 @@ class RafraichisseurToken {
     return JSON.parse(jsonPayload)
   }
 
+  private reloadSiErreurReseau(): void {
+    const CLE = 'rafraichisseur_dernierReload'
+    //  console.log('[RafraichisseurToken] reload si erreur')
+    const maintenant = Date.now()
+    const dernierReload = Number(sessionStorage.getItem(CLE) ?? 0)
+    if (maintenant - dernierReload > 30_000) {
+      //  console.log('[RafraichisseurToken] Écriture sessionStorage:', CLE, maintenant)
+      sessionStorage.setItem(CLE, String(maintenant))
+
+      globalThis.location.reload()
+    } else {
+      this.popupAffiche = false
+    }
+  }
+
   // URL refresh selon env (dev = proxy Vite ; prod = portail)
   private getRefreshUrl(urlPortail: string): string {
     if (import.meta.env.MODE === 'development') return '/portail-refresh'

package/package.json

@@ -1,6 +1,6 @@
 {
   "name": "codevdesign",
-  "version": "1.0.66",
+  "version": "1.0.68",
   "description": "Composants Vuetify 3 pour les projets Codev",
   "files": [
     "./**/*.vue",