设计登录/在弹出窗口中注册 [英] Devise sign in/sign up in popup
问题描述
我正在使用Ruby on Rails和引导程序开发应用程序。我将Devise gem用于身份验证系统。我生成了设计视图,但我不喜欢使用页面/视图进行登录/注册。相反,我得到了一个正在使用的弹出模式/表格。现在,我的登录表单如下所示:
I'm developing an app with Ruby on Rails and bootstrap. I'm using the Devise gem for the authentication system. I generated the devise views but I don't like to use the pages/views for sign in/sign up. Instead I got a popup modal/form which I'm using. Right now my Sign In form looks like this:
<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页面的字段,在该页面上我收到设计错误消息。我的注册表也是如此。
When I press the Sign In button (submit-button) without filling out the fields I'm redirected to the /users/sign_in page where I get the devise error messages. The same happens with my registration form.
如何防止这种情况发生?我应该如何处理原始设计视图而不显示它们?我这样做的方式有误吗?
我对Ruby和Rails还是很陌生,但我很高兴我至少获得了身份验证登录/登录使用我拥有的弹出表单来启动工作流程。只是由于我不确定遇到上述问题后,我不确定我是否以正确的方式进行了操作。
I'm quite new with Ruby and Rails and I'm happy I atleast got the authentication Sign In/Sign Up process to work using the popup forms I have. Its just that I'm not sure I did this the right way as I got the problem mentioned above.
请多多感谢!
/ Jacob
Thanks a lot in advance! /Jacob
推荐答案
您需要自定义会话控制器和一些额外的配置。
You need a custom sessions controller and some extra configuration.
步骤1:启用设备以JSON响应
Step 1: Enable devise to respond with JSON
# config/initializers/devise.rb
config.http_authenticatable_on_xhr = false
config.navigational_formats = ["*/*", :html, :json]
第2步:添加映射(我看到您已经这样做了)
Step 2: Add mappings (I can see that you already did that)
# 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步:添加自定义控制器
Step 3: Add a custom controller
# 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
这里有什么特别的关于控制器的是,我们返回:json
Here what's special about the controller is that we return everything in :json
中的所有内容:步骤3:覆盖控制器:
Step 3: Override the controllers:
# config/routes.rb
devise_for :users, :controllers => {sessions: 'sessions'}
现在devise使用自定义会话控制器。
Now devise uses the custom sessions controller.
第4步:添加自定义表单(带有:remote => true)
Step 4: Add your custom form (with :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
Step 5: Add the 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!')
工作
这篇关于设计登录/在弹出窗口中注册的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持IT屋!