Changeset 09ecc5f in Klonkt

Timestamp:

06/19/2026 10:03:52 AM (3 months ago)

Author:

roboburr <roboburr@…>

Branches:

main

Children:

f83ccf3

Parents:

f33b24a

Message:

ui(admin): Google login on its own Admin page

• New page /admin/settings/google (own view admin-google.ejs) with the complete Google OAuth config + step-by-step guide + redirect URI.
• Settings page now shows only a compact "Set up Google login →" card.
• Link "🔑 Google login" added in the Admin dashboard.

Co-Authored-By: Claude <noreply@…>

Location:

src

Files:

• routes/admin-settings.js (modified) (1 diff)
• views/pages/admin-google.ejs (added)
• views/pages/admin-settings.ejs (modified) (1 diff)
• views/pages/admin.ejs (modified) (1 diff)

src/routes/admin-settings.js

@@ -139 +139 @@
 });
 
+// Google-login op een eigen Beheer-pagina (los van de algemene instellingen).
+router.get('/google', requireGod, (req, res) => {
+  renderPage(req, res, 'pages/admin-google', {
+    pageTitle: 'Google-login',
+    bodyClass: 'on-admin',
+    google: {
+      configured: googleConfigured(),
+      redirectUri: redirectUri(),
+      clientId: currentClientId(),
+      secretSet: clientSecretSet(),
+    },
+    success: req.query.success || null,
+    error: req.query.error || null,
+  });
+});
+
 // Google-login (luisteraars) configureren — Client ID + Secret in app_settings.
 // De redirect-URI leiden we af van PUBLIC_BASE_URL (zie config/google.js).

src/views/pages/admin-settings.ejs

@@ -129 +129 @@
   <% } %>
 
-  <%# Google-login voor luisteraars (reageren) — per-site eigen Google-client. %>
+  <%# Google-login staat op een eigen Beheer-pagina (compacte link hier). %>
   <section class="set-card" style="margin-top:1rem">
     <h2>Google-login (luisteraars)</h2>
-    <p class="set-help">Laat bezoekers met Google inloggen om te reageren — met je <strong>eigen</strong>
-      Google Cloud-client. Maak er een aan op
-      <a href="https://console.cloud.google.com/apis/credentials" target="_blank" rel="noopener">console.cloud.google.com</a>
-      (OAuth client-ID, type "Web application").
+    <p class="set-help">Laat bezoekers met Google inloggen om te reageren — met je eigen Google Cloud-client.
       <% if (google && google.configured) { %><strong>Status: ingesteld&nbsp;✓</strong><% } else { %>Nog niet ingesteld.<% } %></p>
-
-    <details class="set-google-guide">
-      <summary>Hoe stel ik dit in? (stap voor stap)</summary>
-      <ol class="set-google-steps">
-        <li>Ga naar de <a href="https://console.cloud.google.com/" target="_blank" rel="noopener">Google Cloud Console</a> en maak (of kies) een project.</li>
-        <li><strong>APIs &amp; Services → OAuth consent screen</strong>: User type <strong>External</strong>. Voeg de scopes <code>email</code>, <code>profile</code> en <code>openid</code> toe. (In testmodus: voeg jezelf toe als testgebruiker.)</li>
-        <li><strong>APIs &amp; Services → Credentials → Create credentials → OAuth client ID</strong>, type <strong>Web application</strong>.</li>
-        <li>Bij <strong>Authorized redirect URIs</strong>: plak de redirect-URI hieronder (moet <strong>exact</strong> matchen).</li>
-        <li>Kopieer de <strong>Client ID</strong> + <strong>Client Secret</strong> die je krijgt naar de velden hieronder en klik Opslaan.</li>
-      </ol>
-      <p class="set-help" style="margin:.5rem 0 0"><strong>Let op:</strong> je hoeft <strong>geen API's aan te zetten</strong> — "Google Cloud APIs", People API e.d. zijn <em>niet</em> nodig. Inloggen werkt via OpenID Connect (alleen het toestemmingsscherm + de OAuth-client).</p>
-    </details>
-
-    <% if (google && google.redirectUri) { %>
-      <p class="set-help" style="margin-bottom:.7rem">Zet deze <strong>exacte</strong> redirect-URI in je Google-client
-        (Authorized redirect URIs):<br><code style="user-select:all"><%= google.redirectUri %></code></p>
-    <% } else { %>
-      <p class="set-help" style="color:var(--accent)">Stel eerst <code>PUBLIC_BASE_URL</code> in — daar wordt de redirect-URI van afgeleid.</p>
-    <% } %>
-
-    <form method="post" action="/admin/settings/google" class="set-form">
-      <label class="set-field">
-        <span>Client ID</span>
-        <input type="text" name="google_client_id" value="<%= google ? google.clientId : '' %>" placeholder="123-abc.apps.googleusercontent.com" autocomplete="off">
-      </label>
-      <label class="set-field">
-        <span>Client Secret <% if (google && google.secretSet) { %><small style="font-weight:400">— ingesteld; leeg laten = ongewijzigd</small><% } %></span>
-        <input type="password" name="google_client_secret" placeholder="<%= (google && google.secretSet) ? '•••••••• (ingesteld)' : 'GOCSPX-…' %>" autocomplete="off">
-      </label>
-      <div style="display:flex; gap:.5rem; flex-wrap:wrap">
-        <button type="submit" class="btn btn-primary">Opslaan</button>
-        <% if (google && (google.clientId || google.secretSet)) { %>
-          <button type="submit" name="clear" value="1" class="btn">Loskoppelen</button>
-        <% } %>
-      </div>
-    </form>
-    <% if (typeof premiumEnabled !== 'undefined' && premiumEnabled && !(premium && premium.premium)) { %>
-      <p class="set-help" style="margin-top:.7rem; color:var(--accent)">Premium-laag staat aan zonder Patreon — de Google-knop blijft verborgen tot premium ontgrendeld is.</p>
-    <% } %>
+    <div class="set-actions"><a href="/admin/settings/google" class="btn btn-primary">Google-login instellen &rarr;</a></div>
   </section>
 

src/views/pages/admin.ejs

@@ -39 +39 @@
       <a href="/admin/shows" class="btn">📅 Agenda</a>
     <% } %>
+    <a href="/admin/settings/google" class="btn">🔑 Google-login</a>
     <a href="/admin/updates" class="btn">🔄 Updates</a>
   </nav>