Reset Password

Set a new password from a reset link, then continue to sign in.

<!-- GENERATED FILE. Do not edit by hand. Source: components/help/content/. Run npm run gen:docs. -->

Purpose & Business Context

Reset Password is the second half of account recovery: the screen a user reaches from the link in their inbox to choose a brand-new password. It closes the loop opened on Forgot Password and gets a locked-out patient or clinic back to a working credential.

Getting this step right matters because it is the moment trust is restored. A clear minimum-length rule, a confirm field and an unambiguous success message reassure the user that their account is secure again before they sign in.

Screen Overview

The shared split-screen auth layout. The initial card shows a 'Reset password' eyebrow, the title 'Choose a new password', a note that the password must be at least 8 characters, a New password field with a show/hide eye, a Confirm password field, an Update password button, and a Back to sign in link.

On submit the card swaps to a success state: a check mark, the message that the password has been changed, and a Continue to sign in button to /signin.

Controls & Components

• New password field: a masked input with a lock icon and an eye button that reveals both password fields at once.
• Confirm password field: a second masked input (with a lock icon) for re-entering the same password.
• Update password button: the primary submit; it switches the card into the success state.
• Back to sign in link: returns to /signin from the form state.
• Success panel: a check-mark mark plus 'Your password has been changed' (success state only).
• Continue to sign in button: appears after submit and routes to /signin (success state only).

Field Definitions

• New password: Required input, masked by default. The on-screen guidance states it must be at least 8 characters. The eye button toggles plain-text visibility for this and the confirm field together.
• Confirm password: Required input, masked by default, for re-typing the new password. It mirrors the new-password field's visibility via the same eye toggle. Its purpose is to catch typos before the change is applied.
• Done (state): Internal boolean, not a visible field. It starts false (form view) and flips to true on submit, replacing the form with the success panel. The password change is simulated in this prototype.

User Actions & Workflows

1. Enter a new password of at least 8 characters in the New password field.
2. Optionally tap the eye to reveal both fields and confirm what you typed.
3. Re-enter the same value in Confirm password.
4. Press Update password; the card confirms 'Password updated'.
5. Press Continue to sign in to go to /signin and log in with the new password. Or use Back to sign in from the form if you change your mind.

Navigation & Relationships

Reached from: the Forgot Password success state ('I have a reset link'), and in production from the tokenised link emailed to the user.

Leads to: /signin via 'Continue to sign in' in the success state and via 'Back to sign in' in the form state.

Pairs with: Forgot Password (/forgot), which requests the link that brings the user here. Sign In (/signin) is where the new password is then used.

Business Rules & Constraints

• The new password is required and guided to be at least 8 characters; the confirm field is also required.
• The eye button reveals the new and confirm fields together, so the two can be visually compared.
• Submitting flips the card to the 'Password updated' success state; the change is simulated in this prototype with no real backend write.
• After success the only forward action is Continue to sign in, steering the user to log in with the new password.
• Back to sign in is available from the form state so the user is never stuck on the reset screen.

Data Dependencies

Self-contained: the screen holds local state for password visibility and the done flag, and reads no shared data. In production it would validate a reset token from the URL and write the new password via an API; here submit simply advances the local view.

• Local state: show (password visibility), done (toggles the view)
• No external auth call or stored credential is written on this screen in the prototype

Error Handling & Edge Cases

• Empty fields are caught by native required validation before submit.
• The 8-character minimum is communicated in the subtitle as the guiding rule for a valid password.
• Revealing the password applies to both fields at once, making mismatches easy to spot before submitting.
• After success the form is replaced entirely, so there is no way to resubmit stale field values.
• Mobile: the marketing panel is hidden, the fields and button fill the card, and the floating Help button stays top-right.

User Roles & Permissions

• Public (no sign-in required): Reachable without authentication; in production the emailed reset token is what authorises the change.
• Patient or clinic (account owner): Recovery is role-agnostic: the same screen sets a new password for either account type, and the result is used at /signin, which then routes the user to /portal or /clinic by their account.

Related Features & Functionalities

Forgot Password (/forgot), which leads here, and Sign In (/signin), where the new password is used. The password show/hide eye mirrors the same control on Sign In and Register. Shares the AuthShell and floating Help button with the other auth screens.

Flow & Screenshots

flowchart LR
  Forgot[/forgot/] -->|I have a reset link| Reset[Reset Password]
  Reset --> New[Enter new password]
  New --> Confirm[Confirm password]
  Confirm --> Update[Update password]
  Update --> Done[Password updated]
  Done -->|Continue to sign in| SignIn[/signin/]
  Reset -->|Back to sign in| SignIn

Guided Walkthrough Steps

The in-app walkthrough for this screen has 4 steps (auto-advances every 5 seconds; Prev / Pause / Next; click outside to exit):

1. Choose a new password ([data-tour="reset.password"])

Enter your new password here. It must be at least 8 characters. Tap the eye to reveal it and check what you typed.

1. Confirm it ([data-tour="reset.confirm"])

Re-enter the same password to guard against typos. The eye toggle reveals both fields together so you can compare them.

1. Update password ([data-tour="reset.submit"])

Save the new password. The card confirms the change, then points you to sign in with your new credentials.

1. Help is always here ([data-tour="topbar.help"])

Open this Help button on any screen for documentation, and press Play to replay a walkthrough like this one.