From 6b805c26b48131d56c40781fc3c3dc1f262348fa Mon Sep 17 00:00:00 2001
From: KONE SOREL <skone@ebene.info>
Date: Mon, 22 Dec 2025 08:11:03 +0000
Subject: [PATCH] Connexion

---
 Vue/Connexion/index.php | 482 +++++++++++++++++++++++++++++++++++-----
 1 file changed, 432 insertions(+), 50 deletions(-)
diff --git a/Vue/Connexion/index.php b/Vue/Connexion/index.php
index a24e04e..ea6b2f2 100755
--- a/Vue/Connexion/index.php
+++ b/Vue/Connexion/index.php
@@ -1,59 +1,441 @@
 <?php 
-	$this->titre = "INTER-SANTE - Connexion" ;
+$this->titre = "INTER-SANTÉ - Connexion";
 
-	if (isset($_COOKIE['codeUtilisateur']))
-	{
-		$_SESSION['lang'] 	= $_COOKIE['lang'];
-		$codeUtilisateur 	= $_COOKIE['codeUtilisateur'];
-	}
-	else
-	{
-		$_SESSION['lang'] 	= "fr_FR";
-		$codeUtilisateur 	= "";
-	}
+// Gestion des cookies de session
+if (isset($_COOKIE['codeUtilisateur'])) {
+    $_SESSION['lang'] = $_COOKIE['lang'] ?? 'fr_FR';
+    $codeUtilisateur = $_COOKIE['codeUtilisateur'];
+} else {
+    $_SESSION['lang'] = "fr_FR";
+    $codeUtilisateur = "";
+}
+
+// Déterminer l'URL de base
+$baseUrl = isset($racineWeb) ? $racineWeb : '/';
 ?>
 
-<INPUT class="sr-only"  TYPE="text" id="vue" name="vue" value="Connexion"/>
+<!DOCTYPE html>
+<html lang="fr" data-bs-theme="light">
+<head>
+    <meta charset="UTF-8">
+    <meta name="viewport" content="width=device-width, initial-scale=1.0">
+    <title><?= htmlspecialchars($this->titre) ?></title>
+    
+    <!-- Meta pour optimisation -->
+    <meta name="description" content="Portail de connexion INTER-SANTÉ">
+    <meta name="theme-color" content="#b7472a">
+    
+    <!-- Préchargement des ressources critiques -->
+    <link rel="preconnect" href="https://cdn.jsdelivr.net">
+    <link rel="preconnect" href="https://fonts.googleapis.com">
+    
+    <!-- Bootstrap 5 (version unique) -->
+    <link href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/css/bootstrap.min.css" rel="stylesheet" 
+          integrity="sha384-T3c6CoIi6uLrA9TneNEoa7RxnatzjcDSCmG1MXxSR1GAsXEV/Dwwykc2MPK8M2HN" 
+          crossorigin="anonymous">
+    
+    <!-- Bootstrap Icons -->
+    <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.1/font/bootstrap-icons.css">
+    
+    <!-- Font Awesome -->
+    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.5.1/css/all.min.css">
+    
+    <!-- Styles de connexion spécifiques -->
+    <link rel="stylesheet" type="text/css" href="<?= $baseUrl ?>Bootstrap/login/vendor/bootstrap/css/bootstrap.min.css">
+    <link rel="stylesheet" type="text/css" href="<?= $baseUrl ?>Bootstrap/login/fonts/font-awesome-4.7.0/css/font-awesome.min.css">
+    <link rel="stylesheet" type="text/css" href="<?= $baseUrl ?>Bootstrap/login/fonts/iconic/css/material-design-iconic-font.min.css">
+    <link rel="stylesheet" type="text/css" href="<?= $baseUrl ?>Bootstrap/login/vendor/animate/animate.css">
+    <link rel="stylesheet" type="text/css" href="<?= $baseUrl ?>Bootstrap/login/vendor/css-hamburgers/hamburgers.min.css">
+    <link rel="stylesheet" type="text/css" href="<?= $baseUrl ?>Bootstrap/login/vendor/animsition/css/animsition.min.css">
+    <link rel="stylesheet" type="text/css" href="<?= $baseUrl ?>Bootstrap/login/vendor/select2/select2.min.css">
+    <link rel="stylesheet" type="text/css" href="<?= $baseUrl ?>Bootstrap/login/vendor/daterangepicker/daterangepicker.css">
+    <link rel="stylesheet" type="text/css" href="<?= $baseUrl ?>Bootstrap/login/css/util.css">
+    <link rel="stylesheet" type="text/css" href="<?= $baseUrl ?>Bootstrap/login/css/main.css">
+    
+    <!-- Styles optimisés pour les polices -->
+    <style>
+        /* Fallback immédiat pour éviter le FOUT */
+        @font-face {
+            font-family: 'Play Fallback';
+            src: local('Arial'), local('Segoe UI');
+            font-display: swap;
+        }
+        
+        body {
+            font-family: 'Play Fallback', 'Play', 'Segoe UI', sans-serif;
+        }
+        
+        /* Masquer les éléments masqués proprement */
+        .sr-only {
+            position: absolute;
+            width: 1px;
+            height: 1px;
+            padding: 0;
+            margin: -1px;
+            overflow: hidden;
+            clip: rect(0, 0, 0, 0);
+            white-space: nowrap;
+            border: 0;
+        }
+        
+        /* Optimisation réseau lent */
+        .slow-network .animated-element {
+            animation: none !important;
+            transition: none !important;
+        }
+        
+        /* Loader pour connexion */
+        .login-loader {
+            display: none;
+            position: fixed;
+            top: 0;
+            left: 0;
+            width: 100%;
+            height: 100%;
+            background: rgba(255,255,255,0.9);
+            z-index: 9999;
+            justify-content: center;
+            align-items: center;
+            flex-direction: column;
+        }
+        
+        .login-loader.active {
+            display: flex;
+        }
+        
+        .loader-spinner {
+            width: 50px;
+            height: 50px;
+            border: 5px solid #f3f3f3;
+            border-top: 5px solid #b7472a;
+            border-radius: 50%;
+            animation: spin 1s linear infinite;
+        }
+        
+        @keyframes spin {
+            0% { transform: rotate(0deg); }
+            100% { transform: rotate(360deg); }
+        }
+    </style>
+    
+    <!-- Favicon -->
+    <link rel="icon" href="<?= $baseUrl ?>Bootstrap_new/images/new/favicon.png" type="image/png">
+</head>
 
-<?php if (isset($msgErreur)  ): ?>
-	<input class="sr-only" type="text" id="msgErreur" name="msgErreur" value="<?= $msgErreur ?>">
-<?php else : ?>
-	<input class="sr-only" type="text" id="msgErreur" name="msgErreur" value="">
-<?php endif; ?>  
+<body>
+    <!-- Loader de connexion -->
+    <div class="login-loader" id="loginLoader">
+        <div class="loader-spinner"></div>
+        <p class="mt-3 text-muted">Connexion en cours...</p>
+    </div>
 
-<div id="div_ajaxconnexion">							
-</div>
+    <!-- Champs cachés pour données PHP -->
+    <input class="sr-only" type="text" id="vue" name="vue" value="Connexion">
+    <input class="sr-only" type="text" id="msgErreur" name="msgErreur" value="<?= isset($msgErreur) ? htmlspecialchars($msgErreur) : '' ?>">
+    <input class="sr-only" type="text" id="baseUrl" value="<?= $baseUrl ?>">
+    <input class="sr-only" type="text" id="codeUtilisateur" value="<?= htmlspecialchars($codeUtilisateur) ?>">
+    <input class="sr-only" type="text" id="currentLang" value="<?= $_SESSION['lang'] ?>">
 
-<script src="Bootstrap/js/jquery.min.js"></script>
-<script src="Bootstrap/js/jquery-ui.js"></script>
-<script src="Bootstrap/js/bootstrap.min.js"></script>
-<script src="Js/datepicker-fr.js"></script>
-<script src="Js/fonctions.js?ver=connexion_2025.09.25.04"></script> 
-<script src="Bootstrap/js/timer.jquery.js"></script>
-<script src="Bootstrap/js/jquery.timer.js"></script>
-<script src="Bootstrap/js/ajaxmask.js"></script>
-<script src="Bootstrap/js/custom.js"></script>
+    <!-- Conteneur principal -->
+    <div id="div_ajaxconnexion">
+        <!-- Le contenu de connexion sera injecté ici -->
+    </div>
 
-<!--===============================================================================================-->
-	<script src="Bootstrap/login/vendor/jquery/jquery-3.2.1.min.js"></script>
-<!--===============================================================================================-->
-	<script src="Bootstrap/login/vendor/animsition/js/animsition.min.js"></script>
-<!--===============================================================================================-->
-	<script src="Bootstrap/login/vendor/bootstrap/js/popper.js"></script>
-	<script src="Bootstrap/login/vendor/bootstrap/js/bootstrap.min.js"></script>
-<!--===============================================================================================-->
-	<script src="Bootstrap/login/vendor/select2/select2.min.js"></script>
-<!--===============================================================================================-->
-	<script src="Bootstrap/login/vendor/daterangepicker/moment.min.js"></script>
-	<script src="Bootstrap/login/vendor/daterangepicker/daterangepicker.js"></script>
-<!--===============================================================================================-->
-	<script src="Bootstrap/login/vendor/countdowntime/countdowntime.js"></script>
-<!--===============================================================================================-->
-	<script src="Bootstrap/login/js/main.js"></script>
-	
-	<script src="https://cdn.jsdelivr.net/npm/bootstrap-select@1.13.14/dist/js/bootstrap-select.min.js"></script>
+    <!-- ============================================
+         SCRIPTS OPTIMISÉS - Version unique et moderne
+         ============================================ -->
+    
+    <!-- jQuery 3.7.1 (version unique et moderne) -->
+    <script src="https://code.jquery.com/jquery-3.7.1.min.js" 
+            integrity="sha256-/JqT3SQfawRcv/BIHPThkBvs0OEvtFFmqPF/lYI/Cxo=" 
+            crossorigin="anonymous"></script>
+    
+    <!-- jQuery UI -->
+    <script src="https://code.jquery.com/ui/1.13.2/jquery-ui.min.js" 
+            integrity="sha256-lSjKY0/srUM9BE3dPm+c4fBo1dky2v27Gdjm2uoZaL0=" 
+            crossorigin="anonymous"></script>
+    
+    <!-- Bootstrap 5 Bundle (remplace toutes les versions Bootstrap) -->
+    <script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.2/dist/js/bootstrap.bundle.min.js" 
+            integrity="sha384-C6RzsynM9kWDrMNeT87bh95OGNyZPhcTNXj1NW7RuBCsyN/o0jlpcV8Qyq46cDfL" 
+            crossorigin="anonymous"></script>
+    
+    <!-- Bibliothèques de connexion spécifiques (version optimisée) -->
+    <script src="<?= $baseUrl ?>Bootstrap/login/vendor/animsition/js/animsition.min.js"></script>
+    <script src="<?= $baseUrl ?>Bootstrap/login/vendor/select2/select2.min.js"></script>
+    <script src="<?= $baseUrl ?>Bootstrap/login/vendor/daterangepicker/moment.min.js"></script>
+    <script src="<?= $baseUrl ?>Bootstrap/login/vendor/daterangepicker/daterangepicker.js"></script>
+    
+    <!-- Bibliothèques applicatives -->
+    <script src="<?= $baseUrl ?>Js/fonctions.js?ver=2025.12.21.01"></script>
+    <script src="<?= $baseUrl ?>Bootstrap/js/ajaxmask.js?ver=2025.12.21.01"></script>
+    
+    <!-- Datepicker selon la langue -->
+    <?php if ($_SESSION['lang'] === 'en_US'): ?>
+        <script src="<?= $baseUrl ?>Js/datepicker-eng.js?ver=2025.12.21.01"></script>
+    <?php else: ?>
+        <script src="<?= $baseUrl ?>Js/datepicker-fr.js?ver=2025.12.21.01"></script>
+    <?php endif; ?>
+    
+    <!-- Script principal de connexion -->
+    <script src="<?= $baseUrl ?>Bootstrap/login/js/main.js?ver=2025.12.21.01"></script>
 
-
-<script type="text/javascript">
-	connexion_cookie();
-</script>
+    <!-- ============================================
+         SCRIPT D'INITIALISATION OPTIMISÉ
+         ============================================ -->
+    <script>
+    (function() {
+        'use strict';
+        
+        console.log('Initialisation page connexion...');
+        
+        // Variables globales pour cette page
+        window.loginConfig = {
+            baseUrl: '<?= $baseUrl ?>',
+            currentLang: '<?= $_SESSION['lang'] ?>',
+            codeUtilisateur: '<?= $codeUtilisateur ?>',
+            debugMode: true
+        };
+        
+        // Détection réseau lent
+        function detectSlowNetwork() {
+            if ('connection' in navigator) {
+                const conn = navigator.connection;
+                if (conn && (conn.effectiveType === 'slow-2g' || conn.effectiveType === '2g')) {
+                    console.log('Réseau lent détecté, optimisation en cours...');
+                    document.body.classList.add('slow-network');
+                    
+                    // Optimisations pour réseau lent
+                    optimizeForSlowNetwork();
+                }
+            }
+        }
+        
+        function optimizeForSlowNetwork() {
+            // Désactiver les animations non critiques
+            const style = document.createElement('style');
+            style.textContent = `
+                .slow-network * {
+                    animation-duration: 0.01ms !important;
+                    animation-iteration-count: 1 !important;
+                    transition-duration: 0.01ms !important;
+                }
+                
+                .slow-network [data-lazy] {
+                    display: none;
+                }
+            `;
+            document.head.appendChild(style);
+        }
+        
+        // Gestion du loader
+        function showLoader() {
+            document.getElementById('loginLoader').classList.add('active');
+        }
+        
+        function hideLoader() {
+            document.getElementById('loginLoader').classList.remove('active');
+        }
+        
+        // Vérification des cookies
+        function checkCookies() {
+            const cookies = document.cookie.split(';');
+            let hasSessionCookie = false;
+            
+            cookies.forEach(cookie => {
+                if (cookie.trim().startsWith('codeUtilisateur=')) {
+                    hasSessionCookie = true;
+                }
+            });
+            
+            return hasSessionCookie;
+        }
+        
+        // Initialisation principale
+        document.addEventListener('DOMContentLoaded', function() {
+            console.log('DOM chargé, initialisation en cours...');
+            
+            // Détection réseau
+            detectSlowNetwork();
+            
+            // Vérifier les cookies
+            const hasCookies = checkCookies();
+            
+            // Gestion des erreurs
+            const errorMsg = document.getElementById('msgErreur').value;
+            if (errorMsg && errorMsg.trim() !== '') {
+                console.warn('Message d\'erreur détecté:', errorMsg);
+                
+                // Afficher l'erreur après un délai
+                setTimeout(function() {
+                    if (typeof Swal !== 'undefined') {
+                        Swal.fire({
+                            title: 'Erreur',
+                            text: errorMsg,
+                            icon: 'error',
+                            confirmButtonText: 'OK'
+                        });
+                    } else {
+                        alert(errorMsg);
+                    }
+                }, 1000);
+            }
+            
+            // Appeler la fonction de connexion cookie
+            if (typeof connexion_cookie === 'function') {
+                console.log('Appel de connexion_cookie()');
+                connexion_cookie();
+            } else {
+                console.error('Fonction connexion_cookie() non trouvée');
+            }
+            
+            // Configurer les écouteurs d'événements
+            setupEventListeners();
+            
+            // Optimiser les performances
+            optimizePerformance();
+        });
+        
+        function setupEventListeners() {
+            // Écouter les soumissions de formulaire
+            document.addEventListener('submit', function(e) {
+                if (e.target.matches('form[action*="connecter"]')) {
+                    showLoader();
+                    
+                    // Timeout de sécurité
+                    setTimeout(hideLoader, 30000); // 30 secondes max
+                }
+            });
+            
+            // Écouter les clics sur les liens de connexion
+            document.addEventListener('click', function(e) {
+                if (e.target.closest('a[href*="connecter"]')) {
+                    showLoader();
+                }
+            });
+        }
+        
+        function optimizePerformance() {
+            // Précharger les images critiques
+            const criticalImages = [
+                '<?= $baseUrl ?>Bootstrap/login/images/bg-01.jpg',
+                '<?= $baseUrl ?>Bootstrap_new/images/new/favicon.png'
+            ];
+            
+            criticalImages.forEach(src => {
+                const img = new Image();
+                img.src = src;
+            });
+            
+            // Lazy loading pour les images non critiques
+            if ('loading' in HTMLImageElement.prototype) {
+                const images = document.querySelectorAll('img[data-src]');
+                images.forEach(img => {
+                    img.loading = 'lazy';
+                    img.src = img.dataset.src;
+                });
+            }
+        }
+        
+        // Exposer des fonctions pour débogage
+        window.loginDebug = {
+            showLoader: showLoader,
+            hideLoader: hideLoader,
+            getConfig: () => window.loginConfig
+        };
+        
+        console.log('Initialisation terminée');
+        
+    })();
+    
+    // Fonction globale de connexion cookie
+    function connexion_cookie() {
+        console.log('connexion_cookie() exécutée');
+        
+        const codeUtilisateur = document.getElementById('codeUtilisateur').value;
+        const currentLang = document.getElementById('currentLang').value;
+        const baseUrl = document.getElementById('baseUrl').value;
+        
+        if (codeUtilisateur && codeUtilisateur.trim() !== '') {
+            console.log('Cookie utilisateur trouvé:', codeUtilisateur);
+            
+            // Préparer les données
+            const formData = new FormData();
+            formData.append('login', codeUtilisateur);
+            formData.append('langue', currentLang);
+            
+            // Afficher le loader
+            if (window.loginDebug) {
+                window.loginDebug.showLoader();
+            }
+            
+            // Envoyer la requête AJAX
+            fetch(baseUrl + 'Connexion/connecter', {
+                method: 'POST',
+                body: formData,
+                credentials: 'same-origin'
+            })
+            .then(response => {
+                if (response.redirected) {
+                    window.location.href = response.url;
+                } else {
+                    return response.text();
+                }
+            })
+            .then(html => {
+                if (html) {
+                    document.getElementById('div_ajaxconnexion').innerHTML = html;
+                }
+            })
+            .catch(error => {
+                console.error('Erreur connexion cookie:', error);
+                if (window.loginDebug) {
+                    window.loginDebug.hideLoader();
+                }
+            })
+            .finally(() => {
+                // Cacher le loader après un délai
+                setTimeout(() => {
+                    if (window.loginDebug) {
+                        window.loginDebug.hideLoader();
+                    }
+                }, 1000);
+            });
+        } else {
+            console.log('Aucun cookie utilisateur trouvé, affichage du formulaire normal');
+            
+            // Charger le formulaire de connexion normal
+            fetch(baseUrl + 'Connexion/formulaire')
+                .then(response => response.text())
+                .then(html => {
+                    document.getElementById('div_ajaxconnexion').innerHTML = html;
+                })
+                .catch(error => {
+                    console.error('Erreur chargement formulaire:', error);
+                    document.getElementById('div_ajaxconnexion').innerHTML = 
+                        '<div class="alert alert-danger">Erreur de chargement du formulaire</div>';
+                });
+        }
+    }
+    
+    // Assurer que la fonction est disponible globalement
+    window.connexion_cookie = connexion_cookie;
+    
+    </script>
+    
+    <!-- Analytics et monitoring (optionnel) -->
+    <script>
+    // Monitoring des performances
+    window.addEventListener('load', function() {
+        const timing = performance.timing;
+        const loadTime = timing.loadEventEnd - timing.navigationStart;
+        
+        console.log('Temps de chargement total:', loadTime + 'ms');
+        
+        if (loadTime > 3000) {
+            console.warn('Chargement lent détecté');
+        }
+    });
+    </script>
+</body>
+</html>
\ No newline at end of file
