Skip to content

feat(auth): add password strength meter and validation to signup form #92

@hrx01-dev

Description

@hrx01-dev

Description

Overview

Improve account security and user experience by implementing password strength analysis in the signup flow. Users should receive real-time feedback on password quality and be prevented from creating accounts with weak passwords.

Current Behavior

  • Users can enter any password during signup.
  • No visual indication of password strength is provided.
  • Weak passwords may be accepted without warning.

Expected Behavior

  • Password strength is evaluated as the user types.
  • A visual strength indicator (Weak / Medium / Strong) is displayed.
  • Password requirements are shown with live validation.
  • Signup is blocked if the password does not meet minimum security requirements.

Requirements

Password Strength Criteria

Evaluate password strength based on:

  • Minimum 8 characters
  • At least 1 uppercase letter
  • At least 1 lowercase letter
  • At least 1 number
  • At least 1 special character

Strength Levels

Score | Label -- | -- 0-2 | Weak 3-4 | Medium 5 | Strong

UI Components

Strength Meter

  • Display a progress bar beneath the password field.
  • Update in real time as the user types.
  • Show color-coded feedback:
    • Red = Weak
    • Yellow/Orange = Medium
    • Green = Strong

Requirements Checklist
Display live validation indicators:

✓ At least 8 characters
✓ Contains uppercase letter
✓ Contains lowercase letter
✗ Contains a number
✗ Contains a special character

Form Validation

  • Prevent signup when password strength is classified as "Weak".
  • Display a clear error message/toast explaining why submission was blocked.
  • Ensure validation is enforced both visually and within form submission logic.

Acceptance Criteria

  • Password strength updates in real time.
  • Strength meter is visible and responsive.
  • Password requirements checklist updates dynamically.
  • Weak passwords cannot be submitted.
  • Error message/toast appears when validation fails.
  • Component is responsive across mobile and desktop devices.
  • Existing signup functionality remains unaffected.
  • Unit tests added for password strength calculation logic.

Metadata

Metadata

Labels

High priorityused for issues having higher priority

Projects

No projects

Milestone

No milestone

Relationships

None yet

Development

No branches or pull requests

Issue actions