feat: add web UI with login, CRUD, admin, and API key management
- Add login page with JWT authentication - Add dashboard with stats and quick actions - Add links management page (full CRUD with search) - Add collections management page - Add API key management page with copy-to-clipboard - Add admin user management page (admin only) - Fix UUID type mismatches across all endpoints - Add updated_at column to api_keys and audit_log in schema.sql - Fix DB_PASSWORD default in docker-compose.yml - Add PyJWT to requirements.txt - Fix API docs URL (/docs instead of /api/docs) - Improve JS error handling (show actual messages) - Rewrite conftest.py with proper DB lifecycle management - Add 42 new integration tests (84 total, all passing) - test_admin.py: 15 tests for admin endpoints - test_auth_extended.py: 9 tests for API key CRUD - test_tags.py: 12 tests for tag endpoints - test_sync.py: 6 tests for sync endpoints
This commit is contained in:
DavidSaylor
156
LinkSyncServer/static/js/apikeys-page.js
Normal file
156
LinkSyncServer/static/js/apikeys-page.js
Normal file
@@ -0,0 +1,156 @@
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
const keysList = document.getElementById('api-keys-list');
|
||||
const keyModal = document.getElementById('key-modal');
|
||||
const keyResultModal = document.getElementById('key-result-modal');
|
||||
const deleteModal = document.getElementById('delete-key-modal');
|
||||
const keyForm = document.getElementById('key-form');
|
||||
let deleteTargetId = null;
|
||||
|
||||
async function loadKeys() {
|
||||
try {
|
||||
const keys = await LinkSync.getApiKeys();
|
||||
renderKeys(Array.isArray(keys) ? keys : []);
|
||||
} catch (err) {
|
||||
keysList.innerHTML = `<div class="empty-state"><p>Failed to load API keys: ${err.message}</p></div>`;
|
||||
}
|
||||
}
|
||||
|
||||
function renderKeys(keys) {
|
||||
if (!keys || keys.length === 0) {
|
||||
keysList.innerHTML = '<div class="empty-state"><p>No API keys found.</p><button class="btn btn-primary" id="empty-add-key-btn">+ Create your first API key</button></div>';
|
||||
document.getElementById('empty-add-key-btn').addEventListener('click', openKeyModal);
|
||||
return;
|
||||
}
|
||||
|
||||
keysList.innerHTML = `
|
||||
<div class="data-table">
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Name</th>
|
||||
<th>Key ID</th>
|
||||
<th>Status</th>
|
||||
<th>Created</th>
|
||||
<th>Expires</th>
|
||||
<th>Actions</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
${keys.map(key => `
|
||||
<tr>
|
||||
<td>${escapeHtml(key.name)}</td>
|
||||
<td class="key-value">${escapeHtml(key.key_id || key.id)}</td>
|
||||
<td class="${key.is_active ? 'status-active' : 'status-inactive'}">${key.is_active ? 'Active' : 'Inactive'}</td>
|
||||
<td>${formatDate(key.created_at)}</td>
|
||||
<td>${key.expires_at ? formatDate(key.expires_at) : 'Never'}</td>
|
||||
<td class="actions">
|
||||
<button class="btn-icon" data-action="delete" data-id="${key.key_id || key.id}" title="Delete">🗑</button>
|
||||
</td>
|
||||
</tr>
|
||||
`).join('')}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
`;
|
||||
|
||||
keysList.querySelectorAll('[data-action="delete"]').forEach(btn => {
|
||||
btn.addEventListener('click', () => confirmDeleteKey(btn.dataset.id));
|
||||
});
|
||||
}
|
||||
|
||||
function openKeyModal() {
|
||||
document.getElementById('key-name').value = '';
|
||||
keyModal.style.display = 'flex';
|
||||
}
|
||||
|
||||
function closeKeyModal() {
|
||||
keyModal.style.display = 'none';
|
||||
keyForm.reset();
|
||||
}
|
||||
|
||||
function closeKeyResultModal() {
|
||||
keyResultModal.style.display = 'none';
|
||||
}
|
||||
|
||||
function closeDeleteModal() {
|
||||
deleteModal.style.display = 'none';
|
||||
deleteTargetId = null;
|
||||
}
|
||||
|
||||
document.getElementById('new-key-btn').addEventListener('click', openKeyModal);
|
||||
document.getElementById('key-modal-close').addEventListener('click', closeKeyModal);
|
||||
document.getElementById('key-cancel-btn').addEventListener('click', closeKeyModal);
|
||||
document.getElementById('key-result-close').addEventListener('click', closeKeyResultModal);
|
||||
document.getElementById('key-done-btn').addEventListener('click', closeKeyResultModal);
|
||||
document.getElementById('delete-key-cancel-btn').addEventListener('click', closeDeleteModal);
|
||||
|
||||
keyModal.querySelector('.modal-overlay').addEventListener('click', closeKeyModal);
|
||||
keyResultModal.querySelector('.modal-overlay').addEventListener('click', closeKeyResultModal);
|
||||
deleteModal.querySelector('.modal-overlay').addEventListener('click', closeDeleteModal);
|
||||
|
||||
keyForm.addEventListener('submit', async function(e) {
|
||||
e.preventDefault();
|
||||
const saveBtn = document.getElementById('key-save-btn');
|
||||
saveBtn.disabled = true;
|
||||
saveBtn.textContent = 'Creating...';
|
||||
|
||||
const name = document.getElementById('key-name').value;
|
||||
|
||||
try {
|
||||
const result = await LinkSync.createApiKey(name);
|
||||
closeKeyModal();
|
||||
document.getElementById('new-key-value').textContent = result.api_key;
|
||||
keyResultModal.style.display = 'flex';
|
||||
loadKeys();
|
||||
} catch (err) {
|
||||
alert('Failed to create API key: ' + err.message);
|
||||
} finally {
|
||||
saveBtn.disabled = false;
|
||||
saveBtn.textContent = 'Create';
|
||||
}
|
||||
});
|
||||
|
||||
document.getElementById('copy-key-btn').addEventListener('click', function() {
|
||||
const key = document.getElementById('new-key-value').textContent;
|
||||
navigator.clipboard.writeText(key).then(() => {
|
||||
this.textContent = 'Copied!';
|
||||
setTimeout(() => { this.textContent = 'Copy'; }, 2000);
|
||||
});
|
||||
});
|
||||
|
||||
function confirmDeleteKey(id) {
|
||||
deleteTargetId = id;
|
||||
deleteModal.style.display = 'flex';
|
||||
}
|
||||
|
||||
document.getElementById('confirm-delete-key-btn').addEventListener('click', async function() {
|
||||
if (!deleteTargetId) return;
|
||||
try {
|
||||
await LinkSync.deleteApiKey(deleteTargetId);
|
||||
closeDeleteModal();
|
||||
loadKeys();
|
||||
} catch (err) {
|
||||
alert('Failed to delete API key: ' + err.message);
|
||||
}
|
||||
});
|
||||
|
||||
const urlParams = new URLSearchParams(window.location.search);
|
||||
if (urlParams.get('action') === 'new') {
|
||||
openKeyModal();
|
||||
}
|
||||
|
||||
loadKeys();
|
||||
|
||||
function escapeHtml(str) {
|
||||
if (!str) return '';
|
||||
const div = document.createElement('div');
|
||||
div.textContent = str;
|
||||
return div.innerHTML;
|
||||
}
|
||||
|
||||
function formatDate(dateStr) {
|
||||
if (!dateStr) return '-';
|
||||
const d = new Date(dateStr);
|
||||
return d.toLocaleDateString();
|
||||
}
|
||||
});
|
||||
Reference in New Issue
Block a user