Implement Login Page

[gionare]

Task: Implement the Login Page

Objective: Create a responsive login page where users can log in using their email and password.

Requirements:

• Create a form with two inputs:
  • Email
  • Password
• Add "Login" and "Forgot Password?" buttons.
• Validate form inputs:
  • Email should be a valid email format.
  • Password must be at least 8 characters long.
• Connect the form to the backend for JWT authentication.
• Display error messages for incorrect credentials.
• Redirect user to the Dashboard Page upon successful login.

Design Considerations:

• Ensure the form is responsive on both desktop and mobile views.
• Use Tailwind CSS for styling.
• Use any Component if preferable
• Include an attractive UI with form elements and validation feedback.

Dependencies:

• Backend API for authentication (JWT).
• Redirect to Dashboard Page upon successful login.

Checklist:

• [x] Build the login form (HTML/CSS/JS)
• [x] Add form validation (email and password)
• [ ] Integrate JWT authentication with backend
• [ ] Display error messages for incorrect login
• [ ] Test redirection after successful login

[gionare]

Data to Send (Login and Registration)

Login: { "email": "user@example.com", "password": "yourPassword" }

Registration: { "fullName": "John Doe", "email": "user@example.com", "password": "yourPassword" }

Data to Receive { "token": "jwtToken", "user": { "id": "userId", "fullName": "John Doe", "email": "user@example.com" } }

[gionare]

interface User { id: string; fullName: string; email: string; }

interface AuthResponse { token: string; user: User; }

interface LoginRequest { email: string; password: string; }

interface RegisterRequest { fullName: string; email: string; password: string; }