This task builds on the account creation form cleanup (T409236) by adding a way for users to reveal their password while typing on the account creation form. Currently, the password field on mobile web has no reveal option, which makes it harder to catch typos - especially on mobile where the keyboard covers half the screen and mistyping is common.
A comparative analysis of the top 20 most visited websites (T410558) shows that password reveal is a near-universal pattern, implemented either as an inline icon within the input field or as a checkbox below it.
####User story & summary:
As a new user creating an account on mobile web, I want to be able to reveal my password while typing so that I can verify what I've entered and avoid typos.
####Design:
//**Scope: this task is scoped to Mobile only.**//
[[ https://www.figma.com/design/mEYvnTEoCHGLavr3g7Jjs2/T409236-account-creation?node-id=329-7314&t=qnDRiQmva3vJBhRw-1 | Figma designs ]]
{F72757316}{F73556693}
####Acceptance Criteria:
AC1 - Default state
* Given I am on the account creation page on mobile web
* When I view the password field
* Then the password input masks characters by default
* And the reveal icon (`cdxIconEye`, open eye) is visible as `endIcon` prop, styled in `@color-subtle`
AC2 - Reveal password
* Given I have entered text in the password field
* When I activatetap the reveal password actionicon
* Then the password characters become visible in plain text
* And the icon fill color changes to `@color-base`, indicating the active state
AC3 - Hide password
* Given the password is currently revealed
* When I deactivatetap the reveal password actionicon again
* Then the password characters are masked again
* And the icon fill color returns to `@color-subtle`
AC4 - Confirm password field
* Given the account creation form includes a "Confirm password" field
* When I interact with the confirm password field
* Then the same reveal password behavior is available, with its own independent toggle state
AC5 - State persistence
* Given I have revealed the password
* When I continue typing or interact with other fields
* Then the reveal state persists until I explicitly deactivate itap the icon to hide it
AC6 - Icon always visible
* Given I am on the account creation page on mobile web
* When I view the password field before entering any text
* Then the reveal icon is visible (not contingent on the field having content)
AC7 - Password helper text removed
* Given I am on the account creation page on mobile web
* When I view the password field
* Then no helper text is displayed below the password input
####Open questions:
1. ~~Which implementation pattern should we use? Two options from the comparative analysis (T410558):~~
- ~~**End icon prop**: Use the Codex TextInput component's end icon prop to display a show/hide icon inside the password field (see Figma: "reveal password - end icon prop")~~
- ~~**Checkbox**: Display a "Show password" checkbox below the password field (see Figma: "reveal password - checkbox")~~
- Use `endIcon` prop
- **End icon prop**: Use the Codex TextInput component's end icon prop to display a show/hide icon inside the password field (see Figma: "reveal password - end icon prop")2. ~~If we go with the end icon approach, should the icon be visible before the user starts typing, or only appear once there's text in the field?~~
- **Checkbox**: Display a "Show password" checkbox below the password field (see Figma: "reveal password - checkbox")- Visible before the user start typing
23. ~~If we go with the end icon approach, should thewhich icon be visible before the user starts typing,represents the hidden (default) state? or only appear once there's text in the field?Two interpretations:~~
3. - ~~**Icon shows available action**: When the password is hidden, If we go with the end icon approach, which icon represents the hidden (default) state? Two interpretations:show `cdxIconEye` (open eye) to indicate "tap to reveal." When revealed, show `cdxIconEyeClosed` (eye with strikethrough) to indicate "tap to hide."~~
- - ~~**Icon shows available action**:current state**: When the password is hidden, show `cdxIconEye` (open eyeClosed` (eye with strikethrough) to indicate "tap to revealhis is currently hidden." When revealed, show `cdxIconEyeClosed` (eye with strikethrough) to indicate "tap to hide."` (open eye) to indicate "this is currently visible."~~
- **Icon shows current state**: - When the password is hidden, show `cdxIconEyeClosed` (eye with strikethrough)` (open eye) set in `@color-subtle` to indicate "this is currently hiddenap to reveal." When revealed, show `cdxIconEye` (open eye) set in `@color-base` to indicate "thisthe active state. Action is currently visible."reversible: tapping again will hide the password.