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:
@@ -55,8 +55,9 @@ app/
|
||||
│ ├── checkout.html ← Checkout flow
|
||||
│ ├── search.html ← Search results
|
||||
│ ├── account/ ← Customer account pages
|
||||
│ │ ├── login.html
|
||||
│ │ ├── register.html
|
||||
│ │ ├── login.html ← ✅ Customer login (IMPLEMENTED)
|
||||
│ │ ├── register.html ← ✅ Customer registration (IMPLEMENTED)
|
||||
│ │ ├── forgot-password.html ← ✅ Password reset (IMPLEMENTED)
|
||||
│ │ ├── dashboard.html
|
||||
│ │ ├── orders.html
|
||||
│ │ ├── profile.html
|
||||
@@ -737,6 +738,216 @@ Auth Flow:
|
||||
6. API Client → Add token to authenticated requests
|
||||
7. Optional → Use account features (orders, profile, etc.)
|
||||
|
||||
## Authentication Pages
|
||||
|
||||
*Added: 2025-11-24*
|
||||
|
||||
All authentication pages use Tailwind CSS, Alpine.js, and theme integration
|
||||
for a consistent, branded experience across all vendors.
|
||||
|
||||
✅ Login Page (app/templates/shop/account/login.html)
|
||||
──────────────────────────────────────────────────────────────────
|
||||
Route: /shop/account/login
|
||||
|
||||
Features:
|
||||
• Two-column layout (branding + form)
|
||||
• Email and password fields with validation
|
||||
• Password visibility toggle
|
||||
• "Remember me" checkbox
|
||||
• Error and success message alerts
|
||||
• Loading states with animated spinner
|
||||
• Links to register and forgot password
|
||||
• Theme-aware colors from CSS variables
|
||||
• Dark mode support
|
||||
• Mobile responsive design
|
||||
|
||||
Alpine.js Component:
|
||||
function customerLogin() {
|
||||
return {
|
||||
credentials: { email: '', password: '' },
|
||||
rememberMe: false,
|
||||
showPassword: false,
|
||||
loading: false,
|
||||
errors: {},
|
||||
alert: { show: false, type: 'error', message: '' },
|
||||
dark: false,
|
||||
|
||||
async handleLogin() {
|
||||
// POST /api/v1/shop/auth/login
|
||||
// Store token in localStorage
|
||||
// Redirect to account or return URL
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
API Endpoint:
|
||||
POST /api/v1/shop/auth/login
|
||||
Body: { email_or_username, password }
|
||||
Returns: { access_token, user }
|
||||
|
||||
✅ Register Page (app/templates/shop/account/register.html)
|
||||
──────────────────────────────────────────────────────────────────
|
||||
Route: /shop/account/register
|
||||
|
||||
Features:
|
||||
• Two-column layout with vendor branding
|
||||
• First name, last name, email fields
|
||||
• Phone number (optional)
|
||||
• Password with strength requirements
|
||||
• Confirm password field
|
||||
• Marketing consent checkbox
|
||||
• Real-time client-side validation
|
||||
• Password visibility toggle
|
||||
• Theme-aware styling
|
||||
• Loading states
|
||||
• Redirects to login after success
|
||||
|
||||
Validation Rules:
|
||||
• First name: required
|
||||
• Last name: required
|
||||
• Email: required, valid format
|
||||
• Password: min 8 chars, 1 letter, 1 number
|
||||
• Confirm password: must match password
|
||||
|
||||
Alpine.js Component:
|
||||
function customerRegistration() {
|
||||
return {
|
||||
formData: {
|
||||
first_name: '', last_name: '', email: '',
|
||||
phone: '', password: '', marketing_consent: false
|
||||
},
|
||||
confirmPassword: '',
|
||||
|
||||
validateForm() {
|
||||
// Validates all fields
|
||||
// Returns true if valid
|
||||
},
|
||||
|
||||
async handleRegister() {
|
||||
// POST /api/v1/shop/auth/register
|
||||
// Redirect to login?registered=true
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
API Endpoint:
|
||||
POST /api/v1/shop/auth/register
|
||||
Body: { first_name, last_name, email, phone?, password, marketing_consent }
|
||||
Returns: { message }
|
||||
|
||||
✅ Forgot Password Page (app/templates/shop/account/forgot-password.html)
|
||||
──────────────────────────────────────────────────────────────────
|
||||
Route: /shop/account/forgot-password
|
||||
|
||||
Features:
|
||||
• Two-column layout with vendor branding
|
||||
• Email input field
|
||||
• Two-state interface:
|
||||
1. Form submission state
|
||||
2. Success confirmation state
|
||||
• Success state with checkmark icon
|
||||
• Option to retry if email not received
|
||||
• Theme-aware styling
|
||||
• Links back to login and shop
|
||||
• Dark mode support
|
||||
|
||||
Alpine.js Component:
|
||||
function forgotPassword() {
|
||||
return {
|
||||
email: '',
|
||||
emailSent: false,
|
||||
loading: false,
|
||||
|
||||
async handleSubmit() {
|
||||
// POST /api/v1/shop/auth/forgot-password
|
||||
// Show success message
|
||||
// emailSent = true
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
API Endpoint:
|
||||
POST /api/v1/shop/auth/forgot-password
|
||||
Body: { email }
|
||||
Returns: { message }
|
||||
|
||||
🎨 THEME INTEGRATION
|
||||
──────────────────────────────────────────────────────────────────
|
||||
|
||||
All authentication pages inject vendor theme CSS variables:
|
||||
|
||||
<style id="vendor-theme-variables">
|
||||
:root {
|
||||
{% for key, value in theme.css_variables.items() %}
|
||||
{{ key }}: {{ value }};
|
||||
{% endfor %}
|
||||
}
|
||||
|
||||
/* Theme-aware button and focus colors */
|
||||
.btn-primary-theme {
|
||||
background-color: var(--color-primary);
|
||||
}
|
||||
.btn-primary-theme:hover:not(:disabled) {
|
||||
background-color: var(--color-primary-dark, var(--color-primary));
|
||||
filter: brightness(0.9);
|
||||
}
|
||||
.focus-primary:focus {
|
||||
border-color: var(--color-primary);
|
||||
box-shadow: 0 0 0 3px rgba(var(--color-primary-rgb, 124, 58, 237), 0.1);
|
||||
}
|
||||
</style>
|
||||
|
||||
Key Theme Elements:
|
||||
• Left panel background: var(--color-primary)
|
||||
• Submit buttons: var(--color-primary)
|
||||
• Links: var(--color-primary)
|
||||
• Checkboxes: var(--color-primary)
|
||||
• Focus states: var(--color-primary) with transparency
|
||||
• Vendor logo from theme.branding.logo
|
||||
|
||||
Benefits:
|
||||
✅ Each vendor's auth pages match their brand
|
||||
✅ Consistent with main shop design
|
||||
✅ Dark mode adapts to vendor colors
|
||||
✅ Professional, polished appearance
|
||||
|
||||
📱 RESPONSIVE DESIGN
|
||||
──────────────────────────────────────────────────────────────────
|
||||
|
||||
Mobile (<640px):
|
||||
• Vertical layout (image on top, form below)
|
||||
• Smaller padding and spacing
|
||||
• Full-width buttons
|
||||
• Touch-friendly input fields
|
||||
|
||||
Tablet (640px-1024px):
|
||||
• Side-by-side layout begins
|
||||
• Balanced column widths
|
||||
• Comfortable spacing
|
||||
|
||||
Desktop (>1024px):
|
||||
• Full two-column layout
|
||||
• Max width container (max-w-4xl)
|
||||
• Centered on page
|
||||
• Larger brand imagery
|
||||
|
||||
🔒 SECURITY FEATURES
|
||||
──────────────────────────────────────────────────────────────────
|
||||
|
||||
Client-Side:
|
||||
• Input validation before submission
|
||||
• Password visibility toggle
|
||||
• HTTPS required
|
||||
• No sensitive data in URLs
|
||||
• Token stored in localStorage (not cookies)
|
||||
|
||||
Server-Side (API handles):
|
||||
• Password hashing (bcrypt)
|
||||
• Email verification
|
||||
• Rate limiting
|
||||
• CSRF protection
|
||||
• SQL injection prevention
|
||||
|
||||
|
||||
📡 API CLIENT
|
||||
═════════════════════════════════════════════════════════════════
|
||||
|
||||
Reference in New Issue
Block a user