codevdesign 0.0.96 → 0.0.98

package/composants/gabarit/pivEntete.vue

@@ -1,118 +1,118 @@
-<template>
-  <v-toolbar
-    color="primary"
-    height="72px"
-    elevation="1"
-  >
-    <v-row
-      class="pl-6 pr-6"
-      align="center"
-      no-gutters
-    >
-      <!-- Première colonne : Logo -->
-      <v-col cols="auto">
-        <a href="/">
-          <img
-            v-if="texteVide(logoUrl)"
-            id="pivImage"
-            src="/images/QUEBEC_blanc.svg"
-            height="72"
-            :alt="$t('csqc.pivFooter.logoAlt')"
-          />
-          <img
-            v-else
-            id="pivImage"
-            :src="logoUrl"
-            height="72"
-            :alt="$t('csqc.pivFooter.logoAlt')"
-          />
-        </a>
-      </v-col>
-
-      <!-- Colonne pour le nom de l'application (Pour le mode desktop) -->
-      <v-col
-        v-if="!estMobile"
-        class="d-flex justify-center"
-      >
-        <v-app-bar-title
-          class="pl-12 ml-12"
-          style="font-size: 16px !important"
-        >
-          {{ $t('nom_application') }}
-        </v-app-bar-title>
-      </v-col>
-
-      <!-- Colonne pour le bouton de langue  -->
-      <v-col class="d-none d-flex justify-end">
-        <v-btn
-          variant="text"
-          @click="enregistrerLangue()"
-          >{{ $t('csqc.pivEntete.langue') }}
-        </v-btn>
-      </v-col>
-
-      <!-- Colonne pour le nom de l'application (Pour le mode mobile) -->
-      <v-col
-        v-if="props.estMobile"
-        cols="12"
-      >
-        <v-app-bar-title style="font-size: 16px !important">
-          {{ $t('nom_application') }}
-        </v-app-bar-title>
-      </v-col>
-    </v-row>
-  </v-toolbar>
-</template>
-
-<script setup lang="ts">
-  import { useLocale } from 'vuetify'
-
-  const { current } = useLocale()
-  const texteVide = (texte: string | undefined, retirerEspace: boolean = true): boolean => {
-    let retour = texte === undefined || texte === null || texte === ''
-
-    if (!retour && retirerEspace) {
-      const temp = texte
-      retour = temp!.replace(' ', '') === ''
-    }
-
-    return retour
-  }
-  const props = defineProps({
-    estMobile: {
-      type: Boolean,
-      required: true,
-    },
-    urlBase: {
-      type: String,
-      required: true,
-    },
-    logoUrl: {
-      type: String,
-      default: '',
-    },
-  })
-  const emit = defineEmits(['changementLangue'])
-  // Fonction pour enregistrer la langue
-
-  const enregistrerLangue = (): void => {
-    const langueDispo: string = current.value === 'fr' ? 'en' : 'fr'
-    let returnUrl = window.location.pathname + window.location.search
-    if (import.meta.env.MODE === 'development') {
-      returnUrl = '/'
-    }
-    window.location.href =
-      props.urlBase + `/Traducteur/SetLanguage?culture=${langueDispo}&returnUrl=${encodeURIComponent(returnUrl)}`
-    emit('changementLangue')
-  }
-</script>
-
-<style scoped>
-  .container {
-    max-width: none !important;
-  }
-  .theme--light.v-app-bar.v-toolbar.v-sheet {
-    background: #095797;
-    color: #fff;
-  }
-</style>
+<template>
+  <v-toolbar
+    color="primary"
+    height="72px"
+    elevation="1"
+  >
+    <v-row
+      class="pl-6 pr-6"
+      align="center"
+      no-gutters
+    >
+      <!-- Première colonne : Logo -->
+      <v-col cols="auto">
+        <a href="/">
+          <img
+            v-if="texteVide(logoUrl)"
+            id="pivImage"
+            src="/images/QUEBEC_blanc.svg"
+            height="72"
+            :alt="$t('csqc.pivFooter.logoAlt')"
+          />
+          <img
+            v-else
+            id="pivImage"
+            :src="logoUrl"
+            height="72"
+            :alt="$t('csqc.pivFooter.logoAlt')"
+          />
+        </a>
+      </v-col>
+
+      <!-- Colonne pour le nom de l'application (Pour le mode desktop) -->
+      <v-col
+        v-if="!estMobile"
+        class="d-flex justify-center"
+      >
+        <v-app-bar-title
+          class="pl-12 ml-12"
+          style="font-size: 16px !important"
+        >
+          {{ $t('nom_application') }}
+        </v-app-bar-title>
+      </v-col>
+
+      <!-- Colonne pour le bouton de langue  -->
+      <v-col class="d-none d-flex justify-end">
+        <v-btn
+          variant="text"
+          @click="enregistrerLangue()"
+          >{{ $t('csqc.pivEntete.langue') }}
+        </v-btn>
+      </v-col>
+
+      <!-- Colonne pour le nom de l'application (Pour le mode mobile) -->
+      <v-col
+        v-if="props.estMobile"
+        cols="12"
+      >
+        <v-app-bar-title style="font-size: 16px !important">
+          {{ $t('nom_application') }}
+        </v-app-bar-title>
+      </v-col>
+    </v-row>
+  </v-toolbar>
+</template>
+
+<script setup lang="ts">
+  import { useLocale } from 'vuetify'
+
+  const { current } = useLocale()
+  const texteVide = (texte: string | undefined, retirerEspace: boolean = true): boolean => {
+    let retour = texte === undefined || texte === null || texte === ''
+
+    if (!retour && retirerEspace) {
+      const temp = texte
+      retour = temp!.replace(' ', '') === ''
+    }
+
+    return retour
+  }
+  const props = defineProps({
+    estMobile: {
+      type: Boolean,
+      required: true,
+    },
+    urlBase: {
+      type: String,
+      required: true,
+    },
+    logoUrl: {
+      type: String,
+      default: '',
+    },
+  })
+  const emit = defineEmits(['changementLangue'])
+  // Fonction pour enregistrer la langue
+
+  const enregistrerLangue = (): void => {
+    const langueDispo: string = current.value === 'fr' ? 'en' : 'fr'
+    let returnUrl = window.location.pathname + window.location.search
+    if (import.meta.env.MODE === 'development') {
+      returnUrl = '/'
+    }
+    window.location.href =
+      props.urlBase + `/Traducteur/SetLanguage?culture=${langueDispo}&returnUrl=${encodeURIComponent(returnUrl)}`
+    emit('changementLangue')
+  }
+</script>
+
+<style scoped>
+  .container {
+    max-width: none !important;
+  }
+  .theme--light.v-app-bar.v-toolbar.v-sheet {
+    background: #095797;
+    color: #fff;
+  }
+</style>

package/index.ts

@@ -15,7 +15,7 @@ import csqcChaise from './composants/csqcChaise/chaiseConteneur.vue'
 import csqcAide from './composants/csqcAide.vue'
 import csqcEntete from './composants/csqcEntete.vue'
 import csqcTexteBilingue from './composants/csqcTexteBilingue.vue'
-// eslint-disable-next-line @typescript-eslint/no-explicit-any
+// @ts-expect-error TS7016
 import csqcEditeurTexteRiche from './composants/csqcEditeurTexteRiche.vue'
 import csqcImportCSV from './composants/csqcImportCSV.vue'
 import csqcRechercheUtilisateur from './composants/csqcRechercheUtilisateur.vue'
@@ -33,6 +33,10 @@ import response from './modeles/response'
 import csqcEn from './locales/en.json'
 import csqcFr from './locales/fr.json'
 
+// outils
+import csqcRafraichisseurToken from './outils/rafraichisseurToken'
+import csqcAppAxios from './outils/appAxios'
+
 export {
   csqcFr,
   csqcEn,
@@ -63,4 +67,6 @@ export {
   data,
   response,
   NotificationGabaritDefaut,
+  csqcAppAxios,
+  csqcRafraichisseurToken
 }

package/locales/fr.json

@@ -78,7 +78,8 @@
       "chaiseSelection": "Aucune sélection pour cette unité",
       "chaiseSelectionToutes": "Veuillez faire une sélection pour toutes les unités.",
       "supprimerMessage": "Voulez-vous vraiment supprimer {nom}?",
-      "supprimerTitre": "Confirmation de suppression!"
+      "supprimerTitre": "Confirmation de suppression!",
+      "token": "Votre jeton de connexion est périmé ou votre connexion est échue"
     },
     "pivEntete": {
       "langue": "English"

package/outils/appAxios.ts

@@ -0,0 +1,117 @@
+import axios, { type AxiosInstance, type AxiosError, type AxiosResponse } from 'axios'
+import { useAppStore } from '@/store/appStore'
+import router from '@/router'
+
+type ApiReponse<T = unknown> =
+  // Succès
+  | {
+    succes: true
+    resultat: T
+    status?: number
+    message?: string
+    location?: string
+    parametres?: unknown
+    [k: string]: unknown
+  }
+  // Échec (le backend peut quand même renvoyer resultat null/absent)
+  | {
+    succes: false
+    resultat?: unknown
+    status?: number
+    message?: string
+    location?: string
+    parametres?: unknown
+    [k: string]: unknown
+  }
+
+let client: AxiosInstance | null = null
+let cachedBaseUrl = '' // pour éviter de régénérer une instance axios si rien n’a changé
+
+export default {
+  clearCache: false,
+
+  getAxios(): AxiosInstance {
+    // Singleton + clearCache
+    if (client && !this.clearCache) return client
+
+    const appStore = useAppStore()
+
+    const rawUrl = appStore.modeleCharger
+      ? appStore.appModele!.urlBase
+      : window.location.origin + import.meta.env.BASE_URL
+
+    const urlBase = rawUrl.endsWith('/') ? rawUrl.slice(0, -1) : rawUrl
+
+    // Si la base URL n'a pas changé et qu'on a déjà un client, on le renvoie
+    if (client && cachedBaseUrl === urlBase && !this.clearCache) return client
+    cachedBaseUrl = urlBase
+
+    client = axios.create({
+      baseURL: `${urlBase}/api`,
+      withCredentials: true,
+      timeout: 30_000,
+      headers: {
+        Accept: 'application/json',
+        'Content-Type': 'application/json',
+        'X-Requested-With': 'XMLHttpRequest',
+      },
+      // validateStatus: (s) => s >= 200 && s < 300, // défaut axios
+    })
+
+    client.interceptors.response.use(
+      (response: AxiosResponse<any>) => {
+        const data = response.data
+
+        // Détection de la réponse { succes, resultat }
+        if (data && typeof data === 'object' && 'succes' in data) {
+          const env = data as ApiReponse
+          return env.succes === true ? env.resultat : Promise.reject(env)
+        }
+
+        // Sinon, renvoyer data si présent, sinon la réponse complète
+        return data ?? response
+      },
+
+      (error: AxiosError<any>) => {
+        const status = error.response?.status
+        const payload = error.response?.data?.resultat ?? { message: error.message }
+
+
+
+        // 403 / 404
+        if (status === 403 || status === 404) {
+          try {
+            appStore.lancerErreur(payload)
+            if (router.currentRoute.value.name !== '403') {
+              router.push({ name: '403' })
+            }
+          } catch {
+            // no-op
+          }
+          return Promise.reject(payload)
+        }
+
+        // gérer les autres 4XX ici
+
+        // Log minimal
+        console.error('HTTP error', {
+          status,
+          url: error.config?.url,
+          payload,
+        })
+
+        // Remonter l’erreur normalisée dans appstore
+        try {
+          if (payload?.resultat) appStore.lancerErreur(payload)
+        } catch {
+          // no-op
+        }
+        return Promise.reject(payload)
+      },
+    )
+
+    // reset le flag si on l’avait utilisé pour forcer la recréation de l'instance
+    this.clearCache = false
+    return client
+  },
+}

package/outils/rafraichisseurToken.ts

@@ -0,0 +1,167 @@
+import i18n from '@/plugins/i18n'
+import { useAppStore } from '@/store/appStore'
+
+class RafraichisseurToken {
+  private intervalleEnSecondes = 15
+  private secondesAvantExpirationTokenPourRafraichir = 20
+  private skewSeconds = 5 // marge anti-derives d’horloge
+  private popupAffiche = false
+  private appStore: ReturnType<typeof useAppStore> | null = null
+  private timerId: number | null = null
+  private deconnexionEnCours = false // évite les popups multiples
+
+  // Lance une seule fois
+  public async demarrer(): Promise<void> {
+    this.appStore = useAppStore()
+    await this.verifierToken()
+    if (this.timerId != null) return
+    this.timerId = window.setInterval(() => { this.verifierToken() }, this.intervalleEnSecondes * 1000)
+  }
+
+  // Permet d’arrêter le timer (ex: au logout / destroy)
+  public arreter(): void {
+    if (this.timerId != null) {
+      clearInterval(this.timerId)
+      this.timerId = null
+    }
+  }
+
+  private async verifierToken(): Promise<void> {
+    if (!this.appStore) this.appStore = useAppStore()
+    const modele = this.appStore?.appModele
+    if (this.popupAffiche || !modele) return
+    const tokenEncode = this.lireCookie(modele.nomCookie)
+    if (!tokenEncode) { await this.rafraichir(); return }
+
+    let token: any
+    try {
+      token = this.parseJwt(tokenEncode)
+    } catch {
+      await this.rafraichir()
+      return
+    }
+
+    const exp = Number(token?.exp)
+    if (!Number.isFinite(exp)) { // exp manquant/invalide → tente refresh
+      await this.rafraichir()
+      return
+    }
+
+    const now = Math.floor(Date.now() / 1000)
+    const refreshAt = exp - this.secondesAvantExpirationTokenPourRafraichir - this.skewSeconds
+    if (now >= refreshAt) {
+      await this.rafraichir()
+    }
+  }
+
+  private async rafraichir(): Promise<void> {
+    if (!this.appStore) this.appStore = useAppStore()
+    const modele = this.appStore?.appModele
+    if (!modele) return
+    const url = this.getRefreshUrl()
+    const controller = new AbortController()
+    const timeout = setTimeout(() => controller.abort(), 10_000)
+
+    try {
+      const resp = await fetch(url, {
+        method: 'POST',
+        credentials: 'include',
+        headers: { Accept: 'application/json' },
+        redirect: 'manual',
+        signal: controller.signal,
+      })
+
+      // redirection (souvent => login) → traiter comme non auth
+      if (resp.type === 'opaqueredirect' || resp.status === 302) {
+        this.deconnecterAzure()
+        return
+      }
+
+      // OK ou No Content: le cookie devrait être réécrit
+      if (resp.status === 200 || resp.status === 204) {
+        const jeton = this.lireCookie(modele.nomCookie)
+        if (!jeton) this.deconnecterAzure()
+        return
+      }
+
+      // non auth / expiré (401, 419) + IIS timeout (440)
+      if (resp.status === 401 || resp.status === 419 || resp.status === 440) {
+        this.deconnecterAzure()
+        return
+      }
+
+      console.warn('Rafraichisseur token: statut inattendu', resp.status)
+    } 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
+    } finally {
+      clearTimeout(timeout)
+    }
+  }
+
+  private deconnecterAzure(): void {
+    if (this.deconnexionEnCours) return
+    this.deconnexionEnCours = true
+    const { t } = i18n.global
+    this.popupAffiche = true
+    if (!this.appStore) this.appStore = useAppStore()
+
+    if (this.appStore?.appModele && confirm(t('csqc.message.token'))) {
+      const retour = encodeURI(window.location.href)
+      window.open(`${this.appStore.appModele.urlPortailSeConnecter}?urlRetour=${retour}`, '_self')
+    }
+
+    // si l’utilisateur annule, on permet un futur prompt
+    this.deconnexionEnCours = false
+  }
+
+  public deconnecterPortail(): void {
+    if (!this.appStore) this.appStore = useAppStore()
+    const modele = this.appStore?.appModele
+    if (!modele) return
+
+    window.location.replace(
+      `${modele.urlPortail}deconnecte?urlRetour=${encodeURIComponent(window.location.href)}`
+    )
+  }
+
+  public annulerDeconnecter(): void {
+    this.popupAffiche = false
+    this.deconnexionEnCours = false
+  }
+
+  private lireCookie(nom: string): string | null {
+    if (!document.cookie) return null
+    const cookies = document.cookie.split(';').map(c => c.trim())
+    for (const cookie of cookies) {
+      if (cookie.startsWith(`${nom}=`)) {
+        try { return decodeURIComponent(cookie.substring(nom.length + 1)) }
+        catch { return cookie.substring(nom.length + 1) }
+      }
+    }
+    return null
+  }
+
+  // eslint-disable-next-line @typescript-eslint/no-explicit-any
+  private parseJwt(token: string): any {
+    const parts = token.split('.')
+    const base64Url = parts[1]
+    if (!base64Url) throw new Error('Invalid JWT format')
+    const base64 = base64Url.replace(/-/g, '+').replace(/_/g, '/')
+    const jsonPayload = decodeURIComponent(
+      atob(base64).split('').map(c => `%${(`00${c.charCodeAt(0).toString(16)}`).slice(-2)}`).join('')
+    )
+    return JSON.parse(jsonPayload)
+  }
+
+  // URL refresh selon env (dev = proxy Vite ; prod = portail)
+  private getRefreshUrl(): string {
+    if (import.meta.env.MODE === "development") return '/portail-refresh'
+    return this.appStore!.appModele!.urlPortailRafraichissement
+  }
+}
+
+// Instance
+const rafraichisseurToken = new RafraichisseurToken()
+export default rafraichisseurToken

package/package.json

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