# Authentication Pages Guide

Complete authentication system with login, registration, and password recovery.

## Features

### Login Page (`/auth/login`)
- Email and password authentication
- Remember me checkbox
- Forgot password link
- Form validation with real-time error handling
- Eye icon toggle for password visibility
- Responsive side-by-side layout
- Loading state with visual feedback

### Registration Page (`/auth/register`)
- Full name input
- Email address field
- Password with strength requirements
- Confirm password field
- Terms & conditions acceptance
- Form validation with detailed error messages
- Password visibility toggle
- Automatic error clearing on input

### Forgot Password Page (`/auth/forgot-password`)
- Email-only recovery flow
- Success state with confirmation message
- Resend link option
- Clean, minimalist design
- Back to login navigation

## Page Routes

```
/auth/login              - Login page
/auth/register           - Registration page
/auth/forgot-password    - Password recovery page
```

## Components

### LoginForm (`components/auth/login-form.tsx`)
Client component handling login form logic.

**Features:**
- Email validation
- Password validation
- Show/hide password toggle
- Form submission handling
- Error state management

**Usage:**
```tsx
import { LoginForm } from '@/components/auth/login-form'

export default function LoginPage() {
  return <LoginForm />
}
```

### RegisterForm (`components/auth/register-form.tsx`)
Client component for user registration.

**Features:**
- Multi-field validation
- Password confirmation
- Terms acceptance checkbox
- Password strength indicators
- Comprehensive error handling

**Usage:**
```tsx
import { RegisterForm } from '@/components/auth/register-form'

export default function RegisterPage() {
  return <RegisterForm />
}
```

### ForgotPasswordForm (`components/auth/forgot-password-form.tsx`)
Client component for password recovery.

**Features:**
- Email validation
- Success state after submission
- Retry option
- Back to login link

**Usage:**
```tsx
import { ForgotPasswordForm } from '@/components/auth/forgot-password-form'

export default function ForgotPasswordPage() {
  return <ForgotPasswordForm />
}
```

### AuthLayout (`components/auth/auth-layout.tsx`)
Server component providing consistent auth page structure.

**Features:**
- Side-by-side layout (50/50 split on desktop)
- Left sidebar with branding and features
- Mobile responsive (stacked layout)
- Logo and branding area
- Benefits showcase section
- Footer with links

**Props:**
```tsx
interface AuthLayoutProps {
  children: React.ReactNode
  title: string
  subtitle?: string
  showLeftSection?: boolean
}
```

**Usage:**
```tsx
<AuthLayout
  title="Sign in"
  subtitle="Enter your credentials"
  showLeftSection={true}
>
  <LoginForm />
</AuthLayout>
```

## Form Validation

### Login Form
- Email: Required, valid email format
- Password: Required, minimum 6 characters

### Registration Form
- Full Name: Required, minimum 2 characters
- Email: Required, valid email format
- Password: Required, minimum 8 characters
- Confirm Password: Must match password
- Terms: Must be accepted

### Forgot Password Form
- Email: Required, valid email format

## Design Details

### Colors
- Primary: Purple (`oklch(0.65 0.2 274)`)
- Background: White (`oklch(0.98 0 0)`)
- Foreground: Dark (`oklch(0.15 0 0)`)
- Borders: Light gray (`oklch(0.92 0 0)`)
- Input: Off-white (`oklch(0.98 0 0)`)

### Spacing
- Form padding: 6-8 units
- Field gaps: 5-6 units
- Button height: 44px minimum

### Typography
- Title: 30px, bold
- Subtitle: 16px, regular
- Labels: 14px, medium
- Body: 14px, regular

## Responsive Design

### Mobile (< 640px)
- Single column layout
- Full width forms
- Logo at top
- Hidden left sidebar

### Tablet (640px - 1024px)
- Single column layout
- Increased padding
- Logo visible

### Desktop (> 1024px)
- Side-by-side layout (50/50)
- Left sidebar with branding
- Right form section
- Full width utilization

## State Management

All forms use local `useState` for:
- Form field values
- Loading states
- Error messages
- Password visibility
- Submission status

## Error Handling

- Real-time validation
- Errors clear on input
- User-friendly messages
- Field-specific validation

## Integration

To integrate with a real backend:

1. **Login Form:**
```tsx
const handleSubmit = async (e: React.FormEvent) => {
  e.preventDefault()
  const response = await fetch('/api/auth/login', {
    method: 'POST',
    body: JSON.stringify({ email, password }),
  })
  // Handle response
}
```

2. **Register Form:**
```tsx
const handleSubmit = async (e: React.FormEvent) => {
  e.preventDefault()
  const response = await fetch('/api/auth/register', {
    method: 'POST',
    body: JSON.stringify(formData),
  })
  // Handle response
}
```

3. **Forgot Password:**
```tsx
const handleSubmit = async (e: React.FormEvent) => {
  e.preventDefault()
  const response = await fetch('/api/auth/forgot-password', {
    method: 'POST',
    body: JSON.stringify({ email }),
  })
  // Handle response
}
```

## Customization

### Change Colors
Edit `app/globals.css` theme variables:
```css
--primary: oklch(0.65 0.2 274);
--foreground: oklch(0.15 0 0);
--background: oklch(0.98 0 0);
```

### Modify Validation Rules
Edit validation functions in each form component:
```tsx
const validateForm = () => {
  // Add your rules
}
```

### Update Branding
Edit `AuthLayout` component:
```tsx
<span className="text-xl font-bold text-foreground">Your Brand</span>
```

## Accessibility

- Semantic form elements
- Proper label associations
- ARIA attributes where needed
- Keyboard navigation support
- Color contrast compliance
- Screen reader friendly

## Security Considerations

⚠️ These are frontend forms only. For production:

1. **Always validate on backend**
2. **Hash passwords with bcrypt**
3. **Use HTTPS for all requests**
4. **Implement rate limiting**
5. **Add CSRF protection**
6. **Use secure session management**
7. **Implement 2FA if needed**

## Testing

Example test for login form:
```tsx
import { render, screen } from '@testing-library/react'
import { LoginForm } from '@/components/auth/login-form'

test('shows error when email is empty', async () => {
  render(<LoginForm />)
  const submitButton = screen.getByRole('button', { name: /sign in/i })
  submitButton.click()
  expect(screen.getByText(/email is required/i)).toBeInTheDocument()
})
```

## Browser Support

- Chrome/Edge (latest)
- Firefox (latest)
- Safari (latest)
- Mobile browsers (iOS Safari, Chrome Mobile)

## Performance

- Client-side form components
- Minimal re-renders with proper state management
- No external API calls in demo
- Optimized icons from Lucide React
- CSS classes for styling (Tailwind)

## Next Steps

1. Connect to authentication provider (Supabase, Auth.js, etc.)
2. Add backend API endpoints
3. Implement session management
4. Add email verification
5. Setup password reset flow
6. Add social login options
7. Implement 2FA
8. Add audit logging