domma-cms 0.49.2 → 0.51.0

package/server/services/renderer.js

@@ -85,6 +85,9 @@ async function buildOverlayMenus(menuCtx, user) {
  *   Falls back to `site.baseUrl` from config, then to no canonical at all.
  * @param {object|null} [opts.user] - Authenticated user (`{role, additionalRoles}`)
  *   or null for anonymous. Used to filter menu items gated by `visibility`.
+ * @param {object} [opts.preview] - Set when rendering an unpublished page for a
+ *   permitted viewer: `{status, urlPath, user}`. Draws the draft banner. Absent
+ *   for every normal public render.
  * @returns {Promise<string>}
  */
 export async function renderPage(page, opts = {}) {
@@ -247,6 +250,10 @@ export async function renderPage(page, opts = {}) {
         headInject: [injection.head, navbarFontLink].filter(Boolean).join('\n'),
         headInjectLate: [injection.headLate, customCssTag, navbarStyleTag].filter(Boolean).join('\n'),
         bodyEndInject: [
+            // Draft banner - first, so it is the topmost fixed element and a
+            // floating overlay menu cannot bury the only affordance telling
+            // the viewer this page is not live.
+            opts.preview ? buildDraftBanner(opts.preview) : '',
             // Overlay menus - bound to the `overlay` slot and pinned by their own
             // float config, so they belong at the end of the body, clear of the
             // content flow.
@@ -428,6 +435,129 @@ function buildSeoTags({page, site, baseUrl, seoTitle, seoDescription, ogImage})
     return tags.join('\n    ');
 }
 
+/**
+ * Build the draft banner shown over an unpublished page.
+ *
+ * Self-contained on purpose - its CSS and JS are inline rather than in
+ * public/css/site.css, because the updater replaces public/ wholesale and a
+ * site running a stale minified stylesheet would render the banner unstyled,
+ * i.e. as an invisible warning. It is also why nothing here depends on a
+ * Domma component: the banner has to work on a page whose CSS is broken,
+ * since verifying broken CSS is exactly what it is for.
+ *
+ * The Publish button authenticates with the Bearer token from `S` storage,
+ * never with the session cookie - keeping every state-changing call
+ * explicitly credentialled and the cookie free of write authority.
+ *
+ * A share-link view (`preview.shared`) gets a different bar: its reader has no
+ * account, so Edit and Publish would only be doors they cannot open. They get
+ * the expiry instead, which is the thing they actually need to know.
+ *
+ * @param {{status?: string, urlPath?: string, user?: object|null,
+ *          shared?: {expiresAt?: string, label?: string}}} preview
+ * @returns {string}
+ */
+function buildDraftBanner(preview) {
+    const urlPath  = preview.urlPath || '/';
+    const status   = preview.status || 'draft';
+    const user     = preview.user || {};
+    const shared   = preview.shared || null;
+    const who      = escapeHtml(user.name || user.email || 'an authorised user');
+    const role     = escapeHtml(user.role || '');
+    const editHref = '/admin/#/pages/edit' + escapeHtml(urlPath);
+    const pathAttr = escapeHtml(urlPath);
+    const label    = escapeHtml(shared ? 'Preview' : status.charAt(0).toUpperCase() + status.slice(1));
+
+    const message = shared
+        ? `Shared preview of an unpublished page.${formatExpiry(shared.expiresAt)} It is not visible to the public.`
+        : `Not published - the public gets a 404 here. You can see it because you are signed in as <strong>${who}</strong>${role ? ` (${role})` : ''}.`;
+
+    const actions = shared
+        ? ''
+        : `<a class="dmdb-btn" href="${editHref}">Edit page</a>
+<button type="button" class="dmdb-publish" data-dmdb-publish>Publish</button>`;
+
+    const script = shared
+        ? `<script>
+(function(){
+  var bar = document.getElementById('dm-draft-banner');
+  if (!bar) return;
+  bar.querySelector('[data-dmdb-close]').addEventListener('click', function(){ bar.hidden = true; });
+})();
+</script>`
+        : `<script>
+(function(){
+  var bar = document.getElementById('dm-draft-banner');
+  if (!bar) return;
+  var path = bar.getAttribute('data-url-path') || '/';
+  bar.querySelector('[data-dmdb-close]').addEventListener('click', function(){ bar.hidden = true; });
+  bar.querySelector('[data-dmdb-publish]').addEventListener('click', function(){
+    var btn = this;
+    var token = '';
+    try { token = (window.S && S.get('auth_token')) || ''; } catch (e) { token = ''; }
+    if (!token) { window.location.href = '/admin/'; return; }
+    if (!window.confirm('Publish this page? It becomes visible to everyone.')) return;
+    btn.disabled = true;
+    btn.textContent = 'Publishing\u2026';
+    fetch('/api/pages' + path, {
+      method: 'PUT',
+      headers: {'Content-Type': 'application/json', 'Authorization': 'Bearer ' + token},
+      body: JSON.stringify({frontmatter: {status: 'published'}})
+    }).then(function(res){
+      if (!res.ok) throw new Error('HTTP ' + res.status);
+      window.location.reload();
+    }).catch(function(){
+      btn.disabled = false;
+      btn.textContent = 'Publish';
+      window.alert('Could not publish. Try again from the admin editor.');
+    });
+  });
+})();
+</script>`;
+
+    return `<div id="dm-draft-banner" role="status" aria-live="polite" data-url-path="${pathAttr}">
+<style>
+#dm-draft-banner{position:fixed;left:0;right:0;bottom:0;z-index:2147483000;display:flex;align-items:center;gap:.75rem;flex-wrap:wrap;
+padding:.6rem .9rem;font:500 .8125rem/1.4 system-ui,-apple-system,"Segoe UI",sans-serif;color:#1c1601;
+background:repeating-linear-gradient(135deg,#ffcf33,#ffcf33 14px,#f5b800 14px,#f5b800 28px);box-shadow:0 -2px 12px rgba(0,0,0,.28)}
+#dm-draft-banner[hidden]{display:none}
+#dm-draft-banner .dmdb-pill{flex:none;padding:.2rem .55rem;border-radius:999px;background:#1c1601;color:#ffcf33;
+font-weight:700;font-size:.6875rem;letter-spacing:.08em;text-transform:uppercase}
+#dm-draft-banner .dmdb-text{flex:1 1 16rem;min-width:0}
+#dm-draft-banner .dmdb-actions{flex:none;display:flex;align-items:center;gap:.4rem}
+#dm-draft-banner button,#dm-draft-banner a.dmdb-btn{font:inherit;cursor:pointer;border:1px solid rgba(28,22,1,.45);
+border-radius:.3rem;padding:.3rem .7rem;background:rgba(255,255,255,.55);color:#1c1601;text-decoration:none}
+#dm-draft-banner button:hover,#dm-draft-banner a.dmdb-btn:hover{background:#fff}
+#dm-draft-banner button[disabled]{opacity:.55;cursor:default}
+#dm-draft-banner .dmdb-publish{background:#1c1601;color:#ffcf33;border-color:#1c1601}
+#dm-draft-banner .dmdb-publish:hover{background:#000;color:#ffe27a}
+#dm-draft-banner .dmdb-close{padding:.2rem .5rem;line-height:1;font-size:1rem;background:transparent;border-color:transparent}
+@media print{#dm-draft-banner{display:none}}
+</style>
+<span class="dmdb-pill">${label}</span>
+<span class="dmdb-text">${message}</span>
+<span class="dmdb-actions">
+${actions}
+<button type="button" class="dmdb-close" data-dmdb-close aria-label="Hide preview banner" title="Hide">&times;</button>
+</span>
+${script}
+</div>`;
+}
+
+/**
+ * Render a share link's expiry as a sentence fragment, or '' when unknown.
+ *
+ * @param {string} [iso]
+ * @returns {string}
+ */
+function formatExpiry(iso) {
+    if (!iso) return '';
+    const when = new Date(iso);
+    if (Number.isNaN(when.getTime())) return '';
+    const opts = {day: 'numeric', month: 'short', year: 'numeric', hour: '2-digit', minute: '2-digit'};
+    return ` This link expires ${escapeHtml(when.toLocaleString('en-GB', opts))}.`;
+}
+
 function escapeHtml(str) {
     return String(str)
         .replace(/&/g, '&amp;')

package/server/services/viewerSession.js

@@ -0,0 +1,128 @@
+/**
+ * Viewer Session
+ *
+ * Resolves the human behind a *public page navigation*.
+ *
+ * The API authenticates with `Authorization: Bearer <jwt>` and the client keeps
+ * that token in `S` storage - fine for `fetch`, useless for a browser typing a
+ * URL into the address bar, which sends no such header. Draft previews and
+ * role-gated pages both need to know who is looking during a plain navigation,
+ * so login additionally drops the access token into a session cookie and this
+ * module reads it back.
+ *
+ * SCOPE - read this before reusing anything here:
+ *   The cookie is consulted ONLY by the public page renderer (GET, no side
+ *   effects). `authenticate()` in middleware/auth.js stays Bearer-only, so no
+ *   state-changing route is reachable with ambient credentials and the CSRF
+ *   surface stays at zero. Do not wire `resolveViewer()` into a write path.
+ */
+
+/** Name of the session cookie carrying the access token. */
+export const SESSION_COOKIE = 'dm_session';
+
+/**
+ * Parse a Cookie request header into a plain object.
+ *
+ * @param {string} [header]
+ * @returns {Record<string, string>}
+ */
+function parseCookies(header) {
+    const out = {};
+    if (!header) return out;
+    for (const part of header.split(';')) {
+        const eq = part.indexOf('=');
+        if (eq < 0) continue;
+        const key = part.slice(0, eq).trim();
+        if (!key) continue;
+        try {
+            out[key] = decodeURIComponent(part.slice(eq + 1).trim());
+        } catch {
+            out[key] = part.slice(eq + 1).trim();
+        }
+    }
+    return out;
+}
+
+/**
+ * Build the Set-Cookie value that carries an access token for page navigation.
+ *
+ * HttpOnly because nothing client-side needs to read it (the SPA keeps its own
+ * copy in `S`), SameSite=Lax so a link from an email or chat still arrives
+ * authenticated, and Secure only over https so localhost development works.
+ *
+ * @param {string} token          - Signed access token
+ * @param {object} [opts]
+ * @param {boolean} [opts.secure] - Emit the Secure attribute
+ * @param {number} [opts.maxAgeMs]- Cookie lifetime; defaults to one hour
+ * @returns {string}
+ */
+export function buildSessionCookie(token, {secure = false, maxAgeMs = 3_600_000} = {}) {
+    const attrs = [
+        `${SESSION_COOKIE}=${encodeURIComponent(token)}`,
+        'Path=/',
+        'HttpOnly',
+        'SameSite=Lax',
+        `Max-Age=${Math.max(0, Math.floor(maxAgeMs / 1000))}`
+    ];
+    if (secure) attrs.push('Secure');
+    return attrs.join('; ');
+}
+
+/**
+ * Build the Set-Cookie value that removes the session cookie.
+ *
+ * @param {object} [opts]
+ * @param {boolean} [opts.secure]
+ * @returns {string}
+ */
+export function buildClearedSessionCookie({secure = false} = {}) {
+    const attrs = [`${SESSION_COOKIE}=`, 'Path=/', 'HttpOnly', 'SameSite=Lax', 'Max-Age=0'];
+    if (secure) attrs.push('Secure');
+    return attrs.join('; ');
+}
+
+/**
+ * Read the raw session token from the request cookie, if present.
+ *
+ * @param {import('fastify').FastifyRequest} request
+ * @returns {string} '' when absent
+ */
+export function readSessionToken(request) {
+    return parseCookies(request.headers?.cookie)[SESSION_COOKIE] || '';
+}
+
+/**
+ * Resolve the viewer of a public page from either credential channel.
+ *
+ * Tries the Bearer header first (so API-style and test clients keep working
+ * unchanged), then the session cookie. Anything that is not a valid, unexpired
+ * *access* token is ignored - a refresh token presented here resolves to
+ * anonymous rather than to its subject.
+ *
+ * @param {import('fastify').FastifyRequest} request
+ * @returns {Promise<{id?: string, name: string, email: string, role: string, additionalRoles: string[]}|null>}
+ */
+export async function resolveViewer(request) {
+    const header = request.headers?.authorization || '';
+    const bearer = header.startsWith('Bearer ') ? header.slice(7).trim() : '';
+    const jwt = request.server?.jwt;
+    if (!jwt) return null;
+
+    for (const raw of [bearer, readSessionToken(request)]) {
+        if (!raw) continue;
+        try {
+            const decoded = jwt.verify(raw);
+            if (decoded?.type !== 'access' || !decoded.role) continue;
+            return {
+                id: decoded.id,
+                name: decoded.name || '',
+                email: decoded.email || '',
+                role: decoded.role,
+                additionalRoles: Array.isArray(decoded.additionalRoles) ? decoded.additionalRoles : []
+            };
+        } catch {
+            // Malformed or expired - fall through to the next channel.
+        }
+    }
+    return null;
+}