|
1 | 1 | @volt('verify-email') |
2 | | -<?php |
| 2 | +<div> |
| 3 | + <?php |
3 | 4 |
|
4 | | -new class extends \Livewire\Volt\Component { |
5 | | - public $status = ''; |
6 | | - |
7 | | - public function mount(): void |
8 | | - { |
9 | | - // If already verified, redirect immediately |
10 | | - if (auth()->user()->hasVerifiedEmail()) { |
11 | | - $this->redirectRoute('home'); |
12 | | - } |
13 | | - } |
14 | | - |
15 | | - public function checkVerification(): void |
16 | | - { |
17 | | - // Refresh the user model from database |
18 | | - auth()->user()->refresh(); |
| 5 | + new class extends \Livewire\Volt\Component { |
| 6 | + public $status = ''; |
19 | 7 | |
20 | | - if (auth()->user()->hasVerifiedEmail()) { |
21 | | - $this->redirectRoute('home'); |
| 8 | + public function mount(): void |
| 9 | + { |
| 10 | + // If already verified, redirect immediately |
| 11 | + if (auth()->user()->hasVerifiedEmail()) { |
| 12 | + $this->redirectRoute('home'); |
| 13 | + } |
22 | 14 | } |
23 | | - } |
24 | | - |
25 | | - public function resendVerification(): void |
26 | | - { |
27 | | - if (auth()->user()->hasVerifiedEmail()) { |
28 | | - $this->redirectRoute('home'); |
29 | | - return; |
| 15 | + |
| 16 | + public function checkVerification(): void |
| 17 | + { |
| 18 | + // Refresh the user model from database |
| 19 | + auth()->user()->refresh(); |
| 20 | + |
| 21 | + if (auth()->user()->hasVerifiedEmail()) { |
| 22 | + $this->redirectRoute('home'); |
| 23 | + } |
30 | 24 | } |
| 25 | + |
| 26 | + public function resendVerification(): void |
| 27 | + { |
| 28 | + if (auth()->user()->hasVerifiedEmail()) { |
| 29 | + $this->redirectRoute('home'); |
| 30 | + return; |
| 31 | + } |
31 | 32 |
|
32 | | - auth()->user()->sendEmailVerificationNotification(); |
| 33 | + auth()->user()->sendEmailVerificationNotification(); |
33 | 34 |
|
34 | | - $this->status = 'verification-link-sent'; |
35 | | - } |
36 | | -}; ?> |
| 35 | + $this->status = 'verification-link-sent'; |
| 36 | + } |
| 37 | + }; ?> |
37 | 38 |
|
38 | 39 |
|
39 | | -<x-layouts.main title="Verify Email Address"> |
40 | | - <div class="min-h-[calc(100vh-4rem)] flex items-center justify-center p-4 bg-base-200/50" wire:poll.3s="checkVerification"> |
41 | | - <div class="card bg-base-100 shadow-2xl border border-base-200 w-full max-w-md mx-auto"> |
42 | | - <div class="card-body p-6 sm:p-8"> |
43 | | - <!-- Header --> |
44 | | - <div class="text-center mb-5"> |
45 | | - <div class="w-12 h-12 bg-primary/10 rounded-2xl flex items-center justify-center text-primary mx-auto mb-3"> |
46 | | - <x-icon name="o-envelope" class="w-6 h-6" /> |
| 40 | + <x-layouts.main title="Verify Email Address"> |
| 41 | + <div class="min-h-[calc(100vh-4rem)] flex items-center justify-center p-4 bg-base-200/50" wire:poll.3s="checkVerification"> |
| 42 | + <div class="card bg-base-100 shadow-2xl border border-base-200 w-full max-w-md mx-auto"> |
| 43 | + <div class="card-body p-6 sm:p-8"> |
| 44 | + <!-- Header --> |
| 45 | + <div class="text-center mb-5"> |
| 46 | + <div class="w-12 h-12 bg-primary/10 rounded-2xl flex items-center justify-center text-primary mx-auto mb-3"> |
| 47 | + <x-icon name="o-envelope" class="w-6 h-6" /> |
| 48 | + </div> |
| 49 | + <h2 class="text-3xl font-bold tracking-tight text-base-content mb-1"> |
| 50 | + Verify Your Email |
| 51 | + </h2> |
| 52 | + <p class="text-base-content/60 text-sm"> |
| 53 | + We've sent a verification link to your email address |
| 54 | + </p> |
47 | 55 | </div> |
48 | | - <h2 class="text-3xl font-bold tracking-tight text-base-content mb-1"> |
49 | | - Verify Your Email |
50 | | - </h2> |
51 | | - <p class="text-base-content/60 text-sm"> |
52 | | - We've sent a verification link to your email address |
53 | | - </p> |
54 | | - </div> |
55 | 56 |
|
56 | | - <!-- Success Message --> |
57 | | - @if ($status === 'verification-link-sent' || session()->has('message')) |
58 | | - <x-alert icon="o-check-circle" class="alert-success mb-4 shadow-sm py-2 text-sm"> |
59 | | - A fresh verification link has been sent to your email address. |
60 | | - </x-alert> |
61 | | - @endif |
| 57 | + <!-- Success Message --> |
| 58 | + @if ($status === 'verification-link-sent' || session()->has('message')) |
| 59 | + <x-alert icon="o-check-circle" class="alert-success mb-4 shadow-sm py-2 text-sm"> |
| 60 | + A fresh verification link has been sent to your email address. |
| 61 | + </x-alert> |
| 62 | + @endif |
62 | 63 |
|
63 | | - <!-- Auto-checking indicator --> |
64 | | - <div class="alert alert-info mb-4"> |
65 | | - <x-icon name="o-arrow-path" class="w-5 h-5 animate-spin" /> |
66 | | - <div class="text-sm"> |
67 | | - <p class="font-medium">Checking verification status...</p> |
68 | | - <p class="text-xs opacity-75">This page will auto-refresh when you verify your email</p> |
| 64 | + <!-- Auto-checking indicator --> |
| 65 | + <div class="alert alert-info mb-4"> |
| 66 | + <x-icon name="o-arrow-path" class="w-5 h-5 animate-spin" /> |
| 67 | + <div class="text-sm"> |
| 68 | + <p class="font-medium">Checking verification status...</p> |
| 69 | + <p class="text-xs opacity-75">This page will auto-refresh when you verify your email</p> |
| 70 | + </div> |
69 | 71 | </div> |
70 | | - </div> |
71 | 72 |
|
72 | | - <!-- Info Box --> |
73 | | - <div class="alert alert-neutral mb-5"> |
74 | | - <x-icon name="o-information-circle" class="w-5 h-5" /> |
75 | | - <div class="text-sm"> |
76 | | - <p class="font-medium mb-1">Email sent to:</p> |
77 | | - <p class="font-mono text-xs">{{ auth()->user()->email }}</p> |
| 73 | + <!-- Info Box --> |
| 74 | + <div class="alert alert-neutral mb-5"> |
| 75 | + <x-icon name="o-information-circle" class="w-5 h-5" /> |
| 76 | + <div class="text-sm"> |
| 77 | + <p class="font-medium mb-1">Email sent to:</p> |
| 78 | + <p class="font-mono text-xs">{{ auth()->user()->email }}</p> |
| 79 | + </div> |
78 | 80 | </div> |
79 | | - </div> |
80 | 81 |
|
81 | | - <!-- Instructions --> |
82 | | - <div class="space-y-3 mb-5 text-sm text-base-content/70"> |
83 | | - <p>To complete your registration, please:</p> |
84 | | - <ol class="list-decimal list-inside space-y-2 ml-2"> |
85 | | - <li>Check your email inbox</li> |
86 | | - <li>Look for an email from CareerX</li> |
87 | | - <li>Click the verification link in the email</li> |
88 | | - </ol> |
89 | | - <p class="text-xs mt-3 text-base-content/50"> |
90 | | - <strong>Note:</strong> If you don't see the email, check your spam or junk folder. |
91 | | - </p> |
92 | | - <p class="text-xs mt-2 text-info"> |
93 | | - <strong>Tip:</strong> You can open the verification link on any browser or device! |
94 | | - </p> |
95 | | - </div> |
| 82 | + <!-- Instructions --> |
| 83 | + <div class="space-y-3 mb-5 text-sm text-base-content/70"> |
| 84 | + <p>To complete your registration, please:</p> |
| 85 | + <ol class="list-decimal list-inside space-y-2 ml-2"> |
| 86 | + <li>Check your email inbox</li> |
| 87 | + <li>Look for an email from CareerX</li> |
| 88 | + <li>Click the verification link in the email</li> |
| 89 | + </ol> |
| 90 | + <p class="text-xs mt-3 text-base-content/50"> |
| 91 | + <strong>Note:</strong> If you don't see the email, check your spam or junk folder. |
| 92 | + </p> |
| 93 | + <p class="text-xs mt-2 text-info"> |
| 94 | + <strong>Tip:</strong> You can open the verification link on any browser or device! |
| 95 | + </p> |
| 96 | + </div> |
96 | 97 |
|
97 | | - <div class="divider text-xs text-base-content/50 my-4">Didn't receive the email?</div> |
| 98 | + <div class="divider text-xs text-base-content/50 my-4">Didn't receive the email?</div> |
98 | 99 |
|
99 | | - <!-- Resend Button --> |
100 | | - <form wire:submit="resendVerification" class="space-y-3"> |
101 | | - <x-button label="Resend Verification Email" |
102 | | - class="btn-primary w-full btn-sm h-10 min-h-10 text-sm font-semibold shadow-md hover:shadow-lg transition-all" |
103 | | - type="submit" spinner="resendVerification" /> |
104 | | - </form> |
| 100 | + <!-- Resend Button --> |
| 101 | + <form wire:submit="resendVerification" class="space-y-3"> |
| 102 | + <x-button label="Resend Verification Email" |
| 103 | + class="btn-primary w-full btn-sm h-10 min-h-10 text-sm font-semibold shadow-md hover:shadow-lg transition-all" |
| 104 | + type="submit" spinner="resendVerification" /> |
| 105 | + </form> |
105 | 106 |
|
106 | | - <!-- Logout Link --> |
107 | | - <div class="text-center mt-4"> |
108 | | - <a href="{{ route('logout') }}" |
109 | | - class="text-sm text-base-content/60 hover:text-primary transition-colors"> |
110 | | - Sign out |
111 | | - </a> |
| 107 | + <!-- Logout Link --> |
| 108 | + <div class="text-center mt-4"> |
| 109 | + <a href="{{ route('logout') }}" |
| 110 | + class="text-sm text-base-content/60 hover:text-primary transition-colors"> |
| 111 | + Sign out |
| 112 | + </a> |
| 113 | + </div> |
112 | 114 | </div> |
113 | 115 | </div> |
114 | 116 | </div> |
115 | | - </div> |
116 | | -</x-layouts.main> |
| 117 | + </x-layouts.main> |
| 118 | +</div> |
117 | 119 | @endvolt |
0 commit comments