[Feature] improve successfully seting 2FA (#38)

* Show notifications on (de)activating * Fix styling * Let user download their recovery codes * Fix styling --------- Co-authored-by: Baspa <[email protected]>
vormkracht10 · Sep 18, 2024 · cd12460 · cd12460
1 parent 2c48d25
commit cd12460
Show file tree

Hide file tree

Showing 4 changed files with 46 additions and 18 deletions.
diff --git a/resources/lang/en.json b/resources/lang/en.json
@@ -8,30 +8,34 @@
     "Confirm": "Confirm",
     "Deactivate": "Deactivate",
     "Email": "Email",
+    "From now on, you will be asked for a code when you log in.": "From now on, you will be asked for a code when you log in.",
+    "Hello": "Hello",
+    "If you didn't try to log in, please change your password immediately to protect your account.": "If you didn't try to log in, please change your password immediately to protect your account.",
+    "Kind regards": "Kind regards",
     "Login": "Login",
     "Or scan the QR code with your authenticator app": "Or scan the QR code with your authenticator app",
     "Password Confirmation": "Password Confirmation",
     "Recovery code": "Recovery code",
+    "Regenerate": "Regenerate",
     "Resend": "Resend",
     "Reset Password": "Reset Password",
     "SMS": "SMS",
     "Save these recovery codes in a secure place as they can be used to recover access to your account if you lose your device": "Save these recovery codes in a secure place as they can be used to recover access to your account if you lose your device",
     "Secure your account": "Secure your account",
     "Submit": "Submit",
     "Successfully resend the OTP code": "Successfully resend the OTP code",
+    "The provided two factor authentication code was invalid.": "The provided two factor authentication code was invalid.",
     "The secret key to setup the authenticator app is": "The secret key to setup the authenticator app is",
     "Two-Factor Authentication": "Two-Factor Authentication",
+    "Two-Factor Authentication activated": "Two-Factor Authentication activated",
+    "Two-Factor Authentication deactivated": "Two-Factor Authentication deactivated",
     "Two-Factor Authentication enabled": "Two-Factor Authentication enabled",
     "Verify": "Verify",
+    "You can disable two factor authentication at any time by using the button below": "You can disable two factor authentication at any time by using the button below",
+    "You can now log in without a code.": "You can now log in without a code.",
     "You have :amount options to confirm your identity, please choose one of the options below to continue": "You have :amount options to confirm your identity, please choose one of the options below to continue",
+    "You recently requested to log in to your account. To complete the login, please use the following two-factor authentication (2FA) code:": "You recently requested to log in to your account. To complete the login, please use the following two-factor authentication (2FA) code:",
     "Your account has been secured with two factor authentication": "Your account has been secured with two factor authentication",
     "Your security code for :app": "Your security code for :app",
-    "Your security code is": "Your security code is",
-    "The provided two factor authentication code was invalid.": "The provided two factor authentication code was invalid.",
-    "Generate new recovery codes": "Generate new recovery codes",
-    "You can disable two factor authentication at any time by using the button below": "You can disable two factor authentication at any time by using the button below",
-    "If you didn't try to log in, please change your password immediately to protect your account.": "If you didn't try to log in, please change your password immediately to protect your account.",
-    "You recently requested to log in to your account. To complete the login, please use the following two-factor authentication (2FA) code:": "You recently requested to log in to your account. To complete the login, please use the following two-factor authentication (2FA) code:",
-    "Kind regards": "Kind regards",
-    "Hello": "Hello"
+    "Your security code is": "Your security code is"
 }
diff --git a/resources/lang/nl.json b/resources/lang/nl.json
@@ -8,14 +8,15 @@
     "Confirm": "Bevestigen",
     "Deactivate": "Deactiveer",
     "Email": "E-mail",
-    "Generate new recovery codes": "Genereer nieuwe herstelcodes",
+    "From now on, you will be asked for a code when you log in.": "Vanaf nu wordt u gevraagd om een code in te voeren wanneer u inlogt.",
     "Hello": "Hallo",
     "If you didn't try to log in, please change your password immediately to protect your account.": "Als u niet heeft geprobeerd in te loggen, wijzig dan onmiddellijk uw wachtwoord om uw account te beschermen.",
     "Kind regards": "Met vriendelijke groet",
     "Login": "Inloggen",
     "Or scan the QR code with your authenticator app": "Of scan de QR-code met uw authenticator-app",
     "Password Confirmation": "Wachtwoordbevestiging",
     "Recovery code": "Herstelcode",
+    "Regenerate": "Opnieuw genereren",
     "Resend": "Opnieuw Verzenden",
     "Reset Password": "Wachtwoord Resetten",
     "SMS": "SMS",
@@ -26,10 +27,13 @@
     "The provided two factor authentication code was invalid.": "De verstrekte tweestapsverificatiecode was ongeldig.",
     "The secret key to setup the authenticator app is": "De geheime sleutel om de authenticator-app in te stellen is",
     "Two-Factor Authentication": "Tweestapsverificatie",
+    "Two-Factor Authentication activated": "Tweestapsverificatie geactiveerd",
+    "Two-Factor Authentication deactivated": "Tweestapsverificatie gedeactiveerd",
     "Two-Factor Authentication enabled": "Tweestapsverificatie ingeschakeld",
     "Two-Factor Authentication mandatory": "Tweestapsverificatie verplicht",
     "Verify": "Verifiëren",
     "You can disable two factor authentication at any time by using the button below": "U kunt tweestapsverificatie op elk moment uitschakelen met de onderstaande knop",
+    "You can now log in without a code.": "U kunt nu inloggen zonder code.",
     "You have :amount options to confirm your identity, please choose one of the options below to continue": "U heeft :amount opties om uw identiteit te bevestigen, kies een van de onderstaande opties om door te gaan",
     "You recently requested to log in to your account. To complete the login, please use the following two-factor authentication (2FA) code:": "U heeft onlangs gevraagd om in te loggen op uw account. Gebruik de volgende tweestapsverificatie (2FA) code om de login te voltooien:",
     "Your account has been secured with two factor authentication": "Uw account is beveiligd met tweestapsverificatie",

diff --git a/resources/views/two-factor.blade.php b/resources/views/two-factor.blade.php
@@ -4,7 +4,7 @@
         <div class="grid grid-cols-1 gap-x-8 gap-y-8 pt-10 md:grid-cols-3">
             <div class="pr-4 sm:px-0">
                 <h2 class="text-base font-semibold leading-7 dark:bg-white">
-                    {{ __('Secure your account') }} sdfsadfsa
+                    {{ __('Secure your account') }}
                 </h2>
 
                 @if (!$showingRecoveryCodes && $user->two_factor_confirmed_at)
@@ -94,6 +94,7 @@ class="font-bold mt-4">{{ decrypt($user->two_factor_secret) }}</span>
                                         @endif
 
                                         @if ($showingRecoveryCodes)
+                                            {{ $this->downloadAction() }}
                                             {{ $this->regenerateAction() }}
                                         @elseif ($showingConfirmation)
                                             {{ $this->confirmAction() }}

diff --git a/src/Pages/TwoFactor.php b/src/Pages/TwoFactor.php
@@ -80,13 +80,6 @@ public function mount(): void
         ) {
             app(DisableTwoFactorAuthentication::class)($this->user);
         }
-
-        if (session('status') == 'two-factor-authentication-enabled') {
-            Notification::make()
-                ->title(__('Two-Factor Authentication enabled'))
-                ->success()
-                ->send();
-        }
     }
 
     /**
@@ -206,13 +199,25 @@ protected function throwFailureValidationException(): never
     public function regenerateAction(): Action
     {
         return Action::make('regenerate')
-            ->label(__('Generate new recovery codes'))
+            ->label(__('Regenerate'))
             ->color('primary')
             ->action(function () {
                 $this->regenerateRecoveryCodes(app(GenerateNewRecoveryCodes::class));
             });
     }
 
+    public function downloadAction(): Action
+    {
+        return Action::make('download')
+            ->label(__('Download'))
+            ->color('primary')
+            ->action(function () {
+                return response()->streamDownload(function () {
+                    echo implode(PHP_EOL, $this->user->recoveryCodes());
+                }, 'recovery-codes.txt');
+            });
+    }
+
     public function disableAction(): Action
     {
         return Action::make('disable')
@@ -251,6 +256,13 @@ public function confirmTwoFactorAuthentication(ConfirmTwoFactorAuthentication $c
         try {
             $confirm($this->user, $this->otpCodeData['code']);
 
+            Notification::make()
+                ->title(__('Two-Factor Authentication activated'))
+                ->body(__('From now on, you will be asked for a code when you log in.'))
+                ->success()
+                ->duration(5000)
+                ->send();
+
             $this->showingQrCode = false;
             $this->showingConfirmation = false;
             $this->showingRecoveryCodes = true;
@@ -263,6 +275,13 @@ public function disableTwoFactorAuthentication(DisableTwoFactorAuthentication $d
     {
         $disable($this->user);
 
+        Notification::make()
+            ->title(__('Two-Factor Authentication deactivated'))
+            ->body(__('You can now log in without a code.'))
+            ->success()
+            ->duration(5000)
+            ->send();
+
         $this->showingQrCode = false;
         $this->showingConfirmation = false;
         $this->showingRecoveryCodes = false;