BootStrap and Grails

Question

I'm using BootStrap in the Grails GSPs , i have a login modal below its code , i'm using spring security plugin to handle the login , how i can return back to this modal and show flash messages in case the entered username and password are wrong .

Login Modal code:

<sec:ifNotLoggedIn>
    <li>  <a href="#" data-toggle="modal" data-target="#login-modal" class="btn navbar-btn btn-white"><i class="fa fa-sign-in"></i>Log in</a> <%--<g:link controller="login" action="auth">Login</g:link></li>--%>
        </sec:ifNotLoggedIn>
<!-- *** LOGIN MODAL ***_________________________________________________________
-->
<div id="login-modal" tabindex="-1" role="dialog" aria-labelledby="Login" aria-hidden="true" class="modal fade">
  <div class="modal-dialog modal-sm">
    <div class="modal-content">
      <div class="modal-header">
        <button type="button" data-dismiss="modal" aria-hidden="true" class="close">×</button>
        <h4 id="Login" class="modal-title">Customer login</h4>
      </div>
      <div class="modal-body">
      <g:if test='${flash.message}'>
      <div class="message" role="status">  ${flash.message}</div></g:if>
        <form action='./j_spring_security_check' method='POST' id='loginForm' class='cssform' autocomplete='off'>
          <div class="form-group">
            <%--<input id="email_modal" type="text" placeholder="email" class="form-control">
            --%><input type='text' class='form-control' name='j_username' id='username' placeholder="${message(code:'springSecurity.login.username.label') }"/>
          </div>
          <div class="form-group">
            <%--<input id="password_modal" type="password" placeholder="password" class="form-control">
            --%><input type='password' class='form-control' name='j_password' id='password' placeholder="${message(code:'springSecurity.login.password.label') }"/>
          </div>
          <p class="text-center">
            <button type="submit" id="submit" class="btn btn-primary"><i class="fa fa-sign-in"></i> ${message(code: 'springSecurity.login.button')}</button>
          </p>
        </form>
        <p class="text-center text-muted"><g:link  controller="users" action="create"><g:message code="spring.security.ui.login.register" default="New User"/></g:link></p>
        <p class="text-center text-muted"><g:link  controller="register" action="forgotPassword"><g:message code="spring.security.ui.login.forgotPassword" default="Forgot Password"/></g:link></p>
      </div>
    </div>
  </div>
</div>
<!-- *** LOGIN MODAL END ***-->

here is the login controller in the spring core :

 def auth() {

    def config = SpringSecurityUtils.securityConfig

    if (springSecurityService.isLoggedIn()) {
        redirect uri: config.successHandler.defaultTargetUrl
        return
    }

    String view = 'auth'
    String postUrl = "${request.contextPath}${config.apf.filterProcessesUrl}"
    render view: view, model: [postUrl: postUrl,
                               rememberMeParameter: config.rememberMe.parameter]
}

Show your current code of a controller handling login action. — Michal_Szulc
@Sherif your modal is it in "auth.gsp' or some other custom login view? — Prakash Thete

quindimildev quindimildev · Accepted Answer · 2016-08-18T07:57:05

You can override the LoginController, and modify all actions you want. Taking this in account...

You could send a paramater from the action to your gsp view for opening that modal if that parameter exists.

<g:if test="${openModal}">
<script>
   $(document).ready(function(){
      openModal();
   });
<script>
</g:if>

Other way is doing it all with Ajax.

You have to override the LoginController and create a copy of it in your project, as previous example.

After that, you have to change every action you expect a result from, modifying its response for an Ajax response.

render status: 401, text: 'Unauthorized'

And, of course, you have to change the form behavior to make an ajax call to the login controller. It is not recommended but you could replace that form for a g:remoteForm instead. Or create your own ajax function.

BootStrap and Grails

1 Answers