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" style="display: none;">
    <!-- VERSION MOBILE COMPLÈTE - SANS LE LOGO (car déjà dans portail.php) -->
    
    <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>

        <?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; 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'): ?>
        
        <!-- 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 class="wrap-input100" style="margin-bottom: 15px;">
            <div class="wrap-input100 validate-input">
                <label for="codeSociete_mobile" style="font-size: 12pt;">Entité</label>
                <input class="input100" type="text" name="codeSociete_mobile" id="codeSociete_mobile" value="<?= $codeSociete ?>"	
                placeholder="Entité" 
                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 class="container-login100-form-btn" style="margin-bottom: 20px; text-align: center;">
            <button name="btn_connexion_mobile" id="btn_connexion_mobile" class="btn login-btn"
                    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;">
                Connexion
            </button>
        </div>

        <div class="footer" style="position: relative; 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/" style="color: #7D4FFE;">&copy; EBENE SOLUTIONS INFORMATIQUES</a>
        </div>

        <?php endif; ?>
        
    </div>
</div>

<!-- STYLES ET SCRIPT POUR MOBILE -->
<style>
    /* STYLES SPÉCIFIQUES POUR MOBILE */
    @media screen and (max-width: 767px) {
        /* AFFICHER LA VERSION MOBILE */
        .d-md-none {
            display: block !important;
        }
        
        /* MASQUER LA VERSION DESKTOP */
        .d-none.d-md-block {
            display: none !important;
        }
        
        /* CORRECTION POUR LE LOGO DANS PORTAL.PHP */
        .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;
        }
        
        /* EMPÊCHER LE ZOOM iOS */
        input[type="text"],
        input[type="password"],
        select {
            font-size: 16px !important;
        }
        
        /* BOUTON HOVER */
        .login-btn:hover {
            background: white !important;
            color: #7D4FFE !important;
            border: solid 2px #7D4FFE !important;
        }
    }
    
    /* CACHER MOBILE SUR DESKTOP */
    @media screen and (min-width: 768px) {
        .d-md-none {
            display: none !important;
        }
    }
</style>

<script>
// FONCTIONS POUR LA VERSION MOBILE

function changer_langue_connexion_mobile(langue) {
    // Mettre à jour le sélecteur desktop si présent
    const desktopLangue = document.getElementById('langue');
    if (desktopLangue) {
        desktopLangue.value = langue;
        // Déclencher l'événement
        const event = new Event('change');
        desktopLangue.dispatchEvent(event);
    }
    console.log('Langue mobile changée:', langue);
}

function changer_entite_portail_mobile(entite) {
    // Mettre à jour le champ desktop si présent
    const desktopEntite = document.getElementById('codeSociete');
    if (desktopEntite) {
        desktopEntite.value = entite;
        const event = new Event('change');
        desktopEntite.dispatchEvent(event);
    }
    console.log('Entité mobile changée:', entite);
}

// GESTION DE LA CONNEXION MOBILE
document.addEventListener('DOMContentLoaded', function() {
    const btnMobile = document.getElementById('btn_connexion_mobile');
    if (btnMobile) {
        btnMobile.addEventListener('click', function(e) {
            e.preventDefault();
            
            // 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();
            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);
});

// SYNCHRONISATION DES CHAMPS (optionnel)
function synchronizeFields() {
    // Synchroniser les valeurs entre mobile et desktop
    const fieldsToSync = [
        {mobile: 'codeSociete_mobile', desktop: 'codeSociete'},
        {mobile: 'login_mobile', desktop: 'login'},
        {mobile: 'langue_mobile', desktop: 'langue'}
    ];
    
    fieldsToSync.forEach(field => {
        const mobileField = document.getElementById(field.mobile);
        const desktopField = document.getElementById(field.desktop);
        
        if (mobileField && desktopField) {
            // 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>