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
@@ -68,5 +68,5 @@
|
||||
{% endblock %}
|
||||
|
||||
{% block extra_js %}
|
||||
<script src="/static/js/admin-page.js"></script>
|
||||
<script src="/static/js/admin-page.js?v={{ build_id }}"></script>
|
||||
{% endblock %}
|
||||
|
||||
@@ -66,5 +66,5 @@
|
||||
{% endblock %}
|
||||
|
||||
{% block extra_js %}
|
||||
<script src="/static/js/apikeys-page.js"></script>
|
||||
<script src="/static/js/apikeys-page.js?v={{ build_id }}"></script>
|
||||
{% endblock %}
|
||||
|
||||
@@ -4,7 +4,7 @@
|
||||
<meta charset="UTF-8">
|
||||
<meta name="viewport" content="width=device-width, initial-scale=1.0">
|
||||
<title>{% block title %}LinkSync{% endblock %}</title>
|
||||
<link rel="stylesheet" href="/static/css/main.css">
|
||||
<link rel="stylesheet" href="/static/css/main.css?v={{ build_id }}">
|
||||
{% block extra_css %}{% endblock %}
|
||||
</head>
|
||||
<body>
|
||||
@@ -31,7 +31,7 @@
|
||||
<footer class="footer">
|
||||
<p>LinkSyncServer © 2026</p>
|
||||
</footer>
|
||||
<script src="/static/js/main.js"></script>
|
||||
<script src="/static/js/main.js?v={{ build_id }}"></script>
|
||||
<script>
|
||||
document.addEventListener('DOMContentLoaded', function() {
|
||||
const token = localStorage.getItem('token');
|
||||
|
||||
@@ -36,6 +36,18 @@
|
||||
<option value="dynamic">Dynamic (query-based)</option>
|
||||
</select>
|
||||
</div>
|
||||
<div id="query-builder-section" style="display: none;">
|
||||
<div class="form-group">
|
||||
<label for="collection-query">Query Expression</label>
|
||||
<input type="text" id="collection-query" placeholder="e.g. personal AND lan NOT ai">
|
||||
<small class="form-hint">Supports: AND, OR, XOR, parentheses, field filters (tag:, url:, title:)</small>
|
||||
</div>
|
||||
<div class="form-actions" style="margin-top: 0; margin-bottom: 1rem;">
|
||||
<button type="button" class="btn btn-sm btn-secondary" id="preview-query-btn">Preview Results</button>
|
||||
<span id="query-status" class="query-status"></span>
|
||||
</div>
|
||||
<div id="query-preview-results" class="query-preview" style="display: none;"></div>
|
||||
</div>
|
||||
<div class="form-group checkbox-group">
|
||||
<label>
|
||||
<input type="checkbox" id="collection-public">
|
||||
@@ -64,5 +76,5 @@
|
||||
{% endblock %}
|
||||
|
||||
{% block extra_js %}
|
||||
<script src="/static/js/collections-page.js"></script>
|
||||
<script src="/static/js/collections-page.js?v={{ build_id }}"></script>
|
||||
{% endblock %}
|
||||
|
||||
@@ -64,5 +64,5 @@
|
||||
{% endblock %}
|
||||
|
||||
{% block extra_js %}
|
||||
<script src="/static/js/dashboard.js"></script>
|
||||
<script src="/static/js/dashboard.js?v={{ build_id }}"></script>
|
||||
{% endblock %}
|
||||
|
||||
@@ -9,8 +9,51 @@
|
||||
</div>
|
||||
|
||||
<div class="search-bar">
|
||||
<input type="text" id="search-input" placeholder="Search links by title or URL...">
|
||||
<div class="search-mode-toggle">
|
||||
<button class="btn btn-sm btn-outline search-mode-btn active" data-mode="simple" id="simple-search-btn">Simple</button>
|
||||
<button class="btn btn-sm btn-outline search-mode-btn" data-mode="query" id="query-search-btn">Query</button>
|
||||
</div>
|
||||
<input type="text" id="search-input" placeholder="Search links by title, URL, tags, or notes...">
|
||||
<input type="text" id="query-input" placeholder="e.g. personal AND lan NOT ai" style="display: none;">
|
||||
<button class="btn btn-secondary" id="search-btn">Search</button>
|
||||
<button class="btn btn-outline" id="save-collection-btn" title="Save current results as a collection">Save as Collection</button>
|
||||
</div>
|
||||
|
||||
<div id="save-collection-modal" class="modal" style="display: none;">
|
||||
<div class="modal-overlay"></div>
|
||||
<div class="modal-content modal-sm">
|
||||
<div class="modal-header">
|
||||
<h2>Save as Collection</h2>
|
||||
<button class="modal-close" id="save-collection-modal-close">×</button>
|
||||
</div>
|
||||
<form id="save-collection-form">
|
||||
<div class="form-group">
|
||||
<label for="save-collection-name">Collection Name *</label>
|
||||
<input type="text" id="save-collection-name" required>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="save-collection-desc">Description</label>
|
||||
<textarea id="save-collection-desc" rows="2"></textarea>
|
||||
</div>
|
||||
<div class="form-group">
|
||||
<label for="save-collection-type">Type</label>
|
||||
<select id="save-collection-type">
|
||||
<option value="static">Static (current results)</option>
|
||||
<option value="dynamic">Dynamic (query-based)</option>
|
||||
</select>
|
||||
</div>
|
||||
<div class="form-group checkbox-group">
|
||||
<label>
|
||||
<input type="checkbox" id="save-collection-public">
|
||||
Public
|
||||
</label>
|
||||
</div>
|
||||
<div class="form-actions">
|
||||
<button type="button" class="btn btn-secondary" id="save-collection-cancel-btn">Cancel</button>
|
||||
<button type="submit" class="btn btn-primary" id="save-collection-save-btn">Save</button>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div id="links-list" class="links-table">
|
||||
@@ -76,5 +119,5 @@
|
||||
{% endblock %}
|
||||
|
||||
{% block extra_js %}
|
||||
<script src="/static/js/links-page.js"></script>
|
||||
<script src="/static/js/links-page.js?v={{ build_id }}"></script>
|
||||
{% endblock %}
|
||||
|
||||
@@ -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