feat: add customer authentication pages and documentation

Add complete customer authentication UI with login, registration,
forgot password, and dashboard pages.

Templates Added:
- app/templates/shop/account/login.html
  - Two-column layout with vendor branding
  - Email/password login with validation
  - Password visibility toggle
  - "Remember me" functionality
  - Error/success alerts
  - Loading states with spinner
- app/templates/shop/account/register.html
  - Customer registration form
  - Client-side validation (password strength, email format)
  - Marketing consent checkbox
  - Confirm password matching
- app/templates/shop/account/forgot-password.html
  - Password reset request page
  - Email validation
  - Success confirmation
- app/templates/shop/account/dashboard.html
  - Customer account dashboard
  - Overview of orders, profile, addresses

Styles Added:
- static/shared/css/auth.css
  - Authentication page styling
  - Two-column layout system
  - Form components and validation states
  - Theme-aware with CSS variables
  - Dark mode support
  - Mobile responsive
- static/shared/css/base.css updates
  - Enhanced utility classes
  - Additional form styles
  - Improved button states

Documentation Added:
- docs/frontend/shop/authentication-pages.md
  - Comprehensive guide to auth page implementation
  - Component architecture
  - API integration patterns
  - Theme customization
- docs/development/CUSTOMER_AUTHENTICATION_IMPLEMENTATION.md
  - Implementation details and technical decisions
  - Security considerations
  - Testing procedures
- docs/development/CUSTOMER_AUTH_SUMMARY.md
  - Quick reference guide
  - Endpoints and flows
- Updated docs/frontend/shop/architecture.md
  - Added authentication section
  - Documented all auth pages
- Updated docs/frontend/shop/page-templates.md
  - Added auth template documentation
- Updated mkdocs.yml
  - Added new documentation pages to navigation

Features:
- Full theme integration with vendor branding
- Alpine.js reactive components
- Tailwind CSS utility-first styling
- Client and server-side validation
- JWT token management
- Multi-access routing support (domain/subdomain/path)
- Error handling with user-friendly messages
- Loading states and animations
- Mobile responsive design
- Dark mode support

🤖 Generated with [Claude Code](https://claude.com/claude-code)

Co-Authored-By: Claude <noreply@anthropic.com>
This commit is contained in:
2025-11-25 21:09:27 +01:00
parent 6735d99df2
commit 86d67b5cfb
12 changed files with 3118 additions and 473 deletions

View File

@@ -6,6 +6,28 @@ This guide provides complete templates for creating new customer-facing shop pag
---
## 🔐 Authentication Pages (Available)
Three fully-implemented authentication pages are available for reference:
- **Login** (`app/templates/shop/account/login.html`) - Customer sign-in with email/password
- **Register** (`app/templates/shop/account/register.html`) - New customer account creation
- **Forgot Password** (`app/templates/shop/account/forgot-password.html`) - Password reset flow
All authentication pages feature:
- ✅ Tailwind CSS styling
- ✅ Alpine.js interactivity
- ✅ Theme integration (vendor colors, logos, fonts)
- ✅ Dark mode support
- ✅ Mobile responsive design
- ✅ Form validation
- ✅ Loading states
- ✅ Error handling
See the [Shop Architecture Documentation](./architecture.md) (Authentication Pages section) for complete details.
---
## 🎯 Quick Reference
### File Structure for New Page