Add "Eye" Icon for Password Field Visibility

[Rizvi-Faiz]

Issue: Add "Eye" Icon for Password Field Visibility

Description

Enhance the password input field by adding an "eye" icon to allow users to toggle between hiding and showing their password. This feature will improve user experience by providing an option to check their input before submitting.

Expected Behavior

• A visible "eye" icon should appear inside or adjacent to the password input field.
• Clicking the "eye" icon should toggle the password visibility.
  • Default: Password hidden (input type: password).
  • When clicked: Password visible (input type: text).

Requirements

• The icon should indicate the current state (open/closed eye).
• The functionality should be implemented in a user-friendly and accessible manner (consider using ARIA attributes for accessibility).
• Ensure compatibility across all modern browsers and responsive design for mobile.

Tasks

• [ ] Add "eye" icon to the password input field.
• [ ] Implement toggle functionality for switching between password visibility.
• [ ] Update UI/UX to clearly indicate when the password is visible vs. hidden.
• [ ] Test the feature on desktop and mobile devices.

Checklist

• [ ] The feature has been fully tested.
• [ ] The code follows the existing coding standards.
• [ ] Accessibility considerations have been made.
• [ ] Browser compatibility is ensured.

---

@SanchitGeez can you please assign this issue to me

[Rizvi-Faiz]

can you please label this issue and assign it to me @SanchitGeez

[Rizvi-Faiz]

@SanchitGeez can you please label this issue as gssoc-ext and hactoberfest and give it a level