Skip to content

Added password security (visibility toggle, strength meter, generator)#85

Open
AA1-34-Ganesh wants to merge 5 commits intotarinagarwal:mainfrom
AA1-34-Ganesh:eye/password-strength-visibility
Open

Added password security (visibility toggle, strength meter, generator)#85
AA1-34-Ganesh wants to merge 5 commits intotarinagarwal:mainfrom
AA1-34-Ganesh:eye/password-strength-visibility

Conversation

@AA1-34-Ganesh
Copy link

📝 Description

I have implemented a reusable PasswordInput component to improve the security and user experience of the authentication forms. This component replaces the standard password input field in the Login and Signup forms.

Key Features Added:

  • 👁️ Visibility Toggle: Users can click the eye icon to show/hide their password.
  • 💪 Strength Meter: A dynamic indicator (Weak/Fair/Good/Strong) that updates colors (Red/Yellow/Green) as the user types.
  • 🔑 Password Generator: A "Suggest Strong Password" button that auto-fills the field with a secure 12-character random string.
  • 🎨 UI Consistency: The component inherits the project's "Alien/Smoke" theme styles.

🔗 Related Issue

Closes #66

🏷️ Type of Change

  • 🐛 Bug fix (non-breaking change that fixes an issue)
  • ✨ New feature (non-breaking change that adds functionality)
  • 💥 Breaking change (fix or feature that would cause existing functionality to change)
  • 📝 Documentation update
  • 🎨 Style/UI update
  • ♻️ Code refactoring
  • ⚡ Performance improvement
  • 🧪 Test update

📸 Screenshots (if applicable)

Strong:
image
Fair:
image
Good:
image

✅ Checklist

  • My code follows the project's style guidelines
  • I have performed a self-review of my code
  • I have commented my code, particularly in hard-to-understand areas
  • I have made corresponding changes to the documentation
  • My changes generate no new warnings
  • I have tested my changes locally
  • Any dependent changes have been merged and published

🧪 Testing

  • Tested on Chrome
  • Tested on Firefox
  • Tested on mobile
  • Tested API endpoints (if applicable)

Test Scenarios Covered:

  1. Verified that clicking the "Eye" icon toggles text visibility.
  2. Verified that typing a long password changes the strength bar from Red to Green.
  3. Verified that "Suggest Strong Password" fills the input.

📋 Additional Notes


SWOC 2026 Participant: I am a SWOC 2026 participant.

Copy link
Collaborator

@Community-Programmer Community-Programmer left a comment

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Please use Zod for validation and remove the custom password logic. Also ensure this PR is implemented in coordination with PR #92 so both sides rely on the same Zod schema and the password policy remains unified

@AA1-34-Ganesh
Copy link
Author

"Updates pushed!

Schema Alignment: I have adopted the Zod schema structure from PR #92 to ensure the frontend validation rules match the backend exactly.

Generator Fix: Updated the 'Suggest Password' logic to guarantee it includes at least one character from every required category (Special, Number, Upper, Lower), so generated passwords never fail validation.

UI Feedback: The input now displays specific Zod error messages (e.g., 'Missing uppercase') to guide the user.
image

image

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Labels

None yet

Projects

None yet

Development

Successfully merging this pull request may close these issues.

[FEATURE] :Add password visibility toggle (eye icon) to auth forms

2 participants