CI : workflow validate.yml, manifeste ci.required:true, package.json avec scripts verify

- Ajout .gitea/workflows/validate.yml (runs-on: ci-node22, test de contrat)
- Ajout package.json avec scripts test/check/build/verify
- Ajout ci.required:true dans app.json

.gitea/workflows/validate.yml

@@ -0,0 +1,26 @@
+name: Validation applicative
+
+on:
+  push:
+    branches: [main, master]
+    paths-ignore:
+      - "**.md"
+      - "docs/**"
+  pull_request:
+    branches: [main, master]
+    paths-ignore:
+      - "**.md"
+      - "docs/**"
+  workflow_dispatch:
+
+jobs:
+  verify:
+    name: Tests de contrat
+    runs-on: ci-node22
+    timeout-minutes: 5
+    steps:
+      - name: Récupérer les sources
+        uses: actions/checkout@v4
+
+      - name: Vérifier le contrat du portail
+        run: node test/portal-contract.test.js

.gitignore

@@ -4,3 +4,7 @@ node_modules/
 dist/
 build/
 .DS_Store
+# Sauvegardes locales : les versions de référence restent dans Git.
+*.bak
+*.bak-*
+*.tmp

app.json

@@ -0,0 +1,16 @@
+{
+  "id": "portail-santinova",
+  "name": "Portail Applicatif",
+  "category": "INFRA",
+  "urls": {
+    "recette": "https://portail.recette.santinova-soft.org",
+    "prod": "https://portail.santinova-soft.org"
+  },
+  "containerName": "portail-santinova",
+  "image": "images/portail.png",
+  "giteaRepo": "portail-santinova",
+  "giteaOwner": "manus-admin",
+  "ci": {
+    "required": true
+  }
+}

docker-compose.yml

@@ -9,11 +9,10 @@ services:
       - web
     labels:
       - "traefik.enable=true"
-      - "traefik.http.routers.portail.rule=Host(`portail.santinova-soft.org`)"
+      - "traefik.http.routers.portail-recette.rule=Host(`portail.recette.santinova-soft.org`)"
-      - "traefik.http.routers.portail.entrypoints=websecure"
+      - "traefik.http.routers.portail-recette.entrypoints=websecure"
-      - "traefik.http.routers.portail.tls.certresolver=letsencrypt"
+      - "traefik.http.routers.portail-recette.tls.certresolver=letsencrypt"
-      - "traefik.http.services.portail.loadbalancer.server.port=3000"
+      - "traefik.http.services.portail-recette.loadbalancer.server.port=3000"
-
 networks:
   web:
     external: true

index.html

@@ -99,9 +99,7 @@
       top: 1px;
     }
 
-    .tab-btn:hover {
+    .tab-btn:hover { color: #c5c8d8; }
-      color: #c5c8d8;
-    }
 
     .tab-btn.active {
       color: #ffffff;
@@ -137,9 +135,7 @@
       width: 100%;
     }
 
-    .tab-panel {
+    .tab-panel { display: none; }
-      display: none;
-    }
 
     .tab-panel.active {
       display: block;
@@ -163,10 +159,7 @@
       margin-bottom: 10px;
     }
 
-    .section-header p {
+    .section-header p { color: #8b8fa8; font-size: 1rem; }
-      color: #8b8fa8;
-      font-size: 1rem;
-    }
 
     /* ===== GRID ===== */
     .apps-grid {
@@ -188,17 +181,13 @@
       transition: transform 0.25s cubic-bezier(0.34, 1.56, 0.64, 1);
     }
 
-    .app-card:hover {
+    .app-card:hover { transform: translateY(-8px) scale(1.03); }
-      transform: translateY(-8px) scale(1.03);
-    }
 
     .app-card:hover .card-image-wrapper {
       box-shadow: 0 20px 60px rgba(0,0,0,0.5), 0 0 0 1px rgba(255,255,255,0.1);
     }
 
-    .app-card:hover .card-name {
+    .app-card:hover .card-name { color: #ffffff; }
-      color: #ffffff;
-    }
 
     .card-image-wrapper {
       width: 180px;
@@ -240,13 +229,13 @@
       margin-top: 6px;
       font-size: 0.7rem;
       font-weight: 600;
-      color: #10b981;
+      color: #6366f1;
       text-transform: uppercase;
       letter-spacing: 0.8px;
-      background: rgba(16,185,129,0.1);
+      background: rgba(99,102,241,0.1);
       padding: 3px 10px;
       border-radius: 10px;
-      border: 1px solid rgba(16,185,129,0.2);
+      border: 1px solid rgba(99,102,241,0.2);
     }
 
     /* ===== APP OFFLINE (grisage) ===== */
@@ -257,9 +246,7 @@
       filter: grayscale(80%);
     }
 
-    .app-card.offline .card-image-wrapper {
+    .app-card.offline .card-image-wrapper { box-shadow: none; }
-      box-shadow: none;
-    }
 
     .card-status-badge {
       display: none;
@@ -275,8 +262,14 @@
       border: 1px solid rgba(239,68,68,0.3);
     }
 
-    .app-card.offline .card-status-badge {
+    .app-card.offline .card-status-badge { display: inline-block; }
-      display: inline-block;
+
+    /* ===== LOADING ===== */
+    .loading-msg {
+      text-align: center;
+      color: #8b8fa8;
+      padding: 60px 0;
+      font-size: 1rem;
     }
 
     /* ===== FOOTER ===== */
@@ -296,24 +289,6 @@
       font-size: 0.8rem;
     }
 
-    .footer-powered span {
-      font-weight: 600;
-      color: #8b8fa8;
-    }
-
-    .footer-logo-placeholder {
-      display: inline-flex;
-      align-items: center;
-      gap: 6px;
-      background: linear-gradient(135deg, #6366f1, #8b5cf6);
-      -webkit-background-clip: text;
-      -webkit-text-fill-color: transparent;
-      background-clip: text;
-      font-weight: 800;
-      font-size: 0.95rem;
-      letter-spacing: -0.3px;
-    }
-
     /* ===== RESPONSIVE ===== */
     @media (max-width: 768px) {
       header { padding: 20px 24px; }
@@ -347,21 +322,21 @@
       </div>
       <div>
         <div class="header-title">Portail Applicatif</div>
-        <div class="header-subtitle">Environnement de production</div>
+        <div class="header-subtitle">Environnement de recette</div>
       </div>
     </div>
-    <div class="header-badge">Production</div>
+    <div class="header-badge">Recette</div>
   </header>
 
   <!-- TABS NAV -->
   <div class="tabs-wrapper">
-    <button class="tab-btn active" onclick="switchTab('itinova', this)">
+    <button id="tab-itinova" class="tab-btn active" onclick="switchTab('itinova', this)">
       Applications Itinova
-      <span class="tab-count">5</span>
+      <span class="tab-count" id="count-itinova">…</span>
     </button>
-    <button class="tab-btn" onclick="switchTab('santinova', this)">
+    <button id="tab-santinova" class="tab-btn" onclick="switchTab('santinova', this)">
       Applications Santinova
-      <span class="tab-count">3</span>
+      <span class="tab-count" id="count-santinova">…</span>
     </button>
   </div>
 
@@ -374,58 +349,8 @@
         <h2>Applications Itinova</h2>
         <p>Cliquez sur une application pour l'ouvrir dans un nouvel onglet</p>
       </div>
-      <div class="apps-grid">
+      <div id="grid-itinova" class="apps-grid">
-
+        <div class="loading-msg">Chargement des applications…</div>
-        <!-- Gestion des Formations -->
-        <a class="app-card" data-app-id="formation-manager-itinova" href="https://formations.itinova.org" target="_blank" rel="noopener noreferrer">
-          <div class="card-image-wrapper">
-            <img src="images/formation-manager-itinova.png" alt="Gestion des Formations" />
-          </div>
-          <div class="card-name">Gestion des Formations</div>
-          <div class="card-env-badge">Production</div>
-          <div class="card-status-badge">Hors ligne</div>
-        </a>
-
-        <!-- Itinova Contacts -->
-        <a class="app-card" data-app-id="itinova-contacts" href="https://contacts.santinova-soft.org" target="_blank" rel="noopener noreferrer">
-          <div class="card-image-wrapper">
-            <img src="images/itinova-contacts.png" alt="Itinova Contacts" />
-          </div>
-          <div class="card-name">Itinova Contacts</div>
-          <div class="card-env-badge">Production</div>
-          <div class="card-status-badge">Hors ligne</div>
-        </a>
-
-        <!-- Itinova Podcasts -->
-        <a class="app-card" data-app-id="itinova-podcasts" href="https://podcasts.santinova-soft.org" target="_blank" rel="noopener noreferrer">
-          <div class="card-image-wrapper">
-            <img src="images/itinova-podcasts.png" alt="Itinova Podcasts" />
-          </div>
-          <div class="card-name">Itinova Podcasts</div>
-          <div class="card-env-badge">Production</div>
-          <div class="card-status-badge">Hors ligne</div>
-        </a>
-
-        <!-- Veille Stratégique -->
-        <a class="app-card" data-app-id="veille-reglementaire" href="https://veille.santinova-soft.org" target="_blank" rel="noopener noreferrer">
-          <div class="card-image-wrapper">
-            <img src="images/veille-reglementaire.png" alt="Veille Stratégique" />
-          </div>
-          <div class="card-name">Veille Stratégique</div>
-          <div class="card-env-badge">Production</div>
-          <div class="card-status-badge">Hors ligne</div>
-        </a>
-
-        <!-- Itinova Gestion de Flotte -->
-        <a class="app-card" data-app-id="itinova-vehicle-exchange" href="https://flotte.santinova-soft.org" target="_blank" rel="noopener noreferrer">
-          <div class="card-image-wrapper">
-            <img src="images/itinova-flotte.png" alt="Itinova Gestion de Flotte" />
-          </div>
-          <div class="card-name">Itinova Gestion de Flotte</div>
-          <div class="card-env-badge">Production</div>
-          <div class="card-status-badge">Hors ligne</div>
-        </a>
-
       </div>
     </div>
 
@@ -435,38 +360,8 @@
         <h2>Applications Santinova</h2>
         <p>Cliquez sur une application pour l'ouvrir dans un nouvel onglet</p>
       </div>
-      <div class="apps-grid">
+      <div id="grid-santinova" class="apps-grid">
-
+        <div class="loading-msg">Chargement des applications…</div>
-        <!-- SONUM -->
-        <a class="app-card" data-app-id="sonum" href="https://sonum.santinova-soft.org" target="_blank" rel="noopener noreferrer">
-          <div class="card-image-wrapper">
-            <img src="images/sonum.png" alt="SONUM" />
-          </div>
-          <div class="card-name">SONUM</div>
-          <div class="card-env-badge">Production</div>
-          <div class="card-status-badge">Hors ligne</div>
-        </a>
-
-        <!-- Démat. Facturation DSI -->
-        <a class="app-card" data-app-id="demat-facturation-dsi" href="https://demat-facturation.santinova-soft.org" target="_blank" rel="noopener noreferrer">
-          <div class="card-image-wrapper">
-            <img src="images/demat-facturation-dsi.jpg" alt="Démat. Facturation DSI" />
-          </div>
-          <div class="card-name">Démat. Facturation DSI</div>
-          <div class="card-env-badge">Production</div>
-          <div class="card-status-badge">Hors ligne</div>
-        </a>
-
-        <!-- Facturation Santinova -->
-        <a class="app-card" data-app-id="facturation-santinova" href="https://facturation.santinova-soft.org" target="_blank" rel="noopener noreferrer">
-          <div class="card-image-wrapper">
-            <img src="images/facturation.png" alt="Facturation Santinova" />
-          </div>
-          <div class="card-name">Facturation Santinova</div>
-          <div class="card-env-badge">Production</div>
-          <div class="card-status-badge">Hors ligne</div>
-        </a>
-
       </div>
     </div>
 
@@ -480,74 +375,139 @@
   </footer>
 
   <script>
-    // URL de l'API de statut du dashboard de production
+    /*
-    var DASHBOARD_STATUS_URL = 'https://dashboard.santinova-soft.org/api/public/status';
+     * Configuration d'environnement. Cette version est exclusivement destinée
+     * à la recette. La version production ne diffère que par ces quatre valeurs.
+     */
+    var ENV = 'recette';
+    var ENV_LABEL = 'Recette';
+    var DASHBOARD_APPS_URL = 'https://dashboard.recette.santinova-soft.org/api/public/apps';
+    var DASHBOARD_STATUS_URL = 'https://dashboard.recette.santinova-soft.org/api/public/status';
+    var STATUS_REFRESH_MS = 30000;
+    var APPS_REFRESH_MS = 300000;
+    var hasRenderedApps = false;
 
-    function updateTabCounts() {
+    function switchTab(tabName, button) {
-      document.querySelectorAll('.tab-btn').forEach(function(btn) {
+      document.querySelectorAll('.tab-btn').forEach(function(tab) { tab.classList.remove('active'); });
-        var onclick = btn.getAttribute('onclick') || '';
+      document.querySelectorAll('.tab-panel').forEach(function(panel) { panel.classList.remove('active'); });
-        var match = onclick.match(/switchTab\('(\w+)'/);
+      button.classList.add('active');
-        if (!match) return;
-        var panelId = 'panel-' + match[1];
-        var panel = document.getElementById(panelId);
-        if (!panel) return;
-        var count = panel.querySelectorAll('.app-card').length;
-        var badge = btn.querySelector('.tab-count');
-        if (badge) badge.textContent = count;
-      });
-    }
-
-    function switchTab(tabName, btn) {
-      document.querySelectorAll('.tab-btn').forEach(function(b) { b.classList.remove('active'); });
-      document.querySelectorAll('.tab-panel').forEach(function(p) { p.classList.remove('active'); });
-      btn.classList.add('active');
       document.getElementById('panel-' + tabName).classList.add('active');
     }
 
-    /**
+    function escapeHtml(value) {
-     * Met à jour l'état visuel des tuiles en fonction des statuts reçus du dashboard.
+      return String(value || '').replace(/[&<>'"]/g, function(character) {
-     */
+        return ({ '&': '&amp;', '<': '&lt;', '>': '&gt;', "'": '&#39;', '"': '&quot;' })[character];
-    function applyStatuses(statuses) {
-      var cards = document.querySelectorAll('.app-card[data-app-id]');
-      cards.forEach(function(card) {
-        var appId = card.getAttribute('data-app-id');
-        var appStatus = statuses.find(function(s) { return s.id === appId; });
-        if (appStatus) {
-          var isOffline = appStatus.status === 'offline' || !appStatus.containerRunning;
-          if (isOffline) {
-            card.classList.add('offline');
-          } else {
-            card.classList.remove('offline');
-          }
-        }
       });
     }
 
-    /**
+    function isHttpsUrl(value) {
-     * Interroge le dashboard pour obtenir les statuts et met à jour les tuiles.
+      try {
-     */
+        return new URL(value).protocol === 'https:';
-    function fetchAndApplyStatuses() {
+      } catch (error) {
-      fetch(DASHBOARD_STATUS_URL, { cache: 'no-store' })
+        return false;
-        .then(function(response) {
+      }
-          if (!response.ok) throw new Error('HTTP ' + response.status);
+    }
-          return response.json();
+
-        })
+    function isOffline(app) {
-        .then(function(statuses) {
+      return app.status === 'offline' || app.status === 'error' || app.containerRunning === false;
-          applyStatuses(statuses);
+    }
-        })
+
-        .catch(function(err) {
+    /** Construit une tuile depuis un manifeste validé par le dashboard local. */
-          console.warn('[Portail] Impossible de récupérer les statuts:', err.message);
+    function buildCard(app) {
-        });
+      var url = app.urls && app.urls[ENV];
+      if (!isHttpsUrl(url)) return '';
+
+      var image = app.image || ('images/' + app.id + '.png');
+      var offline = isOffline(app);
+      var offlineClass = offline ? ' offline' : '';
+      var ariaDisabled = offline ? ' aria-disabled="true"' : '';
+
+      return '<a class="app-card' + offlineClass + '" data-app-id="' + escapeHtml(app.id) + '" href="' + escapeHtml(url) + '" target="_blank" rel="noopener noreferrer"' + ariaDisabled + '>' +
+        '<div class="card-image-wrapper"><img src="' + escapeHtml(image) + '" alt="' + escapeHtml(app.name) + '" onerror="this.style.display=\'none\'" /></div>' +
+        '<div class="card-name">' + escapeHtml(app.name) + '</div>' +
+        '<div class="card-env-badge">' + ENV_LABEL + '</div>' +
+        '<div class="card-status-badge">Hors ligne</div>' +
+        '</a>';
+    }
+
+    function renderApps(apps) {
+      // Défense en profondeur : le dashboard exclut INFRA et le portail le fait aussi.
+      var visibleApps = apps.filter(function(app) {
+        return app.category !== 'INFRA' && isHttpsUrl(app.urls && app.urls[ENV]);
+      });
+      var itinovaApps = visibleApps.filter(function(app) { return app.category === 'ITINOVA'; });
+      var santinovaApps = visibleApps.filter(function(app) { return app.category === 'SANTINOVA'; });
+
+      var gridItinova = document.getElementById('grid-itinova');
+      var gridSantinova = document.getElementById('grid-santinova');
+      gridItinova.innerHTML = itinovaApps.length
+        ? itinovaApps.map(buildCard).join('')
+        : '<div class="loading-msg">Aucune application Itinova déployée.</div>';
+      gridSantinova.innerHTML = santinovaApps.length
+        ? santinovaApps.map(buildCard).join('')
+        : '<div class="loading-msg">Aucune application Santinova déployée.</div>';
+
+      document.getElementById('count-itinova').textContent = itinovaApps.length;
+      document.getElementById('count-santinova').textContent = santinovaApps.length;
+      hasRenderedApps = true;
+    }
+
+    async function requestJson(url) {
+      var controller = new AbortController();
+      var timeoutId = setTimeout(function() { controller.abort(); }, 8000);
+      try {
+        var response = await fetch(url, { cache: 'no-store', signal: controller.signal });
+        if (!response.ok) throw new Error('HTTP ' + response.status);
+        return await response.json();
+      } finally {
+        clearTimeout(timeoutId);
+      }
+    }
+
+    async function loadApps() {
+      try {
+        var apps = await requestJson(DASHBOARD_APPS_URL);
+        if (!Array.isArray(apps)) throw new Error('réponse applications invalide');
+        renderApps(apps);
+        await fetchAndApplyStatuses();
+      } catch (error) {
+        console.warn('[Portail] Chargement des applications impossible :', error.message);
+        if (!hasRenderedApps) {
+          var message = '<div class="loading-msg">Dashboard indisponible — veuillez réessayer.</div>';
+          document.getElementById('grid-itinova').innerHTML = message;
+          document.getElementById('grid-santinova').innerHTML = message;
+          document.getElementById('count-itinova').textContent = '!';
+          document.getElementById('count-santinova').textContent = '!';
+        }
+      }
+    }
+
+    function applyStatuses(statuses) {
+      if (!Array.isArray(statuses)) return;
+      var byId = new Map(statuses.map(function(status) { return [status.id, status]; }));
+      document.querySelectorAll('.app-card[data-app-id]').forEach(function(card) {
+        var status = byId.get(card.getAttribute('data-app-id'));
+        if (!status) return;
+        var offline = isOffline(status);
+        card.classList.toggle('offline', offline);
+        card.setAttribute('aria-disabled', String(offline));
+      });
+    }
+
+    async function fetchAndApplyStatuses() {
+      try {
+        applyStatuses(await requestJson(DASHBOARD_STATUS_URL));
+      } catch (error) {
+        // Conserver le dernier état connu est préférable à un grisage erroné.
+        console.warn('[Portail] Mise à jour des statuts impossible :', error.message);
+      }
     }
 
     document.addEventListener('DOMContentLoaded', function() {
-      updateTabCounts();
+      loadApps();
-      // Premier appel immédiat
+      setInterval(fetchAndApplyStatuses, STATUS_REFRESH_MS);
-      fetchAndApplyStatuses();
+      setInterval(loadApps, APPS_REFRESH_MS);
-      // Polling toutes les 30 secondes
-      setInterval(fetchAndApplyStatuses, 30000);
     });
   </script>
-
 </body>
 </html>

package.json

@@ -0,0 +1,11 @@
+{
+  "name": "portail-santinova",
+  "version": "1.0.0",
+  "private": true,
+  "scripts": {
+    "test": "node test/portal-contract.test.js",
+    "check": "echo 'No TypeScript — skip'",
+    "build": "echo 'Static site — no build step'",
+    "verify": "pnpm check && pnpm test && pnpm build"
+  }
+}

test/portal-contract.test.js

@@ -0,0 +1,21 @@
+/*
+ * Contrat de non-régression du portail dynamique.
+ * Il bloque les marqueurs de conflit, les doublons de configuration
+ * et le mélange des URLs recette/production.
+ */
+const assert = require('node:assert/strict');
+const fs = require('node:fs');
+const path = require('node:path');
+
+const html = fs.readFileSync(path.join(__dirname, '..', 'index.html'), 'utf8');
+
+assert.equal(/^(<<<<<<<|=======|>>>>>>>)/m.test(html), false, 'aucun marqueur de conflit Git ne doit être livré');
+assert.equal((html.match(/var DASHBOARD_APPS_URL/g) || []).length, 1, 'une seule URL API applications doit être déclarée');
+assert.equal((html.match(/var DASHBOARD_STATUS_URL/g) || []).length, 1, 'une seule URL API statuts doit être déclarée');
+assert.match(html, /var ENV = 'recette';/, 'la version recette doit déclarer explicitement son environnement');
+assert.match(html, /app\.urls\[ENV\]/, 'les liens doivent être sélectionnés depuis l’environnement déclaré');
+assert.match(html, /app\.category !== 'INFRA'/, 'les tuiles INFRA doivent être filtrées côté portail');
+assert.match(html, /var STATUS_REFRESH_MS = 30000;/, 'le délai de grisage doit être explicite');
+assert.match(html, /setInterval\(fetchAndApplyStatuses, STATUS_REFRESH_MS\)/, 'le grisage doit être réactualisé périodiquement');
+
+console.log('OK portal-contract');