Dev: Update Login Page Behaviour

[Rabia2219]

Overview

We need to update the Login page behavior so that there is ease of use and a clearer connection between the error and the action needed.

Details

Currently:

• there is no option to view or hide an entered password
• there is password length check
• the error messages for an invalid email/password appear below the actions buttons

Current Login Page Behavior

Current Behavior - Password Visibility

• no option to toggle password visibility

Current Behavior - Password Length Validation

• minimum password length error
• LOGIN button is disabled

Current Behavior - When User Enters Invalid Email

• the email field is highlighted
• the error message appears below the action buttons
  

Current Behavior - When User Enters Invalid Password

• the email field is highlighted
• the error message appears below the action buttons
  

Required New Behavior

• add 'eye' icon in password field to allow visibility toggle
• remove password length check
• the error messages for an invalid email/password should appear below each related field

New Login Page Behavior

New Behavior - Password Visibility

• 'eye' icon to toggle password visibility

  • the default will be the open eye icon
  
  • which will keep the password hidden as the user types it in
  
  • the user can click on the open eye icon which reveals the password and changes the open eye icon to the eye-slash icon
  

New Behavior - Password Length Validation

• no minimum password length error
• LOGIN button is active

New Behavior - When User Enters Invalid Email

• a red dotted border appears on the email field
• the error message appears below the email field
  

New Behavior - When User Enters Invalid Password

• a red dotted border appears on the password field
• the error message appears below the password field
  

Action Items

• Assign yourself to the development issue.
• Move the development issue from the Prioritized Backlog to In Progress.
• [ADD DEVELOPER ACTION ITEMS]
• Create a PR, if applicable.
• Create a new slide (or edit one if it already exists) in staging and add the before and after images
• Once the PR has been approved, use it to close this issue. If there is no PR is associated with this issue, close this issue after lead signoff.

Resources/Instructions

• Design details: [link to final comment in GitHub issue]
• Design mockups: [link to Ready for Dev section in the related Figma page]

Staging and Release decks

• Staging Deck
  • Staging slide, 3390
• Release Deck
  • [2025-MM-DD Release deck, slide ISSUE NUMBER]