Files
warfle_webpage/public/verify-email.html
2025-11-25 00:43:00 +05:30

104 lines
3.7 KiB
HTML

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Email Verification - Wraffle</title>
<link rel="stylesheet" href="verify-email.css">
</head>
<body>
<div class="verify-container">
<div class="verify-card">
<div id="verifying" class="verifying">
<div class="spinner"></div>
<h2>Verifying your email...</h2>
</div>
<div id="success" class="success hidden">
<div class="success-icon"></div>
<h2>Email Verified Successfully!</h2>
<p>Your email has been verified. You can now access all features of your account.</p>
<p class="redirect-message">Redirecting to home page in <span id="countdown">10</span> seconds...</p>
<button class="home-btn" onclick="goHome()">Go to Home Now</button>
</div>
<div id="error" class="error hidden">
<div class="error-icon"></div>
<h2>Verification Failed</h2>
<p id="error-message">Verification failed</p>
<p class="redirect-message">Redirecting to login page in <span id="countdown-error">10</span> seconds...</p>
<button class="retry-btn" onclick="goLogin()">Back to Login</button>
</div>
</div>
</div>
<script>
const urlParams = new URLSearchParams(window.location.search);
const token = urlParams.get('token');
let countdownInterval;
async function verifyEmail() {
if (!token) {
showError('No verification token provided');
return;
}
try {
const response = await fetch(`http://172.232.124.96:5370/api/auth/verify-email?token=${token}`);
const data = await response.json();
if (response.ok) {
showSuccess();
} else {
showError(data.message || 'Verification failed');
}
} catch (error) {
showError('Network error occurred');
}
}
function showSuccess() {
document.getElementById('verifying').classList.add('hidden');
document.getElementById('success').classList.remove('hidden');
startCountdown('countdown', () => window.location.href = '/');
}
function showError(message) {
document.getElementById('verifying').classList.add('hidden');
document.getElementById('error').classList.remove('hidden');
document.getElementById('error-message').textContent = message;
startCountdown('countdown-error', () => window.location.href = '/login');
}
function startCountdown(elementId, callback) {
let timeLeft = 10;
const countdownElement = document.getElementById(elementId);
countdownElement.textContent = timeLeft;
countdownInterval = setInterval(() => {
timeLeft--;
countdownElement.textContent = timeLeft;
if (timeLeft <= 0) {
clearInterval(countdownInterval);
callback();
}
}, 1000);
}
function goHome() {
clearInterval(countdownInterval);
window.location.href = '/';
}
function goLogin() {
clearInterval(countdownInterval);
window.location.href = '/login';
}
// Start verification on page load
verifyEmail();
</script>
</body>
</html>