fe4cbc3537
- Web UI: login, dashboard, links CRUD, collections, API keys, admin pages - Query engine: AND/OR/XOR with field filters, tag search, preview endpoint - Session management: token expiry detection, 401 interceptor, expiry banner - Links search: tags included, multi-word AND, query mode with set operations - Collections: static/dynamic, query builder with preview, public tree view - Save as Collection: convert search results (static) or query (dynamic) - Dashboard stats: resilient loading with allSettled pattern - Login page: redesigned with public collections tree view - Bug fix: query executor None fields crash (notes/description/url/title) - E2E tests: 20 Playwright tests covering all critical user flows - All 104 tests passing (84 unit/integration + 20 E2E)
152 lines
6.7 KiB
HTML
152 lines
6.7 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="en">
|
|
<head>
|
|
<meta charset="UTF-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
|
<title>LinkSync</title>
|
|
<link rel="stylesheet" href="/static/css/main.css?v={{ build_id }}">
|
|
</head>
|
|
<body class="public-page">
|
|
<header class="public-header">
|
|
<div class="public-header-inner">
|
|
<div class="public-brand">
|
|
<h1>LinkSync</h1>
|
|
</div>
|
|
<form id="login-form" class="public-login-form">
|
|
<div id="session-expired" class="info-message" style="display: none;">Session expired. Sign in again.</div>
|
|
<div id="login-error" class="error-message" style="display: none;"></div>
|
|
<input type="text" id="username" placeholder="Username" required autofocus>
|
|
<input type="password" id="password" placeholder="Password" required>
|
|
<button type="submit" class="btn btn-primary" id="login-btn">Sign In</button>
|
|
</form>
|
|
</div>
|
|
</header>
|
|
|
|
<main class="public-main">
|
|
<h2>Public Links</h2>
|
|
<div id="public-tree" class="public-tree">
|
|
<div class="loading">Loading public links...</div>
|
|
</div>
|
|
</main>
|
|
|
|
<script>
|
|
async function loadPublicTree() {
|
|
try {
|
|
const response = await fetch('/api/collections/public-tree');
|
|
if (!response.ok) throw new Error('Failed to load');
|
|
const collections = await response.json();
|
|
const container = document.getElementById('public-tree');
|
|
|
|
if (!collections || collections.length === 0) {
|
|
container.innerHTML = '<div class="empty-state"><p>No public collections yet.</p></div>';
|
|
return;
|
|
}
|
|
|
|
container.innerHTML = collections.map(col => {
|
|
const links = col.links || [];
|
|
const hasLinks = links.length > 0;
|
|
return `
|
|
<div class="tree-collection">
|
|
<button class="tree-toggle ${hasLinks ? 'expanded' : ''}" ${hasLinks ? '' : 'disabled'}>${hasLinks ? '▼' : '▶'}</button>
|
|
<span class="tree-collection-name">${escapeHtml(col.name)}</span>
|
|
<span class="tree-meta">${col.query_type} · ${links.length} link${links.length !== 1 ? 's' : ''}</span>
|
|
${col.description ? `<span class="tree-desc">${escapeHtml(col.description)}</span>` : ''}
|
|
<div class="tree-links" ${hasLinks ? '' : 'style="display:none"'}>
|
|
${links.map(link => `
|
|
<div class="tree-link">
|
|
<a href="${escapeHtml(link.url)}" target="_blank" class="tree-link-title">${escapeHtml(link.title)}</a>
|
|
<span class="tree-link-url">${escapeHtml(link.url)}</span>
|
|
${(link.tags || []).length > 0 ? `<span class="tags">${link.tags.map(t => `<span class="tag">${escapeHtml(t)}</span>`).join('')}</span>` : ''}
|
|
</div>
|
|
`).join('')}
|
|
</div>
|
|
</div>
|
|
`;
|
|
}).join('');
|
|
|
|
container.querySelectorAll('.tree-toggle').forEach(btn => {
|
|
btn.addEventListener('click', function() {
|
|
const links = this.parentElement.querySelector('.tree-links');
|
|
const isHidden = links.style.display === 'none';
|
|
links.style.display = isHidden ? '' : 'none';
|
|
this.textContent = isHidden ? '▼' : '▶';
|
|
});
|
|
});
|
|
} catch (err) {
|
|
document.getElementById('public-tree').innerHTML = '<div class="empty-state"><p>Could not load public links.</p></div>';
|
|
}
|
|
}
|
|
|
|
document.getElementById('login-form').addEventListener('submit', async function(e) {
|
|
e.preventDefault();
|
|
const btn = document.getElementById('login-btn');
|
|
const error = document.getElementById('login-error');
|
|
const username = document.getElementById('username').value;
|
|
const password = document.getElementById('password').value;
|
|
|
|
btn.disabled = true;
|
|
btn.textContent = 'Signing in...';
|
|
error.style.display = 'none';
|
|
|
|
try {
|
|
const formData = new URLSearchParams();
|
|
formData.append('username', username);
|
|
formData.append('password', password);
|
|
|
|
const response = await fetch('/api/auth/login', {
|
|
method: 'POST',
|
|
headers: { 'Content-Type': 'application/x-www-form-urlencoded' },
|
|
body: formData.toString(),
|
|
});
|
|
|
|
if (!response.ok) {
|
|
const data = await response.json();
|
|
throw new Error(data.detail || 'Invalid credentials');
|
|
}
|
|
|
|
const data = await response.json();
|
|
localStorage.setItem('token', data.access_token);
|
|
localStorage.setItem('user', JSON.stringify(data.user));
|
|
window.location.href = '/dashboard';
|
|
} catch (err) {
|
|
error.textContent = err.message;
|
|
error.style.display = 'block';
|
|
} finally {
|
|
btn.disabled = false;
|
|
btn.textContent = 'Sign In';
|
|
}
|
|
});
|
|
|
|
if (localStorage.getItem('token')) {
|
|
try {
|
|
const token = localStorage.getItem('token');
|
|
const payload = JSON.parse(atob(token.split('.')[1]));
|
|
const now = Math.floor(Date.now() / 1000);
|
|
if (payload.exp && now < payload.exp) {
|
|
window.location.href = '/dashboard';
|
|
} else {
|
|
localStorage.removeItem('token');
|
|
localStorage.removeItem('user');
|
|
}
|
|
} catch {
|
|
localStorage.removeItem('token');
|
|
localStorage.removeItem('user');
|
|
}
|
|
}
|
|
|
|
const params = new URLSearchParams(window.location.search);
|
|
if (params.get('expired') === '1') {
|
|
document.getElementById('session-expired').style.display = 'block';
|
|
}
|
|
|
|
loadPublicTree();
|
|
|
|
function escapeHtml(str) {
|
|
if (!str) return '';
|
|
const div = document.createElement('div');
|
|
div.textContent = str;
|
|
return div.innerHTML;
|
|
}
|
|
</script>
|
|
</body>
|
|
</html> |