Add regenerateCodes method

resources/views/pages/user/two-factor-authentication/index.blade.php

@@ -54,16 +54,22 @@ private function generateCodes(){
         return $generateCodesFor(auth()->user());
     }
 
+    public function regenerateCodes(){
+        auth()->user()->forceFill([
+            'two_factor_recovery_codes' => encrypt(json_encode($this->generateCodes()))
+        ])->save();
+    }
+
     public function cancelTwoFactor(){
         auth()->user()->forceFill([
             'two_factor_secret' => null,
             'two_factor_recovery_codes' => null
         ])->save();
-        
+
         $this->enabled = false;
     }
 
-    #[On('submitCode')] 
+    #[On('submitCode')]
     public function submitCode($code)
     {
         $this->auth_code = $code;
@@ -100,15 +106,15 @@ public function disable(){
     @volt('user.two-factor-authentication')
         <section class="flex @container justify-center items-center w-screen h-screen">
 
-            <div x-data x-on:code-input-complete.window="$dispatch('submitCode', [event.detail.code])" class="flex flex-col mx-auto w-full max-w-sm text-sm">
+            <div x-data x-on:code-input-complete.window="$dispatch('submitCode', [event.detail.code])" class="flex flex-col w-full max-w-sm mx-auto text-sm">
                 @if($confirmed)
                     <div class="flex flex-col space-y-5">
                         <h2 class="text-xl">You have enabled two factor authentication.</h2>
                         <p>When two factor authentication is enabled, you will be prompted for a secure, random token during authentication. You may retrieve this token from your phone's Google Authenticator application.</p>    
                         @if($showRecoveryCodes)
                             <div class="relative">
                                 <p class="font-medium">Store these recovery codes in a secure password manager. They can be used to recover access to your account if your two factor authentication device is lost.</p>
-                                <div class="grid gap-1 px-4 py-4 mt-4 max-w-xl font-mono text-sm bg-gray-100 rounded-lg dark:bg-gray-900 dark:text-gray-100">
+                                <div class="grid max-w-xl gap-1 px-4 py-4 mt-4 font-mono text-sm bg-gray-100 rounded-lg dark:bg-gray-900 dark:text-gray-100">
 
                                     @foreach (json_decode(decrypt(auth()->user()->two_factor_recovery_codes), true) as $code)
                                         <div>{{ $code }}</div>
@@ -124,22 +130,22 @@ public function disable(){
 
                 @else
                     @if(!$enabled)
-                        <div class="flex relative flex-col justify-start items-start space-y-5">
+                        <div class="relative flex flex-col items-start justify-start space-y-5">
                             <h2 class="text-lg font-semibold">Two factor authentication disabled.</h2>
                             <p class="-translate-y-1">When you enabled 2FA, you will be prompted for a secure code during authentication. This code can be retrieved from your phone's Google Authenticator application.</p>
                             <div class="relative w-auto">
                                 <x-auth::elements.button type="primary" data-auth="enable-button" rounded="md" size="md" wire:click="enable" wire:target="enable">Enable</x-auth>
                             </div>
                         </div>
                     @else
-                        <div  class="relative space-y-5 w-full">
+                        <div  class="relative w-full space-y-5">
                             <div class="space-y-5">
                                 <h2 class="text-lg font-semibold">Finish enabling two factor authentication.</h2>
                                 <p>Enable two-factor authentication to receive a secure token from your phone's Google Authenticator during login.</p>
                                 <p class="font-bold">To enable two-factor authentication, scan the QR code or enter the setup key using your phone's authenticator app and provide the OTP code.</p>
                             </div>
 
-                            <div class="overflow-hidden relative mx-auto max-w-full rounded-lg border border-zinc-200">
+                            <div class="relative max-w-full mx-auto overflow-hidden border rounded-lg border-zinc-200">
                                 <img src="data:image/png;base64, {{ $qr }}" style="width:400px; height:auto" />
                             </div>