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.
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 tap the reveal icon
- 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 tap the reveal icon 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 tap 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:
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
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?- Visible before the user start typing
If we go with the end icon approach, which icon represents the hidden (default) state? Two interpretations:Icon shows available action: When the password is hidden, show cdxIconEye (open eye) to indicate "tap to reveal." When revealed, show cdxIconEyeClosed (eye with strikethrough) to indicate "tap to hide."Icon shows current state: When the password is hidden, show cdxIconEyeClosed (eye with strikethrough) to indicate "this is currently hidden." When revealed, show cdxIconEye (open eye) to indicate "this is currently visible."- When the password is hidden, show cdxIconEye (open eye) set in @color-subtle to indicate "tap to reveal." When revealed, show cdxIconEye (open eye) set in @color-base to indicate the active state. Action is reversible: tapping again will hide the password.
