<h1>Connexion</h1>

<p class="alert" id="err_login"><span>Le(s) champ(s) login et mot de passe sont incorrect.</span>Faites attention a ce que les champs ne soit pas vide.</p>

<form action="ajax/connexion.php" method="POST" id="login_form">

    <label for="login">Login :</label><input type="text" name="login" placeholder="Pseudonyme ou email" id="login_login" />
    <br />

    <label for="password">Password :</label><input type="password" name="password" placeholder="Votre mot de passe" id="login_password" />
    <br />

    <input type="submit" value="connexion" />

</form>

<script>
$(document).ready(function() {

    var login_state = false;
    var password_state = false;

    $('#login_login').focus( function(e) {
        if(login_state) {
            $('#login_login').css('border-color','#CCC');
            login_state = false;
        }
    });

    $('#login_password').focus( function(e) {
        if(password_state) {
            $('#login_password').css('border-color','#CCC');
            password_state = false;
        }
    });

    function err(texte) {
        $('#err_login').show("slow");
        $('#err_login').html(texte)
        setTimeout(function() {
            $('#err_login').hide("slow");
        }, 8000);
    }

    $('#login_form').on('submit', function(e) {
        e.preventDefault();

        var $this = $(this);

        $.ajax({
            url: $this.attr('action'),
            type: $this.attr('method'),
            data: $this.serialize(),
            dataType: 'json',
            success: function(json) {
                if(json.reponse === 0) {
                    $('#login_form').hide("slow");
                    $('#err_login').css('border-left-color','#4cb848');
                    $('#err_login').html("<span style=\"color:#4cb848;\">Votre connexion est un succès</span><b>Note:</b> Vous allez être rediriger sur la page d'accueil dans deux secondes.");
                    $('#err_login').show("slow");
                    setTimeout(function() {
                        window.location.href = "index.php";
                    }, 2000);
                } else {
                    switch(json.reponse) {
                        case 1:
                            err("Une erreur fatale est survenue dans le formulaire.")
                            break;
                        case 2:
                            err("<span>Le champ login ou mot de passe est incorrecte.</span><b>Note:</b> Faite bien attention à ne pas faire de faute de frappe.")
                            $('#login_login').val("");
                            $('#login_password').val("");
                            $('#login_login').css('border-color','#ff3237');
                            $('#login_password').css('border-color','#ff3237');
                            login_state = true;
                            password_state = true;
                            break;
                        case 3:
                            err("<span>Votre mot de passe est invalide.</span><b>Note : </b> Trop d'essaie peut amener a un ban temporaire du site.")
                            $('#login_password').val("");
                            $('#login_password').css('border-color','#ff3237');
                            password_state = true;
                            break;
                    }
                }
            }
        });

    });
});
</script>