0

This is sample modal sample of boostrap modal

<div id="signin" class="modal fade" role="dialog">
    <div class="modal-dialog">

        <!-- Modal content-->
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal">&times;</button>
                <h4 class="modal-title">Modal Header</h4>
            </div>
            <div class="modal-body">
                <p>Some text in the modal.</p>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
            </div>
        </div>

    </div>
</div>

and this is a line trigger modal in header.html.twig,

 <li><a type="button" class="btn btn-lg navbar-btn" data-toggle="modal" data-target="#signup"> {{ 'SIGNUP'|t }}</a></li>

goal: open login form in bootsrap modal.

I find the name of file I can customize user-login block , it's block--userlogin.html.twig then my markup

<!-- Modal -->
<div id="signin" class="modal fade" role="dialog">
    <div class="modal-dialog">
        <!-- Modal content-->
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal">&times;</button>
                <h4 class="modal-title">Login</h4>
            </div>
            <div class="modal-body">
                <form method="post" action="{{ path( "user.login" ) }}"   role="form" name="loginform">
                    {% if error %}
                        <div class="warning">
                            <h3>{{ "Could not login" }}</h3>
                            <ul>
                                <li>{{ "A valid username and password is required to login." }}</li>
                            </ul>
                        </div>
                    {% endif %}
                    <div class="form-group">
                        <input type="email" value="{{username }}"   name="_username" tabindex="1" class="form-control" id="email" placeholder="{{ "username or email :"|t}}">
                    </div>
                    <div class="form-group">
                        <input type="password" class="form-control" id="pwd" ame="_password" placeholder="{{ "Password"|t }}">
                    </div>
                    <div class="checkbox">
                        <label><input type="checkbox"> Remember me</label>
                    </div>
                    <button type="submit" class="btn btn-default">{{ "Sign In"|t }}</button>
                    <input type="hidden" name="_csrf_token" value="{{ csrf_token }}" />
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
            </div>
        </div>

    </div>
</div>

but with this action action="{{ path( "user.login" ) }}" it redirect me to user/login page. I want to know how can I login/signup usuer ajaxly in modal without redirect to user/login page?

  • Only +50? I will be building an ajax login/signup module soon for my D8 project. – No Sssweat Jul 12 '16 at 9:51
  • @NoSssweat I'm not rich :D. 50 is good ;) – Yusef Jul 12 '16 at 9:57
3
+25

There are two questions:

1.) goal: open login form in bootsrap modal.

In your code by redirecting to a new path the page will reload, and not display a modal login.

But you don't need a new path, your form is already there. It is in the block content and you should be able to place {{ content }} in the bootstrap modal dialog like this.

block--userlogin.html.twig:

<div id="signin" class="modal fade" role="dialog">
    <div class="modal-dialog">

        <!-- Modal content-->
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal">&times;</button>
                <h4 class="modal-title">Modal Header</h4>
            </div>
            <div class="modal-body">
                {{ content }}
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-default" data-dismiss="modal">Close</button>
            </div>
        </div>

    </div>
</div>

2.) ajaxifing the login (not reloading after submit)

For this there is some work to do, you can see this in the D7 module:

https://www.drupal.org/project/ajax_register

For D8 you need to code something similar.

  • Thank you for for attention, but I need ajax login/singup more – Yusef Jul 11 '16 at 6:57
  • can you provide ajax login syntax and snippets? – Yusef Jul 12 '16 at 7:08
  • At the moment only D7 code exists: cgit.drupalcode.org/ajax_register/tree/ajax_register.module – 4k4 Jul 12 '16 at 7:22
  • Finally I did what I need with custom code :(, this is not solution for what I asked – Yusef Jul 16 '16 at 15:42
  • 1
    @NoSssweat well done, tnx. – Yusef Jul 18 '16 at 10:15
0
function YOUR_THEME_preprocess_page(&$variables) {
  // You will most likely want to show and render the form for anonymous users.
  $variables['login_form'] = FALSE;
  if (!\Drupal::currentUser()->id()) {
    $form = Drupal::formBuilder()->getForm(Drupal\user\Form\UserLoginForm::class) ; 
    $render = Drupal::service('renderer');
    $variables['login_form'] = $render->renderPlain($form);
  }
}

Put {{ login_form }} in your twig file

  • what is this ? you get rendered login form and pass it by variable to page. No, what I ask about is , how can ajaxly login in boostrap modal – Yusef Jun 14 '16 at 9:49
  • i am not very good in drupal 8, but logic is you need to do every thing at your own, means from model box containing login form, then hit an ajax request on your custom url made by hook menu and at hook menu callback function you need to login finalize and return response. after getting response in ajax just reload the DOM. you are now logged in – bhupendraosd Jun 14 '16 at 10:24

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service, privacy policy and cookie policy

Not the answer you're looking for? Browse other questions tagged or ask your own question.