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 avec IDs UNIQUES -->
    <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 class="wrap-input100" style="margin-bottom: 15px;">
        <div class="wrap-input100 validate-input">
            <label for="codeSociete_mobile">Entité</label>
            <input class="input100" type="text" name="codeSociete_mobile" id="codeSociete_mobile" value="<?= $codeSociete ?>"	
            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;"
            required AUTOCOMPLETE="off" 
            onChange="javascript: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">Identifiant</label>
            <input class="input100" type="text" name="login_mobile" id="login_mobile" value="<?= $codeUtilisateur ?>"	
            placeholder="Identifiant" 
            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;"
            required AUTOCOMPLETE="off">
        </div>
    </div>

    <div class="wrap-input100 validate-input" style="margin-bottom: 20px;">
        <label for="mdp_mobile">Mot de passe</label>
        <input class="input100" type="password" name="mdp_mobile" id="mdp_mobile" placeholder="Mot de passe" 
        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;"
        required AUTOCOMPLETE="off">
    </div>

    <div class="container-login100-form-btn" style="margin-bottom: 20px;">
        <button name="btn_connexion_mobile" id="btn_connexion_mobile" class="btn login-btn"
                style="width: 100%; height: 45px; background: #7D4FFE; color: white; font-size: 18px; font-weight: 700; border-radius: 9px; border: none; box-sizing: border-box;">
            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;">
        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 -->
<style>
    /* MASQUER LA VERSION MOBILE SUR DESKTOP */
    .d-md-none {
        display: none !important;
    }
    
    /* AFFICHER SEULEMENT SUR MOBILE */
    @media screen and (max-width: 767px) {
        .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 */
        .d-none.d-md-block {
            display: none !important;
        }
        
        /* GARANTIR QUE TOUT EST CONTENU */
        .d-md-none * {
            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 {
            font-size: 16px !important;
        }
        
        /* BOUTON HOVER */
        .login-btn:hover {
            background: white !important;
            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 */
    @media screen and (max-width: 320px) {
        .d-md-none {
            padding: 15px 10px !important;
        }
        
        .wrap-input100 {
            max-width: 280px !important;
        }
        
        input, select, .login-btn {
            max-width: 280px !important;
        }
    }
</style>

<script>
// FONCTIONS SPÉCIFIQUES POUR MOBILE
function changer_langue_connexion_mobile(langue) {
    // Synchroniser avec la version desktop si nécessaire
    const desktopLangue = document.getElementById('langue');
    if (desktopLangue) {
        desktopLangue.value = langue;
        // Déclencher l'événement change
        desktopLangue.dispatchEvent(new Event('change'));
    }
    
    // Appeler la fonction originale
    changer_langue_connexion();
}

function changer_entite_portail_mobile(entite) {
    // Synchroniser avec la version desktop si nécessaire
    const desktopEntite = document.getElementById('codeSociete');
    if (desktopEntite) {
        desktopEntite.value = entite;
        desktopEntite.dispatchEvent(new Event('change'));
    }
    
    // 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;
    
    if (isMobile) {
        // Masquer le desktop, montrer le mobile
        const desktopVersion = document.querySelector('.d-none.d-md-block');
        const mobileVersion = document.querySelector('.d-md-none');
        
        if (desktopVersion) desktopVersion.style.display = 'none';
        if (mobileVersion) mobileVersion.style.display = 'block';
    }
});

// REDIMENSIONNEMENT DE LA FENÊTRE
window.addEventListener('resize', function() {
    const isMobile = window.innerWidth <= 767;
    const desktopVersion = document.querySelector('.d-none.d-md-block');
    const mobileVersion = document.querySelector('.d-md-none');
    
    if (isMobile) {
        if (desktopVersion) desktopVersion.style.display = 'none';
        if (mobileVersion) mobileVersion.style.display = 'block';
    } else {
        if (desktopVersion) desktopVersion.style.display = 'block';
        if (mobileVersion) mobileVersion.style.display = 'none';
    }
});
</script>