feat: seed script, forgot-password, hover cards, shortcuts, OpenAPI docs, runbook (phase 12)
- scripts/seed.go: idempotent demo data per §11.11 (make seed) - forgot/reset password: SMTP-gated, one-shot TTL tokens, uniform responses against enumeration, sessions revoked on reset; login page link + pages - profile hover cards on [data-user-card] elements (§11.13) - keyboard shortcuts: g b/m/t/h navigation, / focuses search (§10) - bulk archive endpoint (§11.9) - hand-written OpenAPI 3.1 covering §6, served at /api/docs + yaml download - make backup / make restore (mongodump archive via the mongo container) - README: quick start, demo data, runbook, breaker/job operations, working Caddy + nginx reverse-proxy samples (WS block, client_max_body_size), documented later-stubs (§11.24) - smoke.sh now exercises register → logout → login → me → board → pages Co-Authored-By: Claude Fable 5 <noreply@anthropic.com>
This commit is contained in:
etalon
@@ -155,6 +155,11 @@ table.list th { color: var(--muted); font-size: 0.875rem; }
|
||||
.toast.err { border-left-color: var(--err); }
|
||||
.toast.ok { border-left-color: var(--ok); }
|
||||
|
||||
.hovercard {
|
||||
position: absolute; z-index: 90; width: 300px;
|
||||
box-shadow: 0 4px 16px rgba(0,0,0,0.25);
|
||||
}
|
||||
|
||||
/* chat */
|
||||
.chat-layout { display: grid; grid-template-columns: 280px 1fr; gap: 16px; min-height: 70vh; }
|
||||
.chat-sidebar { overflow: auto; }
|
||||
|
||||
@@ -0,0 +1,19 @@
|
||||
import { api } from '/static/js/api.js';
|
||||
|
||||
document.getElementById('forgot-form').addEventListener('submit', async (e) => {
|
||||
e.preventDefault();
|
||||
const errorBox = document.getElementById('error');
|
||||
const okBox = document.getElementById('ok');
|
||||
errorBox.textContent = '';
|
||||
okBox.textContent = '';
|
||||
try {
|
||||
await api('POST', '/api/v1/auth/forgot', {
|
||||
email: document.getElementById('email').value.trim(),
|
||||
});
|
||||
okBox.textContent = 'If an account with that email exists, a reset link is on its way.';
|
||||
} catch (err) {
|
||||
errorBox.textContent = err.code === 'smtp_disabled'
|
||||
? 'Email is not configured on this server — ask an administrator to reset your password.'
|
||||
: err.message;
|
||||
}
|
||||
});
|
||||
@@ -0,0 +1,19 @@
|
||||
import { api } from '/static/js/api.js';
|
||||
|
||||
document.getElementById('reset-form').addEventListener('submit', async (e) => {
|
||||
e.preventDefault();
|
||||
const errorBox = document.getElementById('error');
|
||||
errorBox.textContent = '';
|
||||
const pw = document.getElementById('new').value;
|
||||
if (pw !== document.getElementById('confirm').value) {
|
||||
errorBox.textContent = 'Passwords do not match.';
|
||||
return;
|
||||
}
|
||||
try {
|
||||
await api('POST', '/api/v1/auth/reset', {
|
||||
token: new URLSearchParams(window.location.search).get('token') || '',
|
||||
newPassword: pw,
|
||||
});
|
||||
window.location.href = '/login';
|
||||
} catch (err) { errorBox.textContent = err.message; }
|
||||
});
|
||||
@@ -0,0 +1,83 @@
|
||||
// Global keyboard shortcuts (§10): g b → board, g m → messages, / → search.
|
||||
// Plus profile hover cards (§11.13) for any [data-user-card] element.
|
||||
import { api } from '/static/js/api.js';
|
||||
|
||||
let pendingG = false;
|
||||
let gTimer = null;
|
||||
|
||||
function typingTarget(e) {
|
||||
const t = e.target;
|
||||
return t.isContentEditable || ['INPUT', 'TEXTAREA', 'SELECT'].includes(t.tagName);
|
||||
}
|
||||
|
||||
document.addEventListener('keydown', (e) => {
|
||||
if (typingTarget(e) || e.ctrlKey || e.metaKey || e.altKey) return;
|
||||
if (e.key === '/') {
|
||||
const search = document.querySelector('input[type=search]');
|
||||
if (search) { e.preventDefault(); search.focus(); }
|
||||
return;
|
||||
}
|
||||
if (pendingG) {
|
||||
pendingG = false;
|
||||
clearTimeout(gTimer);
|
||||
const map = { b: '/board', m: '/messages', h: '/', t: '/my-tasks', a: '/consultant/board' };
|
||||
if (map[e.key]) { e.preventDefault(); window.location.href = map[e.key]; }
|
||||
return;
|
||||
}
|
||||
if (e.key === 'g') {
|
||||
pendingG = true;
|
||||
gTimer = setTimeout(() => { pendingG = false; }, 1200);
|
||||
}
|
||||
});
|
||||
|
||||
// ---- hover cards ----
|
||||
let cardEl = null;
|
||||
let hideTimer = null;
|
||||
const esc = (s) => String(s ?? '').replace(/[&<>"']/g, (c) => ({
|
||||
'&': '&', '<': '<', '>': '>', '"': '"', "'": ''',
|
||||
}[c]));
|
||||
|
||||
function hideCard() {
|
||||
if (cardEl) { cardEl.remove(); cardEl = null; }
|
||||
}
|
||||
|
||||
async function showCard(target, userId) {
|
||||
try {
|
||||
const res = await api('GET', `/api/v1/users/${userId}/card`);
|
||||
const c = res.card;
|
||||
hideCard();
|
||||
cardEl = document.createElement('div');
|
||||
cardEl.className = 'hovercard card';
|
||||
const roles = ['admin', 'consultant', 'developer'].filter((r) => c.roles[r]);
|
||||
cardEl.innerHTML = `
|
||||
<div class="spread">
|
||||
${c.avatarFileId ? `<img class="avatar large" src="/files/${c.avatarFileId}" alt="">`
|
||||
: `<span class="avatar large">${esc(c.name.slice(0, 1).toUpperCase())}</span>`}
|
||||
<div>
|
||||
<strong>${esc(c.name)}</strong><br>
|
||||
${roles.map((r) => `<span class="badge">${r}</span>`).join(' ')}
|
||||
</div>
|
||||
</div>
|
||||
${c.bio ? `<p class="muted">${esc(c.bio.slice(0, 160))}</p>` : ''}
|
||||
${c.contact && c.contact.location ? `<p class="muted">📍 ${esc(c.contact.location)}</p>` : ''}`;
|
||||
document.body.appendChild(cardEl);
|
||||
const rect = target.getBoundingClientRect();
|
||||
cardEl.style.left = Math.min(rect.left, window.innerWidth - 320) + 'px';
|
||||
cardEl.style.top = (rect.bottom + window.scrollY + 6) + 'px';
|
||||
cardEl.addEventListener('mouseenter', () => clearTimeout(hideTimer));
|
||||
cardEl.addEventListener('mouseleave', () => { hideTimer = setTimeout(hideCard, 200); });
|
||||
} catch (e) { /* card is best-effort */ }
|
||||
}
|
||||
|
||||
document.addEventListener('mouseover', (e) => {
|
||||
const target = e.target.closest('[data-user-card]');
|
||||
if (!target) return;
|
||||
clearTimeout(hideTimer);
|
||||
hideTimer = setTimeout(() => showCard(target, target.dataset.userCard), 350);
|
||||
});
|
||||
document.addEventListener('mouseout', (e) => {
|
||||
if (e.target.closest('[data-user-card]')) {
|
||||
clearTimeout(hideTimer);
|
||||
hideTimer = setTimeout(hideCard, 250);
|
||||
}
|
||||
});
|
||||
@@ -0,0 +1,17 @@
|
||||
{{define "content"}}
|
||||
<div class="card">
|
||||
<h1>Forgot password</h1>
|
||||
<div class="error-box" id="error" role="alert"></div>
|
||||
<div class="ok-box" id="ok" role="status"></div>
|
||||
<form id="forgot-form">
|
||||
<div class="field">
|
||||
<label for="email">Email</label>
|
||||
<input type="email" id="email" autocomplete="email" required>
|
||||
</div>
|
||||
<div class="spread">
|
||||
<button class="btn primary" type="submit">Send reset link</button>
|
||||
<a href="/login">Back to log in</a>
|
||||
</div>
|
||||
</form>
|
||||
</div>
|
||||
{{end}}
|
||||
@@ -57,7 +57,8 @@
|
||||
</main>
|
||||
<div id="toasts" aria-live="polite"></div>
|
||||
<script type="module" src="/static/js/nav.js"></script>
|
||||
{{if .User}}<script type="module" src="/static/js/notifications.js"></script>{{end}}
|
||||
{{if .User}}<script type="module" src="/static/js/notifications.js"></script>
|
||||
<script type="module" src="/static/js/shortcuts.js"></script>{{end}}
|
||||
{{range .Scripts}}<script type="module" src="{{.}}"></script>
|
||||
{{end}}
|
||||
</body>
|
||||
|
||||
@@ -13,7 +13,7 @@
|
||||
</div>
|
||||
<div class="spread">
|
||||
<button class="btn primary" type="submit">Log in</button>
|
||||
<a href="/register">Create an account</a>
|
||||
<span><a href="/forgot-password">Forgot password?</a> · <a href="/register">Create an account</a></span>
|
||||
</div>
|
||||
</form>
|
||||
{{if .OIDCEnabled}}
|
||||
|
||||
@@ -0,0 +1,17 @@
|
||||
{{define "content"}}
|
||||
<div class="card">
|
||||
<h1>Set a new password</h1>
|
||||
<div class="error-box" id="error" role="alert"></div>
|
||||
<form id="reset-form">
|
||||
<div class="field">
|
||||
<label for="new">New password</label>
|
||||
<input type="password" id="new" autocomplete="new-password" minlength="8" required>
|
||||
</div>
|
||||
<div class="field">
|
||||
<label for="confirm">Confirm new password</label>
|
||||
<input type="password" id="confirm" autocomplete="new-password" minlength="8" required>
|
||||
</div>
|
||||
<button class="btn primary" type="submit">Set password</button>
|
||||
</form>
|
||||
</div>
|
||||
{{end}}
|
||||
Reference in New Issue
Block a user