Devise with multiple models, bootstrap modal with ajax login - ajax

Question

I have 2 kinds of users - nurses and patients, and want to setup login such that there are two buttons on the welcome/landing page which open up a bootstrap modal with the login form for each type of user. I'd like the login form to send an AJAX request so that if there are errors, they are displayed in the modal itself.
I'm using Devise for authentication, and have setup 2 models for nurses and patients. Initially, I setup the modal to load the url for the new_nurse_session_path on clicking the button, modified the default devise login form to send AJAX requests, used a custom SessionsController to handle new sessions and send JSON replies back, and then have JS code which catches the reply. This worked (though with some issues as below) was pretty slow since it was loading the entire page from nurses/sessions/new.html.erb along with the header, navbar, etc.
Questions
While the JS code was catching the AJAX request when the entire sign in page was opened in the modal (as per code below), if I opened the page directly, the AJAX request wasn't processed even though the server was sending the correct JSON back - is there something I'm doing wrong here that might be causing this problem?
To avoid the entire new session page from being loaded in the modal, I followed the instructions here https://github.com/plataformatec/devise/wiki/How-To:-Display-a-custom-sign_in-form-anywhere-in-your-app to put the form in the modal. The issue I'm facing here is how to create the helper so that it defines the resource and Devise mappings according to whether it's a nurse or patient trying to login. If I create separate custom forms and modals for each one, I face the same issue with handling AJAX requests as in Q1. Would really appreciate help on what I might be doing wrong here.
If I'm going down a rabbit hole here, would really appreciate suggestions on implementing the above functionality in a better way! Thanks!
Code used
Login form, nurses/sessions/new.html.erb:
<%= form_for(resource, :as => resource_name, :url => session_path(resource_name),
:html => {:id => "sign_in_nurse"}, :format => :json,
:remote => true) do |f| %>
<div><%= f.label :email %><br />
<%= f.email_field :email, :autofocus => true %></div>
<div><%= f.label :password %><br />
<%= f.password_field :password %></div>
<% if devise_mapping.rememberable? -%>
<div><%= f.check_box :remember_me %> <%= f.label :remember_me %></div>
<% end -%>
<div><%= f.submit "Sign in" %></div>
<% end %>
<%= render "nurses/shared/links" %>
Coffeescript to handle AJAX reply, nurses.js.coffee:
$("form#sign_in_nurse").bind "ajax:success", (e, data, status, xhr) ->
if data.success
window.location.replace(data.redirect)
else
alert('failure!')
SessionsController:
class SessionsController < Devise::SessionsController
def create
resource = warden.authenticate!(:scope => resource_name, :recall => "sessions#failure")
return sign_in_and_redirect(resource_name, resource)
end
def sign_in_and_redirect(resource_or_scope, resource=nil)
scope = Devise::Mapping.find_scope!(resource_or_scope)
resource ||= resource_or_scope
sign_in(scope, resource) unless warden.user(scope) == resource
return render :json => {:success => true, :redirect => stored_location_for(scope) || after_sign_in_path_for(resource)}
end
def failure
return render :json => {:success => false, :errors => ["Login failed."]}
end
end
Code to generate modal:
<li><%= link_to image_tag('i_am_nurse.png', :size => "130x130"),
new_nurse_session_path , :data => { :target => "#ajax-modal", :toggle => "modal"} %></li>
Bootstrap modal div:
<div id="ajax-modal" class="modal hide fade" tabindex="-1">
<div class="modal-header">
<button type="button" class="close" data-dismiss="modal" aria-hidden="true">×</button>
</div>
<div class="modal-body">
<div class="modal-body-content"></div>
<div class="ajax-loader"></div>
</div>
<div class='modal-footer'>
<button type="button" data-dismiss="modal" class="btn">Close</button>
</div>
</div>​