Changeset c80e78b in Klonkt for src/views

Timestamp:

06/14/2026 04:39:57 AM (3 months ago)

Author:

roboburr <roboburr@…>

Branches:

main

Children:

ae924a2

Parents:

89d6536

Message:

auth: replace username/password with Google login

Listeners (and the owner) now log in via Google instead of a local
username/password account. This lowers the barrier to commenting and
removes the home-built password/registration system.

• src/config/google.js: raw OAuth2 helpers (authorize/token/userinfo) via the built-in fetch, config-driven. Boot keeps working without credentials.
• src/routes/auth.js: /auth/google + /auth/google/callback (find-or-create user on email, ADMIN_EMAIL -> god, set session). login/register/reset POST handlers removed; /login now shows the Google button.
• database.js: idempotent column users.google_sub.
• account.js + account.ejs: change-password removed.
• auth-login.ejs / welcome.ejs: Google button instead of password form.
• shared-styles.ejs: .btn-google styling.
• .env.example: GOOGLE_CLIENT_ID/SECRET/REDIRECT_URI + ADMIN_EMAIL.

Existing users are matched on email (owner retains their site).
DO NOT deploy to roboburr until the Google credentials are in .env, otherwise
the owner locks themselves out.

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

Location:

src/views

Files:

• pages/account.ejs (modified) (2 diffs)
• pages/auth-login.ejs (modified) (1 diff)
• pages/welcome.ejs (modified) (1 diff)
• partials/shared-styles.ejs (modified) (1 diff)

src/views/pages/account.ejs

@@ -5 +5 @@
     <div>
       <h1>Account</h1>
-      <p class="ax-tagline">Profiel en wachtwoord.</p>
+      <p class="ax-tagline">Profiel en avatar.</p>
     </div>
   </header>
@@ -65 +65 @@
   </section>
 
-  <%# ── PASSWORD ──────────────────────────────────────────── %>
+  <%# ── INLOG ─────────────────────────────────────────────── %>
   <section class="ax-card">
-    <div class="ax-card-title">Wachtwoord wijzigen</div>
-    <form action="/account/password" method="post" class="ax-form">
-      <label class="ax-field">
-        <span>Huidig wachtwoord</span>
-        <input type="password" name="current" required autocomplete="current-password">
-      </label>
-      <div class="ax-row ax-row-2">
-        <label class="ax-field">
-          <span>Nieuw wachtwoord <small>(min 8 tekens)</small></span>
-          <input type="password" name="new_password" required minlength="8" autocomplete="new-password">
-        </label>
-        <label class="ax-field">
-          <span>Bevestig nieuw wachtwoord</span>
-          <input type="password" name="confirm" required minlength="8" autocomplete="new-password">
-        </label>
-      </div>
-      <div class="ax-form-actions">
-        <button type="submit" class="ax-btn ax-btn-primary">🔒 Wachtwoord wijzigen</button>
-      </div>
-    </form>
+    <div class="ax-card-title">Inloggen</div>
+    <p class="ax-tagline" style="margin:0">Je bent ingelogd via Google (<%= account.email %>). Er is geen apart wachtwoord.</p>
   </section>
 

src/views/pages/auth-login.ejs

@@ -1 +1 @@
 <div class="container auth-page">
-  <h1>Login</h1>
-  <% if (typeof success !== 'undefined' && success) { %><div class="alert alert-success"><%= success %></div><% } %>
+  <h1>Inloggen</h1>
   <% if (error) { %><div class="alert alert-error"><%= error %></div><% } %>
-  <form method="post" action="/auth/login" class="auth-form">
-    <% if (typeof next !== 'undefined' && next) { %>
-      <input type="hidden" name="next" value="<%= next %>">
+
+  <div class="auth-form auth-google">
+    <% if (googleReady) { %>
+      <p class="auth-intro">Log in met je Google-account om mee te praten.</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>Inloggen met Google</span>
+      </a>
+    <% } else { %>
+      <p class="auth-intro">Inloggen via Google is op deze site nog niet ingesteld.</p>
     <% } %>
-    <label>
-      <span>Username or email</span>
-      <input type="text" name="username" value="<%= username %>" required autofocus autocomplete="username">
-    </label>
-    <label>
-      <span>Password</span>
-      <input type="password" name="password" required autocomplete="current-password">
-    </label>
-    <button type="submit" class="btn btn-primary">Login</button>
-    <p class="auth-link">No account?
-      <a href="/auth/register<%= (typeof next !== 'undefined' && next) ? '?next=' + encodeURIComponent(next) : '' %>">Register</a>
-    </p>
-    <p class="auth-link auth-link-muted"><a href="/auth/reset-request">Forgot password?</a></p>
-  </form>
+  </div>
 </div>

src/views/pages/welcome.ejs

@@ -5 +5 @@
   <% if (!user) { %>
     <div class="welcome-actions">
-      <a href="/auth/register" class="btn btn-primary">Create your account</a>
-      <a href="/auth/login" class="btn">Already have one? Login</a>
+      <a href="/auth/login" class="btn btn-primary">Inloggen met Google</a>
     </div>
-    <p class="welcome-note">The first user becomes <strong>god</strong> and gets a personal site auto-created.</p>
+    <p class="welcome-note">De eerste gebruiker die inlogt wordt <strong>god</strong> en krijgt automatisch een eigen site.</p>
   <% } else { %>
     <p>Hi <%= user.username %>! No site is configured yet.</p>

src/views/partials/shared-styles.ejs

@@ -117 +117 @@
 .auth-link { text-align: center; color: var(--ink-muted); font-size: 0.9rem; margin: 1rem 0 0; }
 .auth-link a { color: var(--accent); }
+.auth-google { align-items: stretch; }
+.auth-intro { text-align: center; color: var(--ink-muted); font-size: 0.95rem; margin: 0 0 1rem; }
+.btn-google {
+  justify-content: center; gap: 0.6rem; padding: 0.7rem; font-size: 1rem;
+  background: #fff; color: #1f1f1f; border: 1px solid #dadce0;
+}
+.btn-google:hover { background: #f7f8f8; border-color: #dadce0; }
+.btn-google .g-icon { flex-shrink: 0; }
 
 /* HTMX loading indicator */