feat: Automatically send verification email on page load and update UI accordingly

This commit is contained in:
seaznCode 2025-10-12 13:45:42 +02:00
parent 25fff9b1c3
commit 0ba58d7538

View File

@ -14,8 +14,39 @@ export default function EmailVerifyPage() {
const [error, setError] = useState('') const [error, setError] = useState('')
const [success, setSuccess] = useState(false) const [success, setSuccess] = useState(false)
const [resendCooldown, setResendCooldown] = useState(0) const [resendCooldown, setResendCooldown] = useState(0)
const [initialEmailSent, setInitialEmailSent] = useState(false)
const inputsRef = useRef<Array<HTMLInputElement | null>>([]) const inputsRef = useRef<Array<HTMLInputElement | null>>([])
// Send verification email automatically on page load
useEffect(() => {
if (!token || initialEmailSent) return
const sendInitialEmail = async () => {
try {
const response = await fetch(`${process.env.NEXT_PUBLIC_API_BASE_URL}/api/send-verification-email`, {
method: 'POST',
headers: {
'Authorization': `Bearer ${token}`,
'Content-Type': 'application/json'
}
})
const data = await response.json()
if (response.ok && data.success) {
setInitialEmailSent(true)
setResendCooldown(30) // Start cooldown after initial send
} else {
console.error('Failed to send initial verification email:', data.message)
}
} catch (error) {
console.error('Error sending initial verification email:', error)
}
}
sendInitialEmail()
}, [token, initialEmailSent])
// Cooldown timer // Cooldown timer
useEffect(() => { useEffect(() => {
if (!resendCooldown) return if (!resendCooldown) return
@ -166,12 +197,23 @@ export default function EmailVerifyPage() {
E-Mail verifizieren E-Mail verifizieren
</h1> </h1>
<p className="mt-3 text-gray-300 text-sm sm:text-base"> <p className="mt-3 text-gray-300 text-sm sm:text-base">
Gib den 6-stelligen Code ein, den wir an {initialEmailSent ? (
{' '} <>
Wir haben einen 6-stelligen Code an{' '}
<span className="text-indigo-300 font-medium"> <span className="text-indigo-300 font-medium">
{user?.email || 'deine E-Mail'} {user?.email || 'deine E-Mail'}
</span>{' '} </span>{' '}
gesendet haben. gesendet. Gib ihn unten ein.
</>
) : (
<>
E-Mail wird gesendet an{' '}
<span className="text-indigo-300 font-medium">
{user?.email || 'deine E-Mail'}
</span>
...
</>
)}
</p> </p>
</div> </div>