bug: [UX] Add show/hide password toggle on login page

[tharunika-19]

🐛 Bug / UX Issue

The password field on the login modal does not have a show/hide password toggle (eye icon).
Users cannot verify what they've typed, which leads to confusion — especially since the form
has strict password validation rules.

📍 Location

Login modal → Password input field
URL: https://studyplan-jvgd.onrender.com/

🔁 Steps to Reproduce

1. Open the app at https://studyplan-jvgd.onrender.com/
2. Click on "Sign In" or wait for the login modal to appear
3. Try typing in the password field
4. Notice there is no way to view the entered password

😔 Current Behavior

• Password is always hidden with no option to reveal it
• Users can't verify their input before submitting
• Combined with the strict validation (min 8 chars, 1 capital, 1 special char),
  this makes it harder to debug login failures

✅ Expected Behavior

• An eye icon (👁️) should appear at the right end of the password field
• Clicking it should toggle between type="password" and type="text"
• Icon should update visually (eye / eye-off) to reflect current state

💡 Suggested Fix

Add a toggle button inside the password input wrapper in index.html / login JS logic:

const toggle = document.querySelector('#togglePassword');
const passwordInput = document.querySelector('#password');

toggle.addEventListener('click', () => {
  const type = passwordInput.type === 'password' ? 'text' : 'password';
  passwordInput.type = type;
  toggle.textContent = type === 'password' ? '👁️' : '🙈';
});

🏷️ Labels

enhancement UX good first issue

[vanshdixit1]

Hi @Charushi06 ,

I would like to work on this issue under GSSoC'26. I have reviewed the requirements and am confident I can contribute effectively. If possible, could you please assign this issue to me?

Thank you!

[Jaswanth-Kumar-2007]

Hi @Charushi06 ,

I would like to work on this issue under GSSoC'26. I will make it in a time , could you please assign this issue to me?

Thank you!