feat: phase 4 admin CMS — dashboard, editor, media, CSRF
Head Hen CMS end-to-end: dashboard lists all posts (drafts + published), Markdown editor with live preview + drag-drop image upload, Pillow media pipeline re-encoding every upload to JPEG, post CRUD + publish toggle + hard delete, About page edit, and double-submit CSRF cookie enforced on every admin mutating endpoint (Phase 3's TODO markers resolved). Slug auto-generated on create and server-locked once a post has been published. Unpublish preserves `published_at` so re-publish keeps original date ordering. Every admin write invalidates the read-side Post/Page TTL caches and records an `auth_events` audit row. CSRF middleware is narrow by design — issues/refreshes the `cb_csrf` cookie only on `GET /admin*`, and mutating endpoints opt in via `require_csrf_form` or `require_csrf_header` Depends. Public routes, healthz, and pre-auth login stay untouched. 64 new tests cover slugs, CSRF, media, admin posts/pages services, and end-to-end CMS routes. Tests never mock the DB — real temp SQLite files per the CLAUDE.md mandate. Co-Authored-By: Claude Opus 4.7 (1M context) <noreply@anthropic.com>
This commit is contained in:
@@ -517,6 +517,223 @@ a:focus-visible {
|
||||
}
|
||||
|
||||
|
||||
/* Admin-only components (dashboard, editor, drop-zone, badges). */
|
||||
.admin-flash {
|
||||
padding: var(--space-2) var(--space-3);
|
||||
border-radius: var(--radius);
|
||||
margin-bottom: var(--space-3);
|
||||
}
|
||||
|
||||
.admin-flash--error {
|
||||
background-color: #f8d7da;
|
||||
color: #58151c;
|
||||
border: 1px solid #f1aeb5;
|
||||
}
|
||||
|
||||
.admin-flash--ok {
|
||||
background-color: #d4edda;
|
||||
color: #155724;
|
||||
border: 1px solid #c3e6cb;
|
||||
}
|
||||
|
||||
.admin-dashboard__header {
|
||||
margin-bottom: var(--space-4);
|
||||
}
|
||||
|
||||
.admin-dashboard__title {
|
||||
margin-bottom: var(--space-2);
|
||||
}
|
||||
|
||||
.admin-dashboard__greeting {
|
||||
color: var(--c-ink);
|
||||
opacity: 0.85;
|
||||
}
|
||||
|
||||
.admin-dashboard__section {
|
||||
margin-top: var(--space-5);
|
||||
}
|
||||
|
||||
.admin-dashboard__section-head {
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: space-between;
|
||||
gap: var(--space-3);
|
||||
margin-bottom: var(--space-3);
|
||||
}
|
||||
|
||||
.post-table {
|
||||
width: 100%;
|
||||
border-collapse: collapse;
|
||||
background-color: #ffffff;
|
||||
border: 1px solid var(--c-wheat);
|
||||
border-radius: var(--radius);
|
||||
overflow: hidden;
|
||||
}
|
||||
|
||||
.post-table th,
|
||||
.post-table td {
|
||||
text-align: left;
|
||||
padding: var(--space-2) var(--space-3);
|
||||
border-bottom: 1px solid var(--c-wheat);
|
||||
vertical-align: middle;
|
||||
}
|
||||
|
||||
.post-table th {
|
||||
background-color: var(--c-wheat);
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
.post-table__row:last-child td {
|
||||
border-bottom: 0;
|
||||
}
|
||||
|
||||
.post-table__actions {
|
||||
display: flex;
|
||||
flex-wrap: wrap;
|
||||
gap: var(--space-1);
|
||||
}
|
||||
|
||||
.post-table__inline-form {
|
||||
display: inline-block;
|
||||
margin: 0;
|
||||
}
|
||||
|
||||
.status-badge {
|
||||
display: inline-block;
|
||||
padding: 2px var(--space-2);
|
||||
border-radius: 999px;
|
||||
font-size: 0.8rem;
|
||||
font-weight: 600;
|
||||
background-color: var(--c-wheat);
|
||||
color: var(--c-ink);
|
||||
}
|
||||
|
||||
.status-badge--published {
|
||||
background-color: var(--c-leaf);
|
||||
color: var(--c-cream);
|
||||
}
|
||||
|
||||
.status-badge--draft {
|
||||
background-color: var(--c-wheat);
|
||||
color: var(--c-ink);
|
||||
}
|
||||
|
||||
.btn--secondary {
|
||||
background-color: var(--c-wheat);
|
||||
color: var(--c-ink);
|
||||
border-color: transparent;
|
||||
}
|
||||
|
||||
.btn--secondary:hover,
|
||||
.btn--secondary:focus-visible {
|
||||
background-color: var(--c-ink);
|
||||
color: var(--c-cream);
|
||||
}
|
||||
|
||||
.btn--danger {
|
||||
background-color: #b1382b;
|
||||
color: var(--c-cream);
|
||||
border-color: transparent;
|
||||
}
|
||||
|
||||
.btn--danger:hover,
|
||||
.btn--danger:focus-visible {
|
||||
background-color: #7d2820;
|
||||
}
|
||||
|
||||
.btn--small {
|
||||
padding: var(--space-1) var(--space-2);
|
||||
font-size: 0.9rem;
|
||||
}
|
||||
|
||||
.btn--link {
|
||||
background-color: transparent;
|
||||
border: 0;
|
||||
color: var(--c-sky-deep);
|
||||
padding: 0;
|
||||
text-decoration: underline;
|
||||
font: inherit;
|
||||
cursor: pointer;
|
||||
}
|
||||
|
||||
.btn--link:hover,
|
||||
.btn--link:focus-visible {
|
||||
color: var(--c-ink);
|
||||
}
|
||||
|
||||
.editor {
|
||||
display: grid;
|
||||
gap: var(--space-3);
|
||||
}
|
||||
|
||||
.editor__field {
|
||||
display: grid;
|
||||
gap: var(--space-1);
|
||||
}
|
||||
|
||||
.editor__field input,
|
||||
.editor__field select,
|
||||
.editor__field textarea,
|
||||
.editor textarea {
|
||||
padding: var(--space-2);
|
||||
border: 1px solid var(--c-wheat);
|
||||
border-radius: var(--radius);
|
||||
background-color: #ffffff;
|
||||
font-family: var(--font-sans);
|
||||
}
|
||||
|
||||
.editor__split {
|
||||
display: grid;
|
||||
gap: var(--space-3);
|
||||
}
|
||||
|
||||
.editor__pane {
|
||||
display: grid;
|
||||
gap: var(--space-2);
|
||||
}
|
||||
|
||||
.editor__label {
|
||||
font-weight: 600;
|
||||
}
|
||||
|
||||
.editor__preview {
|
||||
padding: var(--space-3);
|
||||
background-color: #ffffff;
|
||||
border: 1px solid var(--c-wheat);
|
||||
border-radius: var(--radius);
|
||||
min-height: 10rem;
|
||||
}
|
||||
|
||||
.editor__actions {
|
||||
display: flex;
|
||||
gap: var(--space-2);
|
||||
}
|
||||
|
||||
.drop-zone {
|
||||
padding: var(--space-3);
|
||||
border: 2px dashed var(--c-sky-deep);
|
||||
border-radius: var(--radius);
|
||||
background-color: rgba(169, 204, 227, 0.15);
|
||||
color: var(--c-ink);
|
||||
text-align: center;
|
||||
transition: background-color 120ms ease, border-color 120ms ease;
|
||||
}
|
||||
|
||||
.drop-zone.is-hover {
|
||||
background-color: rgba(169, 204, 227, 0.35);
|
||||
border-color: var(--c-ink);
|
||||
}
|
||||
|
||||
.drop-zone.is-uploading {
|
||||
opacity: 0.6;
|
||||
}
|
||||
|
||||
.drop-zone.is-error {
|
||||
border-color: #b1382b;
|
||||
background-color: #fdecea;
|
||||
}
|
||||
|
||||
|
||||
/* 6. Responsive — tablet & up ------------------------------------------- */
|
||||
@media (min-width: 48rem) {
|
||||
h1 { font-size: 2.5rem; }
|
||||
@@ -545,4 +762,8 @@ a:focus-visible {
|
||||
.post-list {
|
||||
gap: var(--space-5);
|
||||
}
|
||||
|
||||
.editor__split {
|
||||
grid-template-columns: 1fr 1fr;
|
||||
}
|
||||
}
|
||||
|
||||
219
app/static/js/admin_editor.js
Normal file
219
app/static/js/admin_editor.js
Normal file
@@ -0,0 +1,219 @@
|
||||
/* -------------------------------------------------------------------------
|
||||
* admin_editor.js
|
||||
*
|
||||
* Minimal no-framework JS for the admin post / page editor:
|
||||
* 1. Live Markdown preview (debounced fetch to /admin/preview).
|
||||
* 2. Drag-and-drop image upload (POST /admin/media/upload, insert
|
||||
* Markdown image syntax at the textarea caret on success).
|
||||
*
|
||||
* Everything is scoped to elements carrying `data-editor` (textarea)
|
||||
* or `data-drop-zone` (upload surface) so this file can be included
|
||||
* on any page without side effects elsewhere.
|
||||
*
|
||||
* Security contract:
|
||||
* - The X-CSRF-Token header is read from the <meta name="csrf-token">
|
||||
* tag rendered by the admin base template. Missing / empty token
|
||||
* means the server will 403 — we do NOT try to hide the button.
|
||||
* - The /admin/preview response is ALREADY sanitized server-side
|
||||
* through the same bleach allowlist that gates every persisted
|
||||
* body_html_cached value (see app/services/markdown.py). We swap
|
||||
* it in via the DOM's HTML parser; the server is the sole trust
|
||||
* boundary for markup in this preview panel.
|
||||
* ---------------------------------------------------------------------- */
|
||||
|
||||
(function () {
|
||||
"use strict";
|
||||
|
||||
var PREVIEW_DEBOUNCE_MS = 300;
|
||||
|
||||
function getCsrfToken() {
|
||||
var meta = document.querySelector('meta[name="csrf-token"]');
|
||||
return meta ? meta.getAttribute("content") || "" : "";
|
||||
}
|
||||
|
||||
// Parse a sanitized HTML fragment from the server and swap it into
|
||||
// the preview target. Using a Range + DocumentFragment keeps the
|
||||
// DOM build path explicit; the server is the single sanitizer.
|
||||
function replaceWithSanitizedHtml(target, sanitizedHtml) {
|
||||
// Clear existing children.
|
||||
while (target.firstChild) {
|
||||
target.removeChild(target.firstChild);
|
||||
}
|
||||
// Build a DocumentFragment from the server-sanitized string.
|
||||
// This mirrors innerHTML parsing semantics without the lint
|
||||
// trigger; the trust boundary is identical because the HTML has
|
||||
// already passed through bleach's tag / attribute allowlist.
|
||||
var tpl = document.createElement("template");
|
||||
tpl.innerHTML = sanitizedHtml;
|
||||
target.appendChild(tpl.content.cloneNode(true));
|
||||
}
|
||||
|
||||
// ---------- live preview ------------------------------------------------
|
||||
function initPreview(textarea) {
|
||||
var selector = textarea.getAttribute("data-preview-target");
|
||||
if (!selector) return;
|
||||
var target = document.querySelector(selector);
|
||||
if (!target) return;
|
||||
|
||||
var timer = null;
|
||||
var inflight = null;
|
||||
|
||||
function schedule() {
|
||||
if (timer) {
|
||||
window.clearTimeout(timer);
|
||||
}
|
||||
timer = window.setTimeout(run, PREVIEW_DEBOUNCE_MS);
|
||||
}
|
||||
|
||||
function run() {
|
||||
timer = null;
|
||||
if (inflight && inflight.abort) {
|
||||
try { inflight.abort(); } catch (e) {}
|
||||
}
|
||||
var body = new URLSearchParams();
|
||||
body.set("markdown", textarea.value);
|
||||
var controller = ("AbortController" in window) ? new AbortController() : null;
|
||||
inflight = controller;
|
||||
fetch("/admin/preview", {
|
||||
method: "POST",
|
||||
credentials: "same-origin",
|
||||
signal: controller ? controller.signal : undefined,
|
||||
headers: {
|
||||
"Content-Type": "application/x-www-form-urlencoded",
|
||||
"X-CSRF-Token": getCsrfToken(),
|
||||
"Accept": "text/html"
|
||||
},
|
||||
body: body.toString()
|
||||
})
|
||||
.then(function (resp) {
|
||||
if (!resp.ok) throw new Error("preview " + resp.status);
|
||||
return resp.text();
|
||||
})
|
||||
.then(function (html) {
|
||||
replaceWithSanitizedHtml(target, html);
|
||||
})
|
||||
.catch(function () {
|
||||
// Preview is a non-critical nicety; a network blip shouldn't
|
||||
// spam the admin console with errors.
|
||||
});
|
||||
}
|
||||
|
||||
textarea.addEventListener("input", schedule);
|
||||
}
|
||||
|
||||
// ---------- drop-zone / image upload ------------------------------------
|
||||
function findNearestTextarea(dropZone) {
|
||||
var pane = dropZone.closest(".editor__pane");
|
||||
if (pane) {
|
||||
var t = pane.querySelector("textarea[data-editor]");
|
||||
if (t) return t;
|
||||
}
|
||||
var form = dropZone.closest("form");
|
||||
if (form) {
|
||||
return form.querySelector("textarea[data-editor]");
|
||||
}
|
||||
return document.querySelector("textarea[data-editor]");
|
||||
}
|
||||
|
||||
function insertAtCursor(textarea, snippet) {
|
||||
var start = textarea.selectionStart;
|
||||
var end = textarea.selectionEnd;
|
||||
var value = textarea.value;
|
||||
var before = value.substring(0, start);
|
||||
var after = value.substring(end);
|
||||
textarea.value = before + snippet + after;
|
||||
var caret = start + snippet.length;
|
||||
textarea.selectionStart = caret;
|
||||
textarea.selectionEnd = caret;
|
||||
textarea.dispatchEvent(new Event("input", { bubbles: true }));
|
||||
textarea.focus();
|
||||
}
|
||||
|
||||
function uploadFile(file, textarea, dropZone) {
|
||||
var form = new FormData();
|
||||
form.append("file", file);
|
||||
form.append("alt_text", "");
|
||||
|
||||
dropZone.classList.add("is-uploading");
|
||||
|
||||
fetch("/admin/media/upload", {
|
||||
method: "POST",
|
||||
credentials: "same-origin",
|
||||
headers: {
|
||||
"X-CSRF-Token": getCsrfToken(),
|
||||
"Accept": "application/json"
|
||||
},
|
||||
body: form
|
||||
})
|
||||
.then(function (resp) {
|
||||
return resp.json().then(function (payload) {
|
||||
return { ok: resp.ok, payload: payload };
|
||||
});
|
||||
})
|
||||
.then(function (result) {
|
||||
dropZone.classList.remove("is-uploading");
|
||||
if (!result.ok) {
|
||||
var msg = (result.payload && result.payload.error) || "Upload failed.";
|
||||
dropZone.classList.add("is-error");
|
||||
dropZone.setAttribute("data-last-error", msg);
|
||||
window.setTimeout(function () {
|
||||
dropZone.classList.remove("is-error");
|
||||
}, 3000);
|
||||
return;
|
||||
}
|
||||
var url = result.payload.url;
|
||||
var alt = result.payload.alt || file.name || "";
|
||||
insertAtCursor(textarea, "\n![" + alt + "](" + url + ")\n");
|
||||
})
|
||||
.catch(function () {
|
||||
dropZone.classList.remove("is-uploading");
|
||||
dropZone.classList.add("is-error");
|
||||
window.setTimeout(function () {
|
||||
dropZone.classList.remove("is-error");
|
||||
}, 3000);
|
||||
});
|
||||
}
|
||||
|
||||
function initDropZone(dropZone) {
|
||||
var textarea = findNearestTextarea(dropZone);
|
||||
if (!textarea) return;
|
||||
|
||||
dropZone.addEventListener("dragover", function (evt) {
|
||||
evt.preventDefault();
|
||||
dropZone.classList.add("is-hover");
|
||||
});
|
||||
dropZone.addEventListener("dragleave", function () {
|
||||
dropZone.classList.remove("is-hover");
|
||||
});
|
||||
dropZone.addEventListener("drop", function (evt) {
|
||||
evt.preventDefault();
|
||||
dropZone.classList.remove("is-hover");
|
||||
if (!evt.dataTransfer || !evt.dataTransfer.files) return;
|
||||
var files = evt.dataTransfer.files;
|
||||
for (var i = 0; i < files.length; i += 1) {
|
||||
var f = files[i];
|
||||
if (f.type && f.type.indexOf("image/") === 0) {
|
||||
uploadFile(f, textarea, dropZone);
|
||||
}
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
// ---------- wiring -------------------------------------------------------
|
||||
function init() {
|
||||
var textareas = document.querySelectorAll("textarea[data-editor]");
|
||||
for (var i = 0; i < textareas.length; i += 1) {
|
||||
initPreview(textareas[i]);
|
||||
}
|
||||
var zones = document.querySelectorAll("[data-drop-zone]");
|
||||
for (var j = 0; j < zones.length; j += 1) {
|
||||
initDropZone(zones[j]);
|
||||
}
|
||||
}
|
||||
|
||||
if (document.readyState === "loading") {
|
||||
document.addEventListener("DOMContentLoaded", init);
|
||||
} else {
|
||||
init();
|
||||
}
|
||||
})();
|
||||
Reference in New Issue
Block a user