feat: Add Password Visibility Toggle (Show/Hide) on Sign In Page

[Vanshi-1210]

Problem

Currently, on the StudyPlan login/sign-in page, when a user enters their password, it only displays dots. There is no option or icon to toggle the password visibility.

Since the platform has strict password validation constraints (requiring a capital letter, special character, and a minimum length), it becomes highly inconvenient for users to verify if they have typed their password correctly, often leading to repetitive validation errors due to simple typos.

Proposed Improvement

• Add a password visibility toggle (such as an eye icon or a text toggle button) inside or immediately next to the password input field.
• Implement a lightweight JavaScript/React function to dynamically switch the input field's type attribute between password and text when the icon is clicked.

Why improvement is needed

This feature will significantly enhance the overall user experience (UX) and digital accessibility of the authentication flow. It reduces user frustration from failed login attempts caused by hidden typos and aligns the form with modern web design standards.

Expected Result

When a user clicks on the eye icon inside the password field, the hidden dots should turn into plain readable text so they can double-check their input. Clicking it again should mask the password back into dots.

Alternatives Considered

An alternative could be a "Confirm Password" field, but that is redundant and worsens the user flow for a simple Sign-In form. A visibility toggle is much cleaner and more user-friendly.

Additional Context

I am a GSSoC 2026 contributor. Please assign this issue to me so I can resolve this limitation and improve the sign-in page interface!

Screenshots

Here is the screenshot of the current Sign In page showing the lack of a toggle option and the strict validation rules:

[PC9969]

Hi @Charushi06,

I would like to work on this issue under GSSoC 2026, as an contributor.

I have reviewed the issue and understand the required enhancement. I can implement a password visibility toggle (show/hide password) with a user-friendly 'eye' icon and proper input type switching to improve the sign-in experience.

Please assign this issue to me if it is available.

Thank you!

[Heemadhawala-R]

@Charushi06 Hi

I would like to work on this issue under GSSoC'26. I have gone through the requirements and would like to contribute.
Could you please assign this issue to me?
Thank you!

[Akshat-Neeraj]

Hi @Charushi06, I am a GSSoC 2026 contributor and would like to work on this issue. I reviewed the requirement and can implement a password visibility toggle (show/hide password) with an eye icon and proper accessibility support while keeping the existing UI intact.
I will ensure:

• Smooth toggle between password and text types
• Responsive design compatibility
• Consistent styling with the current sign-in page
• Proper testing across browsers
  Could you please assign this issue to me?
  Thank you!

[ShailjaSharma23]

Hi @Charushi06 , I would like to work on this issue under GSSoC 2026.

Adding a password visibility toggle is a valuable UX improvement for the authentication flow, especially since the platform enforces strict password validation requirements. This enhancement will help users verify their input more easily, reduce login/signup frustration caused by hidden typing errors, and align the interface with modern accessibility and usability standards.

I can implement:

• A clean eye icon toggle inside the password input field
• Dynamic switching between password and text input types
• Responsive and theme-consistent styling
• Smooth interaction without affecting existing validation logic
• Accessibility-friendly behavior for better usability across devices

I’ll ensure the feature integrates seamlessly with the current sign-in page design while maintaining a polished and user-friendly experience.

Please assign this issue to me. Thank you!