609 lines
22 KiB
HTML
609 lines
22 KiB
HTML
{{ define "users_title" }}User Management{{ end }}
|
|
{{ define "users_content" }}
|
|
<div class="space-y-6">
|
|
<div class="flex justify-between items-center">
|
|
<h1 class="text-2xl font-semibold text-white">User Management</h1>
|
|
<button id="add-user-btn" class="px-4 py-2 bg-primary-600 hover:bg-primary-500 rounded text-white">
|
|
Add New User
|
|
</button>
|
|
</div>
|
|
|
|
<!-- Current User Info -->
|
|
<div class="bg-gray-800 border border-gray-700 rounded-lg p-4">
|
|
<h2 class="text-lg font-semibold text-white mb-2">Current User</h2>
|
|
<div class="grid grid-cols-1 md:grid-cols-3 gap-4 text-sm">
|
|
<div>
|
|
<span class="text-gray-400">Username:</span>
|
|
<span class="text-white ml-2" id="current-username">{{ .CurrentUser.Username }}</span>
|
|
</div>
|
|
<div>
|
|
<span class="text-gray-400">Role:</span>
|
|
<span class="text-white ml-2 capitalize" id="current-role">{{ .CurrentUser.Role }}</span>
|
|
</div>
|
|
<div>
|
|
<span class="text-gray-400">Last Login:</span>
|
|
<span class="text-white ml-2" id="current-last-login">
|
|
{{ if .CurrentUser.LastLogin }}{{ .CurrentUser.LastLogin.Format "2006-01-02 15:04:05" }}{{ else }}Never{{ end }}
|
|
</span>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Users Table -->
|
|
<div class="bg-gray-800 border border-gray-700 rounded-lg">
|
|
<div class="p-4 border-b border-gray-700">
|
|
<h2 class="text-lg font-semibold text-white">All Users</h2>
|
|
</div>
|
|
<div class="overflow-x-auto">
|
|
<table class="min-w-full divide-y divide-gray-700">
|
|
<thead class="bg-gray-800">
|
|
<tr>
|
|
<th class="px-4 py-2 text-left text-xs font-medium text-gray-300 uppercase tracking-wider">Username</th>
|
|
<th class="px-4 py-2 text-left text-xs font-medium text-gray-300 uppercase tracking-wider">Email</th>
|
|
<th class="px-4 py-2 text-left text-xs font-medium text-gray-300 uppercase tracking-wider">Role</th>
|
|
<th class="px-4 py-2 text-left text-xs font-medium text-gray-300 uppercase tracking-wider">Status</th>
|
|
<th class="px-4 py-2 text-left text-xs font-medium text-gray-300 uppercase tracking-wider">Last Login</th>
|
|
<th class="px-4 py-2 text-left text-xs font-medium text-gray-300 uppercase tracking-wider">Created</th>
|
|
<th class="px-4 py-2 text-left text-xs font-medium text-gray-300 uppercase tracking-wider">Actions</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody id="users-table" class="bg-gray-900 divide-y divide-gray-800">
|
|
<!-- Dynamic content will be inserted here -->
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- API Keys Section -->
|
|
<div class="bg-gray-800 border border-gray-700 rounded-lg">
|
|
<div class="p-4 border-b border-gray-700 flex justify-between items-center">
|
|
<h2 class="text-lg font-semibold text-white">My API Keys</h2>
|
|
<button id="add-apikey-btn" class="px-3 py-1 bg-blue-600 hover:bg-blue-500 rounded text-white text-sm">
|
|
Generate API Key
|
|
</button>
|
|
</div>
|
|
<div class="overflow-x-auto">
|
|
<table class="min-w-full divide-y divide-gray-700">
|
|
<thead class="bg-gray-800">
|
|
<tr>
|
|
<th class="px-4 py-2 text-left text-xs font-medium text-gray-300 uppercase tracking-wider">Name</th>
|
|
<th class="px-4 py-2 text-left text-xs font-medium text-gray-300 uppercase tracking-wider">Key</th>
|
|
<th class="px-4 py-2 text-left text-xs font-medium text-gray-300 uppercase tracking-wider">Status</th>
|
|
<th class="px-4 py-2 text-left text-xs font-medium text-gray-300 uppercase tracking-wider">Last Used</th>
|
|
<th class="px-4 py-2 text-left text-xs font-medium text-gray-300 uppercase tracking-wider">Expires</th>
|
|
<th class="px-4 py-2 text-left text-xs font-medium text-gray-300 uppercase tracking-wider">Actions</th>
|
|
</tr>
|
|
</thead>
|
|
<tbody id="apikeys-table" class="bg-gray-900 divide-y divide-gray-800">
|
|
<!-- Dynamic content will be inserted here -->
|
|
</tbody>
|
|
</table>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- User Form Modal -->
|
|
<div id="user-modal" class="fixed inset-0 bg-black bg-opacity-50 hidden z-50">
|
|
<div class="flex items-center justify-center min-h-screen p-4">
|
|
<div class="bg-gray-800 rounded-lg max-w-md w-full">
|
|
<div class="p-4 border-b border-gray-700 flex justify-between items-center">
|
|
<h3 id="user-modal-title" class="text-lg font-semibold text-white">Add New User</h3>
|
|
<button id="close-user-modal" class="text-gray-400 hover:text-white">
|
|
<svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
<form id="user-form" class="p-4 space-y-4">
|
|
<input type="hidden" id="user-id" name="id">
|
|
<input type="hidden" name="csrf_token" value="{{ .CSRFToken }}">
|
|
|
|
<div>
|
|
<label class="block text-sm text-gray-300 mb-1">Username</label>
|
|
<input type="text" id="user-username" name="username" required
|
|
class="w-full bg-gray-900 border border-gray-700 rounded px-3 py-2 text-gray-100"
|
|
placeholder="Enter username">
|
|
<div id="username-error" class="text-red-400 text-sm mt-1 hidden"></div>
|
|
</div>
|
|
|
|
<div id="password-field">
|
|
<label class="block text-sm text-gray-300 mb-1">Password</label>
|
|
<input type="password" id="user-password" name="password" required
|
|
class="w-full bg-gray-900 border border-gray-700 rounded px-3 py-2 text-gray-100"
|
|
placeholder="Enter password">
|
|
<div id="password-error" class="text-red-400 text-sm mt-1 hidden"></div>
|
|
<div class="text-xs text-gray-400 mt-1">
|
|
Password must be at least 8 characters with uppercase, lowercase, digit, and special character.
|
|
</div>
|
|
</div>
|
|
|
|
<div>
|
|
<label class="block text-sm text-gray-300 mb-1">Email (Optional)</label>
|
|
<input type="email" id="user-email" name="email"
|
|
class="w-full bg-gray-900 border border-gray-700 rounded px-3 py-2 text-gray-100"
|
|
placeholder="Enter email address">
|
|
<div id="email-error" class="text-red-400 text-sm mt-1 hidden"></div>
|
|
</div>
|
|
|
|
<div>
|
|
<label class="block text-sm text-gray-300 mb-1">Role</label>
|
|
<select id="user-role" name="role" required
|
|
class="w-full bg-gray-900 border border-gray-700 rounded px-3 py-2 text-gray-100">
|
|
<option value="readonly">Read Only</option>
|
|
<option value="user">User</option>
|
|
<option value="admin">Admin</option>
|
|
</select>
|
|
</div>
|
|
|
|
<div class="flex items-center">
|
|
<input type="checkbox" id="user-active" name="active" checked
|
|
class="mr-2 h-4 w-4 text-primary-600 bg-gray-900 border-gray-700 rounded">
|
|
<label for="user-active" class="text-sm text-gray-300">Active</label>
|
|
</div>
|
|
|
|
<div class="flex justify-end space-x-3 pt-4">
|
|
<button type="button" id="cancel-user-btn" class="px-4 py-2 bg-gray-700 hover:bg-gray-600 rounded text-white">
|
|
Cancel
|
|
</button>
|
|
<button type="submit" class="px-4 py-2 bg-primary-600 hover:bg-primary-500 rounded text-white">
|
|
Save User
|
|
</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- API Key Form Modal -->
|
|
<div id="apikey-modal" class="fixed inset-0 bg-black bg-opacity-50 hidden z-50">
|
|
<div class="flex items-center justify-center min-h-screen p-4">
|
|
<div class="bg-gray-800 rounded-lg max-w-md w-full">
|
|
<div class="p-4 border-b border-gray-700 flex justify-between items-center">
|
|
<h3 class="text-lg font-semibold text-white">Generate API Key</h3>
|
|
<button id="close-apikey-modal" class="text-gray-400 hover:text-white">
|
|
<svg class="w-6 h-6" fill="none" stroke="currentColor" viewBox="0 0 24 24">
|
|
<path stroke-linecap="round" stroke-linejoin="round" stroke-width="2" d="M6 18L18 6M6 6l12 12"></path>
|
|
</svg>
|
|
</button>
|
|
</div>
|
|
<form id="apikey-form" class="p-4 space-y-4">
|
|
<input type="hidden" name="csrf_token" value="{{ .CSRFToken }}">
|
|
|
|
<div>
|
|
<label class="block text-sm text-gray-300 mb-1">Name</label>
|
|
<input type="text" id="apikey-name" name="name" required
|
|
class="w-full bg-gray-900 border border-gray-700 rounded px-3 py-2 text-gray-100"
|
|
placeholder="e.g., Production API, Mobile App">
|
|
<div id="apikey-name-error" class="text-red-400 text-sm mt-1 hidden"></div>
|
|
</div>
|
|
|
|
<div>
|
|
<label class="block text-sm text-gray-300 mb-1">Expires In (Days)</label>
|
|
<select id="apikey-expires" name="expires_in"
|
|
class="w-full bg-gray-900 border border-gray-700 rounded px-3 py-2 text-gray-100">
|
|
<option value="">Never</option>
|
|
<option value="30">30 days</option>
|
|
<option value="90">90 days</option>
|
|
<option value="365">1 year</option>
|
|
</select>
|
|
</div>
|
|
|
|
<div class="flex justify-end space-x-3 pt-4">
|
|
<button type="button" id="cancel-apikey-btn" class="px-4 py-2 bg-gray-700 hover:bg-gray-600 rounded text-white">
|
|
Cancel
|
|
</button>
|
|
<button type="submit" class="px-4 py-2 bg-primary-600 hover:bg-primary-500 rounded text-white">
|
|
Generate Key
|
|
</button>
|
|
</div>
|
|
</form>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- API Key Display Modal -->
|
|
<div id="apikey-display-modal" class="fixed inset-0 bg-black bg-opacity-50 hidden z-50">
|
|
<div class="flex items-center justify-center min-h-screen p-4">
|
|
<div class="bg-gray-800 rounded-lg max-w-lg w-full">
|
|
<div class="p-4 border-b border-gray-700">
|
|
<h3 class="text-lg font-semibold text-white">API Key Generated</h3>
|
|
</div>
|
|
<div class="p-4 space-y-4">
|
|
<div class="bg-yellow-900 border border-yellow-700 rounded p-3">
|
|
<div class="text-yellow-200 text-sm font-medium">⚠️ Important</div>
|
|
<div class="text-yellow-100 text-sm mt-1">
|
|
Save this API key securely. It will not be shown again.
|
|
</div>
|
|
</div>
|
|
|
|
<div>
|
|
<label class="block text-sm text-gray-300 mb-1">API Key</label>
|
|
<div class="flex">
|
|
<input type="text" id="generated-apikey" readonly
|
|
class="flex-1 bg-gray-900 border border-gray-700 rounded-l px-3 py-2 text-gray-100 font-mono text-sm">
|
|
<button id="copy-apikey" class="px-3 py-2 bg-primary-600 hover:bg-primary-500 rounded-r text-white text-sm">
|
|
Copy
|
|
</button>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="flex justify-end">
|
|
<button id="close-apikey-display" class="px-4 py-2 bg-gray-700 hover:bg-gray-600 rounded text-white">
|
|
Close
|
|
</button>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<script>
|
|
let currentUsers = [];
|
|
let currentAPIKeys = [];
|
|
let editingUserId = null;
|
|
const currentUserId = parseInt('{{ .CurrentUser.ID }}');
|
|
|
|
// Load initial data
|
|
document.addEventListener('DOMContentLoaded', function() {
|
|
loadUsers();
|
|
loadAPIKeys();
|
|
});
|
|
|
|
// Event listeners
|
|
document.getElementById('add-user-btn').addEventListener('click', function() {
|
|
showUserModal();
|
|
});
|
|
|
|
document.getElementById('add-apikey-btn').addEventListener('click', function() {
|
|
showAPIKeyModal();
|
|
});
|
|
|
|
document.getElementById('close-user-modal').addEventListener('click', hideUserModal);
|
|
document.getElementById('cancel-user-btn').addEventListener('click', hideUserModal);
|
|
document.getElementById('close-apikey-modal').addEventListener('click', hideAPIKeyModal);
|
|
document.getElementById('cancel-apikey-btn').addEventListener('click', hideAPIKeyModal);
|
|
document.getElementById('close-apikey-display').addEventListener('click', hideAPIKeyDisplayModal);
|
|
|
|
document.getElementById('user-form').addEventListener('submit', function(e) {
|
|
e.preventDefault();
|
|
saveUser();
|
|
});
|
|
|
|
document.getElementById('apikey-form').addEventListener('submit', function(e) {
|
|
e.preventDefault();
|
|
generateAPIKey();
|
|
});
|
|
|
|
document.getElementById('copy-apikey').addEventListener('click', function() {
|
|
const input = document.getElementById('generated-apikey');
|
|
input.select();
|
|
document.execCommand('copy');
|
|
this.textContent = 'Copied!';
|
|
setTimeout(() => this.textContent = 'Copy', 2000);
|
|
});
|
|
|
|
// Load users
|
|
async function loadUsers() {
|
|
try {
|
|
const response = await fetch('/api/users');
|
|
const data = await response.json();
|
|
|
|
if (response.ok) {
|
|
currentUsers = data.users || [];
|
|
renderUsersTable(currentUsers);
|
|
} else {
|
|
console.error('Failed to load users:', data.error);
|
|
}
|
|
} catch (error) {
|
|
console.error('Failed to load users:', error);
|
|
}
|
|
}
|
|
|
|
// Load API keys
|
|
async function loadAPIKeys() {
|
|
try {
|
|
const response = await fetch('/api/apikeys');
|
|
const data = await response.json();
|
|
|
|
if (response.ok) {
|
|
currentAPIKeys = data.api_keys || [];
|
|
renderAPIKeysTable(currentAPIKeys);
|
|
} else {
|
|
console.error('Failed to load API keys:', data.error);
|
|
}
|
|
} catch (error) {
|
|
console.error('Failed to load API keys:', error);
|
|
}
|
|
}
|
|
|
|
// Render users table
|
|
function renderUsersTable(users) {
|
|
const tbody = document.getElementById('users-table');
|
|
tbody.innerHTML = '';
|
|
|
|
if (users.length === 0) {
|
|
tbody.innerHTML = '<tr><td colspan="7" class="px-4 py-4 text-center text-gray-400">No users found</td></tr>';
|
|
return;
|
|
}
|
|
|
|
users.forEach(user => {
|
|
const row = document.createElement('tr');
|
|
row.className = 'hover:bg-gray-800';
|
|
|
|
const statusBadge = user.active
|
|
? '<span class="px-2 py-1 text-xs bg-green-600 text-white rounded">Active</span>'
|
|
: '<span class="px-2 py-1 text-xs bg-red-600 text-white rounded">Inactive</span>';
|
|
|
|
const roleBadge = getRoleBadge(user.role);
|
|
const lastLogin = user.last_login ? new Date(user.last_login).toLocaleString() : 'Never';
|
|
const created = new Date(user.created_at).toLocaleDateString();
|
|
|
|
row.innerHTML = `
|
|
<td class="px-4 py-2 text-sm text-gray-300 font-medium">${user.username}</td>
|
|
<td class="px-4 py-2 text-sm text-gray-300">${user.email || '-'}</td>
|
|
<td class="px-4 py-2 text-sm">${roleBadge}</td>
|
|
<td class="px-4 py-2 text-sm">${statusBadge}</td>
|
|
<td class="px-4 py-2 text-sm text-gray-300">${lastLogin}</td>
|
|
<td class="px-4 py-2 text-sm text-gray-300">${created}</td>
|
|
<td class="px-4 py-2 text-sm">
|
|
<div class="flex space-x-2">
|
|
<button onclick="editUser(${user.id})" class="px-2 py-1 text-xs bg-blue-600 hover:bg-blue-500 text-white rounded">Edit</button>
|
|
${user.id !== currentUserId ? `<button onclick="deleteUser(${user.id})" class="px-2 py-1 text-xs bg-red-600 hover:bg-red-500 text-white rounded">Delete</button>` : ''}
|
|
</div>
|
|
</td>
|
|
`;
|
|
|
|
tbody.appendChild(row);
|
|
});
|
|
}
|
|
|
|
// Render API keys table
|
|
function renderAPIKeysTable(keys) {
|
|
const tbody = document.getElementById('apikeys-table');
|
|
tbody.innerHTML = '';
|
|
|
|
if (keys.length === 0) {
|
|
tbody.innerHTML = '<tr><td colspan="6" class="px-4 py-4 text-center text-gray-400">No API keys found</td></tr>';
|
|
return;
|
|
}
|
|
|
|
keys.forEach(key => {
|
|
const row = document.createElement('tr');
|
|
row.className = 'hover:bg-gray-800';
|
|
|
|
const statusBadge = key.active
|
|
? '<span class="px-2 py-1 text-xs bg-green-600 text-white rounded">Active</span>'
|
|
: '<span class="px-2 py-1 text-xs bg-gray-600 text-white rounded">Revoked</span>';
|
|
|
|
const lastUsed = key.last_used ? new Date(key.last_used).toLocaleString() : 'Never';
|
|
const expires = key.expires_at ? new Date(key.expires_at).toLocaleDateString() : 'Never';
|
|
|
|
row.innerHTML = `
|
|
<td class="px-4 py-2 text-sm text-gray-300 font-medium">${key.name}</td>
|
|
<td class="px-4 py-2 text-sm text-gray-300 font-mono">${key.key}</td>
|
|
<td class="px-4 py-2 text-sm">${statusBadge}</td>
|
|
<td class="px-4 py-2 text-sm text-gray-300">${lastUsed}</td>
|
|
<td class="px-4 py-2 text-sm text-gray-300">${expires}</td>
|
|
<td class="px-4 py-2 text-sm">
|
|
${key.active ? `<button onclick="revokeAPIKey(${key.id})" class="px-2 py-1 text-xs bg-red-600 hover:bg-red-500 text-white rounded">Revoke</button>` : ''}
|
|
</td>
|
|
`;
|
|
|
|
tbody.appendChild(row);
|
|
});
|
|
}
|
|
|
|
// Get role badge HTML
|
|
function getRoleBadge(role) {
|
|
switch (role) {
|
|
case 'admin':
|
|
return '<span class="px-2 py-1 text-xs bg-red-600 text-white rounded">Admin</span>';
|
|
case 'user':
|
|
return '<span class="px-2 py-1 text-xs bg-blue-600 text-white rounded">User</span>';
|
|
case 'readonly':
|
|
return '<span class="px-2 py-1 text-xs bg-gray-600 text-white rounded">Read Only</span>';
|
|
default:
|
|
return '<span class="px-2 py-1 text-xs bg-gray-600 text-white rounded">Unknown</span>';
|
|
}
|
|
}
|
|
|
|
// Show user modal
|
|
function showUserModal(user = null) {
|
|
editingUserId = user ? user.id : null;
|
|
|
|
if (user) {
|
|
document.getElementById('user-modal-title').textContent = 'Edit User';
|
|
document.getElementById('user-id').value = user.id;
|
|
document.getElementById('user-username').value = user.username;
|
|
document.getElementById('user-email').value = user.email || '';
|
|
document.getElementById('user-role').value = user.role;
|
|
document.getElementById('user-active').checked = user.active;
|
|
document.getElementById('password-field').style.display = 'none';
|
|
} else {
|
|
document.getElementById('user-modal-title').textContent = 'Add New User';
|
|
document.getElementById('user-form').reset();
|
|
document.getElementById('password-field').style.display = 'block';
|
|
document.getElementById('user-role').value = 'user';
|
|
}
|
|
|
|
// Clear errors
|
|
clearFormErrors();
|
|
|
|
document.getElementById('user-modal').classList.remove('hidden');
|
|
}
|
|
|
|
// Hide user modal
|
|
function hideUserModal() {
|
|
document.getElementById('user-modal').classList.add('hidden');
|
|
editingUserId = null;
|
|
}
|
|
|
|
// Show API key modal
|
|
function showAPIKeyModal() {
|
|
document.getElementById('apikey-form').reset();
|
|
clearAPIKeyFormErrors();
|
|
document.getElementById('apikey-modal').classList.remove('hidden');
|
|
}
|
|
|
|
// Hide API key modal
|
|
function hideAPIKeyModal() {
|
|
document.getElementById('apikey-modal').classList.add('hidden');
|
|
}
|
|
|
|
// Hide API key display modal
|
|
function hideAPIKeyDisplayModal() {
|
|
document.getElementById('apikey-display-modal').classList.add('hidden');
|
|
}
|
|
|
|
// Save user
|
|
async function saveUser() {
|
|
clearFormErrors();
|
|
|
|
const formData = new FormData(document.getElementById('user-form'));
|
|
const userData = {
|
|
username: formData.get('username'),
|
|
email: formData.get('email'),
|
|
role: formData.get('role'),
|
|
active: formData.has('active')
|
|
};
|
|
|
|
if (!editingUserId) {
|
|
userData.password = formData.get('password');
|
|
}
|
|
|
|
try {
|
|
let response;
|
|
if (editingUserId) {
|
|
response = await fetch(`/api/users/${editingUserId}`, {
|
|
method: 'PUT',
|
|
headers: { 'Content-Type': 'application/json' },
|
|
body: JSON.stringify(userData)
|
|
});
|
|
} else {
|
|
response = await fetch('/api/users', {
|
|
method: 'POST',
|
|
headers: { 'Content-Type': 'application/json' },
|
|
body: JSON.stringify(userData)
|
|
});
|
|
}
|
|
|
|
const data = await response.json();
|
|
|
|
if (response.ok) {
|
|
hideUserModal();
|
|
loadUsers();
|
|
} else {
|
|
showFormError(data.error);
|
|
}
|
|
} catch (error) {
|
|
showFormError('Failed to save user');
|
|
}
|
|
}
|
|
|
|
// Generate API key
|
|
async function generateAPIKey() {
|
|
clearAPIKeyFormErrors();
|
|
|
|
const formData = new FormData(document.getElementById('apikey-form'));
|
|
const keyData = {
|
|
name: formData.get('name'),
|
|
permissions: ['read', 'write'] // Default permissions
|
|
};
|
|
|
|
const expiresIn = formData.get('expires_in');
|
|
if (expiresIn) {
|
|
keyData.expires_in = parseInt(expiresIn);
|
|
}
|
|
|
|
try {
|
|
const response = await fetch('/api/apikeys', {
|
|
method: 'POST',
|
|
headers: { 'Content-Type': 'application/json' },
|
|
body: JSON.stringify(keyData)
|
|
});
|
|
|
|
const data = await response.json();
|
|
|
|
if (response.ok) {
|
|
hideAPIKeyModal();
|
|
document.getElementById('generated-apikey').value = data.api_key.key;
|
|
document.getElementById('apikey-display-modal').classList.remove('hidden');
|
|
loadAPIKeys();
|
|
} else {
|
|
showAPIKeyFormError(data.error);
|
|
}
|
|
} catch (error) {
|
|
showAPIKeyFormError('Failed to generate API key');
|
|
}
|
|
}
|
|
|
|
// Edit user
|
|
function editUser(userId) {
|
|
const user = currentUsers.find(u => u.id === userId);
|
|
if (user) {
|
|
showUserModal(user);
|
|
}
|
|
}
|
|
|
|
// Delete user
|
|
async function deleteUser(userId) {
|
|
if (!confirm('Are you sure you want to delete this user?')) return;
|
|
|
|
try {
|
|
const response = await fetch(`/api/users/${userId}`, {
|
|
method: 'DELETE'
|
|
});
|
|
|
|
if (response.ok) {
|
|
loadUsers();
|
|
} else {
|
|
const data = await response.json();
|
|
alert('Failed to delete user: ' + data.error);
|
|
}
|
|
} catch (error) {
|
|
alert('Failed to delete user');
|
|
}
|
|
}
|
|
|
|
// Revoke API key
|
|
async function revokeAPIKey(keyId) {
|
|
if (!confirm('Are you sure you want to revoke this API key?')) return;
|
|
|
|
try {
|
|
const response = await fetch(`/api/apikeys/${keyId}`, {
|
|
method: 'DELETE'
|
|
});
|
|
|
|
if (response.ok) {
|
|
loadAPIKeys();
|
|
} else {
|
|
const data = await response.json();
|
|
alert('Failed to revoke API key: ' + data.error);
|
|
}
|
|
} catch (error) {
|
|
alert('Failed to revoke API key');
|
|
}
|
|
}
|
|
|
|
// Error handling functions
|
|
function clearFormErrors() {
|
|
document.getElementById('username-error').classList.add('hidden');
|
|
document.getElementById('password-error').classList.add('hidden');
|
|
document.getElementById('email-error').classList.add('hidden');
|
|
}
|
|
|
|
function clearAPIKeyFormErrors() {
|
|
document.getElementById('apikey-name-error').classList.add('hidden');
|
|
}
|
|
|
|
function showFormError(message) {
|
|
// Show error in appropriate field or general error
|
|
alert('Error: ' + message);
|
|
}
|
|
|
|
function showAPIKeyFormError(message) {
|
|
alert('Error: ' + message);
|
|
}
|
|
</script>
|
|
{{ end }}
|