feat: add web UI, query engine, session management, and 20 E2E tests
- 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)
This commit is contained in:
DavidSaylor
@@ -3,29 +3,80 @@
|
||||
<head>
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>Login - LinkSync</title>
|
||||
<link rel="stylesheet" href="/static/css/main.css">
|
||||
<title>LinkSync</title>
|
||||
<link rel="stylesheet" href="/static/css/main.css?v={{ build_id }}">
|
||||
</head>
|
||||
<body class="login-page">
|
||||
<div class="login-container">
|
||||
<div class="login-card">
|
||||
<h1>LinkSync</h1>
|
||||
<p class="login-subtitle">Sign in to your account</p>
|
||||
<form id="login-form">
|
||||
<div class="form-group">
|
||||
<label for="username">Username</label>
|
||||
<input type="text" id="username" name="username" required autofocus>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="password">Password</label>
|
||||
<input type="password" id="password" name="password" required>
|
||||
</div>
|
||||
<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>
|
||||
<button type="submit" class="btn btn-primary btn-full" id="login-btn">Sign In</button>
|
||||
<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>
|
||||
</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');
|
||||
@@ -67,8 +118,35 @@
|
||||
});
|
||||
|
||||
if (localStorage.getItem('token')) {
|
||||
window.location.href = '/dashboard';
|
||||
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>
|
||||
</html>
|
||||
Reference in New Issue
Block a user