Files
RenewCMS/docs/design/screens/reset-password.md
T

77 lines
3.6 KiB
Markdown

# Choose a new password
- **Route:** `/register/reset/validate?c=CODE&email=EMAIL`
- **API:** POST /v1/auth/password-reset/confirm
- **Visual reference:** `source/RenewCMS Screens Auth.dc.html`, group "Reset password" (open it in a browser; each state is drawn at desktop and mobile, with a light/dark toggle).
Opened from the reset email. The email comes from the URL and is read-only. The confirm field is checked only in the browser.
## States
### Default
**Trigger:** Both parameters are present.
- Heading: **Choose a new password**
- Description: "Pick something you haven't used here before. You'll log in with it next."
- Field `Email`: placeholder "you@example.com"; value "marta@renew.example"; read-only; help "From your reset link."
- Field `New password`: password with show/hide; checklist "At least 8 characters" (unmet)
- Field `Confirm new password`: password with show/hide; checklist "Passwords match" (unmet)
- Submit button: "Change password"
### Too short
**Trigger:** On submit, with fewer than 8 characters.
- Heading: **Choose a new password**
- Description: "Pick something you haven't used here before. You'll log in with it next."
- Field `Email`: placeholder "you@example.com"; value "marta@renew.example"; read-only; help "From your reset link."
- Field `New password`: value "lime"; password with show/hide; checklist "At least 8 characters" (err)
- Field `Confirm new password`: value "lime"; password with show/hide; checklist "Passwords match" (met)
- Submit button: "Change password"
### Mismatch
**Trigger:** On blur of the confirm field, or on submit.
- Heading: **Choose a new password**
- Description: "Pick something you haven't used here before. You'll log in with it next."
- Field `Email`: placeholder "you@example.com"; value "marta@renew.example"; read-only; help "From your reset link."
- Field `New password`: value "limewash2026"; password with show/hide; checklist "At least 8 characters" (met)
- Field `Confirm new password`: value "limewash2025"; password with show/hide; **error "The passwords don't match."**; checklist "Passwords match" (err)
- Submit button: "Change password"
### Submitting
**Trigger:** Request in flight.
- Heading: **Choose a new password**
- Description: "Pick something you haven't used here before. You'll log in with it next."
- Field `Email`: placeholder "you@example.com"; value "marta@renew.example"; read-only; help "From your reset link."
- Field `New password`: value "limewash2026"; password with show/hide; checklist "At least 8 characters" (met)
- Field `Confirm new password`: value "limewash2026"; password with show/hide; checklist "Passwords match" (met)
- Submit button: "Changing password…", loading
### Success
**Trigger:** 200 → /login?reason=password-changed.
- Alert (success, circle-check): **Password changed** "Log in with your new password."
- Heading: **Log in**
- Description: "Welcome back. Log in to manage your articles."
- Field `Username`: placeholder "Your username"
- Field `Password`: password with show/hide; link "Forgot password?"
- Submit button: "Log in"
### Invalid or expired (403)
**Trigger:** The code is wrong, used, or older than 1 hour.
- ResultPanel (error, link-2-off): **This reset link has expired**; text "Reset links work once, for 1 hour. Request a new one and use it within the hour."; actions "Request a new link" (primary), "Back to log in" (secondary)
### Missing parameters
**Trigger:** The link has no c or no email. No request is made.
- ResultPanel (error, link-2-off): **This link is incomplete**; text "Part of the reset link is missing. Open it from your email again, or request a new one."; actions "Request a new link" (primary)