created epic 13 make a better login page design
This commit is contained in:
Naser Mansour
parent
082545032a
commit
e557fb1104
|
|
@ -0,0 +1,167 @@
|
|||
# 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
|
||||
|
|
@ -27,8 +27,11 @@ This document provides an index of all epics for the Libra Law Firm platform dev
|
|||
| 8 | [Email Notification System](./epic-8-email-notifications.md) | 10 | High | Epic 1-4 |
|
||||
| 9 | [Design & Branding Implementation](./epic-9-design-branding.md) | 11 | High | Epic 1 |
|
||||
| 10 | [Brand Color Refresh](./epic-10-brand-color-refresh.md) | 3 | High | Epic 9 |
|
||||
| 11 | [Guest Booking](./epic-11-guest-booking.md) | 4 | High | Epic 3 |
|
||||
| 12 | [Branding Refresh - Logo & Colors](./epic-12-branding-refresh.md) | 6 | High | Epic 9, 10 |
|
||||
| 13 | [Auth Page Design Enhancement](./epic-13-auth-page-design.md) | 5 | Medium | Epic 12 |
|
||||
|
||||
**Total Stories:** 68
|
||||
**Total Stories:** 83
|
||||
|
||||
---
|
||||
|
||||
|
|
@ -53,6 +56,9 @@ This document provides an index of all epics for the Libra Law Firm platform dev
|
|||
|
||||
### Phase 5: Brand Refresh
|
||||
10. **Epic 10: Brand Color Refresh** - Update to new LIBRA for Rights color palette
|
||||
11. **Epic 11: Guest Booking** - Public booking form for unauthenticated visitors
|
||||
12. **Epic 12: Branding Refresh** - Logo and color scheme updates
|
||||
13. **Epic 13: Auth Page Design** - Enhanced authentication page layouts
|
||||
|
||||
---
|
||||
|
||||
|
|
@ -62,6 +68,7 @@ This document provides an index of all epics for the Libra Law Firm platform dev
|
|||
Epic 1 (Core Foundation)
|
||||
├── Epic 2 (User Management)
|
||||
│ └── Epic 3 (Booking)
|
||||
│ │ └── Epic 11 (Guest Booking)
|
||||
│ └── Epic 4 (Timeline)
|
||||
│ └── Epic 6 (Admin Dashboard)
|
||||
│ └── Epic 7 (Client Dashboard)
|
||||
|
|
@ -69,6 +76,8 @@ Epic 1 (Core Foundation)
|
|||
├── Epic 5 (Posts)
|
||||
└── Epic 9 (Design)
|
||||
└── Epic 10 (Brand Color Refresh)
|
||||
└── Epic 12 (Branding Refresh)
|
||||
└── Epic 13 (Auth Page Design)
|
||||
```
|
||||
|
||||
---
|
||||
|
|
|
|||
|
|
@ -0,0 +1,96 @@
|
|||
# Story 13.1: Language Toggle Visibility Enhancement
|
||||
|
||||
## Story
|
||||
|
||||
**As a** user on authentication pages
|
||||
**I want to** clearly see and interact with the language toggle
|
||||
**So that** I can easily switch between Arabic and English
|
||||
|
||||
## Acceptance Criteria
|
||||
|
||||
### AC1: Update Light Variant Text Color
|
||||
|
||||
**Given** the language toggle has a `light` variant for light backgrounds
|
||||
**When** viewed on auth pages (white/cream background)
|
||||
**Then** the inactive language uses `text-primary` (Dark Forest Green #2D3624) instead of `text-body/70`
|
||||
|
||||
### AC2: Update Light Variant Hover State
|
||||
|
||||
**Given** the user hovers over an inactive language option
|
||||
**When** the variant is `light`
|
||||
**Then** the hover state uses:
|
||||
- Text: `text-cta-hover` (Darker Gold #8A7555)
|
||||
- Background: `bg-primary/10` (subtle dark background)
|
||||
|
||||
### AC3: Update Light Variant Separator Color
|
||||
|
||||
**Given** the separator `|` between languages
|
||||
**When** the variant is `light`
|
||||
**Then** it uses `text-primary/50` instead of `text-body/30` for better visibility
|
||||
|
||||
### AC4: Dark Variant Unchanged
|
||||
|
||||
**Given** the language toggle has a `dark` variant for dark backgrounds (navigation bar)
|
||||
**When** viewed on the public navigation
|
||||
**Then** the existing styling remains unchanged:
|
||||
- Inactive: `text-off-white`
|
||||
- Hover: `text-cta hover:bg-active-hover`
|
||||
- Separator: `text-cta/50`
|
||||
|
||||
### AC5: Active State Unchanged
|
||||
|
||||
**Given** the currently active language
|
||||
**When** displayed in either variant
|
||||
**Then** it maintains the existing active styling:
|
||||
- `bg-active text-white font-bold`
|
||||
|
||||
### AC6: Contrast Compliance
|
||||
|
||||
**Given** accessibility requirements
|
||||
**When** the light variant is used on Warm Cream background (#F4F1EA)
|
||||
**Then** the text contrast meets WCAG AA:
|
||||
- Dark Forest Green (#2D3624) on Warm Cream (#F4F1EA): ≥4.5:1
|
||||
|
||||
## Technical Notes
|
||||
|
||||
### File to Modify
|
||||
- `resources/views/components/language-toggle.blade.php`
|
||||
|
||||
### Current Implementation (Light Variant)
|
||||
```php
|
||||
'text-body/70 hover:text-body hover:bg-active-hover' => app()->getLocale() !== 'ar' && $variant === 'light',
|
||||
```
|
||||
|
||||
### New Implementation (Light Variant)
|
||||
```php
|
||||
'text-primary hover:text-cta-hover hover:bg-primary/10' => app()->getLocale() !== 'ar' && $variant === 'light',
|
||||
```
|
||||
|
||||
### Color Reference
|
||||
| Element | Current | New |
|
||||
|---------|---------|-----|
|
||||
| Inactive Text | `text-body/70` (~70% opacity) | `text-primary` (100% Dark Forest Green) |
|
||||
| Hover Text | `text-body` | `text-cta-hover` (Darker Gold) |
|
||||
| Hover Background | `bg-active-hover` | `bg-primary/10` (subtle dark) |
|
||||
| Separator | `text-body/30` | `text-primary/50` |
|
||||
|
||||
## Dev Checklist
|
||||
|
||||
- [ ] Update Arabic link light variant classes
|
||||
- [ ] Update English link light variant classes
|
||||
- [ ] Update separator light variant class
|
||||
- [ ] Verify dark variant unchanged
|
||||
- [ ] Test on login page
|
||||
- [ ] Test on forgot-password page
|
||||
- [ ] Test RTL (Arabic) layout
|
||||
- [ ] Test LTR (English) layout
|
||||
- [ ] Verify contrast ratios
|
||||
|
||||
## Estimation
|
||||
|
||||
**Complexity:** Low
|
||||
**Risk:** Low - Component-level CSS changes only
|
||||
|
||||
## Dependencies
|
||||
|
||||
- Epic 12 completed (brand colors defined)
|
||||
|
|
@ -0,0 +1,139 @@
|
|||
# Story 13.2: Auth Layout Split Design Update
|
||||
|
||||
## Story
|
||||
|
||||
**As a** visitor to the authentication pages
|
||||
**I want to** see a visually appealing split-screen layout with the LIBRA branding
|
||||
**So that** the login experience feels professional and aligned with the brand identity
|
||||
|
||||
## Acceptance Criteria
|
||||
|
||||
### AC1: Left Panel - Brand Side (Desktop)
|
||||
|
||||
**Given** the split layout is viewed on desktop (lg+ breakpoint)
|
||||
**When** the page loads
|
||||
**Then** the left panel displays:
|
||||
- Full height (`h-full`)
|
||||
- Dark Forest Green background (`bg-primary` #2D3624)
|
||||
- LIBRA logo centered vertically and horizontally
|
||||
- Logo size: Large (`size="lg"` or `size="xl"`)
|
||||
- No text below logo (clean, minimal design)
|
||||
|
||||
### AC2: Right Panel - Form Side (Desktop)
|
||||
|
||||
**Given** the split layout is viewed on desktop
|
||||
**When** the page loads
|
||||
**Then** the right panel displays:
|
||||
- Warm Cream background (`bg-background` #F4F1EA)
|
||||
- Form content centered
|
||||
- Language toggle in top-right corner
|
||||
- Adequate padding for comfortable reading
|
||||
|
||||
### AC3: Mobile Layout
|
||||
|
||||
**Given** the split layout is viewed on mobile (below lg breakpoint)
|
||||
**When** the page loads
|
||||
**Then**:
|
||||
- Left panel (brand side) is hidden
|
||||
- Logo appears above the form (centered, size="xl")
|
||||
- Form takes full width with padding
|
||||
- Language toggle in top-right corner
|
||||
- Background uses Warm Cream
|
||||
|
||||
### AC4: RTL (Arabic) Support
|
||||
|
||||
**Given** the user's locale is Arabic
|
||||
**When** the split layout renders
|
||||
**Then**:
|
||||
- Layout mirrors correctly (brand panel on right, form on left)
|
||||
- Language toggle appears in top-left (logical `end`)
|
||||
- All text alignment respects RTL
|
||||
|
||||
### AC5: Language Toggle Positioning
|
||||
|
||||
**Given** the language toggle component
|
||||
**When** displayed on the split layout
|
||||
**Then**:
|
||||
- Position: Fixed in top corner (`absolute end-4 top-4 z-50`)
|
||||
- Uses `variant="light"` for visibility on light background
|
||||
- Accessible via keyboard navigation
|
||||
|
||||
### AC6: Remove Inspiring Quotes
|
||||
|
||||
**Given** the existing split layout has inspiring quotes
|
||||
**When** the layout is updated
|
||||
**Then** the quotes section is removed for a cleaner, branded appearance
|
||||
|
||||
### AC7: Responsive Breakpoints
|
||||
|
||||
**Given** various screen sizes
|
||||
**When** the layout responds
|
||||
**Then**:
|
||||
- `lg+` (≥1024px): Full split layout (50/50)
|
||||
- Below `lg`: Mobile layout (form only with logo above)
|
||||
|
||||
## Technical Notes
|
||||
|
||||
### File to Modify
|
||||
- `resources/views/components/layouts/auth/split.blade.php`
|
||||
|
||||
### Current Structure
|
||||
```html
|
||||
<main class="relative grid h-dvh ... lg:grid-cols-2">
|
||||
<!-- Left: Brand panel with neutral-900 bg and quotes -->
|
||||
<div class="bg-muted relative hidden h-full ... lg:flex">
|
||||
<div class="absolute inset-0 bg-neutral-900"></div>
|
||||
<!-- Logo and quotes -->
|
||||
</div>
|
||||
<!-- Right: Form -->
|
||||
<div class="w-full lg:p-8">...</div>
|
||||
</main>
|
||||
```
|
||||
|
||||
### Target Structure
|
||||
```html
|
||||
<main class="relative grid h-dvh ... lg:grid-cols-2">
|
||||
<!-- Left: Brand panel with primary bg -->
|
||||
<div class="relative hidden h-full flex-col items-center justify-center lg:flex bg-primary">
|
||||
<x-logo size="xl" />
|
||||
</div>
|
||||
<!-- Right: Form with pattern bg -->
|
||||
<div class="w-full bg-background lg:p-8">
|
||||
<!-- Language toggle -->
|
||||
<div class="absolute end-4 top-4 z-50">
|
||||
<x-language-toggle variant="light" />
|
||||
</div>
|
||||
<!-- Form content -->
|
||||
</div>
|
||||
</main>
|
||||
```
|
||||
|
||||
### Color Values
|
||||
| Element | Color | Hex |
|
||||
|---------|-------|-----|
|
||||
| Left Panel Background | `bg-primary` | #2D3624 |
|
||||
| Right Panel Background | `bg-background` | #F4F1EA |
|
||||
| Logo | Default (adapts to dark bg) | - |
|
||||
|
||||
## Dev Checklist
|
||||
|
||||
- [ ] Update left panel background to `bg-primary`
|
||||
- [ ] Center logo in left panel (remove quotes)
|
||||
- [ ] Update right panel background to `bg-background`
|
||||
- [ ] Position language toggle correctly
|
||||
- [ ] Test desktop layout (50/50 split)
|
||||
- [ ] Test mobile layout (form only)
|
||||
- [ ] Test RTL mirroring
|
||||
- [ ] Verify logo visibility on dark background
|
||||
- [ ] Remove inspiring quotes code
|
||||
- [ ] Ensure z-index layering correct
|
||||
|
||||
## Estimation
|
||||
|
||||
**Complexity:** Medium
|
||||
**Risk:** Low - Layout restructuring with existing components
|
||||
|
||||
## Dependencies
|
||||
|
||||
- Story 13.1 (Language Toggle Visibility) - Can run in parallel
|
||||
- Epic 12 (Brand colors defined)
|
||||
|
|
@ -0,0 +1,148 @@
|
|||
# Story 13.3: Subtle Background Pattern Implementation
|
||||
|
||||
## Story
|
||||
|
||||
**As a** visitor to the authentication pages
|
||||
**I want to** see a subtle, elegant background pattern on the form side
|
||||
**So that** the page feels polished and professionally designed
|
||||
|
||||
## Acceptance Criteria
|
||||
|
||||
### AC1: Create SVG Pattern Asset
|
||||
|
||||
**Given** the need for a subtle background pattern
|
||||
**When** the pattern is created
|
||||
**Then**:
|
||||
- SVG format for scalability and performance
|
||||
- Uses brand color (Warm Gold #A68966) at 5-8% opacity
|
||||
- Pattern type: Geometric or botanical (wheat/leaf motif)
|
||||
- Seamlessly tileable
|
||||
- File size under 5KB for performance
|
||||
|
||||
### AC2: Pattern Placement
|
||||
|
||||
**Given** the SVG pattern is created
|
||||
**When** applied to the auth layout
|
||||
**Then**:
|
||||
- Pattern appears on the form side (right panel desktop, full background mobile)
|
||||
- Pattern overlays the Warm Cream background
|
||||
- Pattern is fixed/static (doesn't scroll with content)
|
||||
- Pattern doesn't interfere with form readability
|
||||
|
||||
### AC3: Pattern Opacity
|
||||
|
||||
**Given** readability requirements
|
||||
**When** the pattern is displayed
|
||||
**Then**:
|
||||
- Opacity is subtle (5-8%)
|
||||
- Text remains clearly readable
|
||||
- Pattern adds visual interest without distraction
|
||||
|
||||
### AC4: CSS Implementation
|
||||
|
||||
**Given** the pattern asset
|
||||
**When** integrated into CSS
|
||||
**Then**:
|
||||
- Applied via `background-image` or pseudo-element
|
||||
- Uses `background-repeat: repeat` for tiling
|
||||
- Background is fixed or positioned appropriately
|
||||
- Can be easily disabled if needed
|
||||
|
||||
### AC5: Performance Consideration
|
||||
|
||||
**Given** page load performance
|
||||
**When** the pattern loads
|
||||
**Then**:
|
||||
- Pattern is inlined or loaded efficiently
|
||||
- No noticeable delay in page rendering
|
||||
- Pattern works without JavaScript
|
||||
|
||||
### AC6: Mobile Compatibility
|
||||
|
||||
**Given** mobile viewport
|
||||
**When** pattern is displayed
|
||||
**Then**:
|
||||
- Pattern scales appropriately
|
||||
- No horizontal scrolling caused by pattern
|
||||
- Pattern remains subtle on smaller screens
|
||||
|
||||
## Technical Notes
|
||||
|
||||
### Pattern Options
|
||||
|
||||
**Option A: Geometric (Recommended)**
|
||||
- Simple diagonal lines or dots
|
||||
- Clean, modern aesthetic
|
||||
- Easier to create and maintain
|
||||
|
||||
**Option B: Botanical**
|
||||
- Wheat/leaf silhouettes
|
||||
- Aligns with LIBRA brand identity
|
||||
- More complex but more unique
|
||||
|
||||
### SVG Pattern Example (Geometric)
|
||||
```svg
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="20" height="20">
|
||||
<circle cx="2" cy="2" r="1" fill="#A68966" fill-opacity="0.06"/>
|
||||
</svg>
|
||||
```
|
||||
|
||||
### CSS Implementation Options
|
||||
|
||||
**Option 1: Inline SVG in CSS**
|
||||
```css
|
||||
.auth-pattern {
|
||||
background-image: url("data:image/svg+xml,...");
|
||||
background-repeat: repeat;
|
||||
}
|
||||
```
|
||||
|
||||
**Option 2: Pseudo-element Overlay**
|
||||
```css
|
||||
.auth-form-side::before {
|
||||
content: '';
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
background-image: url('/images/pattern.svg');
|
||||
background-repeat: repeat;
|
||||
opacity: 0.06;
|
||||
pointer-events: none;
|
||||
}
|
||||
```
|
||||
|
||||
**Option 3: Tailwind Arbitrary Value**
|
||||
```html
|
||||
<div class="bg-[url('/images/pattern.svg')]">
|
||||
```
|
||||
|
||||
### Files to Create/Modify
|
||||
- `public/images/auth-pattern.svg` (new) OR inline in CSS
|
||||
- `resources/css/app.css` (if adding pattern class)
|
||||
- `resources/views/components/layouts/auth/split.blade.php` (apply pattern)
|
||||
|
||||
### Pattern Design Guidelines
|
||||
- Color: Warm Gold (#A68966)
|
||||
- Opacity: 5-8% (0.05-0.08)
|
||||
- Size: 20-40px tiles for subtle effect
|
||||
- Style: Minimalist, professional
|
||||
|
||||
## Dev Checklist
|
||||
|
||||
- [ ] Design/select pattern style (geometric vs botanical)
|
||||
- [ ] Create SVG pattern file
|
||||
- [ ] Optimize SVG for file size
|
||||
- [ ] Add pattern to auth layout CSS
|
||||
- [ ] Test pattern visibility at various screen sizes
|
||||
- [ ] Verify text readability over pattern
|
||||
- [ ] Test in both Arabic and English
|
||||
- [ ] Verify no horizontal scroll issues
|
||||
- [ ] Check pattern on high-DPI displays
|
||||
|
||||
## Estimation
|
||||
|
||||
**Complexity:** Medium
|
||||
**Risk:** Low - Decorative enhancement only
|
||||
|
||||
## Dependencies
|
||||
|
||||
- Story 13.2 (Auth Split Layout) - Must be completed first
|
||||
|
|
@ -0,0 +1,182 @@
|
|||
# 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/
|
||||
```
|
||||
|
|
@ -0,0 +1,231 @@
|
|||
# Story 13.5: Visual QA and Refinement
|
||||
|
||||
## Story
|
||||
|
||||
**As a** product owner
|
||||
**I want to** ensure all auth pages look polished and consistent
|
||||
**So that** users have a professional, trustworthy experience
|
||||
|
||||
## Acceptance Criteria
|
||||
|
||||
### AC1: Cross-Browser Testing
|
||||
|
||||
**Given** the updated auth pages
|
||||
**When** tested in major browsers
|
||||
**Then** all pages render correctly in:
|
||||
- Chrome (latest)
|
||||
- Firefox (latest)
|
||||
- Safari (latest)
|
||||
- Edge (latest)
|
||||
|
||||
### AC2: Desktop Viewport Testing
|
||||
|
||||
**Given** desktop viewports
|
||||
**When** auth pages are viewed
|
||||
**Then** the split layout displays correctly at:
|
||||
- 1920x1080 (Full HD)
|
||||
- 1440x900 (Common laptop)
|
||||
- 1280x720 (HD)
|
||||
- 1024x768 (iPad landscape / small desktop)
|
||||
|
||||
### AC3: Mobile Viewport Testing
|
||||
|
||||
**Given** mobile viewports
|
||||
**When** auth pages are viewed
|
||||
**Then** the mobile layout displays correctly at:
|
||||
- 375x667 (iPhone SE)
|
||||
- 390x844 (iPhone 12/13/14)
|
||||
- 428x926 (iPhone 14 Plus)
|
||||
- 360x800 (Android common)
|
||||
- 768x1024 (iPad portrait)
|
||||
|
||||
### AC4: RTL Visual Verification
|
||||
|
||||
**Given** Arabic language selected
|
||||
**When** all auth pages are viewed
|
||||
**Then**:
|
||||
- Split layout mirrors correctly (logo panel on right)
|
||||
- Form alignment is correct (right-aligned labels)
|
||||
- Language toggle in correct position
|
||||
- No text overflow or clipping
|
||||
- Pattern (if directional) mirrors appropriately
|
||||
|
||||
### AC5: Logo Visibility Verification
|
||||
|
||||
**Given** the LIBRA logo on the brand panel
|
||||
**When** viewed on desktop
|
||||
**Then**:
|
||||
- Logo is clearly visible on dark background
|
||||
- Logo is properly centered
|
||||
- Logo size is appropriate (not too large, not too small)
|
||||
- Logo maintains aspect ratio
|
||||
|
||||
### AC6: Language Toggle Visibility Verification
|
||||
|
||||
**Given** the language toggle on auth pages
|
||||
**When** viewed
|
||||
**Then**:
|
||||
- Text is clearly readable
|
||||
- Contrast ratio meets WCAG AA
|
||||
- Active state is clearly indicated
|
||||
- Hover states are visible
|
||||
- Touch target is adequate on mobile (44px min)
|
||||
|
||||
### AC7: Pattern Subtlety Verification
|
||||
|
||||
**Given** the background pattern
|
||||
**When** viewed across all pages
|
||||
**Then**:
|
||||
- Pattern is visible but not distracting
|
||||
- Text remains easily readable
|
||||
- Pattern doesn't create visual noise
|
||||
- Pattern works on all screen sizes
|
||||
|
||||
### AC8: Form Element Alignment
|
||||
|
||||
**Given** form elements on auth pages
|
||||
**When** viewed
|
||||
**Then**:
|
||||
- Labels align consistently
|
||||
- Input fields have consistent width
|
||||
- Buttons are properly sized
|
||||
- Error messages align with fields
|
||||
- Spacing is consistent
|
||||
|
||||
### AC9: Color Consistency
|
||||
|
||||
**Given** the brand color palette
|
||||
**When** auth pages are viewed
|
||||
**Then**:
|
||||
- Left panel uses correct Dark Forest Green (#2D3624)
|
||||
- Right panel uses correct Warm Cream (#F4F1EA)
|
||||
- Buttons use correct Warm Gold (#A68966)
|
||||
- Text uses correct colors
|
||||
- No unintended color variations
|
||||
|
||||
### AC10: Animation/Transition Polish
|
||||
|
||||
**Given** interactive elements
|
||||
**When** interacted with
|
||||
**Then**:
|
||||
- Hover transitions are smooth (150-200ms)
|
||||
- Focus states are visible
|
||||
- No jarring visual changes
|
||||
- Page transitions (if any) are smooth
|
||||
|
||||
### AC11: Print Stylesheet (Optional)
|
||||
|
||||
**Given** a user prints an auth page
|
||||
**When** the page is printed
|
||||
**Then**:
|
||||
- Form is readable
|
||||
- Background pattern doesn't waste ink
|
||||
- Logo prints appropriately (or is hidden)
|
||||
|
||||
### AC12: Fix Any Visual Issues
|
||||
|
||||
**Given** issues discovered during QA
|
||||
**When** fixes are needed
|
||||
**Then**:
|
||||
- Issues are documented
|
||||
- Fixes are implemented
|
||||
- Fixes are re-tested
|
||||
- No regression introduced
|
||||
|
||||
## Technical Notes
|
||||
|
||||
### QA Checklist Template
|
||||
|
||||
```markdown
|
||||
## Browser: [Browser Name]
|
||||
## Viewport: [Width x Height]
|
||||
## Language: [EN/AR]
|
||||
|
||||
### Login Page
|
||||
- [ ] Split layout correct
|
||||
- [ ] Logo visible and centered
|
||||
- [ ] Form aligned properly
|
||||
- [ ] Language toggle visible
|
||||
- [ ] Pattern subtle
|
||||
- [ ] Form validation works
|
||||
- [ ] Error messages display
|
||||
|
||||
### Forgot Password Page
|
||||
- [ ] Layout correct
|
||||
- [ ] Form works
|
||||
- [ ] Messages display
|
||||
|
||||
### Reset Password Page
|
||||
- [ ] Layout correct
|
||||
- [ ] Form works
|
||||
- [ ] Password visibility works
|
||||
|
||||
### 2FA Challenge Page
|
||||
- [ ] Layout correct
|
||||
- [ ] OTP input works
|
||||
- [ ] Recovery code option works
|
||||
|
||||
### Confirm Password Page
|
||||
- [ ] Layout correct
|
||||
- [ ] Form works
|
||||
|
||||
### Email Verification Page
|
||||
- [ ] Layout correct
|
||||
- [ ] Resend button works
|
||||
|
||||
### Overall
|
||||
- [ ] No horizontal scrolling
|
||||
- [ ] No visual glitches
|
||||
- [ ] Colors correct
|
||||
- [ ] Spacing consistent
|
||||
```
|
||||
|
||||
### Common Issues to Watch For
|
||||
|
||||
1. **Logo sizing** - May need adjustment per viewport
|
||||
2. **Pattern tiling** - Check for visible seams
|
||||
3. **RTL mirroring** - Icons and directional elements
|
||||
4. **Input placeholder visibility** - May need color adjustment
|
||||
5. **Focus ring visibility** - Ensure visible on both backgrounds
|
||||
6. **Z-index stacking** - Language toggle over pattern
|
||||
|
||||
### Files That May Need Adjustment
|
||||
- `resources/views/components/layouts/auth/split.blade.php`
|
||||
- `resources/css/app.css` (pattern, spacing)
|
||||
- `resources/views/components/language-toggle.blade.php`
|
||||
- `resources/views/components/logo.blade.php` (if size needs tweaking)
|
||||
|
||||
## Dev Checklist
|
||||
|
||||
- [ ] Test Chrome desktop
|
||||
- [ ] Test Firefox desktop
|
||||
- [ ] Test Safari desktop
|
||||
- [ ] Test Edge desktop
|
||||
- [ ] Test Chrome mobile
|
||||
- [ ] Test Safari mobile (iOS)
|
||||
- [ ] Test Chrome Android
|
||||
- [ ] Test all viewports listed
|
||||
- [ ] Test English layout
|
||||
- [ ] Test Arabic layout
|
||||
- [ ] Document any issues found
|
||||
- [ ] Fix all issues
|
||||
- [ ] Re-test fixes
|
||||
- [ ] Get stakeholder sign-off
|
||||
|
||||
## Estimation
|
||||
|
||||
**Complexity:** Medium
|
||||
**Risk:** Low - Refinement only, no functional changes
|
||||
|
||||
## Dependencies
|
||||
|
||||
- Story 13.1 (Language Toggle) - Must be completed
|
||||
- Story 13.2 (Split Layout) - Must be completed
|
||||
- Story 13.3 (Pattern) - Must be completed
|
||||
- Story 13.4 (Pages Migration) - Must be completed
|
||||
|
||||
## Sign-off
|
||||
|
||||
- [ ] Developer sign-off
|
||||
- [ ] Design review (if applicable)
|
||||
- [ ] Stakeholder approval
|
||||
Loading…
Reference in New Issue