Symfony 2 FOS User Bundle modal Bootstrap AJAX Login

Quelqu'un a déjà construit un formulaire de connexion à l'intérieur d'un modal Bootstrap avec Symfony 2 et de FOS User Bundle ?

Voici ce que j'ai maintenant :

src/Webibli/UserBundle/Resources/config/services.yml

authentication_handler:
    class:        Webibli\UserBundle\Handler\AuthenticationHandler
    arguments:    [@router, @security.context, @fos_user.user_manager, @service_container]

app/config/security.yml

form_login:
    provider: fos_userbundle
    success_handler: authentication_handler
    failure_handler: authentication_handler

src/Webibli/UserBundle/Handler/AuthenticationHandler.php

<?php
namespace Webibli\UserBundle\Handler;
use Symfony\Component\Security\Http\Authentication\AuthenticationFailureHandlerInterface;
use Symfony\Component\Security\Http\Authentication\AuthenticationSuccessHandlerInterface;
use Symfony\Component\Security\Core\Authentication\Token\TokenInterface;
use Symfony\Component\Routing\RouterInterface;
use Symfony\Component\HttpFoundation\Request;
use Symfony\Component\HttpFoundation\Response;
use Symfony\Component\HttpFoundation\RedirectResponse;
use Symfony\Component\Routing\Router;
use Symfony\Component\Security\Core\SecurityContext;
use Symfony\Component\Security\Core\Exception\AuthenticationException;
class AuthenticationHandler implements AuthenticationSuccessHandlerInterface, AuthenticationFailureHandlerInterface
{
protected $router;
protected $security;
protected $userManager;
protected $service_container;
public function __construct(RouterInterface $router, SecurityContext $security, $userManager, $service_container)
{
$this->router = $router;
$this->security = $security;
$this->userManager = $userManager;
$this->service_container = $service_container;
}
public function onAuthenticationSuccess(Request $request, TokenInterface $token) {
if ($request->isXmlHttpRequest()) {
$result = array('success' => true);
$response = new Response(json_encode($result));
$response->headers->set('Content-Type', 'application/json');
return $response;
}
else {
//Create a flash message with the authentication error message
$request->getSession()->getFlashBag()->set('error', $exception->getMessage());
$url = $this->router->generate('fos_user_security_login');
return new RedirectResponse($url);
}
return new RedirectResponse($this->router->generate('anag_new')); 
} 
public function onAuthenticationFailure(Request $request, AuthenticationException $exception) {
if ($request->isXmlHttpRequest()) {
$result = array('success' => false, 'message' => $exception->getMessage());
$response = new Response(json_encode($result));
$response->headers->set('Content-Type', 'application/json');
return $response;
}
return new Response();
}
}

Et voici le Rameau point de vue je suis le chargement dans mon Bootstrap modal:

{% extends 'UserBundle::layout.html.twig' %}
{% trans_default_domain 'FOSUserBundle' %}
{% block user_content %}
<script>
$('#_submit').click(function(e){
e.preventDefault();
$.ajax({
type        : $('form').attr( 'method' ),
url         : $('form').attr( 'action' ),
data        : $('form').serialize(),
success     : function(data, status, object) {
console.log( status );
console.log( object.responseText );
}
});
});
</script>
<div class="modal-dialog">
<div class="modal-content">
<form action="{{ path("fos_user_security_check") }}" method="post" role="form" data-async data-target="#rating-modal" class="text-left">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">&times;</button>
<h4 class="modal-title">{{ 'layout.login'|trans }}</h4>
</div>
<div class="modal-body">
{% if error %}
<div>{{ error|trans }}</div>
{% endif %}
<input type="hidden" name="_csrf_token" value="{{ csrf_token }}" />
<div class="form-group container">
<label for="email">{{ 'security.login.username_email'|trans }}</label>
<input type="text" class="form-control" id="username" name="_username" value="{{ last_username }}" required="required" placeholder="[email protected]">
</div>
<div class="form-group container">
<label for="password">{{ 'security.login.password'|trans }}</label><br />
<input type="password" id="password" name="_password" required="required" class="form-control" placeholder="********">
</div>
<div class="form-group container">
<label for="remember_me">
<input type="checkbox" id="remember_me" name="_remember_me" value="on" />
{{ 'security.login.remember_me'|trans }}
</label>
</div>
</div>
<div class="modal-footer">
<input type="submit" id="_submit" name="_submit" value="{{ 'security.login.submit'|trans }}" class="btn btn-primary">
</div>
</form>
</div>
</div>
{% endblock %}

Le formulaire de connexion fonctionne parfaitement bien sans AJAX. Je suis juste essayer d'obtenir d'erreur sur mon formulaire modal si il y a un problème, ou de rediriger l'utilisateur si la connexion est réussie.

Quelqu'un peut-il expliquer comment y parvenir?

À quel point est-ce que l'AJAX fonctionne pas, vous pouvez essayer de mettre en œuvre l'erreur de rappel pour voir quelle est la réaction que vous obtenez à partir du serveur, le cas échéant.
J'ai toujours un succès parce que la demande de travail, mais la connexion n'est pas réussi et je ne sais pas comment faire Symfony retour un message d'erreur en JSON au lieu d'un message flash. Pour le moment, la réponse de l'appel AJAX est toujours une pleine page HTML, ce qui est ennuyeux, parce que je ne veux que le contenu qui est censé aller dans le modal.

OriginalL'auteur f0x7ed | 2013-10-18