This project is a responsive and interactive authentication user interface with toggling Login/Signup forms and a separate Forgot Password screen. It uses HTML, CSS (custom properties), and Vanilla JavaScript to provide a smooth UI/UX experience.
✅ Toggle between Login and Signup without page reload
✅ Show/Hide password functionality (🙈 → 👁️)
✅ Responsive and mobile-friendly design
✅ Password match validation in Signup
✅ Inline user feedback and alerts
✅ Stylish Forgot Password screen with custom styles
✅ Pure frontend implementation (No backend required for demo)
project-folder/
│
├── index.html # Main Login/Signup HTML file
├── ForgotPassword.html # Forgot Password screen
├── Login.css # Styles for index.html
├── ForgotPassword.css # Styles for ForgotPassword.html
├── Login.js # Form logic, validation, toggle, password visibility
└── README.md # This documentation file
- Open
index.htmlin your browser. - Use the radio buttons or form links to switch between Login and Signup.
- Try entering mismatched passwords during Signup to see validation.
- Click "Forgot Password?" in the login form to open
ForgotPassword.html. - You can simulate login/signup in memory (stored in a temporary JavaScript object).
| Login Form | Signup Form | Forgot Password |
|---|---|---|
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
![]() |
- No real database or server-side logic is included.
- Data is stored temporarily in the
userDBJavaScript object inLogin.js. - Designed with
CSS VariablesandFlex/Gridfor responsive layout.
- Integrate with a backend (Node.js, Firebase, etc.)
- Add real password reset email functionality
- Add form validation messages below fields
- Use localStorage to persist sessions
This project is open-source and free to use under the MIT License.






