|
| 1 | +@props([ |
| 2 | + 'digits' => 6, |
| 3 | + 'eventCallback' => null, |
| 4 | + 'name' => 'code', |
| 5 | +]) |
| 6 | + |
| 7 | +<div x-data="{ |
| 8 | + totalInputDigits: @js($digits), |
| 9 | + callbackEventName: @js($eventCallback), |
| 10 | +
|
| 11 | + init() { |
| 12 | + this.$nextTick(() => { |
| 13 | + this.focusFirstInputField(); |
| 14 | + this.updateHiddenInputValue(); |
| 15 | + }); |
| 16 | + }, |
| 17 | +
|
| 18 | + focusFirstInputField() { |
| 19 | + this.getInputElementByIndex(1)?.focus(); |
| 20 | + }, |
| 21 | +
|
| 22 | + getInputElementByIndex(inputIndex) { |
| 23 | + return this.$refs[`input${inputIndex}`]; |
| 24 | + }, |
| 25 | +
|
| 26 | + handleKeydown(currentInputIndex, keyboardEvent) { |
| 27 | + const pressedKey = keyboardEvent.key; |
| 28 | +
|
| 29 | + if (this.isValidDigitKey(pressedKey)) { |
| 30 | + this.processDigitInput(currentInputIndex, keyboardEvent); |
| 31 | + } else if (pressedKey === 'Backspace') { |
| 32 | + this.processBackspaceInput(currentInputIndex, keyboardEvent); |
| 33 | + } |
| 34 | + }, |
| 35 | +
|
| 36 | + isValidDigitKey(keyValue) { |
| 37 | + const parsedNumber = parseInt(keyValue); |
| 38 | + return !isNaN(parsedNumber) && parsedNumber >= 0 && parsedNumber <= 9; |
| 39 | + }, |
| 40 | +
|
| 41 | + processDigitInput(currentInputIndex, keyboardEvent) { |
| 42 | + if (currentInputIndex === this.totalInputDigits) return; |
| 43 | +
|
| 44 | + keyboardEvent.preventDefault(); |
| 45 | + keyboardEvent.stopPropagation(); |
| 46 | +
|
| 47 | + const currentInputElement = this.getInputElementByIndex(currentInputIndex); |
| 48 | + const nextInputElement = this.getInputElementByIndex(currentInputIndex + 1); |
| 49 | +
|
| 50 | + currentInputElement.value = keyboardEvent.key; |
| 51 | + nextInputElement?.focus(); |
| 52 | +
|
| 53 | + this.scheduleInputUpdate(currentInputIndex); |
| 54 | + }, |
| 55 | +
|
| 56 | + processBackspaceInput(currentInputIndex, keyboardEvent) { |
| 57 | + keyboardEvent.preventDefault(); |
| 58 | + keyboardEvent.stopPropagation(); |
| 59 | +
|
| 60 | + const currentInputElement = this.getInputElementByIndex(currentInputIndex); |
| 61 | + const previousInputElement = this.getInputElementByIndex(currentInputIndex - 1); |
| 62 | +
|
| 63 | + if (currentInputElement.value !== '') { |
| 64 | + currentInputElement.value = ''; |
| 65 | + } else if (currentInputIndex > 1) { |
| 66 | + previousInputElement.value = ''; |
| 67 | + previousInputElement.focus(); |
| 68 | + } |
| 69 | +
|
| 70 | + this.scheduleInputUpdate(currentInputIndex); |
| 71 | + }, |
| 72 | +
|
| 73 | + handlePaste(pasteEvent) { |
| 74 | + pasteEvent.preventDefault(); |
| 75 | +
|
| 76 | + const clipboardData = (pasteEvent.clipboardData || window.clipboardData).getData('text'); |
| 77 | + const extractedDigits = clipboardData.split('').slice(0, this.totalInputDigits); |
| 78 | +
|
| 79 | + extractedDigits.forEach((digitValue, digitIndex) => { |
| 80 | + const inputElement = this.getInputElementByIndex(digitIndex + 1); |
| 81 | + if (inputElement && this.isValidDigitKey(digitValue)) { |
| 82 | + inputElement.value = digitValue; |
| 83 | + } |
| 84 | + }); |
| 85 | +
|
| 86 | + const nextFocusIndex = Math.min(extractedDigits.length, this.totalInputDigits); |
| 87 | + this.getInputElementByIndex(nextFocusIndex)?.focus(); |
| 88 | +
|
| 89 | + this.updateHiddenInputValue(); |
| 90 | + }, |
| 91 | +
|
| 92 | + sanitizeInput(inputElement) { |
| 93 | + inputElement.value = inputElement.value.replace(/[^0-9]/g, '').slice(0, 1); |
| 94 | + }, |
| 95 | +
|
| 96 | + scheduleInputUpdate(currentInputIndex) { |
| 97 | + setTimeout(() => { |
| 98 | + this.updateHiddenInputValue(); |
| 99 | + }, 100); |
| 100 | + }, |
| 101 | +
|
| 102 | + generateCompleteCode() { |
| 103 | + return Array.from({ length: this.totalInputDigits }, (_, digitIndex) => |
| 104 | + this.getInputElementByIndex(digitIndex + 1)?.value || '' |
| 105 | + ).join(''); |
| 106 | + }, |
| 107 | +
|
| 108 | + updateHiddenInputValue() { |
| 109 | + const completeCode = this.generateCompleteCode(); |
| 110 | + const hiddenInputElement = this.$refs.code; |
| 111 | +
|
| 112 | + if (hiddenInputElement) { |
| 113 | + hiddenInputElement.value = completeCode; |
| 114 | + hiddenInputElement.dispatchEvent(new Event('input', { bubbles: true })); |
| 115 | + } |
| 116 | + }, |
| 117 | +
|
| 118 | + clearAllInputs() { |
| 119 | + for (let i = 1; i <= this.totalInputDigits; i++) { |
| 120 | + const input = this.getInputElementByIndex(i); |
| 121 | + if (input) input.value = ''; |
| 122 | + } |
| 123 | + this.updateHiddenInputValue(); |
| 124 | + this.focusFirstInputField(); |
| 125 | + }, |
| 126 | + }" |
| 127 | + x-init="init()" |
| 128 | + x-intersect.once="setTimeout(() => focusFirstInputField(), 100)" |
| 129 | + @focus-auth-2fa-auth-code.window="focusFirstInputField()" |
| 130 | + @clear-auth-2fa-auth-code.window="clearAllInputs()" |
| 131 | + class="relative"> |
| 132 | + |
| 133 | + <div class="flex items-center"> |
| 134 | + @for ($x = 1; $x <= $digits; $x++) |
| 135 | + <input x-ref="input{{ $x }}" |
| 136 | + type="text" |
| 137 | + inputmode="numeric" |
| 138 | + pattern="[0-9]" |
| 139 | + maxlength="1" |
| 140 | + autocomplete="off" |
| 141 | + @paste="handlePaste" |
| 142 | + @keydown="handleKeydown({{ $x }}, $event)" |
| 143 | + @focus="$el.select()" |
| 144 | + @input="sanitizeInput($el)" |
| 145 | + class="flex h-10 w-10 items-center justify-center border border-zinc-300 bg-accent-foreground text-center text-sm font-medium text-accent-content transition-colors placeholder:text-zinc-500 focus:border-accent focus:border-2 focus:outline-none focus:relative focus:z-10 disabled:cursor-not-allowed disabled:opacity-50 dark:border-zinc-700 dark:focus:border-accent @if($x == 1) rounded-l-md @endif @if($x == $digits) rounded-r-md @endif @if($x > 1) -ml-px @endif" /> |
| 146 | + @endfor |
| 147 | + </div> |
| 148 | + |
| 149 | + <input {{ $attributes->except(['eventCallback', 'digits', 'name']) }} |
| 150 | + type="hidden" |
| 151 | + class="hidden" |
| 152 | + x-ref="code" |
| 153 | + name="{{ $name }}" |
| 154 | + minlength="{{ $digits }}" |
| 155 | + maxlength="{{ $digits }}" /> |
| 156 | +</div> |
0 commit comments