顧客側 新規登録

はじめに

bootstrap導入済　
namespases使用
devaice導入

---

今回の完成イメージです

migrateファイル
以下のようになってればOK！
足りないものがあれば追加してください。

 create_table "customers", force: :cascade do |t|
    t.string "email", default: "", null: false
    t.string "encrypted_password", default: "", null: false
    t.string "reset_password_token"
    t.datetime "reset_password_sent_at"
    t.datetime "remember_created_at"
    t.datetime "created_at", precision: 6, null: false
    t.datetime "updated_at", precision: 6, null: false
    t.boolean "is_deleted", default: false
+    t.string "last_name"
+    t.string "first_name"
+    t.string "kana_last_name"
+    t.string "kana_first_name" +   t.string "post_code"
+    t.string "address"
+    t.string "phone_number"
    t.index ["email"], name: "index_customers_on_email", unique: true
    t.index ["reset_password_token"], name: "index_customers_on_reset_password_token", unique: true
  end

今回は、last_name, first_name, kana_last_name, kana_first_name, post_code, address, phone_numberはまだ作成していなかったので追加しました。
以下のように追加

rails generate migration AddDetailsToCustomers last_name:string first_name:string kana_last_name:string kana_first_name:string post_code:string address:string phone_number:string
rails db:migrate

class AddDetailsToCustomers < ActiveRecord::Migration[6.1]
  def change
    add_column :customers, :last_name, :string
    add_column :customers, :first_name, :string
    add_column :customers, :kana_last_name, :string
    add_column :customers, :kana_first_name, :string
    add_column :customers, :post_code, :string
    add_column :customers, :address, :string
    add_column :customers, :phone_number, :string
  end
end

コントローラー

public/registration.controller.rb

class Public::RegistrationsController < Devise::RegistrationsController
  before_action :configure_permitted_parameters, if: :devise_controller?

 private
  
  def configure_permitted_parameters
    devise_parameter_sanitizer.permit(:sign_up, keys: [:last_name, :first_name, :kana_last_name, :kana_first_name, :email, :post_code, :address, :phone_number, :encrypted_password])
  end
end

　views 顧客登録ページ

public/registration/new.html.erb

<div class="container mt-5">
  <h2 class="mb-4">新規会員登録</h2>

  <%= form_with model: @customer, url: customer_registration_path, local: true do |f| %>
    <% render "public/shared/error_messages", resource: @customer %>
    
        <div class="row">
          <label class="col-lg-3">名前</label>
          <div class="col-lg-3">
            <%= f.text_field :last_name,autoforcus: true, autocomplete: "last_name",  placeholder: "令和" %>
          </div>
          <div class="col-lg-3">
            <%= f.text_field :first_name,autoforcus: true, autocomplete: "first_name",  placeholder: "道子" %>
          </div>
        </div><br>

      <div class="row">
        <label class="col-lg-3">フリガナ</label>
        <div class="col-lg-3">
          <%= f.text_field :kana_last_name,autoforcus: true, autocomplete: "kana_last_name",  placeholder: "レイワ" %>
        </div>
        <div class="col-lg-3">
          <%= f.text_field :kana_first_name,autoforcus: true, autocomplete: "kana_first_name",  placeholder: "ミチコ" %>
        </div>
      </div><br>
      
      <div class="row">
        <label class="col-lg-3">メールアドレス</label>
        <div class="col-lg-3">
          <%= f.text_field :email,autoforcus: true, autocomplete: "email",  placeholder: "[e-mail]" %>
        </div>
      </div><br>
      
      <div class="row">
        <label class="col-lg-3">郵便番号（ハイフンなし）</label>
        <div class="col-lg-3">
          <%= f.text_field :post_code,autoforcus: true, autocomplete: "post_code",  placeholder: "0000000" %>
        </div>
      </div><br>
      
      <div class="row">
        <label class="col-lg-3">住所</label>
        <div class="col-lg-3">
          <%= f.text_field :address,autoforcus: true, autocomplete: "address",  placeholder: "東京都渋谷区代々木神園町0-0" %>
        </div>
      </div><br>
      
      <div class="row">
        <label class="col-lg-3">電話番号（ハイフンなし）</label>
        <div class="col-lg-3">
          <%= f.text_field :phone_number,autoforcus: true, autocomplete: "phone_number",  placeholder: "0000000000" %>
        </div>
      </div><br>

      <div class="row">
        <label class="col-lg-3">パスワード
        <% if @minimum_password_length %>
          <em>(<%= @minimum_password_length %>文字以上)</em>
        <% end %></label>
        <div class="col-lg-3">
          <%= f.password_field :password, autocomplete: "encrypted_password" %>
        </div>
      </div><br>
      
      <div class="row">
        <label class="col-lg-3">パスワード(確認用）</label>
        <div class="col-lg-3">
          <%= f.password_field :password_confirmation,autoforcus: true, autocomplete: "current-password" %>
        </div>
      </div><br>
      
      <div class="row">
        <div class="col-lg-12">
          <div class="row">
            <div class="col-lg-3"></div>
            <div class="col-lg-9"><%= f.submit "新規登録", class: "btn btn-success" %></div>
        </div>

  <% end %>
  <br>
  <h2>既に登録済みの方</h2>
  <p><%= link_to 'こちら', new_customer_session_path %>&emsp;からログインしてください。</p>
  
</div>

Deviseではパスワード確認フィールドはpassword_confirmationとして扱われます。そのため、確認用のパスワードフィールドは:password_confirmationとなります。