admin and vendor backends features
This commit is contained in:
336
static/vendor/dashboard.html
vendored
336
static/vendor/dashboard.html
vendored
@@ -3,200 +3,158 @@
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>{{ vendor.vendor_code }} Dashboard</title>
|
||||
<title>Vendor Dashboard - Multi-Tenant Ecommerce Platform</title>
|
||||
<link rel="stylesheet" href="/static/css/shared/base.css">
|
||||
<link rel="stylesheet" href="/static/css/vendor/vendor.css">
|
||||
<link rel="stylesheet" href="/static/css/admin/admin.css">
|
||||
<script defer src="https://cdn.jsdelivr.net/npm/alpinejs@3.x.x/dist/cdn.min.js"></script>
|
||||
</head>
|
||||
<body>
|
||||
<div x-data="vendorDashboard()"
|
||||
x-init="loadDashboardData()"
|
||||
data-vendor-id="{{ vendor.id }}"
|
||||
data-vendor-code="{{ vendor.vendor_code }}"
|
||||
data-vendor-name="{{ vendor.name }}"
|
||||
>
|
||||
<!-- Header -->
|
||||
<header class="header">
|
||||
<div class="header-left">
|
||||
<h1>🏪 <span x-text="vendorName"></span> Dashboard</h1>
|
||||
</div>
|
||||
<div class="header-right">
|
||||
<span class="user-info">
|
||||
Welcome, <strong>{{ user.username }}</strong>
|
||||
</span>
|
||||
<button class="btn-logout" @click="handleLogout()">Logout</button>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<div class="container">
|
||||
<!-- Welcome Card -->
|
||||
<div class="welcome-card">
|
||||
<div class="welcome-icon">🎉</div>
|
||||
<h2>Welcome to Your Vendor Dashboard!</h2>
|
||||
<p>Your vendor account has been successfully set up.</p>
|
||||
<p>This is <strong>Slice 1</strong> - the foundation of your multi-tenant ecommerce platform.</p>
|
||||
|
||||
<div class="vendor-info-card">
|
||||
<div class="info-item">
|
||||
<span class="info-label">Vendor Code:</span>
|
||||
<span class="info-value" x-text="vendorCode"></span>
|
||||
</div>
|
||||
<div class="info-item">
|
||||
<span class="info-label">Vendor Name:</span>
|
||||
<span class="info-value" x-text="vendorName"></span>
|
||||
</div>
|
||||
<div class="info-item">
|
||||
<span class="info-label">Owner:</span>
|
||||
<span class="info-value">{{ user.email }}</span>
|
||||
</div>
|
||||
<div class="info-item">
|
||||
<span class="info-label">Status:</span>
|
||||
<span class="info-value">
|
||||
<span class="badge badge-success">Active</span>
|
||||
{% if vendor.is_verified %}
|
||||
<span class="badge badge-success">Verified</span>
|
||||
{% else %}
|
||||
<span class="badge badge-warning">Pending Verification</span>
|
||||
{% endif %}
|
||||
</span>
|
||||
</div>
|
||||
<div class="info-item">
|
||||
<span class="info-label">Vendor Context:</span>
|
||||
<span class="info-value" x-text="contextInfo"></span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="coming-soon">
|
||||
🚀 Coming in Slice 2: Marketplace Product Import
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Quick Stats (for future slices) -->
|
||||
<div class="dashboard-widgets" x-show="stats.loaded">
|
||||
<div class="widget">
|
||||
<div class="widget-header">
|
||||
<span class="widget-title">Total Products</span>
|
||||
<span class="widget-icon">📦</span>
|
||||
</div>
|
||||
<div class="widget-stat" x-text="stats.totalProducts"></div>
|
||||
<div class="widget-label">Products in catalog</div>
|
||||
</div>
|
||||
|
||||
<div class="widget">
|
||||
<div class="widget-header">
|
||||
<span class="widget-title">Total Orders</span>
|
||||
<span class="widget-icon">🛒</span>
|
||||
</div>
|
||||
<div class="widget-stat" x-text="stats.totalOrders"></div>
|
||||
<div class="widget-label">Orders received</div>
|
||||
</div>
|
||||
|
||||
<div class="widget">
|
||||
<div class="widget-header">
|
||||
<span class="widget-title">Customers</span>
|
||||
<span class="widget-icon">👥</span>
|
||||
</div>
|
||||
<div class="widget-stat" x-text="stats.totalCustomers"></div>
|
||||
<div class="widget-label">Registered customers</div>
|
||||
</div>
|
||||
|
||||
<div class="widget">
|
||||
<div class="widget-header">
|
||||
<span class="widget-title">Revenue</span>
|
||||
<span class="widget-icon">💰</span>
|
||||
</div>
|
||||
<div class="widget-stat">€<span x-text="stats.totalRevenue"></span></div>
|
||||
<div class="widget-label">Total revenue</div>
|
||||
</div>
|
||||
</div>
|
||||
<body x-data="vendorDashboard()" x-init="init()" x-cloak>
|
||||
<!-- Header -->
|
||||
<header class="admin-header">
|
||||
<div class="header-left">
|
||||
<h1>🏪 <span x-text="vendor?.name || 'Vendor Dashboard'"></span></h1>
|
||||
</div>
|
||||
<div class="header-right">
|
||||
<span class="user-info">
|
||||
Welcome, <strong x-text="currentUser.username"></strong>
|
||||
<span class="badge badge-primary" x-text="vendorRole" style="margin-left: 8px;"></span>
|
||||
</span>
|
||||
<button class="btn-logout" @click="handleLogout">Logout</button>
|
||||
</div>
|
||||
</header>
|
||||
|
||||
<!-- Main Container -->
|
||||
<div class="admin-container">
|
||||
<!-- Sidebar -->
|
||||
<aside class="admin-sidebar">
|
||||
<nav>
|
||||
<ul class="nav-menu">
|
||||
<li class="nav-item">
|
||||
<a href="#"
|
||||
class="nav-link active"
|
||||
@click.prevent="currentSection = 'dashboard'">
|
||||
📊 Dashboard
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="#"
|
||||
class="nav-link"
|
||||
@click.prevent="currentSection = 'products'">
|
||||
📦 Products
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="#"
|
||||
class="nav-link"
|
||||
@click.prevent="currentSection = 'orders'">
|
||||
🛒 Orders
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="#"
|
||||
class="nav-link"
|
||||
@click.prevent="currentSection = 'customers'">
|
||||
👥 Customers
|
||||
</a>
|
||||
</li>
|
||||
<li class="nav-item">
|
||||
<a href="#"
|
||||
class="nav-link"
|
||||
@click.prevent="currentSection = 'marketplace'">
|
||||
🌐 Marketplace
|
||||
</a>
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
</aside>
|
||||
|
||||
<!-- Main Content -->
|
||||
<main class="admin-content">
|
||||
<!-- Dashboard View -->
|
||||
<div x-show="currentSection === 'dashboard'">
|
||||
<!-- Vendor Info Card -->
|
||||
<div class="content-section" style="margin-bottom: 24px;">
|
||||
<div style="display: flex; justify-content: space-between; align-items: center;">
|
||||
<div>
|
||||
<h2 style="margin: 0;" x-text="vendor?.name"></h2>
|
||||
<p style="margin: 4px 0 0 0; color: var(--text-secondary);">
|
||||
<strong x-text="vendor?.vendor_code"></strong> •
|
||||
<span x-text="vendor?.subdomain"></span>
|
||||
</p>
|
||||
</div>
|
||||
<div>
|
||||
<span class="badge"
|
||||
:class="vendor?.is_verified ? 'badge-success' : 'badge-warning'"
|
||||
x-text="vendor?.is_verified ? 'Verified' : 'Pending Verification'"></span>
|
||||
<span class="badge"
|
||||
:class="vendor?.is_active ? 'badge-success' : 'badge-danger'"
|
||||
x-text="vendor?.is_active ? 'Active' : 'Inactive'"></span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Stats Grid -->
|
||||
<div class="stats-grid">
|
||||
<div class="stat-card">
|
||||
<div class="stat-header">
|
||||
<div class="stat-title">Products</div>
|
||||
<div class="stat-icon">📦</div>
|
||||
</div>
|
||||
<div class="stat-value" x-text="stats.products_count || 0"></div>
|
||||
<div class="stat-subtitle">in catalog</div>
|
||||
</div>
|
||||
|
||||
<div class="stat-card">
|
||||
<div class="stat-header">
|
||||
<div class="stat-title">Orders</div>
|
||||
<div class="stat-icon">🛒</div>
|
||||
</div>
|
||||
<div class="stat-value" x-text="stats.orders_count || 0"></div>
|
||||
<div class="stat-subtitle">total orders</div>
|
||||
</div>
|
||||
|
||||
<div class="stat-card">
|
||||
<div class="stat-header">
|
||||
<div class="stat-title">Customers</div>
|
||||
<div class="stat-icon">👥</div>
|
||||
</div>
|
||||
<div class="stat-value" x-text="stats.customers_count || 0"></div>
|
||||
<div class="stat-subtitle">registered</div>
|
||||
</div>
|
||||
|
||||
<div class="stat-card">
|
||||
<div class="stat-header">
|
||||
<div class="stat-title">Revenue</div>
|
||||
<div class="stat-icon">💰</div>
|
||||
</div>
|
||||
<div class="stat-value">€<span x-text="stats.revenue || 0"></span></div>
|
||||
<div class="stat-subtitle">total revenue</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Coming Soon Notice -->
|
||||
<div class="content-section" style="text-align: center; padding: 48px;">
|
||||
<h3>🚀 Getting Started</h3>
|
||||
<p class="text-muted" style="margin: 16px 0;">
|
||||
Welcome to your vendor dashboard! Start by importing products from the marketplace.
|
||||
</p>
|
||||
<button class="btn btn-primary" @click="currentSection = 'marketplace'">
|
||||
Go to Marketplace Import
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Other sections -->
|
||||
<div x-show="currentSection !== 'dashboard'">
|
||||
<div class="content-section">
|
||||
<h2 x-text="currentSection.charAt(0).toUpperCase() + currentSection.slice(1)"></h2>
|
||||
<p class="text-muted">This section is coming soon in the next development slice.</p>
|
||||
</div>
|
||||
</div>
|
||||
</main>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
function vendorDashboard() {
|
||||
return {
|
||||
vendorId: null,
|
||||
vendorCode: '',
|
||||
vendorName: '',
|
||||
contextInfo: '',
|
||||
|
||||
stats: {
|
||||
loaded: false,
|
||||
totalProducts: 0,
|
||||
totalOrders: 0,
|
||||
totalCustomers: 0,
|
||||
totalRevenue: '0.00'
|
||||
},
|
||||
|
||||
// Initialize
|
||||
init() {
|
||||
this.vendorId = this.$el.dataset.vendorId;
|
||||
this.vendorCode = this.$el.dataset.vendorCode;
|
||||
this.vendorName = this.$el.dataset.vendorName;
|
||||
this.detectVendorContext();
|
||||
},
|
||||
|
||||
// Detect vendor context (subdomain vs path-based)
|
||||
detectVendorContext() {
|
||||
const host = window.location.host;
|
||||
const path = window.location.pathname;
|
||||
|
||||
// Subdomain detection
|
||||
const parts = host.split('.');
|
||||
if (parts.length >= 2 && parts[0] !== 'www' && parts[0] !== 'admin' && parts[0] !== 'localhost') {
|
||||
this.contextInfo = `Subdomain: ${parts[0]}.platform.com`;
|
||||
return;
|
||||
}
|
||||
|
||||
// Path-based detection
|
||||
if (path.startsWith('/vendor/')) {
|
||||
const pathParts = path.split('/');
|
||||
if (pathParts.length >= 3 && pathParts[2]) {
|
||||
this.contextInfo = `Path: /vendor/${pathParts[2]}/`;
|
||||
return;
|
||||
}
|
||||
}
|
||||
|
||||
this.contextInfo = 'Development Mode';
|
||||
},
|
||||
|
||||
// Load dashboard data
|
||||
async loadDashboardData() {
|
||||
try {
|
||||
const token = localStorage.getItem('vendor_token');
|
||||
|
||||
const response = await fetch('/api/v1/vendor/dashboard/stats', {
|
||||
headers: {
|
||||
'Authorization': `Bearer ${token}`
|
||||
}
|
||||
});
|
||||
|
||||
if (response.ok) {
|
||||
const data = await response.json();
|
||||
this.stats = {
|
||||
loaded: true,
|
||||
totalProducts: data.total_products || 0,
|
||||
totalOrders: data.total_orders || 0,
|
||||
totalCustomers: data.total_customers || 0,
|
||||
totalRevenue: (data.total_revenue || 0).toFixed(2)
|
||||
};
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Failed to load dashboard data:', error);
|
||||
// Stats will remain at 0
|
||||
}
|
||||
},
|
||||
|
||||
// Handle logout
|
||||
handleLogout() {
|
||||
if (confirm('Are you sure you want to logout?')) {
|
||||
localStorage.removeItem('vendor_token');
|
||||
localStorage.removeItem('vendor_user');
|
||||
window.location.href = '/static/vendor/login.html';
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
<script src="/static/js/shared/api-client.js"></script>
|
||||
<script src="/static/js/vendor/dashboard.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
372
static/vendor/login.html
vendored
372
static/vendor/login.html
vendored
@@ -3,297 +3,119 @@
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Vendor Login</title>
|
||||
<title>Vendor Login - Multi-Tenant Ecommerce Platform</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>
|
||||
<div class="login-container">
|
||||
<div id="loginContent">
|
||||
<div class="auth-page" x-data="vendorLogin()" x-init="init()" x-cloak>
|
||||
<div class="login-container">
|
||||
<!-- Vendor Info -->
|
||||
<template x-if="vendor">
|
||||
<div class="vendor-info" style="margin-bottom: 24px;">
|
||||
<h2 x-text="vendor.name" style="margin: 0; color: var(--primary-color);"></h2>
|
||||
<p class="text-muted" style="margin: 4px 0 0 0; font-size: var(--font-sm);">
|
||||
<strong x-text="vendor.vendor_code"></strong>
|
||||
</p>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<div class="login-header">
|
||||
<div class="vendor-logo">🏪</div>
|
||||
<h1>Vendor Login</h1>
|
||||
<p>Access your store management</p>
|
||||
<div class="auth-logo">🏪</div>
|
||||
<h1>Vendor Portal</h1>
|
||||
<p>Sign in to manage your store</p>
|
||||
</div>
|
||||
|
||||
<div id="vendorInfo" class="vendor-info" style="display: none;">
|
||||
Logging in to: <strong id="vendorName">-</strong>
|
||||
</div>
|
||||
<!-- Alert Messages -->
|
||||
<div x-show="error"
|
||||
x-text="error"
|
||||
class="alert alert-error"
|
||||
x-transition></div>
|
||||
|
||||
<div id="noVendorMessage" class="no-vendor-message" style="display: none;">
|
||||
<h2>⚠️ Vendor Not Found</h2>
|
||||
<p>No vendor is associated with this URL.</p>
|
||||
<a href="/" class="btn-back">← Back to Platform</a>
|
||||
</div>
|
||||
<div x-show="success"
|
||||
x-text="success"
|
||||
class="alert alert-success"
|
||||
x-transition></div>
|
||||
|
||||
<div id="alertBox" class="alert"></div>
|
||||
<!-- Login Form (only show if vendor found) -->
|
||||
<template x-if="vendor">
|
||||
<form @submit.prevent="handleLogin">
|
||||
<div class="form-group">
|
||||
<label for="username">Username</label>
|
||||
<input
|
||||
type="text"
|
||||
id="username"
|
||||
x-model="credentials.username"
|
||||
:class="{ 'error': errors.username }"
|
||||
required
|
||||
autocomplete="username"
|
||||
placeholder="Enter your username"
|
||||
:disabled="loading"
|
||||
@input="clearErrors"
|
||||
>
|
||||
<div x-show="errors.username"
|
||||
x-text="errors.username"
|
||||
class="error-message show"
|
||||
x-transition></div>
|
||||
</div>
|
||||
|
||||
<form id="loginForm">
|
||||
<div class="form-group">
|
||||
<label for="username">Username</label>
|
||||
<input
|
||||
type="text"
|
||||
id="username"
|
||||
name="username"
|
||||
required
|
||||
autocomplete="username"
|
||||
placeholder="Enter your username"
|
||||
>
|
||||
<div class="error-message" id="usernameError"></div>
|
||||
<div class="form-group">
|
||||
<label for="password">Password</label>
|
||||
<input
|
||||
type="password"
|
||||
id="password"
|
||||
x-model="credentials.password"
|
||||
:class="{ 'error': errors.password }"
|
||||
required
|
||||
autocomplete="current-password"
|
||||
placeholder="Enter your password"
|
||||
:disabled="loading"
|
||||
@input="clearErrors"
|
||||
>
|
||||
<div x-show="errors.password"
|
||||
x-text="errors.password"
|
||||
class="error-message show"
|
||||
x-transition></div>
|
||||
</div>
|
||||
|
||||
<button type="submit"
|
||||
class="btn-login"
|
||||
:disabled="loading">
|
||||
<template x-if="!loading">
|
||||
<span>Sign In</span>
|
||||
</template>
|
||||
<template x-if="loading">
|
||||
<span>
|
||||
<span class="loading-spinner"></span>
|
||||
Signing in...
|
||||
</span>
|
||||
</template>
|
||||
</button>
|
||||
</form>
|
||||
</template>
|
||||
|
||||
<!-- Vendor Not Found -->
|
||||
<template x-if="!vendor && !loading && checked">
|
||||
<div class="empty-state">
|
||||
<div class="empty-state-icon">🏪</div>
|
||||
<h3>Vendor Not Found</h3>
|
||||
<p>The vendor you're trying to access doesn't exist or is inactive.</p>
|
||||
<a href="/admin/login.html" class="btn btn-primary" style="margin-top: 16px;">
|
||||
Go to Admin Login
|
||||
</a>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<div class="form-group">
|
||||
<label for="password">Password</label>
|
||||
<input
|
||||
type="password"
|
||||
id="password"
|
||||
name="password"
|
||||
required
|
||||
autocomplete="current-password"
|
||||
placeholder="Enter your password"
|
||||
>
|
||||
<div class="error-message" id="passwordError"></div>
|
||||
</div>
|
||||
|
||||
<button type="submit" class="btn-login" id="loginButton">
|
||||
Sign In
|
||||
</button>
|
||||
</form>
|
||||
|
||||
<div class="login-footer">
|
||||
First time? Use the credentials provided by your admin.
|
||||
<!-- Loading State -->
|
||||
<div x-show="loading && !vendor" class="loading">
|
||||
<span class="loading-spinner loading-spinner-lg"></span>
|
||||
<p class="loading-text">Loading vendor information...</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script src="/static/js/shared/api-client.js"></script>
|
||||
<script>
|
||||
const API_BASE_URL = '/api/v1';
|
||||
|
||||
// DOM Elements
|
||||
const loginForm = document.getElementById('loginForm');
|
||||
const loginButton = document.getElementById('loginButton');
|
||||
const alertBox = document.getElementById('alertBox');
|
||||
const usernameInput = document.getElementById('username');
|
||||
const passwordInput = document.getElementById('password');
|
||||
const usernameError = document.getElementById('usernameError');
|
||||
const passwordError = document.getElementById('passwordError');
|
||||
const vendorInfo = document.getElementById('vendorInfo');
|
||||
const vendorName = document.getElementById('vendorName');
|
||||
const noVendorMessage = document.getElementById('noVendorMessage');
|
||||
|
||||
// Detect vendor context
|
||||
function detectVendorContext() {
|
||||
const host = window.location.host;
|
||||
const path = window.location.pathname;
|
||||
|
||||
// Method 1: Subdomain detection (production)
|
||||
// e.g., techstore.platform.com
|
||||
const parts = host.split('.');
|
||||
if (parts.length >= 2 && parts[0] !== 'www' && parts[0] !== 'admin' && parts[0] !== 'localhost') {
|
||||
return {
|
||||
subdomain: parts[0],
|
||||
method: 'subdomain'
|
||||
};
|
||||
}
|
||||
|
||||
// Method 2: Path-based detection (development)
|
||||
// e.g., localhost:8000/vendor/techstore/login
|
||||
if (path.startsWith('/vendor/')) {
|
||||
const pathParts = path.split('/');
|
||||
if (pathParts.length >= 3 && pathParts[2]) {
|
||||
return {
|
||||
subdomain: pathParts[2],
|
||||
method: 'path'
|
||||
};
|
||||
}
|
||||
}
|
||||
|
||||
return null;
|
||||
}
|
||||
|
||||
// Verify vendor exists
|
||||
async function verifyVendor(subdomain) {
|
||||
try {
|
||||
// Try to fetch vendor info from public API
|
||||
const response = await fetch(`${API_BASE_URL}/public/vendors/${subdomain}`);
|
||||
|
||||
if (response.ok) {
|
||||
const data = await response.json();
|
||||
return data;
|
||||
}
|
||||
|
||||
return null;
|
||||
} catch (error) {
|
||||
console.error('Error verifying vendor:', error);
|
||||
return null;
|
||||
}
|
||||
}
|
||||
|
||||
// Show alert message
|
||||
function showAlert(message, type = 'error') {
|
||||
alertBox.textContent = message;
|
||||
alertBox.className = `alert alert-${type} show`;
|
||||
}
|
||||
|
||||
// Show field error
|
||||
function showFieldError(field, message) {
|
||||
const input = field === 'username' ? usernameInput : passwordInput;
|
||||
const errorDiv = field === 'username' ? usernameError : passwordError;
|
||||
|
||||
input.classList.add('error');
|
||||
errorDiv.textContent = message;
|
||||
errorDiv.classList.add('show');
|
||||
}
|
||||
|
||||
// Clear field errors
|
||||
function clearFieldErrors() {
|
||||
usernameInput.classList.remove('error');
|
||||
passwordInput.classList.remove('error');
|
||||
usernameError.classList.remove('show');
|
||||
passwordError.classList.remove('show');
|
||||
alertBox.classList.remove('show');
|
||||
}
|
||||
|
||||
// Set loading state
|
||||
function setLoadingState(loading) {
|
||||
loginButton.disabled = loading;
|
||||
|
||||
if (loading) {
|
||||
loginButton.innerHTML = '<span class="loading-spinner"></span>Signing in...';
|
||||
} else {
|
||||
loginButton.innerHTML = 'Sign In';
|
||||
}
|
||||
}
|
||||
|
||||
// Handle login
|
||||
async function handleLogin(event) {
|
||||
event.preventDefault();
|
||||
|
||||
clearFieldErrors();
|
||||
|
||||
const username = usernameInput.value.trim();
|
||||
const password = passwordInput.value;
|
||||
|
||||
// Basic validation
|
||||
if (!username) {
|
||||
showFieldError('username', 'Username is required');
|
||||
return;
|
||||
}
|
||||
|
||||
if (!password) {
|
||||
showFieldError('password', 'Password is required');
|
||||
return;
|
||||
}
|
||||
|
||||
setLoadingState(true);
|
||||
|
||||
try {
|
||||
const response = await fetch(`${API_BASE_URL}/vendor/auth/login`, {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/json',
|
||||
},
|
||||
body: JSON.stringify({ username, password })
|
||||
});
|
||||
|
||||
const data = await response.json();
|
||||
|
||||
if (!response.ok) {
|
||||
throw new Error(data.detail || 'Login failed');
|
||||
}
|
||||
|
||||
// Check if user is not admin (vendors should not be admin)
|
||||
if (data.user.role === 'admin') {
|
||||
throw new Error('Admin users should use the admin portal.');
|
||||
}
|
||||
|
||||
// Store token for vendor
|
||||
localStorage.setItem('vendor_token', data.access_token);
|
||||
localStorage.setItem('vendor_user', JSON.stringify(data.user));
|
||||
|
||||
// Show success message
|
||||
showAlert('Login successful! Redirecting...', 'success');
|
||||
|
||||
// Redirect to vendor dashboard
|
||||
const context = detectVendorContext();
|
||||
let dashboardUrl = '/static/vendor/dashboard.html';
|
||||
|
||||
if (context && context.method === 'path') {
|
||||
dashboardUrl = `/vendor/${context.subdomain}/dashboard`;
|
||||
}
|
||||
|
||||
setTimeout(() => {
|
||||
window.location.href = dashboardUrl;
|
||||
}, 1000);
|
||||
|
||||
} catch (error) {
|
||||
console.error('Login error:', error);
|
||||
showAlert(error.message || 'Login failed. Please check your credentials.');
|
||||
} finally {
|
||||
setLoadingState(false);
|
||||
}
|
||||
}
|
||||
|
||||
// Event listeners
|
||||
loginForm.addEventListener('submit', handleLogin);
|
||||
|
||||
// Clear errors on input
|
||||
usernameInput.addEventListener('input', clearFieldErrors);
|
||||
passwordInput.addEventListener('input', clearFieldErrors);
|
||||
|
||||
// Initialize page
|
||||
window.addEventListener('DOMContentLoaded', async () => {
|
||||
// Check if already logged in
|
||||
const token = localStorage.getItem('vendor_token');
|
||||
const user = localStorage.getItem('vendor_user');
|
||||
|
||||
if (token && user) {
|
||||
try {
|
||||
const userData = JSON.parse(user);
|
||||
if (userData.role !== 'admin') {
|
||||
const context = detectVendorContext();
|
||||
let dashboardUrl = '/static/vendor/dashboard.html';
|
||||
|
||||
if (context && context.method === 'path') {
|
||||
dashboardUrl = `/vendor/${context.subdomain}/dashboard`;
|
||||
}
|
||||
|
||||
window.location.href = dashboardUrl;
|
||||
return;
|
||||
}
|
||||
} catch (e) {
|
||||
localStorage.removeItem('vendor_token');
|
||||
localStorage.removeItem('vendor_user');
|
||||
}
|
||||
}
|
||||
|
||||
// Detect and verify vendor
|
||||
const context = detectVendorContext();
|
||||
|
||||
if (!context) {
|
||||
// No vendor context detected
|
||||
loginForm.style.display = 'none';
|
||||
noVendorMessage.style.display = 'block';
|
||||
return;
|
||||
}
|
||||
|
||||
// Display vendor info (for user confirmation)
|
||||
vendorName.textContent = context.subdomain;
|
||||
vendorInfo.style.display = 'block';
|
||||
|
||||
// Optionally verify vendor exists via API
|
||||
// Uncomment when public vendor API is available
|
||||
/*
|
||||
const vendor = await verifyVendor(context.subdomain);
|
||||
if (!vendor) {
|
||||
loginForm.style.display = 'none';
|
||||
noVendorMessage.style.display = 'block';
|
||||
} else {
|
||||
vendorName.textContent = vendor.name;
|
||||
}
|
||||
*/
|
||||
});
|
||||
</script>
|
||||
<script src="/static/js/vendor/login.js"></script>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user