added authentication and API
This commit is contained in:
@@ -0,0 +1,608 @@
|
||||
{{ 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 }}
|
||||
Reference in New Issue
Block a user