96 lines
4.2 KiB
HTML
96 lines
4.2 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Verify Email | Plugin Compass Affiliate Program</title>
|
|
<link rel="icon" type="image/png" href="/assets/Plugin.png">
|
|
<script src="https://cdn.tailwindcss.com"></script>
|
|
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.0.0/css/all.min.css" rel="stylesheet">
|
|
<link rel="preconnect" href="https://fonts.googleapis.com">
|
|
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
|
|
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;600&display=swap" rel="stylesheet">
|
|
<script>
|
|
tailwind.config = { theme: { extend: { fontFamily: { sans: ['Inter', 'sans-serif'] } } } };
|
|
</script>
|
|
|
|
<!-- PostHog Analytics -->
|
|
<script src="/posthog.js"></script>
|
|
</head>
|
|
<body class="bg-amber-50 text-gray-900 font-sans antialiased min-h-screen flex flex-col">
|
|
<nav class="w-full">
|
|
<div class="max-w-4xl mx-auto px-4 py-6 flex items-center justify-between">
|
|
<a href="/" class="flex items-center gap-2 font-bold text-lg text-gray-800">
|
|
<img src="/assets/Plugin.png" alt="Plugin Compass" class="w-8 h-8">
|
|
Plugin Compass
|
|
</a>
|
|
<a href="/affiliate-login" class="text-sm text-green-700 hover:underline font-semibold">Back to affiliate login</a>
|
|
</div>
|
|
</nav>
|
|
|
|
<main class="flex-grow flex items-center justify-center px-4 py-12">
|
|
<div class="max-w-xl w-full bg-white/80 border border-gray-200 rounded-2xl shadow-xl shadow-green-900/5 p-8">
|
|
<div class="text-center">
|
|
<div class="w-14 h-14 rounded-full bg-green-700 text-white flex items-center justify-center mx-auto mb-4">
|
|
<i class="fa-solid fa-envelope-circle-check text-2xl"></i>
|
|
</div>
|
|
<h1 class="text-2xl font-bold mb-2">Verify your email</h1>
|
|
<p class="text-gray-600 mb-6">We sent you a verification link for your affiliate account. Click it to start earning commissions.</p>
|
|
<div id="verify-status" class="text-sm text-gray-700 bg-amber-50 border border-amber-100 rounded-lg px-4 py-3"></div>
|
|
</div>
|
|
</div>
|
|
</main>
|
|
|
|
<footer class="py-6 text-center text-gray-500 text-xs">
|
|
<p>© 2026 Plugin Compass. All rights reserved.</p>
|
|
<div style="margin-top: 12px; display: flex; justify-content: center; gap: 16px;">
|
|
<a href="/terms" style="color: #008060; text-decoration: none;">Terms</a>
|
|
<a href="/privacy" style="color: #008060; text-decoration: none;">Privacy</a>
|
|
<a href="/contact" style="color: #008060; text-decoration: none;">Contact Us</a>
|
|
</div>
|
|
</footer>
|
|
|
|
<script>
|
|
(async () => {
|
|
const statusEl = document.getElementById('verify-status');
|
|
const params = new URLSearchParams(window.location.search);
|
|
const token = params.get('token');
|
|
|
|
function setStatus(message, isError = false) {
|
|
statusEl.textContent = message || '';
|
|
statusEl.classList.toggle('text-red-700', isError);
|
|
statusEl.classList.toggle('border-red-200', isError);
|
|
statusEl.classList.toggle('bg-red-50', isError);
|
|
statusEl.classList.toggle('text-green-700', !isError);
|
|
statusEl.classList.toggle('border-green-100', !isError);
|
|
statusEl.classList.toggle('bg-green-50', !isError);
|
|
}
|
|
|
|
if (!token) {
|
|
setStatus('Missing verification token. Please open the link from your email again.', true);
|
|
return;
|
|
}
|
|
|
|
setStatus('Verifying your email...', false);
|
|
try {
|
|
const resp = await fetch(`/api/affiliates/verify-email?token=${encodeURIComponent(token)}`);
|
|
const data = await resp.json().catch(() => ({}));
|
|
if (!resp.ok) {
|
|
setStatus(data.error || 'Verification failed. Please request a new link.', true);
|
|
return;
|
|
}
|
|
setStatus(data.message || 'Email verified! Redirecting...', false);
|
|
|
|
// Redirect to dashboard
|
|
const redirectUrl = data.redirect || '/affiliate-dashboard';
|
|
setTimeout(() => {
|
|
window.location.href = redirectUrl;
|
|
}, 1500);
|
|
} catch (err) {
|
|
setStatus('Verification failed. Please try again.', true);
|
|
}
|
|
})();
|
|
</script>
|
|
</body>
|
|
</html>
|