bootstrapモーダル で ログイン認証

はじめに

ポートフォリオに機能追加中です！
bootstrapのモーダル機能を使って新規登録・ログインフォームを作成したのでアウトプットします✍️
ログイン認証機能はdeviseを使用していますが、
モーダルのフォームについては、Javascriptでバリデーションを実装します

初心者ですので、もっといい方法があるよ！
等ございましたらご教示いただけますと幸いです！

完成物

開発環境

• ruby: 3.1.2
• Rails: 6.1.7.7
• Cloud9
• bootstrap: 4.6.2

前提条件

• bootstrap4.6.2 導入済み
• devise 導入済み

モーダルの実装

ヘッターの新規登録ボタンとログインボタンをクリックするとモーダルのフォームが表示されるよう実装します
機能に関係のないレイアウトの箇所などは省略していますのでご留意ください！

参照資料

_header.html

<header class="header">

  <button type="button" class="btn" data-toggle="modal" data-target="#registrationModal">
   新規登録
 </button>

 <button type="button" class="btn" data-toggle="modal" data-target="#loginModal">
   ログイン
 </button>
</header>

<!-- Registration Modal -->
<div class="modal fade" id="registrationModal" tabindex="-1" role="dialog" aria-labelledby="registrationModalLabel" aria-hidden="true">
 <div class="modal-dialog" role="document">
   <div class="modal-content">
     <div class="modal-header">
       <h5 class="modal-title" id="registrationModalLabel">新規登録</h5>
       <button type="button" class="close" data-dismiss="modal" aria-label="Close">
         <span aria-hidden="true">&times;</span>
       </button>
     </div>
     <div class="modal-body">
       <%= render "public/registrations/form", resource: resource %>
     </div>
   </div>
 </div>
</div>

<!-- Login Modal -->
<div class="modal fade" id="loginModal" tabindex="-1" role="dialog" aria-labelledby="loginModalLabel" aria-hidden="true">
 <div class="modal-dialog" role="document">
   <div class="modal-content">
     <div class="modal-header">
       <h5 class="modal-title" id="loginModalLabel">ログイン</h5>
       <button type="button" class="close" data-dismiss="modal" aria-label="Close">
         <span aria-hidden="true">&times;</span>
       </button>
     </div>
     <div class="modal-body">
       <%= render "public/sessions/form", resource: resource %>
     </div>
   </div>
 </div>
</div>

これで、上のボタンをクリックすると下に記述したモーダルが開くようになります！

各モーダルのbodyの中身はテンプレートを使用しています
nameErrorなどのidが付与された<div>はJavascriptでバリデーションエラーを表示させるための記述です！こちらの記事に詳しく書いてます↓

public/registarations/_form.html

<%= form_with model: resource, url: user_registration_path do |f| %>
  <%= f.text_field :name, id: "registration_name"%>
  <div id="nameError"></div>

  <%= f.email_field :email, autofocus: true, autocomplete: "email", id: "registration_email" %>
  <div id="emailError"></div>

  <%= f.password_field :password, autocomplete: "new-password", id: "registration_pass" %>
  <div id="passError">パスワードを入力してください（あと<span id="remainingChars"></span>文字）。</div>
  
  <%= f.password_field :password_confirmation, autocomplete: "new-password", id: "registration_pass_confirm" %>
  <div id="passConfirmError">パスワードが一致していません。</div>

  <%= f.submit "登録", disabled: true, class: "disabled", id: "registration_submit" %>
<% end %>

<%= link_to 'ログインはこちら', '#loginModal', data: { toggle: 'modal', dismiss: "modal" } %>

public/sessions/_form.html

<div id="loginError"></div>
<%= form_with model: resource, url: users_check_user_path, local: false, class: 'sessions' do |f| %>

  <%= f.email_field :email, autofocus: true, autocomplete: "email", id: "login_email" %>
  <div id="loginEmailError"></div>

  <%= f.password_field :password, autocomplete: "current-password", id: "login_pass" %>
  <div id="loginPassError">パスワードを入力してください（あと<span id="loginRemainingChars"></span>文字）。</div>

  <%= f.submit "ログイン", disabled: true, class: "disabled", id: "login_submit" %>
<% end %>

<%= link_to '新規登録はこちら', '#registrationModal', data: { toggle: 'modal', dismiss: "modal" } %>

モーダルから別のモーダルに切り替えたい場合の実装方法 🌱
例) 新規登録フォーム → ログインフォーム

public/registarations/_form.html.erb

<%= link_to 'ログインはこちら', '#loginModal', data: { toggle: 'modal', dismiss: "modal" } %>

リンクから別のモーダルを表示するだけならdismissは不要ですが、「ログインはこちら」をクリックした時に同時に新規登録フォームを閉じたい場合はdismiss: "modal"を記述してください！

Javascriptでバリデーションを実装

このままでは新規登録やログインにエラーが発生した時、
deviseの使用上元の(モーダルでない)新規登録ページやログインページに飛んでしまいます
ログインを非同期で行うことも試みましたが挫折しました…
なので、今回はJavascriptで簡単なバリデーションをつけていきたいと思います

詳しくはこちらの記事を参照ください！

さいごに

モーダルでログインや新規登録ができるとちょっとおしゃれやな…
ぐらいの軽い気持ちで始めたもののめっちゃ時間かかりました…😱