Changeset 603d246 in Klonkt for src/views/pages

Timestamp:

07/21/2026 01:54:46 AM (7 weeks ago)

Author:

Robin <roboburr@…>

Branches:

main

Children:

c3d12a6

Parents:

e685f55

git-author:

Robin <roboburr@…> (07/21/2026 01:54:34 AM)

git-committer:

Robin <roboburr@…> (07/21/2026 01:54:46 AM)

Message:

Feature: show the exact Patreon redirect URI in the paid admin

Bart hit Patreon's own error page ("Redirect URI .../paid/callback is not
supported by client") because the redirect URI our OAuth flow sends was
never whitelisted in his Patreon client, and the admin page told him
nowhere what that URI is. Once we redirect to patreon.com with an
unregistered redirect_uri, Patreon refuses to send the visitor back (open
redirect protection) and shows its own JSON error, which we cannot skin.

The only real defence is correct setup, so the admin now shows the exact
redirect URI to paste into the Patreon client, with a copy button. The URI
is built the same way paid.js builds it (PUBLIC_BASE_URL or the request
host + /paid/callback), so they always match.

Changed files:
src/routes/admin-paid.js

• compute redirectUri (matches paid.js) and pass it to the view

src/views/pages/admin-paid.ejs

• "Zet deze redirect-URI in je Patreon-client" block + copy button

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

File:

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

src/views/pages/admin-paid.ejs

@@ -23 +23 @@
     <% } %>
   </p>
+
+  <div style="border:1px solid var(--border,#333);border-radius:10px;padding:.9rem 1rem;margin:0 0 1.3rem;background:color-mix(in srgb,var(--accent,#6b8f71) 8%,transparent)">
+    <p style="margin:0 0 .4rem;font-weight:600">Zet deze redirect-URI in je Patreon-client</p>
+    <p style="margin:0 0 .6rem;color:var(--ink-soft,#888);font-size:.9rem">
+      Bij je Patreon API-client, onder <em>Redirect URIs</em>, moet exact deze regel staan.
+      Klopt hij niet, dan geeft Patreon een foutmelding in plaats van je supporters terug te sturen.
+    </p>
+    <div style="display:flex;gap:.5rem;align-items:center">
+      <input id="pd-redirect" type="text" readonly value="<%= redirectUri %>" style="flex:1;min-width:0;font-family:monospace;font-size:.9rem">
+      <button type="button" id="pd-copy" class="btn">Kopieer</button>
+    </div>
+  </div>
 
   <form method="post" action="/admin/paid" style="display:flex;flex-direction:column;gap:.9rem">
@@ -58 +70 @@
   <p style="margin-top:1.5rem"><a href="/admin">&larr; Terug naar Beheer</a></p>
 </div>
+
+<script>
+(function () {
+  var field = document.getElementById('pd-redirect');
+  var btn = document.getElementById('pd-copy');
+  if (!field || !btn) return;
+  field.addEventListener('focus', function () { field.select(); });
+  btn.addEventListener('click', function () {
+    field.select();
+    var done = function () { var t = btn.textContent; btn.textContent = 'Gekopieerd'; setTimeout(function () { btn.textContent = t; }, 1400); };
+    if (navigator.clipboard && navigator.clipboard.writeText) { navigator.clipboard.writeText(field.value).then(done, function () { try { document.execCommand('copy'); done(); } catch (e) {} }); }
+    else { try { document.execCommand('copy'); done(); } catch (e) {} }
+  });
+})();
+</script>