design: wireframes and prototypes for forgot/reset password pages (spec #004)#26
Merged
Merged
Conversation
Covers spec #4 — two pages: /forgot-password (email submission with generic success message) and /reset-password (new+confirm password form with valid/expired/used token states and password mismatch validation). Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
Review Summary by QodoAdd wireframes and interactive prototypes for forgot/reset password pages with i18n and token states
WalkthroughsDescription• Add interactive HTML prototypes for /forgot-password and /reset-password pages with full internationalization (ZH/EN) • Implement password reset form with new password and confirm password fields, eye-toggle visibility controls, and front-end validation • Include 3 prototype states for reset password: valid token (form shown), expired token, and used token (error panel shown) • Add generic success panels that do not reveal whether email exists (security by design per SC-002) • Implement loading spinners during async simulation and comprehensive accessibility features (ARIA labels, roles) • Create Pencil wireframes with 6 frames each: Desktop ZH/EN, Mobile ZH/EN, and Component ZH/EN layouts • Document responsive design across breakpoints (Desktop 1440×900, Mobile 390×812) with design tokens and Lucide icons • Cover specification 004-forgot-reset-password requirements FR-001 through FR-009 Diagramflowchart LR
A["Forgot Password Page"] -->|Email Input| B["Generic Success Panel"]
B -->|Security by Design| C["No Email Existence Leak"]
D["Reset Password Page"] -->|Valid Token| E["Password Form"]
D -->|Expired/Used Token| F["Error Panel"]
E -->|Validation| G["Success & Redirect to Login"]
H["Wireframes"] -->|Desktop/Mobile/Component| I["Design System"]
J["Prototypes"] -->|i18n ZH/EN| K["Interactive States"]
File Changes1. design/prototype/pages/account/reset-password.html
|
Code Review by Qodo
|
![devin-ai-integration[bot]](https://avatars.githubusercontent.com/in/811515?s=60&v=4){kind=small}
…scription Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
…totypes - forgot-password.spec.ts: 16 tests covering UI elements, language toggle, form validation, submit success flow, navigation, and responsive rendering - reset-password.spec.ts: 24 tests covering valid/error token states, prototype state switcher, form validation, submit success flow, language toggle, and responsive rendering - NAVIGATION.md: add global Mermaid flowchart and mark 004a/004b as complete Co-Authored-By: Claude Sonnet 4.6 <noreply@anthropic.com>
This file contains hidden or bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
Sign up for free
to join this conversation on GitHub.
Already have an account?
Sign in to comment
1 participant
Add this suggestion to a batch that can be applied as a single commit.This suggestion is invalid because no changes were made to the code.Suggestions cannot be applied while the pull request is closed.Suggestions cannot be applied while viewing a subset of changes.Only one suggestion per line can be applied in a batch.Add this suggestion to a batch that can be applied as a single commit.Applying suggestions on deleted lines is not supported.You must change the existing code in this line in order to create a valid suggestion.Outdated suggestions cannot be applied.This suggestion has been applied or marked resolved.Suggestions cannot be applied from pending reviews.Suggestions cannot be applied on multi-line comments.Suggestions cannot be applied while the pull request is queued to merge.Suggestion cannot be applied right now. Please check back later.
Summary
/forgot-passwordand/reset-passwordpages (6-frame layout: Desktop ZH/EN, Mobile ZH/EN, Component ZH/EN)004-forgot-reset-password— FR-001 through FR-009Pages
/forgot-password/reset-password/loginTest Plan
forgot-password.htmlin browser — verify ZH/EN toggle, empty email validation, success panel after submitreset-password.html— verify all 3 prototype states via toggle bar🤖 Generated with Claude Code