Symfony 2 FOS User Bundle Bootstrap modal AJAX Login

Question

Has anyone already built a login form inside a Bootstrap modal with Symfony 2 and FOS User Bundle ?

Here is what I have now :

src/Webibli/UserBundle/Reso

Answer 1

I guess what youre looking for is this: Symfony2 ajax login.

your javascript would look sth. like this:

$('#_submit').click(function(e){
        e.preventDefault();
        $.ajax({
            type        : $('form').attr( 'method' ),
            url         : $('form').attr( 'action' ),
            data        : $('form').serialize(),
            success     : function(data, status, object) {
                if (data.sucess == false) {
                    $('.modal-body').prepend('<div />').html(data.message);
                } else {
                    window.location.href = data.targetUrl;
                }
            }
    });

You also have to modify the isXmlHttpRequest-part of your onAuthenticationSuccess-Method:

[...]
if ($request->isXmlHttpRequest()) {
            $targetUrl = $request->getSession()->get('_security.target_path');
            $result = array('success' => true, 'targetUrl' => targetUrl );
            $response = new Response(json_encode($result));
            $response->headers->set('Content-Type', 'application/json');
            return $response;
        }
[...]

Answer 2

I have found the solution. Here is what I added to my javascript,

<script>
    $(document).ready(function(){
        $('#_submit').click(function(e){
            e.preventDefault();
            $.ajax({
                type        : $('form').attr( 'method' ),
                url         : '{{ path("fos_user_security_check") }}',
                data        : $('form').serialize(),
                dataType    : "json",
                success     : function(data, status, object) {
                    if(data.error) $('.error').html(data.message);
                },
                error: function(data, status, object){
                    console.log(data.message);
                }
            });
        });
    });
</script>

And here is my onAuthenticationFailure method from my handler,

public function onAuthenticationFailure(Request $request, AuthenticationException $exception) {
    $result = array(
        'success' => false, 
        'function' => 'onAuthenticationFailure', 
        'error' => true, 
        'message' => $this->translator->trans($exception->getMessage(), array(), 'FOSUserBundle')
    );
    $response = new Response(json_encode($result));
    $response->headers->set('Content-Type', 'application/json');

    return $response;
}

I think that it was the URL from my Ajax method that was wrong. Thank you for your advices.