Samir Boulahtit
86d67b5cfb
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>
83 lines
2.6 KiB
Markdown
83 lines
2.6 KiB
Markdown
# Customer Authentication - Quick Summary
|
|
|
|
**Date**: 2025-11-24
|
|
**Full Documentation**: [CUSTOMER_AUTHENTICATION_IMPLEMENTATION.md](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.
|
|
|
|
## Cookie Path Logic
|
|
|
|
```python
|
|
# Domain/Subdomain access
|
|
cookie_path = "/shop"
|
|
|
|
# Path-based access (/vendors/wizamart/shop)
|
|
cookie_path = f"/vendors/{vendor_code}/shop"
|
|
```
|
|
|
|
## Authentication Flow
|
|
|
|
1. Login → Create JWT with `type: "customer"`
|
|
2. Set cookie with vendor-aware path
|
|
3. Dashboard request → Cookie sent (path matches!)
|
|
4. Dependency decodes JWT, validates type, loads Customer
|
|
5. Render dashboard with customer data
|
|
|
|
## Logout Flow
|
|
|
|
1. User clicks "Logout" button → Custom Tailwind modal appears
|
|
2. User confirms → API call to `/api/v1/shop/auth/logout`
|
|
3. Cookie deleted, localStorage cleared
|
|
4. 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
|