Merge pull request #48 from vormkracht10/feature/2fa-ux-improvements

UX improvements
vormkracht10 · Oct 22, 2024 · 0df20a7 · 0df20a7
2 parents 817026c + 13387cd
commit 0df20a7
Show file tree

Hide file tree

Showing 2 changed files with 16 additions and 8 deletions.
diff --git a/resources/views/auth/login-two-factor.blade.php b/resources/views/auth/login-two-factor.blade.php
@@ -3,15 +3,19 @@
         {{ __('Authenticate with your code') }}
     </h2>
     @if ($twoFactorType === 'email' || $twoFactorType === 'phone')
-        <div wire:poll.5s>
-            {{ $this->resend }}
-        </div>
+    <div wire:poll.5s>
+        {{ $this->resend }}
+    </div>
     @endif
     <form method="POST" action="{{ route('two-factor.login') }}" class="space-y-8">
 
         @csrf
         {{ $this->form }}
 
+        <div style="display: none">
+            <input type="text" id="recovery_code" wire:model="recovery_code" name="recovery_code" value="">
+        </div>
+
         <div class="flex items-center justify-between mt-6">
             <x-filament::button type="submit" class="w-full" color="primary">
                 {{ __('Login') }}
@@ -27,4 +31,4 @@
             Livewire.dispatch('$refresh');
         });
     });
-</script>
+</script>
diff --git a/src/Http/Livewire/Auth/LoginTwoFactor.php b/src/Http/Livewire/Auth/LoginTwoFactor.php
@@ -9,6 +9,7 @@
 use Filament\Forms\Components\TextInput;
 use Filament\Forms\Concerns\InteractsWithForms;
 use Filament\Forms\Contracts\HasForms;
+use Filament\Forms\Set;
 use Filament\Notifications\Notification;
 use Filament\Pages\Concerns\InteractsWithFormActions;
 use Filament\Pages\Page;
@@ -34,6 +35,10 @@ class LoginTwoFactor extends Page implements HasActions, HasForms
 
     public ?string $twoFactorType = null;
 
+    public ?string $code = null;
+
+    public ?string $recovery_code = null;
+
     #[Reactive]
     public int $lastResendTime = 0;
 
@@ -125,15 +130,14 @@ protected function getFormSchema(): array
     {
         return [
             TextInput::make('code')
+                ->label(__('Code'))
                 ->required()
                 ->extraInputAttributes([
                     'name' => 'code',
                     'autocomplete' => 'one-time-code',
                 ])
-                ->label(__('Code')),
-            TextInput::make('recovery_code')
-                ->extraInputAttributes(['name' => 'recovery_code'])
-                ->label(__('Recovery code')),
+                ->afterStateUpdated(fn (Set $set, ?string $state) => $set('recovery_code', $state))
+                ->live(),
         ];
     }
 }