Stay in Modal Window when the User Fails to Login

Question

I tried to push the login form in a modal window like this:

<div class="modal fade" id="loginModal">
  <div class="modal-dialog">
    <div class="modal-content">
      <div class="modal-header">
        <button class="close" data-dismiss="modal">x</button>
        <h2 class="text-center">Login</h2>
      </div>
      <div class="modal-body">
      <%= form_for(resource, as: resource_name, :html => {class: "form-horizontal", role: "form"}, url: session_path(resource_name)) do |f| %>
        <div class="form-group">
          <div class="control-label col-md-3">
            <%= f.label :email %>
          </div>
          <div class="col-md-9">
            <%= f.email_field :email, class: 'form-control', autofocus: true %>
          </div>
        </div>

        <div class="form-group">
          <div class="control-label col-md-3">
            <%= f.label :password %>
          </div>
          <div class="col-md-9">
            <%= f.password_field :password, class: 'form-control', autocomplete: "off" %>
          </div>
        </div>

        <% if devise_mapping.rememberable? -%>
          <div class="form-group">
            <div class="col-md-9 col-md-offset-3">
              <div class="checkbox">
                <label>
                  <%= f.check_box :remember_me %>
                  Remember me
                </label>
              </div>
            </div>
          </div>
        <% end -%>

        <div class='form-group'>
          <div class="col-md-offset-3 col-md-9">
            <%= f.submit "Log in", class: "btn btn-primary btn-lg" %>
          </div>
        </div>

      <div class="form-group">
        <div class="col-md-offset-3 col-md-9">
          <%= link_to "Sign up", new_registration_path(resource_name) %><br />
          <%= link_to "Forgot your password?", new_password_path(resource_name) %><br />
        </div>
      </div>
      <% end %>
      </div>
    </div> <!-- end modal-content -->
  </div> <!-- end modal-dialog -->
</div>

Thus, I can login successfully by using this window. However, I want to stay in this window if the user fails to login so that the user can keep doing login in this window. How do I do that?

Thanks

BRs,

Ryan

score 0 · Answer 1 · edited May 23 '17 at 12:03

if the user fails to login so that the user can keep doing login in this window

You'll want to use Ajax to handle the request remotely:

#app/views/sessions/new.html.erb
<%= form_for(resource, as: resource_name, :html => {class: "form-horizontal", role: "form"}, url: session_path(resource_name)), remote: true do |f| %>


#app/assets/javascripts/application.js
$(document).on("ajax:success", "#new_session", function(data, status, xhr){
   // redirect to dashboard
}).on("ajax:error", "#new_session", function(xhr, status, error){
   // post error into DOM
});

You'll note that since we're using remote: true, we're able to invoke some of the Rails UJS hooks for ajax.

You'll have to back this up by modifying the Devise sessions controller:

#config/routes.rb
devise_for :users, controllers: { sessions: "sessions" }

#app/controllers/sessions_controller.rb
class SessionsController < Devise::SessionsController
 def create
    warden.authenticate!(:scope => resource_name, :recall => "#{controller_path}#failure")
    render :json => {:success => true}
  end

  def destroy
    Devise.sign_out_all_scopes ? sign_out : sign_out(resource_name)
    render :json => {}
  end

  def failure
    render :json => {:success => false, :errors => ["Login Failed"]}
  end
end

Stay in Modal Window when the User Fails to Login

1 Answers1