Changeset 2d66d66 in Klonkt for src/views/pages

Timestamp:

07/19/2026 04:17:44 PM (7 weeks ago)

Author:

Robin <roboburr@…>

Branches:

main

Children:

33e1dbd

Parents:

4407c67

git-author:

Robin <roboburr@…> (07/19/2026 04:17:27 PM)

git-committer:

Robin <roboburr@…> (07/19/2026 04:17:44 PM)

Message:

Feature: revoke connected OAuth apps from the account page

You issue C2S bearer tokens (Shaer, etc.) but had no way to see or revoke them.
The account page now has a 'Connected apps' section listing every authorization
(app name via the client join, site, scope, last used) with a Revoke button.
Already-issued tokens appear because they were always stored (hashed) with the
user/client/site; the bearer is never kept, so revocation is keyed on the safe
token_hash and scoped to the owner (you cannot revoke someone else's).

• OAuthService.listAuthorizations(userId) / revokeAuthorization(userId, hash).
• account.js: authorizations passed to the page; POST /account/oauth/revoke.
• account.ejs: the section + styles; i18n NL/EN/DE. Visible to viewers too (revoking your own app access is a safety action).

83 tests green. Live-verified: two apps listed on /account, revoke one -> it is
gone and the other stays, token count drops in the DB.

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

File:

• src/views/pages/account.ejs (modified) (2 diffs)

src/views/pages/account.ejs

@@ -117 +117 @@
   <%# ── PASSWORD ──────────────────────────────────────────── %>
   <%# In viewer mode there is no password section (nothing to change). %>
+  <%# ── CONNECTED APPS (OAuth C2S) ─────────────────────────── %>
+  <section class="ax-card">
+    <div class="ax-card-title"><%= t('acct.oauth_apps') %></div>
+    <p class="ax-tagline" style="margin:0 0 .6rem"><%= t('acct.oauth_hint') %></p>
+    <% if (!authorizations || !authorizations.length) { %>
+      <p class="ax-oauth-empty"><%= t('acct.oauth_none') %></p>
+    <% } else { %>
+      <ul class="ax-oauth-list">
+        <% authorizations.forEach(function(a){ %>
+          <li class="ax-oauth-item">
+            <div class="ax-oauth-info">
+              <strong><%= a.client_name || t('acct.oauth_unknown_app') %></strong>
+              <span class="ax-oauth-meta">@<%= a.site_slug %> · <%= a.scope || 'c2s' %> · <%= t('acct.oauth_last_used') %> <%= a.last_used_at ? formatDate(a.last_used_at) : t('acct.oauth_never') %></span>
+            </div>
+            <form action="/account/oauth/revoke" method="post">
+              <input type="hidden" name="token_hash" value="<%= a.token_hash %>">
+              <button type="submit" class="ax-btn ax-btn-danger"><%= t('acct.oauth_revoke') %></button>
+            </form>
+          </li>
+        <% }); %>
+      </ul>
+    <% } %>
+  </section>
+
   <% if (canMutate) { %>
   <% if (hasPassword) { %>
@@ -331 +355 @@
   .ax-profile-id { flex-direction: column; align-items: flex-start; gap: 0.75rem; text-align: left; }
 }
+
+.ax-oauth-empty { margin: 0; color: var(--ink-soft, #888); }
+.ax-oauth-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: .6rem; }
+.ax-oauth-item { display: flex; align-items: center; justify-content: space-between; gap: 1rem; padding: .7rem .85rem; border-radius: 12px; background: var(--paper-2, rgba(0,0,0,.04)); }
+.ax-oauth-info { display: flex; flex-direction: column; gap: .15rem; min-width: 0; }
+.ax-oauth-info strong { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.ax-oauth-meta { font-size: .8rem; color: var(--ink-soft, #888); }
+@media (max-width: 480px) {
+  .ax-oauth-item { flex-direction: column; align-items: stretch; }
+}
 </style>