Add "Show/Hide Password" Button to Login and Register Pages

[AyushKumar123456789]

GitHub Issue: Add "Show/Hide Password" Button to Login and Register Pages

Issue Description:

Summary:

We need to add a "Show/Hide Password" button to the password fields on our Login and Register pages. This will allow users to toggle the visibility of their password, making it easier for them to enter it correctly.

Details:

1. Feature Overview:

   • Add an eye icon button next to the password input field.
   • Clicking the button should toggle the password field between type="password" and type="text".

2. Pages to Update:

   • Login Page
   • Register Page

3. Acceptance Criteria:

   • Users should see an eye icon button next to the password field.
   • Clicking the eye icon should reveal the password if it is hidden.
   • Clicking the eye icon again should hide the password if it is visible.

4. Design Considerations:

   • Use a simple and clear eye icon that users can easily recognize.
   • Ensure the button is accessible and works on all devices (responsive design).

Steps to Implement:

1. Frontend Changes:
   • Update the Login and Register components to include the eye icon button.
   • Add a function to toggle the password visibility.

Example Code Snippet:

// Example code for the eye button functionality in a React component

import React, { useState } from 'react';

const PasswordInput = () => {
  const [passwordVisible, setPasswordVisible] = useState(false);

  const togglePasswordVisibility = () => {
    setPasswordVisible(!passwordVisible);
  };

  return (
    <div>
      <input
        type={passwordVisible ? "text" : "password"}
        placeholder="Enter your password"
      />
      <button onClick={togglePasswordVisibility}>
        {passwordVisible ? "Hide" : "Show"}
      </button>
    </div>
  );
};

export default PasswordInput;

---

This simplified issue description provides clear instructions and an example code snippet, making it easy for beginners to understand and implement the feature.

[SeanAverS]

Hello,

I am interested on working on this. Could I please be assigned? Thanks.

[AyushKumar123456789]

Hi SeanAvers, Thanks For asking , actualy this is a FrontEnd issue , So you have to work on the FrontEnd Repo of this project ,
This is my Bad that i opend Frontend issue in backend, So I will assign you this issue on frontend part.

https://github.com/AyushKumar123456789/stock-analysis-frontend/issues/9#issue-2415554173

Thank You