0

我是 Rails 的新手，并用于设计身份验证，我想要完成的是用户隐私。

在编辑表单中的含义我想添加一个切换开关操作，例如“电子邮件字段”，以使用户能够在其个人资料中显示/隐藏字段，但表单仍显示在编辑视图中。

<%= simple_form_for(resource, as: resource_name, url: registration_path(resource_name), html: { method: :put }) do |f| %>
  <%= f.error_notification %>

  <div class="form-inputs">
    <div class="container mt-5">
      <div class="row">
        <div class="col-sm-3">
          <!-- Left menu links -->        
          <ul class="nav-item pl-0">
            <h4 class="nav-link disabled mb-0 text-dark font-weight-bold">Settings</h4>
            <%= link_to 'Personal information', "/users/edit", class: "nav-link text-dark font-weight-bold" %>
            <%= link_to 'Account settings', "/account/settings", class: "nav-link text-dark font-weight-bold" %>
            <%= link_to 'Password settings', "/account/passwords", class: "nav-link text-dark font-weight-bold" %>
            <%= link_to 'Security', "/account/security", class: "nav-link text-dark font-weight-bold" %>
          </ul>
        </div>

        <!-- Right from inputs -->
        <div class="col-sm-9 shadow-sm border border-dark p-3 mb-5 mx-3 mx-sm-0 mx-lg-0 mx-xl-0 bg-white rounded">

          <div class="form-inline form-group">
            <div class="col-sm-2">
              <label class="text-dark font-weight-bold  justify-content-start">First name:</label>
            </div>
            <div class="col-sm-4">
              <%= f.input :first_name, label: false, input_html: { class: "form-control w-100 border-top-0 border-right-0 border-left-0 rounded-0", placeholder: "First name"} %>
            </div>
          </div>

          <div class="form-inline form-group">
            <div class="col-sm-2">
              <label class="text-dark font-weight-bold  justify-content-start">Last name:</label>
            </div>
            <div class="col-sm-4">
              <%= f.input :last_name, label: false, input_html: { class: "form-control w-100 border-top-0 border-right-0 border-left-0 rounded-0", placeholder: "Last name"} %>
            </div>
          </div>

          <div class="dropdown-divider my-4"></div>
          <label class="text-dark font-weight-bold px-3 mb-4">Biography</label>
          <div class="form-inline form-group">
            <div class="col-sm-2">
              <label class="text-dark font-weight-bold  justify-content-start">About:</label>
            </div>
            <div class="col-sm-10">
              <%= f.input :about, label: false, input_html: { class: "form-control w-100 border-top-0 border-right-0 border-left-0 rounded-0", placeholder: "Write in few lines something about yourself and what you are passionate about"} %>
            </div>
          </div>

          <div class="dropdown-divider mt-5 mb-4"></div>
          <label class="text-dark font-weight-bold px-3 mb-4">Career</label>
          <div class="form-inline form-group">
            <div class="col-sm-2">
              <label class="text-dark font-weight-bold  justify-content-start">Company:</label>
            </div>
            <div class="col-sm-10">
              <%= f.input :company, label: false, input_html: { class: "form-control w-100 border-top-0 border-right-0 border-left-0 rounded-0", placeholder: "Where do you work?"} %>
            </div>
          </div>

          <div class="form-inline form-group">
            <div class="col-sm-2">
              <label class="text-dark font-weight-bold  justify-content-start">Job title:</label>
            </div>
            <div class="col-sm-10">
              <%= f.input :job_title, label: false, input_html: { class: "form-control w-100 border-top-0 border-right-0 border-left-0 rounded-0", placeholder: "Current working position?"} %>
            </div>
          </div>
          <div class="form-inline form-group">
            <div class="col-sm-2">
              <label class="text-dark font-weight-bold  justify-content-start">School / University:</label>
            </div>
            <div class="col-sm-10">
              <%= f.input :school, label: false, input_html: { class: "form-control w-100 border-top-0 border-right-0 border-left-0 rounded-0", placeholder: "Name of school or university"} %>
            </div>
          </div>

          <!-- Right update button -->
          <div class="form-inline justify-content-end py-2 px-3">
            <div class="col-sm-2">
              <%= f.button :submit, "Update", class: "btn btn-primary btn-sm btn-block" %>
            </div>
          </div>
        </div>   
      </div>
    </div>
  </div>
<% end %>

我做了一个自定义设计注册控制器

app/controllers/registations_controller.rb

class RegistrationsController < Devise::RegistrationsController

  def update
    self.resource = resource_class.to_adapter.get!(send(:"current_#{resource_name}").to_key)
    prev_unconfirmed_email = resource.unconfirmed_email if resource.respond_to?(:unconfirmed_email)

    resource_updated = update_resource(resource, account_update_params)
    yield resource if block_given?
    if resource_updated
      set_flash_message_for_update(resource, prev_unconfirmed_email)
      bypass_sign_in resource, scope: resource_name if sign_in_after_change_password?
      respond_with resource, location: after_update_path_for(resource)
    else
      clean_up_passwords resource
      set_minimum_password_length
      session[:return_to] ||= request.referer
      redirect_to session.delete(:return_to), alert: resource.errors.full_messages[0]

    end
  end


  def settings
      @user = current_user
      if @user
          render :settings
      else
          render file: 'public/404', status: 404, formats: [:html]
       end 
  end

  def passwords
    @user = current_user
    if @user
      render :passwords
    else
      render file: 'public/404', status: 404, formats: [:html]
    end
  end

  def security
    @user = current_user
    if @user
      render :security
    else
      render file: 'public/404', status: 404, formats: [:html]
    end
  end  
end

app/controllers/users_controller.rb

class UsersController < ApplicationController
  before_action :authenticate_user!
  def show
    @user = current_user
  end
end


routes.rb

Rails.application.routes.draw do
  get 'users/show'
  root 'pages#home'
  # For details on the DSL available within this file, see https://guides.rubyonrails.org/routing.html

  devise_for :users, controllers: { registrations: "registrations" }
  resources :user, only: [:show]
  devise_scope :user do 
    get 'accounts/settings', to: 'registrations#settings', as: :settings
    get 'accounts/passwords', to: 'registrations#passwords', as: :passwords
    get 'accounts/security', to: 'registrations#security', as: :security
  end 
end
4

1 回答 1

1

你需要做 3 件事：

  • 添加一个带有 onclick 处理程序的按钮，允许用户单击它来隐藏/显示该字段
  • 将 ID 添加到您用于显示属性的 div
  • 创建一个 javascript 函数来显示/隐藏该 div

因此，在您隐藏的 div 之外添加按钮并包含 onclick

<%= button_tag "Hide/Show", :onclick => "hideInput()" %>

然后将 ID 添加到您隐藏的 div 中。在你的情况下，做这样的事情。您可以使用任何您想要的 ID。我的只是一个例子。

<div id="emailDisplayed" class="text-dark"> <%= @user.email %> </div>

然后你想在你的 javascript 文件中添加 hideInput 函数。最好在assets/javascripts/[file_name]

function hideInput() {
  var emailDiv = document.getElementById("emailDisplayed");
  emailDiv.style.display === "block" ?  emailDiv.style.display = 'none' : emailDiv.style.display = 'block';
}

现在，当用户单击按钮时，它将隐藏/显示包含用户电子邮件的 div。

于 2019-08-07T23:49:29.317 回答