Changeset c50f22e in Klonkt

Timestamp:

06/17/2026 04:20:33 AM (3 months ago)

Author:

roboburr <roboburr@…>

Branches:

main

Children:

6a2abb1

Parents:

441f5d6

Message:

Google login card: collapsible step-by-step setup guide

Self-hosters got stuck on "which API to enable" — whereas for Google login you
actually do NOT need to enable an API, only the OAuth consent screen + an OAuth
client ID (Web application). Guide added with that emphasis + the exact redirect
URI was already there.

Co-Authored-By: Claude Opus 4.8 (1M context) <noreply@…>

File:

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

src/views/pages/admin-settings.ejs

@@ -73 +73 @@
       <% 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
@@ -171 +183 @@
 .set-card h2 { font-family: var(--font-display, serif); font-size: 1.25rem; margin: 0 0 0.5rem; }
 .set-help { color: var(--ink-muted); font-size: 0.9rem; margin: 0 0 1.25rem; }
+/* Google-setup-gids (uitklapbaar) */
+.set-google-guide { margin: 0 0 1rem; border: 1px solid var(--rule); border-radius: 8px; background: var(--paper); }
+.set-google-guide > summary { cursor: pointer; padding: 0.6rem 0.85rem; font-size: 0.9rem; font-weight: 600; color: var(--accent); list-style: none; }
+.set-google-guide > summary::-webkit-details-marker { display: none; }
+.set-google-guide > summary::before { content: "▸ "; }
+.set-google-guide[open] > summary::before { content: "▾ "; }
+.set-google-steps { margin: 0; padding: 0 1rem 0.6rem 2rem; font-size: 0.88rem; color: var(--ink); line-height: 1.5; }
+.set-google-steps li { margin: 0.35rem 0; }
+.set-google-guide code { background: var(--paper-2); padding: 0.05rem 0.35rem; border-radius: 4px; font-size: 0.85em; }
+.set-google-guide .set-help { padding: 0 0.85rem; }
 .set-form { display: flex; flex-direction: column; gap: 1rem; }
 .set-opt { display: flex; gap: 0.75rem; align-items: flex-start; padding: 0.85rem 1rem; border: 1px solid var(--rule); border-radius: 8px; cursor: pointer; background: var(--paper); }