200 lines
6.7 KiB
HTML
200 lines
6.7 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>Admin Login - Multi-Tenant Ecommerce Platform</title>
|
|
<link rel="stylesheet" href="/static/css/shared/base.css">
|
|
<link rel="stylesheet" href="/static/css/shared/auth.css">
|
|
</head>
|
|
<body>
|
|
<div class="login-container">
|
|
<div class="login-header">
|
|
<h1>🔐 Admin Portal</h1>
|
|
<p>Multi-Tenant Ecommerce Platform</p>
|
|
</div>
|
|
|
|
<div id="alertBox" class="alert"></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>
|
|
|
|
<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">
|
|
<a href="/">← Back to Platform</a>
|
|
</div>
|
|
</div>
|
|
|
|
<script src="/static/js/shared/api-client.js"></script>
|
|
<script>
|
|
// API Client Configuration
|
|
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');
|
|
|
|
// Show alert message
|
|
function showAlert(message, type = 'error') {
|
|
alertBox.textContent = message;
|
|
alertBox.className = `alert alert-${type} show`;
|
|
|
|
if (type === 'success') {
|
|
setTimeout(() => {
|
|
alertBox.classList.remove('show');
|
|
}, 3000);
|
|
}
|
|
}
|
|
|
|
// 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}/admin/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 admin
|
|
if (data.user.role !== 'admin') {
|
|
throw new Error('Access denied. Admin privileges required.');
|
|
}
|
|
|
|
// Store token
|
|
localStorage.setItem('admin_token', data.access_token);
|
|
localStorage.setItem('admin_user', JSON.stringify(data.user));
|
|
|
|
// Show success message
|
|
showAlert('Login successful! Redirecting...', 'success');
|
|
|
|
// Redirect to admin dashboard
|
|
setTimeout(() => {
|
|
window.location.href = '/static/admin/dashboard.html';
|
|
}, 1000);
|
|
|
|
} catch (error) {
|
|
console.error('Login error:', error);
|
|
showAlert(error.message || 'Login failed. Please try again.');
|
|
} finally {
|
|
setLoadingState(false);
|
|
}
|
|
}
|
|
|
|
// Event listeners
|
|
loginForm.addEventListener('submit', handleLogin);
|
|
|
|
// Clear errors on input
|
|
usernameInput.addEventListener('input', clearFieldErrors);
|
|
passwordInput.addEventListener('input', clearFieldErrors);
|
|
|
|
// Check if already logged in
|
|
window.addEventListener('DOMContentLoaded', () => {
|
|
const token = localStorage.getItem('admin_token');
|
|
const user = localStorage.getItem('admin_user');
|
|
|
|
if (token && user) {
|
|
try {
|
|
const userData = JSON.parse(user);
|
|
if (userData.role === 'admin') {
|
|
window.location.href = '/static/admin/dashboard.html';
|
|
}
|
|
} catch (e) {
|
|
localStorage.removeItem('admin_token');
|
|
localStorage.removeItem('admin_user');
|
|
}
|
|
}
|
|
});
|
|
</script>
|
|
</body>
|
|
</html> |