Add website file management workflow and deployment script
This commit is contained in:
Local Server
334
website/admin/dashboard.html
Normal file
334
website/admin/dashboard.html
Normal file
@@ -0,0 +1,334 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Admin Dashboard - Sky Art Shop</title>
|
||||
<link
|
||||
href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css"
|
||||
rel="stylesheet"
|
||||
/>
|
||||
<link
|
||||
rel="stylesheet"
|
||||
href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css"
|
||||
/>
|
||||
<style>
|
||||
body {
|
||||
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
|
||||
"Helvetica Neue", Arial, sans-serif;
|
||||
background-color: #f8f9fa;
|
||||
}
|
||||
.sidebar {
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
height: 100vh;
|
||||
width: 250px;
|
||||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||||
padding: 20px;
|
||||
color: white;
|
||||
overflow-y: auto;
|
||||
}
|
||||
.sidebar-brand {
|
||||
font-size: 1.5rem;
|
||||
font-weight: 700;
|
||||
margin-bottom: 30px;
|
||||
text-align: center;
|
||||
}
|
||||
.sidebar-menu {
|
||||
list-style: none;
|
||||
padding: 0;
|
||||
}
|
||||
.sidebar-menu li {
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
.sidebar-menu a {
|
||||
color: white;
|
||||
text-decoration: none;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
padding: 12px 15px;
|
||||
border-radius: 8px;
|
||||
transition: background 0.3s;
|
||||
}
|
||||
.sidebar-menu a:hover,
|
||||
.sidebar-menu a.active {
|
||||
background: rgba(255, 255, 255, 0.2);
|
||||
}
|
||||
.sidebar-menu i {
|
||||
margin-right: 10px;
|
||||
font-size: 1.2rem;
|
||||
}
|
||||
.main-content {
|
||||
margin-left: 250px;
|
||||
padding: 30px;
|
||||
}
|
||||
.top-bar {
|
||||
background: white;
|
||||
padding: 20px;
|
||||
border-radius: 10px;
|
||||
margin-bottom: 30px;
|
||||
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
.stat-card {
|
||||
background: white;
|
||||
border-radius: 10px;
|
||||
padding: 25px;
|
||||
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
|
||||
transition: transform 0.2s;
|
||||
cursor: pointer;
|
||||
text-decoration: none;
|
||||
color: inherit;
|
||||
display: block;
|
||||
}
|
||||
.stat-card:hover {
|
||||
transform: translateY(-5px);
|
||||
box-shadow: 0 5px 15px rgba(0, 0, 0, 0.2);
|
||||
}
|
||||
.stat-card h6 {
|
||||
color: #6c757d;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
.stat-card h2 {
|
||||
color: #2c3e50;
|
||||
margin: 0;
|
||||
}
|
||||
.stat-link {
|
||||
color: #667eea;
|
||||
font-size: 0.9rem;
|
||||
margin-top: 10px;
|
||||
display: inline-block;
|
||||
}
|
||||
.action-card {
|
||||
background: white;
|
||||
border-radius: 10px;
|
||||
padding: 30px;
|
||||
box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
|
||||
text-align: center;
|
||||
transition: transform 0.2s;
|
||||
cursor: pointer;
|
||||
}
|
||||
.action-card:hover {
|
||||
transform: translateY(-5px);
|
||||
}
|
||||
.action-card i {
|
||||
font-size: 3rem;
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
.btn-view-site {
|
||||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||||
color: white;
|
||||
border: none;
|
||||
padding: 10px 25px;
|
||||
border-radius: 8px;
|
||||
text-decoration: none;
|
||||
display: inline-block;
|
||||
}
|
||||
.btn-logout {
|
||||
background: #dc3545;
|
||||
color: white;
|
||||
border: none;
|
||||
padding: 10px 20px;
|
||||
border-radius: 8px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<!-- Sidebar -->
|
||||
<div class="sidebar">
|
||||
<div class="sidebar-brand">🛍️ Sky Art Shop</div>
|
||||
<ul class="sidebar-menu">
|
||||
<li>
|
||||
<a href="/admin/dashboard.html" class="active"
|
||||
><i class="bi bi-speedometer2"></i> Dashboard</a
|
||||
>
|
||||
</li>
|
||||
<li>
|
||||
<a href="/admin/homepage.html"
|
||||
><i class="bi bi-house"></i> Homepage Editor</a
|
||||
>
|
||||
</li>
|
||||
<li>
|
||||
<a href="/admin/products.html"><i class="bi bi-box"></i> Products</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="/admin/portfolio.html"
|
||||
><i class="bi bi-easel"></i> Portfolio</a
|
||||
>
|
||||
</li>
|
||||
<li>
|
||||
<a href="/admin/blog.html"><i class="bi bi-newspaper"></i> Blog</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="/admin/pages.html"><i class="bi bi-file-text"></i> Pages</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="/admin/menu.html"><i class="bi bi-list"></i> Menu</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="/admin/settings.html"><i class="bi bi-gear"></i> Settings</a>
|
||||
</li>
|
||||
<li>
|
||||
<a href="/admin/users.html"><i class="bi bi-people"></i> Users</a>
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<!-- Main Content -->
|
||||
<div class="main-content">
|
||||
<!-- Top Bar -->
|
||||
<div class="top-bar">
|
||||
<div>
|
||||
<h3>Welcome, <span id="userName">Admin</span></h3>
|
||||
<p class="mb-0 text-muted">Manage your online shop</p>
|
||||
</div>
|
||||
<div>
|
||||
<a href="/index.html" target="_blank" class="btn-view-site me-2"
|
||||
><i class="bi bi-eye"></i> View Site</a
|
||||
>
|
||||
<button class="btn-logout" onclick="logout()">
|
||||
<i class="bi bi-box-arrow-right"></i> Logout
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Stats Cards -->
|
||||
<div class="row">
|
||||
<div class="col-md-3 mb-4">
|
||||
<a href="/admin/products.html" class="stat-card">
|
||||
<h6>Total Products</h6>
|
||||
<h2 id="productCount">-</h2>
|
||||
<span class="stat-link">Manage →</span>
|
||||
</a>
|
||||
</div>
|
||||
<div class="col-md-3 mb-4">
|
||||
<a href="/admin/portfolio.html" class="stat-card">
|
||||
<h6>Portfolio Projects</h6>
|
||||
<h2 id="projectCount">-</h2>
|
||||
<span class="stat-link">Manage →</span>
|
||||
</a>
|
||||
</div>
|
||||
<div class="col-md-3 mb-4">
|
||||
<a href="/admin/blog.html" class="stat-card">
|
||||
<h6>Blog Posts</h6>
|
||||
<h2 id="blogCount">-</h2>
|
||||
<span class="stat-link">Manage →</span>
|
||||
</a>
|
||||
</div>
|
||||
<div class="col-md-3 mb-4">
|
||||
<a href="/admin/pages.html" class="stat-card">
|
||||
<h6>Custom Pages</h6>
|
||||
<h2 id="pageCount">-</h2>
|
||||
<span class="stat-link">Manage →</span>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Quick Actions -->
|
||||
<h4 class="mt-5 mb-4">Quick Actions</h4>
|
||||
<div class="row">
|
||||
<div class="col-md-3 mb-4">
|
||||
<a href="/admin/homepage.html" class="text-decoration-none">
|
||||
<div class="action-card">
|
||||
<i class="bi bi-house-fill text-success"></i>
|
||||
<h6>Homepage Editor</h6>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
<div class="col-md-3 mb-4">
|
||||
<a
|
||||
href="/admin/products.html?action=create"
|
||||
class="text-decoration-none"
|
||||
>
|
||||
<div class="action-card">
|
||||
<i class="bi bi-plus-circle text-primary"></i>
|
||||
<h6>Add New Product</h6>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
<div class="col-md-3 mb-4">
|
||||
<a href="/admin/blog.html?action=create" class="text-decoration-none">
|
||||
<div class="action-card">
|
||||
<i class="bi bi-plus-circle text-info"></i>
|
||||
<h6>Create Blog Post</h6>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
<div class="col-md-3 mb-4">
|
||||
<a
|
||||
href="/admin/portfolio.html?action=create"
|
||||
class="text-decoration-none"
|
||||
>
|
||||
<div class="action-card">
|
||||
<i class="bi bi-plus-circle text-warning"></i>
|
||||
<h6>Add Portfolio Project</h6>
|
||||
</div>
|
||||
</a>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
|
||||
<script>
|
||||
// Check authentication
|
||||
async function checkAuth() {
|
||||
try {
|
||||
const response = await fetch("/api/admin/session");
|
||||
credentials: "include",
|
||||
if (!response.ok) {
|
||||
window.location.href = "/admin/login.html";
|
||||
return;
|
||||
}
|
||||
const data = await response.json();
|
||||
if (!data.authenticated) {
|
||||
window.location.href = "/admin/login.html";
|
||||
return;
|
||||
}
|
||||
document.getElementById("userName").textContent =
|
||||
data.user.name || data.user.email;
|
||||
loadDashboardStats();
|
||||
} catch (error) {
|
||||
window.location.href = "/admin/login.html";
|
||||
}
|
||||
}
|
||||
|
||||
// Load dashboard statistics
|
||||
async function loadDashboardStats() {
|
||||
try {
|
||||
const response = await fetch("/api/admin/dashboard/stats");
|
||||
credentials: "include",
|
||||
const data = await response.json();
|
||||
if (data.success) {
|
||||
document.getElementById("productCount").textContent =
|
||||
data.stats.products;
|
||||
document.getElementById("projectCount").textContent =
|
||||
data.stats.projects;
|
||||
document.getElementById("blogCount").textContent = data.stats.blog;
|
||||
document.getElementById("pageCount").textContent = data.stats.pages;
|
||||
}
|
||||
} catch (error) {
|
||||
console.error("Failed to load stats:", error);
|
||||
}
|
||||
}
|
||||
|
||||
// Logout function
|
||||
async function logout() {
|
||||
try {
|
||||
const response = await fetch("/api/admin/logout", { method: "POST" });
|
||||
credentials: "include",
|
||||
if (response.ok) {
|
||||
window.location.href = "/admin/login.html";
|
||||
}
|
||||
} catch (error) {
|
||||
console.error("Logout failed:", error);
|
||||
}
|
||||
}
|
||||
|
||||
// Initialize
|
||||
checkAuth();
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
171
website/admin/login.html
Normal file
171
website/admin/login.html
Normal file
@@ -0,0 +1,171 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Admin Login - Sky Art Shop</title>
|
||||
<link
|
||||
href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css"
|
||||
rel="stylesheet"
|
||||
/>
|
||||
<style>
|
||||
body {
|
||||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||||
min-height: 100vh;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
|
||||
"Helvetica Neue", Arial, sans-serif;
|
||||
}
|
||||
.login-card {
|
||||
background: white;
|
||||
border-radius: 16px;
|
||||
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
|
||||
padding: 40px;
|
||||
max-width: 400px;
|
||||
width: 100%;
|
||||
}
|
||||
.login-header {
|
||||
text-align: center;
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
.login-header h1 {
|
||||
color: #2c3e50;
|
||||
font-size: 28px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
.login-header p {
|
||||
color: #7f8c8d;
|
||||
margin: 0;
|
||||
}
|
||||
.form-control {
|
||||
border-radius: 8px;
|
||||
padding: 12px;
|
||||
border: 2px solid #e0e0e0;
|
||||
}
|
||||
.form-control:focus {
|
||||
border-color: #667eea;
|
||||
box-shadow: 0 0 0 0.2rem rgba(102, 126, 234, 0.25);
|
||||
}
|
||||
.btn-login {
|
||||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||||
border: none;
|
||||
border-radius: 8px;
|
||||
padding: 12px;
|
||||
color: white;
|
||||
font-weight: 600;
|
||||
width: 100%;
|
||||
transition: transform 0.2s;
|
||||
}
|
||||
.btn-login:hover {
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 5px 15px rgba(102, 126, 234, 0.4);
|
||||
}
|
||||
.btn-login:disabled {
|
||||
opacity: 0.6;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
.alert {
|
||||
border-radius: 8px;
|
||||
display: none;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="login-card">
|
||||
<div class="login-header">
|
||||
<h1>🛍️ Sky Art Shop</h1>
|
||||
<p>Admin Panel Login</p>
|
||||
</div>
|
||||
|
||||
<div class="alert alert-danger" role="alert" id="errorAlert"></div>
|
||||
|
||||
<form id="loginForm">
|
||||
<div class="mb-3">
|
||||
<label for="email" class="form-label">Email Address</label>
|
||||
<input
|
||||
type="email"
|
||||
class="form-control"
|
||||
id="email"
|
||||
name="email"
|
||||
required
|
||||
placeholder="admin@example.com"
|
||||
autocomplete="username"
|
||||
/>
|
||||
</div>
|
||||
<div class="mb-4">
|
||||
<label for="password" class="form-label">Password</label>
|
||||
<input
|
||||
type="password"
|
||||
class="form-control"
|
||||
id="password"
|
||||
name="password"
|
||||
required
|
||||
placeholder="Enter your password"
|
||||
autocomplete="current-password"
|
||||
/>
|
||||
</div>
|
||||
<button type="submit" class="btn btn-login" id="loginBtn">Sign In</button>
|
||||
</form>
|
||||
|
||||
<div class="text-center mt-4">
|
||||
<a
|
||||
href="/home.html"
|
||||
class="text-decoration-none"
|
||||
style="color: #667eea"
|
||||
>← Back to Website</a
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
|
||||
<script>
|
||||
document
|
||||
.getElementById("loginForm")
|
||||
.addEventListener("submit", async function (e) {
|
||||
e.preventDefault();
|
||||
|
||||
const email = document.getElementById("email").value;
|
||||
const password = document.getElementById("password").value;
|
||||
const errorAlert = document.getElementById("errorAlert");
|
||||
const loginBtn = document.getElementById("loginBtn");
|
||||
|
||||
// Disable button during login
|
||||
loginBtn.disabled = true;
|
||||
loginBtn.textContent = "Signing in...";
|
||||
errorAlert.style.display = "none";
|
||||
|
||||
try {
|
||||
const response = await fetch("/api/admin/login", {
|
||||
method: "POST",
|
||||
headers: {
|
||||
"Content-Type": "application/json",
|
||||
},
|
||||
credentials: "include",
|
||||
body: JSON.stringify({ email, password }),
|
||||
});
|
||||
|
||||
const data = await response.json();
|
||||
|
||||
if (response.ok && data.success) {
|
||||
// Login successful - redirect to dashboard
|
||||
window.location.href = "/admin/dashboard.html";
|
||||
} else {
|
||||
// Show error
|
||||
errorAlert.textContent = data.message || "Invalid credentials";
|
||||
errorAlert.style.display = "block";
|
||||
loginBtn.disabled = false;
|
||||
loginBtn.textContent = "Sign In";
|
||||
}
|
||||
} catch (error) {
|
||||
console.error("Login error:", error);
|
||||
errorAlert.textContent = "Login failed. Please try again.";
|
||||
errorAlert.style.display = "block";
|
||||
loginBtn.disabled = false;
|
||||
loginBtn.textContent = "Sign In";
|
||||
}
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
153
website/admin/login.html.bak
Normal file
153
website/admin/login.html.bak
Normal file
@@ -0,0 +1,153 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>Admin Login - Sky Art Shop</title>
|
||||
<link
|
||||
href="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/css/bootstrap.min.css"
|
||||
rel="stylesheet"
|
||||
/>
|
||||
<style>
|
||||
body {
|
||||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||||
min-height: 100vh;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto,
|
||||
"Helvetica Neue", Arial, sans-serif;
|
||||
}
|
||||
.login-card {
|
||||
background: white;
|
||||
border-radius: 16px;
|
||||
box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3);
|
||||
padding: 40px;
|
||||
max-width: 400px;
|
||||
width: 100%;
|
||||
}
|
||||
.login-header {
|
||||
text-align: center;
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
.login-header h1 {
|
||||
color: #2c3e50;
|
||||
font-size: 28px;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
.login-header p {
|
||||
color: #7f8c8d;
|
||||
margin: 0;
|
||||
}
|
||||
.form-control {
|
||||
border-radius: 8px;
|
||||
padding: 12px;
|
||||
border: 2px solid #e0e0e0;
|
||||
}
|
||||
.form-control:focus {
|
||||
border-color: #667eea;
|
||||
box-shadow: 0 0 0 0.2rem rgba(102, 126, 234, 0.25);
|
||||
}
|
||||
.btn-login {
|
||||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||||
border: none;
|
||||
border-radius: 8px;
|
||||
padding: 12px;
|
||||
color: white;
|
||||
font-weight: 600;
|
||||
width: 100%;
|
||||
transition: transform 0.2s;
|
||||
}
|
||||
.btn-login:hover {
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 5px 15px rgba(102, 126, 234, 0.4);
|
||||
}
|
||||
.alert {
|
||||
border-radius: 8px;
|
||||
display: none;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="login-card">
|
||||
<div class="login-header">
|
||||
<h1>🛍️ Sky Art Shop</h1>
|
||||
<p>Admin Panel Login</p>
|
||||
</div>
|
||||
|
||||
<div class="alert alert-danger" role="alert" id="errorAlert"></div>
|
||||
|
||||
<form id="loginForm">
|
||||
<div class="mb-3">
|
||||
<label for="email" class="form-label">Email Address</label>
|
||||
<input
|
||||
type="email"
|
||||
class="form-control"
|
||||
id="email"
|
||||
name="email"
|
||||
required
|
||||
placeholder="admin@skyartshop.com"
|
||||
/>
|
||||
</div>
|
||||
<div class="mb-4">
|
||||
<label for="password" class="form-label">Password</label>
|
||||
<input
|
||||
type="password"
|
||||
class="form-control"
|
||||
id="password"
|
||||
name="password"
|
||||
required
|
||||
placeholder="Enter your password"
|
||||
/>
|
||||
</div>
|
||||
<button type="submit" class="btn btn-login">Sign In</button>
|
||||
</form>
|
||||
|
||||
<div class="text-center mt-4">
|
||||
<a
|
||||
href="/index.html"
|
||||
class="text-decoration-none"
|
||||
style="color: #667eea"
|
||||
>← Back to Website</a
|
||||
>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script src="https://cdn.jsdelivr.net/npm/bootstrap@5.3.0/dist/js/bootstrap.bundle.min.js"></script>
|
||||
<script>
|
||||
document
|
||||
.getElementById("loginForm")
|
||||
.addEventListener("submit", async function (e) {
|
||||
e.preventDefault();
|
||||
|
||||
const email = document.getElementById("email").value;
|
||||
const password = document.getElementById("password").value;
|
||||
const errorAlert = document.getElementById("errorAlert");
|
||||
|
||||
try {
|
||||
const response = await fetch("/api/admin/login", {
|
||||
credentials: "include",
|
||||
method: "POST",
|
||||
headers: {
|
||||
"Content-Type": "application/json",
|
||||
},
|
||||
credentials: "include",
|
||||
body: JSON.stringify({ email, password }),
|
||||
});
|
||||
|
||||
const data = await response.json();
|
||||
|
||||
if (response.ok && data.success) {
|
||||
window.location.href = "/admin/dashboard.html";
|
||||
} else {
|
||||
errorAlert.textContent = data.message || "Invalid credentials";
|
||||
errorAlert.style.display = "block";
|
||||
}
|
||||
} catch (error) {
|
||||
errorAlert.textContent = "Login failed. Please try again.";
|
||||
errorAlert.style.display = "block";
|
||||
}
|
||||
});
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
647
website/admin/users.html
Normal file
647
website/admin/users.html
Normal file
@@ -0,0 +1,647 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8" />
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
|
||||
<title>User Management - Sky Art Shop Admin</title>
|
||||
<link rel="preconnect" href="https://fonts.googleapis.com" />
|
||||
<link rel="preconnect" href="https://fonts.gstatic.com" crossorigin />
|
||||
<link href="https://fonts.googleapis.com/css2?family=Roboto:wght@300;400;500;600;700&display=swap" rel="stylesheet" />
|
||||
<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/bootstrap-icons@1.11.3/font/bootstrap-icons.min.css" />
|
||||
<link rel="stylesheet" href="/assets/css/main.css" />
|
||||
<style>
|
||||
body {
|
||||
font-family: 'Roboto', sans-serif;
|
||||
background: #f5f7fa;
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
}
|
||||
.admin-header {
|
||||
background: white;
|
||||
padding: 16px 32px;
|
||||
box-shadow: 0 1px 3px rgba(0,0,0,0.1);
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
}
|
||||
.admin-header h1 {
|
||||
margin: 0;
|
||||
font-size: 24px;
|
||||
color: #1a1a1a;
|
||||
}
|
||||
.container {
|
||||
max-width: 1400px;
|
||||
margin: 32px auto;
|
||||
padding: 0 32px;
|
||||
}
|
||||
.action-bar {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
.btn {
|
||||
padding: 10px 20px;
|
||||
border: none;
|
||||
border-radius: 6px;
|
||||
font-weight: 500;
|
||||
cursor: pointer;
|
||||
transition: all 0.2s;
|
||||
text-decoration: none;
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
}
|
||||
.btn-primary {
|
||||
background: #6b46c1;
|
||||
color: white;
|
||||
}
|
||||
.btn-primary:hover {
|
||||
background: #5936a3;
|
||||
}
|
||||
.btn-secondary {
|
||||
background: #e5e7eb;
|
||||
color: #374151;
|
||||
}
|
||||
.btn-secondary:hover {
|
||||
background: #d1d5db;
|
||||
}
|
||||
.btn-danger {
|
||||
background: #dc2626;
|
||||
color: white;
|
||||
}
|
||||
.btn-danger:hover {
|
||||
background: #b91c1c;
|
||||
}
|
||||
.btn-success {
|
||||
background: #10b981;
|
||||
color: white;
|
||||
}
|
||||
.btn-success:hover {
|
||||
background: #059669;
|
||||
}
|
||||
.users-table {
|
||||
background: white;
|
||||
border-radius: 8px;
|
||||
overflow: hidden;
|
||||
box-shadow: 0 1px 3px rgba(0,0,0,0.1);
|
||||
}
|
||||
table {
|
||||
width: 100%;
|
||||
border-collapse: collapse;
|
||||
}
|
||||
thead {
|
||||
background: #f9fafb;
|
||||
}
|
||||
th {
|
||||
padding: 16px;
|
||||
text-align: left;
|
||||
font-weight: 600;
|
||||
color: #6b7280;
|
||||
font-size: 13px;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.5px;
|
||||
}
|
||||
td {
|
||||
padding: 16px;
|
||||
border-top: 1px solid #e5e7eb;
|
||||
color: #374151;
|
||||
}
|
||||
tbody tr:hover {
|
||||
background: #f9fafb;
|
||||
}
|
||||
.status-badge {
|
||||
display: inline-block;
|
||||
padding: 4px 12px;
|
||||
border-radius: 12px;
|
||||
font-size: 12px;
|
||||
font-weight: 600;
|
||||
}
|
||||
.status-active {
|
||||
background: #d1fae5;
|
||||
color: #065f46;
|
||||
}
|
||||
.status-inactive {
|
||||
background: #fee2e2;
|
||||
color: #991b1b;
|
||||
}
|
||||
.role-badge {
|
||||
display: inline-block;
|
||||
padding: 4px 12px;
|
||||
border-radius: 6px;
|
||||
font-size: 13px;
|
||||
font-weight: 500;
|
||||
background: #e0e7ff;
|
||||
color: #3730a3;
|
||||
}
|
||||
.btn-group {
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
}
|
||||
.btn-icon {
|
||||
width: 32px;
|
||||
height: 32px;
|
||||
padding: 0;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
border-radius: 6px;
|
||||
font-size: 16px;
|
||||
}
|
||||
.modal {
|
||||
display: none;
|
||||
position: fixed;
|
||||
top: 0;
|
||||
left: 0;
|
||||
right: 0;
|
||||
bottom: 0;
|
||||
background: rgba(0,0,0,0.5);
|
||||
z-index: 1000;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
.modal.active {
|
||||
display: flex;
|
||||
}
|
||||
.modal-content {
|
||||
background: white;
|
||||
border-radius: 12px;
|
||||
padding: 32px;
|
||||
max-width: 500px;
|
||||
width: 90%;
|
||||
max-height: 90vh;
|
||||
overflow-y: auto;
|
||||
}
|
||||
.modal-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 24px;
|
||||
}
|
||||
.modal-header h2 {
|
||||
margin: 0;
|
||||
font-size: 24px;
|
||||
color: #1a1a1a;
|
||||
}
|
||||
.form-group {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
.form-group label {
|
||||
display: block;
|
||||
margin-bottom: 8px;
|
||||
font-weight: 500;
|
||||
color: #374151;
|
||||
}
|
||||
.form-group input,
|
||||
.form-group select {
|
||||
width: 100%;
|
||||
padding: 10px 14px;
|
||||
border: 1px solid #d1d5db;
|
||||
border-radius: 6px;
|
||||
font-size: 14px;
|
||||
font-family: 'Roboto', sans-serif;
|
||||
}
|
||||
.form-group input:focus,
|
||||
.form-group select:focus {
|
||||
outline: none;
|
||||
border-color: #6b46c1;
|
||||
box-shadow: 0 0 0 3px rgba(107, 70, 193, 0.1);
|
||||
}
|
||||
.checkbox-group {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
}
|
||||
.checkbox-group input[type="checkbox"] {
|
||||
width: auto;
|
||||
}
|
||||
.alert {
|
||||
padding: 12px 16px;
|
||||
border-radius: 6px;
|
||||
margin-bottom: 20px;
|
||||
display: none;
|
||||
}
|
||||
.alert.active {
|
||||
display: block;
|
||||
}
|
||||
.alert-success {
|
||||
background: #d1fae5;
|
||||
color: #065f46;
|
||||
}
|
||||
.alert-error {
|
||||
background: #fee2e2;
|
||||
color: #991b1b;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="admin-header">
|
||||
<h1><i class="bi bi-people"></i> User Management</h1>
|
||||
<a href="/admin/dashboard.html" class="btn btn-secondary">
|
||||
<i class="bi bi-arrow-left"></i> Back to Dashboard
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<div class="container">
|
||||
<div class="action-bar">
|
||||
<h2 style="margin: 0; font-size: 20px; color: #374151;">All Users</h2>
|
||||
<button class="btn btn-primary" onclick="openCreateUserModal()">
|
||||
<i class="bi bi-person-plus"></i> Create New User
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div id="alert" class="alert"></div>
|
||||
|
||||
<div class="users-table">
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Username</th>
|
||||
<th>Email</th>
|
||||
<th>Role</th>
|
||||
<th>Status</th>
|
||||
<th>Last Login</th>
|
||||
<th>Password</th>
|
||||
<th>Actions</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody id="usersTableBody">
|
||||
<tr>
|
||||
<td colspan="7" style="text-align: center; padding: 40px;">
|
||||
Loading users...
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Create/Edit User Modal -->
|
||||
<div id="userModal" class="modal">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<h2 id="modalTitle">Create New User</h2>
|
||||
<button class="btn-icon btn-secondary" onclick="closeUserModal()">
|
||||
<i class="bi bi-x-lg"></i>
|
||||
</button>
|
||||
</div>
|
||||
<form id="userForm">
|
||||
<input type="hidden" id="userId" />
|
||||
<div class="form-group">
|
||||
<label for="username">Username *</label>
|
||||
<input type="text" id="username" required />
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="email">Email *</label>
|
||||
<input type="email" id="email" required />
|
||||
</div>
|
||||
<div class="form-group" id="passwordGroup">
|
||||
<label for="password">Password *</label>
|
||||
<input type="password" id="password" minlength="6" />
|
||||
<small style="color: #6b7280;">Minimum 6 characters</small>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="role_id">Role *</label>
|
||||
<select id="role_id" required>
|
||||
<option value="">Select a role...</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<div class="checkbox-group">
|
||||
<input type="checkbox" id="password_never_expires" />
|
||||
<label for="password_never_expires" style="margin: 0;">Password never expires</label>
|
||||
</div>
|
||||
<small style="color: #6b7280; display: block; margin-top: 4px;">
|
||||
If unchecked, password will expire after 90 days
|
||||
</small>
|
||||
</div>
|
||||
<div style="display: flex; gap: 12px; margin-top: 24px;">
|
||||
<button type="submit" class="btn btn-primary" style="flex: 1;">
|
||||
<i class="bi bi-check-lg"></i> Save User
|
||||
</button>
|
||||
<button type="button" class="btn btn-secondary" onclick="closeUserModal()">
|
||||
Cancel
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Reset Password Modal -->
|
||||
<div id="resetPasswordModal" class="modal">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<h2>Reset Password</h2>
|
||||
<button class="btn-icon btn-secondary" onclick="closeResetPasswordModal()">
|
||||
<i class="bi bi-x-lg"></i>
|
||||
</button>
|
||||
</div>
|
||||
<form id="resetPasswordForm">
|
||||
<input type="hidden" id="resetUserId" />
|
||||
<p style="color: #6b7280; margin-bottom: 20px;">
|
||||
Enter a new password for <strong id="resetUsername"></strong>
|
||||
</p>
|
||||
<div class="form-group">
|
||||
<label for="new_password">New Password *</label>
|
||||
<input type="password" id="new_password" minlength="6" required />
|
||||
<small style="color: #6b7280;">Minimum 6 characters</small>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="confirm_password">Confirm Password *</label>
|
||||
<input type="password" id="confirm_password" minlength="6" required />
|
||||
</div>
|
||||
<div style="display: flex; gap: 12px; margin-top: 24px;">
|
||||
<button type="submit" class="btn btn-primary" style="flex: 1;">
|
||||
<i class="bi bi-key"></i> Reset Password
|
||||
</button>
|
||||
<button type="button" class="btn btn-secondary" onclick="closeResetPasswordModal()">
|
||||
Cancel
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
let users = [];
|
||||
let roles = [];
|
||||
let editingUserId = null;
|
||||
|
||||
// Check authentication
|
||||
async function checkAuth() {
|
||||
try {
|
||||
const response = await fetch('/api/admin/session');
|
||||
const data = await response.json();
|
||||
if (!data.authenticated) {
|
||||
window.location.href = '/admin/login.html';
|
||||
}
|
||||
} catch (error) {
|
||||
window.location.href = '/admin/login.html';
|
||||
}
|
||||
}
|
||||
|
||||
// Load roles
|
||||
async function loadRoles() {
|
||||
try {
|
||||
const response = await fetch('/api/admin/users/roles');
|
||||
const data = await response.json();
|
||||
if (data.success) {
|
||||
roles = data.roles;
|
||||
const select = document.getElementById('role_id');
|
||||
select.innerHTML = '<option value="">Select a role...</option>' +
|
||||
roles.map(role => \`<option value="\${role.id}">\${role.name} - \${role.description}</option>\`).join('');
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Error loading roles:', error);
|
||||
}
|
||||
}
|
||||
|
||||
// Load users
|
||||
async function loadUsers() {
|
||||
try {
|
||||
const response = await fetch('/api/admin/users');
|
||||
const data = await response.json();
|
||||
if (data.success) {
|
||||
users = data.users;
|
||||
renderUsers();
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Error loading users:', error);
|
||||
showAlert('Error loading users', 'error');
|
||||
}
|
||||
}
|
||||
|
||||
// Render users table
|
||||
function renderUsers() {
|
||||
const tbody = document.getElementById('usersTableBody');
|
||||
if (users.length === 0) {
|
||||
tbody.innerHTML = '<tr><td colspan="7" style="text-align: center; padding: 40px; color: #9ca3af;">No users found</td></tr>';
|
||||
return;
|
||||
}
|
||||
|
||||
tbody.innerHTML = users.map(user => \`
|
||||
<tr>
|
||||
<td style="font-weight: 500;">\${user.username}</td>
|
||||
<td>\${user.email}</td>
|
||||
<td><span class="role-badge">\${user.role_name || 'Unknown'}</span></td>
|
||||
<td>
|
||||
<span class="status-badge \${user.isactive ? 'status-active' : 'status-inactive'}">
|
||||
\${user.isactive ? 'Active' : 'Inactive'}
|
||||
</span>
|
||||
</td>
|
||||
<td>\${user.last_login ? new Date(user.last_login).toLocaleDateString() : 'Never'}</td>
|
||||
<td>
|
||||
\${user.password_never_expires ?
|
||||
'<span style="color: #10b981;">Never expires</span>' :
|
||||
'<span style="color: #f59e0b;">Expires in 90 days</span>'
|
||||
}
|
||||
</td>
|
||||
<td>
|
||||
<div class="btn-group">
|
||||
<button class="btn-icon btn-secondary" onclick="editUser('\${user.id}')" title="Edit">
|
||||
<i class="bi bi-pencil"></i>
|
||||
</button>
|
||||
<button class="btn-icon btn-primary" onclick="resetPassword('\${user.id}', '\${user.username}')" title="Reset Password">
|
||||
<i class="bi bi-key"></i>
|
||||
</button>
|
||||
<button class="btn-icon \${user.isactive ? 'btn-secondary' : 'btn-success'}"
|
||||
onclick="toggleStatus('\${user.id}')"
|
||||
title="\${user.isactive ? 'Deactivate' : 'Activate'}">
|
||||
<i class="bi bi-\${user.isactive ? 'pause' : 'play'}-circle"></i>
|
||||
</button>
|
||||
<button class="btn-icon btn-danger" onclick="deleteUser('\${user.id}')" title="Delete">
|
||||
<i class="bi bi-trash"></i>
|
||||
</button>
|
||||
</div>
|
||||
</td>
|
||||
</tr>
|
||||
\`).join('');
|
||||
}
|
||||
|
||||
// Open create user modal
|
||||
function openCreateUserModal() {
|
||||
editingUserId = null;
|
||||
document.getElementById('modalTitle').textContent = 'Create New User';
|
||||
document.getElementById('userId').value = '';
|
||||
document.getElementById('userForm').reset();
|
||||
document.getElementById('passwordGroup').style.display = 'block';
|
||||
document.getElementById('password').required = true;
|
||||
document.getElementById('userModal').classList.add('active');
|
||||
}
|
||||
|
||||
// Edit user
|
||||
function editUser(id) {
|
||||
const user = users.find(u => u.id === id);
|
||||
if (!user) return;
|
||||
|
||||
editingUserId = id;
|
||||
document.getElementById('modalTitle').textContent = 'Edit User';
|
||||
document.getElementById('userId').value = user.id;
|
||||
document.getElementById('username').value = user.username;
|
||||
document.getElementById('email').value = user.email;
|
||||
document.getElementById('role_id').value = user.role_id;
|
||||
document.getElementById('password_never_expires').checked = user.password_never_expires;
|
||||
document.getElementById('passwordGroup').style.display = 'none';
|
||||
document.getElementById('password').required = false;
|
||||
document.getElementById('userModal').classList.add('active');
|
||||
}
|
||||
|
||||
// Close user modal
|
||||
function closeUserModal() {
|
||||
document.getElementById('userModal').classList.remove('active');
|
||||
document.getElementById('userForm').reset();
|
||||
editingUserId = null;
|
||||
}
|
||||
|
||||
// Submit user form
|
||||
document.getElementById('userForm').addEventListener('submit', async (e) => {
|
||||
e.preventDefault();
|
||||
|
||||
const formData = {
|
||||
username: document.getElementById('username').value,
|
||||
email: document.getElementById('email').value,
|
||||
role_id: document.getElementById('role_id').value,
|
||||
password_never_expires: document.getElementById('password_never_expires').checked
|
||||
};
|
||||
|
||||
if (!editingUserId) {
|
||||
formData.password = document.getElementById('password').value;
|
||||
}
|
||||
|
||||
try {
|
||||
const url = editingUserId ? \`/api/admin/users/\${editingUserId}\` : '/api/admin/users';
|
||||
const method = editingUserId ? 'PUT' : 'POST';
|
||||
|
||||
const response = await fetch(url, {
|
||||
method,
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify(formData)
|
||||
});
|
||||
|
||||
const data = await response.json();
|
||||
|
||||
if (data.success) {
|
||||
showAlert(data.message, 'success');
|
||||
closeUserModal();
|
||||
loadUsers();
|
||||
} else {
|
||||
showAlert(data.message, 'error');
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Error saving user:', error);
|
||||
showAlert('Error saving user', 'error');
|
||||
}
|
||||
});
|
||||
|
||||
// Reset password
|
||||
function resetPassword(id, username) {
|
||||
document.getElementById('resetUserId').value = id;
|
||||
document.getElementById('resetUsername').textContent = username;
|
||||
document.getElementById('resetPasswordForm').reset();
|
||||
document.getElementById('resetPasswordModal').classList.add('active');
|
||||
}
|
||||
|
||||
// Close reset password modal
|
||||
function closeResetPasswordModal() {
|
||||
document.getElementById('resetPasswordModal').classList.remove('active');
|
||||
document.getElementById('resetPasswordForm').reset();
|
||||
}
|
||||
|
||||
// Submit reset password form
|
||||
document.getElementById('resetPasswordForm').addEventListener('submit', async (e) => {
|
||||
e.preventDefault();
|
||||
|
||||
const newPassword = document.getElementById('new_password').value;
|
||||
const confirmPassword = document.getElementById('confirm_password').value;
|
||||
|
||||
if (newPassword !== confirmPassword) {
|
||||
showAlert('Passwords do not match', 'error');
|
||||
return;
|
||||
}
|
||||
|
||||
const userId = document.getElementById('resetUserId').value;
|
||||
|
||||
try {
|
||||
const response = await fetch(\`/api/admin/users/\${userId}/reset-password\`, {
|
||||
method: 'POST',
|
||||
headers: { 'Content-Type': 'application/json' },
|
||||
body: JSON.stringify({ new_password: newPassword })
|
||||
});
|
||||
|
||||
const data = await response.json();
|
||||
|
||||
if (data.success) {
|
||||
showAlert(data.message, 'success');
|
||||
closeResetPasswordModal();
|
||||
} else {
|
||||
showAlert(data.message, 'error');
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Error resetting password:', error);
|
||||
showAlert('Error resetting password', 'error');
|
||||
}
|
||||
});
|
||||
|
||||
// Toggle user status
|
||||
async function toggleStatus(id) {
|
||||
if (!confirm('Are you sure you want to change this user\'s status?')) return;
|
||||
|
||||
try {
|
||||
const response = await fetch(\`/api/admin/users/\${id}/toggle-status\`, {
|
||||
method: 'POST'
|
||||
});
|
||||
|
||||
const data = await response.json();
|
||||
|
||||
if (data.success) {
|
||||
showAlert(data.message, 'success');
|
||||
loadUsers();
|
||||
} else {
|
||||
showAlert(data.message, 'error');
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Error toggling status:', error);
|
||||
showAlert('Error toggling status', 'error');
|
||||
}
|
||||
}
|
||||
|
||||
// Delete user
|
||||
async function deleteUser(id) {
|
||||
if (!confirm('Are you sure you want to delete this user? This action cannot be undone.')) return;
|
||||
|
||||
try {
|
||||
const response = await fetch(\`/api/admin/users/\${id}\`, {
|
||||
method: 'DELETE'
|
||||
});
|
||||
|
||||
const data = await response.json();
|
||||
|
||||
if (data.success) {
|
||||
showAlert(data.message, 'success');
|
||||
loadUsers();
|
||||
} else {
|
||||
showAlert(data.message, 'error');
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Error deleting user:', error);
|
||||
showAlert('Error deleting user', 'error');
|
||||
}
|
||||
}
|
||||
|
||||
// Show alert
|
||||
function showAlert(message, type) {
|
||||
const alert = document.getElementById('alert');
|
||||
alert.textContent = message;
|
||||
alert.className = \`alert alert-\${type} active\`;
|
||||
setTimeout(() => {
|
||||
alert.classList.remove('active');
|
||||
}, 5000);
|
||||
}
|
||||
|
||||
// Initialize
|
||||
checkAuth();
|
||||
loadRoles();
|
||||
loadUsers();
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user