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
@@ -9,8 +9,10 @@
|
||||
--border: #e2e8f0;
|
||||
--success: #22c55e;
|
||||
--error: #ef4444;
|
||||
--warning: #f59e0b;
|
||||
--radius: 8px;
|
||||
--shadow: 0 1px 3px rgba(0, 0, 0, 0.1);
|
||||
--shadow-lg: 0 4px 12px rgba(0, 0, 0, 0.15);
|
||||
}
|
||||
|
||||
* {
|
||||
@@ -63,6 +65,598 @@ body {
|
||||
color: var(--primary);
|
||||
}
|
||||
|
||||
.nav-user {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 1rem;
|
||||
}
|
||||
|
||||
.nav-user span {
|
||||
font-weight: 500;
|
||||
color: var(--text);
|
||||
}
|
||||
|
||||
.btn {
|
||||
display: inline-flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
padding: 0.625rem 1.25rem;
|
||||
border-radius: var(--radius);
|
||||
text-decoration: none;
|
||||
font-weight: 500;
|
||||
font-size: 0.875rem;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
transition: background 0.2s, opacity 0.2s;
|
||||
}
|
||||
|
||||
.btn:disabled {
|
||||
opacity: 0.6;
|
||||
cursor: not-allowed;
|
||||
}
|
||||
|
||||
.btn-primary {
|
||||
background: var(--primary);
|
||||
color: white;
|
||||
}
|
||||
|
||||
.btn-primary:hover:not(:disabled) {
|
||||
background: var(--primary-hover);
|
||||
}
|
||||
|
||||
.btn-secondary {
|
||||
background: var(--secondary);
|
||||
color: white;
|
||||
}
|
||||
|
||||
.btn-secondary:hover:not(:disabled) {
|
||||
background: #475569;
|
||||
}
|
||||
|
||||
.btn-danger {
|
||||
background: var(--error);
|
||||
color: white;
|
||||
}
|
||||
|
||||
.btn-danger:hover:not(:disabled) {
|
||||
background: #dc2626;
|
||||
}
|
||||
|
||||
.btn-outline {
|
||||
background: transparent;
|
||||
border: 1px solid var(--border);
|
||||
color: var(--text);
|
||||
}
|
||||
|
||||
.btn-outline:hover {
|
||||
background: var(--bg);
|
||||
}
|
||||
|
||||
.btn-sm {
|
||||
padding: 0.375rem 0.75rem;
|
||||
font-size: 0.75rem;
|
||||
}
|
||||
|
||||
.btn-full {
|
||||
width: 100%;
|
||||
}
|
||||
|
||||
.btn-icon {
|
||||
padding: 0.375rem;
|
||||
background: transparent;
|
||||
border: none;
|
||||
cursor: pointer;
|
||||
color: var(--text-muted);
|
||||
border-radius: 4px;
|
||||
}
|
||||
|
||||
.btn-icon:hover {
|
||||
background: var(--bg);
|
||||
color: var(--text);
|
||||
}
|
||||
|
||||
.page-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
|
||||
.page-header h1 {
|
||||
font-size: 1.75rem;
|
||||
}
|
||||
|
||||
.search-bar {
|
||||
display: flex;
|
||||
gap: 0.75rem;
|
||||
margin-bottom: 1.5rem;
|
||||
}
|
||||
|
||||
.search-bar input {
|
||||
flex: 1;
|
||||
padding: 0.625rem 1rem;
|
||||
border: 1px solid var(--border);
|
||||
border-radius: var(--radius);
|
||||
font-size: 0.875rem;
|
||||
}
|
||||
|
||||
.form-group {
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.form-group label {
|
||||
display: block;
|
||||
font-size: 0.875rem;
|
||||
font-weight: 500;
|
||||
margin-bottom: 0.375rem;
|
||||
}
|
||||
|
||||
.form-group input,
|
||||
.form-group textarea,
|
||||
.form-group select {
|
||||
width: 100%;
|
||||
padding: 0.625rem 0.75rem;
|
||||
border: 1px solid var(--border);
|
||||
border-radius: var(--radius);
|
||||
font-size: 0.875rem;
|
||||
font-family: inherit;
|
||||
}
|
||||
|
||||
.form-group input:focus,
|
||||
.form-group textarea:focus,
|
||||
.form-group select:focus {
|
||||
outline: none;
|
||||
border-color: var(--primary);
|
||||
box-shadow: 0 0 0 2px rgba(37, 99, 235, 0.1);
|
||||
}
|
||||
|
||||
.form-group textarea {
|
||||
resize: vertical;
|
||||
}
|
||||
|
||||
.checkbox-group label {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
gap: 0.5rem;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.checkbox-group input[type="checkbox"] {
|
||||
width: auto;
|
||||
}
|
||||
|
||||
.form-actions {
|
||||
display: flex;
|
||||
gap: 0.75rem;
|
||||
justify-content: flex-end;
|
||||
margin-top: 1.5rem;
|
||||
}
|
||||
|
||||
.error-message {
|
||||
background: #fef2f2;
|
||||
color: var(--error);
|
||||
padding: 0.75rem 1rem;
|
||||
border-radius: var(--radius);
|
||||
margin-bottom: 1rem;
|
||||
font-size: 0.875rem;
|
||||
}
|
||||
|
||||
.success-message {
|
||||
background: #f0fdf4;
|
||||
color: var(--success);
|
||||
padding: 0.75rem 1rem;
|
||||
border-radius: var(--radius);
|
||||
margin-bottom: 1rem;
|
||||
font-size: 0.875rem;
|
||||
}
|
||||
|
||||
.loading {
|
||||
text-align: center;
|
||||
padding: 2rem;
|
||||
color: var(--text-muted);
|
||||
}
|
||||
|
||||
.empty-state {
|
||||
text-align: center;
|
||||
padding: 3rem;
|
||||
color: var(--text-muted);
|
||||
}
|
||||
|
||||
.empty-state p {
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
/* Login Page */
|
||||
.login-page {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
min-height: 100vh;
|
||||
background: linear-gradient(135deg, #667eea 0%, #764ba2 100%);
|
||||
}
|
||||
|
||||
.login-container {
|
||||
width: 100%;
|
||||
max-width: 400px;
|
||||
padding: 1rem;
|
||||
}
|
||||
|
||||
.login-card {
|
||||
background: var(--surface);
|
||||
padding: 2.5rem;
|
||||
border-radius: var(--radius);
|
||||
box-shadow: var(--shadow-lg);
|
||||
}
|
||||
|
||||
.login-card h1 {
|
||||
text-align: center;
|
||||
color: var(--primary);
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
.login-subtitle {
|
||||
text-align: center;
|
||||
color: var(--text-muted);
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
|
||||
/* Dashboard */
|
||||
.dashboard-header {
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
|
||||
.dashboard-header h1 {
|
||||
font-size: 1.75rem;
|
||||
margin-bottom: 0.25rem;
|
||||
}
|
||||
|
||||
.welcome-text {
|
||||
color: var(--text-muted);
|
||||
}
|
||||
|
||||
.stats-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
|
||||
gap: 1.5rem;
|
||||
margin-bottom: 2.5rem;
|
||||
}
|
||||
|
||||
.stat-card {
|
||||
background: var(--surface);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: var(--radius);
|
||||
padding: 1.5rem;
|
||||
text-align: center;
|
||||
box-shadow: var(--shadow);
|
||||
}
|
||||
|
||||
.stat-value {
|
||||
font-size: 2.5rem;
|
||||
font-weight: 700;
|
||||
color: var(--primary);
|
||||
}
|
||||
|
||||
.stat-label {
|
||||
color: var(--text-muted);
|
||||
font-size: 0.875rem;
|
||||
margin: 0.25rem 0 0.75rem;
|
||||
}
|
||||
|
||||
.stat-link {
|
||||
color: var(--primary);
|
||||
text-decoration: none;
|
||||
font-size: 0.875rem;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.stat-link:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
.quick-actions h2,
|
||||
.admin-quick h2 {
|
||||
font-size: 1.25rem;
|
||||
margin-bottom: 1rem;
|
||||
}
|
||||
|
||||
.action-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
|
||||
gap: 1rem;
|
||||
margin-bottom: 2rem;
|
||||
}
|
||||
|
||||
.action-card {
|
||||
background: var(--surface);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: var(--radius);
|
||||
padding: 1.25rem;
|
||||
text-align: center;
|
||||
text-decoration: none;
|
||||
transition: box-shadow 0.2s, border-color 0.2s;
|
||||
}
|
||||
|
||||
.action-card:hover {
|
||||
box-shadow: var(--shadow-lg);
|
||||
border-color: var(--primary);
|
||||
}
|
||||
|
||||
.action-icon {
|
||||
display: block;
|
||||
font-size: 1.5rem;
|
||||
margin-bottom: 0.5rem;
|
||||
}
|
||||
|
||||
.action-label {
|
||||
color: var(--text);
|
||||
font-weight: 500;
|
||||
font-size: 0.875rem;
|
||||
}
|
||||
|
||||
/* Tables */
|
||||
.data-table {
|
||||
width: 100%;
|
||||
background: var(--surface);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: var(--radius);
|
||||
overflow: hidden;
|
||||
box-shadow: var(--shadow);
|
||||
}
|
||||
|
||||
.data-table table {
|
||||
width: 100%;
|
||||
border-collapse: collapse;
|
||||
}
|
||||
|
||||
.data-table th,
|
||||
.data-table td {
|
||||
padding: 0.75rem 1rem;
|
||||
text-align: left;
|
||||
border-bottom: 1px solid var(--border);
|
||||
}
|
||||
|
||||
.data-table th {
|
||||
background: var(--bg);
|
||||
font-weight: 600;
|
||||
font-size: 0.75rem;
|
||||
text-transform: uppercase;
|
||||
letter-spacing: 0.05em;
|
||||
color: var(--text-muted);
|
||||
}
|
||||
|
||||
.data-table td {
|
||||
font-size: 0.875rem;
|
||||
}
|
||||
|
||||
.data-table tr:last-child td {
|
||||
border-bottom: none;
|
||||
}
|
||||
|
||||
.data-table tr:hover td {
|
||||
background: #f8fafc;
|
||||
}
|
||||
|
||||
.data-table .actions {
|
||||
display: flex;
|
||||
gap: 0.5rem;
|
||||
}
|
||||
|
||||
.data-table .truncate {
|
||||
max-width: 300px;
|
||||
overflow: hidden;
|
||||
text-overflow: ellipsis;
|
||||
white-space: nowrap;
|
||||
}
|
||||
|
||||
/* Links page */
|
||||
.links-table .link-url {
|
||||
color: var(--primary);
|
||||
text-decoration: none;
|
||||
}
|
||||
|
||||
.links-table .link-url:hover {
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
.links-table .tags {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: 0.25rem;
|
||||
}
|
||||
|
||||
.links-table .tag {
|
||||
background: #e0e7ff;
|
||||
color: #3730a3;
|
||||
padding: 0.125rem 0.5rem;
|
||||
border-radius: 9999px;
|
||||
font-size: 0.75rem;
|
||||
}
|
||||
|
||||
/* Collections grid */
|
||||
.collections-grid {
|
||||
display: grid;
|
||||
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
|
||||
gap: 1.5rem;
|
||||
}
|
||||
|
||||
.collection-card {
|
||||
background: var(--surface);
|
||||
border: 1px solid var(--border);
|
||||
border-radius: var(--radius);
|
||||
padding: 1.25rem;
|
||||
box-shadow: var(--shadow);
|
||||
}
|
||||
|
||||
.collection-card h3 {
|
||||
margin-bottom: 0.5rem;
|
||||
color: var(--text);
|
||||
}
|
||||
|
||||
.collection-card p {
|
||||
color: var(--text-muted);
|
||||
font-size: 0.875rem;
|
||||
margin-bottom: 0.75rem;
|
||||
}
|
||||
|
||||
.collection-card .meta {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
font-size: 0.75rem;
|
||||
color: var(--text-muted);
|
||||
margin-bottom: 0.75rem;
|
||||
}
|
||||
|
||||
.collection-card .badge {
|
||||
display: inline-block;
|
||||
padding: 0.125rem 0.5rem;
|
||||
border-radius: 9999px;
|
||||
font-size: 0.75rem;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.badge-static {
|
||||
background: #dbeafe;
|
||||
color: #1e40af;
|
||||
}
|
||||
|
||||
.badge-dynamic {
|
||||
background: #fef3c7;
|
||||
color: #92400e;
|
||||
}
|
||||
|
||||
.badge-public {
|
||||
background: #dcfce7;
|
||||
color: #166534;
|
||||
}
|
||||
|
||||
.badge-private {
|
||||
background: #f1f5f9;
|
||||
color: #475569;
|
||||
}
|
||||
|
||||
.collection-card .actions {
|
||||
display: flex;
|
||||
gap: 0.5rem;
|
||||
padding-top: 0.75rem;
|
||||
border-top: 1px solid var(--border);
|
||||
}
|
||||
|
||||
/* API Keys */
|
||||
.api-keys-table .key-value {
|
||||
font-family: "Fira Code", "Cascadia Code", monospace;
|
||||
font-size: 0.75rem;
|
||||
color: var(--text-muted);
|
||||
}
|
||||
|
||||
.api-keys-table .status-active {
|
||||
color: var(--success);
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.api-keys-table .status-inactive {
|
||||
color: var(--error);
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.key-result {
|
||||
margin: 1rem 0;
|
||||
}
|
||||
|
||||
.key-display {
|
||||
display: flex;
|
||||
gap: 0.5rem;
|
||||
align-items: center;
|
||||
background: var(--bg);
|
||||
padding: 0.75rem 1rem;
|
||||
border-radius: var(--radius);
|
||||
margin: 0.75rem 0;
|
||||
}
|
||||
|
||||
.key-display code {
|
||||
flex: 1;
|
||||
font-family: "Fira Code", "Cascadia Code", monospace;
|
||||
font-size: 0.875rem;
|
||||
word-break: break-all;
|
||||
}
|
||||
|
||||
/* Users table */
|
||||
.users-table .role-badge {
|
||||
display: inline-block;
|
||||
padding: 0.125rem 0.5rem;
|
||||
border-radius: 9999px;
|
||||
font-size: 0.75rem;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.role-admin {
|
||||
background: #fef3c7;
|
||||
color: #92400e;
|
||||
}
|
||||
|
||||
.role-user {
|
||||
background: #e0e7ff;
|
||||
color: #3730a3;
|
||||
}
|
||||
|
||||
/* Modal */
|
||||
.modal {
|
||||
position: fixed;
|
||||
inset: 0;
|
||||
z-index: 1000;
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.modal-overlay {
|
||||
position: absolute;
|
||||
inset: 0;
|
||||
background: rgba(0, 0, 0, 0.5);
|
||||
}
|
||||
|
||||
.modal-content {
|
||||
position: relative;
|
||||
background: var(--surface);
|
||||
border-radius: var(--radius);
|
||||
padding: 1.5rem;
|
||||
width: 100%;
|
||||
max-width: 500px;
|
||||
max-height: 90vh;
|
||||
overflow-y: auto;
|
||||
box-shadow: var(--shadow-lg);
|
||||
}
|
||||
|
||||
.modal-content.modal-sm {
|
||||
max-width: 400px;
|
||||
}
|
||||
|
||||
.modal-header {
|
||||
display: flex;
|
||||
justify-content: space-between;
|
||||
align-items: center;
|
||||
margin-bottom: 1.25rem;
|
||||
}
|
||||
|
||||
.modal-header h2 {
|
||||
font-size: 1.25rem;
|
||||
}
|
||||
|
||||
.modal-close {
|
||||
background: none;
|
||||
border: none;
|
||||
font-size: 1.5rem;
|
||||
cursor: pointer;
|
||||
color: var(--text-muted);
|
||||
padding: 0.25rem;
|
||||
line-height: 1;
|
||||
}
|
||||
|
||||
.modal-close:hover {
|
||||
color: var(--text);
|
||||
}
|
||||
|
||||
/* Hero (legacy) */
|
||||
.hero {
|
||||
text-align: center;
|
||||
padding: 4rem 1rem;
|
||||
@@ -85,33 +679,6 @@ body {
|
||||
justify-content: center;
|
||||
}
|
||||
|
||||
.btn {
|
||||
display: inline-block;
|
||||
padding: 0.75rem 1.5rem;
|
||||
border-radius: var(--radius);
|
||||
text-decoration: none;
|
||||
font-weight: 500;
|
||||
transition: background 0.2s;
|
||||
}
|
||||
|
||||
.btn-primary {
|
||||
background: var(--primary);
|
||||
color: white;
|
||||
}
|
||||
|
||||
.btn-primary:hover {
|
||||
background: var(--primary-hover);
|
||||
}
|
||||
|
||||
.btn-secondary {
|
||||
background: var(--secondary);
|
||||
color: white;
|
||||
}
|
||||
|
||||
.btn-secondary:hover {
|
||||
background: #475569;
|
||||
}
|
||||
|
||||
.section {
|
||||
margin: 3rem 0;
|
||||
}
|
||||
@@ -207,4 +774,15 @@ body {
|
||||
.hero-actions {
|
||||
flex-direction: column;
|
||||
}
|
||||
.page-header {
|
||||
flex-direction: column;
|
||||
gap: 1rem;
|
||||
align-items: flex-start;
|
||||
}
|
||||
.data-table {
|
||||
overflow-x: auto;
|
||||
}
|
||||
.data-table table {
|
||||
min-width: 600px;
|
||||
}
|
||||
}
|
||||
|
||||
180
LinkSyncServer/static/js/admin-page.js
Normal file
180
LinkSyncServer/static/js/admin-page.js
Normal file
@@ -0,0 +1,180 @@
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
const usersList = document.getElementById('users-list');
|
||||
const modal = document.getElementById('user-modal');
|
||||
const deleteModal = document.getElementById('delete-user-modal');
|
||||
const form = document.getElementById('user-form');
|
||||
let deleteTargetId = null;
|
||||
|
||||
async function loadUsers() {
|
||||
try {
|
||||
const users = await LinkSync.getUsers();
|
||||
renderUsers(Array.isArray(users) ? users : []);
|
||||
} catch (err) {
|
||||
usersList.innerHTML = `<div class="empty-state"><p>Failed to load users: ${err.message}</p></div>`;
|
||||
}
|
||||
}
|
||||
|
||||
function renderUsers(users) {
|
||||
if (!users || users.length === 0) {
|
||||
usersList.innerHTML = '<div class="empty-state"><p>No users found.</p></div>';
|
||||
return;
|
||||
}
|
||||
|
||||
usersList.innerHTML = `
|
||||
<div class="data-table">
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Username</th>
|
||||
<th>Email</th>
|
||||
<th>Role</th>
|
||||
<th>Status</th>
|
||||
<th>Created</th>
|
||||
<th>Actions</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
${users.map(user => `
|
||||
<tr>
|
||||
<td>${escapeHtml(user.username)}</td>
|
||||
<td>${escapeHtml(user.email)}</td>
|
||||
<td><span class="role-badge role-${user.role}">${user.role}</span></td>
|
||||
<td>${user.is_active ? 'Active' : 'Inactive'}</td>
|
||||
<td>${formatDate(user.created_at)}</td>
|
||||
<td class="actions">
|
||||
<button class="btn-icon" data-action="edit" data-id="${user.id}" title="Edit">✎</button>
|
||||
<button class="btn-icon" data-action="delete" data-id="${user.id}" title="Delete">🗑</button>
|
||||
</td>
|
||||
</tr>
|
||||
`).join('')}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
`;
|
||||
|
||||
usersList.querySelectorAll('[data-action="edit"]').forEach(btn => {
|
||||
btn.addEventListener('click', () => editUser(btn.dataset.id));
|
||||
});
|
||||
usersList.querySelectorAll('[data-action="delete"]').forEach(btn => {
|
||||
btn.addEventListener('click', () => confirmDelete(btn.dataset.id));
|
||||
});
|
||||
}
|
||||
|
||||
function openUserModal(user = null) {
|
||||
document.getElementById('user-modal-title').textContent = user ? 'Edit User' : 'Create User';
|
||||
document.getElementById('user-id').value = user ? user.id : '';
|
||||
document.getElementById('user-username').value = user ? user.username : '';
|
||||
document.getElementById('user-username').disabled = !!user;
|
||||
document.getElementById('user-email').value = user ? user.email : '';
|
||||
document.getElementById('user-password').value = '';
|
||||
document.getElementById('user-password').required = !user;
|
||||
document.getElementById('user-password').placeholder = user ? 'Leave blank to keep current' : '';
|
||||
document.getElementById('user-role').value = user ? user.role : 'user';
|
||||
document.getElementById('user-active').checked = user ? user.is_active : true;
|
||||
modal.style.display = 'flex';
|
||||
}
|
||||
|
||||
async function editUser(id) {
|
||||
try {
|
||||
const users = await LinkSync.getUsers();
|
||||
const user = (Array.isArray(users) ? users : []).find(u => u.id === id);
|
||||
if (user) openUserModal(user);
|
||||
} catch (err) {
|
||||
alert('Failed to load user details');
|
||||
}
|
||||
}
|
||||
|
||||
function confirmDelete(id) {
|
||||
deleteTargetId = id;
|
||||
deleteModal.style.display = 'flex';
|
||||
}
|
||||
|
||||
function closeModal() {
|
||||
modal.style.display = 'none';
|
||||
form.reset();
|
||||
document.getElementById('user-username').disabled = false;
|
||||
}
|
||||
|
||||
function closeDeleteModal() {
|
||||
deleteModal.style.display = 'none';
|
||||
deleteTargetId = null;
|
||||
}
|
||||
|
||||
document.getElementById('new-user-btn').addEventListener('click', () => openUserModal());
|
||||
document.getElementById('user-modal-close').addEventListener('click', closeModal);
|
||||
document.getElementById('user-cancel-btn').addEventListener('click', closeModal);
|
||||
document.getElementById('delete-user-cancel-btn').addEventListener('click', closeDeleteModal);
|
||||
|
||||
modal.querySelector('.modal-overlay').addEventListener('click', closeModal);
|
||||
deleteModal.querySelector('.modal-overlay').addEventListener('click', closeDeleteModal);
|
||||
|
||||
form.addEventListener('submit', async function(e) {
|
||||
e.preventDefault();
|
||||
const saveBtn = document.getElementById('user-save-btn');
|
||||
saveBtn.disabled = true;
|
||||
saveBtn.textContent = 'Saving...';
|
||||
|
||||
const id = document.getElementById('user-id').value;
|
||||
const data = {
|
||||
username: document.getElementById('user-username').value,
|
||||
email: document.getElementById('user-email').value,
|
||||
role: document.getElementById('user-role').value,
|
||||
is_active: document.getElementById('user-active').checked,
|
||||
};
|
||||
|
||||
const password = document.getElementById('user-password').value;
|
||||
if (password) data.password = password;
|
||||
|
||||
try {
|
||||
if (id) {
|
||||
await LinkSync.updateUser(id, data);
|
||||
} else {
|
||||
if (!password) {
|
||||
alert('Password is required for new users');
|
||||
saveBtn.disabled = false;
|
||||
saveBtn.textContent = 'Save';
|
||||
return;
|
||||
}
|
||||
await LinkSync.createUser(data);
|
||||
}
|
||||
closeModal();
|
||||
loadUsers();
|
||||
} catch (err) {
|
||||
alert('Failed to save user: ' + err.message);
|
||||
} finally {
|
||||
saveBtn.disabled = false;
|
||||
saveBtn.textContent = 'Save';
|
||||
}
|
||||
});
|
||||
|
||||
document.getElementById('confirm-delete-user-btn').addEventListener('click', async function() {
|
||||
if (!deleteTargetId) return;
|
||||
try {
|
||||
await LinkSync.deleteUser(deleteTargetId);
|
||||
closeDeleteModal();
|
||||
loadUsers();
|
||||
} catch (err) {
|
||||
alert('Failed to delete user: ' + err.message);
|
||||
}
|
||||
});
|
||||
|
||||
const urlParams = new URLSearchParams(window.location.search);
|
||||
if (urlParams.get('action') === 'new-user') {
|
||||
openUserModal();
|
||||
}
|
||||
|
||||
loadUsers();
|
||||
|
||||
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();
|
||||
}
|
||||
});
|
||||
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();
|
||||
}
|
||||
});
|
||||
144
LinkSyncServer/static/js/collections-page.js
Normal file
144
LinkSyncServer/static/js/collections-page.js
Normal file
@@ -0,0 +1,144 @@
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
const collectionsList = document.getElementById('collections-list');
|
||||
const modal = document.getElementById('collection-modal');
|
||||
const deleteModal = document.getElementById('delete-collection-modal');
|
||||
const form = document.getElementById('collection-form');
|
||||
let deleteTargetId = null;
|
||||
|
||||
async function loadCollections() {
|
||||
try {
|
||||
const collections = await LinkSync.getCollections();
|
||||
renderCollections(Array.isArray(collections) ? collections : []);
|
||||
} catch (err) {
|
||||
collectionsList.innerHTML = `<div class="empty-state"><p>Failed to load collections: ${err.message}</p></div>`;
|
||||
}
|
||||
}
|
||||
|
||||
function renderCollections(collections) {
|
||||
if (!collections || collections.length === 0) {
|
||||
collectionsList.innerHTML = '<div class="empty-state"><p>No collections found.</p><button class="btn btn-primary" id="empty-add-col-btn">+ Create your first collection</button></div>';
|
||||
document.getElementById('empty-add-col-btn').addEventListener('click', openCollectionModal);
|
||||
return;
|
||||
}
|
||||
|
||||
collectionsList.innerHTML = collections.map(col => `
|
||||
<div class="collection-card">
|
||||
<h3>${escapeHtml(col.name)}</h3>
|
||||
<p>${escapeHtml(col.description || 'No description')}</p>
|
||||
<div class="meta">
|
||||
<span class="badge badge-${col.query_type}">${col.query_type}</span>
|
||||
<span class="badge ${col.is_public ? 'badge-public' : 'badge-private'}">${col.is_public ? 'Public' : 'Private'}</span>
|
||||
</div>
|
||||
<div class="actions">
|
||||
<button class="btn btn-sm btn-outline" data-action="edit" data-id="${col.id}">Edit</button>
|
||||
<button class="btn btn-sm btn-danger" data-action="delete" data-id="${col.id}">Delete</button>
|
||||
</div>
|
||||
</div>
|
||||
`).join('');
|
||||
|
||||
collectionsList.querySelectorAll('[data-action="edit"]').forEach(btn => {
|
||||
btn.addEventListener('click', () => editCollection(btn.dataset.id));
|
||||
});
|
||||
collectionsList.querySelectorAll('[data-action="delete"]').forEach(btn => {
|
||||
btn.addEventListener('click', () => confirmDeleteCollection(btn.dataset.id));
|
||||
});
|
||||
}
|
||||
|
||||
function openCollectionModal(col = null) {
|
||||
document.getElementById('collection-modal-title').textContent = col ? 'Edit Collection' : 'Create Collection';
|
||||
document.getElementById('collection-id').value = col ? col.id : '';
|
||||
document.getElementById('collection-name').value = col ? col.name : '';
|
||||
document.getElementById('collection-description').value = col ? (col.description || '') : '';
|
||||
document.getElementById('collection-type').value = col ? col.query_type : 'static';
|
||||
document.getElementById('collection-public').checked = col ? col.is_public : false;
|
||||
modal.style.display = 'flex';
|
||||
}
|
||||
|
||||
async function editCollection(id) {
|
||||
try {
|
||||
const collections = await LinkSync.getCollections();
|
||||
const col = (Array.isArray(collections) ? collections : []).find(c => c.id === id);
|
||||
if (col) openCollectionModal(col);
|
||||
} catch (err) {
|
||||
alert('Failed to load collection details');
|
||||
}
|
||||
}
|
||||
|
||||
function confirmDeleteCollection(id) {
|
||||
deleteTargetId = id;
|
||||
deleteModal.style.display = 'flex';
|
||||
}
|
||||
|
||||
function closeModal() {
|
||||
modal.style.display = 'none';
|
||||
form.reset();
|
||||
}
|
||||
|
||||
function closeDeleteModal() {
|
||||
deleteModal.style.display = 'none';
|
||||
deleteTargetId = null;
|
||||
}
|
||||
|
||||
document.getElementById('new-collection-btn').addEventListener('click', () => openCollectionModal());
|
||||
document.getElementById('collection-modal-close').addEventListener('click', closeModal);
|
||||
document.getElementById('collection-cancel-btn').addEventListener('click', closeModal);
|
||||
document.getElementById('delete-collection-cancel-btn').addEventListener('click', closeDeleteModal);
|
||||
|
||||
modal.querySelector('.modal-overlay').addEventListener('click', closeModal);
|
||||
deleteModal.querySelector('.modal-overlay').addEventListener('click', closeDeleteModal);
|
||||
|
||||
form.addEventListener('submit', async function(e) {
|
||||
e.preventDefault();
|
||||
const saveBtn = document.getElementById('collection-save-btn');
|
||||
saveBtn.disabled = true;
|
||||
saveBtn.textContent = 'Saving...';
|
||||
|
||||
const id = document.getElementById('collection-id').value;
|
||||
const data = {
|
||||
name: document.getElementById('collection-name').value,
|
||||
description: document.getElementById('collection-description').value || null,
|
||||
query_type: document.getElementById('collection-type').value,
|
||||
is_public: document.getElementById('collection-public').checked,
|
||||
};
|
||||
|
||||
try {
|
||||
if (id) {
|
||||
await LinkSync.updateCollection(id, data);
|
||||
} else {
|
||||
await LinkSync.createCollection(data);
|
||||
}
|
||||
closeModal();
|
||||
loadCollections();
|
||||
} catch (err) {
|
||||
alert('Failed to save collection: ' + err.message);
|
||||
} finally {
|
||||
saveBtn.disabled = false;
|
||||
saveBtn.textContent = 'Save';
|
||||
}
|
||||
});
|
||||
|
||||
document.getElementById('confirm-delete-collection-btn').addEventListener('click', async function() {
|
||||
if (!deleteTargetId) return;
|
||||
try {
|
||||
await LinkSync.deleteCollection(deleteTargetId);
|
||||
closeDeleteModal();
|
||||
loadCollections();
|
||||
} catch (err) {
|
||||
alert('Failed to delete collection: ' + err.message);
|
||||
}
|
||||
});
|
||||
|
||||
const urlParams = new URLSearchParams(window.location.search);
|
||||
if (urlParams.get('action') === 'new') {
|
||||
openCollectionModal();
|
||||
}
|
||||
|
||||
loadCollections();
|
||||
|
||||
function escapeHtml(str) {
|
||||
if (!str) return '';
|
||||
const div = document.createElement('div');
|
||||
div.textContent = str;
|
||||
return div.innerHTML;
|
||||
}
|
||||
});
|
||||
27
LinkSyncServer/static/js/dashboard.js
Normal file
27
LinkSyncServer/static/js/dashboard.js
Normal file
@@ -0,0 +1,27 @@
|
||||
document.addEventListener('DOMContentLoaded', async function() {
|
||||
const user = JSON.parse(localStorage.getItem('user') || 'null');
|
||||
if (!user) {
|
||||
window.location.href = '/login';
|
||||
return;
|
||||
}
|
||||
|
||||
document.getElementById('current-user').textContent = user.username;
|
||||
|
||||
if (user.role === 'admin') {
|
||||
document.getElementById('admin-section').style.display = '';
|
||||
}
|
||||
|
||||
try {
|
||||
const [links, collections, keys] = await Promise.all([
|
||||
LinkSync.getLinks({ limit: 1 }),
|
||||
LinkSync.getCollections(),
|
||||
LinkSync.getApiKeys(),
|
||||
]);
|
||||
|
||||
document.getElementById('link-count').textContent = Array.isArray(links) ? links.length : 0;
|
||||
document.getElementById('collection-count').textContent = Array.isArray(collections) ? collections.length : 0;
|
||||
document.getElementById('api-key-count').textContent = Array.isArray(keys) ? keys.length : 0;
|
||||
} catch (err) {
|
||||
console.error('Failed to load stats:', err);
|
||||
}
|
||||
});
|
||||
178
LinkSyncServer/static/js/links-page.js
Normal file
178
LinkSyncServer/static/js/links-page.js
Normal file
@@ -0,0 +1,178 @@
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
const linksList = document.getElementById('links-list');
|
||||
const modal = document.getElementById('link-modal');
|
||||
const deleteModal = document.getElementById('delete-modal');
|
||||
const form = document.getElementById('link-form');
|
||||
const searchInput = document.getElementById('search-input');
|
||||
let deleteTargetId = null;
|
||||
|
||||
async function loadLinks(search = '') {
|
||||
try {
|
||||
const links = await LinkSync.getLinks(search ? { search } : {});
|
||||
renderLinks(Array.isArray(links) ? links : []);
|
||||
} catch (err) {
|
||||
linksList.innerHTML = `<div class="empty-state"><p>Failed to load links: ${err.message}</p></div>`;
|
||||
}
|
||||
}
|
||||
|
||||
function renderLinks(links) {
|
||||
if (!links || links.length === 0) {
|
||||
linksList.innerHTML = '<div class="empty-state"><p>No links found.</p><button class="btn btn-primary" id="empty-add-btn">+ Add your first link</button></div>';
|
||||
document.getElementById('empty-add-btn').addEventListener('click', openModal);
|
||||
return;
|
||||
}
|
||||
|
||||
linksList.innerHTML = `
|
||||
<div class="data-table">
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th>Title</th>
|
||||
<th>URL</th>
|
||||
<th>Tags</th>
|
||||
<th>Created</th>
|
||||
<th>Actions</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
${links.map(link => `
|
||||
<tr>
|
||||
<td>${escapeHtml(link.title)}</td>
|
||||
<td class="truncate"><a href="${escapeHtml(link.url)}" target="_blank" class="link-url">${escapeHtml(link.url)}</a></td>
|
||||
<td><div class="tags">${(link.tags || []).map(t => `<span class="tag">${escapeHtml(t)}</span>`).join('')}</div></td>
|
||||
<td>${formatDate(link.created_at)}</td>
|
||||
<td class="actions">
|
||||
<button class="btn-icon" data-action="edit" data-id="${link.id}" title="Edit">✎</button>
|
||||
<button class="btn-icon" data-action="delete" data-id="${link.id}" title="Delete">🗑</button>
|
||||
</td>
|
||||
</tr>
|
||||
`).join('')}
|
||||
</tbody>
|
||||
</table>
|
||||
</div>
|
||||
`;
|
||||
|
||||
linksList.querySelectorAll('[data-action="edit"]').forEach(btn => {
|
||||
btn.addEventListener('click', () => editLink(btn.dataset.id));
|
||||
});
|
||||
linksList.querySelectorAll('[data-action="delete"]').forEach(btn => {
|
||||
btn.addEventListener('click', () => confirmDelete(btn.dataset.id));
|
||||
});
|
||||
}
|
||||
|
||||
function openModal(link = null) {
|
||||
document.getElementById('modal-title').textContent = link ? 'Edit Link' : 'Add Link';
|
||||
document.getElementById('link-id').value = link ? link.id : '';
|
||||
document.getElementById('link-url').value = link ? link.url : '';
|
||||
document.getElementById('link-title').value = link ? link.title : '';
|
||||
document.getElementById('link-description').value = link ? (link.description || '') : '';
|
||||
document.getElementById('link-notes').value = link ? (link.notes || '') : '';
|
||||
document.getElementById('link-tags').value = link ? (link.tags || []).join(', ') : '';
|
||||
document.getElementById('link-favicon').value = link ? (link.favicon_url || '') : '';
|
||||
document.getElementById('link-path').value = link ? (link.path || '') : '';
|
||||
modal.style.display = 'flex';
|
||||
}
|
||||
|
||||
async function editLink(id) {
|
||||
try {
|
||||
const links = await LinkSync.getLinks();
|
||||
const link = (Array.isArray(links) ? links : []).find(l => l.id === id);
|
||||
if (link) openModal(link);
|
||||
} catch (err) {
|
||||
alert('Failed to load link details');
|
||||
}
|
||||
}
|
||||
|
||||
function confirmDelete(id) {
|
||||
deleteTargetId = id;
|
||||
deleteModal.style.display = 'flex';
|
||||
}
|
||||
|
||||
function closeModal() {
|
||||
modal.style.display = 'none';
|
||||
form.reset();
|
||||
}
|
||||
|
||||
function closeDeleteModal() {
|
||||
deleteModal.style.display = 'none';
|
||||
deleteTargetId = null;
|
||||
}
|
||||
|
||||
document.getElementById('new-link-btn').addEventListener('click', () => openModal());
|
||||
document.getElementById('modal-close').addEventListener('click', closeModal);
|
||||
document.getElementById('cancel-btn').addEventListener('click', closeModal);
|
||||
document.getElementById('delete-cancel-btn').addEventListener('click', closeDeleteModal);
|
||||
|
||||
modal.querySelector('.modal-overlay').addEventListener('click', closeModal);
|
||||
deleteModal.querySelector('.modal-overlay').addEventListener('click', closeDeleteModal);
|
||||
|
||||
form.addEventListener('submit', async function(e) {
|
||||
e.preventDefault();
|
||||
const saveBtn = document.getElementById('save-btn');
|
||||
saveBtn.disabled = true;
|
||||
saveBtn.textContent = 'Saving...';
|
||||
|
||||
const id = document.getElementById('link-id').value;
|
||||
const tagsRaw = document.getElementById('link-tags').value;
|
||||
const data = {
|
||||
url: document.getElementById('link-url').value,
|
||||
title: document.getElementById('link-title').value,
|
||||
description: document.getElementById('link-description').value || null,
|
||||
notes: document.getElementById('link-notes').value || null,
|
||||
tags: tagsRaw ? tagsRaw.split(',').map(t => t.trim()).filter(t => t) : [],
|
||||
favicon_url: document.getElementById('link-favicon').value || null,
|
||||
path: document.getElementById('link-path').value || null,
|
||||
};
|
||||
|
||||
try {
|
||||
if (id) {
|
||||
await LinkSync.updateLink(id, data);
|
||||
} else {
|
||||
await LinkSync.createLink(data);
|
||||
}
|
||||
closeModal();
|
||||
loadLinks(searchInput.value);
|
||||
} catch (err) {
|
||||
alert('Failed to save link: ' + err.message);
|
||||
} finally {
|
||||
saveBtn.disabled = false;
|
||||
saveBtn.textContent = 'Save';
|
||||
}
|
||||
});
|
||||
|
||||
document.getElementById('confirm-delete-btn').addEventListener('click', async function() {
|
||||
if (!deleteTargetId) return;
|
||||
try {
|
||||
await LinkSync.deleteLink(deleteTargetId);
|
||||
closeDeleteModal();
|
||||
loadLinks(searchInput.value);
|
||||
} catch (err) {
|
||||
alert('Failed to delete link: ' + err.message);
|
||||
}
|
||||
});
|
||||
|
||||
document.getElementById('search-btn').addEventListener('click', () => loadLinks(searchInput.value));
|
||||
searchInput.addEventListener('keypress', function(e) {
|
||||
if (e.key === 'Enter') loadLinks(searchInput.value);
|
||||
});
|
||||
|
||||
const urlParams = new URLSearchParams(window.location.search);
|
||||
if (urlParams.get('action') === 'new') {
|
||||
openModal();
|
||||
}
|
||||
|
||||
loadLinks();
|
||||
|
||||
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();
|
||||
}
|
||||
});
|
||||
@@ -15,7 +15,20 @@ document.addEventListener("DOMContentLoaded", function () {
|
||||
headers,
|
||||
});
|
||||
if (!response.ok) {
|
||||
throw new Error(`API error: ${response.status}`);
|
||||
let errorMsg = `HTTP ${response.status}`;
|
||||
try {
|
||||
const error = await response.json();
|
||||
if (typeof error.detail === 'string') {
|
||||
errorMsg = error.detail;
|
||||
} else if (Array.isArray(error.detail)) {
|
||||
errorMsg = error.detail.map(d => d.msg || d).join(', ');
|
||||
} else if (error.detail && typeof error.detail === 'object') {
|
||||
errorMsg = error.detail.detail || error.detail.msg || JSON.stringify(error.detail);
|
||||
}
|
||||
} catch {
|
||||
// ignore parse error, use default
|
||||
}
|
||||
throw new Error(errorMsg);
|
||||
}
|
||||
return response.json();
|
||||
}
|
||||
@@ -50,6 +63,15 @@ document.addEventListener("DOMContentLoaded", function () {
|
||||
body: JSON.stringify(data),
|
||||
});
|
||||
},
|
||||
async updateCollection(id, data) {
|
||||
return apiFetch(`/collections/${id}`, {
|
||||
method: "PUT",
|
||||
body: JSON.stringify(data),
|
||||
});
|
||||
},
|
||||
async deleteCollection(id) {
|
||||
return apiFetch(`/collections/${id}`, { method: "DELETE" });
|
||||
},
|
||||
async executeQuery(expression, limit = 20) {
|
||||
return apiFetch(`/queries/execute?expression=${encodeURIComponent(expression)}&limit=${limit}`);
|
||||
},
|
||||
@@ -67,8 +89,41 @@ document.addEventListener("DOMContentLoaded", function () {
|
||||
localStorage.setItem("token", data.access_token);
|
||||
return data;
|
||||
},
|
||||
async getMe() {
|
||||
return apiFetch("/auth/me");
|
||||
},
|
||||
logout() {
|
||||
localStorage.removeItem("token");
|
||||
localStorage.removeItem("user");
|
||||
},
|
||||
async getUsers() {
|
||||
return apiFetch("/admin/users");
|
||||
},
|
||||
async createUser(data) {
|
||||
return apiFetch("/admin/users", {
|
||||
method: "POST",
|
||||
body: JSON.stringify(data),
|
||||
});
|
||||
},
|
||||
async updateUser(id, data) {
|
||||
return apiFetch(`/admin/users/${id}`, {
|
||||
method: "PUT",
|
||||
body: JSON.stringify(data),
|
||||
});
|
||||
},
|
||||
async deleteUser(id) {
|
||||
return apiFetch(`/admin/users/${id}`, { method: "DELETE" });
|
||||
},
|
||||
async getApiKeys() {
|
||||
return apiFetch("/auth/api-keys");
|
||||
},
|
||||
async createApiKey(name) {
|
||||
return apiFetch(`/auth/api-key?name=${encodeURIComponent(name)}`, {
|
||||
method: "POST",
|
||||
});
|
||||
},
|
||||
async deleteApiKey(id) {
|
||||
return apiFetch(`/auth/api-key/${id}`, { method: "DELETE" });
|
||||
},
|
||||
};
|
||||
});
|
||||
|
||||
Reference in New Issue
Block a user