Frontend: Build Authentication Pages (Login, Register, Password Reset) #496
Description
Title: Create Complete Authentication Flow with Form Validation
Description:
Implement authentication pages including login, registration, and password reset with proper validation, error handling, and integration with backend auth endpoints.
Page Routes:
/auth/login/auth/register/auth/forgot-password/auth/reset-password
Requirements:
- Clean, modern auth forms
- Client-side validation with react-hook-form + zod
- Backend integration with JWT tokens
- Protected route handling
- Remember me functionality
- Social auth placeholders (Google, GitHub)
Pages to Create:
1. Login Page (/auth/login)
- Email/password inputs
- "Remember me" checkbox
- "Forgot password?" link
- Submit button with loading state
- Error message display
- "Don't have an account? Sign up" link
- Social login buttons (Google, GitHub) - UI only for MVP
2. Register Page (/auth/register)
- Full name input
- Email input
- Password input with strength indicator
- Confirm password input
- Role selection (Shipper, Carrier, Dispatcher)
- Terms & conditions checkbox
- Submit button with loading state
- Email verification notice after submission
- "Already have an account? Login" link
3. Forgot Password Page (/auth/forgot-password)
- Email input
- Submit button
- Success message with further instructions
- Back to login link
4. Reset Password Page (/auth/reset-password?token=xxx)
- New password input with strength indicator
- Confirm password input
- Submit button
- Success redirect to login
- Token validation feedback
Components to Create:
/components/auth/
├── AuthLayout.tsx (wrapper for all auth pages)
├── LoginForm.tsx
├── RegisterForm.tsx
├── ForgotPasswordForm.tsx
├── ResetPasswordForm.tsx
├── PasswordStrengthIndicator.tsx (reusable)
├── SocialAuthButtons.tsx
├── AuthFormInput.tsx (reusable input with error state)
└── RoleSelector.tsx
Validation Requirements:
- Email: Valid email format
- Password: Minimum 8 characters, at least 1 uppercase, 1 lowercase, 1 number
- Name: Minimum 2 characters
- Password match validation for confirm password
- Terms acceptance required for registration
State Management:
- Use Zustand for auth state
- Persist auth token in localStorage
- Store user information globally
- Handle logout functionality
API Integration Points:
- POST
/api/v1/auth/login - POST
/api/v1/auth/register - POST
/api/v1/auth/forgot-password - POST
/api/v1/auth/reset-password
Design Specifications:
- Centered card layout with max-width 400-500px
- Logo at top of card
- Clean, minimal design
- Use Tailwind forms plugin for consistent styling
- Loading spinners on submit buttons
- Toast notifications for success/error
Acceptance Criteria:
- All 4 auth pages implemented
- Form validation working correctly
- Error messages display properly
- Password strength indicator functional
- Remember me persists auth state
- API integration complete
- Loading states on form submission
- Redirect after successful auth
- Token stored securely
- Protected route middleware implemented
- Responsive design (mobile-first)
- Accessibility: proper labels, ARIA attributes
- TypeScript: strict typing, no errors
- Toast notifications for feedback
Protected Routes:
- Implement middleware to check authentication
- Redirect unauthenticated users to
/auth/login - Redirect authenticated users away from auth pages to
/dashboard
Testing Requirements:
- Test form validation (empty fields, invalid email, weak password)
- Test successful login/register flow
- Test error handling (wrong credentials, network errors)
- Test password visibility toggle
- Test remember me functionality
- Test responsive design