【Rails & JavaScript】退会機能の実装

deviseを使用した退会機能を実装していく。
退会確認メッセージのチェックボックスにチェックが入らないと、ボタンがクリックできないようにする。

ルーティング

ルーティングに以下を追記し、退会確認画面と退会処理ができるようにする。

routes.rb

    resources :users, param: :account, only: [:show, :edit, :update] do
      member do
        get :liked_posts
+       get :withdraw_input # 退会確認画面
+       patch :withdraw_process # ステータス更新
      end
    end

モデル

今回は以下のユーザーステータスを設けるため、enumを使用しモデルに記載する。
0 :active (有効ユーザー)
1 :banned (一時凍結)
2 :inactive (退会済み)

また、activeでないユーザーはログインできないように設定する。

app/models/user.rb

:
  enum status: { active: 0, banned: 1, inactive: 2 }
  
　def active_for_authentication?
    super && (status == 'active')
  end
:

superは親クラス（ここではdevise）の同名メソッドを呼び出して実行する。

コントローラ

以下のようにした。
withdraw_inputアクションはどういうページを作るかによってコーディングが変わってくる。

app/controllers/public/users_controller.rb

  def withdraw_input
    @user = current_user
  end
  
  def withdraw_process
    user = current_user
    user.update(status: :inactive)
    reset_session
    redirect_to root_path, notice: "退会しました"
  end

Viewページ

説明項目のみ記載する。

app/views/public/users/withdraw_input.html.erb

:
        <div class="withdraw-checked">
        <label>
          <input type="checkbox" name="withdraw_agreement" id="withdraw-agreement">
          削除する内容を理解した
        </label>
      </div>

      <div class="button">
        <%= link_to "アカウントを削除", withdraw_process_user_path, method: :patch, class: "btn btn-outline-danger", id: "withdraw-button", disabled: true %>
      </div>
    </div>

    <div class="col-md"></div>
  </div>
</div>


<script>
  document.addEventListener("DOMContentLoaded", function() {
    const agreementCheckbox = document.getElementById("withdraw-agreement");
    const withdrawButton = document.getElementById("withdraw-button");

    // ページ読み込み時にボタンの無効化を設定
    withdrawButton.classList.toggle("disabled", !agreementCheckbox.checked);

    // チェックボックスの変更に応じてボタンを制御
    agreementCheckbox.addEventListener("change", function() {
      withdrawButton.classList.toggle("disabled", !agreementCheckbox.checked);
    });
  });
</script>

JavaScriptを使用しチェックボックスにチェックが入らないと、ボタンを無効化する。

チェックが入るとボタンをクリックできるようになる。