Samir Boulahtit
5a9f44f3d1
## API Migration (Complete)
### New Shop API Endpoints Created
- **Products API** (app/api/v1/shop/products.py)
- GET /api/v1/shop/products - Product catalog with pagination/search/filters
- GET /api/v1/shop/products/{id} - Product details
- **Cart API** (app/api/v1/shop/cart.py)
- GET /api/v1/shop/cart/{session_id} - Get cart
- POST /api/v1/shop/cart/{session_id}/items - Add to cart
- PUT /api/v1/shop/cart/{session_id}/items/{product_id} - Update quantity
- DELETE /api/v1/shop/cart/{session_id}/items/{product_id} - Remove item
- DELETE /api/v1/shop/cart/{session_id} - Clear cart
- **Orders API** (app/api/v1/shop/orders.py)
- POST /api/v1/shop/orders - Place order (authenticated)
- GET /api/v1/shop/orders - Order history (authenticated)
- GET /api/v1/shop/orders/{id} - Order details (authenticated)
- **Auth API** (app/api/v1/shop/auth.py)
- POST /api/v1/shop/auth/register - Customer registration
- POST /api/v1/shop/auth/login - Customer login (sets cookie at path=/shop)
- POST /api/v1/shop/auth/logout - Customer logout
- POST /api/v1/shop/auth/forgot-password - Password reset request
- POST /api/v1/shop/auth/reset-password - Password reset
**Total: 18 new shop API endpoints**
### Middleware Enhancement
Updated VendorContextMiddleware (middleware/vendor_context.py):
- Added is_shop_api_request() to detect /api/v1/shop/* routes
- Added extract_vendor_from_referer() to extract vendor from Referer header
- Supports path-based: /vendors/wizamart/shop/* → wizamart
- Supports subdomain: wizamart.platform.com → wizamart
- Supports custom domain: customshop.com → customshop.com
- Modified dispatch() to handle shop API specially (no longer skips)
- Vendor context now injected into request.state.vendor for shop API calls
### Frontend Migration (Complete)
Updated all shop templates to use new API endpoints:
- app/templates/shop/account/login.html - Updated login endpoint
- app/templates/shop/account/register.html - Updated register endpoint
- app/templates/shop/product.html - Updated 4 API calls (products, cart)
- app/templates/shop/cart.html - Updated 3 API calls (get, update, delete)
- app/templates/shop/products.html - Activated product loading from API
**Total: 9 API endpoint migrations across 5 templates**
### Old Endpoint Cleanup (Complete)
Removed deprecated /api/v1/public/vendors/* shop endpoints:
- Deleted app/api/v1/public/vendors/auth.py
- Deleted app/api/v1/public/vendors/products.py
- Deleted app/api/v1/public/vendors/cart.py
- Deleted app/api/v1/public/vendors/orders.py
- Deleted app/api/v1/public/vendors/payments.py (empty)
- Deleted app/api/v1/public/vendors/search.py (empty)
- Deleted app/api/v1/public/vendors/shop.py (empty)
Updated app/api/v1/public/__init__.py to only include vendor lookup endpoints:
- GET /api/v1/public/vendors/by-code/{code}
- GET /api/v1/public/vendors/by-subdomain/{subdomain}
- GET /api/v1/public/vendors/{id}/info
**Result: Only 3 truly public endpoints remain**
### Error Page Improvements
Updated all shop error templates to use base_url:
- app/templates/shop/errors/*.html (10 files)
- Updated error_renderer.py to calculate base_url from vendor context
- Links now work correctly for path-based, subdomain, and custom domain access
### CMS Route Handler
Added catch-all CMS route to app/routes/vendor_pages.py:
- Handles /{vendor_code}/{slug} for content pages
- Uses content_page_service for two-tier lookup (vendor override → platform default)
### Template Architecture Fix
Updated app/templates/shop/base.html:
- Changed x-data to use {% block alpine_data %} for component override
- Allows pages to specify custom Alpine.js components
- Enables page-specific state while extending shared shopLayoutData()
### Documentation (Complete)
Created comprehensive documentation:
- docs/api/shop-api-reference.md - Complete API reference with examples
- docs/architecture/API_CONSOLIDATION_PROPOSAL.md - Analysis of 3 options
- docs/architecture/API_MIGRATION_STATUS.md - Migration tracking (100% complete)
- Updated docs/api/index.md - Added Shop API section
- Updated docs/frontend/shop/architecture.md - New API structure and component pattern
## Benefits Achieved
### Cleaner URLs (~40% shorter)
Before: /api/v1/public/vendors/{vendor_id}/products
After: /api/v1/shop/products
### Better Architecture
- Middleware-driven vendor context (no manual vendor_id passing)
- Proper separation of concerns (public vs shop vs vendor APIs)
- Consistent authentication pattern
- RESTful design
### Developer Experience
- No need to track vendor_id in frontend state
- Automatic vendor context from Referer header
- Simpler API calls
- Better documentation
## Testing
- Verified middleware extracts vendor from Referer correctly
- Tested all shop API endpoints with vendor context
- Confirmed products page loads and displays products
- Verified error pages show correct links
- No old API references remain in templates
Migration Status: ✅ 100% Complete (8/8 success criteria met)
🤖 Generated with [Claude Code](https://claude.com/claude-code)
Co-Authored-By: Claude <noreply@anthropic.com>
342 lines
11 KiB
HTML
342 lines
11 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Create Account - {{ vendor.name }}</title>
|
|
<link rel="stylesheet" href="/static/css/shared/base.css">
|
|
<link rel="stylesheet" href="/static/css/shared/auth.css">
|
|
<script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script>
|
|
</head>
|
|
<body class="auth-page">
|
|
<div class="login-container"
|
|
x-data="customerRegistration()"
|
|
data-vendor-id="{{ vendor.id }}"
|
|
data-vendor-name="{{ vendor.name }}"
|
|
>
|
|
<!-- Header -->
|
|
<div class="login-header">
|
|
{% if vendor.logo_url %}
|
|
<img src="{{ vendor.logo_url }}" alt="{{ vendor.name }}" class="auth-logo">
|
|
{% else %}
|
|
<div class="auth-logo">🛒</div>
|
|
{% endif %}
|
|
<h1>Create Account</h1>
|
|
<p>Join {{ vendor.name }}</p>
|
|
</div>
|
|
|
|
<!-- Alert Box -->
|
|
<div x-show="alert.show"
|
|
x-transition
|
|
:class="'alert alert-' + alert.type"
|
|
x-text="alert.message"
|
|
></div>
|
|
|
|
<!-- Registration Form -->
|
|
<form @submit.prevent="handleRegister">
|
|
<!-- First Name -->
|
|
<div class="form-group">
|
|
<label for="firstName">First Name <span class="required">*</span></label>
|
|
<input
|
|
type="text"
|
|
id="firstName"
|
|
x-model="formData.first_name"
|
|
required
|
|
placeholder="Enter your first name"
|
|
:class="{ 'error': errors.first_name }"
|
|
@input="clearError('first_name')"
|
|
>
|
|
<div x-show="errors.first_name"
|
|
x-text="errors.first_name"
|
|
class="error-message show"
|
|
></div>
|
|
</div>
|
|
|
|
<!-- Last Name -->
|
|
<div class="form-group">
|
|
<label for="lastName">Last Name <span class="required">*</span></label>
|
|
<input
|
|
type="text"
|
|
id="lastName"
|
|
x-model="formData.last_name"
|
|
required
|
|
placeholder="Enter your last name"
|
|
:class="{ 'error': errors.last_name }"
|
|
@input="clearError('last_name')"
|
|
>
|
|
<div x-show="errors.last_name"
|
|
x-text="errors.last_name"
|
|
class="error-message show"
|
|
></div>
|
|
</div>
|
|
|
|
<!-- Email -->
|
|
<div class="form-group">
|
|
<label for="email">Email Address <span class="required">*</span></label>
|
|
<input
|
|
type="email"
|
|
id="email"
|
|
x-model="formData.email"
|
|
required
|
|
placeholder="your@email.com"
|
|
:class="{ 'error': errors.email }"
|
|
@input="clearError('email')"
|
|
>
|
|
<div x-show="errors.email"
|
|
x-text="errors.email"
|
|
class="error-message show"
|
|
></div>
|
|
</div>
|
|
|
|
<!-- Phone (Optional) -->
|
|
<div class="form-group">
|
|
<label for="phone">Phone Number</label>
|
|
<input
|
|
type="tel"
|
|
id="phone"
|
|
x-model="formData.phone"
|
|
placeholder="+352 123 456 789"
|
|
>
|
|
</div>
|
|
|
|
<!-- Password -->
|
|
<div class="form-group">
|
|
<label for="password">Password <span class="required">*</span></label>
|
|
<div class="password-group">
|
|
<input
|
|
:type="showPassword ? 'text' : 'password'"
|
|
id="password"
|
|
x-model="formData.password"
|
|
required
|
|
placeholder="At least 8 characters"
|
|
:class="{ 'error': errors.password }"
|
|
@input="clearError('password')"
|
|
>
|
|
<button
|
|
type="button"
|
|
class="password-toggle"
|
|
@click="showPassword = !showPassword"
|
|
>
|
|
<span x-text="showPassword ? '👁️' : '👁️🗨️'"></span>
|
|
</button>
|
|
</div>
|
|
<div class="form-help">
|
|
Must contain at least 8 characters, one letter, and one number
|
|
</div>
|
|
<div x-show="errors.password"
|
|
x-text="errors.password"
|
|
class="error-message show"
|
|
></div>
|
|
</div>
|
|
|
|
<!-- Confirm Password -->
|
|
<div class="form-group">
|
|
<label for="confirmPassword">Confirm Password <span class="required">*</span></label>
|
|
<input
|
|
:type="showPassword ? 'text' : 'password'"
|
|
id="confirmPassword"
|
|
x-model="confirmPassword"
|
|
required
|
|
placeholder="Re-enter your password"
|
|
:class="{ 'error': errors.confirmPassword }"
|
|
@input="clearError('confirmPassword')"
|
|
>
|
|
<div x-show="errors.confirmPassword"
|
|
x-text="errors.confirmPassword"
|
|
class="error-message show"
|
|
></div>
|
|
</div>
|
|
|
|
<!-- Marketing Consent -->
|
|
<div class="form-group">
|
|
<div class="remember-me">
|
|
<input
|
|
type="checkbox"
|
|
id="marketingConsent"
|
|
x-model="formData.marketing_consent"
|
|
>
|
|
<label for="marketingConsent" style="font-weight: normal;">
|
|
I'd like to receive news and special offers
|
|
</label>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Submit Button -->
|
|
<button
|
|
type="submit"
|
|
class="btn-login"
|
|
:disabled="loading"
|
|
>
|
|
<span x-show="loading" class="loading-spinner"></span>
|
|
<span x-text="loading ? 'Creating Account...' : 'Create Account'"></span>
|
|
</button>
|
|
</form>
|
|
|
|
<!-- Login Link -->
|
|
<div class="login-footer">
|
|
<div class="auth-footer-text">Already have an account?</div>
|
|
<a href="/shop/account/login">Sign in instead</a>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
function customerRegistration() {
|
|
return {
|
|
// Data
|
|
formData: {
|
|
first_name: '',
|
|
last_name: '',
|
|
email: '',
|
|
phone: '',
|
|
password: '',
|
|
marketing_consent: false
|
|
},
|
|
confirmPassword: '',
|
|
showPassword: false,
|
|
loading: false,
|
|
errors: {},
|
|
alert: {
|
|
show: false,
|
|
type: 'error',
|
|
message: ''
|
|
},
|
|
|
|
// Get vendor data from element
|
|
get vendorId() {
|
|
return this.$el.dataset.vendorId;
|
|
},
|
|
|
|
get vendorName() {
|
|
return this.$el.dataset.vendorName;
|
|
},
|
|
|
|
// Clear specific error
|
|
clearError(field) {
|
|
delete this.errors[field];
|
|
},
|
|
|
|
// Clear all errors
|
|
clearAllErrors() {
|
|
this.errors = {};
|
|
this.alert.show = false;
|
|
},
|
|
|
|
// Show alert
|
|
showAlert(message, type = 'error') {
|
|
this.alert = {
|
|
show: true,
|
|
type: type,
|
|
message: message
|
|
};
|
|
|
|
// Auto-hide success messages
|
|
if (type === 'success') {
|
|
setTimeout(() => {
|
|
this.alert.show = false;
|
|
}, 3000);
|
|
}
|
|
|
|
// Scroll to top
|
|
window.scrollTo({ top: 0, behavior: 'smooth' });
|
|
},
|
|
|
|
// Validate form
|
|
validateForm() {
|
|
this.clearAllErrors();
|
|
let isValid = true;
|
|
|
|
// First name
|
|
if (!this.formData.first_name.trim()) {
|
|
this.errors.first_name = 'First name is required';
|
|
isValid = false;
|
|
}
|
|
|
|
// Last name
|
|
if (!this.formData.last_name.trim()) {
|
|
this.errors.last_name = 'Last name is required';
|
|
isValid = false;
|
|
}
|
|
|
|
// Email
|
|
if (!this.formData.email.trim()) {
|
|
this.errors.email = 'Email is required';
|
|
isValid = false;
|
|
} else if (!/^[^\s@]+@[^\s@]+\.[^\s@]+$/.test(this.formData.email)) {
|
|
this.errors.email = 'Please enter a valid email address';
|
|
isValid = false;
|
|
}
|
|
|
|
// Password
|
|
if (!this.formData.password) {
|
|
this.errors.password = 'Password is required';
|
|
isValid = false;
|
|
} else if (this.formData.password.length < 8) {
|
|
this.errors.password = 'Password must be at least 8 characters';
|
|
isValid = false;
|
|
} else if (!/[a-zA-Z]/.test(this.formData.password)) {
|
|
this.errors.password = 'Password must contain at least one letter';
|
|
isValid = false;
|
|
} else if (!/[0-9]/.test(this.formData.password)) {
|
|
this.errors.password = 'Password must contain at least one number';
|
|
isValid = false;
|
|
}
|
|
|
|
// Confirm password
|
|
if (this.formData.password !== this.confirmPassword) {
|
|
this.errors.confirmPassword = 'Passwords do not match';
|
|
isValid = false;
|
|
}
|
|
|
|
return isValid;
|
|
},
|
|
|
|
// Handle registration
|
|
async handleRegister() {
|
|
if (!this.validateForm()) {
|
|
return;
|
|
}
|
|
|
|
this.loading = true;
|
|
|
|
try {
|
|
const response = await fetch(
|
|
`/api/v1/shop/auth/register`,
|
|
{
|
|
method: 'POST',
|
|
headers: {
|
|
'Content-Type': 'application/json'
|
|
},
|
|
body: JSON.stringify(this.formData)
|
|
}
|
|
);
|
|
|
|
const data = await response.json();
|
|
|
|
if (!response.ok) {
|
|
throw new Error(data.detail || 'Registration failed');
|
|
}
|
|
|
|
// Success!
|
|
this.showAlert(
|
|
'Account created successfully! Redirecting to login...',
|
|
'success'
|
|
);
|
|
|
|
// Redirect to login after 2 seconds
|
|
setTimeout(() => {
|
|
window.location.href = '/shop/account/login?registered=true';
|
|
}, 2000);
|
|
|
|
} catch (error) {
|
|
console.error('Registration error:', error);
|
|
this.showAlert(error.message || 'Registration failed. Please try again.');
|
|
} finally {
|
|
this.loading = false;
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</script>
|
|
</body>
|
|
</html>
|