在弹出窗口中设计符号 in/sign

Question

我正在 Rails 和 bootstrap 上使用 Ruby 开发应用程序。我正在使用 Devise gem 作为身份验证系统。我生成了设计视图，但我不喜欢使用 pages/views 来注册 in/sign。相反，我得到了一个我正在使用的弹出窗口 modal/form。现在我的登录表单如下所示：

<div class="form loginBox">
<%= form_for(resource, as: resource_name, url: session_path(resource_name)) do |f| %>
<%= devise_error_messages! %>

   <%= f.email_field :email, :class => "form-control", :placeholder => "Email" %>
   <%= f.password_field :password, :class => "form-control", :placeholder => "Password", autocomplete: "off" %>

   <% if devise_mapping.rememberable? -%>
   <%= f.check_box :remember_me, :style => "margin-top:20px;margin-bottom:20px;" %>
   <%= f.label :remember_me, :style => "margin-top:20px;margin-bottom:20px;" %>
   <% end -%>


   <%= f.submit "Sign In", :class => "btn btn-default btn-login" %>

   <% end %>
</div>

我把它放在应用程序助手中：

module ApplicationHelper


     def resource_name
        :user
      end

      def resource
        @resource ||= User.new
      end

      def devise_mapping
        @devise_mapping ||= Devise.mappings[:user]
      end
    end

当我在没有填写字段的情况下按下登录按钮（提交按钮）时，我被重定向到 /users/sign_in 页面，在那里我收到了设计错误消息。我的注册表也是如此。

如何防止这种情况发生？我应该如何处理原始设计视图才能不显示它们？我是不是做错了？

我是 Ruby 和 Rails 的新手，我很高兴我至少获得了身份验证 Sign In/Sign Up 流程，可以使用我拥有的弹出表单进行工作。只是我不确定我这样做是否正确，因为我遇到了上述问题。

提前致谢！ /雅各布

Answer 1

您需要一个自定义会话控制器和一些额外的配置。

第 1 步：使设备能够响应 JSON

 # config/initializers/devise.rb

config.http_authenticatable_on_xhr = false
config.navigational_formats = ["*/*", :html, :json]

第 2 步：添加映射（我看你已经这样做了）

 # app/helpers/application_helper.rb

module ApplicationHelper
  def resource_name
    :user
  end

  def resource
    @resource ||= User.new
  end

  def devise_mapping
    @devise_mapping ||= Devise.mappings[:user]
  end
end

第 3 步：添加自定义控制器

 # app/controllers/sessions_controller.rb

class SessionsController  

  def create
   resource = warden.authenticate!(:scope => resource_name, :recall => '#{controller_path}#failure')
    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}
  end

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

控制器的特别之处在于我们 return :json

中的所有内容

第 3 步：覆盖控制器：

  # config/routes.rb

devise_for :users, :controllers => {sessions: 'sessions'}

现在设计使用自定义会话控制器。

第 4 步：添加自定义表单（使用 :remote=> true）

%h2 Sign in
   <%= devise_error_messages! %>
   <%= form_for(resource, :as => resource_name, :url => session_path(resource_name) ,:html => {:id => "login-box"},:format => :json, :remote => true ) do |f| %>

   <%= f.password_field :password, :class => "form-control", :placeholder => "Password", autocomplete: "off" %>

       <% if devise_mapping.rememberable? -%>
       <%= f.check_box :remember_me, :style => "margin-top:20px;margin-bottom:20px;" %>
       <%= f.label :remember_me, :style => "margin-top:20px;margin-bottom:20px;" %>
       <% end -%>


       <%= f.submit "Sign In", :class => "btn btn-default btn-login" %>

       <% end %>
    </div>

第 5 步：添加 javascript

$("form#login-box").bind "ajax:success", (e, data, status, xhr) ->
    if data.success
      //javascript that executes if everything goes o.k.
      $('#sign_in').modal('hide')
      $('#sign_in_button').hide()
      $('#submit_comment').slideToggle(1000, "easeOutBack" )
    else
      alert('failure!')

这应该有效

在弹出窗口中设计符号 in/sign

Devise sign in/sign up in popup

ruby

ruby-on-rails

devise

twitter-bootstrap