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

- 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 2026-02-17 11:31:37 +00:00
parent 5099bae41f
commit 8f3b1a9660
12 changed files with 674 additions and 121 deletions

View file

@ -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">&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>
<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>