自定义忘记密码页面设计 ruby

Question

我有申请。我正在使用 ruby api 作为应用程序的后端。我正在使用本机反应作为前端。我正在使用设计进行身份验证。我们目前有设计标准的忘记密码页面。我想自定义页面并使页面看起来更好。在我的新实施之后，我收到了电子邮件，当我点击忘记密码 link 时，会打开一个空白选项卡而不是新页面。

下面是当前页面。

我在下面的路径中创建了视图 new.html.erb 文件 app/views/devise/passwords/new.html.erb

<h2>Change your passwordTest</h2>

<%= form_for(resource, as: resource_name, url: password_path(resource_name), html: { method: :put }) do |f| %>
  <%= render "devise/shared/error_messages", resource: resource %>
  <%= f.hidden_field :reset_password_token %>

  <div class="field">
    <%= f.label :password, "New password" %><br />
    <% if @minimum_password_length %>
      <em>(<%= @minimum_password_length %> characters minimum)</em><br />
    <% end %>
    <%= f.password_field :password, autofocus: true, autocomplete: "new-password" %>
  </div>

  <div class="field">
    <%= f.label :password_confirmation, "Confirm new password" %><br />
    <%= f.password_field :password_confirmation, autocomplete: "new-password" %>
  </div>

  <div class="actions">
    <%= f.submit "Change my password" %>
  </div>
<% end %>

<%= render "devise/shared/links" %>

在 route.rb 文件中，我有以下代码

  devise_for :users, controllers: { registrations: 'users/registrations', sessions: 'users/sessions', invitations: 'users/invitations', confirmations: 'users/confirmations', omniauth_callbacks: 'users/omniauth_callbacks', passwords: 'users/passwords'}

这是我的 passwords_controller.rb app/controllers/users/passwords_controller.rb

class Users::PasswordsController < Devise::PasswordsController

end

这里是 development.log 日志

Started GET "/users/password/edit?reset_password_token=[FILTERED]" for ::1 at 2021-02-25 21:29:36 -0700
Processing by Users::PasswordsController#edit as HTML
  Parameters: {"reset_password_token"=>"[FILTERED]"}
Completed 204 No Content in 1ms (ActiveRecord: 0.0ms)

Answer 1

您点击的link是：

http://localhost:3000/users/password/edit?reset_password_token=xz_gdihd8NBvLp36xD-U

这会将您重定向到 Users::PasswordsController

的 edit 方法

edit 方法默认引用 edit.html.erb 而不是 new.html.erb 视图。所以你只需要自定义这个视图即可。

您可以在设计 github 页面上查看此视图是如何实现的：https://github.com/heartcombo/devise/blob/master/app/views/devise/passwords/edit.html.erb 请记住在查询参数中包含正在传递的 reset_password_token

自定义忘记密码页面设计 ruby

customize forget password page devise ruby

ruby

ruby-on-rails

devise