Create Login & Register Pages (UI + Integration) #3
Description
Description
Build the Login and Register pages (responsive, accessible) and wire them to the backend endpoints:
- POST /api/auth/register
- POST /api/auth/login
Use existing UI styles (Tailwind / CSS Modules / Styled Components depending on project). Reuse the AuthPages file created in canvas or split into Login.jsx and Register.jsx.
Suggested files
- frontend/src/pages/auth/Login.jsx
- frontend/src/pages/auth/Register.jsx
- frontend/src/components/Auth/AuthForm.module.css (or AuthForm.module.scss)
- frontend/src/services/api.js (if not present — add auth functions)
Requirements / Acceptance criteria
- Forms include client-side validation: required fields, email format, password minimum length (6).
- On submit, call backend API and handle success/error.
- On successful login: save token (see Issue Create Login & Register Pages (UI + Integration) #3) and redirect to /dashboard.
- On successful register: show success message and optionally redirect to login.
- Show loading indicators while awaiting responses.
- Error messages from the API are displayed to the user (e.g., duplicate email, invalid credentials).
- Mobile-friendly layout and keyboard accessible forms.
Example usage
- Register form posts { name, email, password } to /api/auth/register.
- Login posts { email, password } to /api/auth/login.
- On login success response format expected:
{
"success": true,
"data": {
"token": "eyJ...",
"user": { "id": "...", "name": "Alice", "email": "alice@example.com", "role": "member" }
}
}
Testing checklist
- Submit valid register -> success message.
- Submit duplicate email -> shows API error message.
- Submit invalid login -> shows error.
- Successful login -> redirects, token saved (see Create Login & Register Pages (UI + Integration) #3).
- Forms are responsive and accessible (tab order, labels).