Changeset 072a242 in Klonkt for src/views/pages

Timestamp:

07/21/2026 03:26:24 AM (7 weeks ago)

Author:

Robin <roboburr@…>

Branches:

main

Children:

b9beb16

Parents:

dede82e

git-author:

Robin <roboburr@…> (07/21/2026 03:26:22 AM)

git-committer:

Robin <roboburr@…> (07/21/2026 03:26:24 AM)

Message:

Fix: unlocked post renders via its own page; no duplicate supporter button

Two things the tester hit once the passkey flow worked:

1. Duplicate "Word supporter". The gate's no-WebAuthn fallback relabelled the unlock button to "Word supporter", which sat next to the real "Word supporter op Patreon" button. In the two-button layout that fallback now hides the (unusable) unlock button instead; the single-button layout keeps the relabel since it's the only button.

2. The unlocked content sat in a bare <div>, so it lost the post page's layout and scoped typography ("div niet in een goeie div"). Instead of injecting HTML into the gate, /paid/unlock now returns a short-lived (120s) signed unlock capability and the client reloads the real post URL with it (?u=). GET /:slug renders the FULL post through its normal template when the capability is valid: correct wrapper, scoped styles, and working audio players (which bind on load and couldn't init in injected HTML). Not a cookie and not stored: the token lives only in that one URL and expires.

Changed files:
src/routes/paid.js

• /unlock returns { ok, redirect } with a 120s unlock blob; drop the renderPostBodyHtml import (no longer injected here)

src/routes/posts.js

• a valid ?u= capability bypasses the paid gate and renders the post

src/views/pages/paid-gate.ejs

• no-WebAuthn fallback hides the unlock button when a Patreon page exists; success reloads the real post via the redirect

-robo
Co-Authored-By: Claude Opus 4.8 <noreply@…>

File:

• src/views/pages/paid-gate.ejs (modified) (2 diffs)

src/views/pages/paid-gate.ejs

@@ -37 +37 @@
   var base = "<%= (typeof siteUrlBase !== 'undefined' && siteUrlBase ? siteUrlBase : '') %>";
   var slug = "<%= pgSlug %>";
+  var hasPatron = <%= _hasPatron ? 'true' : 'false' %>;
   var btn = document.getElementById('pg-unlock');
   var status = document.getElementById('pg-status');
-  var page = document.getElementById('pg-page');
   function say(msg, err) { status.hidden = false; status.textContent = msg; status.classList.toggle('is-err', !!err); }
   function toLink() { location.href = base + '/paid/link?post=' + encodeURIComponent(slug); }
 
-  if (!window.SimpleWebAuthnBrowser || !window.PublicKeyCredential) { btn.textContent = 'Word supporter'; btn.addEventListener('click', toLink); return; }
+  // No WebAuthn here: an assertion is impossible. With a Patreon page there is
+  // already a "Word supporter" button, so hide the (dead) unlock button rather
+  // than turn it into a second "Word supporter". Without one, this IS the button.
+  if (!window.SimpleWebAuthnBrowser || !window.PublicKeyCredential) {
+    if (hasPatron) { btn.style.display = 'none'; }
+    else { btn.textContent = 'Word supporter'; btn.addEventListener('click', toLink); }
+    return;
+  }
 
   btn.addEventListener('click', function () {
@@ -61 +68 @@
       .then(function (r) { return r.json().then(function (j) { return { status: r.status, j: j }; }); })
       .then(function (res) {
-        if (res.j && res.j.ok) {
-          // Swap the gate for the full post, client-side (no cookie kept).
-          var h = document.createElement('div');
-          h.innerHTML = (res.j.title ? '<h1 class="post-title">' + res.j.title + '</h1>' : '') +
-            '<div class="post-content">' + res.j.html + '</div>';
-          page.replaceWith(h);
+        if (res.j && res.j.ok && res.j.redirect) {
+          // Reload the real post page via the one-shot unlock capability, so it
+          // renders through its normal template (layout, styles, audio).
+          location.href = res.j.redirect;
         } else if (res.status === 403) {
           toLink();   // no valid passkey yet (or lapsed tier): link via Patreon