347 lines
14 KiB
HTML
347 lines
14 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 Vendor - Admin Portal</title>
|
|
<link rel="stylesheet" href="/static/css/shared/base.css">
|
|
<link rel="stylesheet" href="/static/css/admin/admin.css">
|
|
</head>
|
|
<body>
|
|
<header class="header">
|
|
<h1>Create New Vendor</h1>
|
|
<a href="/static/admin/dashboard.html" class="btn-back">← Back to Dashboard</a>
|
|
</header>
|
|
|
|
<div class="container">
|
|
<div class="form-card">
|
|
<h2 class="form-title">Vendor Information</h2>
|
|
|
|
<div id="alertBox" class="alert"></div>
|
|
|
|
<form id="createVendorForm">
|
|
<!-- Vendor Code -->
|
|
<div class="form-group">
|
|
<label for="vendorCode">
|
|
Vendor Code <span class="required">*</span>
|
|
</label>
|
|
<input
|
|
type="text"
|
|
id="vendorCode"
|
|
name="vendor_code"
|
|
required
|
|
placeholder="e.g., TECHSTORE"
|
|
pattern="[A-Z0-9_-]+"
|
|
maxlength="50"
|
|
>
|
|
<div class="form-help">Uppercase letters, numbers, underscores, and hyphens only</div>
|
|
<div class="error-message" id="vendorCodeError"></div>
|
|
</div>
|
|
|
|
<!-- Vendor Name -->
|
|
<div class="form-group">
|
|
<label for="name">
|
|
Vendor Name <span class="required">*</span>
|
|
</label>
|
|
<input
|
|
type="text"
|
|
id="name"
|
|
name="name"
|
|
required
|
|
placeholder="e.g., Tech Store Luxembourg"
|
|
maxlength="255"
|
|
>
|
|
<div class="form-help">Display name for the vendor</div>
|
|
<div class="error-message" id="nameError"></div>
|
|
</div>
|
|
|
|
<!-- Subdomain -->
|
|
<div class="form-group">
|
|
<label for="subdomain">
|
|
Subdomain <span class="required">*</span>
|
|
</label>
|
|
<input
|
|
type="text"
|
|
id="subdomain"
|
|
name="subdomain"
|
|
required
|
|
placeholder="e.g., techstore"
|
|
pattern="[a-z0-9][a-z0-9-]*[a-z0-9]"
|
|
maxlength="100"
|
|
>
|
|
<div class="form-help">Lowercase letters, numbers, and hyphens only (e.g., techstore.platform.com)</div>
|
|
<div class="error-message" id="subdomainError"></div>
|
|
</div>
|
|
|
|
<!-- Description -->
|
|
<div class="form-group">
|
|
<label for="description">Description</label>
|
|
<textarea
|
|
id="description"
|
|
name="description"
|
|
placeholder="Brief description of the vendor's business"
|
|
></textarea>
|
|
<div class="form-help">Optional description of the vendor</div>
|
|
</div>
|
|
|
|
<!-- Owner Email -->
|
|
<div class="form-group">
|
|
<label for="ownerEmail">
|
|
Owner Email <span class="required">*</span>
|
|
</label>
|
|
<input
|
|
type="email"
|
|
id="ownerEmail"
|
|
name="owner_email"
|
|
required
|
|
placeholder="owner@example.com"
|
|
>
|
|
<div class="form-help">Email for the vendor owner (login credentials will be sent here)</div>
|
|
<div class="error-message" id="ownerEmailError"></div>
|
|
</div>
|
|
|
|
<!-- Contact Phone -->
|
|
<div class="form-group">
|
|
<label for="contactPhone">Contact Phone</label>
|
|
<input
|
|
type="tel"
|
|
id="contactPhone"
|
|
name="contact_phone"
|
|
placeholder="+352 123 456 789"
|
|
>
|
|
<div class="form-help">Optional contact phone number</div>
|
|
</div>
|
|
|
|
<!-- Website -->
|
|
<div class="form-group">
|
|
<label for="website">Website</label>
|
|
<input
|
|
type="url"
|
|
id="website"
|
|
name="website"
|
|
placeholder="https://example.com"
|
|
>
|
|
<div class="form-help">Optional website URL</div>
|
|
</div>
|
|
|
|
<!-- Business Address -->
|
|
<div class="form-group">
|
|
<label for="businessAddress">Business Address</label>
|
|
<textarea
|
|
id="businessAddress"
|
|
name="business_address"
|
|
placeholder="Street, City, Country"
|
|
></textarea>
|
|
</div>
|
|
|
|
<!-- Tax Number -->
|
|
<div class="form-group">
|
|
<label for="taxNumber">Tax Number</label>
|
|
<input
|
|
type="text"
|
|
id="taxNumber"
|
|
name="tax_number"
|
|
placeholder="LU12345678"
|
|
>
|
|
</div>
|
|
|
|
<div class="form-actions">
|
|
<button type="button" class="btn btn-secondary" onclick="window.history.back()">
|
|
Cancel
|
|
</button>
|
|
<button type="submit" class="btn btn-primary" id="submitButton">
|
|
Create Vendor
|
|
</button>
|
|
</div>
|
|
</form>
|
|
|
|
<!-- Success credentials display -->
|
|
<div id="credentialsDisplay" style="display: none;">
|
|
<div class="credentials-card">
|
|
<h3>✅ Vendor Created Successfully!</h3>
|
|
|
|
<div class="credential-item">
|
|
<label>Vendor Code:</label>
|
|
<span class="value" id="displayVendorCode"></span>
|
|
</div>
|
|
|
|
<div class="credential-item">
|
|
<label>Subdomain:</label>
|
|
<span class="value" id="displaySubdomain"></span>
|
|
</div>
|
|
|
|
<div class="credential-item">
|
|
<label>Owner Username:</label>
|
|
<span class="value" id="displayUsername"></span>
|
|
</div>
|
|
|
|
<div class="credential-item">
|
|
<label>Owner Email:</label>
|
|
<span class="value" id="displayEmail"></span>
|
|
</div>
|
|
|
|
<div class="credential-item">
|
|
<label>Temporary Password:</label>
|
|
<span class="value" id="displayPassword"></span>
|
|
</div>
|
|
|
|
<div class="credential-item">
|
|
<label>Login URL:</label>
|
|
<span class="value" id="displayLoginUrl"></span>
|
|
</div>
|
|
|
|
<p class="warning-text">
|
|
⚠️ Important: Save these credentials! The password will not be shown again.
|
|
</p>
|
|
|
|
<div class="form-actions" style="margin-top: 20px;">
|
|
<button class="btn btn-primary" onclick="window.location.href='/static/admin/dashboard.html'">
|
|
Go to Dashboard
|
|
</button>
|
|
<button class="btn btn-secondary" onclick="location.reload()">
|
|
Create Another Vendor
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
const API_BASE_URL = '/api/v1';
|
|
|
|
// Check authentication
|
|
function checkAuth() {
|
|
const token = localStorage.getItem('admin_token');
|
|
const user = localStorage.getItem('admin_user');
|
|
|
|
if (!token || !user) {
|
|
window.location.href = '/static/admin/login.html';
|
|
return false;
|
|
}
|
|
|
|
try {
|
|
const userData = JSON.parse(user);
|
|
if (userData.role !== 'admin') {
|
|
alert('Access denied. Admin privileges required.');
|
|
window.location.href = '/static/admin/login.html';
|
|
return false;
|
|
}
|
|
return true;
|
|
} catch (e) {
|
|
window.location.href = '/static/admin/login.html';
|
|
return false;
|
|
}
|
|
}
|
|
|
|
// Show alert
|
|
function showAlert(message, type = 'error') {
|
|
const alertBox = document.getElementById('alertBox');
|
|
alertBox.textContent = message;
|
|
alertBox.className = `alert alert-${type} show`;
|
|
|
|
// Scroll to top
|
|
window.scrollTo({ top: 0, behavior: 'smooth' });
|
|
}
|
|
|
|
// Clear all errors
|
|
function clearErrors() {
|
|
document.querySelectorAll('.error-message').forEach(el => {
|
|
el.classList.remove('show');
|
|
});
|
|
document.querySelectorAll('input, textarea').forEach(el => {
|
|
el.classList.remove('error');
|
|
});
|
|
document.getElementById('alertBox').classList.remove('show');
|
|
}
|
|
|
|
// Show field error
|
|
function showFieldError(fieldName, message) {
|
|
const input = document.querySelector(`[name="${fieldName}"]`);
|
|
const errorDiv = document.getElementById(`${fieldName.replace('_', '')}Error`);
|
|
|
|
if (input) input.classList.add('error');
|
|
if (errorDiv) {
|
|
errorDiv.textContent = message;
|
|
errorDiv.classList.add('show');
|
|
}
|
|
}
|
|
|
|
// Auto-format inputs
|
|
document.getElementById('vendorCode').addEventListener('input', function(e) {
|
|
this.value = this.value.toUpperCase().replace(/[^A-Z0-9_-]/g, '');
|
|
});
|
|
|
|
document.getElementById('subdomain').addEventListener('input', function(e) {
|
|
this.value = this.value.toLowerCase().replace(/[^a-z0-9-]/g, '');
|
|
});
|
|
|
|
// Handle form submission
|
|
document.getElementById('createVendorForm').addEventListener('submit', async function(e) {
|
|
e.preventDefault();
|
|
|
|
clearErrors();
|
|
|
|
const submitButton = document.getElementById('submitButton');
|
|
submitButton.disabled = true;
|
|
submitButton.innerHTML = '<span class="loading-spinner"></span>Creating vendor...';
|
|
|
|
// Collect form data
|
|
const formData = {
|
|
vendor_code: document.getElementById('vendorCode').value.trim(),
|
|
name: document.getElementById('name').value.trim(),
|
|
subdomain: document.getElementById('subdomain').value.trim(),
|
|
description: document.getElementById('description').value.trim() || null,
|
|
owner_email: document.getElementById('ownerEmail').value.trim(),
|
|
contact_phone: document.getElementById('contactPhone').value.trim() || null,
|
|
website: document.getElementById('website').value.trim() || null,
|
|
business_address: document.getElementById('businessAddress').value.trim() || null,
|
|
tax_number: document.getElementById('taxNumber').value.trim() || null,
|
|
};
|
|
|
|
try {
|
|
const token = localStorage.getItem('admin_token');
|
|
const response = await fetch(`${API_BASE_URL}/admin/vendors`, {
|
|
method: 'POST',
|
|
headers: {
|
|
'Content-Type': 'application/json',
|
|
'Authorization': `Bearer ${token}`
|
|
},
|
|
body: JSON.stringify(formData)
|
|
});
|
|
|
|
const data = await response.json();
|
|
|
|
if (!response.ok) {
|
|
throw new Error(data.detail || 'Failed to create vendor');
|
|
}
|
|
|
|
// Display success and credentials
|
|
document.getElementById('createVendorForm').style.display = 'none';
|
|
document.getElementById('credentialsDisplay').style.display = 'block';
|
|
|
|
document.getElementById('displayVendorCode').textContent = data.vendor_code;
|
|
document.getElementById('displaySubdomain').textContent = data.subdomain;
|
|
document.getElementById('displayUsername').textContent = data.owner_username;
|
|
document.getElementById('displayEmail').textContent = data.owner_email;
|
|
document.getElementById('displayPassword').textContent = data.temporary_password;
|
|
document.getElementById('displayLoginUrl').textContent = data.login_url || `${data.subdomain}.platform.com/vendor/login`;
|
|
|
|
showAlert('Vendor created successfully!', 'success');
|
|
|
|
} catch (error) {
|
|
console.error('Error creating vendor:', error);
|
|
showAlert(error.message || 'Failed to create vendor');
|
|
|
|
submitButton.disabled = false;
|
|
submitButton.innerHTML = 'Create Vendor';
|
|
}
|
|
});
|
|
|
|
// Initialize
|
|
window.addEventListener('DOMContentLoaded', () => {
|
|
checkAuth();
|
|
});
|
|
</script>
|
|
</body>
|
|
</html> |