Skip to content

Feature: Add Password Strength Meter #1

@kanishgit09

Description

@kanishgit09

Expected Features:

  1. Detect password strength using basic rules or a library (e.g., zxcvbn or custom logic).

  2. Display visual strength indicators (e.g., progress bar or colored line).

  3. Show textual feedback such as:

"Weak"

"Moderate"

"Strong"

  1. Should update dynamically as the user types.

  2. Responsive design compatible with both desktop and mobile layouts.

  3. Code must be modular and reusable.

Suggestions for Implementation:
Use a library like zxcvbn for strength evaluation, or implement logic based on:

  1. Length

  2. Use of uppercase, lowercase, numbers, symbols

  3. Common dictionary words

Add a component like a progress bar (div with colored background and width changes).

Color codes:

Red = Weak

Orange = Moderate

Green = Strong

Test Cases:

  1. Typing "12345" shows Weak

  2. Typing "Pass@123" shows Moderate

  3. Typing "V#7uLxY9kP!z" shows Strong

Tech Stack:
Frontend: HTML/CSS + JavaScript or framework (React/Vue/etc.)

Files to Modify / Add:

  1. Password input component file (e.g., PasswordInput.jsx, RegisterForm.vue, etc.)

  2. CSS/Style file for meter appearance

Metadata

Metadata

Assignees

No one assigned

    Labels

    onlydust-waveContribute to awesome OSS repos during OnlyDust's open source week

    Type

    No type

    Projects

    No projects

    Milestone

    No milestone

    Relationships

    None yet

    Development

    No branches or pull requests

    Issue actions