1

看護師と患者の 2 種類のユーザーがいて、各タイプのユーザーのログイン フォームでブートストラップ モーダルを開くウェルカム/ランディング ページに 2 つのボタンがあるようにログインをセットアップしたいと考えています。ログインフォームで AJAX リクエストを送信して、エラーが発生した場合にモーダル自体に表示されるようにしたいと考えています。

私は認証に Devise を使用しており、看護師と患者用に 2 つのモデルをセットアップしています。最初に、ボタンをクリックしたときに URL をロードするようにモーダルをセットアップし、new_nurse_session_pathAJAX 要求を送信するようにデフォルトのデバイス ログイン フォームを変更し、カスタムを使用してSessionsController新しいセッションを処理し、JSON 応答を送り返し、応答をキャッチする JS コードを用意しました。 . これは機能しましたが（以下のようないくつかの問題がありましたが）nurses/sessions/new.html.erb、ヘッダー、ナビゲーションバーなどとともにページ全体をロードしていたため、かなり遅くなりました.

質問

  1. サインイン ページ全体がモーダルで開かれたときに (以下のコードに従って) JS コードが AJAX 要求をキャッチしていましたが、ページを直接開いた場合、サーバーが正しい JSON を送信していても、AJAX 要求は処理されませんでした。戻る - この問題を引き起こしている可能性のある、ここで間違っていることはありますか?

  2. 新しいセッション ページ全体がモーダルに読み込まれないようにするために、https://github.com/plataformatec/devise/wiki/How-To:-Display-a-custom-sign_in-form-anywhere-の手順に従いました。 in-your-appを使用して、フォームをモーダルに配置します。ここで私が直面している問題は、ヘルパーを作成して、ログインしようとしているのが看護師か患者かに応じてリソースとデバイスのマッピングを定義する方法です。それぞれに個別のカスタム フォームとモーダルを作成すると、AJAX リクエストの処理で Q1 と同じ問題に直面します。ここで私が間違っているかもしれないことについて、本当に助けていただければ幸いです。

  3. ここでうさぎの穴を下っている場合は、上記の機能をより良い方法で実装するための提案をいただければ幸いです。ありがとう！

使用したコード

ログインフォーム、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" %>

AJAX 応答を処理するための Coffeescript、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!')

セッションコントローラー:

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

モーダルを生成するコード:

     <li><%= link_to image_tag('i_am_nurse.png', :size => "130x130"),
 new_nurse_session_path , :data => { :target => "#ajax-modal",  :toggle => "modal"} %></li>

ブートストラップ モーダル 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>​
4

0 に答える 0