Files

Samir Boulahtit 86d67b5cfb 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>

2025-11-25 21:09:27 +01:00

2.6 KiB

Raw Blame History

Customer Authentication - Quick Summary

Date: 2025-11-24 Full Documentation: CUSTOMER_AUTHENTICATION_IMPLEMENTATION.md

What Was Implemented

✅ Customer login, registration, and forgot password pages ✅ Customer dashboard with account overview ✅ Complete customer authentication system separate from admin/vendor ✅ Multi-access routing support (domain, subdomain, path-based) ✅ Secure cookie management with proper path restrictions ✅ Theme integration and responsive design ✅ Custom logout confirmation modal (Tailwind CSS + Alpine.js)

Key Files

Created

app/templates/shop/account/login.html
app/templates/shop/account/register.html
app/templates/shop/account/forgot-password.html
app/templates/shop/account/dashboard.html

Modified

app/api/v1/shop/auth.py - Dynamic cookie paths
app/api/deps.py - Customer authentication dependency
app/services/customer_service.py - Direct JWT token creation
app/routes/shop_pages.py - Customer type hints
middleware/vendor_context.py - Harmonized detection methods

Critical Architecture Decision

Customers ≠ Users

Users (admin/vendor): Have role, username, managed by auth_service
Customers: Vendor-scoped, have customer_number, managed by customer_service

JWT tokens have type: "customer" to distinguish them.

# Domain/Subdomain access
cookie_path = "/shop"

# Path-based access (/vendors/wizamart/shop)
cookie_path = f"/vendors/{vendor_code}/shop"

Authentication Flow

Login → Create JWT with type: "customer"
Set cookie with vendor-aware path
Dashboard request → Cookie sent (path matches!)
Dependency decodes JWT, validates type, loads Customer
Render dashboard with customer data

Logout Flow

User clicks "Logout" button → Custom Tailwind modal appears
User confirms → API call to /api/v1/shop/auth/logout
Cookie deleted, localStorage cleared
Success toast shown, redirect to login page

Note: Uses custom modal instead of browser's confirm() for better UX and styling consistency.

Testing URLs

# Path-based access
http://localhost:8000/vendors/wizamart/shop/account/login
http://localhost:8000/vendors/wizamart/shop/account/register
http://localhost:8000/vendors/wizamart/shop/account/dashboard

Next Steps (TODO)

Implement password reset functionality
Add email verification
Build account management pages (orders, profile, addresses)
Add refresh tokens for longer sessions
Implement rate limiting on auth endpoints

2.6 KiB Raw Blame History