From 185282ff5484786dc89a1dfc8f3765c31410d13d Mon Sep 17 00:00:00 2001
From: Your Name <you@example.com>
Date: Sat, 31 Jan 2026 14:07:48 +1030
Subject: [PATCH 1/5] fix: set chmod 755 on avatars-temp directory creation

Fixes permission denied error on subsequent Docker builds
---
 app/Services/AvatarService.php | 6 +++++-
 1 file changed, 5 insertions(+), 1 deletion(-)

diff --git a/app/Services/AvatarService.php b/app/Services/AvatarService.php
index 4ecb2464..875a7d5e 100644
--- a/app/Services/AvatarService.php
+++ b/app/Services/AvatarService.php
@@ -113,7 +113,11 @@ private static function processImage($avatarFile, int $profileId): string
         $tempFileName = 'avatar-'.$profileId.'-'.time().'.jpg';
         $tempPath = storage_path('app/avatars-temp/'.$tempFileName);
 
-        Storage::disk('local')->makeDirectory('avatars-temp');
+        $dirPath = storage_path('app/avatars-temp');
+        if (! is_dir($dirPath)) {
+            Storage::disk('local')->makeDirectory('avatars-temp');
+            chmod($dirPath, 0755);
+        }
 
         Image::read($avatarFile)
             ->cover(300, 300)

From feb2181e6a02b48d1d0274b1cbacfc742e8838a3 Mon Sep 17 00:00:00 2001
From: Your Name <you@example.com>
Date: Sat, 31 Jan 2026 14:51:02 +1030
Subject: [PATCH 2/5] fix: streamline email verification flow after login

- Keep user logged in when email verification is needed (no logout)
- Auto-send verification code on login for unverified accounts
- Skip to code entry step directly (no re-entering credentials)
- Add /api/v1/auth/verify/email/status endpoint to check pending verification
- Extract sendVerificationCode into reusable static method
- Always resend existing code (handles spam/deleted emails)

Fixes #420
---
 app/Http/Controllers/Auth/LoginController.php |  33 ++++-
 .../EmailVerificationController.php           | 117 +++++++++++++-----
 resources/js/components/AuthModal.vue         |   2 +
 .../js/pages/auth/manuallyVerifyEmail.vue     |  29 ++++-
 routes/api.php                                |   1 +
 5 files changed, 148 insertions(+), 34 deletions(-)

diff --git a/app/Http/Controllers/Auth/LoginController.php b/app/Http/Controllers/Auth/LoginController.php
index 5df0a75b..ddc208e8 100644
--- a/app/Http/Controllers/Auth/LoginController.php
+++ b/app/Http/Controllers/Auth/LoginController.php
@@ -135,15 +135,44 @@ protected function sendLoginResponse(Request $request)
         $user->update(['last_ip' => $request->ip()]);
 
         if (! $user->email_verified_at) {
+            // Automatically send verification code before logging out
+            $existing = \App\Models\UserRegisterVerify::whereEmail($user->email)
+                ->whereNull('verified_at')
+                ->latest()
+                ->first();
+
+            if (! $existing) {
+                $sessionKey = \Illuminate\Support\Str::random(32);
+                $reg = new \App\Models\UserRegisterVerify;
+                $reg->session_key = $sessionKey;
+                $reg->email = $user->email;
+                $reg->verify_code = (string) app(\App\Support\VerificationCode::class)->generate();
+                $reg->ip_address = $request->ip();
+                $reg->user_agent = $request->userAgent();
+                $reg->email_last_sent_at = now();
+                $reg->save();
+
+                $request->session()->put('user:reg:session_key', $sessionKey);
+                $request->session()->put('user:reg:email', $reg->email);
+                $request->session()->put('user:reg:id', $reg->id);
+
+                \App\Jobs\Auth\NewAccountEmailVerifyJob::dispatch($reg);
+            } else {
+                $request->session()->put('user:reg:session_key', $existing->session_key);
+                $request->session()->put('user:reg:email', $existing->email);
+                $request->session()->put('user:reg:id', $existing->id);
+            }
+
             $this->guard()->logout();
 
-            $request->session()->invalidate();
-            $request->session()->regenerateToken();
+            $request->session()->regenerate();
 
             if ($request->expectsJson() || $request->ajax()) {
                 return response()->json([
                     'redirect' => url('/auth/verify-email'),
                     'message' => 'You need to verify your email.',
+                    'email' => $user->email,
+                    'verification_sent' => true,
                 ], 403);
             }
 
diff --git a/app/Http/Controllers/EmailVerificationController.php b/app/Http/Controllers/EmailVerificationController.php
index 9df93dda..ced51045 100644
--- a/app/Http/Controllers/EmailVerificationController.php
+++ b/app/Http/Controllers/EmailVerificationController.php
@@ -15,6 +15,54 @@
 
 class EmailVerificationController extends Controller
 {
+    /**
+     * Send verification code for a user (can be called from other controllers)
+     *
+     * Checks if there's already a pending (unverified) code for this user.
+     * If true, resends the same code (in case original was lost/spam).
+     * If false, creates a new code and sends the verification email.
+     *
+     * @return bool True if a new code was created, false if existing code was resent
+     */
+    public static function sendVerificationCode(User $user, Request $request): bool
+    {
+        // Check for existing pending verification code
+        $existing = UserRegisterVerify::whereEmail($user->email)
+            ->whereNull('verified_at')
+            ->latest()
+            ->first();
+
+        if ($existing) {
+            // Resend existing code (in case it was lost or caught in spam)
+            $request->session()->put('user:reg:session_key', $existing->session_key);
+            $request->session()->put('user:reg:email', $existing->email);
+            $request->session()->put('user:reg:id', $existing->id);
+
+            NewAccountEmailVerifyJob::dispatch($existing);
+
+            return false;
+        }
+
+        // Create new verification code and send email
+        $sessionKey = Str::random(32);
+        $reg = new UserRegisterVerify;
+        $reg->session_key = $sessionKey;
+        $reg->email = $user->email;
+        $reg->verify_code = (string) app(VerificationCode::class)->generate();
+        $reg->ip_address = $request->ip();
+        $reg->user_agent = $request->userAgent();
+        $reg->email_last_sent_at = now();
+        $reg->save();
+
+        $request->session()->put('user:reg:session_key', $sessionKey);
+        $request->session()->put('user:reg:email', $reg->email);
+        $request->session()->put('user:reg:id', $reg->id);
+
+        NewAccountEmailVerifyJob::dispatch($reg);
+
+        return true;
+    }
+
     /**
      * Initiate email verification - send code
      */
@@ -48,37 +96,7 @@ public function initiate(EmailManualVerificationRequest $request)
             ], 400);
         }
 
-        $existing = UserRegisterVerify::whereEmail($user->email)
-            ->whereNull('verified_at')
-            ->latest()
-            ->first();
-
-        if ($existing) {
-            $request->session()->put('user:reg:session_key', $existing->session_key);
-            $request->session()->put('user:reg:email', $existing->email);
-            $request->session()->put('user:reg:id', $existing->id);
-
-            return response()->json([
-                'message' => 'We have already sent a verification code to your email.',
-                'expires_in' => 900,
-            ]);
-        }
-
-        $sessionKey = Str::random(32);
-        $reg = new UserRegisterVerify;
-        $reg->session_key = $sessionKey;
-        $reg->email = $user->email;
-        $reg->verify_code = (string) app(VerificationCode::class)->generate();
-        $reg->ip_address = $request->ip();
-        $reg->user_agent = $request->userAgent();
-        $reg->email_last_sent_at = now();
-        $reg->save();
-
-        $request->session()->put('user:reg:session_key', $sessionKey);
-        $request->session()->put('user:reg:email', $reg->email);
-        $request->session()->put('user:reg:id', $reg->id);
-
-        NewAccountEmailVerifyJob::dispatch($reg);
+        self::sendVerificationCode($user, $request);
 
         return response()->json([
             'message' => 'Verification code sent to your email.',
@@ -217,4 +235,41 @@ public function resend(Request $request)
             'message' => 'New verification code sent to your email.',
         ]);
     }
+
+    /**
+     * Check if there's a pending email verification session
+     */
+    public function status(Request $request)
+    {
+        $sEmail = $request->session()->get('user:reg:email');
+        $sKey = $request->session()->get('user:reg:session_key');
+        $sId = $request->session()->get('user:reg:id');
+
+        if (! $sEmail || ! $sKey || ! $sId) {
+            return response()->json([
+                'has_pending_verification' => false,
+            ]);
+        }
+
+        // Verify the session is still valid
+        $verify = UserRegisterVerify::where('session_key', $sKey)
+            ->whereNull('verified_at')
+            ->find($sId);
+
+        if (! $verify) {
+            return response()->json([
+                'has_pending_verification' => false,
+            ]);
+        }
+
+        // Mask the email for privacy (show first 2 chars and domain)
+        $emailParts = explode('@', $sEmail);
+        $maskedEmail = substr($emailParts[0], 0, 2).'***@'.$emailParts[1];
+
+        return response()->json([
+            'has_pending_verification' => true,
+            'email' => $sEmail,
+            'masked_email' => $maskedEmail,
+        ]);
+    }
 }
diff --git a/resources/js/components/AuthModal.vue b/resources/js/components/AuthModal.vue
index 3d1a278d..7c7ee518 100644
--- a/resources/js/components/AuthModal.vue
+++ b/resources/js/components/AuthModal.vue
@@ -1427,6 +1427,8 @@ const handleLogin = async () => {
         if (res.data.has_2fa) {
             currentMode.value = 'two-factor'
             setSuccess(t('common.pleaseEnterYour2FACode'))
+        } else if (res.data.verification_sent) {
+            window.location.href = '/auth/verify-email'
         } else if (res.data.redirect) {
             window.location.href = res.data.redirect
         } else {
diff --git a/resources/js/pages/auth/manuallyVerifyEmail.vue b/resources/js/pages/auth/manuallyVerifyEmail.vue
index 9131d6c7..b06d9b9d 100644
--- a/resources/js/pages/auth/manuallyVerifyEmail.vue
+++ b/resources/js/pages/auth/manuallyVerifyEmail.vue
@@ -4,6 +4,13 @@
             class="grid min-h-full w-full place-items-center bg-white dark:bg-slate-950 px-6 py-24 sm:py-32 lg:px-8"
         >
             <div class="w-full max-w-md">
+                <!-- Loading state while checking for pending verification -->
+                <div v-if="isCheckingStatus" class="flex flex-col items-center justify-center py-12">
+                    <i class="bx bx-loader-alt animate-spin text-4xl text-blue-600 dark:text-blue-400 mb-4"></i>
+                    <p class="text-gray-600 dark:text-gray-400">{{ t('common.loading') }}...</p>
+                </div>
+
+                <template v-else>
                 <div class="text-center mb-8">
                     <div
                         class="mx-auto h-12 w-12 rounded-full bg-blue-100 dark:bg-blue-900 flex items-center justify-center mb-4"
@@ -319,13 +326,14 @@
                         {{ t('common.thisVerificationLinkWillExpireIn24Hours') }}
                     </p>
                 </div>
+                </template>
             </div>
         </div>
     </FullLayout>
 </template>
 
 <script setup>
-import { inject, ref, computed } from 'vue'
+import { inject, ref, computed, onMounted } from 'vue'
 import { useRouter } from 'vue-router'
 import FullLayout from '@/layouts/FullLayout.vue'
 import { useAlertModal } from '@/composables/useAlertModal.js'
@@ -360,6 +368,25 @@ const successMessage = ref('')
 const showPassword = ref(false)
 const resendCooldown = ref(0)
 const resendTimer = ref(null)
+const isCheckingStatus = ref(true)
+
+// Check for pending verification session on mount
+onMounted(async () => {
+    try {
+        const response = await axiosInstance.get('/api/v1/auth/verify/email/status')
+        if (response.data.has_pending_verification) {
+            form.value.email = response.data.email
+            currentStep.value = 2
+            successMessage.value = t('common.verificationCodeSentToYourEmail')
+            startResendCooldown()
+        }
+    } catch (err) {
+        // If status check fails, just show step 1
+        console.error('Failed to check verification status:', err)
+    } finally {
+        isCheckingStatus.value = false
+    }
+})
 
 const canSubmitStep1 = computed(() => {
     return form.value.email && form.value.password && !isVerifying.value
diff --git a/routes/api.php b/routes/api.php
index aa15423f..6d10d732 100644
--- a/routes/api.php
+++ b/routes/api.php
@@ -98,6 +98,7 @@
     Route::post('/v1/auth/verify/email', [EmailVerificationController::class, 'initiate']);
     Route::post('/v1/auth/verify/email/confirm', [EmailVerificationController::class, 'confirm']);
     Route::post('/v1/auth/verify/email/resend', [EmailVerificationController::class, 'resend']);
+    Route::get('/v1/auth/verify/email/status', [EmailVerificationController::class, 'status']);
 
     // Studio
     Route::get('/v1/studio/posts', [StudioController::class, 'getPosts'])->middleware('auth:web,api');

From 7afe018c49eb26ef3688bb2c4128aff8448561c9 Mon Sep 17 00:00:00 2001
From: Your Name <you@example.com>
Date: Sat, 31 Jan 2026 14:53:04 +1030
Subject: [PATCH 3/5] fix

---
 app/Http/Controllers/Auth/LoginController.php | 42 +++----------------
 1 file changed, 5 insertions(+), 37 deletions(-)

diff --git a/app/Http/Controllers/Auth/LoginController.php b/app/Http/Controllers/Auth/LoginController.php
index ddc208e8..3dc98ca6 100644
--- a/app/Http/Controllers/Auth/LoginController.php
+++ b/app/Http/Controllers/Auth/LoginController.php
@@ -135,50 +135,18 @@ protected function sendLoginResponse(Request $request)
         $user->update(['last_ip' => $request->ip()]);
 
         if (! $user->email_verified_at) {
-            // Automatically send verification code before logging out
-            $existing = \App\Models\UserRegisterVerify::whereEmail($user->email)
-                ->whereNull('verified_at')
-                ->latest()
-                ->first();
-
-            if (! $existing) {
-                $sessionKey = \Illuminate\Support\Str::random(32);
-                $reg = new \App\Models\UserRegisterVerify;
-                $reg->session_key = $sessionKey;
-                $reg->email = $user->email;
-                $reg->verify_code = (string) app(\App\Support\VerificationCode::class)->generate();
-                $reg->ip_address = $request->ip();
-                $reg->user_agent = $request->userAgent();
-                $reg->email_last_sent_at = now();
-                $reg->save();
-
-                $request->session()->put('user:reg:session_key', $sessionKey);
-                $request->session()->put('user:reg:email', $reg->email);
-                $request->session()->put('user:reg:id', $reg->id);
-
-                \App\Jobs\Auth\NewAccountEmailVerifyJob::dispatch($reg);
-            } else {
-                $request->session()->put('user:reg:session_key', $existing->session_key);
-                $request->session()->put('user:reg:email', $existing->email);
-                $request->session()->put('user:reg:id', $existing->id);
-            }
-
-            $this->guard()->logout();
-
-            $request->session()->regenerate();
+            // Send verification code - user stays logged in
+            \App\Http\Controllers\EmailVerificationController::sendVerificationCode($user, $request);
 
             if ($request->expectsJson() || $request->ajax()) {
                 return response()->json([
                     'redirect' => url('/auth/verify-email'),
-                    'message' => 'You need to verify your email.',
-                    'email' => $user->email,
+                    'message' => 'Please verify your email to continue.',
                     'verification_sent' => true,
-                ], 403);
+                ]);
             }
 
-            return redirect()->route('login')->withErrors([
-                $this->username() => 'You need to verify your email.',
-            ]);
+            return redirect('/auth/verify-email');
         }
 
         if ((int) $user->status === 6) {

From 071ebe02260b230edd98cfe48ec878a0a42f923b Mon Sep 17 00:00:00 2001
From: Your Name <you@example.com>
Date: Sat, 31 Jan 2026 14:58:41 +1030
Subject: [PATCH 4/5] Revert "fix: set chmod 755 on avatars-temp directory
 creation"

This reverts commit 185282ff5484786dc89a1dfc8f3765c31410d13d.
---
 app/Services/AvatarService.php | 6 +-----
 1 file changed, 1 insertion(+), 5 deletions(-)

diff --git a/app/Services/AvatarService.php b/app/Services/AvatarService.php
index 875a7d5e..4ecb2464 100644
--- a/app/Services/AvatarService.php
+++ b/app/Services/AvatarService.php
@@ -113,11 +113,7 @@ private static function processImage($avatarFile, int $profileId): string
         $tempFileName = 'avatar-'.$profileId.'-'.time().'.jpg';
         $tempPath = storage_path('app/avatars-temp/'.$tempFileName);
 
-        $dirPath = storage_path('app/avatars-temp');
-        if (! is_dir($dirPath)) {
-            Storage::disk('local')->makeDirectory('avatars-temp');
-            chmod($dirPath, 0755);
-        }
+        Storage::disk('local')->makeDirectory('avatars-temp');
 
         Image::read($avatarFile)
             ->cover(300, 300)

From 70d3c98bb85defd2d79a77cc4ac63fb824a3e911 Mon Sep 17 00:00:00 2001
From: Your Name <you@example.com>
Date: Sat, 31 Jan 2026 17:35:06 +1030
Subject: [PATCH 5/5] Prettier

---
 .../js/pages/auth/manuallyVerifyEmail.vue     | 563 +++++++++---------
 1 file changed, 287 insertions(+), 276 deletions(-)

diff --git a/resources/js/pages/auth/manuallyVerifyEmail.vue b/resources/js/pages/auth/manuallyVerifyEmail.vue
index b06d9b9d..9ecc55e7 100644
--- a/resources/js/pages/auth/manuallyVerifyEmail.vue
+++ b/resources/js/pages/auth/manuallyVerifyEmail.vue
@@ -5,327 +5,338 @@
         >
             <div class="w-full max-w-md">
                 <!-- Loading state while checking for pending verification -->
-                <div v-if="isCheckingStatus" class="flex flex-col items-center justify-center py-12">
-                    <i class="bx bx-loader-alt animate-spin text-4xl text-blue-600 dark:text-blue-400 mb-4"></i>
+                <div
+                    v-if="isCheckingStatus"
+                    class="flex flex-col items-center justify-center py-12"
+                >
+                    <i
+                        class="bx bx-loader-alt animate-spin text-4xl text-blue-600 dark:text-blue-400 mb-4"
+                    ></i>
                     <p class="text-gray-600 dark:text-gray-400">{{ t('common.loading') }}...</p>
                 </div>
 
                 <template v-else>
-                <div class="text-center mb-8">
-                    <div
-                        class="mx-auto h-12 w-12 rounded-full bg-blue-100 dark:bg-blue-900 flex items-center justify-center mb-4"
-                    >
-                        <i class="bx bx-envelope text-blue-600 dark:text-blue-400 text-[24px]"></i>
+                    <div class="text-center mb-8">
+                        <div
+                            class="mx-auto h-12 w-12 rounded-full bg-blue-100 dark:bg-blue-900 flex items-center justify-center mb-4"
+                        >
+                            <i
+                                class="bx bx-envelope text-blue-600 dark:text-blue-400 text-[24px]"
+                            ></i>
+                        </div>
+                        <h1 class="text-2xl font-bold tracking-tight text-gray-900 dark:text-white">
+                            {{ getTitle() }}
+                        </h1>
+                        <p class="mt-2 text-sm text-gray-600 dark:text-gray-400">
+                            {{ getSubtitle() }}
+                        </p>
                     </div>
-                    <h1 class="text-2xl font-bold tracking-tight text-gray-900 dark:text-white">
-                        {{ getTitle() }}
-                    </h1>
-                    <p class="mt-2 text-sm text-gray-600 dark:text-gray-400">
-                        {{ getSubtitle() }}
-                    </p>
-                </div>
 
-                <div
-                    v-if="verificationStatus === 'success'"
-                    class="bg-white dark:bg-slate-900 border border-gray-100 dark:border-gray-800 shadow-lg rounded-lg p-6 text-center"
-                >
                     <div
-                        class="mx-auto h-16 w-16 rounded-full bg-green-100 dark:bg-green-900 flex items-center justify-center mb-4"
+                        v-if="verificationStatus === 'success'"
+                        class="bg-white dark:bg-slate-900 border border-gray-100 dark:border-gray-800 shadow-lg rounded-lg p-6 text-center"
                     >
-                        <i class="bx bx-check text-green-600 dark:text-green-400 text-[32px]"></i>
-                    </div>
+                        <div
+                            class="mx-auto h-16 w-16 rounded-full bg-green-100 dark:bg-green-900 flex items-center justify-center mb-4"
+                        >
+                            <i
+                                class="bx bx-check text-green-600 dark:text-green-400 text-[32px]"
+                            ></i>
+                        </div>
 
-                    <h2 class="text-xl font-semibold text-gray-900 dark:text-white mb-2">
-                        {{ t('common.emailVerifiedSuccessfully') }}
-                    </h2>
-                    <p class="text-gray-600 dark:text-gray-400 mb-6">
-                        {{ t('common.yourEmailHasBeenVerifiedYouCanNowSignIn') }}
-                    </p>
+                        <h2 class="text-xl font-semibold text-gray-900 dark:text-white mb-2">
+                            {{ t('common.emailVerifiedSuccessfully') }}
+                        </h2>
+                        <p class="text-gray-600 dark:text-gray-400 mb-6">
+                            {{ t('common.yourEmailHasBeenVerifiedYouCanNowSignIn') }}
+                        </p>
 
-                    <router-link
-                        to="/login"
-                        class="flex justify-center px-4 py-3 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors font-medium cursor-pointer"
-                    >
-                        {{ t('common.continueToLogin') }}
-                    </router-link>
-                </div>
-
-                <div
-                    v-else-if="verificationStatus === 'error'"
-                    class="bg-white dark:bg-slate-900 border border-gray-100 dark:border-gray-800 shadow-lg rounded-lg p-6 text-center"
-                >
-                    <div
-                        class="mx-auto h-16 w-16 rounded-full bg-red-100 dark:bg-red-900 flex items-center justify-center mb-4"
-                    >
-                        <i class="bx bx-x text-red-600 dark:text-red-400 text-[32px]"></i>
-                    </div>
-                    <h2 class="text-xl font-semibold text-gray-900 dark:text-white mb-2">
-                        {{ t('common.verificationFailed') }}
-                    </h2>
-                    <p class="text-gray-600 dark:text-gray-400 mb-6">
-                        {{ errorMessage }}
-                    </p>
-                    <div class="space-y-3">
-                        <button
-                            v-if="currentStep === 2"
-                            @click="resendVerification"
-                            :disabled="isResending || resendCooldown > 0"
-                            class="w-full px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 disabled:bg-gray-400 transition-colors font-medium cursor-pointer"
+                        <router-link
+                            to="/login"
+                            class="flex justify-center px-4 py-3 bg-blue-600 text-white rounded-lg hover:bg-blue-700 transition-colors font-medium cursor-pointer"
                         >
-                            {{
-                                isResending
-                                    ? t('settings.sendingDotDotDot')
-                                    : resendCooldown > 0
-                                      ? `${t('common.resendIn')} ${resendCooldown}s`
-                                      : t('common.resendVerificationEmail')
-                            }}
-                        </button>
-                        <button
-                            @click="goToLogin"
-                            class="w-full px-4 py-2 border border-gray-300 text-gray-700 dark:text-gray-300 dark:border-gray-600 rounded-lg hover:bg-gray-50 dark:hover:bg-gray-800 transition-colors font-medium cursor-pointer"
-                        >
-                            {{ t('common.backToLogin') }}
-                        </button>
+                            {{ t('common.continueToLogin') }}
+                        </router-link>
                     </div>
-                </div>
 
-                <div
-                    v-else-if="currentStep === 1"
-                    class="bg-white dark:bg-slate-900 border border-gray-100 dark:border-gray-800 shadow-lg rounded-lg p-6"
-                >
-                    <Transition
-                        enter-active-class="duration-300 ease-out"
-                        enter-from-class="opacity-0 transform -translate-y-2"
-                        enter-to-class="opacity-100 transform translate-y-0"
-                        leave-active-class="duration-200 ease-in"
-                        leave-from-class="opacity-100 transform translate-y-0"
-                        leave-to-class="opacity-0 transform -translate-y-2"
+                    <div
+                        v-else-if="verificationStatus === 'error'"
+                        class="bg-white dark:bg-slate-900 border border-gray-100 dark:border-gray-800 shadow-lg rounded-lg p-6 text-center"
                     >
                         <div
-                            v-if="error"
-                            class="mb-6 rounded-lg bg-red-50 dark:bg-red-900/20 border border-red-200 dark:border-red-800 p-4"
+                            class="mx-auto h-16 w-16 rounded-full bg-red-100 dark:bg-red-900 flex items-center justify-center mb-4"
                         >
-                            <p class="text-sm text-red-700 dark:text-red-400">
-                                {{ error }}
-                            </p>
+                            <i class="bx bx-x text-red-600 dark:text-red-400 text-[32px]"></i>
+                        </div>
+                        <h2 class="text-xl font-semibold text-gray-900 dark:text-white mb-2">
+                            {{ t('common.verificationFailed') }}
+                        </h2>
+                        <p class="text-gray-600 dark:text-gray-400 mb-6">
+                            {{ errorMessage }}
+                        </p>
+                        <div class="space-y-3">
+                            <button
+                                v-if="currentStep === 2"
+                                @click="resendVerification"
+                                :disabled="isResending || resendCooldown > 0"
+                                class="w-full px-4 py-2 bg-blue-600 text-white rounded-lg hover:bg-blue-700 disabled:bg-gray-400 transition-colors font-medium cursor-pointer"
+                            >
+                                {{
+                                    isResending
+                                        ? t('settings.sendingDotDotDot')
+                                        : resendCooldown > 0
+                                          ? `${t('common.resendIn')} ${resendCooldown}s`
+                                          : t('common.resendVerificationEmail')
+                                }}
+                            </button>
+                            <button
+                                @click="goToLogin"
+                                class="w-full px-4 py-2 border border-gray-300 text-gray-700 dark:text-gray-300 dark:border-gray-600 rounded-lg hover:bg-gray-50 dark:hover:bg-gray-800 transition-colors font-medium cursor-pointer"
+                            >
+                                {{ t('common.backToLogin') }}
+                            </button>
                         </div>
-                    </Transition>
+                    </div>
 
-                    <form @submit.prevent="handleInitiateVerification">
-                        <div class="space-y-4 mb-6">
+                    <div
+                        v-else-if="currentStep === 1"
+                        class="bg-white dark:bg-slate-900 border border-gray-100 dark:border-gray-800 shadow-lg rounded-lg p-6"
+                    >
+                        <Transition
+                            enter-active-class="duration-300 ease-out"
+                            enter-from-class="opacity-0 transform -translate-y-2"
+                            enter-to-class="opacity-100 transform translate-y-0"
+                            leave-active-class="duration-200 ease-in"
+                            leave-from-class="opacity-100 transform translate-y-0"
+                            leave-to-class="opacity-0 transform -translate-y-2"
+                        >
                             <div
-                                class="bg-orange-50 dark:bg-orange-900/20 border border-orange-200 dark:border-orange-800 rounded-lg p-4 mb-6"
+                                v-if="error"
+                                class="mb-6 rounded-lg bg-red-50 dark:bg-red-900/20 border border-red-200 dark:border-red-800 p-4"
                             >
-                                <div class="flex items-start gap-3">
-                                    <i class="bx bx-error text-orange-500 text-[20px] mt-0.5"></i>
-                                    <div>
-                                        <h4
-                                            class="font-medium text-orange-800 dark:text-orange-200 mb-1"
-                                        >
-                                            {{ t('common.securityNotice') }}
-                                        </h4>
-                                        <p class="text-sm text-orange-700 dark:text-orange-300">
-                                            {{ t('common.onlyVerifyIfYouRequestedThis') }}
-                                        </p>
-                                    </div>
-                                </div>
+                                <p class="text-sm text-red-700 dark:text-red-400">
+                                    {{ error }}
+                                </p>
                             </div>
+                        </Transition>
 
-                            <div>
-                                <label
-                                    class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2"
+                        <form @submit.prevent="handleInitiateVerification">
+                            <div class="space-y-4 mb-6">
+                                <div
+                                    class="bg-orange-50 dark:bg-orange-900/20 border border-orange-200 dark:border-orange-800 rounded-lg p-4 mb-6"
                                 >
-                                    {{ t('common.email') }}
-                                </label>
-                                <input
-                                    v-model="form.email"
-                                    type="email"
-                                    required
-                                    class="w-full px-4 py-3 rounded-lg border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-800 text-gray-900 dark:text-white placeholder-gray-500 dark:placeholder-gray-400 focus:border-blue-500 dark:focus:border-blue-400 focus:ring-2 focus:ring-blue-500/20 dark:focus:ring-blue-400/20 transition-colors"
-                                    :placeholder="t('common.enterYourEmail')"
-                                />
-                            </div>
+                                    <div class="flex items-start gap-3">
+                                        <i
+                                            class="bx bx-error text-orange-500 text-[20px] mt-0.5"
+                                        ></i>
+                                        <div>
+                                            <h4
+                                                class="font-medium text-orange-800 dark:text-orange-200 mb-1"
+                                            >
+                                                {{ t('common.securityNotice') }}
+                                            </h4>
+                                            <p class="text-sm text-orange-700 dark:text-orange-300">
+                                                {{ t('common.onlyVerifyIfYouRequestedThis') }}
+                                            </p>
+                                        </div>
+                                    </div>
+                                </div>
 
-                            <div>
-                                <label
-                                    class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2"
-                                >
-                                    {{ t('common.password') }}
-                                </label>
-                                <div class="relative">
+                                <div>
+                                    <label
+                                        class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2"
+                                    >
+                                        {{ t('common.email') }}
+                                    </label>
                                     <input
-                                        v-model="form.password"
-                                        :type="showPassword ? 'text' : 'password'"
+                                        v-model="form.email"
+                                        type="email"
                                         required
-                                        class="w-full px-4 py-3 pr-12 rounded-lg border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-800 text-gray-900 dark:text-white placeholder-gray-500 dark:placeholder-gray-400 focus:border-blue-500 dark:focus:border-blue-400 focus:ring-2 focus:ring-blue-500/20 dark:focus:ring-blue-400/20 transition-colors"
-                                        :placeholder="t('common.enterYourPassword')"
+                                        class="w-full px-4 py-3 rounded-lg border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-800 text-gray-900 dark:text-white placeholder-gray-500 dark:placeholder-gray-400 focus:border-blue-500 dark:focus:border-blue-400 focus:ring-2 focus:ring-blue-500/20 dark:focus:ring-blue-400/20 transition-colors"
+                                        :placeholder="t('common.enterYourEmail')"
                                     />
-                                    <button
-                                        type="button"
-                                        @click="showPassword = !showPassword"
-                                        class="absolute right-3 top-1/2 transform -translate-y-1/2 text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-200 transition-colors"
+                                </div>
+
+                                <div>
+                                    <label
+                                        class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2"
                                     >
-                                        <i
-                                            :class="showPassword ? 'bx bx-show' : 'bx bx-hide'"
-                                            class="text-xl"
-                                        ></i>
-                                    </button>
+                                        {{ t('common.password') }}
+                                    </label>
+                                    <div class="relative">
+                                        <input
+                                            v-model="form.password"
+                                            :type="showPassword ? 'text' : 'password'"
+                                            required
+                                            class="w-full px-4 py-3 pr-12 rounded-lg border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-800 text-gray-900 dark:text-white placeholder-gray-500 dark:placeholder-gray-400 focus:border-blue-500 dark:focus:border-blue-400 focus:ring-2 focus:ring-blue-500/20 dark:focus:ring-blue-400/20 transition-colors"
+                                            :placeholder="t('common.enterYourPassword')"
+                                        />
+                                        <button
+                                            type="button"
+                                            @click="showPassword = !showPassword"
+                                            class="absolute right-3 top-1/2 transform -translate-y-1/2 text-gray-500 dark:text-gray-400 hover:text-gray-700 dark:hover:text-gray-200 transition-colors"
+                                        >
+                                            <i
+                                                :class="showPassword ? 'bx bx-show' : 'bx bx-hide'"
+                                                class="text-xl"
+                                            ></i>
+                                        </button>
+                                    </div>
                                 </div>
                             </div>
-                        </div>
 
-                        <div class="flex justify-start mb-6">
-                            <template v-if="appCaptcha.provider === 'turnstile'">
-                                <CloudflareTurnstile
-                                    ref="turnstileRef"
-                                    :sitekey="appCaptcha.siteKey"
-                                    theme="auto"
-                                    @success="onCaptchaSuccess"
-                                    @error="onCaptchaError"
-                                    @expired="onCaptchaExpired"
-                                />
-                            </template>
-                            <template v-else-if="appCaptcha.provider === 'hcaptcha'">
-                                <HCaptcha
-                                    ref="hcaptchaRef"
-                                    :sitekey="appCaptcha.siteKey"
-                                    theme="auto"
-                                    @success="onCaptchaSuccess"
-                                    @error="onCaptchaError"
-                                    @expired="onCaptchaExpired"
-                                />
-                            </template>
-                        </div>
+                            <div class="flex justify-start mb-6">
+                                <template v-if="appCaptcha.provider === 'turnstile'">
+                                    <CloudflareTurnstile
+                                        ref="turnstileRef"
+                                        :sitekey="appCaptcha.siteKey"
+                                        theme="auto"
+                                        @success="onCaptchaSuccess"
+                                        @error="onCaptchaError"
+                                        @expired="onCaptchaExpired"
+                                    />
+                                </template>
+                                <template v-else-if="appCaptcha.provider === 'hcaptcha'">
+                                    <HCaptcha
+                                        ref="hcaptchaRef"
+                                        :sitekey="appCaptcha.siteKey"
+                                        theme="auto"
+                                        @success="onCaptchaSuccess"
+                                        @error="onCaptchaError"
+                                        @expired="onCaptchaExpired"
+                                    />
+                                </template>
+                            </div>
 
-                        <button
-                            type="submit"
-                            :disabled="!canSubmitStep1 || isVerifying"
-                            class="w-full px-4 py-3 bg-blue-600 text-white rounded-lg hover:bg-blue-700 disabled:bg-gray-400 cursor-pointer disabled:cursor-not-allowed transition-colors font-medium flex items-center justify-center gap-2"
-                        >
-                            <i v-if="isVerifying" class="bx bx-loader-alt animate-spin"></i>
-                            <span>{{
-                                isVerifying
-                                    ? t('settings.sendingDotDotDot')
-                                    : t('common.sendVerificationCode')
-                            }}</span>
-                        </button>
-
-                        <div class="mt-4 text-center">
-                            <router-link
-                                to="/login"
-                                class="text-sm text-gray-600 dark:text-gray-400 hover:text-gray-800 dark:hover:text-gray-200 underline cursor-pointer"
+                            <button
+                                type="submit"
+                                :disabled="!canSubmitStep1 || isVerifying"
+                                class="w-full px-4 py-3 bg-blue-600 text-white rounded-lg hover:bg-blue-700 disabled:bg-gray-400 cursor-pointer disabled:cursor-not-allowed transition-colors font-medium flex items-center justify-center gap-2"
                             >
-                                {{ t('common.cancelAndReturnToLogin') }}
-                            </router-link>
-                        </div>
-                    </form>
-                </div>
+                                <i v-if="isVerifying" class="bx bx-loader-alt animate-spin"></i>
+                                <span>{{
+                                    isVerifying
+                                        ? t('settings.sendingDotDotDot')
+                                        : t('common.sendVerificationCode')
+                                }}</span>
+                            </button>
 
-                <div
-                    v-else-if="currentStep === 2"
-                    class="bg-white dark:bg-slate-900 border border-gray-100 dark:border-gray-800 shadow-lg rounded-lg p-6"
-                >
-                    <Transition
-                        enter-active-class="duration-300 ease-out"
-                        enter-from-class="opacity-0 transform -translate-y-2"
-                        enter-to-class="opacity-100 transform translate-y-0"
-                        leave-active-class="duration-200 ease-in"
-                        leave-from-class="opacity-100 transform translate-y-0"
-                        leave-to-class="opacity-0 transform -translate-y-2"
+                            <div class="mt-4 text-center">
+                                <router-link
+                                    to="/login"
+                                    class="text-sm text-gray-600 dark:text-gray-400 hover:text-gray-800 dark:hover:text-gray-200 underline cursor-pointer"
+                                >
+                                    {{ t('common.cancelAndReturnToLogin') }}
+                                </router-link>
+                            </div>
+                        </form>
+                    </div>
+
+                    <div
+                        v-else-if="currentStep === 2"
+                        class="bg-white dark:bg-slate-900 border border-gray-100 dark:border-gray-800 shadow-lg rounded-lg p-6"
                     >
-                        <div
-                            v-if="error"
-                            class="mb-6 rounded-lg bg-red-50 dark:bg-red-900/20 border border-red-200 dark:border-red-800 p-4"
+                        <Transition
+                            enter-active-class="duration-300 ease-out"
+                            enter-from-class="opacity-0 transform -translate-y-2"
+                            enter-to-class="opacity-100 transform translate-y-0"
+                            leave-active-class="duration-200 ease-in"
+                            leave-from-class="opacity-100 transform translate-y-0"
+                            leave-to-class="opacity-0 transform -translate-y-2"
                         >
-                            <p class="text-sm text-red-700 dark:text-red-400">
-                                {{ error }}
-                            </p>
-                        </div>
-                    </Transition>
-
-                    <Transition
-                        enter-active-class="duration-300 ease-out"
-                        enter-from-class="opacity-0 transform -translate-y-2"
-                        enter-to-class="opacity-100 transform translate-y-0"
-                        leave-active-class="duration-200 ease-in"
-                        leave-from-class="opacity-100 transform translate-y-0"
-                        leave-to-class="opacity-0 transform -translate-y-2"
-                    >
-                        <div
-                            v-if="successMessage"
-                            class="mb-6 rounded-lg bg-green-50 dark:bg-green-900/20 border border-green-200 dark:border-green-800 p-4"
+                            <div
+                                v-if="error"
+                                class="mb-6 rounded-lg bg-red-50 dark:bg-red-900/20 border border-red-200 dark:border-red-800 p-4"
+                            >
+                                <p class="text-sm text-red-700 dark:text-red-400">
+                                    {{ error }}
+                                </p>
+                            </div>
+                        </Transition>
+
+                        <Transition
+                            enter-active-class="duration-300 ease-out"
+                            enter-from-class="opacity-0 transform -translate-y-2"
+                            enter-to-class="opacity-100 transform translate-y-0"
+                            leave-active-class="duration-200 ease-in"
+                            leave-from-class="opacity-100 transform translate-y-0"
+                            leave-to-class="opacity-0 transform -translate-y-2"
                         >
-                            <p class="text-sm text-green-700 dark:text-green-400">
-                                {{ successMessage }}
-                            </p>
-                        </div>
-                    </Transition>
-
-                    <form @submit.prevent="handleSubmitVerification">
-                        <div class="mb-6">
-                            <label
-                                class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2"
+                            <div
+                                v-if="successMessage"
+                                class="mb-6 rounded-lg bg-green-50 dark:bg-green-900/20 border border-green-200 dark:border-green-800 p-4"
                             >
-                                {{ t('common.verificationCode') }}
-                            </label>
-                            <input
-                                v-model="form.verificationCode"
-                                type="text"
-                                required
-                                maxlength="6"
-                                pattern="[0-9]{6}"
-                                class="w-full px-4 py-3 text-center text-2xl tracking-widest rounded-lg border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-800 text-gray-900 dark:text-white placeholder-gray-500 dark:placeholder-gray-400 focus:border-blue-500 dark:focus:border-blue-400 focus:ring-2 focus:ring-blue-500/20 dark:focus:ring-blue-400/20 transition-colors"
-                                placeholder="000000"
-                            />
-                            <p class="mt-2 text-sm text-gray-600 dark:text-gray-400">
-                                {{ t('common.enterTheSixDigitCodeSentTo') }}
-                                <span class="font-medium">{{ form.email }}</span>
-                            </p>
-                        </div>
+                                <p class="text-sm text-green-700 dark:text-green-400">
+                                    {{ successMessage }}
+                                </p>
+                            </div>
+                        </Transition>
 
-                        <div class="flex justify-between items-center mb-6">
-                            <button
-                                type="button"
-                                @click="resendVerification"
-                                :disabled="resendCooldown > 0 || isResending"
-                                class="text-sm text-blue-600 dark:text-blue-400 hover:text-blue-700 dark:hover:text-blue-300 disabled:text-gray-400 dark:disabled:text-gray-600 transition-colors cursor-pointer"
-                            >
-                                {{
-                                    resendCooldown > 0
-                                        ? `${t('common.resendIn')} ${resendCooldown}s`
-                                        : t('common.resendCode')
-                                }}
-                            </button>
-                        </div>
+                        <form @submit.prevent="handleSubmitVerification">
+                            <div class="mb-6">
+                                <label
+                                    class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2"
+                                >
+                                    {{ t('common.verificationCode') }}
+                                </label>
+                                <input
+                                    v-model="form.verificationCode"
+                                    type="text"
+                                    required
+                                    maxlength="6"
+                                    pattern="[0-9]{6}"
+                                    class="w-full px-4 py-3 text-center text-2xl tracking-widest rounded-lg border border-gray-300 dark:border-gray-600 bg-white dark:bg-gray-800 text-gray-900 dark:text-white placeholder-gray-500 dark:placeholder-gray-400 focus:border-blue-500 dark:focus:border-blue-400 focus:ring-2 focus:ring-blue-500/20 dark:focus:ring-blue-400/20 transition-colors"
+                                    placeholder="000000"
+                                />
+                                <p class="mt-2 text-sm text-gray-600 dark:text-gray-400">
+                                    {{ t('common.enterTheSixDigitCodeSentTo') }}
+                                    <span class="font-medium">{{ form.email }}</span>
+                                </p>
+                            </div>
 
-                        <button
-                            type="submit"
-                            :disabled="!canSubmitStep2 || isVerifying"
-                            class="w-full px-4 py-3 bg-blue-600 text-white rounded-lg hover:bg-blue-700 disabled:bg-gray-400 cursor-pointer disabled:cursor-not-allowed transition-colors font-medium flex items-center justify-center gap-2"
-                        >
-                            <i v-if="isVerifying" class="bx bx-loader-alt animate-spin"></i>
-                            <span>{{
-                                isVerifying ? t('common.verifying') : t('common.verifyEmail')
-                            }}</span>
-                        </button>
+                            <div class="flex justify-between items-center mb-6">
+                                <button
+                                    type="button"
+                                    @click="resendVerification"
+                                    :disabled="resendCooldown > 0 || isResending"
+                                    class="text-sm text-blue-600 dark:text-blue-400 hover:text-blue-700 dark:hover:text-blue-300 disabled:text-gray-400 dark:disabled:text-gray-600 transition-colors cursor-pointer"
+                                >
+                                    {{
+                                        resendCooldown > 0
+                                            ? `${t('common.resendIn')} ${resendCooldown}s`
+                                            : t('common.resendCode')
+                                    }}
+                                </button>
+                            </div>
 
-                        <div class="mt-4 text-center">
                             <button
-                                type="button"
-                                @click="goBackToStep1"
-                                class="text-sm text-gray-600 dark:text-gray-400 hover:text-gray-800 dark:hover:text-gray-200 underline cursor-pointer"
+                                type="submit"
+                                :disabled="!canSubmitStep2 || isVerifying"
+                                class="w-full px-4 py-3 bg-blue-600 text-white rounded-lg hover:bg-blue-700 disabled:bg-gray-400 cursor-pointer disabled:cursor-not-allowed transition-colors font-medium flex items-center justify-center gap-2"
                             >
-                                {{ t('common.useADifferentEmail') }}
+                                <i v-if="isVerifying" class="bx bx-loader-alt animate-spin"></i>
+                                <span>{{
+                                    isVerifying ? t('common.verifying') : t('common.verifyEmail')
+                                }}</span>
                             </button>
-                        </div>
-                    </form>
-                </div>
 
-                <div v-if="currentStep === 2" class="mt-6 text-center">
-                    <p class="text-xs text-gray-500 dark:text-gray-400">
-                        {{ t('common.thisVerificationLinkWillExpireIn24Hours') }}
-                    </p>
-                </div>
+                            <div class="mt-4 text-center">
+                                <button
+                                    type="button"
+                                    @click="goBackToStep1"
+                                    class="text-sm text-gray-600 dark:text-gray-400 hover:text-gray-800 dark:hover:text-gray-200 underline cursor-pointer"
+                                >
+                                    {{ t('common.useADifferentEmail') }}
+                                </button>
+                            </div>
+                        </form>
+                    </div>
+
+                    <div v-if="currentStep === 2" class="mt-6 text-center">
+                        <p class="text-xs text-gray-500 dark:text-gray-400">
+                            {{ t('common.thisVerificationLinkWillExpireIn24Hours') }}
+                        </p>
+                    </div>
                 </template>
             </div>
         </div>