Changeset c3d12a6 in Klonkt for src/views/pages

Timestamp:

07/21/2026 02:07:18 AM (7 weeks ago)

Author:

Robin <roboburr@…>

Branches:

main

Children:

9019a3e

Parents:

603d246

git-author:

Robin <roboburr@…> (07/21/2026 02:07:07 AM)

git-committer:

Robin <roboburr@…> (07/21/2026 02:07:18 AM)

Message:

Feature: a way to actually become a supporter, and a styled expired page

Bart's test surfaced two gaps in the visitor flow:

• After "Allow" on Patreon, a non-supporter landed on "Nog geen supporter" with no way to actually pledge. The page now shows a primary "Word supporter op Patreon" button. The site owner sets their public Patreon page in Beheer -> Betaalde posts (new field); it's also linked from the gate itself ("Nog geen supporter? Word het op Patreon").
• The invalid/expired callback replied with a raw res.send() plain-text line. It now renders the normal paid-result page (reason 'expired').

Changed files:
src/config/database.js

• paid_patreon.patreon_url column (additive)

src/services/PaidPatreonService.js

• patreonUrl in config/status/save (undefined keeps, empty clears) + patreonUrl(siteId) helper

src/routes/admin-paid.js

• save patreon_url from the form

src/views/pages/admin-paid.ejs

• "Openbare Patreon-pagina" field

src/routes/paid.js

• expired callback renders paid-result; pass patronUrl to the result pages

src/routes/posts.js

• pass pgPatronUrl to the gate

src/views/pages/paid-gate.ejs

• "Word supporter" join line under the unlock button

src/views/pages/paid-result.ejs

• "Word supporter op Patreon" primary button, 'expired' reason, ghost back button always has a label

test/paid-patron.test.js

• patreonUrl set/keep/clear semantics

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

Location:

src/views/pages

Files:

• admin-paid.ejs (modified) (1 diff)
• paid-gate.ejs (modified) (2 diffs)
• paid-result.ejs (modified) (4 diffs)

src/views/pages/admin-paid.ejs

@@ -47 +47 @@
       <input type="text" name="campaign_id" value="<%= status.campaignId || '' %>" autocomplete="off" style="width:100%">
     </label>
+    <label>Openbare Patreon-pagina
+      <input type="url" name="patreon_url" value="<%= status.patreonUrl || '' %>" placeholder="https://www.patreon.com/jouwnaam" autocomplete="off" style="width:100%">
+      <small style="color:var(--ink-soft,#888)">De link waar bezoekers supporter kunnen worden. Getoond als "Word supporter" wanneer iemand nog niet doneert.</small>
+    </label>
     <label>Creator access token
       <input type="password" name="access_token" placeholder="blijft ongewijzigd" autocomplete="off" style="width:100%">

src/views/pages/paid-gate.ejs

@@ -20 +20 @@
     <button type="button" id="pg-unlock" class="pg-btn">Ontgrendelen</button>
     <p id="pg-status" class="pg-status" hidden></p>
+    <% if (typeof pgPatronUrl !== 'undefined' && pgPatronUrl) { %>
+      <p class="pg-join">Nog geen supporter? <a href="<%= pgPatronUrl %>" target="_blank" rel="noopener">Word het op Patreon</a> en ontgrendel daarna met je passkey.</p>
+    <% } %>
   </section>
 </article>
@@ -88 +91 @@
   .pg-status { margin: 12px 0 0; opacity: .9; }
   .pg-status.is-err { color: #c0392b; }
+  .pg-join { margin: 14px 0 0; font-size: .92rem; opacity: .8; }
 </style>

src/views/pages/paid-result.ejs

@@ +1 @@
+<%
+  var _slug = (typeof postSlug !== 'undefined' && postSlug) ? postSlug : '';
+  var _base = (typeof siteUrlBase !== 'undefined' && siteUrlBase) ? siteUrlBase : '';
+  var _patron = (typeof patronUrl !== 'undefined' && patronUrl) ? patronUrl : '';
+%>
 <section class="pr">
   <div class="pr-card">
@@ -4 +9 @@
     <% if (reason === 'notpatron') { %>
       <h1 class="pr-h1">Nog geen supporter</h1>
-      <p class="pr-sub">Je bent (nog) geen actieve supporter van deze site op Patreon. Word supporter en probeer het opnieuw.</p>
+      <p class="pr-sub">Je bent (nog) geen actieve supporter van deze site op Patreon. Word supporter en probeer het daarna opnieuw vanaf de post.</p>
     <% } else if (reason === 'tier') { %>
       <h1 class="pr-h1">Een niveau hoger nodig</h1>
@@ -11 +16 @@
         Jouw steun is nu &euro;<%= ((typeof haveCents !== 'undefined' ? haveCents : 0)/100).toFixed(2) %>. Verhoog je steun en probeer opnieuw.
       </p>
+    <% } else if (reason === 'expired') { %>
+      <h1 class="pr-h1">Aanvraag verlopen</h1>
+      <p class="pr-sub">Deze ontgrendel-link is verlopen of al gebruikt. Ga terug naar de post en probeer het opnieuw.</p>
     <% } else { %>
       <h1 class="pr-h1">Ontgrendelen afgebroken</h1>
       <p class="pr-sub">Er is niets gekoppeld. Je kunt het opnieuw proberen vanaf de post.</p>
     <% } %>
-    <% if (typeof postSlug !== 'undefined' && postSlug) { %>
-      <p><a class="pr-btn" href="<%= (typeof siteUrlBase !== 'undefined' && siteUrlBase ? siteUrlBase : '') %>/<%= postSlug %>">Terug naar de post</a></p>
-    <% } %>
+
+    <div class="pr-actions">
+      <% if ((reason === 'notpatron' || reason === 'tier') && _patron) { %>
+        <a class="pr-btn" href="<%= _patron %>" target="_blank" rel="noopener">Word supporter op Patreon</a>
+      <% } %>
+      <% if (_slug) { %>
+        <a class="pr-btn pr-btn-ghost" href="<%= _base %>/<%= _slug %>">Terug naar de post</a>
+      <% } else { %>
+        <a class="pr-btn pr-btn-ghost" href="<%= _base %>/">Terug naar de site</a>
+      <% } %>
+    </div>
   </div>
 </section>
@@ -26 +42 @@
   .pr-ic { font-size: 38px; margin-bottom: 6px; }
   .pr-h1 { font-size: 23px; margin: 0 0 8px; }
-  .pr-sub { opacity: .85; line-height: 1.6; margin: 0 0 18px; }
+  .pr-sub { opacity: .85; line-height: 1.6; margin: 0 0 20px; }
+  .pr-actions { display: flex; flex-direction: column; gap: 10px; align-items: stretch; }
   .pr-btn { display: inline-block; padding: 11px 20px; border-radius: 10px; background: var(--accent,#6b8f71); color: #fff; text-decoration: none; font-weight: 600; }
+  .pr-btn-ghost { background: transparent; color: var(--ink,#222); border: 1px solid color-mix(in srgb, var(--ink,#000) 22%, transparent); }
 </style>