feat: add 6-digit code email verification to signup flow
- POST /v1/signup/free now returns verification code (temp in response) - New POST /v1/signup/verify endpoint to verify code and get API key - Codes expire after 15 minutes, max 3 attempts - Frontend updated with 2-step signup modal (email → code → key) - Legacy token verification kept for existing links
This commit is contained in:
parent
0a3f935af1
commit
f59b99203e
4 changed files with 219 additions and 59 deletions
|
|
@ -113,10 +113,11 @@ footer .container { display: flex; align-items: center; justify-content: space-b
|
|||
.modal .close:hover { color: var(--fg); }
|
||||
|
||||
/* Signup states */
|
||||
#signupInitial, #signupLoading, #signupResult { display: none; }
|
||||
#signupInitial, #signupLoading, #signupVerify, #signupResult { display: none; }
|
||||
#signupInitial.active { display: block; }
|
||||
#signupLoading.active { display: flex; flex-direction: column; align-items: center; padding: 40px 0; text-align: center; }
|
||||
#signupResult.active { display: block; }
|
||||
#signupVerify.active { display: block; }
|
||||
.spinner { width: 36px; height: 36px; border: 3px solid var(--border); border-top-color: var(--accent); border-radius: 50%; animation: spin 0.7s linear infinite; margin-bottom: 16px; }
|
||||
@keyframes spin { to { transform: rotate(360deg); } }
|
||||
|
||||
|
|
@ -356,12 +357,24 @@ html, body {
|
|||
<p style="color:var(--muted);margin:0">Generating your API key…</p>
|
||||
</div>
|
||||
|
||||
<div id="signupVerify">
|
||||
<h2>Enter verification code</h2>
|
||||
<p>We sent a 6-digit code to <strong id="verifyEmailDisplay"></strong></p>
|
||||
<div class="signup-error" id="verifyError"></div>
|
||||
<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>
|
||||
<p style="margin-top:16px;color:var(--muted);font-size:0.8rem;text-align:center;">Code expires in 15 minutes</p>
|
||||
</div>
|
||||
|
||||
<div id="signupResult">
|
||||
<h2>📧 Check your email!</h2>
|
||||
<p style="color:var(--fg);line-height:1.7;">We've sent a verification link to your email address. Click the link to get your API key.</p>
|
||||
<h2>🚀 Your API key is ready!</h2>
|
||||
<div class="warning-box">
|
||||
<span class="icon">💡</span>
|
||||
<span>The link expires in 24 hours. Check your spam folder if you don't see it.</span>
|
||||
<span class="icon">⚠️</span>
|
||||
<span>Save your API key now — we can't recover it later.</span>
|
||||
</div>
|
||||
<div style="background:var(--bg);border:1px solid var(--accent);border-radius:8px;padding:14px;font-family:monospace;font-size:0.82rem;word-break:break-all;margin:16px 0;position:relative;">
|
||||
<span id="apiKeyText"></span>
|
||||
<button onclick="copyKey()" id="copyBtn" style="position:absolute;top:8px;right:8px;background:var(--accent);color:var(--bg);border:none;border-radius:4px;padding:4px 12px;cursor:pointer;font-size:0.8rem;">Copy</button>
|
||||
</div>
|
||||
<p style="margin-top:20px;color:var(--muted);font-size:0.9rem;">100 free PDFs/month • <a href="/docs">Read the docs →</a></p>
|
||||
</div>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue