# Story 13.4: Auth Pages Migration to Split Layout

## Story

**As a** user accessing any authentication page
**I want to** see the consistent, branded split layout
**So that** all auth pages provide a cohesive, professional experience

## Acceptance Criteria

### AC1: Login Page Migration

**Given** the login page at `/login`
**When** the page loads
**Then**:
- Uses the updated split layout (`x-layouts.auth.split` or updated `x-layouts.auth`)
- Form content displays correctly
- All form validation works as before
- "Forgot password" link works
- "Remember me" checkbox works

### AC2: Forgot Password Page Migration

**Given** the forgot password page at `/forgot-password`
**When** the page loads
**Then**:
- Uses the updated split layout
- Email input displays correctly
- Form submission works as before
- Success/error messages display properly

### AC3: Reset Password Page Migration

**Given** the reset password page at `/reset-password/{token}`
**When** the page loads
**Then**:
- Uses the updated split layout
- Password fields display correctly
- Password visibility toggle works
- Form validation works as before

### AC4: Two-Factor Challenge Page Migration

**Given** the 2FA challenge page at `/two-factor-challenge`
**When** the page loads
**Then**:
- Uses the updated split layout
- OTP input displays correctly
- Recovery code option works
- Form submission works as before

### AC5: Confirm Password Page Migration

**Given** the confirm password page at `/confirm-password`
**When** the page loads
**Then**:
- Uses the updated split layout
- Password field displays correctly
- Form submission works as before

### AC6: Email Verification Page Migration

**Given** the email verification page at `/email/verify`
**When** the page loads
**Then**:
- Uses the updated split layout
- Verification message displays correctly
- Resend button works as before

### AC7: Update Default Auth Layout

**Given** the auth layout wrapper (`x-layouts.auth`)
**When** called by auth pages
**Then**:
- Routes to the split layout instead of simple layout
- All existing slot content passes through correctly

### AC8: RTL Support Verified

**Given** Arabic language selected
**When** any auth page loads
**Then**:
- Layout correctly mirrors
- Form labels align right
- Input text aligns right
- Error messages align right

### AC9: Mobile Responsiveness Verified

**Given** mobile viewport (below lg breakpoint)
**When** any auth page loads
**Then**:
- Single column layout displays
- Logo appears above form
- All form elements are touch-friendly (min 44px)
- No horizontal scrolling

### AC10: Accessibility Maintained

**Given** accessibility requirements
**When** auth pages render
**Then**:
- Skip link still works
- Focus states visible
- Screen reader navigation works
- Form labels properly associated

## Technical Notes

### Files to Modify

| File | Change |
|------|--------|
| `resources/views/components/layouts/auth.blade.php` | Update to use split layout |
| `resources/views/livewire/auth/login.blade.php` | Verify layout usage |
| `resources/views/livewire/auth/forgot-password.blade.php` | Verify layout usage |
| `resources/views/livewire/auth/reset-password.blade.php` | Verify layout usage |
| `resources/views/livewire/auth/two-factor-challenge.blade.php` | Verify layout usage |
| `resources/views/livewire/auth/confirm-password.blade.php` | Verify layout usage |
| `resources/views/livewire/auth/verify-email.blade.php` | Verify layout usage |

### Current Auth Layout Wrapper
```php
// resources/views/components/layouts/auth.blade.php
<x-layouts.auth.simple :title="$title ?? null">
    {{ $slot }}
</x-layouts.auth.simple>
```

### Updated Auth Layout Wrapper
```php
// resources/views/components/layouts/auth.blade.php
<x-layouts.auth.split :title="$title ?? null">
    {{ $slot }}
</x-layouts.auth.split>
```

### Auth Page Structure
All auth pages use this pattern:
```php
<x-layouts.auth>
    <div class="flex flex-col gap-6">
        <x-auth-header :title="..." :description="..." />
        <!-- Form content -->
    </div>
</x-layouts.auth>
```

No changes needed to individual page content - just the layout wrapper.

## Dev Checklist

- [ ] Update `auth.blade.php` to use split layout
- [ ] Test login page functionality
- [ ] Test forgot-password page functionality
- [ ] Test reset-password page functionality
- [ ] Test two-factor-challenge page functionality
- [ ] Test confirm-password page functionality
- [ ] Test verify-email page functionality
- [ ] Test all pages in Arabic (RTL)
- [ ] Test all pages on mobile
- [ ] Verify form validation still works
- [ ] Verify error messages display correctly
- [ ] Verify success messages display correctly
- [ ] Run existing auth tests

## Estimation

**Complexity:** Low-Medium
**Risk:** Medium - Affects all auth pages, but changes are minimal

## Dependencies

- Story 13.2 (Auth Split Layout) - Must be completed first
- Story 13.3 (Background Pattern) - Should be completed first

## Testing Notes

Run existing auth tests to ensure no regression:
```bash
php artisan test tests/Feature/Auth/
```