assure/Vue/Ajaxconnexioncookie/french.php

<?php 
	$maintenance = $societeusersaas['maintenance'];
	if($maintenance=='1')
	{
		$msgErreur = 'Site en maintenance, veuillez vous reconnecter plus tard!';
	}
?>

<!-- Tableau desktop (affiché sur les écrans moyens et grands) -->
<div class="d-none d-md-block">
<span class="login100-form-title" style="font-family: Play-Bold; color:#e5e5e5; margin-top: 5px; margin-bottom:10px;">
	Portail Assuré
</span>

<?php if (isset($msgErreur) and $msgErreur>" "): ?>
	<div class="text-center p-t-10">
		<h4 class="txt3">
			<div class="col-12 alert alert-danger">
			  <?= $msgErreur ?>
			</div>	
		</h4>
	</div>
<?php else: ?>
	<div class="text-center p-t-10" id="div_msgErreur">

	</div>
<?php endif; ?>  

<?php if($maintenance!='1'): ?>
	<div class="wrap-input100">
		<label for="langue">Langue</label>
		<select class="form-select" id="langue" name="langue"
				
				required autocomplete="off" onchange="javascript:changer_langue_connexion();">
			<?php liste_options($langues, $_SESSION['lang'], true); ?>
		</select> 
	</div>
	

	<div class="wrap-input100">
		<div class="wrap-input100 validate-input" data-validate="Enter Entity">
			<label for="codeSociete">Entité</label>
			<input class="input100" type="text" name="codeSociete" id="codeSociete" value="<?= $codeSociete ?>"	
			placeholder="Entité" style="text-align:center;" required AUTOCOMPLETE="off" 
			onChange="javascript:changer_entite_portail();" >
		</div>
	</div>

	<div id="div_login_portail" class="wrap-input100">
		<div class="wrap-input100 validate-input" data-validate="Enter username">
			<label for="login">Identifiant</label>
			<input class="input100" type="text" name="login" id="login" value="<?= $codeUtilisateur ?>"	placeholder="Identifiant" style="text-align:center;" required AUTOCOMPLETE="off">
		</div>
	</div>

	<div class="wrap-input100 validate-input" data-validate="Enter password">
		<label for="mdp">Mot de passe</label>
		<input class="input100" type="password" name="mdp" id="mdp" placeholder="Mot de passe" style="text-align:center;" required	AUTOCOMPLETE="off">
	</div>

	<div class="container-login100-form-btn">
		<button name="btn_connexion" id="btn_connexion" class="btn login-btn">
			Connexion
		</button>
	</div>

	<div class="footer">
		Tous droits réservés <a href="https://www.ebene.info/">&copy; EBENE SOLUTIONS INFORMATIQUES</a>
	</div>
<?php endif; ?> 
</div>

<!-- Affichage mobile (cartes) -->
<div class="d-md-none">
    <!-- VERSION MOBILE FONCTIONNELLE -->
    
    <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é
    </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: 13px; border-radius: 8px;">
                    <?= $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'): ?>
    
    <!-- FORMULAIRE MOBILE AVEC ACTION EXPLICITE -->
    <form id="form_mobile" method="POST" action="" style="width: 100%; max-width: 300px; margin: 0 auto;">
        
        <!-- Langue -->
        <div class="wrap-input100" style="margin-bottom: 15px; text-align: center;">
            <label for="langue_mobile" style="font-size: 12pt; display: block; margin-bottom: 5px;">Langue</label>
            <select class="form-select" id="langue_mobile" name="langue"
                    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">
                <?php liste_options($langues, $_SESSION['lang'], true); ?>
            </select> 
        </div>

        <!-- Entité -->
        <div class="wrap-input100" style="margin-bottom: 15px; text-align: center;">
            <div class="wrap-input100 validate-input">
                <label for="codeSociete_mobile" style="font-size: 12pt; display: block; margin-bottom: 5px;">Entité</label>
                <input class="input100" type="text" name="codeSociete" 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">
            </div>
        </div>

        <!-- Identifiant -->
        <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_mobile" style="font-size: 12pt; display: block; margin-bottom: 5px;">Identifiant</label>
                <input class="input100" type="text" name="login" 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">
            </div>
        </div>

        <!-- Mot de passe -->
        <div class="wrap-input100 validate-input" style="margin-bottom: 20px; text-align: center;">
            <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_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>

        <!-- Champ caché pour l'action -->
        <input type="hidden" name="action" value="connexion">
        
        <!-- Bouton Connexion - TYPE SUBMIT -->
        <div class="container-login100-form-btn" style="margin-bottom: 20px; text-align: center;">
            <button type="submit" name="btn_connexion" 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>
        </div>

    </form>

    <!-- Footer mobile -->
    <div class="footer" style="position: relative; bottom: auto; left: auto; font-size: 11px; text-align: center; padding: 10px; width: 100%; margin-top: 10px;">
        Tous droits réservés <a href="https://www.ebene.info/">&copy; EBENE SOLUTIONS INFORMATIQUES</a>
    </div>

    <?php endif; ?> 
</div>

<!-- STYLES ET SCRIPT SIMPLIFIÉS -->
<style>
    /* SUR MOBILE SEULEMENT */
    @media screen and (max-width: 767px) {
        .d-md-none {
            display: block !important;
            width: 100% !important;
            padding: 15px !important;
            box-sizing: border-box !important;
        }
        
        .d-none.d-md-block {
            display: none !important;
        }
        
        #form_mobile {
            width: 100% !important;
            max-width: 300px !important;
            margin: 0 auto !important;
        }
        
        #form_mobile input,
        #form_mobile select,
        #btn_connexion_mobile {
            width: 100% !important;
            max-width: 300px !important;
            margin: 0 auto !important;
            display: block !important;
        }
        
        #form_mobile input,
        #form_mobile select {
            height: 40px !important;
            border: 2px solid #7D4FFE !important;
            border-radius: 9px !important;
            padding: 0 15px !important;
            box-sizing: border-box !important;
        }
        
        #btn_connexion_mobile {
            height: 45px !important;
        }
        
        #form_mobile label {
            text-align: center !important;
            display: block !important;
            width: 100% !important;
            margin-bottom: 5px !important;
        }
    }
    
    /* SUR DESKTOP - CACHER MOBILE */
    @media screen and (min-width: 768px) {
        .d-md-none {
            display: none !important;
        }
    }
</style>

<script>
// SCRIPT SIMPLE ET FONCTIONNEL POUR MOBILE

// 1. Initialisation au chargement
document.addEventListener('DOMContentLoaded', function() {
    console.log('Initialisation mobile...');
    
    // Récupérer le formulaire desktop pour copier son action
    const formDesktop = document.querySelector('form');
    const formMobile = document.getElementById('form_mobile');
    
    if (formDesktop && formMobile) {
        // Copier l'action du formulaire desktop
        formMobile.action = formDesktop.action || window.location.href;
        console.log('Action copiée:', formMobile.action);
        
        // Copier la méthode
        formMobile.method = formDesktop.method || 'POST';
    }
    
    // 2. Gestion des événements de changement
    document.getElementById('langue_mobile')?.addEventListener('change', function() {
        const desktopLangue = document.getElementById('langue');
        if (desktopLangue) {
            desktopLangue.value = this.value;
            if (typeof changer_langue_connexion === 'function') {
                changer_langue_connexion();
            }
        }
    });
    
    document.getElementById('codeSociete_mobile')?.addEventListener('change', function() {
        const desktopEntite = document.getElementById('codeSociete');
        if (desktopEntite) {
            desktopEntite.value = this.value;
            if (typeof changer_entite_portail === 'function') {
                changer_entite_portail();
            }
        }
    });
    
    // 3. Validation avant soumission
    formMobile?.addEventListener('submit', function(e) {
        console.log('Soumission du formulaire mobile...');
        
        // Récupérer les valeurs
        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) {
            e.preventDefault();
            alert('Veuillez remplir tous les champs obligatoires');
            return false;
        }
        
        console.log('Données mobiles:', {codeSociete, login, mdp});
        
        // OPTION A: Synchroniser avec le desktop avant soumission
        const desktopForm = document.querySelector('form');
        if (desktopForm) {
            // Copier les valeurs dans le formulaire 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 le formulaire desktop
            e.preventDefault();
            desktopForm.submit();
            return false;
        }
        
        // OPTION B: Soumettre le formulaire mobile normalement
        return true;
    });
    
    // 4. Gestion responsive
    function gererAffichageResponsive() {
        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');
        }
    }
    
    gererAffichageResponsive();
    window.addEventListener('resize', gererAffichageResponsive);
    
    // 5. Debug: Log quand on clique sur le bouton
    document.getElementById('btn_connexion_mobile')?.addEventListener('click', function() {
        console.log('Bouton connexion mobile cliqué!');
    });
});

// 6. Fallback ultra simple - déclencher la connexion desktop
function soumettreConnexionMobile() {
    console.log('Fonction soumettreConnexionMobile appelée');
    
    // Trouver le formulaire desktop
    const form = document.querySelector('form');
    if (form) {
        // Copier les valeurs mobiles vers desktop
        const valeurs = {
            'codeSociete': document.getElementById('codeSociete_mobile')?.value,
            'login': document.getElementById('login_mobile')?.value,
            'mdp': document.getElementById('mdp_mobile')?.value,
            'langue': document.getElementById('langue_mobile')?.value
        };
        
        Object.keys(valeurs).forEach(name => {
            const input = document.querySelector(`[name="${name}"]`);
            if (input && valeurs[name]) {
                input.value = valeurs[name];
            }
        });
        
        console.log('Soumission du formulaire desktop avec valeurs mobiles');
        form.submit();
    } else {
        console.error('Aucun formulaire trouvé!');
        alert('Erreur: Impossible de trouver le formulaire de connexion');
    }
}

// 7. Liaison directe au bouton (fallback)
setTimeout(function() {
    const btnMobile = document.getElementById('btn_connexion_mobile');
    if (btnMobile) {
        btnMobile.addEventListener('click', function(e) {
            console.log('Clic sur bouton mobile détecté');
            // Essayer la méthode simple
            soumettreConnexionMobile();
            e.preventDefault();
            return false;
        });
    }
}, 1000);
</script>