# Epic 13: Authentication Pages Design Enhancement

## Epic Goal

Transform the authentication pages (login, forgot password, reset password, etc.) from plain layouts into visually engaging, branded experiences using a split-screen design with the LIBRA logo prominently featured and improved component visibility.

## Epic Description

### Existing System Context

- **Current functionality:** Auth pages use a simple centered layout with minimal styling
- **Technology stack:** Laravel 12, Livewire 3/Volt, Flux UI, Tailwind CSS 4
- **Current layout:** `resources/views/components/layouts/auth/simple.blade.php` - plain white/cream background
- **Existing split layout:** `resources/views/components/layouts/auth/split.blade.php` - exists but uses generic styling
- **Language toggle component:** `resources/views/components/language-toggle.blade.php` - has `light` variant with low visibility

### Enhancement Details

**What's being added/changed:**

1. **Split Layout Design for Auth Pages**
   - Left panel: Dark primary background (`#2D3624`) with centered LIBRA logo
   - Right panel: Warm cream background with subtle botanical/geometric pattern and form content
   - Responsive: On mobile, shows only the form side with logo above

2. **Language Toggle Visibility Fix**
   - Update `light` variant to use darker color (`text-primary` instead of `text-body/70`)
   - Ensure proper contrast on light backgrounds
   - Maintain existing appearance on dark backgrounds (public navigation)

3. **Subtle Background Pattern**
   - Add elegant, subtle pattern to form side (wheat/botanical motif or geometric)
   - Pattern should complement the brand without being distracting
   - SVG-based for performance and scalability

**Auth Pages Affected:**
- `/login` - Login page
- `/forgot-password` - Forgot password page
- `/reset-password` - Reset password page
- `/two-factor-challenge` - 2FA challenge page
- `/confirm-password` - Password confirmation page
- `/email/verify` - Email verification page

**Success criteria:**
- Auth pages display split layout on desktop (logo left, form right)
- Mobile view maintains usability with logo above form
- Language toggle clearly visible on all auth pages
- Subtle pattern adds visual interest without distraction
- Brand consistency with existing design system
- Bilingual support maintained (RTL/LTR)

---

## Stories

### Story 13.1: Language Toggle Visibility Enhancement
**File:** `story-13.1-language-toggle-visibility.md`

Update the language toggle component's `light` variant to use a darker, more visible color scheme while maintaining the existing `dark` variant appearance for navigation headers.

### Story 13.2: Auth Layout Split Design Update
**File:** `story-13.2-auth-split-layout.md`

Update the existing split layout (`auth/split.blade.php`) to use LIBRA brand colors. Left panel with Dark Forest Green background and centered logo, right panel with form content.

### Story 13.3: Subtle Background Pattern Implementation
**File:** `story-13.3-background-pattern.md`

Create and implement a subtle SVG-based background pattern for the auth form side. Pattern should use brand colors at low opacity for an elegant, professional appearance.

### Story 13.4: Auth Pages Migration to Split Layout
**File:** `story-13.4-auth-pages-migration.md`

Migrate all auth pages from the simple layout to the enhanced split layout. Ensure proper RTL support and mobile responsiveness.

### Story 13.5: Visual QA and Refinement
**File:** `story-13.5-visual-qa.md`

Comprehensive visual testing across all auth pages, browsers, and screen sizes. Fix any visual issues and ensure brand consistency.

---

## Compatibility Requirements

- [x] Existing auth functionality remains unchanged
- [x] Form validation and error handling preserved
- [x] RTL (Arabic) and LTR (English) support maintained
- [x] Mobile responsiveness required
- [x] Accessibility standards (WCAG AA) maintained
- [x] No impact on authentication logic

## Technical Considerations

### Color Values

```css
/* Primary for left panel */
--color-primary: #2D3624;      /* Dark Forest Green */

/* Background for right panel */
--color-background: #F4F1EA;   /* Warm Cream */

/* Pattern overlay (low opacity) */
--color-cta: #A68966;          /* Warm Gold at ~5-10% opacity */

/* Language toggle light variant */
--color-primary: #2D3624;      /* Dark Forest Green for text */
```

### Layout Structure

```
Desktop (lg+):
+---------------------------+---------------------------+
|                           |                           |
|    LIBRA Logo             |    [Language Toggle]      |
|    (centered)             |                           |
|                           |    Login Form             |
|    Dark Forest Green      |    (centered, pattern bg) |
|    Background             |                           |
|                           |    Warm Cream Background  |
+---------------------------+---------------------------+

Mobile:
+---------------------------+
|    [Language Toggle]      |
|                           |
|    LIBRA Logo             |
|                           |
|    Login Form             |
|    (pattern bg)           |
+---------------------------+
```

### SVG Pattern Considerations

- Pattern should be subtle (5-10% opacity)
- Use wheat/botanical motif aligned with LIBRA brand
- Alternatively, use geometric pattern for cleaner look
- Must tile seamlessly
- Performance-optimized (small file size)

---

## Risk Mitigation

- **Primary Risk:** Layout changes may break on certain screen sizes or RTL mode
- **Mitigation:** Thorough testing on multiple devices and both language directions
- **Rollback Plan:** Auth layout can be reverted to simple layout via single file change

## Definition of Done

- [ ] All stories completed with acceptance criteria met
- [ ] Language toggle visible and accessible on auth pages
- [ ] Split layout displays correctly on desktop and tablet
- [ ] Mobile layout is functional and attractive
- [ ] RTL (Arabic) layout mirrors correctly
- [ ] Pattern is subtle and professional
- [ ] No regression in auth functionality
- [ ] Visual QA completed on major browsers (Chrome, Firefox, Safari)
- [ ] Accessibility audit passed (contrast ratios, focus states)

## Dependencies

- Epic 12 (Branding Refresh) should be completed first for consistent colors
- Existing logo assets from Epic 12
- No external dependencies required