adrianbonpin/deckyvault
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases 1 Wiki Activity

feat: update search page and improve details

Browse Source
This commit is contained in:
adrianbonpin
2026-04-26 01:08:10 +08:00
parent 6415200f34
commit 4fc4b070dc
19 changed files with 1265 additions and 222 deletions
Download Patch File Download Diff File Expand all files Collapse all files
.superpowers/brainstorm/26716-1777131188/content/auth-layout.html
+103
View File
@@ -0,0 +1,103 @@
<h2>Auth Page Layout</h2>
<p class="subtitle">Centered card layout used across all auth pages (login, signup, forgot-password, reset-password)</p>
<div class="split">
<div class="mockup">
<div class="mockup-header">Desktop Layout</div>
<div class="mockup-body" style="background: #100b14; padding: 0; min-height: 420px; display: flex; flex-direction: column; align-items: center; justify-content: center;">
<!-- Background decorative elements -->
<div style="position: absolute; top: 40px; left: 40px; width: 120px; height: 120px; border-radius: 50%; background: radial-gradient(circle, rgba(235,55,121,0.15), transparent); filter: blur(30px);"></div>
<div style="position: absolute; bottom: 60px; right: 60px; width: 100px; height: 100px; border-radius: 50%; background: radial-gradient(circle, rgba(87,27,139,0.2), transparent); filter: blur(25px);"></div>
<!-- Auth Card -->
<div style="background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.08); border-radius: 12px; padding: 32px; width: 100%; max-width: 400px; margin: 20px; backdrop-filter: blur(10px);">
<!-- Logo -->
<div style="text-align: center; margin-bottom: 24px;">
<div style="font-size: 20px; font-weight: bold; color: #ebe4f1;">🔐 DeckyVault</div>
<div style="font-size: 13px; color: rgba(235,228,241,0.5); margin-top: 4px;">Sign in to your account</div>
</div>
<!-- Social Buttons -->
<div style="display: flex; gap: 8px; margin-bottom: 16px;">
<button style="flex: 1; padding: 10px; border-radius: 8px; border: 1px solid rgba(255,255,255,0.1); background: rgba(255,255,255,0.03); color: #ebe4f1; font-size: 13px; cursor: pointer;">🔵 Google</button>
<button style="flex: 1; padding: 10px; border-radius: 8px; border: 1px solid rgba(255,255,255,0.1); background: rgba(255,255,255,0.03); color: #ebe4f1; font-size: 13px; cursor: pointer;">🟣 Discord</button>
</div>
<!-- Divider -->
<div style="display: flex; align-items: center; gap: 12px; margin: 16px 0;">
<div style="flex: 1; height: 1px; background: rgba(255,255,255,0.08);"></div>
<span style="font-size: 11px; color: rgba(235,228,241,0.4); text-transform: uppercase;">or continue with email</span>
<div style="flex: 1; height: 1px; background: rgba(255,255,255,0.08);"></div>
</div>
<!-- Email Input -->
<div style="margin-bottom: 12px;">
<label style="font-size: 12px; color: rgba(235,228,241,0.6); display: block; margin-bottom: 4px;">Email</label>
<input style="width: 100%; padding: 10px 12px; border-radius: 8px; border: 1px solid rgba(255,255,255,0.1); background: rgba(255,255,255,0.03); color: #ebe4f1; font-size: 14px; box-sizing: border-box;" placeholder="you@example.com" autocomplete="username webauthn" />
</div>
<!-- Password Input (conditional) -->
<div style="margin-bottom: 16px;">
<label style="font-size: 12px; color: rgba(235,228,241,0.6); display: block; margin-bottom: 4px;">Password</label>
<input style="width: 100%; padding: 10px 12px; border-radius: 8px; border: 1px solid rgba(255,255,255,0.1); background: rgba(255,255,255,0.03); color: #ebe4f1; font-size: 14px; box-sizing: border-box;" type="password" placeholder="••••••••" autocomplete="current-password webauthn" />
</div>
<!-- Submit -->
<button style="width: 100%; padding: 10px; border-radius: 8px; border: none; background: #eb3779; color: white; font-size: 14px; font-weight: 600; cursor: pointer;">Continue</button>
<!-- Links -->
<div style="text-align: center; margin-top: 16px; font-size: 12px;">
<a style="color: rgba(235,228,241,0.5); text-decoration: none;">Forgot password?</a>
<span style="color: rgba(235,228,241,0.3); margin: 0 8px;">•</span>
<a style="color: #eb3779; text-decoration: none;">Create account</a>
</div>
</div>
</div>
</div>
<div class="mockup">
<div class="mockup-header">Mobile Layout</div>
<div class="mockup-body" style="background: #100b14; padding: 0; min-height: 420px; display: flex; flex-direction: column; align-items: center; justify-content: flex-start; padding-top: 24px;">
<!-- Same card but full-width on mobile -->
<div style="background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.08); border-radius: 12px; padding: 24px 20px; width: calc(100% - 32px); max-width: none; margin: 0 16px;">
<div style="text-align: center; margin-bottom: 20px;">
<div style="font-size: 18px; font-weight: bold; color: #ebe4f1;">🔐 DeckyVault</div>
<div style="font-size: 12px; color: rgba(235,228,241,0.5); margin-top: 4px;">Sign in to your account</div>
</div>
<div style="display: flex; gap: 8px; margin-bottom: 16px;">
<button style="flex: 1; padding: 10px; border-radius: 8px; border: 1px solid rgba(255,255,255,0.1); background: rgba(255,255,255,0.03); color: #ebe4f1; font-size: 13px;">🔵 Google</button>
<button style="flex: 1; padding: 10px; border-radius: 8px; border: 1px solid rgba(255,255,255,0.1); background: rgba(255,255,255,0.03); color: #ebe4f1; font-size: 13px;">🟣 Discord</button>
</div>
<div style="display: flex; align-items: center; gap: 12px; margin: 16px 0;">
<div style="flex: 1; height: 1px; background: rgba(255,255,255,0.08);"></div>
<span style="font-size: 11px; color: rgba(235,228,241,0.4);">or email</span>
<div style="flex: 1; height: 1px; background: rgba(255,255,255,0.08);"></div>
</div>
<input style="width: 100%; padding: 10px 12px; border-radius: 8px; border: 1px solid rgba(255,255,255,0.1); background: rgba(255,255,255,0.03); color: #ebe4f1; font-size: 14px; margin-bottom: 10px; box-sizing: border-box;" placeholder="you@example.com" />
<input style="width: 100%; padding: 10px 12px; border-radius: 8px; border: 1px solid rgba(255,255,255,0.1); background: rgba(255,255,255,0.03); color: #ebe4f1; font-size: 14px; margin-bottom: 16px; box-sizing: border-box;" type="password" placeholder="••••••••" />
<button style="width: 100%; padding: 10px; border-radius: 8px; border: none; background: #eb3779; color: white; font-size: 14px; font-weight: 600;">Continue</button>
<div style="text-align: center; margin-top: 14px; font-size: 12px;">
<a style="color: rgba(235,228,241,0.5);">Forgot password?</a>
<span style="color: rgba(235,228,241,0.3); margin: 0 8px;">•</span>
<a style="color: #eb3779;">Create account</a>
</div>
</div>
</div>
</div>
</div>
<div class="section" style="margin-top: 20px;">
<h3>Layout Specs</h3>
<ul>
<li><strong>Container:</strong> Full viewport height minus navbar, centered content</li>
<li><strong>Card:</strong> Max-width 400px, glass-morphism style (subtle border, blur backdrop)</li>
<li><strong>Background:</strong> Subtle radial gradient orbs for depth (pink + purple)</li>
<li><strong>Responsive:</strong> Card goes full-width on mobile with reduced padding</li>
<li><strong>Animations:</strong> Card fades in with Motion (consistent with existing navbar pattern)</li>
</ul>
</div>
.superpowers/brainstorm/26716-1777131188/content/login-flow.html
+124
View File
@@ -0,0 +1,124 @@
<h2>Login Flow — Email-First with Conditional Passkey</h2>
<p class="subtitle">Two-phase login: email check → password/passkey</p>
<div class="section">
<h3>Phase 1: Email Entry</h3>
<div class="mockup">
<div class="mockup-header">Login — Initial Screen</div>
<div class="mockup-body" style="background: #100b14; padding: 20px; min-height: 380px;">
<div style="background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.08); border-radius: 12px; padding: 28px; max-width: 380px; margin: 0 auto;">
<div style="text-align: center; margin-bottom: 20px;">
<div style="font-size: 18px; font-weight: bold; color: #ebe4f1;">Welcome back</div>
<div style="font-size: 12px; color: rgba(235,228,241,0.5); margin-top: 4px;">Sign in to DeckyVault</div>
</div>
<!-- Social buttons -->
<div style="display: flex; gap: 8px; margin-bottom: 16px;">
<button style="flex: 1; padding: 10px; border-radius: 8px; border: 1px solid rgba(255,255,255,0.1); background: rgba(255,255,255,0.03); color: #ebe4f1; font-size: 13px;">🔵 Google</button>
<button style="flex: 1; padding: 10px; border-radius: 8px; border: 1px solid rgba(255,255,255,0.1); background: rgba(255,255,255,0.03); color: #ebe4f1; font-size: 13px;">🟣 Discord</button>
</div>
<div style="display: flex; align-items: center; gap: 12px; margin: 16px 0;">
<div style="flex: 1; height: 1px; background: rgba(255,255,255,0.08);"></div>
<span style="font-size: 11px; color: rgba(235,228,241,0.4);">or continue with email</span>
<div style="flex: 1; height: 1px; background: rgba(255,255,255,0.08);"></div>
</div>
<!-- Email only — NO password field yet -->
<label style="font-size: 12px; color: rgba(235,228,241,0.6); display: block; margin-bottom: 4px;">Email</label>
<input style="width: 100%; padding: 10px 12px; border-radius: 8px; border: 1px solid rgba(255,255,255,0.1); background: rgba(255,255,255,0.03); color: #ebe4f1; font-size: 14px; margin-bottom: 16px; box-sizing: border-box;" placeholder="you@example.com" autocomplete="username webauthn" />
<button style="width: 100%; padding: 10px; border-radius: 8px; border: none; background: #eb3779; color: white; font-size: 14px; font-weight: 600;">Continue</button>
<div style="text-align: center; margin-top: 14px; font-size: 12px;">
<span style="color: rgba(235,228,241,0.5);">Don't have an account? </span>
<a style="color: #eb3779;">Create one</a>
</div>
</div>
</div>
</div>
<div style="background: rgba(34,197,94,0.05); border: 1px solid rgba(34,197,94,0.15); border-radius: 8px; padding: 12px; margin-top: 12px;">
<p style="color: rgba(235,228,241,0.7); font-size: 12px; margin: 0;">
<strong>Key:</strong> Only email field is shown initially. The <code>autocomplete="username webauthn"</code> attribute enables passkey conditional UI — browsers with passkey support will offer to autofill passkey credentials.
</p>
</div>
</div>
<div class="section">
<h3>Phase 2a: Email Exists → Password Entry</h3>
<div class="mockup">
<div class="mockup-header">Login — Password Step (email exists)</div>
<div class="mockup-body" style="background: #100b14; padding: 20px; min-height: 380px;">
<div style="background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.08); border-radius: 12px; padding: 28px; max-width: 380px; margin: 0 auto;">
<div style="text-align: center; margin-bottom: 20px;">
<div style="font-size: 18px; font-weight: bold; color: #ebe4f1;">Welcome back</div>
<div style="font-size: 12px; color: rgba(235,228,241,0.5); margin-top: 4px;">Signing in as <strong style="color: #ebe4f1;">user@example.com</strong> <a style="color: #eb3779; font-size: 11px; cursor: pointer;">change</a></div>
</div>
<!-- Password field with autocomplete for passkey conditional UI -->
<label style="font-size: 12px; color: rgba(235,228,241,0.6); display: block; margin-bottom: 4px;">Password</label>
<input style="width: 100%; padding: 10px 12px; border-radius: 8px; border: 1px solid rgba(255,255,255,0.1); background: rgba(255,255,255,0.03); color: #ebe4f1; font-size: 14px; margin-bottom: 8px; box-sizing: border-box;" type="password" placeholder="Enter your password" autocomplete="current-password webauthn" />
<div style="text-align: right; margin-bottom: 16px;">
<a style="font-size: 12px; color: rgba(235,228,241,0.5);">Forgot password?</a>
</div>
<button style="width: 100%; padding: 10px; border-radius: 8px; border: none; background: #eb3779; color: white; font-size: 14px; font-weight: 600;">Sign in</button>
<!-- Passkey autofill hint -->
<div style="margin-top: 12px; padding: 10px; border-radius: 8px; background: rgba(235,55,121,0.05); border: 1px solid rgba(235,55,121,0.1); text-align: center;">
<div style="font-size: 12px; color: rgba(235,228,241,0.6);">🔑 Your browser may offer to sign in with a passkey</div>
</div>
</div>
</div>
</div>
<div style="background: rgba(34,197,94,0.05); border: 1px solid rgba(34,197,94,0.15); border-radius: 8px; padding: 12px; margin-top: 12px;">
<p style="color: rgba(235,228,241,0.7); font-size: 12px; margin: 0;">
<strong>Conditional UI:</strong> The password field has <code>autocomplete="current-password webauthn"</code>. On mount, we call <code>authClient.signIn.passkey({ autoFill: true })</code> to preload passkeys. Browsers that support Conditional UI (Chrome, Safari, Edge) will show a passkey autofill dropdown when the user interacts with the password field.
</p>
</div>
</div>
<div class="section">
<h3>Phase 2b: Email NOT Found → Error + Signup Link</h3>
<div class="mockup">
<div class="mockup-header">Login — Email Not Found</div>
<div class="mockup-body" style="background: #100b14; padding: 20px; min-height: 380px;">
<div style="background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.08); border-radius: 12px; padding: 28px; max-width: 380px; margin: 0 auto;">
<div style="text-align: center; margin-bottom: 20px;">
<div style="font-size: 18px; font-weight: bold; color: #ebe4f1;">Welcome back</div>
<div style="font-size: 12px; color: rgba(235,228,241,0.5); margin-top: 4px;">Sign in to DeckyVault</div>
</div>
<!-- Email with error state -->
<label style="font-size: 12px; color: rgba(235,228,241,0.6); display: block; margin-bottom: 4px;">Email</label>
<input style="width: 100%; padding: 10px 12px; border-radius: 8px; border: 2px solid #ef4444; background: rgba(239,68,68,0.05); color: #ebe4f1; font-size: 14px; margin-bottom: 8px; box-sizing: border-box;" value="unknown@example.com" />
<!-- Error message -->
<div style="display: flex; align-items: center; gap: 6px; margin-bottom: 16px;">
<span style="color: #ef4444; font-size: 14px;">⚠</span>
<span style="font-size: 12px; color: #ef4444;">No account found with this email.</span>
<a style="font-size: 12px; color: #eb3779; white-space: nowrap; font-weight: 600;">Create one →</a>
</div>
<button style="width: 100%; padding: 10px; border-radius: 8px; border: none; background: #eb3779; color: white; font-size: 14px; font-weight: 600;">Continue</button>
</div>
</div>
</div>
</div>
<div class="section">
<h3>How Email Check Works</h3>
<div style="background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.08); border-radius: 8px; padding: 16px;">
<ol style="color: rgba(235,228,241,0.7); font-size: 13px; margin: 0; padding-left: 20px; line-height: 1.8;">
<li>User enters email and clicks "Continue"</li>
<li>Client calls <code>authClient.signIn.email()</code> with email + empty password</li>
<li>Better-auth returns an error if email doesn't exist</li>
<li>If error: show "No account found" with signup link</li>
<li>If email exists: transition to password field with email displayed</li>
</ol>
<p style="color: rgba(235,228,241,0.5); font-size: 11px; margin: 12px 0 0 0;">
<strong>Note:</strong> We use <code>signIn.email()</code> as the check mechanism rather than a separate endpoint. This avoids leaking whether an email exists via a dedicated check API.
</p>
</div>
</div>
.superpowers/brainstorm/26716-1777131188/content/password-reset.html
+127
View File
@@ -0,0 +1,127 @@
<h2>Password Reset Flow — Email OTP</h2>
<p class="subtitle">Two-page flow: request reset → verify OTP + set new password</p>
<div class="section">
<h3>Page 1: Forgot Password — Request OTP</h3>
<div class="mockup">
<div class="mockup-header">/forgot-password</div>
<div class="mockup-body" style="background: #100b14; padding: 20px; min-height: 380px;">
<div style="background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.08); border-radius: 12px; padding: 28px; max-width: 380px; margin: 0 auto;">
<div style="text-align: center; margin-bottom: 20px;">
<div style="font-size: 40px; margin-bottom: 8px;">🔒</div>
<div style="font-size: 18px; font-weight: bold; color: #ebe4f1;">Forgot your password?</div>
<div style="font-size: 12px; color: rgba(235,228,241,0.5); margin-top: 4px; line-height: 1.5;">Enter your email and we'll send you a verification code to reset your password.</div>
</div>
<label style="font-size: 12px; color: rgba(235,228,241,0.6); display: block; margin-bottom: 4px;">Email</label>
<input style="width: 100%; padding: 10px 12px; border-radius: 8px; border: 1px solid rgba(255,255,255,0.1); background: rgba(255,255,255,0.03); color: #ebe4f1; font-size: 14px; margin-bottom: 16px; box-sizing: border-box;" placeholder="you@example.com" />
<button style="width: 100%; padding: 10px; border-radius: 8px; border: none; background: #eb3779; color: white; font-size: 14px; font-weight: 600;">Send verification code</button>
<div style="text-align: center; margin-top: 14px;">
<a style="font-size: 12px; color: rgba(235,228,241,0.5);">← Back to sign in</a>
</div>
</div>
</div>
</div>
<div style="background: rgba(34,197,94,0.05); border: 1px solid rgba(34,197,94,0.15); border-radius: 8px; padding: 12px; margin-top: 12px;">
<p style="color: rgba(235,228,241,0.7); font-size: 12px; margin: 0;">
<strong>API:</strong> Calls <code>authClient.emailOtp.requestPasswordReset({ email })</code>. This triggers the server to send a "forget-password" OTP via the existing <code>sendVerificationOTP</code> handler.
</p>
</div>
</div>
<div class="section">
<h3>Page 2: Reset Password — OTP + New Password</h3>
<div class="mockup">
<div class="mockup-header">/reset-password?email=user@example.com</div>
<div class="mockup-body" style="background: #100b14; padding: 20px; min-height: 450px;">
<div style="background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.08); border-radius: 12px; padding: 28px; max-width: 380px; margin: 0 auto;">
<div style="text-align: center; margin-bottom: 20px;">
<div style="font-size: 40px; margin-bottom: 8px;">📧</div>
<div style="font-size: 18px; font-weight: bold; color: #ebe4f1;">Check your email</div>
<div style="font-size: 12px; color: rgba(235,228,241,0.5); margin-top: 4px; line-height: 1.5;">We sent a 6-digit code to <strong style="color: #ebe4f1;">user@example.com</strong></div>
</div>
<!-- OTP Input -->
<label style="font-size: 12px; color: rgba(235,228,241,0.6); display: block; margin-bottom: 8px; text-align: center;">Verification code</label>
<div style="display: flex; gap: 8px; justify-content: center; margin-bottom: 12px;">
<div style="width: 44px; height: 52px; border-radius: 8px; border: 1px solid rgba(255,255,255,0.1); background: rgba(255,255,255,0.03); display: flex; align-items: center; justify-content: center; font-size: 20px; font-weight: bold; color: rgba(235,228,241,0.3);">_</div>
<div style="width: 44px; height: 52px; border-radius: 8px; border: 1px solid rgba(255,255,255,0.1); background: rgba(255,255,255,0.03); display: flex; align-items: center; justify-content: center; font-size: 20px; font-weight: bold; color: rgba(235,228,241,0.3);">_</div>
<div style="width: 44px; height: 52px; border-radius: 8px; border: 1px solid rgba(255,255,255,0.1); background: rgba(255,255,255,0.03); display: flex; align-items: center; justify-content: center; font-size: 20px; font-weight: bold; color: rgba(235,228,241,0.3);">_</div>
<div style="width: 44px; height: 52px; border-radius: 8px; border: 1px solid rgba(255,255,255,0.1); background: rgba(255,255,255,0.03); display: flex; align-items: center; justify-content: center; font-size: 20px; font-weight: bold; color: rgba(235,228,241,0.3);">_</div>
<div style="width: 44px; height: 52px; border-radius: 8px; border: 1px solid rgba(255,255,255,0.1); background: rgba(255,255,255,0.03); display: flex; align-items: center; justify-content: center; font-size: 20px; font-weight: bold; color: rgba(235,228,241,0.3);">_</div>
<div style="width: 44px; height: 52px; border-radius: 8px; border: 1px solid rgba(255,255,255,0.1); background: rgba(255,255,255,0.03); display: flex; align-items: center; justify-content: center; font-size: 20px; font-weight: bold; color: rgba(235,228,241,0.3);">_</div>
</div>
<div style="text-align: center; margin-bottom: 16px; font-size: 12px;">
<span style="color: rgba(235,228,241,0.4);">Resend code in </span>
<span style="color: #eb3779; font-weight: 600;">4:23</span>
</div>
<!-- Divider -->
<div style="display: flex; align-items: center; gap: 12px; margin: 16px 0;">
<div style="flex: 1; height: 1px; background: rgba(255,255,255,0.08);"></div>
<span style="font-size: 11px; color: rgba(235,228,241,0.4);">then set new password</span>
<div style="flex: 1; height: 1px; background: rgba(255,255,255,0.08);"></div>
</div>
<!-- New Password -->
<label style="font-size: 12px; color: rgba(235,228,241,0.6); display: block; margin-bottom: 4px;">New password</label>
<input style="width: 100%; padding: 10px 12px; border-radius: 8px; border: 1px solid rgba(255,255,255,0.1); background: rgba(255,255,255,0.03); color: #ebe4f1; font-size: 14px; margin-bottom: 8px; box-sizing: border-box;" type="password" placeholder="Min. 10 characters" />
<!-- Password strength -->
<div style="margin-bottom: 12px;">
<div style="display: flex; gap: 4px; margin-bottom: 4px;">
<div style="flex: 1; height: 3px; border-radius: 2px; background: rgba(255,255,255,0.1);"></div>
<div style="flex: 1; height: 3px; border-radius: 2px; background: rgba(255,255,255,0.1);"></div>
<div style="flex: 1; height: 3px; border-radius: 2px; background: rgba(255,255,255,0.1);"></div>
<div style="flex: 1; height: 3px; border-radius: 2px; background: rgba(255,255,255,0.1);"></div>
<div style="flex: 1; height: 3px; border-radius: 2px; background: rgba(255,255,255,0.1);"></div>
</div>
</div>
<!-- Confirm Password -->
<label style="font-size: 12px; color: rgba(235,228,241,0.6); display: block; margin-bottom: 4px;">Confirm new password</label>
<input style="width: 100%; padding: 10px 12px; border-radius: 8px; border: 1px solid rgba(255,255,255,0.1); background: rgba(255,255,255,0.03); color: #ebe4f1; font-size: 14px; margin-bottom: 16px; box-sizing: border-box;" type="password" placeholder="Re-enter password" />
<button style="width: 100%; padding: 10px; border-radius: 8px; border: none; background: #eb3779; color: white; font-size: 14px; font-weight: 600;">Reset password</button>
<div style="text-align: center; margin-top: 14px;">
<a style="font-size: 12px; color: rgba(235,228,241,0.5);">← Back to sign in</a>
</div>
</div>
</div>
</div>
</div>
<div class="section">
<h3>Success State</h3>
<div class="mockup">
<div class="mockup-header">After successful reset</div>
<div class="mockup-body" style="background: #100b14; padding: 20px; min-height: 200px;">
<div style="background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.08); border-radius: 12px; padding: 28px; max-width: 380px; margin: 0 auto; text-align: center;">
<div style="font-size: 40px; margin-bottom: 12px;">✅</div>
<div style="font-size: 18px; font-weight: bold; color: #ebe4f1; margin-bottom: 8px;">Password reset successful</div>
<div style="font-size: 12px; color: rgba(235,228,241,0.5); margin-bottom: 20px;">Your password has been updated. You can now sign in with your new password.</div>
<button style="padding: 10px 32px; border-radius: 8px; border: none; background: #eb3779; color: white; font-size: 14px; font-weight: 600;">Sign in</button>
</div>
</div>
</div>
</div>
<div class="section">
<h3>API Flow</h3>
<div style="background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.08); border-radius: 8px; padding: 16px;">
<ol style="color: rgba(235,228,241,0.7); font-size: 13px; margin: 0; padding-left: 20px; line-height: 2;">
<li>User enters email on <code>/forgot-password</code></li>
<li>Client calls <code>authClient.emailOtp.requestPasswordReset({ email })</code></li>
<li>Server sends OTP with type "forget-password" via <code>sendVerificationOTP</code></li>
<li>User is redirected to <code>/reset-password?email=user@example.com</code></li>
<li>User enters OTP + new password + confirm password</li>
<li>Client calls <code>authClient.emailOtp.checkVerificationOtp({ email, otp, type: "forget-password" })</code> (optional validation)</li>
<li>Client calls <code>authClient.resetPassword({ newPassword, otp })</code></li>
<li>On success: show success screen, then redirect to <code>/login</code></li>
</ol>
</div>
</div>
.superpowers/brainstorm/26716-1777131188/content/signup-wizard.html
+192
View File
@@ -0,0 +1,192 @@
<h2>Signup Wizard — Step-by-Step Flow</h2>
<p class="subtitle">3 steps for email signup, 2 steps for social signup</p>
<div class="section">
<h3>Step 1: Account Creation</h3>
<div class="mockup">
<div class="mockup-header">Email Signup — Step 1 of 3</div>
<div class="mockup-body" style="background: #100b14; padding: 20px; min-height: 380px;">
<div style="background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.08); border-radius: 12px; padding: 28px; max-width: 380px; margin: 0 auto;">
<!-- Step indicator -->
<div style="display: flex; gap: 8px; justify-content: center; margin-bottom: 20px;">
<div style="width: 32px; height: 4px; border-radius: 2px; background: #eb3779;"></div>
<div style="width: 32px; height: 4px; border-radius: 2px; background: rgba(255,255,255,0.1);"></div>
<div style="width: 32px; height: 4px; border-radius: 2px; background: rgba(255,255,255,0.1);"></div>
</div>
<div style="text-align: center; margin-bottom: 20px;">
<div style="font-size: 18px; font-weight: bold; color: #ebe4f1;">Create your account</div>
<div style="font-size: 12px; color: rgba(235,228,241,0.5); margin-top: 4px;">Choose how you'd like to sign up</div>
</div>
<!-- Social buttons -->
<div style="display: flex; gap: 8px; margin-bottom: 16px;">
<button style="flex: 1; padding: 10px; border-radius: 8px; border: 1px solid rgba(255,255,255,0.1); background: rgba(255,255,255,0.03); color: #ebe4f1; font-size: 13px;">🔵 Google</button>
<button style="flex: 1; padding: 10px; border-radius: 8px; border: 1px solid rgba(255,255,255,0.1); background: rgba(255,255,255,0.03); color: #ebe4f1; font-size: 13px;">🟣 Discord</button>
</div>
<div style="display: flex; align-items: center; gap: 12px; margin: 16px 0;">
<div style="flex: 1; height: 1px; background: rgba(255,255,255,0.08);"></div>
<span style="font-size: 11px; color: rgba(235,228,241,0.4);">or use email</span>
<div style="flex: 1; height: 1px; background: rgba(255,255,255,0.08);"></div>
</div>
<!-- Form fields -->
<label style="font-size: 12px; color: rgba(235,228,241,0.6); display: block; margin-bottom: 4px;">Email</label>
<input style="width: 100%; padding: 10px 12px; border-radius: 8px; border: 1px solid rgba(255,255,255,0.1); background: rgba(255,255,255,0.03); color: #ebe4f1; font-size: 14px; margin-bottom: 12px; box-sizing: border-box;" placeholder="you@example.com" />
<label style="font-size: 12px; color: rgba(235,228,241,0.6); display: block; margin-bottom: 4px;">Password</label>
<input style="width: 100%; padding: 10px 12px; border-radius: 8px; border: 1px solid rgba(255,255,255,0.1); background: rgba(255,255,255,0.03); color: #ebe4f1; font-size: 14px; margin-bottom: 8px; box-sizing: border-box;" type="password" placeholder="Min. 10 characters" />
<!-- Password strength meter -->
<div style="margin-bottom: 16px;">
<div style="display: flex; gap: 4px; margin-bottom: 6px;">
<div style="flex: 1; height: 3px; border-radius: 2px; background: #ef4444;"></div>
<div style="flex: 1; height: 3px; border-radius: 2px; background: rgba(255,255,255,0.1);"></div>
<div style="flex: 1; height: 3px; border-radius: 2px; background: rgba(255,255,255,0.1);"></div>
<div style="flex: 1; height: 3px; border-radius: 2px; background: rgba(255,255,255,0.1);"></div>
<div style="flex: 1; height: 3px; border-radius: 2px; background: rgba(255,255,255,0.1);"></div>
</div>
<div style="font-size: 11px; color: #ef4444;">Weak — add uppercase, number, special char</div>
</div>
<button style="width: 100%; padding: 10px; border-radius: 8px; border: none; background: #eb3779; color: white; font-size: 14px; font-weight: 600;">Continue</button>
<div style="text-align: center; margin-top: 14px; font-size: 12px;">
<span style="color: rgba(235,228,241,0.5);">Already have an account? </span>
<a style="color: #eb3779;">Sign in</a>
</div>
</div>
</div>
</div>
</div>
<div class="section">
<h3>Step 2: Email Verification (OTP)</h3>
<div class="mockup">
<div class="mockup-header">Email Signup — Step 2 of 3</div>
<div class="mockup-body" style="background: #100b14; padding: 20px; min-height: 380px;">
<div style="background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.08); border-radius: 12px; padding: 28px; max-width: 380px; margin: 0 auto;">
<!-- Step indicator -->
<div style="display: flex; gap: 8px; justify-content: center; margin-bottom: 20px;">
<div style="width: 32px; height: 4px; border-radius: 2px; background: #22c55e;"></div>
<div style="width: 32px; height: 4px; border-radius: 2px; background: #eb3779;"></div>
<div style="width: 32px; height: 4px; border-radius: 2px; background: rgba(255,255,255,0.1);"></div>
</div>
<div style="text-align: center; margin-bottom: 20px;">
<div style="font-size: 18px; font-weight: bold; color: #ebe4f1;">Verify your email</div>
<div style="font-size: 12px; color: rgba(235,228,241,0.5); margin-top: 4px;">We sent a 6-digit code to <strong style="color: #ebe4f1;">user@example.com</strong></div>
</div>
<!-- OTP Input boxes -->
<div style="display: flex; gap: 8px; justify-content: center; margin-bottom: 16px;">
<div style="width: 44px; height: 52px; border-radius: 8px; border: 2px solid #eb3779; background: rgba(235,55,121,0.05); display: flex; align-items: center; justify-content: center; font-size: 20px; font-weight: bold; color: #ebe4f1;">4</div>
<div style="width: 44px; height: 52px; border-radius: 8px; border: 1px solid rgba(255,255,255,0.1); background: rgba(255,255,255,0.03); display: flex; align-items: center; justify-content: center; font-size: 20px; font-weight: bold; color: #ebe4f1;">7</div>
<div style="width: 44px; height: 52px; border-radius: 8px; border: 1px solid rgba(255,255,255,0.1); background: rgba(255,255,255,0.03); display: flex; align-items: center; justify-content: center; font-size: 20px; font-weight: bold; color: rgba(235,228,241,0.3);">_</div>
<div style="width: 44px; height: 52px; border-radius: 8px; border: 1px solid rgba(255,255,255,0.1); background: rgba(255,255,255,0.03); display: flex; align-items: center; justify-content: center; font-size: 20px; font-weight: bold; color: rgba(235,228,241,0.3);">_</div>
<div style="width: 44px; height: 52px; border-radius: 8px; border: 1px solid rgba(255,255,255,0.1); background: rgba(255,255,255,0.03); display: flex; align-items: center; justify-content: center; font-size: 20px; font-weight: bold; color: rgba(235,228,241,0.3);">_</div>
<div style="width: 44px; height: 52px; border-radius: 8px; border: 1px solid rgba(255,255,255,0.1); background: rgba(255,255,255,0.03); display: flex; align-items: center; justify-content: center; font-size: 20px; font-weight: bold; color: rgba(235,228,241,0.3);">_</div>
</div>
<!-- Timer and resend -->
<div style="text-align: center; margin-bottom: 16px; font-size: 12px;">
<span style="color: rgba(235,228,241,0.4);">Resend code in </span>
<span style="color: #eb3779; font-weight: 600;">4:23</span>
</div>
<button style="width: 100%; padding: 10px; border-radius: 8px; border: none; background: #eb3779; color: white; font-size: 14px; font-weight: 600; opacity: 0.5;" disabled>Verify</button>
<div style="text-align: center; margin-top: 14px; font-size: 12px;">
<a style="color: rgba(235,228,241,0.5);">← Back to signup</a>
</div>
</div>
</div>
</div>
</div>
<div class="section">
<h3>Step 3: Passkey Setup (Optional)</h3>
<div class="mockup">
<div class="mockup-header">Email Signup — Step 3 of 3 (Optional)</div>
<div class="mockup-body" style="background: #100b14; padding: 20px; min-height: 380px;">
<div style="background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.08); border-radius: 12px; padding: 28px; max-width: 380px; margin: 0 auto;">
<!-- Step indicator -->
<div style="display: flex; gap: 8px; justify-content: center; margin-bottom: 20px;">
<div style="width: 32px; height: 4px; border-radius: 2px; background: #22c55e;"></div>
<div style="width: 32px; height: 4px; border-radius: 2px; background: #22c55e;"></div>
<div style="width: 32px; height: 4px; border-radius: 2px; background: #eb3779;"></div>
</div>
<div style="text-align: center; margin-bottom: 20px;">
<div style="font-size: 40px; margin-bottom: 8px;">🔑</div>
<div style="font-size: 18px; font-weight: bold; color: #ebe4f1;">Set up a passkey</div>
<div style="font-size: 12px; color: rgba(235,228,241,0.5); margin-top: 4px; line-height: 1.5;">Sign in faster with biometrics or your device's security key. No password needed.</div>
</div>
<!-- Benefits -->
<div style="background: rgba(255,255,255,0.02); border-radius: 8px; padding: 14px; margin-bottom: 20px;">
<div style="font-size: 12px; color: rgba(235,228,241,0.6); display: flex; align-items: center; gap: 8px; margin-bottom: 8px;">
<span style="color: #22c55e;">✓</span> Faster sign-in with fingerprint or face
</div>
<div style="font-size: 12px; color: rgba(235,228,241,0.6); display: flex; align-items: center; gap: 8px; margin-bottom: 8px;">
<span style="color: #22c55e;">✓</span> More secure than passwords
</div>
<div style="font-size: 12px; color: rgba(235,228,241,0.6); display: flex; align-items: center; gap: 8px;">
<span style="color: #22c55e;">✓</span> Works across your devices
</div>
</div>
<button style="width: 100%; padding: 10px; border-radius: 8px; border: none; background: #eb3779; color: white; font-size: 14px; font-weight: 600; margin-bottom: 10px;">Set up passkey</button>
<button style="width: 100%; padding: 10px; border-radius: 8px; border: 1px solid rgba(255,255,255,0.1); background: transparent; color: rgba(235,228,241,0.6); font-size: 13px;">Skip for now</button>
</div>
</div>
</div>
</div>
<div class="section">
<h3>Social Signup Flow (2 steps)</h3>
<div style="background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.08); border-radius: 8px; padding: 16px;">
<p style="color: rgba(235,228,241,0.7); font-size: 13px; margin: 0;">
<strong>Step 1:</strong> User clicks Google/Discord → OAuth redirect → authenticated<br>
<strong>Step 2:</strong> Passkey setup (optional, same as Step 3 above) → Done<br><br>
<em>OTP step is skipped — email is already verified by the OAuth provider.</em>
</p>
</div>
</div>
<div class="section">
<h3>Password Strength Meter — States</h3>
<div style="display: flex; flex-direction: column; gap: 8px;">
<div style="background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.08); border-radius: 8px; padding: 12px;">
<div style="display: flex; gap: 4px; margin-bottom: 4px;">
<div style="flex: 1; height: 3px; border-radius: 2px; background: #ef4444;"></div>
<div style="flex: 1; height: 3px; border-radius: 2px; background: rgba(255,255,255,0.1);"></div>
<div style="flex: 1; height: 3px; border-radius: 2px; background: rgba(255,255,255,0.1);"></div>
<div style="flex: 1; height: 3px; border-radius: 2px; background: rgba(255,255,255,0.1);"></div>
<div style="flex: 1; height: 3px; border-radius: 2px; background: rgba(255,255,255,0.1);"></div>
</div>
<div style="font-size: 11px; color: #ef4444;">Weak — add 8+ chars, uppercase, number, special char</div>
</div>
<div style="background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.08); border-radius: 8px; padding: 12px;">
<div style="display: flex; gap: 4px; margin-bottom: 4px;">
<div style="flex: 1; height: 3px; border-radius: 2px; background: #f59e0b;"></div>
<div style="flex: 1; height: 3px; border-radius: 2px; background: #f59e0b;"></div>
<div style="flex: 1; height: 3px; border-radius: 2px; background: rgba(255,255,255,0.1);"></div>
<div style="flex: 1; height: 3px; border-radius: 2px; background: rgba(255,255,255,0.1);"></div>
<div style="flex: 1; height: 3px; border-radius: 2px; background: rgba(255,255,255,0.1);"></div>
</div>
<div style="font-size: 11px; color: #f59e0b;">Fair — add a special character and more length</div>
</div>
<div style="background: rgba(255,255,255,0.03); border: 1px solid rgba(255,255,255,0.08); border-radius: 8px; padding: 12px;">
<div style="display: flex; gap: 4px; margin-bottom: 4px;">
<div style="flex: 1; height: 3px; border-radius: 2px; background: #22c55e;"></div>
<div style="flex: 1; height: 3px; border-radius: 2px; background: #22c55e;"></div>
<div style="flex: 1; height: 3px; border-radius: 2px; background: #22c55e;"></div>
<div style="flex: 1; height: 3px; border-radius: 2px; background: #22c55e;"></div>
<div style="flex: 1; height: 3px; border-radius: 2px; background: #22c55e;"></div>
</div>
<div style="font-size: 11px; color: #22c55e;">Strong — great password!</div>
</div>
</div>
</div>
.superpowers/brainstorm/26716-1777131188/content/waiting.html
+3
View File
@@ -0,0 +1,3 @@
<div style="display:flex;align-items:center;justify-content:center;min-height:60vh">
<p class="subtitle">Continuing in terminal...</p>
</div>