openclawd/docfast
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

security: remove Change Email feature (leaked key = account hijack)
All checks were successful
Deploy to Production / Deploy to Server (push) Successful in 1m7s
Details

Browse source
This commit is contained in:
DocFast Bot 2026-02-17 11:40:27 +00:00
parent 1702abdeb8
commit f5cea97adf
12 changed files with 80 additions and 849 deletions
Download patch file Download diff file Expand all files Collapse all files

353
public/change-email.html
View file

@ -1,353 +0,0 @@
<!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>

8
public/impressum.html
View file

@ -20,7 +20,7 @@ body { font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Robo
a { color: var(--accent); text-decoration: none; transition: color 0.2s; } a { color: var(--accent); text-decoration: none; transition: color 0.2s; }
a:hover { color: var(--accent-hover); } a:hover { color: var(--accent-hover); }
.container { max-width: 800px; margin: 0 auto; padding: 0 24px; } .container { max-width: 800px; margin: 0 auto; padding: 0 24px; }
nav { padding: 20px 0; border-bottom: 1px solid var(--border); } 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; } 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 { 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); } .logo span { color: var(--accent); }
@ -44,6 +44,8 @@ footer .container { display: flex; justify-content: space-between; align-items:
footer .container { flex-direction: column; text-align: center; } footer .container { flex-direction: column; text-align: center; }
.nav-links { gap: 16px; } .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>
</head> </head>
<body> <body>
@ -96,9 +98,7 @@ footer .container { display: flex; justify-content: space-between; align-items:
<div class="footer-links"> <div class="footer-links">
<a href="/">Home</a> <a href="/">Home</a>
<a href="/docs">Docs</a> <a href="/docs">Docs</a>
<a href="/health">API Status</a> <a href="/status">API Status</a>
<a href="/#change-email" class="open-email-change">Change Email</a>
<a href="mailto:support@docfast.dev">Support</a>
<a href="/impressum">Impressum</a> <a href="/impressum">Impressum</a>
<a href="/privacy">Privacy Policy</a> <a href="/privacy">Privacy Policy</a>
<a href="/terms">Terms of Service</a> <a href="/terms">Terms of Service</a>

146
public/index.html
View file

@ -17,7 +17,7 @@
<link rel="preconnect" href="https://fonts.googleapis.com"> <link rel="preconnect" href="https://fonts.googleapis.com">
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin> <link rel="preconnect" href="https://fonts.gstatic.com" crossorigin>
<script type="application/ld+json"> <script type="application/ld+json">
{"@context":"https://schema.org","@type":"SoftwareApplication","name":"DocFast","url":"https://docfast.dev","applicationCategory":"DeveloperApplication","operatingSystem":"Web","description":"Convert HTML and Markdown to beautiful PDFs with a simple API call. Fast, reliable, developer-friendly.","offers":[{"@type":"Offer","price":"0","priceCurrency":"EUR","name":"Free","description":"100 PDFs/month"},{"@type":"Offer","price":"9","priceCurrency":"EUR","name":"Pro","description":"5,000 PDFs per month","billingIncrement":"P1M"}]} {"@context":"https://schema.org","@type":"SoftwareApplication","name":"DocFast","url":"https://docfast.dev","applicationCategory":"DeveloperApplication","operatingSystem":"Web","description":"Convert HTML and Markdown to beautiful PDFs with a simple API call. Fast, reliable, developer-friendly.","offers":[{"@type":"Offer","price":"0","priceCurrency":"EUR","name":"Free","description":"100 PDFs/month"},{"@type":"Offer","price":"9","priceCurrency":"EUR","name":"Pro","description":"2,500 PDFs per month","billingIncrement":"P1M"}]}
</script> </script>
<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 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>">
<style> <style>
@ -25,22 +25,44 @@
:root { :root {
--bg: #0b0d11; --bg2: #12151c; --fg: #e4e7ed; --muted: #7a8194; --bg: #0b0d11; --bg2: #12151c; --fg: #e4e7ed; --muted: #7a8194;
--accent: #34d399; --accent-hover: #5eead4; --accent-glow: rgba(52,211,153,0.12); --accent: #34d399; --accent-hover: #5eead4; --accent-glow: rgba(52,211,153,0.12);
--accent2: #60a5fa; --card: #151922; --border: #1e2433; --card: #151922; --border: #1e2433;
--radius: 12px; --radius-lg: 16px; --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; } 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 { color: var(--accent); text-decoration: none; transition: color 0.2s; }
a:hover { color: var(--accent-hover); } a:hover { color: var(--accent-hover); }
.container { max-width: 1020px; margin: 0 auto; padding: 0 24px; } .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 */
nav { padding: 20px 0; border-bottom: 1px solid var(--border); }
nav .container { display: flex; align-items: center; justify-content: space-between; } 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; } .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); } .logo span { color: var(--accent); }
.nav-links { display: flex; gap: 28px; align-items: center; } .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 { color: var(--muted); font-size: 0.9rem; font-weight: 500; }
.nav-links a:hover { color: var(--fg); } .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>
/* Index-page extra vars */
:root { --accent2: #60a5fa; }
.container { max-width: 1020px; }
/* Hero */ /* Hero */
.hero { padding: 100px 0 80px; text-align: center; position: relative; } .hero { padding: 100px 0 80px; text-align: center; position: relative; }
@ -121,13 +143,10 @@ section { position: relative; }
.eu-icon { font-size: 2.5rem; } .eu-icon { font-size: 2.5rem; }
} }
/* Footer */ /* Footer (index override) */
footer { padding: 40px 0; border-top: 1px solid var(--border); } footer { padding: 40px 0; }
footer .container { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 16px; } footer .container { display: flex; align-items: center; justify-content: space-between; flex-wrap: wrap; gap: 16px; }
.footer-left { color: var(--muted); font-size: 0.85rem; } .footer-links { gap: 24px; }
.footer-links { display: flex; gap: 24px; flex-wrap: wrap; }
.footer-links a { color: var(--muted); font-size: 0.85rem; }
.footer-links a:hover { color: var(--fg); }
/* Modal */ /* Modal */
.modal-overlay { display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.75); backdrop-filter: blur(4px); z-index: 100; align-items: center; justify-content: center; } .modal-overlay { display: none; position: fixed; inset: 0; background: rgba(0,0,0,0.75); backdrop-filter: blur(4px); z-index: 100; align-items: center; justify-content: center; }
@ -156,6 +175,20 @@ footer .container { display: flex; align-items: center; justify-content: space-b
.warning-box .icon { font-size: 1.1rem; flex-shrink: 0; } .warning-box .icon { font-size: 1.1rem; flex-shrink: 0; }
.signup-error { color: #f87171; font-size: 0.85rem; margin-bottom: 16px; display: none; padding: 10px 14px; background: rgba(248,113,113,0.06); border: 1px solid rgba(248,113,113,0.15); border-radius: 8px; } .signup-error { color: #f87171; font-size: 0.85rem; margin-bottom: 16px; display: none; padding: 10px 14px; background: rgba(248,113,113,0.06); border: 1px solid rgba(248,113,113,0.15); border-radius: 8px; }
/* Recovery modal states */
#recoverInitial, #recoverLoading, #recoverVerify, #recoverResult { display: none; }
#recoverInitial.active { display: block; }
#recoverLoading.active { display: flex; flex-direction: column; align-items: center; padding: 40px 0; text-align: center; }
#recoverResult.active { display: block; }
#recoverVerify.active { display: block; }
/* Email change modal states */
#emailChangeInitial, #emailChangeLoading, #emailChangeVerify, #emailChangeResult { display: none; }
#emailChangeInitial.active { display: block; }
#emailChangeLoading.active { display: flex; flex-direction: column; align-items: center; padding: 40px 0; text-align: center; }
#emailChangeResult.active { display: block; }
#emailChangeVerify.active { display: block; }
/* Responsive */ /* Responsive */
@media (max-width: 640px) { @media (max-width: 640px) {
.hero { padding: 72px 0 56px; } .hero { padding: 72px 0 56px; }
@ -193,9 +226,9 @@ footer .container { display: flex; align-items: center; justify-content: space-b
} }
} }
/* Additional mobile overflow fixes */ /* Mobile overflow fixes — overflow-x: clip (not hidden) preserves position:sticky */
html, body { html, body {
overflow-x: hidden !important; overflow-x: clip !important;
max-width: 100vw !important; max-width: 100vw !important;
} }
@ -204,7 +237,7 @@ html, body {
max-width: 100% !important; max-width: 100% !important;
} }
body { body {
overflow-x: hidden !important; overflow-x: clip !important;
} }
.container { .container {
overflow-x: hidden !important; overflow-x: hidden !important;
@ -246,20 +279,6 @@ html, body {
} }
} }
/* Recovery modal states */
#recoverInitial, #recoverLoading, #recoverVerify, #recoverResult { display: none; }
#recoverInitial.active { display: block; }
#recoverLoading.active { display: flex; flex-direction: column; align-items: center; padding: 40px 0; text-align: center; }
#recoverResult.active { display: block; }
#recoverVerify.active { display: block; }
/* Email change modal states */
#emailChangeInitial, #emailChangeLoading, #emailChangeVerify, #emailChangeResult { display: none; }
#emailChangeInitial.active { display: block; }
#emailChangeLoading.active { display: flex; flex-direction: column; align-items: center; padding: 40px 0; text-align: center; }
#emailChangeResult.active { display: block; }
#emailChangeVerify.active { display: block; }
/* Focus-visible for accessibility */ /* Focus-visible for accessibility */
.btn:focus-visible, a:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; } .btn:focus-visible, a:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
</style> </style>
@ -273,14 +292,15 @@ html, body {
<div class="container"> <div class="container">
<a href="/" class="logo">⚡ Doc<span>Fast</span></a> <a href="/" class="logo">⚡ Doc<span>Fast</span></a>
<div class="nav-links"> <div class="nav-links">
<a href="#features">Features</a> <a href="/#features">Features</a>
<a href="#pricing">Pricing</a> <a href="/#pricing">Pricing</a>
<a href="/docs">Docs</a> <a href="/docs">Docs</a>
</div> </div>
</div> </div>
</nav> </nav>
<main class="hero" role="main"> <main role="main">
<section class="hero">
<div class="container"> <div class="container">
<div class="badge">🚀 Simple PDF API for Developers</div> <div class="badge">🚀 Simple PDF API for Developers</div>
<h1>HTML to <span class="gradient">PDF</span><br>in one API call</h1> <h1>HTML to <span class="gradient">PDF</span><br>in one API call</h1>
@ -306,7 +326,7 @@ html, body {
</div> </div>
</div> </div>
</div> </div>
</main> </section>
<section class="trust"> <section class="trust">
<div class="container"> <div class="container">
@ -336,7 +356,7 @@ html, body {
<div class="eu-badge"> <div class="eu-badge">
<div class="eu-icon">🇪🇺</div> <div class="eu-icon">🇪🇺</div>
<div class="eu-content"> <div class="eu-content">
<h3>Hosted in the EU</h3> <h2>Hosted in the EU</h2>
<p>Your data never leaves the EU • GDPR Compliant • Hetzner Germany (Nuremberg)</p> <p>Your data never leaves the EU • GDPR Compliant • Hetzner Germany (Nuremberg)</p>
</div> </div>
</div> </div>
@ -404,7 +424,7 @@ html, body {
<div class="price-amount">€9<span> /mo</span></div> <div class="price-amount">€9<span> /mo</span></div>
<div class="price-desc">For production apps and businesses</div> <div class="price-desc">For production apps and businesses</div>
<ul class="price-features"> <ul class="price-features">
<li>5,000 PDFs per month</li> <li>2,500 PDFs per month</li>
<li>All conversion endpoints</li> <li>All conversion endpoints</li>
<li>All templates included</li> <li>All templates included</li>
<li>Priority support (<a href="mailto:support@docfast.dev">support@docfast.dev</a>)</li> <li>Priority support (<a href="mailto:support@docfast.dev">support@docfast.dev</a>)</li>
@ -415,15 +435,15 @@ html, body {
</div> </div>
</section> </section>
</main>
<footer aria-label="Footer"> <footer aria-label="Footer">
<div class="container"> <div class="container">
<div class="footer-left">© 2026 DocFast. Fast PDF generation for developers.</div> <div class="footer-left">© 2026 DocFast. Fast PDF generation for developers.</div>
<div class="footer-links"> <div class="footer-links">
<a href="/">Home</a> <a href="/">Home</a>
<a href="/docs">Docs</a> <a href="/docs">Docs</a>
<a href="/health">API Status</a> <a href="/status">API Status</a>
<a href="/#change-email" class="open-email-change">Change Email</a>
<a href="mailto:support@docfast.dev">Support</a>
<a href="/impressum">Impressum</a> <a href="/impressum">Impressum</a>
<a href="/privacy">Privacy Policy</a> <a href="/privacy">Privacy Policy</a>
<a href="/terms">Terms of Service</a> <a href="/terms">Terms of Service</a>
@ -434,12 +454,13 @@ html, body {
<!-- Signup Modal --> <!-- Signup Modal -->
<div class="modal-overlay" id="signupModal" role="dialog" aria-label="Sign up for API key"> <div class="modal-overlay" id="signupModal" role="dialog" aria-label="Sign up for API key">
<div class="modal"> <div class="modal">
<button class="close" id="btn-close-signup">&times;</button> <button class="close" id="btn-close-signup" aria-label="Close">&times;</button>
<div id="signupInitial" class="active"> <div id="signupInitial" class="active">
<h2>Get your free API key</h2> <h2>Get your free API key</h2>
<p>Enter your email to get started. No credit card required.</p> <p>Enter your email to get started. No credit card required.</p>
<div class="signup-error" id="signupError"></div> <div class="signup-error" id="signupError"></div>
<label for="signupEmail" class="sr-only">Email address</label>
<input type="email" id="signupEmail" placeholder="your.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> <input type="email" id="signupEmail" placeholder="your.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="signupBtn">Generate API Key →</button> <button class="btn btn-primary" style="width:100%" id="signupBtn">Generate API Key →</button>
<p style="margin-top:16px;color:var(--muted);font-size:0.8rem;text-align:center;">100 free PDFs/month • All endpoints included<br><a href="#" class="open-recover" style="color:var(--muted)">Lost your API key? Recover it →</a></p> <p style="margin-top:16px;color:var(--muted);font-size:0.8rem;text-align:center;">100 free PDFs/month • All endpoints included<br><a href="#" class="open-recover" style="color:var(--muted)">Lost your API key? Recover it →</a></p>
@ -454,6 +475,7 @@ html, body {
<h2>Enter verification code</h2> <h2>Enter verification code</h2>
<p>We sent a 6-digit code to <strong id="verifyEmailDisplay"></strong></p> <p>We sent a 6-digit code to <strong id="verifyEmailDisplay"></strong></p>
<div class="signup-error" id="verifyError"></div> <div class="signup-error" id="verifyError"></div>
<label for="verifyCode" class="sr-only">Verification code</label>
<input type="text" id="verifyCode" 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> <input type="text" id="verifyCode" 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="verifyBtn">Verify →</button> <button class="btn btn-primary" style="width:100%" id="verifyBtn">Verify →</button>
<p style="margin-top:16px;color:var(--muted);font-size:0.8rem;text-align:center;">Code expires in 15 minutes</p> <p style="margin-top:16px;color:var(--muted);font-size:0.8rem;text-align:center;">Code expires in 15 minutes</p>
@ -476,14 +498,15 @@ html, body {
<!-- Recovery Modal --> <!-- Recovery Modal -->
<div class="modal-overlay" id="recoverModal" role="dialog" aria-label="Recover API key"> <div class="modal-overlay" id="recoverModal" role="dialog" aria-modal="true" aria-label="Recover API key">
<div class="modal"> <div class="modal">
<button class="close" id="btn-close-recover">&times;</button> <button class="close" id="btn-close-recover" aria-label="Close">&times;</button>
<div id="recoverInitial" class="active"> <div id="recoverInitial" class="active">
<h2>Recover your API key</h2> <h2>Recover your API key</h2>
<p>Enter the email you signed up with. We'll send a verification code.</p> <p>Enter the email you signed up with. We'll send a verification code.</p>
<div class="signup-error" id="recoverError"></div> <div class="signup-error" id="recoverError"></div>
<label for="recoverEmailInput" class="sr-only">Email address</label>
<input type="email" id="recoverEmailInput" placeholder="your.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> <input type="email" id="recoverEmailInput" placeholder="your.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="recoverBtn">Send Verification Code →</button> <button class="btn btn-primary" style="width:100%" id="recoverBtn">Send Verification Code →</button>
<p style="margin-top:16px;color:var(--muted);font-size:0.8rem;text-align:center;">Your key will be shown here after verification — never sent via email</p> <p style="margin-top:16px;color:var(--muted);font-size:0.8rem;text-align:center;">Your key will be shown here after verification — never sent via email</p>
@ -498,6 +521,7 @@ html, body {
<h2>Enter verification code</h2> <h2>Enter verification code</h2>
<p>We sent a 6-digit code to <strong id="recoverEmailDisplay"></strong></p> <p>We sent a 6-digit code to <strong id="recoverEmailDisplay"></strong></p>
<div class="signup-error" id="recoverVerifyError"></div> <div class="signup-error" id="recoverVerifyError"></div>
<label for="recoverCode" class="sr-only">Verification code</label>
<input type="text" id="recoverCode" 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> <input type="text" id="recoverCode" 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="recoverVerifyBtn">Verify →</button> <button class="btn btn-primary" style="width:100%" id="recoverVerifyBtn">Verify →</button>
<p style="margin-top:16px;color:var(--muted);font-size:0.8rem;text-align:center;">Code expires in 15 minutes</p> <p style="margin-top:16px;color:var(--muted);font-size:0.8rem;text-align:center;">Code expires in 15 minutes</p>
@ -519,43 +543,7 @@ html, body {
</div> </div>
<!-- Email Change Modal -->
<div class="modal-overlay" id="emailChangeModal" role="dialog" aria-label="Change email">
<div class="modal">
<button class="close" id="btn-close-email-change">&times;</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>
<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>
<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>
<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 src="/app.js"></script>
</body> </body>
</html> </html>

1
public/partials/_footer.html
View file

@ -5,7 +5,6 @@
<a href="/">Home</a> <a href="/">Home</a>
<a href="/docs">Docs</a> <a href="/docs">Docs</a>
<a href="/status">API Status</a> <a href="/status">API Status</a>
<a href="/change-email">Change Email</a>
<a href="/impressum">Impressum</a> <a href="/impressum">Impressum</a>
<a href="/privacy">Privacy Policy</a> <a href="/privacy">Privacy Policy</a>
<a href="/terms">Terms of Service</a> <a href="/terms">Terms of Service</a>

8
public/privacy.html
View file

@ -20,7 +20,7 @@ body { font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Robo
a { color: var(--accent); text-decoration: none; transition: color 0.2s; } a { color: var(--accent); text-decoration: none; transition: color 0.2s; }
a:hover { color: var(--accent-hover); } a:hover { color: var(--accent-hover); }
.container { max-width: 800px; margin: 0 auto; padding: 0 24px; } .container { max-width: 800px; margin: 0 auto; padding: 0 24px; }
nav { padding: 20px 0; border-bottom: 1px solid var(--border); } 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; } 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 { 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); } .logo span { color: var(--accent); }
@ -44,6 +44,8 @@ footer .container { display: flex; justify-content: space-between; align-items:
footer .container { flex-direction: column; text-align: center; } footer .container { flex-direction: column; text-align: center; }
.nav-links { gap: 16px; } .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>
</head> </head>
<body> <body>
@ -178,9 +180,7 @@ footer .container { display: flex; justify-content: space-between; align-items:
<div class="footer-links"> <div class="footer-links">
<a href="/">Home</a> <a href="/">Home</a>
<a href="/docs">Docs</a> <a href="/docs">Docs</a>
<a href="/health">API Status</a> <a href="/status">API Status</a>
<a href="/#change-email" class="open-email-change">Change Email</a>
<a href="mailto:support@docfast.dev">Support</a>
<a href="/impressum">Impressum</a> <a href="/impressum">Impressum</a>
<a href="/privacy">Privacy Policy</a> <a href="/privacy">Privacy Policy</a>
<a href="/terms">Terms of Service</a> <a href="/terms">Terms of Service</a>

1
public/sitemap.xml
View file

@ -5,5 +5,4 @@
<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/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/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/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> </urlset>

293
public/src/change-email.html
View file

@ -1,293 +0,0 @@
<!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>

1
public/status.html
View file

@ -95,7 +95,6 @@ footer .container { display: flex; justify-content: space-between; align-items:
<a href="/">Home</a> <a href="/">Home</a>
<a href="/docs">Docs</a> <a href="/docs">Docs</a>
<a href="/status">API Status</a> <a href="/status">API Status</a>
<a href="/change-email">Change Email</a>
<a href="/impressum">Impressum</a> <a href="/impressum">Impressum</a>
<a href="/privacy">Privacy Policy</a> <a href="/privacy">Privacy Policy</a>
<a href="/terms">Terms of Service</a> <a href="/terms">Terms of Service</a>

10
public/terms.html
View file

@ -20,7 +20,7 @@ body { font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Robo
a { color: var(--accent); text-decoration: none; transition: color 0.2s; } a { color: var(--accent); text-decoration: none; transition: color 0.2s; }
a:hover { color: var(--accent-hover); } a:hover { color: var(--accent-hover); }
.container { max-width: 800px; margin: 0 auto; padding: 0 24px; } .container { max-width: 800px; margin: 0 auto; padding: 0 24px; }
nav { padding: 20px 0; border-bottom: 1px solid var(--border); } 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; } 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 { 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); } .logo span { color: var(--accent); }
@ -44,6 +44,8 @@ footer .container { display: flex; justify-content: space-between; align-items:
footer .container { flex-direction: column; text-align: center; } footer .container { flex-direction: column; text-align: center; }
.nav-links { gap: 16px; } .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>
</head> </head>
<body> <body>
@ -138,7 +140,7 @@ footer .container { display: flex; justify-content: space-between; align-items:
<ul> <ul>
<li><strong>Target:</strong> 99.5% uptime (best effort, no SLA for free tier)</li> <li><strong>Target:</strong> 99.5% uptime (best effort, no SLA for free tier)</li>
<li><strong>Maintenance:</strong> Scheduled maintenance with advance notice</li> <li><strong>Maintenance:</strong> Scheduled maintenance with advance notice</li>
<li><strong>Status page:</strong> <a href="/health">https://docfast.dev/health</a></li> <li><strong>Status page:</strong> <a href="/status">https://docfast.dev/status</a></li>
</ul> </ul>
<h3>5.2 Performance</h3> <h3>5.2 Performance</h3>
@ -250,9 +252,7 @@ footer .container { display: flex; justify-content: space-between; align-items:
<div class="footer-links"> <div class="footer-links">
<a href="/">Home</a> <a href="/">Home</a>
<a href="/docs">Docs</a> <a href="/docs">Docs</a>
<a href="/health">API Status</a> <a href="/status">API Status</a>
<a href="/#change-email" class="open-email-change">Change Email</a>
<a href="mailto:support@docfast.dev">Support</a>
<a href="/impressum">Impressum</a> <a href="/impressum">Impressum</a>
<a href="/privacy">Privacy Policy</a> <a href="/privacy">Privacy Policy</a>
<a href="/terms">Terms of Service</a> <a href="/terms">Terms of Service</a>

8
src/index.ts
View file

@ -12,7 +12,6 @@ import { healthRouter } from "./routes/health.js";
import { signupRouter } from "./routes/signup.js"; import { signupRouter } from "./routes/signup.js";
import { recoverRouter } from "./routes/recover.js"; import { recoverRouter } from "./routes/recover.js";
import { billingRouter } from "./routes/billing.js"; import { billingRouter } from "./routes/billing.js";
import { emailChangeRouter } from "./routes/email-change.js";
import { authMiddleware } from "./middleware/auth.js"; import { authMiddleware } from "./middleware/auth.js";
import { usageMiddleware, loadUsageData } from "./middleware/usage.js"; import { usageMiddleware, loadUsageData } from "./middleware/usage.js";
import { getUsageStats } from "./middleware/usage.js"; import { getUsageStats } from "./middleware/usage.js";
@ -56,7 +55,6 @@ app.use((req, res, next) => {
const isAuthBillingRoute = req.path.startsWith('/v1/signup') || const isAuthBillingRoute = req.path.startsWith('/v1/signup') ||
req.path.startsWith('/v1/recover') || req.path.startsWith('/v1/recover') ||
req.path.startsWith('/v1/billing') || req.path.startsWith('/v1/billing') ||
req.path.startsWith('/v1/email-change');
if (isAuthBillingRoute) { if (isAuthBillingRoute) {
res.setHeader("Access-Control-Allow-Origin", "https://docfast.dev"); res.setHeader("Access-Control-Allow-Origin", "https://docfast.dev");
@ -97,7 +95,6 @@ app.use("/health", healthRouter);
app.use("/v1/signup", signupRouter); app.use("/v1/signup", signupRouter);
app.use("/v1/recover", recoverRouter); app.use("/v1/recover", recoverRouter);
app.use("/v1/billing", billingRouter); app.use("/v1/billing", billingRouter);
app.use("/v1/email-change", emailChangeRouter);
// Authenticated routes — conversion routes get tighter body limits (500KB) // Authenticated routes — conversion routes get tighter body limits (500KB)
const convertBodyLimit = express.json({ limit: "500kb" }); const convertBodyLimit = express.json({ limit: "500kb" });
@ -217,11 +214,6 @@ app.get("/terms", (_req, res) => {
res.sendFile(path.join(__dirname, "../public/terms.html")); res.sendFile(path.join(__dirname, "../public/terms.html"));
}); });
app.get("/change-email", (_req, res) => {
res.setHeader('Cache-Control', 'public, max-age=3600');
res.sendFile(path.join(__dirname, "../public/change-email.html"));
});
app.get("/status", (_req, res) => { app.get("/status", (_req, res) => {
res.setHeader("Cache-Control", "public, max-age=60"); res.setHeader("Cache-Control", "public, max-age=60");
res.sendFile(path.join(__dirname, "../public/status.html")); res.sendFile(path.join(__dirname, "../public/status.html"));

99
src/routes/email-change.ts
View file

@ -1,99 +0,0 @@
import { Router } from "express";
import type { Request, Response } from "express";
import rateLimit from "express-rate-limit";
import { createPendingVerification, verifyCode } from "../services/verification.js";
import { sendVerificationEmail } from "../services/email.js";
import { getAllKeys, updateKeyEmail } from "../services/keys.js";
import logger from "../services/logger.js";
const router = Router();
const changeLimiter = rateLimit({
windowMs: 60 * 60 * 1000,
max: 3,
message: { error: "Too many attempts. Please try again in 1 hour." },
standardHeaders: true,
legacyHeaders: false,
});
router.post("/", changeLimiter, async (req: Request, res: Response) => {
const apiKey = req.headers.authorization?.replace(/^Bearer\s+/i, "") || req.body?.apiKey;
const newEmail = req.body?.newEmail;
if (!apiKey || typeof apiKey !== "string") {
res.status(400).json({ error: "API key is required (Authorization header or body)." });
return;
}
if (!newEmail || typeof newEmail !== "string" || !/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(newEmail)) {
res.status(400).json({ error: "A valid new email address is required." });
return;
}
const cleanEmail = newEmail.trim().toLowerCase();
const keys = getAllKeys();
const userKey = keys.find((k: any) => k.key === apiKey);
if (!userKey) {
res.status(401).json({ error: "Invalid API key." });
return;
}
const existing = keys.find((k: any) => k.email === cleanEmail);
if (existing) {
res.status(409).json({ error: "This email is already associated with another account." });
return;
}
const pending = await createPendingVerification(cleanEmail);
sendVerificationEmail(cleanEmail, (pending as any).code).catch((err: Error) => {
logger.error({ err, email: cleanEmail }, "Failed to send email change verification");
});
res.json({ status: "verification_sent", message: "Verification code sent to your new email address." });
});
router.post("/verify", changeLimiter, async (req: Request, res: Response) => {
const apiKey = req.headers.authorization?.replace(/^Bearer\s+/i, "") || req.body?.apiKey;
const { newEmail, code } = req.body || {};
if (!apiKey || !newEmail || !code) {
res.status(400).json({ error: "API key, new email, and code are required." });
return;
}
const cleanEmail = newEmail.trim().toLowerCase();
const cleanCode = String(code).trim();
const keys = getAllKeys();
const userKey = keys.find((k: any) => k.key === apiKey);
if (!userKey) {
res.status(401).json({ error: "Invalid API key." });
return;
}
const result = await verifyCode(cleanEmail, cleanCode);
switch (result.status) {
case "ok": {
const updated = await updateKeyEmail(apiKey, cleanEmail);
if (updated) {
res.json({ status: "updated", message: "Email address updated successfully.", newEmail: cleanEmail });
} else {
res.status(500).json({ error: "Failed to update email." });
}
break;
}
case "expired":
res.status(410).json({ error: "Verification code has expired. Please request a new one." });
break;
case "max_attempts":
res.status(429).json({ error: "Too many failed attempts. Please request a new code." });
break;
case "invalid":
res.status(400).json({ error: "Invalid verification code." });
break;
}
});
export { router as emailChangeRouter };

1
templates/partials/footer.html
View file

@ -5,7 +5,6 @@
<a href="/">Home</a> <a href="/">Home</a>
<a href="/docs">Docs</a> <a href="/docs">Docs</a>
<a href="/health">API Status</a> <a href="/health">API Status</a>
<a href="/#change-email" class="open-email-change">Change Email</a>
<a href="mailto:support@docfast.dev">Support</a> <a href="mailto:support@docfast.dev">Support</a>
<a href="/impressum">Impressum</a> <a href="/impressum">Impressum</a>
<a href="/privacy">Privacy Policy</a> <a href="/privacy">Privacy Policy</a>