x
1
2
3
<form data-controller="form" action="/lookbook/home/index" accept-charset="UTF-8" method="post"><input type="hidden" name="authenticity_token" value="qiId75JzPt2HIWMQOVJeblKQfc-954fg8ew3aUutnSgwFoGppINEYTrcztBL1R8_wxDsi0_LxAhep4CU0Dn7WQ" autocomplete="off" /> <input placeholder="••••••" autocorrect="off" autocapitalize="none" spellcheck="false" autocomplete="one-time-code" maxlength="6" class="input input--otp" style="--input-otp-size: 18ch" data-action="paste->form#submit" data-1p-ignore="true" size="6" type="text" name="code" id="code" /></form>1
2
3
<%= form_with url: nil, data: { controller: "form" } do |form| %> <%= form.text_field :code, placeholder: "••••••", autocorrect: "off", autocapitalize: "none", spellcheck: false, autocomplete: "one-time-code", maxlength: 6, class: "input input--otp", style: "--input-otp-size: 18ch", data: { action: "paste->form#submit", "1p-ignore": true } %><% end %>1
2
3
4
5
6
7
8
.input--otp { font-family: var(--font-monospace-code); font-weight: var(--font-black); inline-size: var(--input-otp-size, auto); letter-spacing: 1ch; min-inline-size: var(--input-otp-size, auto); text-align: center;}1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
import { Controller } from "@hotwired/stimulus"import debounce from "https://esm.sh/just-debounce-it@3.2.0?standalone"export default class extends Controller { static targets = [ "cancel", "submit" ] static values = { debounceTimeout: { type: Number, default: 300 } } initialize() { this.debouncedSubmit = debounce(this.debouncedSubmit.bind(this), this.debounceTimeoutValue) } submit({ params: { submitter } }) { if (submitter) { this.element.requestSubmit(this.#find(submitter)) } else { this.element.requestSubmit() } } debouncedSubmit(event) { this.submit(event) } submitToTopTarget() { this.element.setAttribute("data-turbo-frame", "_top") this.submit() } disableSubmitWhenInvalid() { if (this.element.checkValidity()) { this.submitTarget.removeAttribute("disabled") } else { this.submitTarget.toggleAttribute("disabled", true) } } reset() { this.element.reset() } cancel() { this.cancelTarget?.click() } preventAttachment(event) { event.preventDefault() } #find(id) { return document.getElementById(id) || this.#notFound(id) } #notFound(id) { throw new Error(`Submitter with ID "${id}" not found`) }}No notes provided.