feat: throttle verification mail resending in UI (#116)

resources/lang/en/actions.php

@@ -3,27 +3,28 @@
 declare(strict_types=1);
 
 return [
-    'disable'                 => 'Disable',
-    'enable'                  => 'Enable',
-    'export_personal_data'    => 'Export Personal Data',
-    'understand'              => 'I Understand',
-    'update'                  => 'Update',
-    'select_timezone'         => 'Select Timezone',
-    'sign_in'                 => 'Sign In',
-    'sign_up'                 => 'Sign Up',
-    'reset_password'          => 'Reset Password',
-    'enter_recovery_code'     => 'Enter recovery code',
-    'enter_2fa_code'          => 'Enter 2FA code',
-    'verify'                  => 'Verify',
-    'delete_account'          => 'Delete Account',
-    'nevermind'               => 'Nevermind',
-    'done'                    => 'Done',
-    'confirm_logout'          => 'Logout Other Browser Sessions',
-    'cancel'                  => 'Cancel',
-    'delete'                  => 'Delete',
-    'send'                    => 'Send',
-    'skip'                    => 'Skip',
-    'download'                => 'Download',
-    'recovery_codes'          => 'Recovery Codes',
-    'confirm'                 => 'Confirm',
+    'disable'                   => 'Disable',
+    'enable'                    => 'Enable',
+    'export_personal_data'      => 'Export Personal Data',
+    'understand'                => 'I Understand',
+    'update'                    => 'Update',
+    'select_timezone'           => 'Select Timezone',
+    'sign_in'                   => 'Sign In',
+    'sign_up'                   => 'Sign Up',
+    'reset_password'            => 'Reset Password',
+    'enter_recovery_code'       => 'Enter recovery code',
+    'enter_2fa_code'            => 'Enter 2FA code',
+    'verify'                    => 'Verify',
+    'delete_account'            => 'Delete Account',
+    'nevermind'                 => 'Nevermind',
+    'done'                      => 'Done',
+    'confirm_logout'            => 'Logout Other Browser Sessions',
+    'cancel'                    => 'Cancel',
+    'delete'                    => 'Delete',
+    'send'                      => 'Send',
+    'skip'                      => 'Skip',
+    'download'                  => 'Download',
+    'recovery_codes'            => 'Recovery Codes',
+    'confirm'                   => 'Confirm',
+    'resend_email_verification' => 'click here to request another',
 ];

resources/lang/en/auth.php

@@ -39,6 +39,7 @@
     'verify' => [
         'page_header'         => 'Verify Your Email Address',
         'link_description'    => 'A verification link has been sent to your email address.',
-        'resend_verification' => '<span>Before proceeding, please check your email for a verification link.</span> <span>If you did not receive the email, <button type="submit" class="link">click here to request another</button>.</span>',
+        'line_1'              => 'Before proceeding, please check your email for a verification link.',
+        'line_2'              => 'If you did not receive the email,',
     ],
 ];

resources/lang/en/messages.php

@@ -5,9 +5,9 @@
 return [
     'invalid_2fa_authentication_code' => 'The provided two factor authentication code was invalid',
     'export_limit_reached'            => 'You can export your personal data once every 15 minutes.',
-    'invalid_2fa_authentication_code' => 'The provided two factor authentication code was invalid',
     'subscription'                    => [
         'duplicate' => "You're already subscribed.",
         'pending'   => 'You should shortly receive an email to confirm your subscription. You may need to check your spam folder if an email doesn’t arrive within a few minutes.',
     ],
+    'resend_email_verification_limit' => 'Please wait 5 minutes before requesting another e-mail. Ensure to check your spam folder.',
 ];

resources/views/auth/verify-email.blade.php

@@ -14,23 +14,6 @@
 @endsection
 
 @section('content')
-    <div class="flex max-w-xl p-8 mx-auto my-6 bg-white rounded-xl">
-        <div class="flex flex-col w-full text-center space-y-6">
-            <div class="space-y-4">
-                <h1>@lang('fortify::auth.verify.page_header')</h1>
-
-                <p>@lang('fortify::auth.verify.link_description')</p>
-            </div>
-
-            <img class="mb-5 mx-12" src="/images/auth/verify-email.svg" />
-
-            <form method="POST" action="{{ route('verification.send') }}">
-                @csrf
-
-                <p class="text-sm text-theme-secondary-600 lg:no-wrap-span-children">
-                    @lang('fortify::auth.verify.resend_verification')
-                </p>
-            </form>
-        </div>
-    </div>
+    <livewire:auth.verify-email />
 @endsection
+

resources/views/components/auth-verify-email.blade.php

@@ -0,0 +1,28 @@
+<div class="flex max-w-xl p-8 mx-auto my-6 bg-white rounded-lg">
+    <div class="flex flex-col w-full text-center space-y-6">
+        <div class="space-y-4">
+            <h1>@lang('fortify::auth.verify.page_header')</h1>
+
+            <p>@lang('fortify::auth.verify.link_description')</p>
+        </div>
+
+        <img class="mb-5 mx-12" src="/images/auth/verify-email.svg" />
+
+        <form wire:click.prevent="resend" wire:poll>
+            <p class="text-sm text-theme-secondary-600 lg:no-wrap-span-children">
+                <span>@lang('fortify::auth.verify.line_1')</span>
+                <span>@lang('fortify::auth.verify.line_2')</span>
+
+                @if($this->rateLimitReached())
+                    <span class="link" data-tippy-content="@lang('fortify::messages.resend_email_verification_limit')">
+                        @lang('fortify::actions.resend_email_verification')
+                    </span>
+                @else
+                    <button wire:loading.attr="disabled" type="submit" class="link">
+                        @lang('fortify::actions.resend_email_verification')
+                    </button>
+                @endif
+            </p>
+        </form>
+    </div>
+</div>

src/Components/VerifyEmail.php

@@ -0,0 +1,42 @@
+<?php
+
+declare(strict_types=1);
+
+namespace ARKEcosystem\Fortify\Components;
+
+use DanHarrin\LivewireRateLimiting\Exceptions\TooManyRequestsException;
+use DanHarrin\LivewireRateLimiting\WithRateLimiting;
+use Illuminate\Support\Facades\RateLimiter;
+use Illuminate\View\View;
+use Laravel\Fortify\Http\Controllers\EmailVerificationNotificationController;
+use Livewire\Component;
+
+class VerifyEmail extends Component
+{
+    use WithRateLimiting;
+
+    private const MAX_ATTEMPTS = 1;
+
+    private const DECAY_SECONDS = 5 * 60;
+
+    public function render(): View
+    {
+        return view('ark-fortify::components.auth-verify-email');
+    }
+
+    public function resend(): void
+    {
+        try {
+            $this->rateLimit(self::MAX_ATTEMPTS, self::DECAY_SECONDS);
+        } catch (TooManyRequestsException $e) {
+            return;
+        }
+
+        (new EmailVerificationNotificationController())->store(request());
+    }
+
+    public function rateLimitReached(): bool
+    {
+        return RateLimiter::tooManyAttempts($this->getRateLimitKey('resend'), self::MAX_ATTEMPTS);
+    }
+}

src/FortifyServiceProvider.php

@@ -20,6 +20,7 @@
 use ARKEcosystem\Fortify\Components\UpdateProfileInformationForm;
 use ARKEcosystem\Fortify\Components\UpdateProfilePhotoForm;
 use ARKEcosystem\Fortify\Components\UpdateTimezoneForm;
+use ARKEcosystem\Fortify\Components\VerifyEmail;
 use ARKEcosystem\Fortify\Http\Responses\FailedPasswordResetLinkRequestResponse as FortifyFailedPasswordResetLinkRequestResponse;
 use ARKEcosystem\Fortify\Http\Responses\SuccessfulPasswordResetLinkRequestResponse as FortifySuccessfulPasswordResetLinkRequestResponse;
 use ARKEcosystem\Fortify\Responses\FailedTwoFactorLoginResponse;
@@ -130,6 +131,7 @@ public function registerLivewireComponents(): void
         Livewire::component('auth.register-form', RegisterForm::class);
         Livewire::component('auth.reset-password-form', ResetPasswordForm::class);
         Livewire::component('newsletter.footer-subscription-form', FooterEmailSubscriptionForm::class);
+        Livewire::component('auth.verify-email', VerifyEmail::class);
     }
 
     /**

tests/Components/VerifyEmailTest.php

@@ -0,0 +1,27 @@
+<?php
+
+declare(strict_types=1);
+
+use ARKEcosystem\Fortify\Components\VerifyEmail;
+use Livewire\Livewire;
+
+use function Tests\createUserModel;
+
+it('can resend a verification email', function (): void {
+    Livewire::actingAs(createUserModel())
+        ->test(VerifyEmail::class)
+        ->call('resend')
+        ->assertDontSee(trans('fortify::messages.resend_email_verification_limit'));
+});
+
+it('can resend a verification email once every 5 minutes', function (): void {
+    $component = Livewire::actingAs(createUserModel())
+        ->test(VerifyEmail::class)
+        ->call('resend')
+        ->call('resend')
+        ->assertSee(trans('fortify::messages.resend_email_verification_limit'));
+
+    $this->travel(6)->minutes();
+
+    $component->call('$refresh')->assertDontSee(trans('fortify::messages.resend_email_verification_limit'));
+});