Changeset c1b757d in Klonkt

Timestamp:

06/21/2026 07:01:45 PM (3 months ago)

Author:

roboburr <roboburr@…>

Branches:

main

Children:

1ee5f65

Parents:

e25438a

Message:

feat(admin): Google setup revised — beginner-friendly explanation

The explanation was buried in a collapsed <details> with fragmented text. Now:
always-visible numbered steps (1-5) in plain language, with the redirect URI
inline at step 4 + a Copy button, a short "must match exactly" warning,
and a "no APIs needed" tip. NL/EN/DE (full sentences instead of fragments).

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

Location:

src

Files:

• services/i18n.js (modified) (3 diffs)
• views/pages/admin-google.ejs (modified) (2 diffs)

src/services/i18n.js

@@ -305 +305 @@
     'aseo.save': 'SEO opslaan',
     'agoog.title': 'Google-login',
+    'agoog.intro': 'Hiermee kunnen bezoekers met hun <strong>Google-account</strong> inloggen om te reageren. Je stelt dit één keer in met je eigen (gratis) Google-account — zo\'n 5 minuten, geen creditcard of betaalde dienst nodig.',
+    'agoog.g1': 'Open de Google Cloud Console en log in. Maak bovenaan een <strong>nieuw project</strong> (Project selecteren → Nieuw project), geef het een naam en klik op <strong>Maken</strong>.',
+    'agoog.g2': 'Ga in het menu links naar <strong>APIs en services → OAuth-toestemmingsscherm</strong>. Kies <strong>Extern</strong>, vul de app-naam + je e-mail in en sla op. Vraagt het systeem om testgebruikers? Voeg dan jezelf toe.',
+    'agoog.g3': 'Ga naar <strong>APIs en services → Inloggegevens → Inloggegevens maken → OAuth-client-ID</strong> en kies als type <strong>Webapplicatie</strong>.',
+    'agoog.g4': 'Plak bij <strong>Geautoriseerde omleidings-URI\'s</strong> exact dit adres en klik op <strong>Maken</strong>:',
+    'agoog.g5': 'Google toont nu een <strong>Client-ID</strong> en <strong>Client-secret</strong>. Kopieer die naar de velden hieronder en klik op <strong>Opslaan</strong>. Klaar!',
+    'agoog.copy': 'Kopieer',
+    'agoog.copied': 'Gekopieerd ✓',
+    'agoog.warn_short': 'Let op: moet <strong>exact</strong> kloppen — met <code>https://</code>, het juiste domein, en <strong>geen</strong> schuine streep aan het eind. Anders krijg je "Error 400: redirect_uri_mismatch".',
+    'agoog.need_baseurl': 'Stel eerst <code>PUBLIC_BASE_URL</code> in (de publieke URL van je site) — daar wordt dit adres van afgeleid.',
+    'agoog.no_api_note': '<strong>Tip:</strong> je hoeft géén API\'s aan te zetten (geen "People API" o.i.d.). Alleen het toestemmingsscherm + de OAuth-client zijn nodig.',
     'agoog.back': 'Instellingen',
     'agoog.card_title': 'Google-login (bezoekers)',
@@ -1274 +1285 @@
     'aseo.save': 'Save SEO',
     'agoog.title': 'Google login',
+    'agoog.intro': 'This lets visitors sign in with their <strong>Google account</strong> to comment. You set it up once with your own (free) Google account — about 5 minutes, no credit card or paid service needed.',
+    'agoog.g1': 'Open the Google Cloud Console and sign in. At the top, create a <strong>new project</strong> (Select project → New project), give it a name and click <strong>Create</strong>.',
+    'agoog.g2': 'In the left menu go to <strong>APIs &amp; Services → OAuth consent screen</strong>. Choose <strong>External</strong>, fill in the app name + your email and save. If it asks for test users, add yourself.',
+    'agoog.g3': 'Go to <strong>APIs &amp; Services → Credentials → Create credentials → OAuth client ID</strong> and choose type <strong>Web application</strong>.',
+    'agoog.g4': 'Under <strong>Authorized redirect URIs</strong> paste exactly this address and click <strong>Create</strong>:',
+    'agoog.g5': 'Google now shows a <strong>Client ID</strong> and <strong>Client secret</strong>. Copy them into the fields below and click <strong>Save</strong>. Done!',
+    'agoog.copy': 'Copy',
+    'agoog.copied': 'Copied ✓',
+    'agoog.warn_short': 'Note: it must match <strong>exactly</strong> — with <code>https://</code>, the correct domain, and <strong>no</strong> trailing slash. Otherwise you get "Error 400: redirect_uri_mismatch".',
+    'agoog.need_baseurl': 'First set <code>PUBLIC_BASE_URL</code> (the public URL of your site) — this address is derived from it.',
+    'agoog.no_api_note': '<strong>Tip:</strong> you do not need to enable any APIs (no "People API" etc.). Only the consent screen + the OAuth client are needed.',
     'agoog.back': 'Settings',
     'agoog.card_title': 'Google login (visitors)',
@@ -2242 +2264 @@
     'aseo.save': 'SEO speichern',
     'agoog.title': 'Google-Anmeldung',
+    'agoog.intro': 'Damit können sich Besucher mit ihrem <strong>Google-Konto</strong> anmelden, um zu kommentieren. Du richtest das einmalig mit deinem eigenen (kostenlosen) Google-Konto ein — etwa 5 Minuten, keine Kreditkarte oder kostenpflichtiger Dienst nötig.',
+    'agoog.g1': 'Öffne die Google Cloud Console und melde dich an. Erstelle oben ein <strong>neues Projekt</strong> (Projekt auswählen → Neues Projekt), gib ihm einen Namen und klicke auf <strong>Erstellen</strong>.',
+    'agoog.g2': 'Gehe im linken Menü zu <strong>APIs und Dienste → OAuth-Zustimmungsbildschirm</strong>. Wähle <strong>Extern</strong>, trage den App-Namen + deine E-Mail ein und speichere. Falls nach Testnutzern gefragt wird, füge dich selbst hinzu.',
+    'agoog.g3': 'Gehe zu <strong>APIs und Dienste → Anmeldedaten → Anmeldedaten erstellen → OAuth-Client-ID</strong> und wähle den Typ <strong>Webanwendung</strong>.',
+    'agoog.g4': 'Füge unter <strong>Autorisierte Weiterleitungs-URIs</strong> genau diese Adresse ein und klicke auf <strong>Erstellen</strong>:',
+    'agoog.g5': 'Google zeigt nun eine <strong>Client-ID</strong> und ein <strong>Client-Secret</strong>. Kopiere sie in die Felder unten und klicke auf <strong>Speichern</strong>. Fertig!',
+    'agoog.copy': 'Kopieren',
+    'agoog.copied': 'Kopiert ✓',
+    'agoog.warn_short': 'Achtung: muss <strong>exakt</strong> stimmen — mit <code>https://</code>, der richtigen Domain und <strong>ohne</strong> Schrägstrich am Ende. Andernfalls bekommst du „Error 400: redirect_uri_mismatch“.',
+    'agoog.need_baseurl': 'Lege zuerst <code>PUBLIC_BASE_URL</code> fest (die öffentliche URL deiner Seite) — daraus wird diese Adresse abgeleitet.',
+    'agoog.no_api_note': '<strong>Tipp:</strong> du musst keine APIs aktivieren (keine „People API“ usw.). Nur der Zustimmungsbildschirm + der OAuth-Client sind nötig.',
     'agoog.back': 'Einstellungen',
     'agoog.card_title': 'Google-Anmeldung (Besucher)',

src/views/pages/admin-google.ejs

@@ -8 +8 @@
   <section class="set-card">
     <h2><%= t('agoog.card_title') %></h2>
-    <p class="set-help"><%= t('agoog.card_help_pre') %> <strong><%= t('agoog.card_help_own') %></strong>
-      <%= t('agoog.card_help_mid') %>
-      <a href="https://console.cloud.google.com/apis/credentials" target="_blank" rel="noopener">console.cloud.google.com</a>
-      <%= t('agoog.card_help_post') %>
+    <p class="set-help"><%- t('agoog.intro') %>
       <% if (google && google.configured) { %><strong><%= t('agoog.status_set') %></strong><% } else { %><%= t('agoog.status_unset') %><% } %></p>
 
-    <details class="set-google-guide">
-      <summary><%= t('agoog.guide_summary') %></summary>
-      <ol class="set-google-steps">
-        <li><%= t('agoog.step1_pre') %> <a href="https://console.cloud.google.com/" target="_blank" rel="noopener">Google Cloud Console</a> <%= t('agoog.step1_post') %></li>
-        <li><strong>APIs &amp; Services → OAuth consent screen</strong>: <%= t('agoog.step2_usertype') %> <strong>External</strong>. <%= t('agoog.step2_scopes_pre') %> <code>email</code>, <code>profile</code> <%= t('agoog.step2_scopes_and') %> <code>openid</code> <%= t('agoog.step2_scopes_post') %> <%= t('agoog.step2_testmode') %></li>
-        <li><strong>APIs &amp; Services → Credentials → Create credentials → OAuth client ID</strong>, <%= t('agoog.step3_type') %> <strong>Web application</strong>.</li>
-        <li><%= t('agoog.step4_pre') %> <strong>Authorized redirect URIs</strong><%= t('agoog.step4_post') %></li>
-        <li><%= t('agoog.step5_pre') %> <strong>Client ID</strong> + <strong>Client Secret</strong> <%= t('agoog.step5_post') %></li>
-      </ol>
-      <p class="set-help" style="margin:.5rem 0 0"><strong><%= t('agoog.note_label') %></strong> <%= t('agoog.note_pre') %> <strong><%= t('agoog.note_noapi') %></strong> <%= t('agoog.note_mid') %> <em><%= t('agoog.note_not') %></em> <%= t('agoog.note_post') %></p>
-    </details>
-
-    <% if (google && google.redirectUri) { %>
-      <div class="set-redirect">
-        <div class="set-redirect-label"><%= t('agoog.redirect_label') %></div>
-        <code class="set-redirect-url" style="user-select:all"><%= google.redirectUri %></code>
-        <ol class="set-redirect-steps">
-          <li><%= t('agoog.rstep1_pre') %> <a href="https://console.cloud.google.com/apis/credentials" target="_blank" rel="noopener">Google Cloud Console → APIs &amp; Services → Credentials</a>.</li>
-          <li><%= t('agoog.rstep2') %></li>
-          <li><%= t('agoog.rstep3_pre') %> <strong>Authorized redirect URIs</strong> → <%= t('agoog.rstep3_mid') %> <strong>+ ADD URI</strong> <%= t('agoog.rstep3_post') %></li>
-          <li><%= t('agoog.rstep4_pre') %> <strong>Save</strong> <%= t('agoog.rstep4_post') %></li>
-        </ol>
-        <p class="set-redirect-warn"><%= t('agoog.warn_pre') %> <strong><%= t('agoog.warn_exact') %></strong> <%= t('agoog.warn_mid1') %> <code>https://</code> (<%= t('agoog.warn_nohttp') %> <code>http</code>)<%= t('agoog.warn_mid2') %> <strong><%= t('agoog.warn_noslash') %></strong> <%= t('agoog.warn_mid3') %> <em><%= t('agoog.warn_error') %></em>.</p>
-      </div>
-    <% } else { %>
-      <p class="set-help" style="color:var(--accent)"><%= t('agoog.set_baseurl_pre') %> <code>PUBLIC_BASE_URL</code> <%= t('agoog.set_baseurl_post') %></p>
-    <% } %>
+    <ol class="gg-steps">
+      <li>
+        <span class="gg-num">1</span>
+        <div class="gg-body"><%- t('agoog.g1') %> <a href="https://console.cloud.google.com/" target="_blank" rel="noopener">Google Cloud Console ↗</a></div>
+      </li>
+      <li>
+        <span class="gg-num">2</span>
+        <div class="gg-body"><%- t('agoog.g2') %></div>
+      </li>
+      <li>
+        <span class="gg-num">3</span>
+        <div class="gg-body"><%- t('agoog.g3') %></div>
+      </li>
+      <li>
+        <span class="gg-num">4</span>
+        <div class="gg-body">
+          <%- t('agoog.g4') %>
+          <% if (google && google.redirectUri) { %>
+            <div class="gg-redirect">
+              <code class="gg-url"><%= google.redirectUri %></code>
+              <button type="button" class="btn gg-copy" data-copy="<%= google.redirectUri %>"><%= t('agoog.copy') %></button>
+            </div>
+            <p class="gg-warn"><%- t('agoog.warn_short') %></p>
+          <% } else { %>
+            <p class="gg-warn" style="color:var(--accent)"><%- t('agoog.need_baseurl') %></p>
+          <% } %>
+        </div>
+      </li>
+      <li>
+        <span class="gg-num">5</span>
+        <div class="gg-body"><%- t('agoog.g5') %></div>
+      </li>
+    </ol>
+    <p class="gg-tip"><%- t('agoog.no_api_note') %></p>
 
     <form method="post" action="/admin/settings/google" class="set-form">
@@ -99 +103 @@
 .set-redirect-warn { margin: 0.85rem 0 0; font-size: 0.85rem; color: var(--ink-muted); }
 .set-redirect-warn code { background: var(--paper-2); padding: 0.05rem 0.35rem; border-radius: 4px; }
+/* Genummerde, altijd-zichtbare stap-voor-stap-uitleg (beginnervriendelijk) */
+.gg-steps { list-style: none; margin: 0 0 1rem; padding: 0; display: flex; flex-direction: column; gap: 0.85rem; }
+.gg-steps > li { display: flex; gap: 0.7rem; align-items: flex-start; }
+.gg-num { flex: 0 0 auto; width: 26px; height: 26px; border-radius: 50%; background: var(--accent); color: #fff; font-weight: 700; font-size: 0.85rem; display: inline-flex; align-items: center; justify-content: center; }
+.gg-body { font-size: 0.92rem; line-height: 1.5; color: var(--ink); padding-top: 2px; min-width: 0; }
+.gg-body code { background: var(--paper-2); padding: 0.05rem 0.35rem; border-radius: 4px; font-size: 0.88em; }
+.gg-redirect { display: flex; gap: 0.5rem; align-items: stretch; margin: 0.5rem 0 0.3rem; flex-wrap: wrap; }
+.gg-url { flex: 1 1 220px; min-width: 0; padding: 0.5rem 0.7rem; background: var(--paper-2); border: 1px dashed var(--accent); border-radius: 6px; font-size: 0.85rem; word-break: break-all; align-self: center; }
+.gg-copy { flex: 0 0 auto; }
+.gg-warn { font-size: 0.82rem; color: var(--ink-muted); margin: 0.3rem 0 0; }
+.gg-tip { font-size: 0.85rem; color: var(--ink-muted); background: var(--paper); border: 1px solid var(--rule); border-radius: 8px; padding: 0.6rem 0.8rem; margin: 0 0 1.25rem; }
 </style>
+<script>
+  (function () {
+    if (window.__ggCopyWired) return;
+    window.__ggCopyWired = true;
+    document.addEventListener('click', function (e) {
+      var b = e.target.closest && e.target.closest('.gg-copy');
+      if (!b) return;
+      e.preventDefault();
+      var txt = b.getAttribute('data-copy') || '';
+      var done = function () { var o = b.getAttribute('data-label') || b.textContent; b.setAttribute('data-label', o); b.textContent = '<%= t('agoog.copied') %>'; setTimeout(function () { b.textContent = o; }, 1500); };
+      if (navigator.clipboard && navigator.clipboard.writeText) { navigator.clipboard.writeText(txt).then(done, function () {}); }
+      else { try { var ta = document.createElement('textarea'); ta.value = txt; document.body.appendChild(ta); ta.select(); document.execCommand('copy'); ta.remove(); done(); } catch (_) {} }
+    });
+  })();
+</script>