From fa1498d747d50c24823c57c6ddafc4f2de4eab56 Mon Sep 17 00:00:00 2001
From: Julius Kiekbusch <contact@julius-kiekbusch.de>
Date: Wed, 26 Nov 2025 15:58:03 +0100
Subject: [PATCH 1/2] Use FluxUI OTP

---
 .../views/components/input-otp.blade.php      | 138 ------------------
 .../auth/two-factor-challenge.blade.php       |  13 +-
 .../livewire/settings/two-factor.blade.php    |  12 +-
 3 files changed, 2 insertions(+), 161 deletions(-)
 delete mode 100644 resources/views/components/input-otp.blade.php

diff --git a/resources/views/components/input-otp.blade.php b/resources/views/components/input-otp.blade.php
deleted file mode 100644
index de1b0d46..00000000
--- a/resources/views/components/input-otp.blade.php
+++ /dev/null
@@ -1,138 +0,0 @@
-@props([
-    'digits' => 6,
-    'name' => 'code',
-])
-
-<div
-    @focus-2fa-auth-code.window="$refs.input1?.focus()"
-    @clear-2fa-auth-code.window="clearAll()"
-    class="relative"
-    x-data="{
-        totalDigits: @js($digits),
-        digitIndices: @js(range(1, $digits)),
-        init() {
-            $nextTick(() => {
-                this.$refs.input1?.focus();
-            });
-        },
-        getInput(index) {
-            return this.$refs['input' + index];
-        },
-        setValue(index, value) {
-            this.getInput(index).value = value;
-        },
-        getCode() {
-            return this.digitIndices
-                .map(i => this.getInput(i).value)
-                .join('');
-        },
-        updateHiddenField() {
-            this.$refs.code.value = this.getCode();
-            this.$refs.code.dispatchEvent(new Event('input', { bubbles: true }));
-            this.$refs.code.dispatchEvent(new Event('change', { bubbles: true }));
-        },
-        handleNumberKey(index, key) {
-            this.setValue(index, key);
-
-            if (index < this.totalDigits) {
-                this.getInput(index + 1).focus();
-            }
-
-            $nextTick(() => {
-                this.updateHiddenField();
-            });
-        },
-        handleBackspace(index) {
-            const currentInput = this.getInput(index);
-
-            if (currentInput.value !== '') {
-                currentInput.value = '';
-                this.updateHiddenField();
-                return;
-            }
-
-            if (index <= 1) {
-                return;
-            }
-
-            const previousInput = this.getInput(index - 1);
-    
-            previousInput.value = '';
-            previousInput.focus();
-
-            this.updateHiddenField();
-        },
-        handleKeyDown(index, event) {
-            const key = event.key;
-
-            if (/^[0-9]$/.test(key)) {
-                event.preventDefault();
-                this.handleNumberKey(index, key);
-                return;
-            }
-
-            if (key === 'Backspace') {
-                event.preventDefault();
-                this.handleBackspace(index);
-                return;
-            }
-        },
-        handlePaste(event) {
-            event.preventDefault();
-
-            const pastedText = (event.clipboardData || window.clipboardData).getData('text');
-            const numericOnly = pastedText.replace(/[^0-9]/g, '');
-            const digitsToFill = Math.min(numericOnly.length, this.totalDigits);
-
-            this.digitIndices
-                .slice(0, digitsToFill)
-                .forEach(index => {
-                    this.setValue(index, numericOnly[index - 1]);
-                });
-
-            if (numericOnly.length >= this.totalDigits) {
-                this.updateHiddenField();
-            }
-        },
-        clearAll() {
-            this.digitIndices.forEach(index => {
-                this.setValue(index, '');
-            });
-
-            this.$refs.code.value = '';
-            this.$refs.input1?.focus();
-        }
-    }"
->
-    <div class="flex items-center">
-        @for ($x = 1; $x <= $digits; $x++)
-            <input
-                x-ref="input{{ $x }}"
-                type="text"
-                inputmode="numeric"
-                pattern="[0-9]"
-                maxlength="1"
-                autocomplete="off"
-                @paste="handlePaste"
-                @keydown="handleKeyDown({{ $x }}, $event)"
-                @focus="$el.select()"
-                @input="$el.value = $el.value.replace(/[^0-9]/g, '').slice(0, 1)"
-                @class([
-                    'flex size-10 items-center justify-center border border-zinc-300 bg-accent-foreground text-center text-sm font-medium text-accent-content transition-colors focus:border-accent focus:border-2 focus:outline-none focus:relative focus:z-10 dark:border-zinc-700 dark:focus:border-accent',
-                    'rounded-l-md' => $x === 1,
-                    'rounded-r-md' => $x === $digits,
-                    '-ml-px' => $x > 1,
-                ])
-            />
-        @endfor
-    </div>
-
-    <input
-        {{ $attributes->except(['digits']) }}
-        type="hidden"
-        x-ref="code"
-        name="{{ $name }}"
-        minlength="{{ $digits }}"
-        maxlength="{{ $digits }}"
-    />
-</div>
diff --git a/resources/views/livewire/auth/two-factor-challenge.blade.php b/resources/views/livewire/auth/two-factor-challenge.blade.php
index dcbb6294..21ca642f 100644
--- a/resources/views/livewire/auth/two-factor-challenge.blade.php
+++ b/resources/views/livewire/auth/two-factor-challenge.blade.php
@@ -43,19 +43,8 @@ class="relative w-full h-auto"
                 <div class="space-y-5 text-center">
                     <div x-show="!showRecoveryInput">
                         <div class="flex items-center justify-center my-5">
-                            <x-input-otp
-                                name="code"
-                                digits="6"
-                                autocomplete="one-time-code"
-                                x-model="code"
-                            />
+                            <flux:otp x-model="code" length="6" name="code" submit="auto" />
                         </div>
-
-                        @error('code')
-                            <flux:text color="red">
-                                {{ $message }}
-                            </flux:text>
-                        @enderror
                     </div>
 
                     <div x-show="showRecoveryInput">
diff --git a/resources/views/livewire/settings/two-factor.blade.php b/resources/views/livewire/settings/two-factor.blade.php
index 529e1a58..e0ae6124 100644
--- a/resources/views/livewire/settings/two-factor.blade.php
+++ b/resources/views/livewire/settings/two-factor.blade.php
@@ -266,17 +266,7 @@ class="max-w-md md:min-w-md"
             @if ($showVerificationStep)
                 <div class="space-y-6">
                     <div class="flex flex-col items-center space-y-3">
-                        <x-input-otp
-                            :digits="6"
-                            name="code"
-                            wire:model="code"
-                            autocomplete="one-time-code"
-                        />
-                        @error('code')
-                            <flux:text color="red">
-                                {{ $message }}
-                            </flux:text>
-                        @enderror
+                        <flux:otp wire:model="code" length="6" submit="auto" />
                     </div>
 
                     <div class="flex items-center space-x-3">

From 0cc11b3de684b22e50ec3eb80ba352672be004bc Mon Sep 17 00:00:00 2001
From: Julius Kiekbusch <contact@julius-kiekbusch.de>
Date: Wed, 26 Nov 2025 16:00:09 +0100
Subject: [PATCH 2/2] Require FluxUI 2.9.0

---
 composer.json | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/composer.json b/composer.json
index 1fba8a51..3eb81841 100644
--- a/composer.json
+++ b/composer.json
@@ -13,7 +13,7 @@
         "laravel/fortify": "^1.30",
         "laravel/framework": "^12.0",
         "laravel/tinker": "^2.10.1",
-        "livewire/flux": "^2.1.1",
+        "livewire/flux": "^2.9.0",
         "livewire/volt": "^1.7.0"
     },
     "require-dev": {