From 702fe9e134e385a9d65862b4999f41c1ecf29c7a Mon Sep 17 00:00:00 2001
From: Ronni Baslund <rhb@vdoc.dk>
Date: Sun, 24 May 2026 16:47:03 +0200
Subject: [PATCH] feat(operator): real account settings page
MIME-Version: 1.0
Content-Type: text/plain; charset=UTF-8
Content-Transfer-Encoding: 8bit

Replace the OpPlaceholder stub at /settings with a three-card account page:

- Profile: name, email, subject ID, deduped group chips (Authentik returns
  each group twice; dedupe in the computed). Last sign-in derived from JWT
  iat via the existing /api/_verify-token endpoint.
- Security: three deep links to Authentik's user settings — change password,
  manage MFA devices, active sessions. We don't re-implement identity here;
  Authentik already has a polished UI for it.
- Appearance: theme / density / env segmented controls. Shares the
  useTweaks composable with the floating Tweaks panel, so flipping here
  is reflected there and vice-versa.
---
 apps/operator/pages/settings.vue | 264 ++++++++++++++++++++++++++++++-
 1 file changed, 257 insertions(+), 7 deletions(-)

diff --git a/apps/operator/pages/settings.vue b/apps/operator/pages/settings.vue
index 908b290..1228d15 100644
--- a/apps/operator/pages/settings.vue
+++ b/apps/operator/pages/settings.vue
@@ -1,10 +1,260 @@
-<script setup lang="ts"></script>
+<script setup lang="ts">
+// Account settings page — the destination from the topbar UserMenu's
+// "Settings" item. Three cards:
+//   - Profile (read-only, sourced from the signed-in user's JWT claims)
+//   - Security (deep links to Authentik for password / MFA / sessions —
+//     identity lives there, not here)
+//   - Appearance (theme/density/env, same store as the floating Tweaks panel)
+
+interface VerifyResponse {
+  iss?: string
+  aud?: string
+  sub?: string
+  email?: string
+  groups?: string[]
+  exp?: number
+  iat?: number
+}
+
+const { user } = useOidcAuth()
+const { state: tweaks, setTheme, setDensity, setEnv } = useTweaks()
+
+const { data: token } = useLazyFetch<VerifyResponse>('/api/_verify-token', {
+  server: false,
+  default: () => ({}),
+})
+
+const displayName = computed(() => user.value?.userInfo?.name || user.value?.userName || '—')
+const email = computed(
+  () => (user.value?.userInfo as { email?: string } | undefined)?.email || token.value?.email || '—',
+)
+const subject = computed(() => token.value?.sub ?? user.value?.userName ?? '—')
+// Authentik returns each group twice in the groups claim (one entry per
+// matching policy binding). Dedupe so we only render each chip once.
+const groups = computed(() => Array.from(new Set(token.value?.groups ?? [])))
+const lastSignIn = computed(() => {
+  const iat = token.value?.iat
+  if (!iat) return null
+  return new Date(iat * 1000)
+})
+
+const AUTHENTIK = 'https://auth.dezky.local'
+const links = [
+  {
+    icon: 'key' as const,
+    title: 'Change password',
+    desc: "Opens Authentik's password change flow in a new tab.",
+    href: `${AUTHENTIK}/if/user/`,
+  },
+  {
+    icon: 'shield' as const,
+    title: 'Manage MFA devices',
+    desc: 'Add or remove TOTP, WebAuthn, or recovery codes.',
+    href: `${AUTHENTIK}/if/user/`,
+  },
+  {
+    icon: 'plug' as const,
+    title: 'Active sessions',
+    desc: 'Revoke other devices that are currently signed in as you.',
+    href: `${AUTHENTIK}/if/user/`,
+  },
+]
+</script>
 
 <template>
-  <OpPlaceholder
-    eyebrow="Platform"
-    title="Platform settings"
-    icon="shield"
-    body="Global toggles: default plan, terms of service version, brand assets, retention windows, allowed regions. Currently configured via env vars and provisioning scripts."
-  />
+  <div>
+    <PageHeader
+      eyebrow="Account"
+      title="Settings"
+      :subtitle="`Signed in as ${displayName}. Identity is managed in Authentik — security controls deep-link there.`"
+    />
+
+    <div class="stage">
+      <Card :pad="0">
+        <div class="head">
+          <div>
+            <Eyebrow>Profile</Eyebrow>
+            <div class="cap">Who you are right now</div>
+          </div>
+          <Mono v-if="lastSignIn" dim>last sign-in · {{ lastSignIn.toLocaleString('da-DK') }}</Mono>
+        </div>
+        <dl class="kv">
+          <div class="row">
+            <dt>Name</dt>
+            <dd>{{ displayName }}</dd>
+          </div>
+          <div class="row">
+            <dt>Email</dt>
+            <dd><Mono>{{ email }}</Mono></dd>
+          </div>
+          <div class="row">
+            <dt>Subject ID</dt>
+            <dd><Mono dim>{{ subject }}</Mono></dd>
+          </div>
+          <div class="row">
+            <dt>Groups</dt>
+            <dd class="groups">
+              <Badge
+                v-for="g in groups"
+                :key="g"
+                :tone="g === 'dezky-platform-admins' ? 'accent' : 'neutral'"
+              >{{ g }}</Badge>
+              <Mono v-if="!groups.length" dim>—</Mono>
+            </dd>
+          </div>
+        </dl>
+      </Card>
+
+      <Card :pad="0">
+        <div class="head">
+          <div>
+            <Eyebrow>Security</Eyebrow>
+            <div class="cap">Password & MFA</div>
+          </div>
+        </div>
+        <div class="links">
+          <a v-for="l in links" :key="l.title" :href="l.href" target="_blank" rel="noopener" class="link">
+            <span class="link-icon"><UiIcon :name="l.icon" :size="14" /></span>
+            <span class="link-body">
+              <span class="link-title">{{ l.title }}</span>
+              <Mono dim>{{ l.desc }}</Mono>
+            </span>
+            <UiIcon name="external" :size="12" />
+          </a>
+        </div>
+      </Card>
+
+      <Card :pad="0">
+        <div class="head">
+          <div>
+            <Eyebrow>Appearance</Eyebrow>
+            <div class="cap">Cosmetic toggles · saved per browser</div>
+          </div>
+          <Mono dim>also in the floating ⚙ panel</Mono>
+        </div>
+        <div class="appearance">
+          <section>
+            <span class="label">Theme</span>
+            <div class="seg">
+              <button :class="{ on: tweaks.theme === 'dark' }" type="button" @click="setTheme('dark')">Dark</button>
+              <button :class="{ on: tweaks.theme === 'light' }" type="button" @click="setTheme('light')">Light</button>
+            </div>
+          </section>
+          <section>
+            <span class="label">Density</span>
+            <div class="seg">
+              <button :class="{ on: tweaks.density === 'comfy' }" type="button" @click="setDensity('comfy')">Comfy</button>
+              <button :class="{ on: tweaks.density === 'compact' }" type="button" @click="setDensity('compact')">Compact</button>
+            </div>
+          </section>
+          <section>
+            <span class="label">Env badge</span>
+            <div class="seg three">
+              <button :class="{ on: tweaks.env === 'prod' }" type="button" @click="setEnv('prod')">PROD</button>
+              <button :class="{ on: tweaks.env === 'staging' }" type="button" @click="setEnv('staging')">STAGING</button>
+              <button :class="{ on: tweaks.env === 'dev' }" type="button" @click="setEnv('dev')">DEV</button>
+            </div>
+          </section>
+        </div>
+      </Card>
+    </div>
+  </div>
 </template>
+
+<style scoped>
+.stage { padding: 24px 40px 64px 40px; display: flex; flex-direction: column; gap: 16px; max-width: 880px; }
+
+.head {
+  padding: 16px 20px;
+  border-bottom: 1px solid var(--border);
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+.cap { font-family: var(--font-display); font-weight: 600; font-size: 17px; margin-top: 4px; }
+
+.kv { margin: 0; padding: 4px 0; }
+.kv .row {
+  display: grid;
+  grid-template-columns: 140px 1fr;
+  align-items: center;
+  gap: 16px;
+  padding: 10px 20px;
+  border-bottom: 1px solid var(--border);
+}
+.kv .row:last-child { border-bottom: none; }
+.kv dt {
+  font-family: var(--font-mono);
+  font-size: 10px;
+  letter-spacing: 0.12em;
+  text-transform: uppercase;
+  color: var(--text-mute);
+  font-weight: 500;
+}
+.kv dd { margin: 0; font-size: 13px; }
+.kv dd.groups { display: flex; flex-wrap: wrap; gap: 6px; }
+
+.links { display: flex; flex-direction: column; }
+.link {
+  display: flex;
+  align-items: center;
+  gap: 14px;
+  padding: 12px 20px;
+  border-bottom: 1px solid var(--border);
+  color: var(--text);
+  text-decoration: none;
+  cursor: pointer;
+}
+.link:last-child { border-bottom: none; }
+.link:hover { background: var(--surface); }
+.link-icon {
+  width: 30px;
+  height: 30px;
+  border-radius: 6px;
+  background: var(--surface);
+  border: 1px solid var(--border);
+  display: inline-flex;
+  align-items: center;
+  justify-content: center;
+  color: var(--text-dim);
+  flex-shrink: 0;
+}
+.link-body { flex: 1; min-width: 0; display: flex; flex-direction: column; gap: 2px; }
+.link-title { font-size: 13px; font-weight: 500; }
+
+.appearance { padding: 16px 20px; display: flex; flex-direction: column; gap: 16px; }
+.appearance section { display: flex; flex-direction: column; gap: 8px; }
+.label {
+  font-family: var(--font-mono);
+  font-size: 10px;
+  letter-spacing: 0.12em;
+  text-transform: uppercase;
+  color: var(--text-mute);
+  font-weight: 500;
+}
+.seg {
+  display: grid;
+  grid-template-columns: 1fr 1fr;
+  gap: 4px;
+  padding: 3px;
+  background: var(--surface);
+  border: 1px solid var(--border);
+  border-radius: 7px;
+  max-width: 280px;
+}
+.seg.three { grid-template-columns: 1fr 1fr 1fr; max-width: 360px; }
+.seg button {
+  appearance: none;
+  border: 0;
+  background: transparent;
+  color: var(--text-dim);
+  font-family: inherit;
+  font-size: 12px;
+  font-weight: 500;
+  padding: 6px 8px;
+  border-radius: 5px;
+  cursor: pointer;
+}
+.seg button:hover { color: var(--text); }
+.seg button.on { background: var(--text); color: var(--bg); }
+</style>