Version DeepSeek corrigée v1.2

Vue/Ajaxconnexioncookie/french.php

@@ -71,147 +71,143 @@
 </div>
 
 <!-- Affichage mobile (cartes) -->
-<div class="d-md-none">
+<div class="d-md-none" style="display: none;">
-    <!-- Version mobile avec IDs UNIQUES -->
+    <!-- VERSION MOBILE COMPLÈTE - SANS LE LOGO (car déjà dans portail.php) -->
-    <span class="login100-form-title" style="font-family: Play-Bold; color:#e5e5e5; margin-top: 5px; margin-bottom:10px; display: block; font-size: 22px; text-align: center;">
-        Portail Assuré
-    </span>
-
-    <?php if (isset($msgErreur) and $msgErreur>" "): ?>
-        <div class="text-center p-t-10" style="margin-bottom: 15px;">
-            <h4 class="txt3">
-                <div class="col-12 alert alert-danger" style="padding: 10px; font-size: 14px;">
-                    <?= $msgErreur ?>
-                </div>	
-            </h4>
-        </div>
-    <?php else: ?>
-        <div class="text-center p-t-10" id="div_msgErreur_mobile" style="margin-bottom: 15px;"></div>
-    <?php endif; ?>  
-
-    <?php if($maintenance!='1'): ?>
-    <!-- TOUS LES IDs ONT UN SUFFIXE _mobile POUR LES RENDRE UNIQUES -->
-    <div class="wrap-input100" style="margin-bottom: 15px;">
-        <label for="langue_mobile">Langue</label>
-        <select class="form-select" id="langue_mobile" name="langue_mobile"
-                style="width: 100%; height: 40px; padding: 8px 12px; border: 2px solid #7D4FFE !important; border-radius: 9px; background: transparent; font-size: 13px; color: #7D4FFE; text-align: center; box-sizing: border-box;"
-                required autocomplete="off" onchange="javascript:changer_langue_connexion_mobile(this.value);">
-            <?php liste_options($langues, $_SESSION['lang'], true); ?>
-        </select> 
-    </div>
     
+    <div style="width: 100%; max-width: 100%; overflow-x: hidden; padding: 10px 15px; box-sizing: border-box;">
+        
+        <!-- Titre (sans le logo car déjà affiché par portail.php) -->
+        <span class="login100-form-title" style="font-family: Play-Bold; color:#e5e5e5; margin-top: 5px; margin-bottom:10px; display: block; font-size: 22px; text-align: center; padding-top: 20px;">
+            Portail Assuré
+        </span>
 
-    <div class="wrap-input100" style="margin-bottom: 15px;">
+        <?php if (isset($msgErreur) and $msgErreur>" "): ?>
-        <div class="wrap-input100 validate-input">
+            <div class="text-center p-t-10" style="margin-bottom: 15px;">
-            <label for="codeSociete_mobile">Entité</label>
+                <h4 class="txt3">
-            <input class="input100" type="text" name="codeSociete_mobile" id="codeSociete_mobile" value="<?= $codeSociete ?>"	
+                    <div class="col-12 alert alert-danger" style="padding: 10px; font-size: 14px; border-radius: 8px;">
-            placeholder="Entité" 
+                        <?= $msgErreur ?>
-            style="width: 100%; height: 40px; padding: 8px 12px; border: 2px solid #7D4FFE !important; border-radius: 9px; color: #7D4FFE; text-align: center; box-sizing: border-box;"
+                    </div>	
-            required AUTOCOMPLETE="off" 
+                </h4>
-            onChange="javascript:changer_entite_portail_mobile(this.value);" >
+            </div>
+        <?php else: ?>
+            <div class="text-center p-t-10" id="div_msgErreur_mobile" style="margin-bottom: 15px;"></div>
+        <?php endif; ?>  
+
+        <?php if($maintenance!='1'): ?>
+        
+        <!-- Champs de formulaire avec IDs uniques -->
+        <div class="wrap-input100" style="margin-bottom: 15px;">
+            <label for="langue_mobile" style="font-size: 12pt;">Langue</label>
+            <select class="form-select" id="langue_mobile" name="langue_mobile"
+                    style="width: 100%; max-width: 300px; margin: 0 auto; height: 40px; padding: 8px 12px; border: 2px solid #7D4FFE !important; border-radius: 9px; background: transparent; font-size: 13px; color: #7D4FFE; text-align: center; box-sizing: border-box; display: block;"
+                    required autocomplete="off" onchange="changer_langue_connexion_mobile(this.value);">
+                <?php liste_options($langues, $_SESSION['lang'], true); ?>
+            </select> 
         </div>
-    </div>
 
-    <div id="div_login_portail_mobile" class="wrap-input100" style="margin-bottom: 15px;">
+        <div class="wrap-input100" style="margin-bottom: 15px;">
-        <div class="wrap-input100 validate-input">
+            <div class="wrap-input100 validate-input">
-            <label for="login_mobile">Identifiant</label>
+                <label for="codeSociete_mobile" style="font-size: 12pt;">Entité</label>
-            <input class="input100" type="text" name="login_mobile" id="login_mobile" value="<?= $codeUtilisateur ?>"	
+                <input class="input100" type="text" name="codeSociete_mobile" id="codeSociete_mobile" value="<?= $codeSociete ?>"	
-            placeholder="Identifiant" 
+                placeholder="Entité" 
-            style="width: 100%; height: 40px; padding: 8px 12px; border: 2px solid #7D4FFE !important; border-radius: 9px; color: #7D4FFE; text-align: center; box-sizing: border-box;"
+                style="width: 100%; max-width: 300px; margin: 0 auto; height: 40px; padding: 8px 12px; border: 2px solid #7D4FFE !important; border-radius: 9px; color: #7D4FFE !important; text-align: center; box-sizing: border-box; display: block;"
+                required AUTOCOMPLETE="off" 
+                onChange="changer_entite_portail_mobile(this.value);">
+            </div>
+        </div>
+
+        <div id="div_login_portail_mobile" class="wrap-input100" style="margin-bottom: 15px;">
+            <div class="wrap-input100 validate-input">
+                <label for="login_mobile" style="font-size: 12pt;">Identifiant</label>
+                <input class="input100" type="text" name="login_mobile" id="login_mobile" value="<?= $codeUtilisateur ?>"	
+                placeholder="Identifiant" 
+                style="width: 100%; max-width: 300px; margin: 0 auto; height: 40px; padding: 8px 12px; border: 2px solid #7D4FFE !important; border-radius: 9px; color: #7D4FFE !important; text-align: center; box-sizing: border-box; display: block;"
+                required AUTOCOMPLETE="off">
+            </div>
+        </div>
+
+        <div class="wrap-input100 validate-input" style="margin-bottom: 20px;">
+            <label for="mdp_mobile" style="font-size: 12pt;">Mot de passe</label>
+            <input class="input100" type="password" name="mdp_mobile" id="mdp_mobile" placeholder="Mot de passe" 
+            style="width: 100%; max-width: 300px; margin: 0 auto; height: 40px; padding: 8px 12px; border: 2px solid #7D4FFE !important; border-radius: 9px; color: #7D4FFE !important; text-align: center; box-sizing: border-box; display: block;"
             required AUTOCOMPLETE="off">
         </div>
-    </div>
 
-    <div class="wrap-input100 validate-input" style="margin-bottom: 20px;">
+        <div class="container-login100-form-btn" style="margin-bottom: 20px; text-align: center;">
-        <label for="mdp_mobile">Mot de passe</label>
+            <button name="btn_connexion_mobile" id="btn_connexion_mobile" class="btn login-btn"
-        <input class="input100" type="password" name="mdp_mobile" id="mdp_mobile" placeholder="Mot de passe" 
+                    style="width: 100%; max-width: 300px; margin: 0 auto; height: 45px; background: #7D4FFE; color: white; font-size: 18px; font-weight: 700; border-radius: 9px; border: none; box-sizing: border-box; display: block;">
-        style="width: 100%; height: 40px; padding: 8px 12px; border: 2px solid #7D4FFE !important; border-radius: 9px; color: #7D4FFE; text-align: center; box-sizing: border-box;"
+                Connexion
-        required AUTOCOMPLETE="off">
+            </button>
-    </div>
+        </div>
 
-    <div class="container-login100-form-btn" style="margin-bottom: 20px;">
+        <div class="footer" style="position: relative; font-size: 11px; text-align: center; padding: 10px; width: 100%; box-sizing: border-box;">
-        <button name="btn_connexion_mobile" id="btn_connexion_mobile" class="btn login-btn"
+            Tous droits réservés <a href="https://www.ebene.info/" style="color: #7D4FFE;">&copy; EBENE SOLUTIONS INFORMATIQUES</a>
-                style="width: 100%; height: 45px; background: #7D4FFE; color: white; font-size: 18px; font-weight: 700; border-radius: 9px; border: none; box-sizing: border-box;">
+        </div>
-            Connexion
-        </button>
-    </div>
 
-    <div class="footer" style="position: relative; bottom: auto; left: auto; font-size: 11px; text-align: center; padding: 10px; width: 100%; box-sizing: border-box;">
+        <?php endif; ?>
-        Tous droits réservés <a href="https://www.ebene.info/">&copy; EBENE SOLUTIONS INFORMATIQUES</a>
+        
     </div>
-    <?php endif; ?> 
 </div>
 
-<!-- STYLE POUR ÉVITER TOUT DÉBORDEMENT -->
+<!-- STYLES ET SCRIPT POUR MOBILE -->
 <style>
-    /* MASQUER LA VERSION MOBILE SUR DESKTOP */
+    /* STYLES SPÉCIFIQUES POUR MOBILE */
-    .d-md-none {
-        display: none !important;
-    }
-    
-    /* AFFICHER SEULEMENT SUR MOBILE */
     @media screen and (max-width: 767px) {
+        /* AFFICHER LA VERSION MOBILE */
         .d-md-none {
             display: block !important;
-            width: 100vw !important;
-            height: 100vh !important;
-            max-width: 100% !important;
-            overflow-x: hidden !important;
-            overflow-y: auto !important;
-            -webkit-overflow-scrolling: touch !important;
-            position: fixed !important;
-            top: 0 !important;
-            left: 0 !important;
-            background: white !important;
-            padding: 20px 15px !important;
-            box-sizing: border-box !important;
-            z-index: 9999 !important;
         }
         
-        /* MASQUER LA VERSION DESKTOP SUR MOBILE */
+        /* MASQUER LA VERSION DESKTOP */
         .d-none.d-md-block {
             display: none !important;
         }
         
-        /* GARANTIR QUE TOUT EST CONTENU */
+        /* CORRECTION POUR LE LOGO DANS PORTAL.PHP */
-        .d-md-none * {
+        .logo img {
+            width: 100px !important;
+            height: 100px !important;
+            position: relative !important;
+            left: 0 !important;
+            margin: 0 auto 20px auto !important;
+            display: block !important;
+        }
+        
+        /* ADAPTER LE CONTENEUR PRINCIPAL */
+        .content .form-side {
+            padding-top: 10px !important;
+            min-height: auto !important;
+        }
+        
+        /* STYLES DES CHAMPS MOBILES */
+        .d-md-none {
+            width: 100% !important;
+            max-width: 100% !important;
+            overflow: hidden !important;
+        }
+        
+        .d-md-none > div {
+            width: 100% !important;
+            max-width: 100% !important;
+            margin: 0 !important;
+            padding: 0 10px !important;
+        }
+        
+        /* CENTRER TOUT */
+        .wrap-input100 {
+            text-align: center !important;
+            width: 100% !important;
+        }
+        
+        input, select, button {
             max-width: 100% !important;
             box-sizing: border-box !important;
         }
         
-        /* CENTRER LE CONTENU VERTICALEMENT */
-        .d-md-none {
-            display: flex !important;
-            flex-direction: column !important;
-            justify-content: center !important;
-            align-items: center !important;
-        }
-        
-        /* STYLES DES CHAMPS */
-        .wrap-input100 {
-            width: 100% !important;
-            max-width: 300px !important;
-            margin: 0 auto 15px !important;
-            text-align: center !important;
-        }
-        
-        label {
-            display: block !important;
-            width: 100% !important;
-            text-align: center !important;
-            margin-bottom: 5px !important;
-            font-size: 12pt !important;
-        }
-        
-        input, select, .login-btn {
-            width: 100% !important;
-            max-width: 300px !important;
-            margin: 0 auto !important;
-            display: block !important;
-        }
-        
         /* EMPÊCHER LE ZOOM iOS */
-        input, select {
+        input[type="text"],
+        input[type="password"],
+        select {
             font-size: 16px !important;
         }
         
@@ -221,148 +217,157 @@
             color: #7D4FFE !important;
             border: solid 2px #7D4FFE !important;
         }
-        
-        /* PLACEHOLDER */
-        input::placeholder {
-            font-weight: bold !important;
-            color: #7D4FFE !important;
-            opacity: 0.8 !important;
-        }
-        
-        /* FOOTER */
-        .footer {
-            position: static !important;
-            margin-top: 20px !important;
-            width: 100% !important;
-            text-align: center !important;
-        }
     }
     
-    /* POUR LES TRÈS PETITS ÉCRANS */
+    /* CACHER MOBILE SUR DESKTOP */
-    @media screen and (max-width: 320px) {
+    @media screen and (min-width: 768px) {
         .d-md-none {
-            padding: 15px 10px !important;
+            display: none !important;
-        }
-        
-        .wrap-input100 {
-            max-width: 280px !important;
-        }
-        
-        input, select, .login-btn {
-            max-width: 280px !important;
         }
     }
 </style>
 
 <script>
-// FONCTIONS SPÉCIFIQUES POUR MOBILE
+// FONCTIONS POUR LA VERSION MOBILE
+
 function changer_langue_connexion_mobile(langue) {
-    // Synchroniser avec la version desktop si nécessaire
+    // Mettre à jour le sélecteur desktop si présent
     const desktopLangue = document.getElementById('langue');
     if (desktopLangue) {
         desktopLangue.value = langue;
-        // Déclencher l'événement change
+        // Déclencher l'événement
-        desktopLangue.dispatchEvent(new Event('change'));
+        const event = new Event('change');
+        desktopLangue.dispatchEvent(event);
     }
-    
+    console.log('Langue mobile changée:', langue);
-    // Appeler la fonction originale
-    changer_langue_connexion();
 }
 
 function changer_entite_portail_mobile(entite) {
-    // Synchroniser avec la version desktop si nécessaire
+    // Mettre à jour le champ desktop si présent
     const desktopEntite = document.getElementById('codeSociete');
     if (desktopEntite) {
         desktopEntite.value = entite;
-        desktopEntite.dispatchEvent(new Event('change'));
+        const event = new Event('change');
+        desktopEntite.dispatchEvent(event);
     }
-    
+    console.log('Entité mobile changée:', entite);
-    // Appeler la fonction originale
-    changer_entite_portail();
 }
 
 // GESTION DE LA CONNEXION MOBILE
-document.getElementById('btn_connexion_mobile')?.addEventListener('click', function(e) {
-    e.preventDefault();
-    
-    // RÉCUPÉRER LES VALEURS DES CHAMPS MOBILES
-    const codeSociete = document.getElementById('codeSociete_mobile').value;
-    const login = document.getElementById('login_mobile').value;
-    const mdp = document.getElementById('mdp_mobile').value;
-    
-    // VALIDATION
-    if (!codeSociete || !login || !mdp) {
-        alert('Veuillez remplir tous les champs obligatoires');
-        return;
-    }
-    
-    // SYNCHRONISER AVEC LES CHAMPS DESKTOP (pour la soumission du formulaire)
-    const desktopForm = document.querySelector('form'); // Trouver le formulaire principal
-    if (desktopForm) {
-        // Mettre à jour les champs du formulaire desktop
-        const desktopCodeSociete = document.getElementById('codeSociete');
-        const desktopLogin = document.getElementById('login');
-        const desktopMdp = document.getElementById('mdp');
-        
-        if (desktopCodeSociete) desktopCodeSociete.value = codeSociete;
-        if (desktopLogin) desktopLogin.value = login;
-        if (desktopMdp) desktopMdp.value = mdp;
-        
-        // DÉCLENCHER LA SOUMISSION DU FORMULAIRE DESKTOP
-        desktopForm.submit();
-    } else {
-        // FALLBACK: Créer un formulaire temporaire
-        const form = document.createElement('form');
-        form.method = 'POST';
-        form.action = window.location.href;
-        
-        // Ajouter les champs
-        const fields = [
-            {name: 'codeSociete', value: codeSociete},
-            {name: 'login', value: login},
-            {name: 'mdp', value: mdp},
-            {name: 'langue', value: document.getElementById('langue_mobile').value}
-        ];
-        
-        fields.forEach(field => {
-            const input = document.createElement('input');
-            input.type = 'hidden';
-            input.name = field.name;
-            input.value = field.value;
-            form.appendChild(input);
-        });
-        
-        document.body.appendChild(form);
-        form.submit();
-    }
-});
-
-// GARANTIR QUE SEULE LA BONNE VERSION EST VISIBLE
 document.addEventListener('DOMContentLoaded', function() {
-    const isMobile = window.innerWidth <= 767;
+    const btnMobile = document.getElementById('btn_connexion_mobile');
-    
+    if (btnMobile) {
-    if (isMobile) {
+        btnMobile.addEventListener('click', function(e) {
-        // Masquer le desktop, montrer le mobile
+            e.preventDefault();
-        const desktopVersion = document.querySelector('.d-none.d-md-block');
+            
-        const mobileVersion = document.querySelector('.d-md-none');
+            // RÉCUPÉRER LES VALEURS MOBILES
-        
+            const codeSociete = document.getElementById('codeSociete_mobile').value.trim();
-        if (desktopVersion) desktopVersion.style.display = 'none';
+            const login = document.getElementById('login_mobile').value.trim();
-        if (mobileVersion) mobileVersion.style.display = 'block';
+            const mdp = document.getElementById('mdp_mobile').value.trim();
+            const langue = document.getElementById('langue_mobile').value;
+            
+            // VALIDATION
+            if (!codeSociete || !login || !mdp) {
+                alert('Veuillez remplir tous les champs obligatoires');
+                return false;
+            }
+            
+            // OPTION 1: Synchroniser avec le formulaire desktop existant
+            const desktopForm = document.querySelector('form');
+            if (desktopForm) {
+                // Mettre à jour les champs du formulaire desktop
+                const desktopFields = {
+                    'codeSociete': codeSociete,
+                    'login': login,
+                    'mdp': mdp,
+                    'langue': langue
+                };
+                
+                for (const [name, value] of Object.entries(desktopFields)) {
+                    const field = document.getElementById(name);
+                    if (field) {
+                        field.value = value;
+                    } else {
+                        // Créer un champ caché si nécessaire
+                        const hiddenInput = document.createElement('input');
+                        hiddenInput.type = 'hidden';
+                        hiddenInput.name = name;
+                        hiddenInput.value = value;
+                        desktopForm.appendChild(hiddenInput);
+                    }
+                }
+                
+                // Soumettre le formulaire
+                desktopForm.submit();
+                return true;
+            }
+            
+            // OPTION 2: Créer un nouveau formulaire
+            console.log('Soumission formulaire mobile:', {codeSociete, login, mdp, langue});
+            
+            // Ici, vous devriez appeler votre fonction de connexion existante
+            // Par exemple: connexionUtilisateur(codeSociete, login, mdp, langue);
+            
+            // Pour l'instant, on redirige vers la même page avec les paramètres
+            const params = new URLSearchParams();
+            params.append('codeSociete', codeSociete);
+            params.append('login', login);
+            params.append('mdp', mdp);
+            params.append('langue', langue);
+            
+            window.location.href = window.location.pathname + '?' + params.toString();
+        });
     }
+    
+    // GESTION RESPONSIVE
+    function checkScreenSize() {
+        const isMobile = window.innerWidth <= 767;
+        const mobileContainer = document.querySelector('.d-md-none');
+        const desktopContainer = document.querySelector('.d-none.d-md-block');
+        
+        if (isMobile) {
+            // Mode mobile
+            if (mobileContainer) mobileContainer.style.display = 'block';
+            if (desktopContainer) desktopContainer.style.display = 'none';
+        } else {
+            // Mode desktop
+            if (mobileContainer) mobileContainer.style.display = 'none';
+            if (desktopContainer) desktopContainer.style.display = 'block';
+        }
+    }
+    
+    // Vérifier au chargement et au redimensionnement
+    checkScreenSize();
+    window.addEventListener('resize', checkScreenSize);
 });
 
-// REDIMENSIONNEMENT DE LA FENÊTRE
+// SYNCHRONISATION DES CHAMPS (optionnel)
-window.addEventListener('resize', function() {
+function synchronizeFields() {
-    const isMobile = window.innerWidth <= 767;
+    // Synchroniser les valeurs entre mobile et desktop
-    const desktopVersion = document.querySelector('.d-none.d-md-block');
+    const fieldsToSync = [
-    const mobileVersion = document.querySelector('.d-md-none');
+        {mobile: 'codeSociete_mobile', desktop: 'codeSociete'},
+        {mobile: 'login_mobile', desktop: 'login'},
+        {mobile: 'langue_mobile', desktop: 'langue'}
+    ];
     
-    if (isMobile) {
+    fieldsToSync.forEach(field => {
-        if (desktopVersion) desktopVersion.style.display = 'none';
+        const mobileField = document.getElementById(field.mobile);
-        if (mobileVersion) mobileVersion.style.display = 'block';
+        const desktopField = document.getElementById(field.desktop);
-    } else {
+        
-        if (desktopVersion) desktopVersion.style.display = 'block';
+        if (mobileField && desktopField) {
-        if (mobileVersion) mobileVersion.style.display = 'none';
+            // Mobile → Desktop
-    }
+            mobileField.addEventListener('input', function() {
-});
+                desktopField.value = this.value;
+            });
+            
+            // Desktop → Mobile (si on change de vue)
+            desktopField.addEventListener('input', function() {
+                mobileField.value = this.value;
+            });
+        }
+    });
+}
+
+// Lancer la synchronisation
+setTimeout(synchronizeFields, 500);
 </script>