[Bug fix] Resending otp code sometimes sends duplicates (#20)

* Change default colors to primary * Fix styling * Disable resend after resending and hide when authenticator as type * Fix styling * Define type --------- Co-authored-by: Baspa <[email protected]>
vormkracht10 · Aug 28, 2024 · 9837354 · 9837354
1 parent 3552178
commit 9837354
Show file tree

Hide file tree

Showing 5 changed files with 62 additions and 17 deletions.
diff --git a/resources/views/auth/login-two-factor.blade.php b/resources/views/auth/login-two-factor.blade.php
@@ -9,7 +9,11 @@
     <h2 class="mt-5 text-lg font-semibold text-gray-900 text-center">
         {{ __('Authenticate with your code') }}
     </h2>
-    {{ $this->resend }}
+    @if ($twoFactorType === 'email' || $twoFactorType === 'phone')
+        <div wire:poll.5s>
+            {{ $this->resend }}
+        </div>
+    @endif
     <form method="POST" action="{{ route('two-factor.login') }}" class="space-y-8">
 
         @csrf
@@ -22,3 +26,12 @@
         </div>
     </form>
 </x-filament-panels::page.simple>
+
+<script>
+    document.addEventListener('livewire:initialized', () => {
+        @this.on('resent', () => {
+            // Immediately disable the button
+            Livewire.dispatch('$refresh');
+        });
+    });
+</script>
diff --git a/resources/views/auth/password-reset.blade.php b/resources/views/auth/password-reset.blade.php
@@ -17,7 +17,7 @@ class="relative z-10 flex flex-1 flex-col bg-white px-4 py-10 shadow-2xl sm:just
                 @csrf
                 {{ $this->form }}
 
-                <x-filament::button type="submit" class="w-full mt-4" color="info">
+                <x-filament::button type="submit" class="w-full mt-4" color="primary">
                     {{ __('Reset Password') }}
                 </x-filament::button>
             </form>

diff --git a/resources/views/auth/request-password-reset.blade.php b/resources/views/auth/request-password-reset.blade.php
@@ -19,10 +19,10 @@ class="relative z-10 flex flex-1 flex-col bg-white px-4 py-10 shadow-2xl sm:just
                 <div class="flex items-center justify-between">
                     <x-filament::button color="secondary" class="w-full" type="button" tag="a" outlined
                         href="{{ route('login') }}">
-                        {{ __('Cancel')}}
+                        {{ __('Cancel') }}
                     </x-filament::button>
 
-                    <x-filament::button type="submit" class="w-full" color="info">
+                    <x-filament::button type="submit" class="w-full" color="primary">
                         {{ __('Submit') }}
                     </x-filament::button>
 

diff --git a/src/Http/Livewire/Auth/Login.php b/src/Http/Livewire/Auth/Login.php
@@ -172,7 +172,7 @@ protected function getPasswordFormComponent(): Component
     protected function getAuthenticateFormAction(): Action
     {
         return Action::make('authenticate')
-            ->color('info')
+            ->color('primary')
             ->label(__('filament-panels::pages/auth/login.form.actions.authenticate.label'))
             ->submit('authenticate');
     }

diff --git a/src/Http/Livewire/Auth/LoginTwoFactor.php b/src/Http/Livewire/Auth/LoginTwoFactor.php
@@ -12,7 +12,10 @@
 use Filament\Notifications\Notification;
 use Filament\Pages\Concerns\InteractsWithFormActions;
 use Filament\Pages\Page;
+use Illuminate\Support\Facades\Cache;
 use Laravel\Fortify\Http\Requests\TwoFactorLoginRequest;
+use Livewire\Attributes\Computed;
+use Livewire\Attributes\Reactive;
 use Vormkracht10\TwoFactorAuth\Notifications\SendOTP;
 
 class LoginTwoFactor extends Page implements HasActions, HasForms
@@ -29,10 +32,21 @@ class LoginTwoFactor extends Page implements HasActions, HasForms
 
     public mixed $challengedUser = null;
 
+    public ?string $twoFactorType = null;
+
+    #[Reactive]
+    public int $lastResendTime = 0;
+
     public function mount(TwoFactorLoginRequest $request): void
     {
         if ($request->challengedUser()) {
             $this->challengedUser = $request->challengedUser();
+            $this->twoFactorType = $this->challengedUser->two_factor_type->value;
+
+            // Set initial cooldown if not already set
+            if (! Cache::has('resend_cooldown_' . $this->challengedUser->id)) {
+                Cache::put('resend_cooldown_' . $this->challengedUser->id, true, now()->addSeconds(30));
+            }
         }
     }
 
@@ -41,24 +55,42 @@ public function hasLogo(): bool
         return false;
     }
 
+    #[Computed]
+    public function canResend(): bool
+    {
+        return ! Cache::has('resend_cooldown_' . $this->challengedUser->id);
+    }
+
     public function resend(): Action
     {
         return Action::make('resend')
             ->label(__('Resend'))
             ->extraAttributes(['class' => 'w-full text-xs'])
             ->link()
-            ->action(function () {
-                if (! $this->throttle()) {
-                    return;
-                }
-
-                $this->challengedUser->notify(app(SendOTP::class));
-
-                Notification::make()
-                    ->title(__('Successfully resend the OTP code'))
-                    ->success()
-                    ->send();
-            });
+            ->disabled(fn () => ! $this->canResend())
+            ->action(fn () => $this->handleResend());
+    }
+
+    public function handleResend(): void
+    {
+        if (! $this->canResend()) {
+            return;
+        }
+
+        if (! $this->throttle()) {
+            return;
+        }
+
+        $this->challengedUser->notify(app(SendOTP::class));
+
+        Cache::put('resend_cooldown_' . $this->challengedUser->id, true, now()->addSeconds(30));
+
+        $this->dispatch('resent');
+
+        Notification::make()
+            ->title(__('Successfully resend the OTP code'))
+            ->success()
+            ->send();
     }
 
     private function throttle(): bool