101 lines
4.1 KiB
HTML
101 lines
4.1 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</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">
|
|
|
|
<!-- 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="/login" class="text-sm text-green-700 hover:underline font-semibold">Back to sign in</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. Click it to finish setting up your account.</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/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);
|
|
|
|
// Store user session if provided
|
|
if (data.token) {
|
|
try {
|
|
localStorage.setItem('wordpress_plugin_ai_user', JSON.stringify({
|
|
email: data.user.email,
|
|
accountId: data.user.id,
|
|
sessionToken: data.token
|
|
}));
|
|
} catch (_) { }
|
|
}
|
|
|
|
// Redirect to appropriate page
|
|
const redirectUrl = data.redirect || (data.user?.hasPlan ? '/apps' : '/select-plan');
|
|
setTimeout(() => {
|
|
window.location.href = redirectUrl;
|
|
}, 1500);
|
|
} catch (err) {
|
|
setStatus('Verification failed. Please try again.', true);
|
|
}
|
|
})();
|
|
</script>
|
|
</body>
|
|
</html>
|