dimanche 14 août 2016

Login with Silex in ajax

While developing a website with Silex, I found a pretty strange error that I cannot resolve.

When I (as a member of my site) open the site for the 1st time and I want to log with my credentials using Ajax, even if my credentials are good, the login is refused (see login.js). However if I log in without ajax, it works (see login.html.twig). After that, if I log out and then I try to log in again using Ajax it works.
This is strange and I don't know where the issue come from.

I post the code below, and if you guys can help that would be awesome.

login.js

// Connexion
$(document).on('click', '#connexion_submit_button', function () {
    // Connexion Ajax
    var username = $('#connexion_pseudo').val();
    var password = $('#connexion_password').val();

    $.ajax({
        type: 'POST',
        url: '/ski/web/login_check',
        data: '_username=' + username + '&_password=' + password,
        beforeSend: function () {
            $('#connexion_submit_button').html('Patientez...');
        },
        success: function (data) {
            console.log(data);
            if (data.login) {
                $("#connexion_submit_button").html('Connexion');
                $('#tooltip_connexion').css('display', 'none');
                $('#modal_connexion_wrapper').fadeOut();
                $('#connexion_succeed').fadeIn().delay('1100').fadeOut('fast', function () {
                    $('#fade , #modal_connexion').fadeOut(function () {
                        $('#fade').remove();
                    });
                });

                reloadHeader();
            } else {
                $('#tooltip_connexion').css('display', 'block');
                $('#modal_connexion').effect('shake');
                $("#connexion_submit_button").html('Connexion');
            }
            $('#connexion_submit_button').html('Connexion'); // On remet le bouton normalement
        }
    });

    return false;
});

app.php

$app->register(new Silex\Provider\UrlGeneratorServiceProvider());
$app->register(new Silex\Provider\SessionServiceProvider());
$app->register(new Silex\Provider\SecurityServiceProvider(), array(
    'security.firewalls' => array(
        'secured' => array(
            'pattern' => '^/',
            'anonymous' => true,
            'logout' => array('logout_path' => '/admin/logout', 'invalidate_session' => true),
            'form' => array('login_path' => 'login', 'check_path' => '/login_check'),
            'users' => $app->share(function () use ($app) {
                return new ski\DAO\MemberDAO($app['db']);
            }),
        ),
    ),
));
$app->register(new Silex\Provider\SwiftmailerServiceProvider());

// register services
$app['dao.member'] = $app->share(function ($app) {
    return new ski\DAO\MemberDAO($app['db']);
});

$app['dao.station'] = $app->share(function ($app) {
    return new ski\DAO\StationDAO($app['db']);
});

$app['security.authentication.success_handler.secured'] = $app->share(function () use ($app) {
    $handler = new AuthenticationSuccessHandler(
        $app['security.http_utils'],
        $app['security.firewalls']['secured']['form'] //$options,
    );
    $handler->setProviderKey('secured');

    return $handler;
});

$app['security.authentication.failure_handler.secured'] = $app->share(function () use ($app) {
    return new AuthenticationFailureHandler(
        $app,
        $app['security.http_utils'],
        $app['security.firewalls']['secured']['form'],
        $app['logger']
    );
});

$app->before(function (Request $request) {
    if (0 === strpos($request->headers->get('Content-Type'), 'application/json')) {
        $data = json_decode($request->getContent(), true);
        $request->request->replace(is_array($data) ? $data : array());
    }
});

login.html.twig (this is not the ajax one)

<div id="modal_connexion_wrapper">
    <div id="header_connexion">
        <h1>Se connecter</h1>
    </div>
    <hr/>
    <div id="main_connexion">
        <form method="post" role="form" action="">
            <input type="text" id="connexion_pseudo" placeholder="Nom d'utilisateur"
                   class="connexion_input_text" name="_username"/>
            <br/>
            <input type="password" id="connexion_password" placeholder="Mot de passe"
                   class="connexion_input_text" name="_password" value=""/>
            <br/>
            <div id="connexion_footer">
                <div id="connexion_checkbox"><input type="checkbox" name="stay_co" id="stay_co"/><label
                            for="stay_co">Se souvenir de moi</label></div>
                <button type="submit" id="connexion_submit_button">Connexion</button>
            </div>
        </form>
        Liquid error: Unknown operator is
    </div>
    <p id="compte_creation">Pas de compte ? Cliquez <a href="">ici</a> pour en créer un !</p>
</div>

connexion.html.twig (the html for the ajax connexion)

<div id="modal_window">
    <div id="modal_connexion" class="modal">
        <a href="#" id="close_btn"><img src="/images/croix_fermeture.png" alt="Croix de fermeture"/></a>
        <div id="modal_connexion_wrapper">
            <div id="header_connexion">
                <h1>Se connecter</h1>
            </div>
            <hr/>
            <div id="main_connexion">
                <form method="post" role="form" action="">
                    <input type="text" id="connexion_pseudo" placeholder="Nom d'utilisateur"
                           class="connexion_input_text" name="_username"/>
                    <br/>
                    <input type="password" id="connexion_password" placeholder="Mot de passe"
                           class="connexion_input_text" name="_password"/>
                    <br/>
                    <div id="connexion_footer">
                        <div id="connexion_checkbox"><input type="checkbox" name="rester_co" id="rester_co"/><label
                                    for="rester_co">Se souvenir de moi</label></div>
                        <button type="submit" id="connexion_submit_button">Connexion</button>
                    </div>
                </form>
                <span id="tooltip_connexion">Votre mot de passe/nom d'utilisateur est incorrect.</span>
            </div>
            <p id="compte_creation">Pas de compte ? Cliquez <a href="">ici</a> pour en créer un !</p>
        </div>
        <div id="connexion_succeed"><p>Vous êtes maintenant connecté !</p></div>
    </div>
</div>




Aucun commentaire:

Enregistrer un commentaire