留在模態窗口，當用戶登錄失敗

Question

我試圖推動登錄表單在這樣的模式窗口：

<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> 

因此，我可以通過使用此窗口成功登錄。 但是，如果用戶未能登錄，我想保留在此窗口中，以便用戶可以繼續在此窗口中進行登錄。 我該怎麼做？

感謝

生物圈，

瑞安

Answer 1

如果用戶登錄失敗，使用戶可以保持這個窗口做登錄

你會想使用Ajax遠程處理請求：

#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 
}); 

您會注意到，由於我們使用的是remote: true，因此我們可以調用一些Rails UJS hooks作爲ajax。

你必須通過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