Files
SkyArtShop/website/admin/test-user-api.html
Local Server f8068ba54c webupdate
2026-01-19 01:17:43 -06:00

360 lines
11 KiB
HTML

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>User Management API Tests</title>
<link rel="icon" type="image/png" href="/admin/favicon.png" />
<style>
body {
font-family: "Segoe UI", Tahoma, Geneva, Verdana, sans-serif;
max-width: 1200px;
margin: 40px auto;
padding: 20px;
background: #f5f5f5;
}
.container {
background: white;
padding: 30px;
border-radius: 10px;
box-shadow: 0 2px 10px rgba(0, 0, 0, 0.1);
}
h1 {
color: #333;
border-bottom: 3px solid #667eea;
padding-bottom: 10px;
}
.test-section {
margin: 30px 0;
padding: 20px;
background: #f9f9f9;
border-left: 4px solid #667eea;
border-radius: 5px;
}
.test-section h3 {
margin-top: 0;
color: #667eea;
}
button {
background: #667eea;
color: white;
border: none;
padding: 10px 20px;
border-radius: 5px;
cursor: pointer;
font-size: 14px;
margin: 5px;
}
button:hover {
background: #5568d3;
}
.result {
margin-top: 15px;
padding: 15px;
background: white;
border: 1px solid #ddd;
border-radius: 5px;
font-family: "Courier New", monospace;
font-size: 13px;
white-space: pre-wrap;
max-height: 400px;
overflow-y: auto;
}
.success {
border-left: 4px solid #10b981;
background: #f0fdf4;
}
.error {
border-left: 4px solid #ef4444;
background: #fef2f2;
color: #dc2626;
}
.info {
background: #eff6ff;
border-left: 4px solid #3b82f6;
padding: 15px;
border-radius: 5px;
margin: 20px 0;
}
input {
padding: 8px;
border: 1px solid #ddd;
border-radius: 4px;
margin: 5px;
width: 200px;
}
</style>
</head>
<body>
<div class="container">
<h1>🧪 User Management API Tests</h1>
<div class="info">
<strong>Note:</strong> You must be logged in as an admin to run these
tests. Open the browser console (F12) for detailed logs.
</div>
<!-- Test 1: List All Users -->
<div class="test-section">
<h3>1. List All Users (GET /api/admin/users)</h3>
<button onclick="testListUsers()">Run Test</button>
<div id="result1" class="result" style="display: none"></div>
</div>
<!-- Test 2: Get Single User -->
<div class="test-section">
<h3>2. Get Single User (GET /api/admin/users/:id)</h3>
<input type="text" id="getUserId" placeholder="Enter user ID" />
<button onclick="testGetUser()">Run Test</button>
<div id="result2" class="result" style="display: none"></div>
</div>
<!-- Test 3: Create New User -->
<div class="test-section">
<h3>3. Create New User (POST /api/admin/users)</h3>
<div>
<input
type="text"
id="createName"
placeholder="Name"
value="Test User"
/>
<input type="text" id="createUsername" placeholder="Username" />
<input type="email" id="createEmail" placeholder="Email" />
</div>
<div>
<input
type="password"
id="createPassword"
placeholder="Password"
value="SecurePass123"
/>
<select id="createRole" style="padding: 8px; margin: 5px">
<option value="Cashier">Cashier</option>
<option value="Accountant">Accountant</option>
<option value="Admin">Admin</option>
</select>
</div>
<button onclick="testCreateUser()">Run Test</button>
<div id="result3" class="result" style="display: none"></div>
</div>
<!-- Test 4: Update User -->
<div class="test-section">
<h3>4. Update User (PUT /api/admin/users/:id)</h3>
<input type="text" id="updateUserId" placeholder="User ID" />
<input type="text" id="updateName" placeholder="New Name" />
<select id="updateRole" style="padding: 8px; margin: 5px">
<option value="Cashier">Cashier</option>
<option value="Accountant">Accountant</option>
<option value="Admin">Admin</option>
</select>
<button onclick="testUpdateUser()">Run Test</button>
<div id="result4" class="result" style="display: none"></div>
</div>
<!-- Test 5: Change Password -->
<div class="test-section">
<h3>5. Change Password (PUT /api/admin/users/:id/password)</h3>
<input type="text" id="passwordUserId" placeholder="User ID" />
<input
type="password"
id="newPassword"
placeholder="New Password"
value="NewSecure456"
/>
<button onclick="testChangePassword()">Run Test</button>
<div id="result5" class="result" style="display: none"></div>
</div>
<!-- Test 6: Delete User -->
<div class="test-section">
<h3>6. Delete User (DELETE /api/admin/users/:id)</h3>
<input type="text" id="deleteUserId" placeholder="User ID" />
<button onclick="testDeleteUser()" style="background: #ef4444">
Run Test
</button>
<div id="result6" class="result" style="display: none"></div>
</div>
</div>
<script>
// Generate random username/email
function generateTestCredentials() {
const timestamp = Date.now();
document.getElementById("createUsername").value =
"testuser_" + timestamp;
document.getElementById("createEmail").value =
"test_" + timestamp + "@example.com";
}
// Initialize with random credentials
generateTestCredentials();
// Helper to display results
function showResult(elementId, data, isError = false) {
const resultDiv = document.getElementById(elementId);
resultDiv.style.display = "block";
resultDiv.className = "result " + (isError ? "error" : "success");
resultDiv.textContent =
typeof data === "string" ? data : JSON.stringify(data, null, 2);
}
// Test 1: List all users
async function testListUsers() {
try {
const response = await fetch("/api/admin/users", {
credentials: "include",
});
const data = await response.json();
console.log("List Users:", data);
showResult("result1", data);
} catch (error) {
console.error("Error:", error);
showResult("result1", error.message, true);
}
}
// Test 2: Get single user
async function testGetUser() {
const userId = document.getElementById("getUserId").value;
if (!userId) {
alert("Please enter a user ID");
return;
}
try {
const response = await fetch(`/api/admin/users/${userId}`, {
credentials: "include",
});
const data = await response.json();
console.log("Get User:", data);
showResult("result2", data);
} catch (error) {
console.error("Error:", error);
showResult("result2", error.message, true);
}
}
// Test 3: Create user
async function testCreateUser() {
const userData = {
name: document.getElementById("createName").value,
username: document.getElementById("createUsername").value,
email: document.getElementById("createEmail").value,
password: document.getElementById("createPassword").value,
role: document.getElementById("createRole").value,
isactive: true,
passwordneverexpires: false,
};
try {
const response = await fetch("/api/admin/users", {
method: "POST",
headers: { "Content-Type": "application/json" },
credentials: "include",
body: JSON.stringify(userData),
});
const data = await response.json();
console.log("Create User:", data);
showResult("result3", data);
// Store the created user ID for other tests
if (data.success && data.user) {
document.getElementById("getUserId").value = data.user.id;
document.getElementById("updateUserId").value = data.user.id;
document.getElementById("passwordUserId").value = data.user.id;
document.getElementById("deleteUserId").value = data.user.id;
}
// Generate new credentials for next test
generateTestCredentials();
} catch (error) {
console.error("Error:", error);
showResult("result3", error.message, true);
}
}
// Test 4: Update user
async function testUpdateUser() {
const userId = document.getElementById("updateUserId").value;
if (!userId) {
alert("Please enter a user ID");
return;
}
const updateData = {
name: document.getElementById("updateName").value,
role: document.getElementById("updateRole").value,
};
try {
const response = await fetch(`/api/admin/users/${userId}`, {
method: "PUT",
headers: { "Content-Type": "application/json" },
credentials: "include",
body: JSON.stringify(updateData),
});
const data = await response.json();
console.log("Update User:", data);
showResult("result4", data);
} catch (error) {
console.error("Error:", error);
showResult("result4", error.message, true);
}
}
// Test 5: Change password
async function testChangePassword() {
const userId = document.getElementById("passwordUserId").value;
const password = document.getElementById("newPassword").value;
if (!userId) {
alert("Please enter a user ID");
return;
}
try {
const response = await fetch(`/api/admin/users/${userId}/password`, {
method: "PUT",
headers: { "Content-Type": "application/json" },
credentials: "include",
body: JSON.stringify({ password: password }),
});
const data = await response.json();
console.log("Change Password:", data);
showResult("result5", data);
} catch (error) {
console.error("Error:", error);
showResult("result5", error.message, true);
}
}
// Test 6: Delete user
async function testDeleteUser() {
const userId = document.getElementById("deleteUserId").value;
if (!userId) {
alert("Please enter a user ID");
return;
}
if (!confirm("Are you sure you want to delete this user?")) {
return;
}
try {
const response = await fetch(`/api/admin/users/${userId}`, {
method: "DELETE",
credentials: "include",
});
const data = await response.json();
console.log("Delete User:", data);
showResult("result6", data);
} catch (error) {
console.error("Error:", error);
showResult("result6", error.message, true);
}
}
</script>
</body>
</html>