source: Klonkt/src/views/pages/auth-login.ejs@ 137cca5

<%
  // adminLogin = de verborgen beheerders-loginpagina (/auth/admin): toont het
  // gebruikersnaam/wachtwoord-formulier. De publieke /auth/login toont voor
  // bezoekers ALLEEN Google-login (luisteraars/fans). Zo staat de admin-login
  // niet zichtbaar op de plek waar bezoekers heen gestuurd worden.
  var _admin = (typeof adminLogin !== 'undefined' && adminLogin);
%>
<div class="container auth-page">
  <h1><%= _admin ? t('auth.admin_login_title') : t('nav.login') %></h1>
  <% if (typeof success !== 'undefined' && success) { %><div class="alert alert-success"><%= success %></div><% } %>
  <%
    var GMAP = {
      admin: { icon: '🔐', title: 'Dit is een beheerders-account',
        body: 'Je logde in met Google, maar dit e-mailadres hoort bij de beheerder 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).',
        list: ['<strong>Ben je de beheerder?</strong> <a href="/auth/admin">Log in met je gebruikersnaam + wachtwoord</a>.', '<strong>Wil je voortaan met Google inloggen?</strong> Log eerst in met wachtwoord en <strong>koppel je Google-account</strong> onder Account → daarna werkt Google-login ook voor jou.', '<strong>Wil je als fan inloggen?</strong> Gebruik een <strong>ander Google-account</strong> (niet je beheerdersadres).'] },
      session: { icon: '⏱️', title: 'Login afgebroken', body: 'De Google-login is afgebroken of de sessie was verlopen. Probeer het gewoon opnieuw.' },
      email: { icon: '✉️', title: 'Geen geverifieerd e-mailadres', body: 'Je Google-account heeft geen geverifieerd e-mailadres. Verifieer je adres bij Google.' },
      linked: { icon: '🔗', title: 'Adres al gekoppeld', body: 'Dit e-mailadres is al aan een ander Google-account gekoppeld. Gebruik dat account, of neem contact op met de beheerder.' },
      unavailable: { icon: '🚫', title: 'Google-login niet beschikbaar', body: 'Inloggen met Google is op deze site (nog) niet ingesteld.' },
      failed: { icon: '⚠️', title: 'Google-login mislukt', body: 'Er ging iets mis bij het inloggen met Google. Probeer het opnieuw.' },
    };
    var _g = (typeof gerr !== 'undefined' && gerr && GMAP[gerr]) ? GMAP[gerr] : null;
  %>
  <% if (_g) { %>
    <div class="auth-notice">
      <div class="auth-notice-icon"><%= _g.icon %></div>
      <h2 class="auth-notice-title"><%= _g.title %></h2>
      <p><%= _g.body %></p>
      <% if (_g.list) { %><ul class="auth-notice-list"><% _g.list.forEach(function(li){ %><li><%- li %></li><% }); %></ul><% } %>
    </div>
  <% } else if (error) { %><div class="alert alert-error"><%= error %></div><% } %>

  <% if (_admin) { %>
    <%# Verborgen beheerders-login (wachtwoord). %>
    <form method="post" action="/auth/login" class="auth-form">
      <% if (typeof next !== 'undefined' && next) { %>
        <input type="hidden" name="next" value="<%= next %>">
      <% } %>
      <label>
        <span><%= t('auth.username_or_email') %></span>
        <input type="text" name="username" value="<%= username %>" required autofocus autocomplete="username">
      </label>
      <label>
        <span><%= t('auth.password') %></span>
        <input type="password" name="password" required autocomplete="current-password">
      </label>
      <button type="submit" class="btn btn-primary"><%= t('nav.login') %></button>
      <p class="auth-link auth-link-muted"><a href="/auth/reset-request"><%= t('auth.forgot') %></a></p>
    </form>
  <% } else if (googleReady) { %>
    <%# Publieke login: alleen Google, voor luisteraars/fans. %>
    <p class="auth-sub"><%= t('auth.public_sub') %></p>
    <a class="btn btn-google" href="/auth/google<%= (typeof next !== 'undefined' && next) ? '?next=' + encodeURIComponent(next) : '' %>">
      <svg class="g-icon" width="18" height="18" viewBox="0 0 18 18" aria-hidden="true">
        <path fill="#4285F4" d="M17.64 9.2c0-.64-.06-1.25-.16-1.84H9v3.48h4.84a4.14 4.14 0 0 1-1.8 2.72v2.26h2.92c1.7-1.57 2.68-3.88 2.68-6.62z"/>
        <path fill="#34A853" d="M9 18c2.43 0 4.47-.8 5.96-2.18l-2.92-2.26c-.8.54-1.84.86-3.04.86-2.34 0-4.32-1.58-5.03-3.7H.96v2.33A9 9 0 0 0 9 18z"/>
        <path fill="#FBBC05" d="M3.97 10.72a5.4 5.4 0 0 1 0-3.44V4.95H.96a9 9 0 0 0 0 8.1l3.01-2.33z"/>
        <path fill="#EA4335" d="M9 3.58c1.32 0 2.5.45 3.44 1.35l2.58-2.58A9 9 0 0 0 .96 4.95l3.01 2.33C4.68 5.16 6.66 3.58 9 3.58z"/>
      </svg>
      <span><%= t('auth.google_btn') %></span>
    </a>
  <% } else { %>
    <div class="alert"><%= t('auth.google_unavail') %></div>
  <% } %>

  <% if (!_admin) { %>
    <%# Klikbare box voor de beheerder → naar de verborgen wachtwoord-login. %>
    <a class="auth-admin-box" href="/auth/admin<%= (typeof next !== 'undefined' && next) ? '?next=' + encodeURIComponent(next) : '' %>">
      <span class="auth-admin-box-icon" aria-hidden="true">🔑</span>
      <span class="auth-admin-box-text">
        <strong><%= t('auth.admin_box_q') %></strong>
        <small><%= t('auth.admin_box_sub') %></small>
      </span>
      <span class="auth-admin-box-arrow" aria-hidden="true">&rarr;</span>
    </a>
  <% } %>
</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; }
  .auth-sub { color: var(--ink-muted); margin: 0 0 1rem; text-align: center; }
  /* Google-knop is wit → tekst altijd donker houden, ook op hover (de globale
     a.btn:hover-regel maakt 'm anders bijna-wit op wit = onleesbaar). */
  a.btn-google, a.btn-google:hover { color: #1f1f1f; }
  .auth-admin-box {
    display: flex; align-items: center; gap: .75rem;
    margin-top: 1.25rem; padding: .8rem 1rem;
    border: 1px solid var(--rule); border-radius: 12px;
    background: var(--paper-2); color: var(--ink); text-decoration: none;
    transition: border-color 120ms, background 120ms;
  }
  .auth-admin-box:hover { border-color: var(--accent); background: var(--paper); }
  .auth-admin-box-icon { font-size: 1.3rem; }
  .auth-admin-box-text { display: flex; flex-direction: column; line-height: 1.3; flex: 1; }
  .auth-admin-box-text small { color: var(--ink-muted); font-size: .8rem; }
  .auth-admin-box-arrow { color: var(--ink-muted); font-size: 1.1rem; }
</style>