168 lines
6.3 KiB
Markdown
168 lines
6.3 KiB
Markdown
# 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
|