Bonjour tout le monde,
Je viens à vous aujourd'hui car je rencontre un léger soucis avec mon formulaire de connexion.
En effet, utilisant le framework Bootstrap 3, je désire insérer un lien 'Connexion' dans mon menu.
Lorsque l'utilisateur clic dessus, une fenêtre modale apparaît.
Dans cette fenêtre se trouve un formulaire de connexion (qui renvoi vers la même page) des plus basique.. Un champ 'login', un champ 'password' et un bouton 'Se connecter'.
Une fois le formulaire remplis, je clic donc sur le bouton 'Se connecter'. La fenêtre modale disparaît, et le traitement en PHP se fait.
Si la combinaison Login/password est bonne => L'utilisateur est bien connecté.
Jusque la, tout va bien, ca fonctionne normalement.
Viens maintenant le cas où la combinaison login/password n'est pas bonne.
La fenêtre disparaît donc, mais la connexion ne se fait pas (Logique !).
Le problème est le suivant : Le message d'erreur est indiqué sur cette fenêtre modale, donc si la combinaison n'est pas bonne, l'utilisateur est obliger de re-cliquer sur le lien 'Connexion' du menu, pour ré-afficher la fenêtre et ainsi voir le message d'erreur.
Je voudrais que cette fenêtre ne disparaisse pas. Ou du moins seulement après traitement.
Si la combinaison est bonne => On affiche un message d'état, et on redirige vers la page d'accueil.
Si la combinaison n'est pas bonne => On affiche le message d'erreur, et on reste sur la fenêtre de connexion.
Je me doute qu'il faille passer par de l'Ajax ou du JQuery, or ce n'est pas vraiment mon point fort.
J'en appelle donc à vous, pour avoir un petit coup de pouce.
Voici le code en question :
Le traitement PHP du formulaire (qui se trouve sur la page menu.php)
if(!empty($_POST)){
$login = $_POST'login'];
$password = sha1($_POST'password']);
$q = array('login'=>$login, 'password'=>$password);
$sql = 'SELECT * FROM users WHERE login = :login AND password = :password';
$req = $connexion->prepare($sql);
$req->execute($q);
$count = $req->rowCount($sql);
if($count == 1){
$sql = 'SELECT * FROM users WHERE login = :login AND password = :password AND activer = 1';
$req = $connexion->prepare($sql);
$req->execute($q);
$actif = $req->rowCount($sql);
if($actif == 1){
$_SESSION'Auth'] = array(
'login' => $login,
'password' => $password
);
while($res = $req->fetch())
{
$_SESSION'idUsers'] = $res'idUsers'];
$_SESSION'login'] = $res'login'];
$_SESSION'password'] = $res'password'];
$_SESSION'email'] = $res'email'];
}
$connexionReussi = 'Connexion réussie.';
}
else{
$erreur_actif = 'Votre compte n\'a pas été activé. Vérifiez vos emails.';
}
}
else{
$erreur_auth = 'Echec de l\'authentification.';
}
}
La partie HTML où est géré l'appel à la fenêtre et le formulaire (toujours sur la page menu.php) :
<div id="responsive" class="modal fade bs-example-modal" tabindex="-1" role="dialog" aria-labelledby="myLargeModalLabel" aria-hidden="true" data-width="760">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button>
<h4 class="modal-title" id="myModalLabel">CONNEXION</h4>
</div>
<div class="modal-body">
<div class="row-fluid">
<div id="resultat" class='erreur'><?php //if(isset($erreur_actif)){ echo $erreur_actif; } ?></div>
<div id="resultat" class='erreur'><?php //if(isset($erreur_auth)){ echo $erreur_auth; } ?></div>
<form role="form" id="formInscription" method="POST">
<label for='login' style="padding-top: 5px;">Nom de compte :</label>
<input type='text' id="login" name='login' class="form-control" style='width: 80%;' placeholder='Nom de compte'>
<br>
<label for='password'>Mot de passe :</label>
<input type='password' id="password" name='password' class='form-control' style='width: 80%;' placeholder='Mot de passe'>
<br>
<input type='submit' class='btn btn-primary' id="submit" value='Connexion' name='connexion'>
<input type='submit' class='btn btn-primary disabled' value='Mot de passe oublié ?' name='forgetPassword'>
<br><br>
</form>
</div>
</div>
</div>
</div>
</div>
Pour la partie javascript, il s'agit du fichier modal.js que propose le framework Bootstrap.
J'espère avoir été assez claire dans ma demande,
Merci d'avance !
Bonjour tout le monde,
je me permets de faire un petit "UP" du sujet qui en plus me permet d'ajouter ce bout de code jquery :
Morceau de code qui est lui aussi présent sur la page "menu.php"
<script type="text/javascript">
$(document).ready( function() {
$("#formConnexion").submit(function () {
$.ajax({
type: "POST",
data: "login="+$("#login").val()+"&password="+$("#password").val(),
success: function(msg)
{
if(msg==0)
{
$("span#erreur").html("Identifiants incorrects");
}
}
});
return false;
});
});
</script>
Je viens d'apprendre qu'on appelle également ce système (Fenêtre Modale) = Lightbox.
Pardonnez-moi d'avance pour le site exemple, mais au cas où, rendez-vous sur www.dofus.fr, cliquez sur "Connexion" en haut à droite, et vous aurez un aperçu de la fenêtre attendue.
Merci d'avance !