121 lines
4.9 KiB
HTML
121 lines
4.9 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<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="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="auth-logo">🏪</div>
|
|
<h1>Vendor Portal</h1>
|
|
<p>Sign in to manage your store</p>
|
|
</div>
|
|
|
|
<!-- Alert Messages -->
|
|
<div x-show="error"
|
|
x-text="error"
|
|
class="alert alert-error"
|
|
x-transition></div>
|
|
|
|
<div x-show="success"
|
|
x-text="success"
|
|
class="alert alert-success"
|
|
x-transition></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>
|
|
|
|
<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>
|
|
|
|
<!-- 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/shared/js/api-client.js"></script>
|
|
<script src="/static/js/vendor/login.js"></script>
|
|
</body>
|
|
</html> |