feat: convert change-email from modal to standalone page + Stripe customer.updated webhook
All checks were successful
Deploy to Production / Deploy to Server (push) Successful in 1m8s
All checks were successful
Deploy to Production / Deploy to Server (push) Successful in 1m8s
- Add /change-email as a proper standalone page (public/src/change-email.html) with API key input, new email input, verification code flow, and success state - Update footer partial: change "/#change-email" link to "/change-email" on all pages - Remove email change modal HTML and hash-handler JS from index page source - Add /change-email to sitemap.xml - Rebuild all HTML files via build-html.cjs - Add updateEmailByCustomer() to src/services/keys.ts - Add customer.updated webhook handler in src/routes/billing.ts to sync email changes made via Stripe dashboard back to DocFast
This commit is contained in:
DocFast Bot
parent
5099bae41f
commit
8f3b1a9660
12 changed files with 674 additions and 121 deletions
353
public/change-email.html
Normal file
353
public/change-email.html
Normal file
|
|
@ -0,0 +1,353 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Change Email — DocFast</title>
|
||||
<meta name="description" content="Change the email address associated with your DocFast API key.">
|
||||
<link rel="canonical" href="https://docfast.dev/change-email">
|
||||
<link rel="icon" href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><text y='.9em' font-size='90'>⚡</text></svg>">
|
||||
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap" rel="stylesheet">
|
||||
<style>
|
||||
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
|
||||
:root {
|
||||
--bg: #0b0d11; --bg2: #12151c; --fg: #e4e7ed; --muted: #7a8194;
|
||||
--accent: #34d399; --accent-hover: #5eead4; --accent-glow: rgba(52,211,153,0.12);
|
||||
--card: #151922; --border: #1e2433;
|
||||
--radius: 12px; --radius-lg: 16px;
|
||||
}
|
||||
body { font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif; background: var(--bg); color: var(--fg); line-height: 1.65; -webkit-font-smoothing: antialiased; }
|
||||
a { color: var(--accent); text-decoration: none; transition: color 0.2s; }
|
||||
a:hover { color: var(--accent-hover); }
|
||||
.container { max-width: 800px; margin: 0 auto; padding: 0 24px; }
|
||||
nav { padding: 20px 0; border-bottom: 1px solid var(--border); position: sticky; top: 0; background: var(--bg); z-index: 100; }
|
||||
nav .container { display: flex; align-items: center; justify-content: space-between; }
|
||||
.logo { font-size: 1.25rem; font-weight: 700; letter-spacing: -0.5px; color: var(--fg); display: flex; align-items: center; gap: 8px; text-decoration: none; }
|
||||
.logo span { color: var(--accent); }
|
||||
.nav-links { display: flex; gap: 28px; align-items: center; }
|
||||
.nav-links a { color: var(--muted); font-size: 0.9rem; font-weight: 500; }
|
||||
.nav-links a:hover { color: var(--fg); }
|
||||
.content { padding: 60px 0; min-height: 60vh; }
|
||||
.content h1 { font-size: 2rem; font-weight: 800; margin-bottom: 32px; letter-spacing: -1px; }
|
||||
.content h2 { font-size: 1.3rem; font-weight: 700; margin: 32px 0 16px; color: var(--fg); }
|
||||
.content h3 { font-size: 1.1rem; font-weight: 600; margin: 24px 0 12px; color: var(--fg); }
|
||||
.content p, .content li { color: var(--muted); margin-bottom: 12px; }
|
||||
.content ul, .content ol { padding-left: 24px; }
|
||||
.content strong { color: var(--fg); }
|
||||
footer { padding: 32px 0; border-top: 1px solid var(--border); margin-top: 60px; }
|
||||
footer .container { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 16px; }
|
||||
.footer-left { color: var(--muted); font-size: 0.85rem; }
|
||||
.footer-links { display: flex; gap: 20px; flex-wrap: wrap; }
|
||||
.footer-links a { color: var(--muted); font-size: 0.85rem; }
|
||||
.footer-links a:hover { color: var(--fg); }
|
||||
@media (max-width: 768px) {
|
||||
footer .container { flex-direction: column; text-align: center; }
|
||||
.nav-links { gap: 16px; }
|
||||
}
|
||||
|
||||
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0; }
|
||||
</style>
|
||||
<style>
|
||||
.change-email-wrap {
|
||||
max-width: 480px;
|
||||
margin: 80px auto 60px;
|
||||
padding: 0 24px;
|
||||
}
|
||||
.change-email-card {
|
||||
background: var(--card);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 16px;
|
||||
padding: 40px;
|
||||
}
|
||||
.change-email-card h1 {
|
||||
font-size: 1.6rem;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
.change-email-card .subtitle {
|
||||
color: var(--muted);
|
||||
margin-bottom: 28px;
|
||||
font-size: 0.95rem;
|
||||
}
|
||||
.ce-field {
|
||||
margin-bottom: 14px;
|
||||
}
|
||||
.ce-field label {
|
||||
display: block;
|
||||
font-size: 0.85rem;
|
||||
color: var(--muted);
|
||||
margin-bottom: 6px;
|
||||
}
|
||||
.ce-field input {
|
||||
width: 100%;
|
||||
padding: 12px 14px;
|
||||
border: 1px solid var(--border);
|
||||
background: var(--bg);
|
||||
color: var(--fg);
|
||||
border-radius: 8px;
|
||||
font-size: 0.9rem;
|
||||
font-family: inherit;
|
||||
box-sizing: border-box;
|
||||
transition: border-color 0.15s;
|
||||
}
|
||||
.ce-field input:focus {
|
||||
outline: none;
|
||||
border-color: var(--accent);
|
||||
}
|
||||
.ce-field input.monospace {
|
||||
font-family: monospace;
|
||||
}
|
||||
.ce-field input.code-input {
|
||||
font-family: monospace;
|
||||
font-size: 1.4rem;
|
||||
letter-spacing: 0.3em;
|
||||
text-align: center;
|
||||
padding: 14px;
|
||||
}
|
||||
.ce-btn {
|
||||
width: 100%;
|
||||
margin-top: 8px;
|
||||
}
|
||||
.ce-error {
|
||||
background: rgba(239,68,68,0.1);
|
||||
border: 1px solid rgba(239,68,68,0.3);
|
||||
color: #f87171;
|
||||
border-radius: 8px;
|
||||
padding: 10px 14px;
|
||||
font-size: 0.875rem;
|
||||
margin-bottom: 16px;
|
||||
display: none;
|
||||
}
|
||||
.ce-hint {
|
||||
margin-top: 14px;
|
||||
color: var(--muted);
|
||||
font-size: 0.8rem;
|
||||
text-align: center;
|
||||
}
|
||||
.ce-loading {
|
||||
text-align: center;
|
||||
padding: 20px 0;
|
||||
}
|
||||
.ce-success {
|
||||
text-align: center;
|
||||
padding: 10px 0;
|
||||
}
|
||||
.ce-success .success-icon {
|
||||
font-size: 3rem;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
.ce-success h2 {
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
.ce-success p {
|
||||
color: var(--muted);
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
.step { display: none; }
|
||||
.step.active { display: block; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
<nav aria-label="Main navigation">
|
||||
<div class="container">
|
||||
<a href="/" class="logo">⚡ Doc<span>Fast</span></a>
|
||||
<div class="nav-links">
|
||||
<a href="/#features">Features</a>
|
||||
<a href="/#pricing">Pricing</a>
|
||||
<a href="/docs">Docs</a>
|
||||
</div>
|
||||
</div>
|
||||
</nav>
|
||||
|
||||
<div class="change-email-wrap">
|
||||
<div class="change-email-card">
|
||||
|
||||
<!-- Step 1: Enter API key + new email -->
|
||||
<div class="step active" id="ceStepInitial">
|
||||
<h1>Change Email</h1>
|
||||
<p class="subtitle">Enter your API key and new email address.</p>
|
||||
<div class="ce-error" id="ceError"></div>
|
||||
<div class="ce-field">
|
||||
<label for="ceApiKey">Your API key</label>
|
||||
<input type="text" id="ceApiKey" class="monospace" placeholder="df_free_... or df_pro_..." required autocomplete="off" spellcheck="false">
|
||||
</div>
|
||||
<div class="ce-field">
|
||||
<label for="ceNewEmail">New email address</label>
|
||||
<input type="email" id="ceNewEmail" placeholder="new.email@example.com" required>
|
||||
</div>
|
||||
<button class="btn btn-primary ce-btn" id="ceSendBtn">Send Verification Code →</button>
|
||||
<p class="ce-hint">A 6-digit code will be sent to your new email address</p>
|
||||
</div>
|
||||
|
||||
<!-- Step 2: Loading -->
|
||||
<div class="step" id="ceStepLoading">
|
||||
<div class="ce-loading">
|
||||
<div class="spinner"></div>
|
||||
<p style="color:var(--muted);margin:12px 0 0">Sending verification code…</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Step 3: Enter code -->
|
||||
<div class="step" id="ceStepVerify">
|
||||
<h1>Check your inbox</h1>
|
||||
<p class="subtitle">We sent a 6-digit code to <strong id="ceEmailDisplay"></strong></p>
|
||||
<div class="ce-error" id="ceVerifyError"></div>
|
||||
<div class="ce-field">
|
||||
<label for="ceCode">Verification code</label>
|
||||
<input type="text" id="ceCode" class="code-input" placeholder="123456" maxlength="6" pattern="[0-9]{6}" inputmode="numeric" required>
|
||||
</div>
|
||||
<button class="btn btn-primary ce-btn" id="ceVerifyBtn">Verify →</button>
|
||||
<p class="ce-hint">Code expires in 15 minutes</p>
|
||||
</div>
|
||||
|
||||
<!-- Step 4: Success -->
|
||||
<div class="step" id="ceStepSuccess">
|
||||
<div class="ce-success">
|
||||
<div class="success-icon">✅</div>
|
||||
<h2>Email updated!</h2>
|
||||
<p>Your account email has been changed to <strong id="ceSuccessEmail"></strong></p>
|
||||
<a href="/" class="btn btn-primary">Back to Home →</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<footer aria-label="Footer">
|
||||
<div class="container">
|
||||
<div class="footer-left">© 2026 DocFast. Fast PDF generation for developers.</div>
|
||||
<div class="footer-links">
|
||||
<a href="/">Home</a>
|
||||
<a href="/docs">Docs</a>
|
||||
<a href="/status">API Status</a>
|
||||
<a href="/change-email">Change Email</a>
|
||||
<a href="/impressum">Impressum</a>
|
||||
<a href="/privacy">Privacy Policy</a>
|
||||
<a href="/terms">Terms of Service</a>
|
||||
</div>
|
||||
</div>
|
||||
</footer>
|
||||
|
||||
<script>
|
||||
(function () {
|
||||
var _apiKey = '';
|
||||
var _newEmail = '';
|
||||
|
||||
function showStep(id) {
|
||||
['ceStepInitial','ceStepLoading','ceStepVerify','ceStepSuccess'].forEach(function(s) {
|
||||
var el = document.getElementById(s);
|
||||
if (el) el.classList.remove('active');
|
||||
});
|
||||
var target = document.getElementById(id);
|
||||
if (target) target.classList.add('active');
|
||||
}
|
||||
|
||||
function showError(elId, msg) {
|
||||
var el = document.getElementById(elId);
|
||||
if (!el) return;
|
||||
el.textContent = msg;
|
||||
el.style.display = 'block';
|
||||
}
|
||||
|
||||
function hideError(elId) {
|
||||
var el = document.getElementById(elId);
|
||||
if (el) el.style.display = 'none';
|
||||
}
|
||||
|
||||
async function handleSend() {
|
||||
var apiKey = document.getElementById('ceApiKey').value.trim();
|
||||
var newEmail = document.getElementById('ceNewEmail').value.trim();
|
||||
|
||||
hideError('ceError');
|
||||
|
||||
if (!apiKey) {
|
||||
showError('ceError', 'Please enter your API key.');
|
||||
return;
|
||||
}
|
||||
if (!newEmail || !/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(newEmail)) {
|
||||
showError('ceError', 'Please enter a valid email address.');
|
||||
return;
|
||||
}
|
||||
|
||||
var btn = document.getElementById('ceSendBtn');
|
||||
btn.disabled = true;
|
||||
showStep('ceStepLoading');
|
||||
|
||||
try {
|
||||
var res = await fetch('/v1/email-change', {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify({ apiKey: apiKey, newEmail: newEmail })
|
||||
});
|
||||
var data = await res.json();
|
||||
|
||||
if (!res.ok) {
|
||||
showStep('ceStepInitial');
|
||||
showError('ceError', data.error || 'Something went wrong. Please try again.');
|
||||
btn.disabled = false;
|
||||
return;
|
||||
}
|
||||
|
||||
_apiKey = apiKey;
|
||||
_newEmail = newEmail;
|
||||
document.getElementById('ceEmailDisplay').textContent = newEmail;
|
||||
showStep('ceStepVerify');
|
||||
document.getElementById('ceCode').focus();
|
||||
} catch (err) {
|
||||
showStep('ceStepInitial');
|
||||
showError('ceError', 'Network error. Please try again.');
|
||||
btn.disabled = false;
|
||||
}
|
||||
}
|
||||
|
||||
async function handleVerify() {
|
||||
var code = document.getElementById('ceCode').value.trim();
|
||||
hideError('ceVerifyError');
|
||||
|
||||
if (!code || !/^\d{6}$/.test(code)) {
|
||||
showError('ceVerifyError', 'Please enter the 6-digit code.');
|
||||
return;
|
||||
}
|
||||
|
||||
var btn = document.getElementById('ceVerifyBtn');
|
||||
btn.disabled = true;
|
||||
|
||||
try {
|
||||
var res = await fetch('/v1/email-change/verify', {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify({ apiKey: _apiKey, newEmail: _newEmail, code: code })
|
||||
});
|
||||
var data = await res.json();
|
||||
|
||||
if (!res.ok) {
|
||||
showError('ceVerifyError', data.error || 'Verification failed. Please try again.');
|
||||
btn.disabled = false;
|
||||
return;
|
||||
}
|
||||
|
||||
document.getElementById('ceSuccessEmail').textContent = data.newEmail || _newEmail;
|
||||
showStep('ceStepSuccess');
|
||||
} catch (err) {
|
||||
showError('ceVerifyError', 'Network error. Please try again.');
|
||||
btn.disabled = false;
|
||||
}
|
||||
}
|
||||
|
||||
document.addEventListener('DOMContentLoaded', function () {
|
||||
document.getElementById('ceSendBtn').addEventListener('click', handleSend);
|
||||
document.getElementById('ceVerifyBtn').addEventListener('click', handleVerify);
|
||||
|
||||
// Allow Enter key in inputs
|
||||
document.getElementById('ceNewEmail').addEventListener('keydown', function(e) {
|
||||
if (e.key === 'Enter') handleSend();
|
||||
});
|
||||
document.getElementById('ceCode').addEventListener('keydown', function(e) {
|
||||
if (e.key === 'Enter') handleVerify();
|
||||
});
|
||||
});
|
||||
})();
|
||||
</script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -99,7 +99,7 @@ footer .container { display: flex; justify-content: space-between; align-items:
|
|||
<a href="/">Home</a>
|
||||
<a href="/docs">Docs</a>
|
||||
<a href="/status">API Status</a>
|
||||
<a href="/#change-email" class="open-email-change">Change Email</a>
|
||||
<a href="/change-email">Change Email</a>
|
||||
<a href="/impressum">Impressum</a>
|
||||
<a href="/privacy">Privacy Policy</a>
|
||||
<a href="/terms">Terms of Service</a>
|
||||
|
|
|
|||
|
|
@ -444,7 +444,7 @@ html, body {
|
|||
<a href="/">Home</a>
|
||||
<a href="/docs">Docs</a>
|
||||
<a href="/status">API Status</a>
|
||||
<a href="/#change-email" class="open-email-change">Change Email</a>
|
||||
<a href="/change-email">Change Email</a>
|
||||
<a href="/impressum">Impressum</a>
|
||||
<a href="/privacy">Privacy Policy</a>
|
||||
<a href="/terms">Terms of Service</a>
|
||||
|
|
@ -544,64 +544,7 @@ html, body {
|
|||
</div>
|
||||
|
||||
|
||||
<!-- Email Change Modal -->
|
||||
<div class="modal-overlay" id="emailChangeModal" role="dialog" aria-modal="true" aria-label="Change email">
|
||||
<div class="modal">
|
||||
<button class="close" id="btn-close-email-change" aria-label="Close">×</button>
|
||||
|
||||
<div id="emailChangeInitial" class="active">
|
||||
<h2>Change your email</h2>
|
||||
<p>Enter your API key and new email address.</p>
|
||||
<div class="signup-error" id="emailChangeError"></div>
|
||||
<label for="emailChangeApiKey" class="sr-only">Your API key</label>
|
||||
<input type="text" id="emailChangeApiKey" placeholder="Your API key (df_free_... or df_pro_...)" style="width:100%;padding:12px;border:1px solid var(--border);background:var(--bg);color:var(--fg);border-radius:8px;font-size:0.9rem;margin-bottom:12px;font-family:monospace;" required>
|
||||
<label for="emailChangeNewEmail" class="sr-only">New email address</label>
|
||||
<input type="email" id="emailChangeNewEmail" placeholder="new.email@example.com" style="width:100%;padding:12px;border:1px solid var(--border);background:var(--bg);color:var(--fg);border-radius:8px;font-size:0.9rem;margin-bottom:16px;" required>
|
||||
<button class="btn btn-primary" style="width:100%" id="emailChangeBtn">Send Verification Code →</button>
|
||||
<p style="margin-top:16px;color:var(--muted);font-size:0.8rem;text-align:center;">A verification code will be sent to your new email</p>
|
||||
</div>
|
||||
|
||||
<div id="emailChangeLoading">
|
||||
<div class="spinner"></div>
|
||||
<p style="color:var(--muted);margin:0">Sending verification code…</p>
|
||||
</div>
|
||||
|
||||
<div id="emailChangeVerify">
|
||||
<h2>Enter verification code</h2>
|
||||
<p>We sent a 6-digit code to <strong id="emailChangeEmailDisplay"></strong></p>
|
||||
<div class="signup-error" id="emailChangeVerifyError"></div>
|
||||
<label for="emailChangeCode" class="sr-only">Verification code</label>
|
||||
<input type="text" id="emailChangeCode" placeholder="123456" maxlength="6" pattern="[0-9]{6}" inputmode="numeric" style="width:100%;padding:14px;border:1px solid var(--border);background:var(--bg);color:var(--fg);border-radius:8px;font-size:1.4rem;letter-spacing:0.3em;text-align:center;margin-bottom:16px;font-family:monospace;" required>
|
||||
<button class="btn btn-primary" style="width:100%" id="emailChangeVerifyBtn">Verify →</button>
|
||||
<p style="margin-top:16px;color:var(--muted);font-size:0.8rem;text-align:center;">Code expires in 15 minutes</p>
|
||||
</div>
|
||||
|
||||
<div id="emailChangeResult">
|
||||
<h2>✅ Email updated!</h2>
|
||||
<p>Your account email has been changed to <strong id="emailChangeNewDisplay"></strong></p>
|
||||
<p style="margin-top:20px;color:var(--muted);font-size:0.9rem;"><a href="/docs">Read the docs →</a></p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script src="/app.js"></script>
|
||||
|
||||
<script>
|
||||
// BUG-068: Open change-email modal when navigating to /#change-email
|
||||
(function() {
|
||||
function handleHashModal() {
|
||||
if (window.location.hash === '#change-email') {
|
||||
if (typeof openEmailChange === 'function') {
|
||||
openEmailChange();
|
||||
}
|
||||
}
|
||||
}
|
||||
if (document.readyState === 'loading') {
|
||||
document.addEventListener('DOMContentLoaded', handleHashModal);
|
||||
} else {
|
||||
handleHashModal();
|
||||
}
|
||||
})();
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
|
|
@ -5,7 +5,7 @@
|
|||
<a href="/">Home</a>
|
||||
<a href="/docs">Docs</a>
|
||||
<a href="/status">API Status</a>
|
||||
<a href="/#change-email" class="open-email-change">Change Email</a>
|
||||
<a href="/change-email">Change Email</a>
|
||||
<a href="/impressum">Impressum</a>
|
||||
<a href="/privacy">Privacy Policy</a>
|
||||
<a href="/terms">Terms of Service</a>
|
||||
|
|
|
|||
|
|
@ -181,7 +181,7 @@ footer .container { display: flex; justify-content: space-between; align-items:
|
|||
<a href="/">Home</a>
|
||||
<a href="/docs">Docs</a>
|
||||
<a href="/status">API Status</a>
|
||||
<a href="/#change-email" class="open-email-change">Change Email</a>
|
||||
<a href="/change-email">Change Email</a>
|
||||
<a href="/impressum">Impressum</a>
|
||||
<a href="/privacy">Privacy Policy</a>
|
||||
<a href="/terms">Terms of Service</a>
|
||||
|
|
|
|||
|
|
@ -5,4 +5,5 @@
|
|||
<url><loc>https://docfast.dev/impressum</loc><lastmod>2026-02-16</lastmod><changefreq>monthly</changefreq><priority>0.3</priority></url>
|
||||
<url><loc>https://docfast.dev/privacy</loc><lastmod>2026-02-16</lastmod><changefreq>monthly</changefreq><priority>0.3</priority></url>
|
||||
<url><loc>https://docfast.dev/terms</loc><lastmod>2026-02-16</lastmod><changefreq>monthly</changefreq><priority>0.3</priority></url>
|
||||
<url><loc>https://docfast.dev/change-email</loc><lastmod>2026-02-17</lastmod><changefreq>monthly</changefreq><priority>0.5</priority></url>
|
||||
</urlset>
|
||||
|
|
|
|||
293
public/src/change-email.html
Normal file
293
public/src/change-email.html
Normal file
|
|
@ -0,0 +1,293 @@
|
|||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Change Email — DocFast</title>
|
||||
<meta name="description" content="Change the email address associated with your DocFast API key.">
|
||||
<link rel="canonical" href="https://docfast.dev/change-email">
|
||||
<link rel="icon" href="data:image/svg+xml,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 100 100'><text y='.9em' font-size='90'>⚡</text></svg>">
|
||||
<link href="https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800&display=swap" rel="stylesheet">
|
||||
{{> styles_base}}
|
||||
<style>
|
||||
.change-email-wrap {
|
||||
max-width: 480px;
|
||||
margin: 80px auto 60px;
|
||||
padding: 0 24px;
|
||||
}
|
||||
.change-email-card {
|
||||
background: var(--card);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: 16px;
|
||||
padding: 40px;
|
||||
}
|
||||
.change-email-card h1 {
|
||||
font-size: 1.6rem;
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
.change-email-card .subtitle {
|
||||
color: var(--muted);
|
||||
margin-bottom: 28px;
|
||||
font-size: 0.95rem;
|
||||
}
|
||||
.ce-field {
|
||||
margin-bottom: 14px;
|
||||
}
|
||||
.ce-field label {
|
||||
display: block;
|
||||
font-size: 0.85rem;
|
||||
color: var(--muted);
|
||||
margin-bottom: 6px;
|
||||
}
|
||||
.ce-field input {
|
||||
width: 100%;
|
||||
padding: 12px 14px;
|
||||
border: 1px solid var(--border);
|
||||
background: var(--bg);
|
||||
color: var(--fg);
|
||||
border-radius: 8px;
|
||||
font-size: 0.9rem;
|
||||
font-family: inherit;
|
||||
box-sizing: border-box;
|
||||
transition: border-color 0.15s;
|
||||
}
|
||||
.ce-field input:focus {
|
||||
outline: none;
|
||||
border-color: var(--accent);
|
||||
}
|
||||
.ce-field input.monospace {
|
||||
font-family: monospace;
|
||||
}
|
||||
.ce-field input.code-input {
|
||||
font-family: monospace;
|
||||
font-size: 1.4rem;
|
||||
letter-spacing: 0.3em;
|
||||
text-align: center;
|
||||
padding: 14px;
|
||||
}
|
||||
.ce-btn {
|
||||
width: 100%;
|
||||
margin-top: 8px;
|
||||
}
|
||||
.ce-error {
|
||||
background: rgba(239,68,68,0.1);
|
||||
border: 1px solid rgba(239,68,68,0.3);
|
||||
color: #f87171;
|
||||
border-radius: 8px;
|
||||
padding: 10px 14px;
|
||||
font-size: 0.875rem;
|
||||
margin-bottom: 16px;
|
||||
display: none;
|
||||
}
|
||||
.ce-hint {
|
||||
margin-top: 14px;
|
||||
color: var(--muted);
|
||||
font-size: 0.8rem;
|
||||
text-align: center;
|
||||
}
|
||||
.ce-loading {
|
||||
text-align: center;
|
||||
padding: 20px 0;
|
||||
}
|
||||
.ce-success {
|
||||
text-align: center;
|
||||
padding: 10px 0;
|
||||
}
|
||||
.ce-success .success-icon {
|
||||
font-size: 3rem;
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
.ce-success h2 {
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
.ce-success p {
|
||||
color: var(--muted);
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
.step { display: none; }
|
||||
.step.active { display: block; }
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
|
||||
{{> nav}}
|
||||
|
||||
<div class="change-email-wrap">
|
||||
<div class="change-email-card">
|
||||
|
||||
<!-- Step 1: Enter API key + new email -->
|
||||
<div class="step active" id="ceStepInitial">
|
||||
<h1>Change Email</h1>
|
||||
<p class="subtitle">Enter your API key and new email address.</p>
|
||||
<div class="ce-error" id="ceError"></div>
|
||||
<div class="ce-field">
|
||||
<label for="ceApiKey">Your API key</label>
|
||||
<input type="text" id="ceApiKey" class="monospace" placeholder="df_free_... or df_pro_..." required autocomplete="off" spellcheck="false">
|
||||
</div>
|
||||
<div class="ce-field">
|
||||
<label for="ceNewEmail">New email address</label>
|
||||
<input type="email" id="ceNewEmail" placeholder="new.email@example.com" required>
|
||||
</div>
|
||||
<button class="btn btn-primary ce-btn" id="ceSendBtn">Send Verification Code →</button>
|
||||
<p class="ce-hint">A 6-digit code will be sent to your new email address</p>
|
||||
</div>
|
||||
|
||||
<!-- Step 2: Loading -->
|
||||
<div class="step" id="ceStepLoading">
|
||||
<div class="ce-loading">
|
||||
<div class="spinner"></div>
|
||||
<p style="color:var(--muted);margin:12px 0 0">Sending verification code…</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Step 3: Enter code -->
|
||||
<div class="step" id="ceStepVerify">
|
||||
<h1>Check your inbox</h1>
|
||||
<p class="subtitle">We sent a 6-digit code to <strong id="ceEmailDisplay"></strong></p>
|
||||
<div class="ce-error" id="ceVerifyError"></div>
|
||||
<div class="ce-field">
|
||||
<label for="ceCode">Verification code</label>
|
||||
<input type="text" id="ceCode" class="code-input" placeholder="123456" maxlength="6" pattern="[0-9]{6}" inputmode="numeric" required>
|
||||
</div>
|
||||
<button class="btn btn-primary ce-btn" id="ceVerifyBtn">Verify →</button>
|
||||
<p class="ce-hint">Code expires in 15 minutes</p>
|
||||
</div>
|
||||
|
||||
<!-- Step 4: Success -->
|
||||
<div class="step" id="ceStepSuccess">
|
||||
<div class="ce-success">
|
||||
<div class="success-icon">✅</div>
|
||||
<h2>Email updated!</h2>
|
||||
<p>Your account email has been changed to <strong id="ceSuccessEmail"></strong></p>
|
||||
<a href="/" class="btn btn-primary">Back to Home →</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{{> footer}}
|
||||
|
||||
<script>
|
||||
(function () {
|
||||
var _apiKey = '';
|
||||
var _newEmail = '';
|
||||
|
||||
function showStep(id) {
|
||||
['ceStepInitial','ceStepLoading','ceStepVerify','ceStepSuccess'].forEach(function(s) {
|
||||
var el = document.getElementById(s);
|
||||
if (el) el.classList.remove('active');
|
||||
});
|
||||
var target = document.getElementById(id);
|
||||
if (target) target.classList.add('active');
|
||||
}
|
||||
|
||||
function showError(elId, msg) {
|
||||
var el = document.getElementById(elId);
|
||||
if (!el) return;
|
||||
el.textContent = msg;
|
||||
el.style.display = 'block';
|
||||
}
|
||||
|
||||
function hideError(elId) {
|
||||
var el = document.getElementById(elId);
|
||||
if (el) el.style.display = 'none';
|
||||
}
|
||||
|
||||
async function handleSend() {
|
||||
var apiKey = document.getElementById('ceApiKey').value.trim();
|
||||
var newEmail = document.getElementById('ceNewEmail').value.trim();
|
||||
|
||||
hideError('ceError');
|
||||
|
||||
if (!apiKey) {
|
||||
showError('ceError', 'Please enter your API key.');
|
||||
return;
|
||||
}
|
||||
if (!newEmail || !/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(newEmail)) {
|
||||
showError('ceError', 'Please enter a valid email address.');
|
||||
return;
|
||||
}
|
||||
|
||||
var btn = document.getElementById('ceSendBtn');
|
||||
btn.disabled = true;
|
||||
showStep('ceStepLoading');
|
||||
|
||||
try {
|
||||
var res = await fetch('/v1/email-change', {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify({ apiKey: apiKey, newEmail: newEmail })
|
||||
});
|
||||
var data = await res.json();
|
||||
|
||||
if (!res.ok) {
|
||||
showStep('ceStepInitial');
|
||||
showError('ceError', data.error || 'Something went wrong. Please try again.');
|
||||
btn.disabled = false;
|
||||
return;
|
||||
}
|
||||
|
||||
_apiKey = apiKey;
|
||||
_newEmail = newEmail;
|
||||
document.getElementById('ceEmailDisplay').textContent = newEmail;
|
||||
showStep('ceStepVerify');
|
||||
document.getElementById('ceCode').focus();
|
||||
} catch (err) {
|
||||
showStep('ceStepInitial');
|
||||
showError('ceError', 'Network error. Please try again.');
|
||||
btn.disabled = false;
|
||||
}
|
||||
}
|
||||
|
||||
async function handleVerify() {
|
||||
var code = document.getElementById('ceCode').value.trim();
|
||||
hideError('ceVerifyError');
|
||||
|
||||
if (!code || !/^\d{6}$/.test(code)) {
|
||||
showError('ceVerifyError', 'Please enter the 6-digit code.');
|
||||
return;
|
||||
}
|
||||
|
||||
var btn = document.getElementById('ceVerifyBtn');
|
||||
btn.disabled = true;
|
||||
|
||||
try {
|
||||
var res = await fetch('/v1/email-change/verify', {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify({ apiKey: _apiKey, newEmail: _newEmail, code: code })
|
||||
});
|
||||
var data = await res.json();
|
||||
|
||||
if (!res.ok) {
|
||||
showError('ceVerifyError', data.error || 'Verification failed. Please try again.');
|
||||
btn.disabled = false;
|
||||
return;
|
||||
}
|
||||
|
||||
document.getElementById('ceSuccessEmail').textContent = data.newEmail || _newEmail;
|
||||
showStep('ceStepSuccess');
|
||||
} catch (err) {
|
||||
showError('ceVerifyError', 'Network error. Please try again.');
|
||||
btn.disabled = false;
|
||||
}
|
||||
}
|
||||
|
||||
document.addEventListener('DOMContentLoaded', function () {
|
||||
document.getElementById('ceSendBtn').addEventListener('click', handleSend);
|
||||
document.getElementById('ceVerifyBtn').addEventListener('click', handleVerify);
|
||||
|
||||
// Allow Enter key in inputs
|
||||
document.getElementById('ceNewEmail').addEventListener('keydown', function(e) {
|
||||
if (e.key === 'Enter') handleSend();
|
||||
});
|
||||
document.getElementById('ceCode').addEventListener('keydown', function(e) {
|
||||
if (e.key === 'Enter') handleVerify();
|
||||
});
|
||||
});
|
||||
})();
|
||||
</script>
|
||||
|
||||
</body>
|
||||
</html>
|
||||
|
|
@ -219,64 +219,7 @@
|
|||
</div>
|
||||
|
||||
|
||||
<!-- Email Change Modal -->
|
||||
<div class="modal-overlay" id="emailChangeModal" role="dialog" aria-modal="true" aria-label="Change email">
|
||||
<div class="modal">
|
||||
<button class="close" id="btn-close-email-change" aria-label="Close">×</button>
|
||||
|
||||
<div id="emailChangeInitial" class="active">
|
||||
<h2>Change your email</h2>
|
||||
<p>Enter your API key and new email address.</p>
|
||||
<div class="signup-error" id="emailChangeError"></div>
|
||||
<label for="emailChangeApiKey" class="sr-only">Your API key</label>
|
||||
<input type="text" id="emailChangeApiKey" placeholder="Your API key (df_free_... or df_pro_...)" style="width:100%;padding:12px;border:1px solid var(--border);background:var(--bg);color:var(--fg);border-radius:8px;font-size:0.9rem;margin-bottom:12px;font-family:monospace;" required>
|
||||
<label for="emailChangeNewEmail" class="sr-only">New email address</label>
|
||||
<input type="email" id="emailChangeNewEmail" placeholder="new.email@example.com" style="width:100%;padding:12px;border:1px solid var(--border);background:var(--bg);color:var(--fg);border-radius:8px;font-size:0.9rem;margin-bottom:16px;" required>
|
||||
<button class="btn btn-primary" style="width:100%" id="emailChangeBtn">Send Verification Code →</button>
|
||||
<p style="margin-top:16px;color:var(--muted);font-size:0.8rem;text-align:center;">A verification code will be sent to your new email</p>
|
||||
</div>
|
||||
|
||||
<div id="emailChangeLoading">
|
||||
<div class="spinner"></div>
|
||||
<p style="color:var(--muted);margin:0">Sending verification code…</p>
|
||||
</div>
|
||||
|
||||
<div id="emailChangeVerify">
|
||||
<h2>Enter verification code</h2>
|
||||
<p>We sent a 6-digit code to <strong id="emailChangeEmailDisplay"></strong></p>
|
||||
<div class="signup-error" id="emailChangeVerifyError"></div>
|
||||
<label for="emailChangeCode" class="sr-only">Verification code</label>
|
||||
<input type="text" id="emailChangeCode" placeholder="123456" maxlength="6" pattern="[0-9]{6}" inputmode="numeric" style="width:100%;padding:14px;border:1px solid var(--border);background:var(--bg);color:var(--fg);border-radius:8px;font-size:1.4rem;letter-spacing:0.3em;text-align:center;margin-bottom:16px;font-family:monospace;" required>
|
||||
<button class="btn btn-primary" style="width:100%" id="emailChangeVerifyBtn">Verify →</button>
|
||||
<p style="margin-top:16px;color:var(--muted);font-size:0.8rem;text-align:center;">Code expires in 15 minutes</p>
|
||||
</div>
|
||||
|
||||
<div id="emailChangeResult">
|
||||
<h2>✅ Email updated!</h2>
|
||||
<p>Your account email has been changed to <strong id="emailChangeNewDisplay"></strong></p>
|
||||
<p style="margin-top:20px;color:var(--muted);font-size:0.9rem;"><a href="/docs">Read the docs →</a></p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script src="/app.js"></script>
|
||||
|
||||
<script>
|
||||
// BUG-068: Open change-email modal when navigating to /#change-email
|
||||
(function() {
|
||||
function handleHashModal() {
|
||||
if (window.location.hash === '#change-email') {
|
||||
if (typeof openEmailChange === 'function') {
|
||||
openEmailChange();
|
||||
}
|
||||
}
|
||||
}
|
||||
if (document.readyState === 'loading') {
|
||||
document.addEventListener('DOMContentLoaded', handleHashModal);
|
||||
} else {
|
||||
handleHashModal();
|
||||
}
|
||||
})();
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
|
|
|
|||
|
|
@ -95,7 +95,7 @@ footer .container { display: flex; justify-content: space-between; align-items:
|
|||
<a href="/">Home</a>
|
||||
<a href="/docs">Docs</a>
|
||||
<a href="/status">API Status</a>
|
||||
<a href="/#change-email" class="open-email-change">Change Email</a>
|
||||
<a href="/change-email">Change Email</a>
|
||||
<a href="/impressum">Impressum</a>
|
||||
<a href="/privacy">Privacy Policy</a>
|
||||
<a href="/terms">Terms of Service</a>
|
||||
|
|
|
|||
|
|
@ -253,7 +253,7 @@ footer .container { display: flex; justify-content: space-between; align-items:
|
|||
<a href="/">Home</a>
|
||||
<a href="/docs">Docs</a>
|
||||
<a href="/status">API Status</a>
|
||||
<a href="/#change-email" class="open-email-change">Change Email</a>
|
||||
<a href="/change-email">Change Email</a>
|
||||
<a href="/impressum">Impressum</a>
|
||||
<a href="/privacy">Privacy Policy</a>
|
||||
<a href="/terms">Terms of Service</a>
|
||||
|
|
|
|||
|
|
@ -1,6 +1,6 @@
|
|||
import { Router, Request, Response } from "express";
|
||||
import Stripe from "stripe";
|
||||
import { createProKey, downgradeByCustomer } from "../services/keys.js";
|
||||
import { createProKey, downgradeByCustomer, updateEmailByCustomer } from "../services/keys.js";
|
||||
import logger from "../services/logger.js";
|
||||
|
||||
function escapeHtml(s: string): string {
|
||||
|
|
@ -210,6 +210,18 @@ router.post("/webhook", async (req: Request, res: Response) => {
|
|||
logger.info({ customerId }, "customer.subscription.deleted: downgraded key to free tier");
|
||||
break;
|
||||
}
|
||||
case "customer.updated": {
|
||||
const customer = event.data.object as Stripe.Customer;
|
||||
const customerId = customer.id;
|
||||
const newEmail = customer.email;
|
||||
if (customerId && newEmail) {
|
||||
const updated = await updateEmailByCustomer(customerId, newEmail);
|
||||
if (updated) {
|
||||
logger.info({ customerId, newEmail }, "Customer email synced from Stripe");
|
||||
}
|
||||
}
|
||||
break;
|
||||
}
|
||||
default:
|
||||
break;
|
||||
}
|
||||
|
|
|
|||
|
|
@ -129,3 +129,11 @@ export async function updateKeyEmail(apiKey: string, newEmail: string): Promise<
|
|||
await pool.query("UPDATE api_keys SET email = $1 WHERE key = $2", [newEmail, apiKey]);
|
||||
return true;
|
||||
}
|
||||
|
||||
export async function updateEmailByCustomer(stripeCustomerId: string, newEmail: string): Promise<boolean> {
|
||||
const entry = keysCache.find(k => k.stripeCustomerId === stripeCustomerId);
|
||||
if (!entry) return false;
|
||||
entry.email = newEmail;
|
||||
await pool.query(UPDATE api_keys SET email = $1 WHERE stripe_customer_id = $2, [newEmail, stripeCustomerId]);
|
||||
return true;
|
||||
}
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue