feat: update search page and improve details

2026-04-26 01:08:10 +08:00
parent 6415200f34
commit 4fc4b070dc
19 changed files with 1265 additions and 222 deletions
@@ -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>