Fix Flux OTP error rendering and accessibility (#161)

* fix: Show error when user enters invalid OTP code

* Remove redundant classes

---------

Co-authored-by: Pushpak Chhajed <[email protected]>

Author: LarsFixt

resources/views/livewire/auth/two-factor-challenge.blade.php

@@ -14,7 +14,7 @@ class="relative w-full h-auto"
                     this.recovery_code = '';
 
                     $dispatch('clear-2fa-auth-code');
-            
+
                     $nextTick(() => {
                         this.showRecoveryInput
                             ? this.$refs.recovery_code?.focus()
@@ -43,7 +43,14 @@ 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">
-                            <flux:otp x-model="code" length="6" name="code" submit="auto" />
+                            <flux:otp
+                                x-model="code"
+                                length="6"
+                                name="code"
+                                label="OTP Code"
+                                label:sr-only
+                                class="mx-auto"
+                             />
                         </div>
                     </div>
 

resources/views/livewire/settings/two-factor.blade.php

@@ -265,8 +265,15 @@ 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">
-                        <flux:otp wire:model="code" length="6" submit="auto" />
+                    <div class="flex flex-col items-center space-y-3 justify-center">
+                        <flux:otp
+                            name="code"
+                            wire:model="code"
+                            length="6"
+                            label="OTP Code"
+                            label:sr-only
+                            class="mx-auto"
+                        />
                     </div>
 
                     <div class="flex items-center space-x-3">