3

I am using the FOSUserBundle to manage my website users. My goal is to make the login form get displayed in a modal window based on the boostrap framework. Down is my code for the modal window

<div class="modal hide" data-backdrop="static" id="login">
    <div class="modal-header"> <a class="close" data-dismiss="modal">×</a>
        <h3>Connexion</h3>
    </div>
    <div class="modal-body" >

    </div>
</div>
<a class="btn btn-primary" data-toggle="modal" data-target="#login" 
   href="{{ path('fos_user_security_login') }}">Sign in</a>

This code works perfectly well if the user does not make any mistake while entring his username and his password. In case of errors, symfony2 redirect me directly to /login page which is the minimalist twig page provided by the bundle FOSUserBundle.

In order to get rid of the problem, my idea consisted in listening to javascript event that will display the window again. This is done through the window.hashchange event. The proposed code for that is:

<script type="text/javascript" src="{{ asset('jquery/1.9.1/jquery.ba-hashchange.min.js')}}"></script>
<script>
        $(function() {

            // Bind the event.
            $(window).hashchange(function() {
                // Alerts every time the hash changes!
                alert(location.hash);
                if(location.hash === "#login"){
                  $('#login').modal();  
                }
            });

            // Trigger the event (useful on page load).
            $(window).hashchange();


        });
    </script>

This was great: throught this code, I become able to display to login modal window if I get to this url /#login.

But, the problem is still not solved yet, because there is a routing problem in symfony. I am afaid to have to rewrite all the bundle to make redirection in the controllers of FOSUserBundle.

Any idea?

madth3
  • 7,275
  • 12
  • 50
  • 74
Amine Jallouli
  • 3,919
  • 8
  • 36
  • 73

3 Answers3

0

You can check if there are errors after logging in using:

{% if error %}
    {# do something #}
{% endif %}

This means that you can check whether you want to modal hidden or if you want to show it on the page-load like so:

<div class="modal{% if not error %} hide{% endif %}">
    <!-- model window -->
</div>
Ramon Kleiss
  • 1,684
  • 15
  • 25
0

I solved that overriding the login.twig.html and putting this near the beginning

{% if error %}
    <script>
        $('.modal').modal("show");
    </script>
    <div>{{ error|trans }}</div>
{% endif %}

but im still missing how to make this modal appear when the user clicks on a secured action and get redirected to link he clicked and not the page that contains the link (that whats gets in the $request->headers->get('referer') in spite being first redirected from wherever the secured action was)

Marciano
  • 123
  • 4
  • 9
-1

I think this is the best way to manage redirections after login succes/faillure using FOSUserBundle :

Stackoverflow question : redirect after login fos user bundle symfony

Basicly, add a LoginSuccessHandler which implements the AuthenticationSuccessHandler Interface to do different action on success or faillure of loginAction

Community
  • 1
  • 1
Gauthier
  • 1,116
  • 2
  • 16
  • 39