Solved #10 (Created a lerners login page with proper authentication)

Summary:

I have added a new login page feature to the project, organized under a new folder named LoginPage. The login page includes enhanced validation, error handling, and user experience improvements such as password visibility toggle and responsive design.

Changes Made:

Created a new directory LoginPage to house the login page-related project files.
Implemented a login form with email and password input fields.
Added input validation to handle cases like incorrect email format, empty fields, and wrong password entries.
Integrated error messages for incorrect input and enhanced UI with a transparent yellowish footer.
Included a password visibility toggle using an eye icon within the password input field for better UX.

Testing Performed:

Manually tested the login form for input validation, including scenarios like entering an invalid email, submitting empty fields, and wrong passwords.
Verified that error messages appear in the correct positions without causing layout shifts.
Tested the password visibility toggle to ensure it works as expected.
Tested the layout and responsiveness across different devices and screen sizes.

Additional Notes:

The new login page can be found under the LoginPage directory. It is fully functional with validation and a clean, modern interface. Please review the changes, and feel free to reach out if further adjustments or clarifications are needed.

How to access:

Open the repo CourseGuard in your IDE.

Run this command in your terminal:


# To reach in the main folder
cd LoginPage 

# Install dependencies
npm install

Now , to run this page on your browser:
```
npx nodemon signin.js
```

Glimpse of what i created:

https://github.com/user-attachments/assets/5ce8ca83-e188-402a-821c-a022e6412386

Sanskriti1102 / CourseGuard

Solved #10 (Created a lerners login page with proper authentication) #17