183 lines
5.0 KiB
Markdown
183 lines
5.0 KiB
Markdown
# 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/
|
|
```
|