Version DeepSeek corrigée v1.7

Vue/Ajaxconnexioncookie/french.php

@@ -72,7 +72,7 @@
 
 <!-- Affichage mobile (cartes) -->
 <div class="d-md-none">
-    <!-- VERSION MOBILE SIMPLE ET PROPRE -->
+    <!-- VERSION MOBILE AVEC IDs UNIQUES -->
     
     <span class="login100-form-title" style="font-family: Play-Bold; color:#e5e5e5; margin-top: 5px; margin-bottom:15px; display: block; text-align: center; font-size: 20px;">
         Portail Assuré
@@ -87,20 +87,20 @@
             </h4>
         </div>
     <?php else: ?>
-        <div class="text-center p-t-10" id="div_msgErreur" style="margin-bottom: 15px;"></div>
+        <div class="text-center p-t-10" id="div_msgErreur_mobile" style="margin-bottom: 15px;"></div>
     <?php endif; ?>  
 
     <?php if($maintenance!='1'): ?>
     
-    <!-- CONTENEUR MOBILE COMPACT -->
+    <!-- CONTENEUR MOBILE - IDs AVEC SUFFIXE _mobile -->
     <div style="width: 100%; max-width: 300px; margin: 0 auto;">
         
         <!-- Langue -->
         <div class="wrap-input100" style="margin-bottom: 15px; text-align: center;">
-            <label for="langue" style="font-size: 12pt; display: block; margin-bottom: 5px;">Langue</label>
+            <label for="langue_mobile" style="font-size: 12pt; display: block; margin-bottom: 5px;">Langue</label>
-            <select class="form-select" id="langue" name="langue"
+            <select class="form-select" id="langue_mobile" name="langue_mobile"
                     style="width: 100%; height: 40px; border: 2px solid #7D4FFE; border-radius: 9px; background: transparent; font-size: 14px; color: #7D4FFE; text-align: center; padding: 0 10px; box-sizing: border-box;"
-                    required autocomplete="off" onchange="changer_langue_connexion();">
+                    required autocomplete="off" onchange="changerLangueMobile(this.value);">
                 <?php liste_options($langues, $_SESSION['lang'], true); ?>
             </select> 
         </div>
@@ -108,19 +108,19 @@
         <!-- Entité -->
         <div class="wrap-input100" style="margin-bottom: 15px; text-align: center;">
             <div class="wrap-input100 validate-input">
-                <label for="codeSociete" style="font-size: 12pt; display: block; margin-bottom: 5px;">Entité</label>
+                <label for="codeSociete_mobile" style="font-size: 12pt; display: block; margin-bottom: 5px;">Entité</label>
-                <input class="input100" type="text" name="codeSociete" id="codeSociete" value="<?= $codeSociete ?>"	
+                <input class="input100" type="text" name="codeSociete_mobile" id="codeSociete_mobile" value="<?= $codeSociete ?>"	
                        placeholder="Entité" 
                        style="width: 100%; height: 40px; border: 2px solid #7D4FFE; border-radius: 9px; color: #7D4FFE; text-align: center; padding: 0 10px; box-sizing: border-box;"
-                       required AUTOCOMPLETE="off" onChange="changer_entite_portail();">
+                       required AUTOCOMPLETE="off" onChange="changerEntiteMobile(this.value);">
             </div>
         </div>
 
         <!-- Identifiant -->
-        <div id="div_login_portail" class="wrap-input100" style="margin-bottom: 15px; text-align: center;">
+        <div id="div_login_portail_mobile" class="wrap-input100" style="margin-bottom: 15px; text-align: center;">
             <div class="wrap-input100 validate-input">
-                <label for="login" style="font-size: 12pt; display: block; margin-bottom: 5px;">Identifiant</label>
+                <label for="login_mobile" style="font-size: 12pt; display: block; margin-bottom: 5px;">Identifiant</label>
-                <input class="input100" type="text" name="login" id="login" value="<?= $codeUtilisateur ?>"	
+                <input class="input100" type="text" name="login_mobile" id="login_mobile" value="<?= $codeUtilisateur ?>"	
                        placeholder="Identifiant" 
                        style="width: 100%; height: 40px; border: 2px solid #7D4FFE; border-radius: 9px; color: #7D4FFE; text-align: center; padding: 0 10px; box-sizing: border-box;"
                        required AUTOCOMPLETE="off">
@@ -129,15 +129,15 @@
 
         <!-- Mot de passe -->
         <div class="wrap-input100 validate-input" style="margin-bottom: 20px; text-align: center;">
-            <label for="mdp" style="font-size: 12pt; display: block; margin-bottom: 5px;">Mot de passe</label>
+            <label for="mdp_mobile" style="font-size: 12pt; display: block; margin-bottom: 5px;">Mot de passe</label>
-            <input class="input100" type="password" name="mdp" id="mdp" placeholder="Mot de passe" 
+            <input class="input100" type="password" name="mdp_mobile" id="mdp_mobile" placeholder="Mot de passe" 
                    style="width: 100%; height: 40px; border: 2px solid #7D4FFE; border-radius: 9px; color: #7D4FFE; text-align: center; padding: 0 10px; box-sizing: border-box;"
                    required AUTOCOMPLETE="off">
         </div>
 
         <!-- Bouton Connexion -->
         <div class="container-login100-form-btn" style="margin-bottom: 20px; text-align: center;">
-            <button name="btn_connexion" id="btn_connexion" class="btn login-btn"
+            <button type="button" name="btn_connexion_mobile" id="btn_connexion_mobile" class="btn login-btn"
                     style="width: 100%; height: 45px; background: #7D4FFE; color: white; font-size: 16px; font-weight: 700; border-radius: 9px; border: none;">
                 Connexion
             </button>
@@ -153,72 +153,69 @@
     <?php endif; ?> 
 </div>
 
-<!-- STYLES MINIMALISTES POUR MOBILE -->
+<!-- STYLES POUR GÉRER L'AFFICHAGE DESKTOP/MOBILE -->
 <style>
-    /* SEULEMENT POUR MOBILE - NE PAS TOUCHER AU DESKTOP */
+    /* PAR DÉFAUT SUR DESKTOP - MOBILE CACHÉ */
+    .d-md-none {
+        display: none;
+    }
+    
+    /* SUR MOBILE - AFFICHER MOBILE, CACHER DESKTOP */
     @media screen and (max-width: 767px) {
-        /* Force l'affichage correct du conteneur mobile */
         .d-md-none {
+            display: block !important;
             width: 100% !important;
             max-width: 100% !important;
             overflow: hidden !important;
-            display: block !important;
-            padding: 10px !important;
-            box-sizing: border-box !important;
         }
         
-        /* Les champs mobiles ont tous la même largeur */
+        .d-none.d-md-block {
+            display: none !important;
+        }
+        
+        /* Styles mobiles harmonisés */
         .d-md-none input,
         .d-md-none select,
         .d-md-none .login-btn {
             width: 100% !important;
             max-width: 300px !important;
-            margin: 0 auto !important;
+            margin-left: auto !important;
+            margin-right: auto !important;
             display: block !important;
         }
         
-        /* Harmonisation des hauteurs et styles */
+        /* Harmonisation des champs */
         .d-md-none input,
         .d-md-none select {
             height: 40px !important;
-            font-size: 14px !important;
             border: 2px solid #7D4FFE !important;
             border-radius: 9px !important;
             padding: 0 15px !important;
             box-sizing: border-box !important;
+            font-size: 14px !important;
         }
         
-        /* Bouton avec même largeur */
+        /* Bouton */
         .d-md-none .login-btn {
-            width: 100% !important;
-            max-width: 300px !important;
             height: 45px !important;
         }
         
-        /* Labels centrés */
+        /* Centrage des labels */
         .d-md-none label {
             text-align: center !important;
             display: block !important;
             width: 100% !important;
+            margin-bottom: 5px !important;
         }
         
-        /* Conteneur pour centrer tout */
+        /* Conteneur principal */
         .d-md-none > div:last-child {
             width: 100% !important;
             max-width: 300px !important;
             margin: 0 auto !important;
         }
         
-        /* Footer mobile */
+        /* Pour très petits écrans */
-        .d-md-none .footer {
-            position: relative !important;
-            width: 100% !important;
-            text-align: center !important;
-            margin-top: 20px !important;
-            padding: 10px 0 !important;
-        }
-        
-        /* Sur très petits écrans */
         @media screen and (max-width: 320px) {
             .d-md-none input,
             .d-md-none select,
@@ -227,44 +224,161 @@
             }
         }
     }
-    
-    /* Sur desktop, cacher la version mobile */
-    @media screen and (min-width: 768px) {
-        .d-md-none {
-            display: none !important;
-        }
-    }
 </style>
 
 <script>
-// JavaScript simple pour mobile - utilise les mêmes IDs que desktop
+// LOGIQUE POUR LA VERSION MOBILE
-// donc les fonctions existantes fonctionnent directement
 
-// Vérifier que tout est bien centré sur mobile
+// 1. Synchronisation avec le desktop
-function ajusterMobile() {
+function synchroniserAvecDesktop() {
-    if (window.innerWidth <= 767) {
+    // Liste des champs à synchroniser
-        // Centrer tous les éléments
+    const champs = [
-        const elements = document.querySelectorAll('.d-md-none input, .d-md-none select, .d-md-none .login-btn');
+        {mobile: 'langue_mobile', desktop: 'langue'},
-        elements.forEach(el => {
+        {mobile: 'codeSociete_mobile', desktop: 'codeSociete'},
-            el.style.marginLeft = 'auto';
+        {mobile: 'login_mobile', desktop: 'login'},
-            el.style.marginRight = 'auto';
+        {mobile: 'mdp_mobile', desktop: 'mdp'}
-            el.style.display = 'block';
+    ];
-        });
+    
+    champs.forEach(champ => {
+        const champMobile = document.getElementById(champ.mobile);
+        const champDesktop = document.getElementById(champ.desktop);
         
-        // S'assurer que les labels sont centrés
+        if (champMobile && champDesktop) {
-        const labels = document.querySelectorAll('.d-md-none label');
+            // Sync mobile → desktop
-        labels.forEach(label => {
+            champMobile.addEventListener('change', function() {
-            label.style.textAlign = 'center';
+                champDesktop.value = this.value;
-            label.style.display = 'block';
+            });
-            label.style.width = '100%';
+        }
-        });
+    });
+}
+
+// 2. Fonctions de changement pour mobile
+function changerLangueMobile(valeur) {
+    // Mettre à jour le champ desktop
+    const desktopLangue = document.getElementById('langue');
+    if (desktopLangue) {
+        desktopLangue.value = valeur;
+        // Appeler la fonction desktop
+        if (typeof changer_langue_connexion === 'function') {
+            changer_langue_connexion();
+        }
     }
 }
 
-// Exécuter au chargement et au redimensionnement
+function changerEntiteMobile(valeur) {
-document.addEventListener('DOMContentLoaded', ajusterMobile);
+    // Mettre à jour le champ desktop
-window.addEventListener('resize', ajusterMobile);
+    const desktopEntite = document.getElementById('codeSociete');
+    if (desktopEntite) {
+        desktopEntite.value = valeur;
+        // Appeler la fonction desktop
+        if (typeof changer_entite_portail === 'function') {
+            changer_entite_portail();
+        }
+    }
+}
 
-// Pour le bouton de connexion - même ID que desktop donc même fonction
+// 3. Gestion de la connexion mobile
-// Pas besoin de code supplémentaire
+function gererConnexionMobile() {
+    // Récupérer les valeurs mobiles
+    const codeSociete = document.getElementById('codeSociete_mobile')?.value.trim();
+    const login = document.getElementById('login_mobile')?.value.trim();
+    const mdp = document.getElementById('mdp_mobile')?.value.trim();
+    
+    // Validation
+    if (!codeSociete || !login || !mdp) {
+        alert('Veuillez remplir tous les champs');
+        return false;
+    }
+    
+    console.log('Connexion mobile:', {codeSociete, login, mdp});
+    
+    // OPTION A: Utiliser le formulaire desktop
+    const formulaireDesktop = document.querySelector('form');
+    if (formulaireDesktop) {
+        // Mettre à jour les champs desktop
+        document.getElementById('codeSociete').value = codeSociete;
+        document.getElementById('login').value = login;
+        document.getElementById('mdp').value = mdp;
+        document.getElementById('langue').value = document.getElementById('langue_mobile').value;
+        
+        // Soumettre
+        formulaireDesktop.submit();
+        return true;
+    }
+    
+    // OPTION B: Si pas de formulaire, utiliser AJAX
+    // (Adaptez à votre backend)
+    const formData = new FormData();
+    formData.append('codeSociete', codeSociete);
+    formData.append('login', login);
+    formData.append('mdp', mdp);
+    formData.append('langue', document.getElementById('langue_mobile').value);
+    
+    fetch(window.location.href, {
+        method: 'POST',
+        body: formData
+    })
+    .then(response => response.text())
+    .then(html => {
+        document.open();
+        document.write(html);
+        document.close();
+    })
+    .catch(error => {
+        console.error('Erreur:', error);
+        alert('Erreur de connexion');
+    });
+    
+    return false;
+}
+
+// 4. Initialisation
+document.addEventListener('DOMContentLoaded', function() {
+    // Synchroniser les champs
+    synchroniserAvecDesktop();
+    
+    // Gérer le bouton de connexion mobile
+    const btnMobile = document.getElementById('btn_connexion_mobile');
+    if (btnMobile) {
+        btnMobile.addEventListener('click', gererConnexionMobile);
+    }
+    
+    // Gérer la touche Entrée
+    document.querySelectorAll('.d-md-none input').forEach(input => {
+        input.addEventListener('keypress', function(e) {
+            if (e.key === 'Enter') {
+                e.preventDefault();
+                gererConnexionMobile();
+            }
+        });
+    });
+    
+    // Gestion responsive
+    function verifierAffichage() {
+        const isMobile = window.innerWidth <= 767;
+        
+        if (isMobile) {
+            // Mode mobile
+            document.querySelectorAll('.d-md-none').forEach(el => el.style.display = 'block');
+            document.querySelectorAll('.d-none.d-md-block').forEach(el => el.style.display = 'none');
+        } else {
+            // Mode desktop
+            document.querySelectorAll('.d-md-none').forEach(el => el.style.display = 'none');
+            document.querySelectorAll('.d-none.d-md-block').forEach(el => el.style.display = 'block');
+        }
+    }
+    
+    // Appliquer
+    verifierAffichage();
+    window.addEventListener('resize', verifierAffichage);
+});
+
+// 5. Fallback: Si l'utilisateur clique sur le bouton desktop en mode mobile
+// (cela ne devrait pas arriver car il est caché, mais au cas où)
+document.getElementById('btn_connexion')?.addEventListener('click', function(e) {
+    if (window.innerWidth <= 767) {
+        e.preventDefault();
+        gererConnexionMobile();
+    }
+});
 </script>