Changeset 70679063 in Klonkt

Timestamp:

06/19/2026 07:57:15 AM (3 months ago)

Author:

roboburr <roboburr@…>

Branches:

main

Children:

b919a67

Parents:

9b3e12c

Message:

fix: download toggle without page reload + clear explanation page on Google admin login

1) Admin→Audio: the "download-for-email" toggle (⬇) was a form POST with redirect →

full page reload on every click (player + scroll reset). Now AJAX via the existing
/admin/audio/api/:id (accepts downloadable), button state updated in-place, no
reload. (Old POST route stays as an unused fallback.)

2) /auth/login did not show the query error (error:null) → message only appeared in

the URL. Now ?error= is rendered, and the "Google address belongs to an admin"
case gets its own clear explanation block (gerr=admin): why it is rejected + the
two paths (admin = password, fan = different Google account).

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

Location:

src

Files:

• routes/auth.js (modified) (2 diffs)
• views/pages/admin-audio.ejs (modified) (2 diffs)
• views/pages/auth-login.ejs (modified) (2 diffs)

src/routes/auth.js

@@ -52 +52 @@
     pageTitle: 'Inloggen',
     bodyClass: 'on-special on-auth',
-    error: null,
+    error: req.query.error || null,
+    gerr: req.query.gerr || null, // foutcode voor een rijkere uitleg (bv. 'admin')
     success: req.query.success || null,
     username: '',
@@ -275 +276 @@
       // beheerder, dan moet diegene met wachtwoord inloggen (geen Google-bypass).
       if (user.role === 'god' || user.role === 'admin') {
-        return fail('Dit adres hoort bij een beheerder — log in met je wachtwoord.');
+        // Eigen, duidelijke uitleg-pagina (zie auth-login.ejs) i.p.v. een kale melding.
+        return res.redirect('/auth/login?gerr=admin');
       }
       // Bestaande luisteraar: koppel google_sub/avatar als die ontbreken; weiger

src/views/pages/admin-audio.ejs

@@ -102 +102 @@
               <button type="button" class="ax-icon-btn" data-track-edit data-id="<%= t.id %>" aria-label="Bewerken" title="Bewerken">✎</button>
               <% if (typeof premiumUnlocked === 'undefined' || premiumUnlocked) { %>
-                <form action="/admin/audio/<%= t.id %>/downloadable" method="post" class="ax-track-delete" style="display:inline">
-                  <button type="submit" class="ax-icon-btn" aria-label="Download-voor-email" title="<%= t.downloadable ? 'Download-voor-email staat AAN — klik om uit te zetten' : 'Download-voor-email staat uit — klik om aan te zetten' %>" style="<%= t.downloadable ? 'color:var(--accent,#6b8f71)' : 'opacity:.5' %>">⬇</button>
-                </form>
+                <button type="button" class="ax-icon-btn" data-track-dl data-id="<%= t.id %>" data-on="<%= t.downloadable ? '1' : '0' %>"
+                        aria-label="Download-voor-email" title="<%= t.downloadable ? 'Download-voor-email staat AAN — klik om uit te zetten' : 'Download-voor-email staat uit — klik om aan te zetten' %>"
+                        style="<%= t.downloadable ? 'color:var(--accent,#6b8f71)' : 'opacity:.5' %>">⬇</button>
               <% } %>
               <form action="/admin/audio/<%= t.id %>/delete" method="post" onsubmit="return confirm('Track verwijderen?')" class="ax-track-delete">
@@ -939 +939 @@
     });
   });
+
+  // Download-voor-email toggle — AJAX (geen pagina-reload meer).
+  document.querySelectorAll('[data-track-dl]').forEach(btn => {
+    btn.addEventListener('click', async () => {
+      if (btn.disabled) return;
+      const want = btn.dataset.on === '1' ? 0 : 1;
+      btn.disabled = true;
+      try {
+        const res = await fetch('/admin/audio/api/' + btn.dataset.id, {
+          method: 'POST',
+          headers: { 'Content-Type': 'application/json' },
+          body: JSON.stringify({ downloadable: !!want }),
+        });
+        if (!res.ok) throw new Error('HTTP ' + res.status);
+        btn.dataset.on = String(want);
+        btn.style.color = want ? 'var(--accent,#6b8f71)' : '';
+        btn.style.opacity = want ? '1' : '.5';
+        btn.title = want
+          ? 'Download-voor-email staat AAN — klik om uit te zetten'
+          : 'Download-voor-email staat uit — klik om aan te zetten';
+      } catch (e) {
+        alert('Kon niet wijzigen: ' + (e.message || e));
+      } finally {
+        btn.disabled = false;
+      }
+    });
+  });
 })();
 </script>

src/views/pages/auth-login.ejs

@@ -2 +2 @@
   <h1>Inloggen</h1>
   <% if (typeof success !== 'undefined' && success) { %><div class="alert alert-success"><%= success %></div><% } %>
-  <% if (error) { %><div class="alert alert-error"><%= error %></div><% } %>
+  <% if (typeof gerr !== 'undefined' && gerr === 'admin') { %>
+    <div class="auth-notice">
+      <div class="auth-notice-icon">🔐</div>
+      <h2 class="auth-notice-title">Dit is een beheerders-account</h2>
+      <p>Je logde in met Google, maar dit e-mailadres hoort bij de <strong>beheerder</strong> van deze site.
+         Inloggen met Google is alleen voor luisteraars/fans — beheerders gebruiken altijd hun wachtwoord
+         (zo kan een Google-login nooit per ongeluk beheerrechten geven).</p>
+      <ul class="auth-notice-list">
+        <li><strong>Ben je de beheerder?</strong> Log hieronder in met je <strong>gebruikersnaam + wachtwoord</strong>.</li>
+        <li><strong>Wil je als fan inloggen?</strong> Gebruik een <strong>ander Google-account</strong> (niet je beheerdersadres).</li>
+      </ul>
+    </div>
+  <% } else if (error) { %><div class="alert alert-error"><%= error %></div><% } %>
 
   <form method="post" action="/auth/login" class="auth-form">
@@ -33 +45 @@
   <% } %>
 </div>
+
+<style>
+  .auth-notice { border: 1px solid rgba(128,128,128,.28); border-radius: 14px; padding: 18px 20px; margin-bottom: 18px; background: rgba(128,128,128,.06); }
+  .auth-notice-icon { font-size: 26px; }
+  .auth-notice-title { font-size: 17px; margin: 4px 0 8px; }
+  .auth-notice p { margin: 0 0 10px; line-height: 1.55; opacity: .9; }
+  .auth-notice-list { margin: 0; padding-left: 18px; line-height: 1.6; }
+  .auth-notice-list li { margin: 4px 0; }
+</style>