[FEAT] #14 added feature of user login and signup

[Vinayyy19]

Description

This PR introduces a basic user authentication system for the Zen Note application. It includes features for user signup and login using HTML forms and JavaScript.

Changes Made

• Created login.html: A new page for user login.

• Created signup.html: A new page for user signup.

• Created auth.js: A new JavaScript file to handle user authentication.

  • Signup Functionality:

  • Users can create an account by providing their name, email, and password.

  • Password confirmation is required for validation.

  • User data is stored in localStorage for demo purposes.

  • Successful signup redirects users to the login page.

  • Login Functionality:

  • Users can log in using their registered email and password.

  • The application retrieves user data from localStorage.

  • Alerts are shown for successful or failed login attempts.

  • Successful login redirects users to a welcome page.

• Added CSS: Applied styles from the home page to both login and signup pages to enhance their professional appearance.

• Implemented Dark/Light Mode Toggle: Added a toggle button for users to switch between dark and light modes on the login and signup pages, consistent with the home page functionality.

File Changes

• login.html: New page created for user login.
• signup.html: New page created for user signup.
• auth.js: New file created for managing user authentication.

How to Test

1. Open signup.html in a browser.
2. Fill out the signup form with valid data and submit.
3. After signup, you should see an alert confirming the signup, and you will be redirected to login.html.
4. On login.html, enter the registered email and password to log in.
5. If the credentials are correct, you will be redirected to welcome.html. Otherwise, an alert will show that the email or password is invalid.
6. Test the dark/light mode toggle to ensure it switches correctly between themes.

Additional Notes

• This implementation is meant for demonstration purposes only. For a production application, a secure backend service should handle user authentication with hashed passwords and proper session management.
• Consider implementing additional user experience improvements, such as form validation and loading indicators.
• Used local storage because the project was made using html css js only.

Screenshots

Login page

Signup page

[Vinayyy19]

@TheOpenInnovator have you checked it ?