Initial
This commit is contained in:
Jason
@@ -0,0 +1,77 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>404 - Page Not Found</title>
|
||||
<style>
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: Arial, sans-serif;
|
||||
background-color: #f5f5f5;
|
||||
display: flex;
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
min-height: 100vh;
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.error-container {
|
||||
text-align: center;
|
||||
background-color: white;
|
||||
padding: 60px 40px;
|
||||
border: 2px solid #333;
|
||||
border-radius: 8px;
|
||||
max-width: 600px;
|
||||
}
|
||||
|
||||
h1 {
|
||||
font-size: 120px;
|
||||
color: #333;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: 32px;
|
||||
color: #333;
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
p {
|
||||
font-size: 16px;
|
||||
color: #666;
|
||||
margin-bottom: 30px;
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
.button {
|
||||
display: inline-block;
|
||||
padding: 12px 30px;
|
||||
background-color: #333;
|
||||
color: white;
|
||||
text-decoration: none;
|
||||
border-radius: 4px;
|
||||
font-size: 16px;
|
||||
transition: background-color 0.3s ease;
|
||||
}
|
||||
|
||||
.button:hover {
|
||||
background-color: #555;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="error-container">
|
||||
<h1>404</h1>
|
||||
<h2>Page Not Found</h2>
|
||||
<p>Sorry, the page you're looking for doesn't exist or has been moved.</p>
|
||||
<a href="/" class="button">Go Home</a>
|
||||
<a href="/quiz" class="button" style="margin-left: 10px;">Start Quiz</a>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,133 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Access Denied - CGW Product Finder</title>
|
||||
<style>
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
|
||||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||||
min-height: 100vh;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.access-denied-container {
|
||||
background: white;
|
||||
padding: 50px;
|
||||
border-radius: 10px;
|
||||
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
|
||||
text-align: center;
|
||||
max-width: 500px;
|
||||
}
|
||||
|
||||
.icon {
|
||||
font-size: 80px;
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
h1 {
|
||||
color: #f56565;
|
||||
margin-bottom: 15px;
|
||||
font-size: 32px;
|
||||
}
|
||||
|
||||
.message {
|
||||
color: #666;
|
||||
margin-bottom: 10px;
|
||||
font-size: 16px;
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
.permission-info {
|
||||
background: #fed7d7;
|
||||
color: #742a2a;
|
||||
padding: 12px;
|
||||
border-radius: 5px;
|
||||
margin: 20px 0;
|
||||
font-family: 'Courier New', monospace;
|
||||
font-size: 14px;
|
||||
border-left: 4px solid #f56565;
|
||||
}
|
||||
|
||||
.btn {
|
||||
display: inline-block;
|
||||
padding: 12px 30px;
|
||||
margin: 10px 5px;
|
||||
border: none;
|
||||
border-radius: 5px;
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
cursor: pointer;
|
||||
transition: all 0.3s;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.btn-primary {
|
||||
background: #667eea;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.btn-primary:hover {
|
||||
background: #5568d3;
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 5px 15px rgba(102, 126, 234, 0.4);
|
||||
}
|
||||
|
||||
.btn-secondary {
|
||||
background: #e0e0e0;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.btn-secondary:hover {
|
||||
background: #d0d0d0;
|
||||
transform: translateY(-2px);
|
||||
}
|
||||
|
||||
.contact-info {
|
||||
margin-top: 30px;
|
||||
padding-top: 20px;
|
||||
border-top: 2px solid #e0e0e0;
|
||||
color: #999;
|
||||
font-size: 14px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="access-denied-container">
|
||||
<div class="icon">🚫</div>
|
||||
<h1>Access Denied</h1>
|
||||
<p class="message">
|
||||
You do not have permission to access this page or perform this action.
|
||||
</p>
|
||||
|
||||
{% if required_permission %}
|
||||
<div class="permission-info">
|
||||
Required Permission: <strong>{{ required_permission }}</strong>
|
||||
</div>
|
||||
{% endif %}
|
||||
|
||||
<p class="message">
|
||||
If you believe this is an error, please contact your administrator.
|
||||
</p>
|
||||
|
||||
<div style="margin-top: 30px;">
|
||||
<a href="javascript:history.back()" class="btn btn-secondary">← Go Back</a>
|
||||
<a href="{{ url_for('index') }}" class="btn btn-primary">Return to Home</a>
|
||||
</div>
|
||||
|
||||
<div class="contact-info">
|
||||
Need help? Contact your system administrator to request access.
|
||||
</div>
|
||||
</div>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,381 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Dynamic Image Generation - Test Page</title>
|
||||
<style>
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: Arial, sans-serif;
|
||||
background: #f5f5f5;
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.container {
|
||||
max-width: 1200px;
|
||||
margin: 0 auto;
|
||||
background: white;
|
||||
padding: 30px;
|
||||
border-radius: 8px;
|
||||
box-shadow: 0 2px 10px rgba(0,0,0,0.1);
|
||||
}
|
||||
|
||||
h1 {
|
||||
color: #333;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.subtitle {
|
||||
color: #666;
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
|
||||
.demo-section {
|
||||
display: grid;
|
||||
grid-template-columns: 1fr 1fr;
|
||||
gap: 30px;
|
||||
margin-bottom: 40px;
|
||||
}
|
||||
|
||||
.image-container {
|
||||
border: 2px solid #ddd;
|
||||
border-radius: 8px;
|
||||
padding: 20px;
|
||||
background: #fafafa;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.image-container h3 {
|
||||
margin-bottom: 15px;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.product-image {
|
||||
max-width: 100%;
|
||||
height: auto;
|
||||
border: 1px solid #ccc;
|
||||
border-radius: 4px;
|
||||
background: white;
|
||||
max-height: 500px;
|
||||
object-fit: contain;
|
||||
}
|
||||
|
||||
.loading {
|
||||
color: #999;
|
||||
font-style: italic;
|
||||
padding: 40px;
|
||||
}
|
||||
|
||||
.controls {
|
||||
background: #f9f9f9;
|
||||
padding: 20px;
|
||||
border-radius: 8px;
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
|
||||
.control-group {
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
.control-group label {
|
||||
display: block;
|
||||
font-weight: bold;
|
||||
margin-bottom: 5px;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.control-group select,
|
||||
.control-group input {
|
||||
width: 100%;
|
||||
padding: 8px;
|
||||
border: 1px solid #ddd;
|
||||
border-radius: 4px;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.radio-group {
|
||||
display: flex;
|
||||
gap: 15px;
|
||||
}
|
||||
|
||||
.radio-group label {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 5px;
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
button {
|
||||
background: #333;
|
||||
color: white;
|
||||
border: none;
|
||||
padding: 10px 20px;
|
||||
border-radius: 4px;
|
||||
cursor: pointer;
|
||||
font-size: 14px;
|
||||
margin-right: 10px;
|
||||
}
|
||||
|
||||
button:hover {
|
||||
background: #555;
|
||||
}
|
||||
|
||||
.info-box {
|
||||
background: #e3f2fd;
|
||||
border-left: 4px solid #2196F3;
|
||||
padding: 15px;
|
||||
margin-bottom: 20px;
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.info-box h4 {
|
||||
color: #1976D2;
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
|
||||
.info-box p {
|
||||
color: #555;
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
.url-display {
|
||||
background: #f5f5f5;
|
||||
padding: 10px;
|
||||
border-radius: 4px;
|
||||
font-family: monospace;
|
||||
font-size: 12px;
|
||||
word-break: break-all;
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
.error {
|
||||
background: #ffebee;
|
||||
border-left: 4px solid #f44336;
|
||||
padding: 15px;
|
||||
margin: 20px 0;
|
||||
border-radius: 4px;
|
||||
color: #c62828;
|
||||
}
|
||||
|
||||
@media (max-width: 768px) {
|
||||
.demo-section {
|
||||
grid-template-columns: 1fr;
|
||||
}
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="container">
|
||||
<h1>🎨 Dynamic Image Generation API</h1>
|
||||
<p class="subtitle">Test the product image generation endpoints</p>
|
||||
|
||||
<div class="info-box">
|
||||
<h4>How It Works</h4>
|
||||
<p>
|
||||
This demo uses server-side image processing to dynamically generate product images
|
||||
with different colors and configurations. Select options below to see the image update in real-time.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="controls">
|
||||
<h3>Product Configuration</h3>
|
||||
|
||||
<div class="control-group">
|
||||
<label for="product-select">Product:</label>
|
||||
<select id="product-select">
|
||||
<option value="cobrai">COBRAI - Storm Door</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div class="control-group">
|
||||
<label for="color-select">Color:</label>
|
||||
<select id="color-select">
|
||||
<option value="white">White</option>
|
||||
<option value="black">Black</option>
|
||||
<option value="bronze">Bronze</option>
|
||||
<option value="sandstone">Sandstone</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div class="control-group">
|
||||
<label>Hinge Location:</label>
|
||||
<div class="radio-group">
|
||||
<label>
|
||||
<input type="radio" name="hinge" value="right" checked>
|
||||
Right Hinge
|
||||
</label>
|
||||
<label>
|
||||
<input type="radio" name="hinge" value="left">
|
||||
Left Hinge
|
||||
</label>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="control-group">
|
||||
<label>
|
||||
<input type="checkbox" id="cache-checkbox" checked>
|
||||
Use Cache
|
||||
</label>
|
||||
</div>
|
||||
|
||||
<button onclick="updateImages()">🔄 Update Images</button>
|
||||
<button onclick="clearCache()">🗑️ Clear Cache</button>
|
||||
<button onclick="getConfig()">📋 Get Config</button>
|
||||
</div>
|
||||
|
||||
<div class="demo-section">
|
||||
<div class="image-container">
|
||||
<h3>Direct Image URL Method</h3>
|
||||
<p style="color: #666; font-size: 14px; margin-bottom: 10px;">
|
||||
Using: <code><img src="..."></code>
|
||||
</p>
|
||||
<img id="direct-image" class="product-image" src="" alt="Product">
|
||||
<div class="url-display" id="direct-url">Loading...</div>
|
||||
</div>
|
||||
|
||||
<div class="image-container">
|
||||
<h3>JSON/Base64 Method</h3>
|
||||
<p style="color: #666; font-size: 14px; margin-bottom: 10px;">
|
||||
Using: <code>fetch() + base64</code>
|
||||
</p>
|
||||
<img id="json-image" class="product-image" src="" alt="Product">
|
||||
<div class="url-display" id="json-url">Loading...</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="error-box" style="display: none;" class="error"></div>
|
||||
|
||||
<div id="config-box" style="display: none; margin-top: 20px;">
|
||||
<h3>Product Configuration</h3>
|
||||
<pre id="config-display" style="background: #f5f5f5; padding: 15px; border-radius: 4px; overflow-x: auto;"></pre>
|
||||
</div>
|
||||
|
||||
<div style="margin-top: 40px; padding-top: 20px; border-top: 1px solid #ddd;">
|
||||
<h3>API Endpoints Used</h3>
|
||||
<ul style="line-height: 2;">
|
||||
<li><code>GET /api/product-image/{product}?color={color}&hinge={hinge}</code></li>
|
||||
<li><code>GET /api/product-image/{product}?color={color}&hinge={hinge}&format=json</code></li>
|
||||
<li><code>GET /api/product-config/{product}</code></li>
|
||||
<li><code>POST /api/clear-image-cache</code></li>
|
||||
</ul>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
// Initialize on load
|
||||
window.addEventListener('DOMContentLoaded', () => {
|
||||
updateImages();
|
||||
});
|
||||
|
||||
// Auto-update when controls change
|
||||
document.getElementById('product-select').addEventListener('change', updateImages);
|
||||
document.getElementById('color-select').addEventListener('change', updateImages);
|
||||
document.querySelectorAll('[name="hinge"]').forEach(radio => {
|
||||
radio.addEventListener('change', updateImages);
|
||||
});
|
||||
|
||||
function updateImages() {
|
||||
const product = document.getElementById('product-select').value;
|
||||
const color = document.getElementById('color-select').value;
|
||||
const hinge = document.querySelector('[name="hinge"]:checked').value;
|
||||
const useCache = document.getElementById('cache-checkbox').checked;
|
||||
|
||||
hideError();
|
||||
|
||||
// Method 1: Direct image URL
|
||||
updateDirectImage(product, color, hinge, useCache);
|
||||
|
||||
// Method 2: JSON with base64
|
||||
updateJsonImage(product, color, hinge, useCache);
|
||||
}
|
||||
|
||||
function updateDirectImage(product, color, hinge, useCache) {
|
||||
const url = `/api/product-image/${product}?color=${color}&hinge=${hinge}&cache=${useCache}`;
|
||||
|
||||
const img = document.getElementById('direct-image');
|
||||
img.src = url;
|
||||
|
||||
document.getElementById('direct-url').textContent = url;
|
||||
}
|
||||
|
||||
async function updateJsonImage(product, color, hinge, useCache) {
|
||||
const url = `/api/product-image/${product}?color=${color}&hinge=${hinge}&format=json&cache=${useCache}`;
|
||||
|
||||
try {
|
||||
const response = await fetch(url);
|
||||
const data = await response.json();
|
||||
|
||||
if (data.status === 'success') {
|
||||
document.getElementById('json-image').src = data.image;
|
||||
document.getElementById('json-url').textContent = url;
|
||||
} else {
|
||||
showError(`Error: ${data.error || 'Unknown error'}`);
|
||||
}
|
||||
} catch (error) {
|
||||
showError(`Fetch error: ${error.message}`);
|
||||
}
|
||||
}
|
||||
|
||||
async function getConfig() {
|
||||
const product = document.getElementById('product-select').value;
|
||||
const url = `/api/product-config/${product}`;
|
||||
|
||||
try {
|
||||
const response = await fetch(url);
|
||||
const data = await response.json();
|
||||
|
||||
if (data.status === 'success') {
|
||||
document.getElementById('config-display').textContent =
|
||||
JSON.stringify(data.config, null, 2);
|
||||
document.getElementById('config-box').style.display = 'block';
|
||||
} else {
|
||||
showError(`Error: ${data.error || 'Unknown error'}`);
|
||||
}
|
||||
} catch (error) {
|
||||
showError(`Fetch error: ${error.message}`);
|
||||
}
|
||||
}
|
||||
|
||||
async function clearCache() {
|
||||
const product = document.getElementById('product-select').value;
|
||||
|
||||
try {
|
||||
const response = await fetch('/api/clear-image-cache', {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/json'
|
||||
},
|
||||
body: JSON.stringify({ productCode: product })
|
||||
});
|
||||
|
||||
const data = await response.json();
|
||||
|
||||
if (data.status === 'success') {
|
||||
alert(data.message);
|
||||
updateImages();
|
||||
} else {
|
||||
showError(`Error: ${data.error || 'Unknown error'}`);
|
||||
}
|
||||
} catch (error) {
|
||||
showError(`Fetch error: ${error.message}`);
|
||||
}
|
||||
}
|
||||
|
||||
function showError(message) {
|
||||
const errorBox = document.getElementById('error-box');
|
||||
errorBox.textContent = message;
|
||||
errorBox.style.display = 'block';
|
||||
}
|
||||
|
||||
function hideError() {
|
||||
document.getElementById('error-box').style.display = 'none';
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,230 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Product Details Form</title>
|
||||
<style>
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: Arial, sans-serif;
|
||||
padding: 20px;
|
||||
background-color: #f5f5f5;
|
||||
}
|
||||
|
||||
.container {
|
||||
max-width: 600px;
|
||||
margin: 0 auto;
|
||||
background-color: white;
|
||||
padding: 20px;
|
||||
border: 2px solid #333;
|
||||
}
|
||||
|
||||
.form-group {
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
label {
|
||||
display: block;
|
||||
margin-bottom: 5px;
|
||||
font-weight: bold;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
input[type="text"],
|
||||
input[type="number"] {
|
||||
width: 100%;
|
||||
padding: 8px;
|
||||
border: 1px solid #333;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
textarea {
|
||||
width: 100%;
|
||||
padding: 8px;
|
||||
border: 1px solid #333;
|
||||
font-size: 14px;
|
||||
resize: vertical;
|
||||
min-height: 80px;
|
||||
}
|
||||
|
||||
button {
|
||||
width: 100%;
|
||||
padding: 12px;
|
||||
background-color: #d0d0ff;
|
||||
border: 1px solid #333;
|
||||
cursor: pointer;
|
||||
font-size: 14px;
|
||||
font-weight: bold;
|
||||
margin-bottom: 15px;
|
||||
}
|
||||
|
||||
button:hover {
|
||||
background-color: #b0b0ff;
|
||||
}
|
||||
|
||||
.specifications-section {
|
||||
border: 3px solid #4CAF50;
|
||||
padding: 15px;
|
||||
margin-bottom: 15px;
|
||||
background-color: #f0fff0;
|
||||
}
|
||||
|
||||
.specifications-section.hidden {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.conditional-field {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.conditional-field.visible {
|
||||
display: block;
|
||||
}
|
||||
|
||||
select {
|
||||
width: 100%;
|
||||
padding: 8px;
|
||||
border: 1px solid #333;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.spec-row {
|
||||
display: grid;
|
||||
grid-template-columns: 120px 1fr;
|
||||
gap: 10px;
|
||||
margin-bottom: 10px;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.spec-row label {
|
||||
margin-bottom: 0;
|
||||
}
|
||||
|
||||
.spec-row input {
|
||||
border: 1px solid #333;
|
||||
padding: 6px;
|
||||
}
|
||||
|
||||
.questions-section {
|
||||
border: 1px solid #333;
|
||||
padding: 15px;
|
||||
text-align: center;
|
||||
background-color: #fafafa;
|
||||
}
|
||||
|
||||
.questions-section p {
|
||||
margin-bottom: 10px;
|
||||
font-size: 12px;
|
||||
}
|
||||
|
||||
.questions-section .placeholder {
|
||||
font-style: italic;
|
||||
color: #666;
|
||||
font-size: 12px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="container">
|
||||
<div class="form-group">
|
||||
<label>Type (door, window, other)</label>
|
||||
<select id="typeSelect" onchange="toggleOtherField()">
|
||||
<option value="">-- Select Type --</option>
|
||||
<option value="door">Door</option>
|
||||
<option value="window">Window</option>
|
||||
<option value="other">Other</option>
|
||||
</select>
|
||||
</div>
|
||||
|
||||
<div class="form-group conditional-field" id="otherField">
|
||||
<label>Please specify</label>
|
||||
<input type="text" placeholder="Enter type details">
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label>Description</label>
|
||||
<textarea placeholder="textfield"></textarea>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label>Notes</label>
|
||||
<textarea placeholder="textfield"></textarea>
|
||||
</div>
|
||||
|
||||
<button onclick="toggleSpecifications()">Match and Review</button>
|
||||
|
||||
<div class="specifications-section hidden" id="specificationsSection">
|
||||
<div class="spec-row">
|
||||
<label>Product Code:</label>
|
||||
<input type="text" placeholder="" readonly>
|
||||
</div>
|
||||
|
||||
<div class="spec-row">
|
||||
<label>Width:</label>
|
||||
<input type="text" placeholder="">
|
||||
</div>
|
||||
|
||||
<div class="spec-row">
|
||||
<label>Height</label>
|
||||
<input type="text" placeholder="">
|
||||
</div>
|
||||
|
||||
<div class="spec-row">
|
||||
<label>Color</label>
|
||||
<input type="text" placeholder="">
|
||||
</div>
|
||||
|
||||
<div class="spec-row">
|
||||
<label>Frame:</label>
|
||||
<input type="text" placeholder="">
|
||||
</div>
|
||||
|
||||
<div class="spec-row">
|
||||
<label>Screen:</label>
|
||||
<input type="text" placeholder="">
|
||||
</div>
|
||||
|
||||
<div class="spec-row">
|
||||
<label>Etc...</label>
|
||||
<input type="text" placeholder="">
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label>Quantity</label>
|
||||
<input type="number" min="1" value="1" placeholder="">
|
||||
</div>
|
||||
|
||||
<button>Confirm and Add</button>
|
||||
|
||||
<div class="questions-section">
|
||||
<p>Possible questions for customers based on what is selected or missing</p>
|
||||
<div class="placeholder">[list - checkbox per question]</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
function toggleSpecifications() {
|
||||
const section = document.getElementById('specificationsSection');
|
||||
section.classList.toggle('hidden');
|
||||
}
|
||||
|
||||
function toggleOtherField() {
|
||||
const typeSelect = document.getElementById('typeSelect');
|
||||
const otherField = document.getElementById('otherField');
|
||||
|
||||
if (typeSelect.value === 'other') {
|
||||
otherField.classList.add('visible');
|
||||
} else {
|
||||
otherField.classList.remove('visible');
|
||||
}
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,75 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Product Finder</title>
|
||||
<link rel="stylesheet" href="css/styles.css">
|
||||
</head>
|
||||
<body>
|
||||
<div class="container">
|
||||
<div class="header">
|
||||
<h1>Product Finder</h1>
|
||||
<div class="user-info-bar" id="userInfoBar">
|
||||
<span id="userLocationInfo"></span>
|
||||
<button onclick="logout()" class="logout-btn">Logout</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="breadcrumb" id="breadcrumb">
|
||||
Start
|
||||
</div>
|
||||
|
||||
<div id="content">
|
||||
<!-- Content will be dynamically loaded here -->
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
// Base URL for API calls (supports subdirectory deployments)
|
||||
const BASE_URL = '{{ base_url }}';
|
||||
|
||||
// Load user session info
|
||||
async function loadUserInfo() {
|
||||
try {
|
||||
const response = await fetch(BASE_URL + '/api/session');
|
||||
const data = await response.json();
|
||||
|
||||
if (data.status === 'success') {
|
||||
const locationNames = {
|
||||
'LINDS': 'Lindsborg',
|
||||
'IOLA': 'Iola',
|
||||
'KC': 'KC',
|
||||
'BMD': 'BMD'
|
||||
};
|
||||
|
||||
const currentLoc = locationNames[data.currentLocation] || data.currentLocation;
|
||||
document.getElementById('userLocationInfo').textContent =
|
||||
`👤 ${data.username} | 📍 ${currentLoc}`;
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Error loading user info:', error);
|
||||
}
|
||||
}
|
||||
|
||||
async function logout() {
|
||||
if (confirm('Are you sure you want to log out?')) {
|
||||
try {
|
||||
await fetch(BASE_URL + '/api/logout', { method: 'POST' });
|
||||
window.location.href = BASE_URL + '/login?message=' + encodeURIComponent('Successfully logged out');
|
||||
} catch (error) {
|
||||
window.location.href = BASE_URL + '/login';
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
// Load user info when page loads
|
||||
loadUserInfo();
|
||||
</script>
|
||||
<script>
|
||||
// Pass BASE_URL to script.js by setting it as a window variable
|
||||
window.APP_BASE_URL = BASE_URL;
|
||||
</script>
|
||||
<script src="{{ url_for('serve_js', filename='script.js') }}"></script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,255 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Login - CGW Product Finder</title>
|
||||
<style>
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
|
||||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||||
min-height: 100vh;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.login-container {
|
||||
background: white;
|
||||
padding: 40px;
|
||||
border-radius: 10px;
|
||||
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
|
||||
width: 100%;
|
||||
max-width: 400px;
|
||||
}
|
||||
|
||||
.login-header {
|
||||
text-align: center;
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
|
||||
.login-header h1 {
|
||||
color: #333;
|
||||
margin-bottom: 10px;
|
||||
font-size: 28px;
|
||||
}
|
||||
|
||||
.login-header p {
|
||||
color: #666;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.form-group {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.form-group label {
|
||||
display: block;
|
||||
margin-bottom: 8px;
|
||||
color: #333;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.form-group input {
|
||||
width: 100%;
|
||||
padding: 12px;
|
||||
border: 2px solid #e0e0e0;
|
||||
border-radius: 5px;
|
||||
font-size: 16px;
|
||||
transition: border-color 0.3s;
|
||||
}
|
||||
|
||||
.form-group input:focus {
|
||||
outline: none;
|
||||
border-color: #667eea;
|
||||
}
|
||||
|
||||
.btn {
|
||||
width: 100%;
|
||||
padding: 14px;
|
||||
border: none;
|
||||
border-radius: 5px;
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
cursor: pointer;
|
||||
transition: all 0.3s;
|
||||
background: #667eea;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.btn:hover {
|
||||
background: #5568d3;
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 5px 15px rgba(102, 126, 234, 0.4);
|
||||
}
|
||||
|
||||
.btn:disabled {
|
||||
background: #cbd5e0;
|
||||
cursor: not-allowed;
|
||||
transform: none;
|
||||
}
|
||||
|
||||
.alert {
|
||||
padding: 12px;
|
||||
border-radius: 5px;
|
||||
margin-bottom: 20px;
|
||||
display: none;
|
||||
}
|
||||
|
||||
.alert.show {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.alert-error {
|
||||
background: #fed7d7;
|
||||
color: #742a2a;
|
||||
border-left: 4px solid #f56565;
|
||||
}
|
||||
|
||||
.alert-info {
|
||||
background: #bee3f8;
|
||||
color: #2c5282;
|
||||
border-left: 4px solid #4299e1;
|
||||
}
|
||||
|
||||
.footer-links {
|
||||
text-align: center;
|
||||
margin-top: 20px;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.footer-links a {
|
||||
color: #667eea;
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.footer-links a:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
.loading-spinner {
|
||||
border: 3px solid #f3f3f3;
|
||||
border-top: 3px solid #667eea;
|
||||
border-radius: 50%;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
animation: spin 1s linear infinite;
|
||||
display: inline-block;
|
||||
margin-left: 10px;
|
||||
vertical-align: middle;
|
||||
display: none;
|
||||
}
|
||||
|
||||
@keyframes spin {
|
||||
0% { transform: rotate(0deg); }
|
||||
100% { transform: rotate(360deg); }
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="login-container">
|
||||
<div class="login-header">
|
||||
<h1>🔐 CGW Product Finder</h1>
|
||||
<p>Please sign in to continue</p>
|
||||
</div>
|
||||
|
||||
<div class="alert alert-error" id="errorAlert"></div>
|
||||
|
||||
<form id="loginForm">
|
||||
<div class="form-group">
|
||||
<label for="username">Username</label>
|
||||
<input type="text" id="username" name="username" required autofocus
|
||||
placeholder="Enter your username">
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label for="password">Password</label>
|
||||
<input type="password" id="password" name="password" required
|
||||
placeholder="Enter your password">
|
||||
</div>
|
||||
|
||||
<button type="submit" class="btn" id="loginBtn">
|
||||
Sign In
|
||||
<span class="loading-spinner" id="loadingSpinner"></span>
|
||||
</button>
|
||||
</form>
|
||||
|
||||
<div class="footer-links">
|
||||
<a href="{{ url_for('user_manager') }}">User Management</a>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
// Base URL for API calls (supports subdirectory deployments)
|
||||
const BASE_URL = '{{ base_url }}';
|
||||
|
||||
document.getElementById('loginForm').addEventListener('submit', async (e) => {
|
||||
e.preventDefault();
|
||||
|
||||
const username = document.getElementById('username').value;
|
||||
const password = document.getElementById('password').value;
|
||||
const loginBtn = document.getElementById('loginBtn');
|
||||
const spinner = document.getElementById('loadingSpinner');
|
||||
|
||||
// Disable button and show spinner
|
||||
loginBtn.disabled = true;
|
||||
spinner.style.display = 'inline-block';
|
||||
|
||||
try {
|
||||
const response = await fetch(BASE_URL + '/api/login', {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/json'
|
||||
},
|
||||
body: JSON.stringify({ username, password })
|
||||
});
|
||||
|
||||
const data = await response.json();
|
||||
|
||||
if (data.status === 'success') {
|
||||
// Check if user needs to select a location
|
||||
if (data.requiresLocationSelection) {
|
||||
// Redirect to location selection page
|
||||
window.location.href = '/select-location';
|
||||
} else {
|
||||
// Redirect to main app
|
||||
window.location.href = '/';
|
||||
}
|
||||
} else {
|
||||
showAlert(data.message || 'Invalid username or password');
|
||||
loginBtn.disabled = false;
|
||||
spinner.style.display = 'none';
|
||||
}
|
||||
} catch (error) {
|
||||
showAlert('Error connecting to server. Please try again.');
|
||||
loginBtn.disabled = false;
|
||||
spinner.style.display = 'none';
|
||||
}
|
||||
});
|
||||
|
||||
function showAlert(message) {
|
||||
const alert = document.getElementById('errorAlert');
|
||||
alert.textContent = message;
|
||||
alert.classList.add('show');
|
||||
|
||||
setTimeout(() => {
|
||||
alert.classList.remove('show');
|
||||
}, 5000);
|
||||
}
|
||||
|
||||
// Check if there's a message in URL (e.g., after logout)
|
||||
const urlParams = new URLSearchParams(window.location.search);
|
||||
const message = urlParams.get('message');
|
||||
if (message) {
|
||||
showAlert(message);
|
||||
}
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,359 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Select Location - CGW Product Finder</title>
|
||||
<style>
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
|
||||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||||
min-height: 100vh;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.location-container {
|
||||
background: white;
|
||||
padding: 40px;
|
||||
border-radius: 10px;
|
||||
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.3);
|
||||
width: 100%;
|
||||
max-width: 500px;
|
||||
}
|
||||
|
||||
.location-header {
|
||||
text-align: center;
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
|
||||
.location-header h1 {
|
||||
color: #333;
|
||||
margin-bottom: 10px;
|
||||
font-size: 28px;
|
||||
}
|
||||
|
||||
.location-header p {
|
||||
color: #666;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.user-info {
|
||||
background: #f7fafc;
|
||||
padding: 15px;
|
||||
border-radius: 5px;
|
||||
margin-bottom: 25px;
|
||||
border-left: 4px solid #667eea;
|
||||
}
|
||||
|
||||
.user-info p {
|
||||
color: #333;
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
|
||||
.user-info strong {
|
||||
color: #667eea;
|
||||
}
|
||||
|
||||
.location-list {
|
||||
margin-bottom: 25px;
|
||||
}
|
||||
|
||||
.location-item {
|
||||
background: #f7fafc;
|
||||
padding: 15px 20px;
|
||||
border-radius: 5px;
|
||||
margin-bottom: 10px;
|
||||
cursor: pointer;
|
||||
transition: all 0.3s;
|
||||
border: 2px solid transparent;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.location-item:hover {
|
||||
background: #e6f2ff;
|
||||
border-color: #667eea;
|
||||
transform: translateX(5px);
|
||||
}
|
||||
|
||||
.location-item input[type="radio"] {
|
||||
margin-right: 15px;
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.location-item label {
|
||||
cursor: pointer;
|
||||
flex: 1;
|
||||
font-size: 16px;
|
||||
color: #333;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.location-badge {
|
||||
background: #667eea;
|
||||
color: white;
|
||||
padding: 4px 12px;
|
||||
border-radius: 12px;
|
||||
font-size: 12px;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.btn {
|
||||
width: 100%;
|
||||
padding: 14px;
|
||||
border: none;
|
||||
border-radius: 5px;
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
cursor: pointer;
|
||||
transition: all 0.3s;
|
||||
background: #667eea;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.btn:hover {
|
||||
background: #5568d3;
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 5px 15px rgba(102, 126, 234, 0.4);
|
||||
}
|
||||
|
||||
.btn:disabled {
|
||||
background: #cbd5e0;
|
||||
cursor: not-allowed;
|
||||
transform: none;
|
||||
}
|
||||
|
||||
.btn-logout {
|
||||
background: #f56565;
|
||||
margin-top: 15px;
|
||||
}
|
||||
|
||||
.btn-logout:hover {
|
||||
background: #e53e3e;
|
||||
box-shadow: 0 5px 15px rgba(245, 101, 101, 0.4);
|
||||
}
|
||||
|
||||
.btn-admin {
|
||||
background: #48bb78;
|
||||
margin-top: 15px;
|
||||
}
|
||||
|
||||
.btn-admin:hover {
|
||||
background: #38a169;
|
||||
box-shadow: 0 5px 15px rgba(72, 187, 120, 0.4);
|
||||
}
|
||||
|
||||
.btn-admin.hidden {
|
||||
display: none;
|
||||
}
|
||||
|
||||
.alert {
|
||||
padding: 12px;
|
||||
border-radius: 5px;
|
||||
margin-bottom: 20px;
|
||||
display: none;
|
||||
}
|
||||
|
||||
.alert.show {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.alert-error {
|
||||
background: #fed7d7;
|
||||
color: #742a2a;
|
||||
border-left: 4px solid #f56565;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="location-container">
|
||||
<div class="location-header">
|
||||
<h1>📍 Select Your Location</h1>
|
||||
<p>Choose a location to access the Product Finder</p>
|
||||
</div>
|
||||
|
||||
<div class="user-info" id="userInfo">
|
||||
<p><strong>Welcome:</strong> <span id="userName"></span></p>
|
||||
<p><strong>Default Location:</strong> <span id="defaultLocation"></span></p>
|
||||
</div>
|
||||
|
||||
<div class="alert alert-error" id="errorAlert"></div>
|
||||
|
||||
<form id="locationForm">
|
||||
<div class="location-list" id="locationList">
|
||||
<!-- Locations will be populated here -->
|
||||
</div>
|
||||
|
||||
<button type="submit" class="btn" id="continueBtn">
|
||||
Continue to Product Finder
|
||||
</button>
|
||||
</form>
|
||||
|
||||
<button class="btn btn-admin hidden" id="userManagementBtn" onclick="goToUserManagement()">
|
||||
⚙️ User Management
|
||||
</button>
|
||||
|
||||
<button class="btn btn-logout" onclick="logout()">
|
||||
Sign Out
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
// Base URL for API calls (supports subdirectory deployments)
|
||||
const BASE_URL = '{{ base_url }}';
|
||||
|
||||
const LOCATION_NAMES = {
|
||||
'LINDS': 'Lindsborg',
|
||||
'IOLA': 'Iola',
|
||||
'KC': 'KC',
|
||||
'BMD': 'BMD'
|
||||
};
|
||||
|
||||
let sessionData = null;
|
||||
|
||||
async function loadLocationData() {
|
||||
try {
|
||||
const response = await fetch(BASE_URL + '/api/session');
|
||||
const data = await response.json();
|
||||
|
||||
if (data.status === 'success') {
|
||||
sessionData = data;
|
||||
|
||||
// Populate user info
|
||||
document.getElementById('userName').textContent = data.username;
|
||||
document.getElementById('defaultLocation').textContent =
|
||||
LOCATION_NAMES[data.defaultLocation] || data.defaultLocation;
|
||||
|
||||
// Populate location list
|
||||
const locationList = document.getElementById('locationList');
|
||||
const locations = data.accessibleLocations || [];
|
||||
|
||||
if (locations.length === 0) {
|
||||
showAlert('No accessible locations found. Please contact an administrator.');
|
||||
document.getElementById('continueBtn').disabled = true;
|
||||
return;
|
||||
}
|
||||
|
||||
locationList.innerHTML = locations.map((code, index) => {
|
||||
const isDefault = code === data.defaultLocation;
|
||||
const checked = isDefault ? 'checked' : '';
|
||||
|
||||
return `
|
||||
<div class="location-item" onclick="selectLocation('${code}')">
|
||||
<input type="radio" name="location" value="${code}"
|
||||
id="loc_${code}" ${checked}>
|
||||
<label for="loc_${code}">
|
||||
${LOCATION_NAMES[code] || code}
|
||||
</label>
|
||||
${isDefault ? '<span class="location-badge">Default</span>' : ''}
|
||||
</div>
|
||||
`;
|
||||
}).join('');
|
||||
} else {
|
||||
// Not logged in or session expired
|
||||
window.location.href = BASE_URL + '/login?message=' + encodeURIComponent('Please log in first');
|
||||
}
|
||||
|
||||
// Check if user has manage_users permission
|
||||
await checkUserManagementPermission();
|
||||
} catch (error) {
|
||||
showAlert('Error loading location data. Please try again.');
|
||||
}
|
||||
}
|
||||
|
||||
async function checkUserManagementPermission() {
|
||||
try {
|
||||
const response = await fetch(BASE_URL + '/api/check-permission', {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/json'
|
||||
},
|
||||
body: JSON.stringify({ permission: 'manage_users' })
|
||||
});
|
||||
|
||||
const data = await response.json();
|
||||
|
||||
if (data.status === 'success' && data.hasPermission) {
|
||||
document.getElementById('userManagementBtn').classList.remove('hidden');
|
||||
}
|
||||
} catch (error) {
|
||||
// Permission check failed, keep button hidden
|
||||
console.error('Error checking permission:', error);
|
||||
}
|
||||
}
|
||||
|
||||
function goToUserManagement() {
|
||||
window.location.href = BASE_URL + '/users';
|
||||
}
|
||||
|
||||
function selectLocation(code) {
|
||||
document.getElementById(`loc_${code}`).checked = true;
|
||||
}
|
||||
|
||||
document.getElementById('locationForm').addEventListener('submit', async (e) => {
|
||||
e.preventDefault();
|
||||
|
||||
const selectedLocation = document.querySelector('input[name="location"]:checked')?.value;
|
||||
|
||||
if (!selectedLocation) {
|
||||
showAlert('Please select a location');
|
||||
return;
|
||||
}
|
||||
|
||||
try {
|
||||
const response = await fetch(BASE_URL + '/api/select-location', {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/json'
|
||||
},
|
||||
body: JSON.stringify({ location: selectedLocation })
|
||||
});
|
||||
|
||||
const data = await response.json();
|
||||
|
||||
if (data.status === 'success') {
|
||||
// Redirect to main app
|
||||
window.location.href = BASE_URL + '/';
|
||||
} else {
|
||||
showAlert(data.message || 'Error selecting location');
|
||||
}
|
||||
} catch (error) {
|
||||
showAlert('Error connecting to server. Please try again.');
|
||||
}
|
||||
});
|
||||
|
||||
async function logout() {
|
||||
try {
|
||||
await fetch(BASE_URL + '/api/logout', { method: 'POST' });
|
||||
window.location.href = BASE_URL + '/login?message=' + encodeURIComponent('Successfully logged out');
|
||||
} catch (error) {
|
||||
window.location.href = BASE_URL + '/login';
|
||||
}
|
||||
}
|
||||
|
||||
function showAlert(message) {
|
||||
const alert = document.getElementById('errorAlert');
|
||||
alert.textContent = message;
|
||||
alert.classList.add('show');
|
||||
|
||||
setTimeout(() => {
|
||||
alert.classList.remove('show');
|
||||
}, 5000);
|
||||
}
|
||||
|
||||
// Load location data on page load
|
||||
loadLocationData();
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
@@ -0,0 +1,976 @@
|
||||
<!DOCTYPE html>
|
||||
<html lang="en">
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>User Manager - CGW Product Finder</title>
|
||||
<style>
|
||||
* {
|
||||
margin: 0;
|
||||
padding: 0;
|
||||
box-sizing: border-box;
|
||||
}
|
||||
|
||||
body {
|
||||
font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
|
||||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||||
min-height: 100vh;
|
||||
padding: 20px;
|
||||
}
|
||||
|
||||
.container {
|
||||
max-width: 900px;
|
||||
margin: 0 auto;
|
||||
}
|
||||
|
||||
.header {
|
||||
background: white;
|
||||
padding: 30px;
|
||||
border-radius: 10px;
|
||||
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
|
||||
margin-bottom: 30px;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.header h1 {
|
||||
color: #333;
|
||||
margin-bottom: 10px;
|
||||
}
|
||||
|
||||
.header p {
|
||||
color: #666;
|
||||
}
|
||||
|
||||
.card {
|
||||
background: white;
|
||||
padding: 30px;
|
||||
border-radius: 10px;
|
||||
box-shadow: 0 10px 30px rgba(0, 0, 0, 0.2);
|
||||
margin-bottom: 30px;
|
||||
}
|
||||
|
||||
.card h2 {
|
||||
color: #333;
|
||||
margin-bottom: 20px;
|
||||
border-bottom: 2px solid #667eea;
|
||||
padding-bottom: 10px;
|
||||
}
|
||||
|
||||
.form-group {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.form-group label {
|
||||
display: block;
|
||||
margin-bottom: 8px;
|
||||
color: #333;
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.form-group input,
|
||||
.form-group select {
|
||||
width: 100%;
|
||||
padding: 12px;
|
||||
border: 2px solid #e0e0e0;
|
||||
border-radius: 5px;
|
||||
font-size: 16px;
|
||||
transition: border-color 0.3s;
|
||||
}
|
||||
|
||||
.form-group input:focus,
|
||||
.form-group select:focus {
|
||||
outline: none;
|
||||
border-color: #667eea;
|
||||
}
|
||||
|
||||
.location-table {
|
||||
width: 100%;
|
||||
border-collapse: collapse;
|
||||
margin-top: 10px;
|
||||
}
|
||||
|
||||
.location-table th {
|
||||
background: #667eea;
|
||||
color: white;
|
||||
padding: 12px;
|
||||
text-align: left;
|
||||
font-weight: 600;
|
||||
border: 1px solid #5568d3;
|
||||
}
|
||||
|
||||
.location-table th.checkbox-header {
|
||||
text-align: center;
|
||||
width: 100px;
|
||||
cursor: pointer;
|
||||
user-select: none;
|
||||
}
|
||||
|
||||
.location-table th.checkbox-header:hover {
|
||||
background: #5568d3;
|
||||
}
|
||||
|
||||
.location-table td {
|
||||
padding: 12px;
|
||||
border: 1px solid #e0e0e0;
|
||||
background: white;
|
||||
}
|
||||
|
||||
.location-table td.checkbox-cell {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.location-table tr:hover td {
|
||||
background: #f7fafc;
|
||||
}
|
||||
|
||||
.location-table input[type="checkbox"],
|
||||
.location-table input[type="radio"] {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.location-table label {
|
||||
cursor: pointer;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.location-name {
|
||||
font-weight: 500;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.tooltip-header {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
cursor: help;
|
||||
}
|
||||
|
||||
.tooltip-header .tooltip-text {
|
||||
visibility: hidden;
|
||||
width: 200px;
|
||||
background-color: #333;
|
||||
color: #fff;
|
||||
text-align: center;
|
||||
border-radius: 6px;
|
||||
padding: 8px;
|
||||
position: absolute;
|
||||
z-index: 1000;
|
||||
bottom: 125%;
|
||||
left: 50%;
|
||||
margin-left: -100px;
|
||||
opacity: 0;
|
||||
transition: opacity 0.3s;
|
||||
font-size: 13px;
|
||||
font-weight: normal;
|
||||
}
|
||||
|
||||
.tooltip-header .tooltip-text::after {
|
||||
content: "";
|
||||
position: absolute;
|
||||
top: 100%;
|
||||
left: 50%;
|
||||
margin-left: -5px;
|
||||
border-width: 5px;
|
||||
border-style: solid;
|
||||
border-color: #333 transparent transparent transparent;
|
||||
}
|
||||
|
||||
.tooltip-header:hover .tooltip-text {
|
||||
visibility: visible;
|
||||
opacity: 1;
|
||||
}
|
||||
|
||||
.btn {
|
||||
padding: 12px 30px;
|
||||
border: none;
|
||||
border-radius: 5px;
|
||||
font-size: 16px;
|
||||
font-weight: 600;
|
||||
cursor: pointer;
|
||||
transition: all 0.3s;
|
||||
}
|
||||
|
||||
.btn-primary {
|
||||
background: #667eea;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.btn-primary:hover {
|
||||
background: #5568d3;
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 5px 15px rgba(102, 126, 234, 0.4);
|
||||
}
|
||||
|
||||
.btn-success {
|
||||
background: #48bb78;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.btn-success:hover {
|
||||
background: #38a169;
|
||||
transform: translateY(-2px);
|
||||
box-shadow: 0 5px 15px rgba(72, 187, 120, 0.4);
|
||||
}
|
||||
|
||||
.btn-danger {
|
||||
background: #f56565;
|
||||
color: white;
|
||||
margin-left: 10px;
|
||||
}
|
||||
|
||||
.btn-danger:hover {
|
||||
background: #e53e3e;
|
||||
}
|
||||
|
||||
.btn-warning {
|
||||
background: #ed8936;
|
||||
color: white;
|
||||
}
|
||||
|
||||
.btn-warning:hover {
|
||||
background: #dd6b20;
|
||||
}
|
||||
|
||||
.user-list {
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
||||
.user-item {
|
||||
background: #f7fafc;
|
||||
padding: 15px;
|
||||
border-radius: 5px;
|
||||
margin-bottom: 10px;
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
border-left: 4px solid #667eea;
|
||||
}
|
||||
|
||||
.user-item.inactive {
|
||||
opacity: 0.6;
|
||||
border-left-color: #cbd5e0;
|
||||
}
|
||||
|
||||
.user-actions {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 15px;
|
||||
}
|
||||
|
||||
.active-toggle {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 8px;
|
||||
font-size: 14px;
|
||||
color: #666;
|
||||
}
|
||||
|
||||
.active-toggle input[type="checkbox"] {
|
||||
width: 20px;
|
||||
height: 20px;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.active-label {
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.active-label.active {
|
||||
color: #48bb78;
|
||||
}
|
||||
|
||||
.active-label.inactive {
|
||||
color: #f56565;
|
||||
}
|
||||
|
||||
.user-info {
|
||||
flex: 1;
|
||||
}
|
||||
|
||||
.user-info strong {
|
||||
color: #333;
|
||||
display: block;
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
|
||||
.user-info span {
|
||||
color: #666;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.alert {
|
||||
padding: 15px;
|
||||
border-radius: 5px;
|
||||
margin-bottom: 20px;
|
||||
display: none;
|
||||
}
|
||||
|
||||
.alert.show {
|
||||
display: block;
|
||||
}
|
||||
|
||||
.alert-success {
|
||||
background: #c6f6d5;
|
||||
color: #22543d;
|
||||
border-left: 4px solid #48bb78;
|
||||
}
|
||||
|
||||
.alert-error {
|
||||
background: #fed7d7;
|
||||
color: #742a2a;
|
||||
border-left: 4px solid #f56565;
|
||||
}
|
||||
|
||||
.button-group {
|
||||
display: flex;
|
||||
gap: 10px;
|
||||
margin-top: 20px;
|
||||
}
|
||||
|
||||
.stats {
|
||||
display: flex;
|
||||
justify-content: space-around;
|
||||
margin-top: 20px;
|
||||
padding-top: 20px;
|
||||
border-top: 2px solid #e0e0e0;
|
||||
}
|
||||
|
||||
.stat-item {
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.stat-number {
|
||||
font-size: 32px;
|
||||
font-weight: bold;
|
||||
color: #667eea;
|
||||
}
|
||||
|
||||
.stat-label {
|
||||
color: #666;
|
||||
font-size: 14px;
|
||||
}
|
||||
|
||||
.back-link {
|
||||
display: inline-block;
|
||||
margin-top: 20px;
|
||||
color: white;
|
||||
text-decoration: none;
|
||||
padding: 10px 20px;
|
||||
background: rgba(255, 255, 255, 0.2);
|
||||
border-radius: 5px;
|
||||
transition: background 0.3s;
|
||||
}
|
||||
|
||||
.back-link:hover {
|
||||
background: rgba(255, 255, 255, 0.3);
|
||||
}
|
||||
|
||||
/* Modal Styles */
|
||||
.modal {
|
||||
display: none;
|
||||
position: fixed;
|
||||
z-index: 1000;
|
||||
left: 0;
|
||||
top: 0;
|
||||
width: 100%;
|
||||
height: 100%;
|
||||
background: rgba(0, 0, 0, 0.6);
|
||||
justify-content: center;
|
||||
align-items: center;
|
||||
}
|
||||
|
||||
.modal.show {
|
||||
display: flex;
|
||||
}
|
||||
|
||||
.modal-content {
|
||||
background: white;
|
||||
padding: 30px;
|
||||
border-radius: 10px;
|
||||
box-shadow: 0 10px 40px rgba(0, 0, 0, 0.3);
|
||||
width: 90%;
|
||||
max-width: 500px;
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.modal-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 20px;
|
||||
padding-bottom: 15px;
|
||||
border-bottom: 2px solid #e0e0e0;
|
||||
}
|
||||
|
||||
.modal-header h2 {
|
||||
margin: 0;
|
||||
color: #333;
|
||||
}
|
||||
|
||||
.close-btn {
|
||||
background: none;
|
||||
border: none;
|
||||
font-size: 28px;
|
||||
color: #999;
|
||||
cursor: pointer;
|
||||
padding: 0;
|
||||
width: 30px;
|
||||
height: 30px;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.close-btn:hover {
|
||||
color: #f56565;
|
||||
}
|
||||
|
||||
.modal-body {
|
||||
margin-bottom: 20px;
|
||||
}
|
||||
|
||||
.security-note {
|
||||
background: #fef5e7;
|
||||
border-left: 4px solid #ed8936;
|
||||
padding: 12px;
|
||||
margin-bottom: 20px;
|
||||
border-radius: 4px;
|
||||
font-size: 14px;
|
||||
color: #744210;
|
||||
}
|
||||
|
||||
.security-note strong {
|
||||
display: block;
|
||||
margin-bottom: 5px;
|
||||
}
|
||||
</style>
|
||||
</head>
|
||||
<body>
|
||||
<div class="container">
|
||||
<div class="header">
|
||||
<h1>🔐 User Manager</h1>
|
||||
<p>Create and manage user accounts with secure password encoding</p>
|
||||
</div>
|
||||
|
||||
<div class="alert alert-success" id="successAlert"></div>
|
||||
<div class="alert alert-error" id="errorAlert"></div>
|
||||
|
||||
<div class="card">
|
||||
<h2>Add New User</h2>
|
||||
<form id="userForm">
|
||||
<div class="form-group">
|
||||
<label for="username">Username *</label>
|
||||
<input type="text" id="username" name="username" required
|
||||
placeholder="Enter username (e.g., john_doe)">
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label for="password">Password *</label>
|
||||
<input type="password" id="password" name="password" required
|
||||
placeholder="Enter a secure password" minlength="6">
|
||||
</div>
|
||||
|
||||
<div class="form-group">
|
||||
<label>Location Configuration</label>
|
||||
<table class="location-table">
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Default Location *</th>
|
||||
<th class="checkbox-header">
|
||||
<label class="tooltip-header" style="display: flex; align-items: center; justify-content: center; cursor: pointer; margin: 0;">
|
||||
<input type="checkbox" id="headerAccessible" onchange="toggleAllCheckboxes('accessible')" style="margin: 0;">
|
||||
<span class="tooltip-text">Can access location</span>
|
||||
</label>
|
||||
</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
<tr>
|
||||
<td>
|
||||
<label>
|
||||
<input type="radio" name="defaultLocation" value="LINDS" required style="margin-right: 8px;">
|
||||
<span class="location-name">Lindsborg</span>
|
||||
</label>
|
||||
</td>
|
||||
<td class="checkbox-cell">
|
||||
<input type="checkbox" class="accessible-checkbox" data-location="LINDS" onchange="updateHeaderCheckbox('accessible')">
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<label>
|
||||
<input type="radio" name="defaultLocation" value="IOLA" required style="margin-right: 8px;">
|
||||
<span class="location-name">Iola</span>
|
||||
</label>
|
||||
</td>
|
||||
<td class="checkbox-cell">
|
||||
<input type="checkbox" class="accessible-checkbox" data-location="IOLA" onchange="updateHeaderCheckbox('accessible')">
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<label>
|
||||
<input type="radio" name="defaultLocation" value="KC" required style="margin-right: 8px;">
|
||||
<span class="location-name">KC</span>
|
||||
</label>
|
||||
</td>
|
||||
<td class="checkbox-cell">
|
||||
<input type="checkbox" class="accessible-checkbox" data-location="KC" onchange="updateHeaderCheckbox('accessible')">
|
||||
</td>
|
||||
</tr>
|
||||
<tr>
|
||||
<td>
|
||||
<label>
|
||||
<input type="radio" name="defaultLocation" value="BMD" required style="margin-right: 8px;">
|
||||
<span class="location-name">BMD</span>
|
||||
</label>
|
||||
</td>
|
||||
<td class="checkbox-cell">
|
||||
<input type="checkbox" class="accessible-checkbox" data-location="BMD" onchange="updateHeaderCheckbox('accessible')">
|
||||
</td>
|
||||
</tr>
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
|
||||
<button type="submit" class="btn btn-primary">Add User</button>
|
||||
</form>
|
||||
|
||||
<div class="stats">
|
||||
<div class="stat-item">
|
||||
<div class="stat-number" id="userCount">0</div>
|
||||
<div class="stat-label">Total Users</div>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div class="card">
|
||||
<h2>User List</h2>
|
||||
<div class="user-list" id="userList">
|
||||
<p style="color: #666; text-align: center;">No users added yet.</p>
|
||||
</div>
|
||||
|
||||
<div class="button-group">
|
||||
<button class="btn btn-success" id="downloadBtn" onclick="downloadUsers()">
|
||||
📥 Download Users JSON
|
||||
</button>
|
||||
<button class="btn btn-danger" id="clearBtn" onclick="clearAllUsers()">
|
||||
🗑️ Clear All Users
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<a href="{{ url_for('index') }}" class="back-link">← Back to Product Finder</a>
|
||||
</div>
|
||||
|
||||
<!-- Change Password Modal -->
|
||||
<div id="changePasswordModal" class="modal">
|
||||
<div class="modal-content">
|
||||
<div class="modal-header">
|
||||
<h2>🔑 Change Password</h2>
|
||||
<button class="close-btn" onclick="closePasswordModal()">×</button>
|
||||
</div>
|
||||
<div class="modal-body">
|
||||
<div class="security-note">
|
||||
<strong>🔒 Security Verification Required</strong>
|
||||
You must enter your current password to change another user's password.
|
||||
</div>
|
||||
<form id="changePasswordForm">
|
||||
<div class="form-group">
|
||||
<label>User to Update</label>
|
||||
<input type="text" id="targetUsername" readonly style="background: #f0f0f0;">
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="newPassword">New Password for User *</label>
|
||||
<input type="password" id="newPassword" required
|
||||
placeholder="Enter new password for this user">
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="confirmPassword">Confirm New Password *</label>
|
||||
<input type="password" id="confirmPassword" required
|
||||
placeholder="Re-enter new password">
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="currentUserPassword">Your Password (Current User) *</label>
|
||||
<input type="password" id="currentUserPassword" required
|
||||
placeholder="Enter YOUR password to verify">
|
||||
</div>
|
||||
<div class="button-group">
|
||||
<button type="submit" class="btn btn-primary">
|
||||
Change Password
|
||||
</button>
|
||||
<button type="button" class="btn btn-danger" onclick="closePasswordModal()">
|
||||
Cancel
|
||||
</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<script>
|
||||
// Base URL for API calls (supports subdirectory deployments)
|
||||
const BASE_URL = '{{ base_url }}';
|
||||
|
||||
let users = [];
|
||||
|
||||
const LOCATIONS = [
|
||||
{ name: 'Lindsborg', code: 'LINDS' },
|
||||
{ name: 'Iola', code: 'IOLA' },
|
||||
{ name: 'KC', code: 'KC' },
|
||||
{ name: 'BMD', code: 'BMD' }
|
||||
];
|
||||
|
||||
// Toggle all checkboxes in a column
|
||||
function toggleAllCheckboxes(type) {
|
||||
const headerCheckbox = document.getElementById(`header${type.charAt(0).toUpperCase() + type.slice(1)}`);
|
||||
const checkboxes = document.querySelectorAll(`.${type}-checkbox`);
|
||||
|
||||
// Get the state AFTER the checkbox was clicked (it's already toggled by the browser)
|
||||
const newState = headerCheckbox.checked;
|
||||
|
||||
// Apply this state to all row checkboxes
|
||||
checkboxes.forEach(cb => cb.checked = newState);
|
||||
|
||||
// Clear indeterminate state since we're setting all to the same value
|
||||
headerCheckbox.indeterminate = false;
|
||||
}
|
||||
|
||||
// Update header checkbox state based on individual checkboxes
|
||||
function updateHeaderCheckbox(type) {
|
||||
const headerCheckbox = document.getElementById(`header${type.charAt(0).toUpperCase() + type.slice(1)}`);
|
||||
const checkboxes = document.querySelectorAll(`.${type}-checkbox`);
|
||||
const checkedCount = Array.from(checkboxes).filter(cb => cb.checked).length;
|
||||
|
||||
if (checkedCount === 0) {
|
||||
headerCheckbox.checked = false;
|
||||
headerCheckbox.indeterminate = false;
|
||||
} else if (checkedCount === checkboxes.length) {
|
||||
headerCheckbox.checked = true;
|
||||
headerCheckbox.indeterminate = false;
|
||||
} else {
|
||||
headerCheckbox.checked = false;
|
||||
headerCheckbox.indeterminate = true;
|
||||
}
|
||||
}
|
||||
|
||||
// Load existing users on page load
|
||||
async function loadUsers() {
|
||||
try {
|
||||
const response = await fetch(BASE_URL + '/api/users');
|
||||
const data = await response.json();
|
||||
if (data.status === 'success') {
|
||||
users = data.users || [];
|
||||
renderUsers();
|
||||
}
|
||||
} catch (error) {
|
||||
console.error('Error loading users:', error);
|
||||
}
|
||||
}
|
||||
|
||||
// Render users in the list
|
||||
function renderUsers() {
|
||||
const userList = document.getElementById('userList');
|
||||
const userCount = document.getElementById('userCount');
|
||||
|
||||
userCount.textContent = users.length;
|
||||
|
||||
if (users.length === 0) {
|
||||
userList.innerHTML = '<p style="color: #666; text-align: center;">No users added yet.</p>';
|
||||
return;
|
||||
}
|
||||
|
||||
userList.innerHTML = users.map((user, index) => {
|
||||
// Build location info string
|
||||
let locationInfo = '';
|
||||
|
||||
if (user.locationSettings) {
|
||||
const defaultLoc = LOCATIONS.find(l => l.code === user.defaultLocation);
|
||||
const defaultName = defaultLoc ? defaultLoc.name : user.defaultLocation;
|
||||
|
||||
const accessible = Object.entries(user.locationSettings)
|
||||
.filter(([code, settings]) => settings.accessible)
|
||||
.map(([code]) => LOCATIONS.find(l => l.code === code)?.name || code);
|
||||
|
||||
locationInfo = `Default: ${defaultName}`;
|
||||
if (accessible.length > 0) locationInfo += ` | Access: ${accessible.join(', ')}`;
|
||||
} else if (user.mainLocation) {
|
||||
// Backwards compatibility
|
||||
const mainLoc = LOCATIONS.find(l => l.code === user.mainLocation);
|
||||
locationInfo = `Main: ${mainLoc ? mainLoc.name : user.mainLocation}`;
|
||||
if (user.alternateLocations && user.alternateLocations.length > 0) {
|
||||
const altNames = user.alternateLocations.map(code =>
|
||||
LOCATIONS.find(l => l.code === code)?.name || code
|
||||
);
|
||||
locationInfo += ` | Alt: ${altNames.join(', ')}`;
|
||||
}
|
||||
} else if (user.location) {
|
||||
// Old format
|
||||
locationInfo = user.location;
|
||||
}
|
||||
|
||||
const isActive = user.active !== false; // Default to active if not specified
|
||||
const activeClass = isActive ? '' : ' inactive';
|
||||
const activeStatus = isActive ? 'active' : 'inactive';
|
||||
const activeLabel = isActive ? 'Active' : 'Inactive';
|
||||
|
||||
return `
|
||||
<div class="user-item${activeClass}">
|
||||
<div class="user-info">
|
||||
<strong>👤 ${user.username}</strong>
|
||||
<span>📍 ${locationInfo}</span>
|
||||
</div>
|
||||
<div class="user-actions">
|
||||
<div class="active-toggle">
|
||||
<input type="checkbox" ${isActive ? 'checked' : ''}
|
||||
onchange="toggleUserActive(${index})"
|
||||
id="userActive${index}">
|
||||
<label for="userActive${index}" class="active-label ${activeStatus}">${activeLabel}</label>
|
||||
</div>
|
||||
<button class="btn btn-warning" onclick="openPasswordModal(${index})" style="margin: 0 5px; padding: 8px 16px;">
|
||||
Change Password
|
||||
</button>
|
||||
<button class="btn btn-danger" onclick="deleteUser(${index})" style="margin: 0; padding: 8px 16px;">
|
||||
Delete
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
`;
|
||||
}).join('');
|
||||
}
|
||||
|
||||
// Handle form submission
|
||||
document.getElementById('userForm').addEventListener('submit', async (e) => {
|
||||
e.preventDefault();
|
||||
|
||||
// Get default location (radio button)
|
||||
const defaultLocation = document.querySelector('input[name="defaultLocation"]:checked')?.value;
|
||||
|
||||
// Get location settings
|
||||
const locationSettings = {};
|
||||
LOCATIONS.forEach(loc => {
|
||||
const accessibleCheckbox = document.querySelector(`.accessible-checkbox[data-location="${loc.code}"]`);
|
||||
|
||||
locationSettings[loc.code] = {
|
||||
accessible: accessibleCheckbox ? accessibleCheckbox.checked : false
|
||||
};
|
||||
});
|
||||
|
||||
const formData = {
|
||||
username: document.getElementById('username').value,
|
||||
password: document.getElementById('password').value,
|
||||
defaultLocation: defaultLocation,
|
||||
locationSettings: locationSettings,
|
||||
active: true // New users are active by default
|
||||
};
|
||||
|
||||
try {
|
||||
const response = await fetch(BASE_URL + '/api/users', {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/json'
|
||||
},
|
||||
body: JSON.stringify(formData)
|
||||
});
|
||||
|
||||
const data = await response.json();
|
||||
|
||||
if (data.status === 'success') {
|
||||
showAlert('success', `User "${formData.username}" added successfully!`);
|
||||
users = data.users;
|
||||
renderUsers();
|
||||
document.getElementById('userForm').reset();
|
||||
// Reset header checkboxes
|
||||
document.getElementById('headerAccessible').checked = false;
|
||||
document.getElementById('headerAccessible').indeterminate = false;
|
||||
} else {
|
||||
showAlert('error', data.message || 'Error adding user');
|
||||
}
|
||||
} catch (error) {
|
||||
showAlert('error', 'Error connecting to server: ' + error.message);
|
||||
}
|
||||
});
|
||||
|
||||
// Toggle user active status
|
||||
async function toggleUserActive(index) {
|
||||
try {
|
||||
const isActive = document.getElementById(`userActive${index}`).checked;
|
||||
|
||||
const response = await fetch(BASE_URL + `/api/users/${index}/active`, {
|
||||
method: 'PATCH',
|
||||
headers: {
|
||||
'Content-Type': 'application/json'
|
||||
},
|
||||
body: JSON.stringify({ active: isActive })
|
||||
});
|
||||
|
||||
const data = await response.json();
|
||||
|
||||
if (data.status === 'success') {
|
||||
users = data.users;
|
||||
renderUsers();
|
||||
} else {
|
||||
showAlert('error', data.message || 'Error updating user status');
|
||||
// Revert checkbox on error
|
||||
document.getElementById(`userActive${index}`).checked = !isActive;
|
||||
}
|
||||
} catch (error) {
|
||||
showAlert('error', 'Error connecting to server: ' + error.message);
|
||||
// Revert checkbox on error
|
||||
const checkbox = document.getElementById(`userActive${index}`);
|
||||
checkbox.checked = !checkbox.checked;
|
||||
}
|
||||
}
|
||||
|
||||
// Delete a specific user
|
||||
async function deleteUser(index) {
|
||||
if (!confirm('Are you sure you want to delete this user?')) {
|
||||
return;
|
||||
}
|
||||
|
||||
try {
|
||||
const response = await fetch(BASE_URL + `/api/users/${index}`, {
|
||||
method: 'DELETE'
|
||||
});
|
||||
|
||||
const data = await response.json();
|
||||
|
||||
if (data.status === 'success') {
|
||||
showAlert('success', 'User deleted successfully!');
|
||||
users = data.users;
|
||||
renderUsers();
|
||||
} else {
|
||||
showAlert('error', data.message || 'Error deleting user');
|
||||
}
|
||||
} catch (error) {
|
||||
showAlert('error', 'Error connecting to server: ' + error.message);
|
||||
}
|
||||
}
|
||||
|
||||
// Clear all users
|
||||
async function clearAllUsers() {
|
||||
if (!confirm('Are you sure you want to delete ALL users? This cannot be undone!')) {
|
||||
return;
|
||||
}
|
||||
|
||||
try {
|
||||
const response = await fetch(BASE_URL + '/api/users/clear', {
|
||||
method: 'DELETE'
|
||||
});
|
||||
|
||||
const data = await response.json();
|
||||
|
||||
if (data.status === 'success') {
|
||||
showAlert('success', 'All users cleared successfully!');
|
||||
users = [];
|
||||
renderUsers();
|
||||
} else {
|
||||
showAlert('error', data.message || 'Error clearing users');
|
||||
}
|
||||
} catch (error) {
|
||||
showAlert('error', 'Error connecting to server: ' + error.message);
|
||||
}
|
||||
}
|
||||
|
||||
// Download users as JSON
|
||||
function downloadUsers() {
|
||||
if (users.length === 0) {
|
||||
showAlert('error', 'No users to download!');
|
||||
return;
|
||||
}
|
||||
|
||||
window.location.href = BASE_URL + '/api/users/download';
|
||||
showAlert('success', 'Downloading users.json...');
|
||||
}
|
||||
|
||||
// Password change modal functions
|
||||
let targetUserIndex = null;
|
||||
|
||||
function openPasswordModal(userIndex) {
|
||||
targetUserIndex = userIndex;
|
||||
const user = users[userIndex];
|
||||
document.getElementById('targetUsername').value = user.username;
|
||||
document.getElementById('changePasswordModal').classList.add('show');
|
||||
document.getElementById('changePasswordForm').reset();
|
||||
document.getElementById('targetUsername').value = user.username;
|
||||
}
|
||||
|
||||
function closePasswordModal() {
|
||||
document.getElementById('changePasswordModal').classList.remove('show');
|
||||
document.getElementById('changePasswordForm').reset();
|
||||
targetUserIndex = null;
|
||||
}
|
||||
|
||||
// Handle password change form submission
|
||||
document.getElementById('changePasswordForm').addEventListener('submit', async (e) => {
|
||||
e.preventDefault();
|
||||
|
||||
const newPassword = document.getElementById('newPassword').value;
|
||||
const confirmPassword = document.getElementById('confirmPassword').value;
|
||||
const currentUserPassword = document.getElementById('currentUserPassword').value;
|
||||
|
||||
// Validate passwords match
|
||||
if (newPassword !== confirmPassword) {
|
||||
showAlert('error', 'New passwords do not match!');
|
||||
return;
|
||||
}
|
||||
|
||||
// Validate password length
|
||||
if (newPassword.length < 6) {
|
||||
showAlert('error', 'Password must be at least 6 characters long!');
|
||||
return;
|
||||
}
|
||||
|
||||
try {
|
||||
const response = await fetch(BASE_URL + `/api/users/${targetUserIndex}/change-password`, {
|
||||
method: 'POST',
|
||||
headers: {
|
||||
'Content-Type': 'application/json'
|
||||
},
|
||||
body: JSON.stringify({
|
||||
newPassword: newPassword,
|
||||
currentUserPassword: currentUserPassword
|
||||
})
|
||||
});
|
||||
|
||||
const data = await response.json();
|
||||
|
||||
if (data.status === 'success') {
|
||||
showAlert('success', data.message);
|
||||
closePasswordModal();
|
||||
} else {
|
||||
showAlert('error', data.message || 'Error changing password');
|
||||
}
|
||||
} catch (error) {
|
||||
showAlert('error', 'Error connecting to server. Please try again.');
|
||||
}
|
||||
});
|
||||
|
||||
// Close modal when clicking outside of it
|
||||
window.onclick = function(event) {
|
||||
const modal = document.getElementById('changePasswordModal');
|
||||
if (event.target === modal) {
|
||||
closePasswordModal();
|
||||
}
|
||||
};
|
||||
|
||||
// Show alert messages
|
||||
function showAlert(type, message) {
|
||||
const alertId = type === 'success' ? 'successAlert' : 'errorAlert';
|
||||
const alert = document.getElementById(alertId);
|
||||
|
||||
alert.textContent = message;
|
||||
alert.classList.add('show');
|
||||
|
||||
setTimeout(() => {
|
||||
alert.classList.remove('show');
|
||||
}, 5000);
|
||||
}
|
||||
|
||||
// Load users when page loads
|
||||
loadUsers();
|
||||
</script>
|
||||
</body>
|
||||
</html>
|
||||
Reference in New Issue
Block a user