Show confirmation dialog when removing yourself

app/javascript/controllers/collections_form_controller.js

@@ -0,0 +1,21 @@
+import { Controller } from "@hotwired/stimulus"
+import { nextEventLoopTick } from "helpers/timing_helpers";
+
+export default class extends Controller {
+  static targets = ["meCheckbox"]
+  static values = { selfRemovalPromptMessage: { type: String, default: "Are you sure?" } }
+
+  async submitWithWarning(event) {
+    if (this.hasMeCheckboxTarget && !this.meCheckboxTarget.checked && !this.confirmed) {
+      event.detail.formSubmission.stop()
+
+      const message = this.selfRemovalPromptMessageValue
+
+      if (confirm(message)) {
+        await nextEventLoopTick()
+        this.confirmed = true
+        this.element.requestSubmit()
+      }
+    }
+  }
+}

app/views/collections/_access_toggle.erb

@@ -9,7 +9,9 @@
   <%= icon_tag "check", class: "toggler__visible-when-on margin-inline-end" %>
 
   <label class="switch toggler__visible-when-off flex-item-no-shrink">
-    <%= check_box_tag "user_ids[]", user.id, selected, class: "switch__input", id: nil, data: { toggle_class_target: "checkbox" } %>
+    <% checkbox_data = { toggle_class_target: "checkbox" } %>
+    <% checkbox_data[:collections_form_target] = "meCheckbox" if user == Current.user %>
+    <%= check_box_tag "user_ids[]", user.id, selected, class: "switch__input", id: nil, data: checkbox_data %>
     <span class="switch__btn round"></span>
     <span class="for-screen-reader">Give <%= user.name %> access</span>
   </label>

app/views/collections/edit.html.erb

@@ -21,7 +21,7 @@
       <div>Choose who can access this Collection</div>
     </header>
 
-    <%= form_with model: @collection, class: "display-contents", data: { controller: "form" } do |form| %>
+    <%= form_with model: @collection, class: "display-contents", data: { controller: "form collections-form", collections_form_self_removal_prompt_message_value: "You're about to remove yourself from this collection. Other members will need to add you back. Are you sure?", action: "turbo:submit-start->collections-form#submitWithWarning" } do |form| %>
       <%= render "collections/edit/name", form: form %>
       <%= render "collections/edit/users", collection: @collection, selected_users: @selected_users, unselected_users: @unselected_users, form: form %>