From 6a3135b67a66da12a18a883b750a5c5d4bb32633 Mon Sep 17 00:00:00 2001
From: Mike Dalessio <mike@37signals.com>
Date: Mon, 17 Nov 2025 14:43:43 -0500
Subject: [PATCH] Introduce a simple stimulus controller for the magic link
 form

which avoids the double-submit problem from:

- https://app.fizzy.do/5986089/cards/2980
- https://app.fizzy.do/5986089/cards/2771
---
 .../controllers/magic_link_controller.js      | 19 +++++++++++++++++++
 app/views/sessions/magic_links/show.html.erb  |  4 ++--
 2 files changed, 21 insertions(+), 2 deletions(-)
 create mode 100644 app/javascript/controllers/magic_link_controller.js

diff --git a/app/javascript/controllers/magic_link_controller.js b/app/javascript/controllers/magic_link_controller.js
new file mode 100644
index 000000000..b2e487489
--- /dev/null
+++ b/app/javascript/controllers/magic_link_controller.js
@@ -0,0 +1,19 @@
+import { Controller } from "@hotwired/stimulus"
+import { onNextEventLoopTick } from "helpers/timing_helpers"
+
+export default class extends Controller {
+  static targets = [ "input" ]
+
+  submit(event) {
+    onNextEventLoopTick(() => {
+      this.inputTarget.disabled = true
+    })
+  }
+
+  paste(event) {
+    onNextEventLoopTick(() => {
+      this.element.submit()
+      this.inputTarget.disabled = true
+    })
+  }
+}
diff --git a/app/views/sessions/magic_links/show.html.erb b/app/views/sessions/magic_links/show.html.erb
index e358f3284..4edffc406 100644
--- a/app/views/sessions/magic_links/show.html.erb
+++ b/app/views/sessions/magic_links/show.html.erb
@@ -6,11 +6,11 @@
     <p class="margin-none-block-start txt-medium">Then enter the verification code included in the email below:</p>
   </header>
 
-  <%= form_with url: session_magic_link_path, method: :post, html: { data: { controller: token_list("form", "auto-submit" => params[:code].present?)} } do |form| %>
+  <%= form_with url: session_magic_link_path, method: :post, html: { data: { controller: "magic-link" } } do |form| %>
     <%= form.text_field :code, required: true, class: "input center txt-align-enter txt-large",
         autofocus: true, autocorrect: "off", autocapitalize: "off", spellcheck: "false", "data-1p-ignore": true,
         autocomplete: "one-time-code", maxlength: "6", placeholder: "••••••", value: params[:code],
-        data: { form_target: "input", action: "paste->form#debouncedSubmit" } %>
+        data: { magic_link_target: "input", action: "keydown.enter->magic-link#submit paste->magic-link#paste" } %>
   <% end %>
 </div>