822 lines
29 KiB
HTML
822 lines
29 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>AI Gateway - 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=Outfit:wght@300;400;600;800&display=swap" rel="stylesheet">
|
|
<style>
|
|
:root {
|
|
--primary: #6366f1;
|
|
--primary-hover: #4f46e5;
|
|
--bg: #0f172a;
|
|
--card-bg: #1e293b;
|
|
--text-main: #f8fafc;
|
|
--text-dim: #94a3b8;
|
|
--glass: rgba(30, 41, 59, 0.7);
|
|
--border: rgba(255, 255, 255, 0.1);
|
|
}
|
|
|
|
* {
|
|
margin: 0;
|
|
padding: 0;
|
|
box-sizing: border-box;
|
|
font-family: 'Outfit', sans-serif;
|
|
}
|
|
|
|
body {
|
|
background-color: var(--bg);
|
|
color: var(--text-main);
|
|
min-height: 100vh;
|
|
display: flex;
|
|
flex-direction: column;
|
|
overflow-x: hidden;
|
|
}
|
|
|
|
.bg-gradient {
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
background: radial-gradient(circle at 50% 50%, #1e1b4b 0%, #0f172a 100%);
|
|
z-index: -1;
|
|
}
|
|
|
|
.container {
|
|
max-width: 1200px;
|
|
margin: 0 auto;
|
|
padding: 2rem;
|
|
width: 100%;
|
|
}
|
|
|
|
header {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
margin-bottom: 3rem;
|
|
animation: fadeInDown 0.8s ease-out;
|
|
}
|
|
|
|
.logo {
|
|
font-size: 1.5rem;
|
|
font-weight: 800;
|
|
background: linear-gradient(to right, #818cf8, #c084fc);
|
|
-webkit-background-clip: text;
|
|
background-clip: text;
|
|
-webkit-text-fill-color: transparent;
|
|
}
|
|
|
|
/* Login Section */
|
|
#login-section {
|
|
display: flex;
|
|
justify-content: center;
|
|
align-items: center;
|
|
min-height: 70vh;
|
|
}
|
|
|
|
.login-card {
|
|
background: var(--glass);
|
|
backdrop-filter: blur(12px);
|
|
padding: 3rem;
|
|
border-radius: 24px;
|
|
border: 1px solid var(--border);
|
|
width: 100%;
|
|
max-width: 400px;
|
|
box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
|
|
animation: scaleUp 0.5s ease-out;
|
|
}
|
|
|
|
.login-card h2 {
|
|
margin-bottom: 2rem;
|
|
text-align: center;
|
|
font-weight: 600;
|
|
}
|
|
|
|
.form-group {
|
|
margin-bottom: 1.5rem;
|
|
}
|
|
|
|
label {
|
|
display: block;
|
|
margin-bottom: 0.5rem;
|
|
color: var(--text-dim);
|
|
font-size: 0.875rem;
|
|
}
|
|
|
|
input {
|
|
width: 100%;
|
|
padding: 0.75rem 1rem;
|
|
background: rgba(15, 23, 42, 0.5);
|
|
border: 1px solid var(--border);
|
|
border-radius: 12px;
|
|
color: white;
|
|
transition: all 0.3s ease;
|
|
}
|
|
|
|
input:focus {
|
|
outline: none;
|
|
border-color: var(--primary);
|
|
box-shadow: 0 0 0 4px rgba(99, 102, 241, 0.2);
|
|
}
|
|
|
|
button {
|
|
width: 100%;
|
|
padding: 0.75rem;
|
|
background: var(--primary);
|
|
color: white;
|
|
border: none;
|
|
border-radius: 12px;
|
|
font-weight: 600;
|
|
cursor: pointer;
|
|
transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
|
}
|
|
|
|
button:hover {
|
|
background: var(--primary-hover);
|
|
transform: translateY(-2px);
|
|
box-shadow: 0 10px 20px -5px rgba(99, 102, 241, 0.5);
|
|
}
|
|
|
|
/* Dashboard Section */
|
|
#dashboard-section {
|
|
display: none;
|
|
}
|
|
|
|
.card {
|
|
background: var(--glass);
|
|
backdrop-filter: blur(12px);
|
|
padding: 2rem;
|
|
border-radius: 20px;
|
|
border: 1px solid var(--border);
|
|
margin-bottom: 2rem;
|
|
animation: fadeInUp 0.5s ease-out;
|
|
overflow-x: auto;
|
|
}
|
|
|
|
.flex-header {
|
|
display: flex;
|
|
justify-content: space-between;
|
|
align-items: center;
|
|
margin-bottom: 2rem;
|
|
}
|
|
|
|
/* Table Styles */
|
|
table {
|
|
width: 100%;
|
|
border-collapse: collapse;
|
|
color: var(--text-main);
|
|
}
|
|
|
|
th,
|
|
td {
|
|
padding: 1rem;
|
|
text-align: left;
|
|
border-bottom: 1px solid var(--border);
|
|
}
|
|
|
|
th {
|
|
font-weight: 600;
|
|
color: var(--primary);
|
|
text-transform: uppercase;
|
|
font-size: 0.75rem;
|
|
letter-spacing: 0.05em;
|
|
}
|
|
|
|
tr:last-child td {
|
|
border-bottom: none;
|
|
}
|
|
|
|
tr:hover {
|
|
background-color: rgba(255, 255, 255, 0.02);
|
|
}
|
|
|
|
.key-cell {
|
|
font-family: 'Monaco', 'Consolas', monospace;
|
|
font-size: 0.8rem;
|
|
color: #818cf8;
|
|
white-space: nowrap;
|
|
}
|
|
|
|
.key-text {
|
|
user-select: none;
|
|
display: inline-block;
|
|
}
|
|
|
|
.key-text.visible {
|
|
user-select: text;
|
|
}
|
|
|
|
.token-cell {
|
|
font-family: 'Monaco', 'Consolas', monospace;
|
|
text-align: right;
|
|
}
|
|
|
|
.actions-cell {
|
|
display: flex;
|
|
gap: 0.5rem;
|
|
justify-content: flex-end;
|
|
}
|
|
|
|
.icon-btn {
|
|
background: rgba(255, 255, 255, 0.05);
|
|
border: 1px solid var(--border);
|
|
color: var(--text-dim);
|
|
padding: 6px;
|
|
border-radius: 8px;
|
|
cursor: pointer;
|
|
transition: all 0.2s ease;
|
|
width: 32px;
|
|
height: 32px;
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
}
|
|
|
|
.icon-btn:hover {
|
|
background: rgba(99, 102, 241, 0.1);
|
|
border-color: var(--primary);
|
|
color: var(--primary);
|
|
}
|
|
|
|
.btn-small {
|
|
width: auto;
|
|
padding: 0.5rem 1rem;
|
|
font-size: 0.85rem;
|
|
}
|
|
|
|
.btn-outline {
|
|
background: transparent;
|
|
border: 1px solid var(--primary);
|
|
color: var(--primary);
|
|
}
|
|
|
|
.btn-outline:hover {
|
|
background: var(--primary);
|
|
color: white;
|
|
}
|
|
|
|
.btn-danger {
|
|
background: rgba(239, 68, 68, 0.2);
|
|
border: 1px solid #ef4444;
|
|
color: #ef4444;
|
|
}
|
|
|
|
.btn-danger:hover {
|
|
background: #ef4444;
|
|
color: white;
|
|
}
|
|
|
|
/* Modal Styles */
|
|
.modal {
|
|
position: fixed;
|
|
top: 0;
|
|
left: 0;
|
|
width: 100%;
|
|
height: 100%;
|
|
background: rgba(15, 23, 42, 0.8);
|
|
backdrop-filter: blur(8px);
|
|
display: flex;
|
|
align-items: center;
|
|
justify-content: center;
|
|
z-index: 2000;
|
|
}
|
|
|
|
.modal-content {
|
|
background: var(--card-bg);
|
|
padding: 2.5rem;
|
|
border-radius: 24px;
|
|
border: 1px solid var(--border);
|
|
width: 90%;
|
|
max-width: 500px;
|
|
box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.5);
|
|
}
|
|
|
|
.modal-content h2 {
|
|
margin-bottom: 2rem;
|
|
}
|
|
|
|
.form-grid {
|
|
display: grid;
|
|
grid-template-columns: 1fr 1fr;
|
|
gap: 1rem;
|
|
}
|
|
|
|
.modal-actions {
|
|
display: flex;
|
|
justify-content: flex-end;
|
|
gap: 1rem;
|
|
margin-top: 2rem;
|
|
}
|
|
|
|
.hidden {
|
|
display: none !important;
|
|
}
|
|
|
|
.badge {
|
|
background: rgba(99, 102, 241, 0.15);
|
|
color: #a5b4fc;
|
|
padding: 2px 6px;
|
|
border-radius: 4px;
|
|
font-size: 0.7rem;
|
|
font-weight: 600;
|
|
margin-right: 4px;
|
|
}
|
|
|
|
.toast {
|
|
position: fixed;
|
|
bottom: 2rem;
|
|
right: 2rem;
|
|
padding: 1rem 2rem;
|
|
background: var(--primary);
|
|
border-radius: 12px;
|
|
box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.3);
|
|
transform: translateY(100px);
|
|
transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
|
|
z-index: 3000;
|
|
}
|
|
|
|
.toast.show {
|
|
transform: translateY(0);
|
|
}
|
|
|
|
@keyframes fadeInDown {
|
|
from {
|
|
opacity: 0;
|
|
transform: translateY(-20px);
|
|
}
|
|
|
|
to {
|
|
opacity: 1;
|
|
transform: translateY(0);
|
|
}
|
|
}
|
|
|
|
@keyframes fadeInUp {
|
|
from {
|
|
opacity: 0;
|
|
transform: translateY(20px);
|
|
}
|
|
|
|
to {
|
|
opacity: 1;
|
|
transform: translateY(0);
|
|
}
|
|
}
|
|
|
|
@keyframes scaleUp {
|
|
from {
|
|
opacity: 0;
|
|
transform: scale(0.95);
|
|
}
|
|
|
|
to {
|
|
opacity: 1;
|
|
transform: scale(1);
|
|
}
|
|
}
|
|
</style>
|
|
</head>
|
|
|
|
<body>
|
|
<div class="bg-gradient"></div>
|
|
<div class="container">
|
|
<header>
|
|
<div class="logo">AI Gateway Admin</div>
|
|
<button id="logout-btn" class="btn-small btn-outline hidden">Logout</button>
|
|
</header>
|
|
|
|
<!-- Login Section -->
|
|
<section id="login-section">
|
|
<div class="login-card">
|
|
<h2>Admin Login</h2>
|
|
<div class="form-group">
|
|
<label>Username</label>
|
|
<input type="text" id="username" value="admin">
|
|
</div>
|
|
<div class="form-group">
|
|
<label>Password</label>
|
|
<input type="password" id="password" placeholder="••••••••">
|
|
</div>
|
|
<button id="login-btn">Secure Login</button>
|
|
</div>
|
|
</section>
|
|
|
|
<!-- Dashboard Section -->
|
|
<section id="dashboard-section">
|
|
<div class="card">
|
|
<div class="flex-header">
|
|
<h2>Modules & Token Usage</h2>
|
|
<div style="display:flex; gap:1rem; align-items:center;">
|
|
<label style="display:flex; align-items:center; gap:0.5rem; cursor:pointer; margin-bottom:0;">
|
|
<input type="checkbox" id="show-archived-toggle" style="width:auto; margin:0;">
|
|
<span style="font-size:0.9rem; color:var(--text-dim);">Show Archived</span>
|
|
</label>
|
|
<button id="add-module-btn" class="btn-small">Create New Module</button>
|
|
</div>
|
|
</div>
|
|
|
|
<table id="modules-table">
|
|
<thead>
|
|
<tr>
|
|
<th>Module Name</th>
|
|
<th>API Key</th>
|
|
<th style="text-align: right;">Ingress</th>
|
|
<th style="text-align: right;">Egress</th>
|
|
<th style="text-align: right;">Total</th>
|
|
<th>Meta</th>
|
|
<th style="text-align: right;">Actions</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody id="module-list-body">
|
|
<!-- Rows injected here -->
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</section>
|
|
</div>
|
|
|
|
<div id="create-modal" class="modal hidden">
|
|
<div class="modal-content">
|
|
<h2>Create New Module</h2>
|
|
<div class="form-group">
|
|
<label>Module Name (Unique)</label>
|
|
<input type="text" id="new-module-name" placeholder="e.g. Onboarding 2024">
|
|
</div>
|
|
<div class="form-grid">
|
|
<div class="form-group">
|
|
<label>Program</label>
|
|
<input type="text" id="new-module-program" placeholder="e.g. Sales Training">
|
|
</div>
|
|
<div class="form-group">
|
|
<label>LOB (Line of Business)</label>
|
|
<input type="text" id="new-module-lob" placeholder="e.g. Retail">
|
|
</div>
|
|
</div>
|
|
<div class="form-group">
|
|
<label>Job Code</label>
|
|
<input type="text" id="new-module-job-code" placeholder="e.g. JC-990">
|
|
</div>
|
|
<div class="modal-actions">
|
|
<button id="cancel-create-btn" class="btn-small btn-outline">Cancel</button>
|
|
<button id="save-module-btn" class="btn-small">Create Module</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- View Key Modal -->
|
|
<div id="view-key-modal" class="modal hidden">
|
|
<div class="modal-content">
|
|
<h2>API Key</h2>
|
|
<p style="color: var(--text-dim); margin-bottom: 1rem;">Use this key to authenticate your API requests.</p>
|
|
<div class="form-group">
|
|
<div style="background: rgba(15, 23, 42, 0.5); padding: 1rem; border-radius: 12px; border: 1px solid var(--border); font-family: monospace; word-break: break-all; color: #818cf8; user-select: text;"
|
|
id="modal-key-display">
|
|
<!-- Key injected here -->
|
|
</div>
|
|
</div>
|
|
<div class="modal-actions">
|
|
<button id="close-key-modal-btn" class="btn-small btn-outline">Close</button>
|
|
<button id="copy-modal-key-btn" class="btn-small">Copy Key</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Confirmation Modal -->
|
|
<div id="confirm-modal" class="modal hidden">
|
|
<div class="modal-content" style="max-width: 400px;">
|
|
<h2 id="confirm-title">Confirm Action</h2>
|
|
<p id="confirm-message" style="color: var(--text-dim); margin-bottom: 2rem;">Are you sure?</p>
|
|
<div class="modal-actions">
|
|
<button id="confirm-cancel-btn" class="btn-small btn-outline">Cancel</button>
|
|
<button id="confirm-ok-btn" class="btn-small btn-danger">Confirm</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div id="toast" class="toast">Action successful!</div>
|
|
|
|
<script>
|
|
let TOKEN = localStorage.getItem('admin_token');
|
|
|
|
const loginSection = document.getElementById('login-section');
|
|
const dashboardSection = document.getElementById('dashboard-section');
|
|
const logoutBtn = document.getElementById('logout-btn');
|
|
const moduleListBody = document.getElementById('module-list-body');
|
|
|
|
function showToast(msg) {
|
|
const toast = document.getElementById('toast');
|
|
toast.innerText = msg;
|
|
toast.classList.add('show');
|
|
setTimeout(() => toast.classList.remove('show'), 3000);
|
|
}
|
|
|
|
function formatNumber(num) {
|
|
return new Intl.NumberFormat().format(num);
|
|
}
|
|
|
|
async function apiRequest(endpoint, method = 'GET', body = null) {
|
|
const options = {
|
|
method,
|
|
headers: {
|
|
'Authorization': `Bearer ${TOKEN}`
|
|
}
|
|
};
|
|
if (body) {
|
|
options.headers['Content-Type'] = 'application/json';
|
|
options.body = JSON.stringify(body);
|
|
}
|
|
|
|
const response = await fetch(endpoint, options);
|
|
if (response.status === 401) {
|
|
logout();
|
|
return null;
|
|
}
|
|
if (!response.ok) {
|
|
const err = await response.json().catch(() => ({ detail: response.statusText }));
|
|
console.error("API Error:", err);
|
|
// Only alert if it's not a 401 (already handled)
|
|
alert(`Error ${response.status}: ${err.detail || 'Unknown error'}`);
|
|
return null;
|
|
}
|
|
return response.json();
|
|
}
|
|
|
|
async function login() {
|
|
const username = document.getElementById('username').value;
|
|
const password = document.getElementById('password').value;
|
|
|
|
const formData = new FormData();
|
|
formData.append('username', username);
|
|
formData.append('password', password);
|
|
|
|
try {
|
|
const response = await fetch('/auth/login', {
|
|
method: 'POST',
|
|
body: formData
|
|
});
|
|
const data = await response.json();
|
|
|
|
if (data.access_token) {
|
|
TOKEN = data.access_token;
|
|
localStorage.setItem('admin_token', TOKEN);
|
|
showDashboard();
|
|
} else {
|
|
alert('Invalid credentials');
|
|
}
|
|
} catch (error) {
|
|
console.error('Login failed', error);
|
|
}
|
|
}
|
|
|
|
function logout() {
|
|
localStorage.removeItem('admin_token');
|
|
TOKEN = null;
|
|
loginSection.classList.remove('hidden');
|
|
dashboardSection.style.display = 'none';
|
|
logoutBtn.classList.add('hidden');
|
|
}
|
|
|
|
async function showDashboard() {
|
|
loginSection.classList.add('hidden');
|
|
dashboardSection.style.display = 'block';
|
|
logoutBtn.classList.remove('hidden');
|
|
loadModules();
|
|
}
|
|
|
|
const showArchivedToggle = document.getElementById('show-archived-toggle');
|
|
|
|
showArchivedToggle.onchange = loadModules;
|
|
|
|
async function loadModules() {
|
|
const includeArchived = showArchivedToggle.checked;
|
|
const endpoint = includeArchived ? '/internal/admin/modules?include_archived=true' : '/internal/admin/modules';
|
|
const modules = await apiRequest(endpoint);
|
|
if (!modules) return;
|
|
|
|
moduleListBody.innerHTML = modules.map(m => {
|
|
const isArchived = !m.is_active;
|
|
const rowStyle = isArchived ? 'opacity: 0.6; background: rgba(0,0,0,0.2);' : '';
|
|
|
|
return `
|
|
<tr style="${rowStyle}">
|
|
<td>
|
|
<div style="font-weight: 600;">
|
|
${m.name}
|
|
${isArchived ? '<span class="badge" style="background:rgba(239,68,68,0.2); color:#ef4444; margin-left:8px;">ARCHIVED</span>' : ''}
|
|
</div>
|
|
<div class="text-dim" style="font-size: 0.75rem">Created: ${new Date(m.created_at).toLocaleDateString()}</div>
|
|
</td>
|
|
<td>
|
|
<div class="key-cell">
|
|
<span class="key-text" id="key-${m.id}">••••••••</span>
|
|
<button class="icon-btn" onclick="viewKey('${m.secret_key}')" title="View Key" style="display:inline-flex; width:24px; height:24px; vertical-align:middle; margin-left:8px;">
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M2 12s3-7 10-7 10 7 10 7-3 7-10 7-10-7-10-7Z"></path><circle cx="12" cy="12" r="3"></circle></svg>
|
|
</button>
|
|
<button class="icon-btn" onclick="copyKey('${m.secret_key}')" title="Copy Key" style="display:inline-flex; width:24px; height:24px; vertical-align:middle; margin-left:4px;">
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="12" height="12" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><rect width="14" height="14" x="8" y="8" rx="2" ry="2"></rect><path d="M4 16c-1.1 0-2-.9-2-2V4c0-1.1.9-2 2-2h10c1.1 0 2 .9 2 2"></path></svg>
|
|
</button>
|
|
</div>
|
|
</td>
|
|
<td class="token-cell" title="Ingress Tokens">${formatNumber(m.ingress_tokens)}</td>
|
|
<td class="token-cell" title="Egress Tokens">${formatNumber(m.egress_tokens)}</td>
|
|
<td class="token-cell" style="color: var(--primary); font-weight:bold;" title="Total Tokens">${formatNumber(m.total_tokens)}</td>
|
|
<td>
|
|
<div style="display:flex; flex-wrap:wrap; gap:4px; max-width:200px;">
|
|
${m.program ? `<span class="badge" title="Program">${m.program}</span>` : ''}
|
|
${m.lob ? `<span class="badge" title="Line of Business">${m.lob}</span>` : ''}
|
|
${m.job_code ? `<span class="badge" title="Job Code">${m.job_code}</span>` : ''}
|
|
</div>
|
|
</td>
|
|
<td>
|
|
<div class="actions-cell">
|
|
${!isArchived ? `
|
|
<button class="icon-btn" onclick="rotateKey(${m.id})" title="Rotate Key">
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M21 12a9 9 0 0 0-9-9 9.75 9.75 0 0 0-6.74 2.74L3 8"></path><path d="M3 3v5h5"></path><path d="M3 12a9 9 0 0 0 9 9 9.75 9.75 0 0 0 6.74-2.74L21 16"></path><path d="M16 16h5v5"></path></svg>
|
|
</button>
|
|
<button class="icon-btn btn-danger" onclick="archiveModule(${m.id})" title="Archive Module">
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="3 6 5 6 21 6"></polyline><path d="M19 6v14a2 2 0 0 1-2 2H7a2 2 0 0 1-2-2V6m3 0V4a2 2 0 0 1 2-2h4a2 2 0 0 1 2 2v2"></path><line x1="10" y1="11" x2="10" y2="17"></line><line x1="14" y1="11" x2="14" y2="17"></line></svg>
|
|
</button>
|
|
` : `
|
|
<button class="icon-btn" onclick="restoreModule(${m.id})" title="Restore Module" style="color:#22c55e; border-color: #22c55e; background: rgba(34,197,94,0.1);">
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><polyline points="9 14 15 14 15 8"></polyline><path d="M20 20v-7a4 4 0 0 0-4-4H4"></path><path d="M4 20v-9"></path></svg>
|
|
</button>
|
|
<button class="icon-btn btn-danger" onclick="hardDeleteModule(${m.id})" title="Permanently Delete">
|
|
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2" stroke-linecap="round" stroke-linejoin="round"><path d="M18 6L6 18M6 6l12 12"></path></svg>
|
|
</button>
|
|
`}
|
|
</div>
|
|
</td>
|
|
</tr>
|
|
`;
|
|
}).join('');
|
|
}
|
|
|
|
// Modal Logic
|
|
const createModal = document.getElementById('create-modal');
|
|
const openModalBtn = document.getElementById('add-module-btn');
|
|
const cancelModalBtn = document.getElementById('cancel-create-btn');
|
|
const saveModuleBtn = document.getElementById('save-module-btn');
|
|
|
|
openModalBtn.onclick = () => {
|
|
createModal.classList.remove('hidden');
|
|
document.getElementById('new-module-name').value = '';
|
|
document.getElementById('new-module-program').value = '';
|
|
document.getElementById('new-module-lob').value = '';
|
|
document.getElementById('new-module-job-code').value = '';
|
|
};
|
|
|
|
cancelModalBtn.onclick = () => createModal.classList.add('hidden');
|
|
|
|
saveModuleBtn.onclick = async () => {
|
|
const moduleData = {
|
|
name: document.getElementById('new-module-name').value,
|
|
program: document.getElementById('new-module-program').value,
|
|
lob: document.getElementById('new-module-lob').value,
|
|
job_code: document.getElementById('new-module-job-code').value
|
|
};
|
|
|
|
if (!moduleData.name) {
|
|
alert('Module name is required');
|
|
return;
|
|
}
|
|
|
|
const res = await apiRequest('/internal/admin/modules', 'POST', moduleData);
|
|
if (res && res.detail) {
|
|
alert(res.detail);
|
|
} else if (res) {
|
|
showToast('Module created successfully');
|
|
createModal.classList.add('hidden');
|
|
loadModules();
|
|
}
|
|
};
|
|
|
|
// View Key Modal Logic
|
|
const viewKeyModal = document.getElementById('view-key-modal');
|
|
const closeKeyModalBtn = document.getElementById('close-key-modal-btn');
|
|
const copyModalKeyBtn = document.getElementById('copy-modal-key-btn');
|
|
const modalKeyDisplay = document.getElementById('modal-key-display');
|
|
let currentKeyToCopy = '';
|
|
|
|
closeKeyModalBtn.onclick = () => viewKeyModal.classList.add('hidden');
|
|
|
|
copyModalKeyBtn.onclick = () => {
|
|
navigator.clipboard.writeText(currentKeyToCopy);
|
|
showToast('Key copied to clipboard!');
|
|
};
|
|
|
|
window.viewKey = (key) => {
|
|
currentKeyToCopy = key;
|
|
modalKeyDisplay.innerText = key;
|
|
viewKeyModal.classList.remove('hidden');
|
|
};
|
|
|
|
window.copyKey = (key) => {
|
|
navigator.clipboard.writeText(key);
|
|
showToast('Key copied to clipboard!');
|
|
};
|
|
|
|
// Confirmation Modal Logic
|
|
const confirmModal = document.getElementById('confirm-modal');
|
|
const confirmTitle = document.getElementById('confirm-title');
|
|
const confirmMessage = document.getElementById('confirm-message');
|
|
const confirmOkBtn = document.getElementById('confirm-ok-btn');
|
|
const confirmCancelBtn = document.getElementById('confirm-cancel-btn');
|
|
|
|
let onConfirmHandler = null;
|
|
|
|
function openConfirmModal(title, message, isDanger, handler) {
|
|
confirmTitle.innerText = title;
|
|
confirmMessage.innerText = message;
|
|
onConfirmHandler = handler;
|
|
|
|
if (isDanger) {
|
|
confirmOkBtn.classList.add('btn-danger');
|
|
confirmOkBtn.style.backgroundColor = ''; // Reset inline style if any
|
|
} else {
|
|
confirmOkBtn.classList.remove('btn-danger');
|
|
confirmOkBtn.style.backgroundColor = 'var(--primary)';
|
|
}
|
|
|
|
confirmModal.classList.remove('hidden');
|
|
}
|
|
|
|
confirmCancelBtn.onclick = () => {
|
|
confirmModal.classList.add('hidden');
|
|
onConfirmHandler = null;
|
|
};
|
|
|
|
confirmOkBtn.onclick = async () => {
|
|
if (onConfirmHandler) {
|
|
await onConfirmHandler();
|
|
}
|
|
confirmModal.classList.add('hidden');
|
|
onConfirmHandler = null;
|
|
};
|
|
|
|
window.rotateKey = (id) => {
|
|
openConfirmModal(
|
|
'Rotate API Key',
|
|
'Are you sure? Previous key will stop working immediately.',
|
|
false,
|
|
async () => {
|
|
await apiRequest(`/internal/admin/modules/${id}/rotate`, 'POST');
|
|
showToast('Key rotated successfully');
|
|
loadModules();
|
|
}
|
|
);
|
|
};
|
|
|
|
window.archiveModule = (id) => {
|
|
openConfirmModal(
|
|
'Archive Module',
|
|
'Archive this module? It will stop working immediately.',
|
|
true,
|
|
async () => {
|
|
await apiRequest(`/internal/admin/modules/${id}`, 'DELETE');
|
|
showToast('Module archived');
|
|
loadModules();
|
|
}
|
|
);
|
|
};
|
|
|
|
window.restoreModule = (id) => {
|
|
openConfirmModal(
|
|
'Restore Module',
|
|
'Restore this module? API access will be re-enabled.',
|
|
false,
|
|
async () => {
|
|
await apiRequest(`/internal/admin/modules/${id}/restore`, 'POST');
|
|
showToast('Module restored');
|
|
loadModules();
|
|
}
|
|
);
|
|
};
|
|
|
|
window.hardDeleteModule = (id) => {
|
|
openConfirmModal(
|
|
'Permanent Delete',
|
|
'PERMANENTLY DELETE this module? This cannot be undone.',
|
|
true,
|
|
async () => {
|
|
await apiRequest(`/internal/admin/modules/${id}?hard_delete=true`, 'DELETE');
|
|
showToast('Module permanently deleted');
|
|
loadModules();
|
|
}
|
|
);
|
|
};
|
|
|
|
document.getElementById('login-btn').onclick = login;
|
|
logoutBtn.onclick = logout;
|
|
|
|
// Auto-login check
|
|
if (TOKEN) {
|
|
showDashboard();
|
|
}
|
|
</script>
|
|
</body>
|
|
|
|
</html> |