Admin OIDC Client editing moved to its own page.

2026-02-16 20:32:55 +00:00
parent 09049d3094
commit 30aeb9a310
12 changed files with 603 additions and 173 deletions
@@ -9,10 +9,12 @@ import AccessDenied from '@/components/AccessDenied.vue'
 import AdminOverview from '@/admin/AdminOverview.vue'
 import AdminOrgDetail from '@/admin/AdminOrgDetail.vue'
 import AdminUserDetail from '@/admin/AdminUserDetail.vue'
+import AdminOidcDetail from '@/admin/AdminOidcDetail.vue'
 import AdminDialogs from '@/admin/AdminDialogs.vue'
 import { useAuthStore } from '@/stores/auth'
 import { adminUiPath, makeUiHref } from '@/utils/settings'
 import { apiJson, SessionValidator } from 'paskia'
+import { uuidv7 } from 'uuidv7'
 import { getDirection } from '@/utils/keynav'
 import { goBack } from '@/utils/helpers'

@@ -27,7 +29,9 @@ const permissions = ref([])
 const oidcClients = ref([])
 const currentOrgId = ref(null) // UUID of selected org for detail view
 const currentUserId = ref(null) // UUID for user detail view
+const currentOidcId = ref(null) // UUID for OIDC client detail view
 const userDetail = ref(null) // cached user detail object
+const editingOidcClient = ref(null) // OIDC client being edited (with local changes)
 const authStore = useAuthStore()
 const addingOrgForPermission = ref(null)
 const PERMISSION_ID_PATTERN = '^[A-Za-z0-9:._~-]+$'
@@ -44,6 +48,7 @@ const breadcrumbsRef = ref(null)
 const adminOverviewRef = ref(null)
 const adminOrgDetailRef = ref(null)
 const adminUserDetailRef = ref(null)
+const adminOidcDetailRef = ref(null)

 // Check if any modal/dialog is open (blocks arrow key navigation)
 const hasActiveModal = computed(() => dialog.value.type !== null || showRegModal.value)
@@ -121,10 +126,40 @@ function parseHash() {
  const h = window.location.hash || ''
  currentOrgId.value = null
  currentUserId.value = null
+  currentOidcId.value = null
+  editingOidcClient.value = null
  if (h.startsWith('#org/')) {
    currentOrgId.value = h.slice(5)
  } else if (h.startsWith('#user/')) {
    currentUserId.value = h.slice(6)
+  } else if (h.startsWith('#oidc:')) {
+    const oidcUuid = h.slice(6)
+    currentOidcId.value = oidcUuid
+    // Initialize editing client data
+    if (oidcUuid === 'new') {
+      // Generate client_id and secret for new client
+      const bytes = new Uint8Array(32)
+      crypto.getRandomValues(bytes)
+      const client_secret = btoa(String.fromCharCode(...bytes))
+        .replace(/\+/g, '-').replace(/\//g, '_').replace(/=+$/, '')
+      editingOidcClient.value = {
+        client_id: uuidv7(),
+        client_secret,
+        isNew: true,
+        name: '',
+        redirect_uris: []
+      }
+    } else {
+      const client = oidcClients.value.find(c => c.uuid === oidcUuid)
+      if (client) {
+        editingOidcClient.value = {
+          ...client,
+          client_id: client.uuid,
+          client_secret: null,
+          isNew: false
+        }
+      }
+    }
  }
 }

@@ -174,6 +209,7 @@ function clearSensitiveState() {
  permissions.value = []
  oidcClients.value = []
  userDetail.value = null
+  editingOidcClient.value = null
  authenticated.value = false
 }

@@ -406,42 +442,39 @@ function deletePermission(p) {
 }

 // OIDC Client actions
-async function createOidcClient() {
-  try {
-    // Create the record on the server immediately, then open edit dialog
-    const result = await apiJson('/auth/api/admin/oidc-clients', { method: 'POST', body: {} })
-    await loadOidcClients()
-    openDialog('oidc-edit', {
-      client_id: result.client_id,
-      client_secret: result.client_secret,
-      isNew: true,
-      name: '',
-      redirect_uris: ''
-    })
-  } catch (e) {
-    authStore.showMessage(e.message || 'Failed to create OIDC client', 'error')
+async function sha256Hex(text) {
+  const hash = await crypto.subtle.digest('SHA-256', new TextEncoder().encode(text))
+  return [...new Uint8Array(hash)].map(b => b.toString(16).padStart(2, '0')).join('')
+}
+
+function createOidcClient() {
+  // Navigate to new OIDC client page
+  window.location.hash = '#oidc:new'
+}
+
+function openOidcClient(client) {
+  // Navigate to OIDC client detail page
+  window.location.hash = `#oidc:${client.uuid}`
+}
+
+function resetOidcSecret(clientId) {
+  // Generate new secret locally; it will be sent to server on Save
+  const bytes = new Uint8Array(32)
+  crypto.getRandomValues(bytes)
+  const client_secret = btoa(String.fromCharCode(...bytes))
+    .replace(/\+/g, '-').replace(/\//g, '_').replace(/=+$/, '')
+  // Update editingOidcClient if we're on the detail page
+  if (editingOidcClient.value?.client_id === clientId) {
+    editingOidcClient.value = { ...editingOidcClient.value, client_secret }
+  }
+  // Also update dialog if open (for backwards compatibility)
+  if (dialog.value.type === 'oidc-edit' && dialog.value.data?.client_id === clientId) {
+    dialog.value.data.client_secret = client_secret
  }
 }

-function editOidcClient(client) {
-  openDialog('oidc-edit', {
-    client_id: client.uuid,
-    name: client.name,
-    redirect_uris: client.redirect_uris.join('\n')
-  })
-}
-
-async function resetOidcSecret(clientId) {
-  try {
-    const result = await apiJson(`/auth/api/admin/oidc-clients/${clientId}/reset-secret`, { method: 'POST' })
-    // Update the dialog data in place so the new secret is shown
-    if (dialog.value.type === 'oidc-edit' && dialog.value.data?.client_id === clientId) {
-      dialog.value.data.client_secret = result.client_secret
-    }
-    authStore.showMessage('Client secret has been reset.', 'success', 2500)
-  } catch (e) {
-    authStore.showMessage(e.message || 'Failed to reset client secret', 'error')
-  }
+function createPermissionForClient(clientId) {
+  openDialog('perm-create', { display_name: '', scope: '', domain: clientId })
 }

 function deleteOidcClient(client) {
@@ -449,6 +482,10 @@ function deleteOidcClient(client) {
    message: `Delete OIDC client "${client.name}"? This will break any applications using this client.`,
    action: async () => {
      await performOidcClientDeletion(client.uuid, client.name)
+      // Navigate back to overview if we were on the detail page
+      if (currentOidcId.value === client.uuid) {
+        window.location.hash = '#overview'
+      }
    }
  })
 }
@@ -459,6 +496,32 @@ async function performOidcClientDeletion(clientUuid, clientName) {
  await loadOidcClients()
 }

+async function handleOidcSave(data) {
+  const { client_id, client_secret, name, redirect_uris, isNew } = data
+
+  try {
+    if (client_secret) {
+      const secret_hash = await sha256Hex(client_secret)
+      if (isNew) {
+        await apiJson('/auth/api/admin/oidc-clients', { method: 'POST', body: { client_id, secret_hash, name, redirect_uris } })
+      } else {
+        await apiJson(`/auth/api/admin/oidc-clients/${client_id}`, { method: 'PATCH', body: { name, redirect_uris, secret_hash } })
+      }
+    } else {
+      await apiJson(`/auth/api/admin/oidc-clients/${client_id}`, { method: 'PATCH', body: { name, redirect_uris } })
+    }
+    authStore.showMessage(`OIDC client "${name}" ${isNew ? 'created' : 'updated'}.`, 'success', 2500)
+    await loadOidcClients()
+    window.location.hash = '#overview'
+  } catch (e) {
+    authStore.showMessage(e.message || `Failed to ${isNew ? 'create' : 'update'} OIDC client`, 'error')
+  }
+}
+
+function handleOidcCancel() {
+  goOverview()
+}
+
 const selectedOrg = computed(() => orgs.value.find(o => o.uuid === currentOrgId.value) || null)

 function openOrg(o) {
@@ -487,6 +550,7 @@ const selectedUser = computed(() => {
 const pageHeading = computed(() => {
  if (selectedUser.value) return 'Admin: User'
  if (selectedOrg.value) return 'Admin: Org'
+  if (currentOidcId.value) return 'Admin: OIDC Client'
  return ((authStore.settings?.rp_name) || 'Master') + ' Admin'
 })

@@ -505,6 +569,10 @@ const breadcrumbEntries = computed(() => {
  if (orgToShow) {
    entries.push({ label: orgToShow.display_name, href: `#org/${orgToShow.uuid}` })
  }
+  if (currentOidcId.value) {
+    const label = editingOidcClient.value?.isNew ? 'New Client' : (editingOidcClient.value?.name || 'OIDC Client')
+    entries.push({ label, href: `#oidc:${currentOidcId.value}` })
+  }
  if (selectedUser.value) {
    entries.push({ label: selectedUser.value.display_name, href: `#user/${selectedUser.value.uuid}` })
  }
@@ -798,7 +866,7 @@ async function submitDialog() {
        })
      return // Don't call closeDialog() again
    } else if (t === 'oidc-edit') {
-      const { client_id } = dialog.value.data
+      const { client_id, client_secret, isNew } = dialog.value.data
      const name = dialog.value.data.name?.trim()
      const uris = dialog.value.data.redirect_uris?.trim()
      if (!name) throw new Error('Client name required')
@@ -808,13 +876,18 @@ async function submitDialog() {
      // Close dialog immediately, then perform async operation
      closeDialog()

-      apiJson(`/auth/api/admin/oidc-clients/${client_id}`, { method: 'PATCH', body: { name, redirect_uris } })
+      const req = client_secret
+        ? sha256Hex(client_secret).then(secret_hash => isNew
+            ? apiJson('/auth/api/admin/oidc-clients', { method: 'POST', body: { client_id, secret_hash, name, redirect_uris } })
+            : apiJson(`/auth/api/admin/oidc-clients/${client_id}`, { method: 'PATCH', body: { name, redirect_uris, secret_hash } }))
+        : apiJson(`/auth/api/admin/oidc-clients/${client_id}`, { method: 'PATCH', body: { name, redirect_uris } })
+      req
        .then(() => {
-          authStore.showMessage(`OIDC client "${name}" updated.`, 'success', 2500)
+          authStore.showMessage(`OIDC client "${name}" ${isNew ? 'created' : 'updated'}.`, 'success', 2500)
          loadOidcClients()
        })
        .catch(e => {
-          authStore.showMessage(e.message || 'Failed to update OIDC client', 'error')
+          authStore.showMessage(e.message || `Failed to ${isNew ? 'create' : 'update'} OIDC client`, 'error')
        })
      return // Don't call closeDialog() again
    } else if (t === 'confirm') {
@@ -864,7 +937,7 @@ async function submitDialog() {
          <div class="section-body admin-section-body">
            <div class="admin-panels">
                                  <AdminOverview
-                  v-if="!selectedUser && !selectedOrg && (isMasterAdmin || isOrgAdmin)"
+                  v-if="!selectedUser && !selectedOrg && !currentOidcId && (isMasterAdmin || isOrgAdmin)"
                  ref="adminOverviewRef"
                  :info="info"
                  :orgs="orgs"
@@ -881,7 +954,7 @@ async function submitDialog() {
                  @delete-permission="deletePermission"
                  @rename-permission-display="renamePermissionDisplay"
                  @create-oidc-client="createOidcClient"
-                  @edit-oidc-client="editOidcClient"
+                  @open-oidc-client="openOidcClient"
                  @delete-oidc-client="deleteOidcClient"
                  @navigate-out="handlePanelNavigateOut"
                />
@@ -924,6 +997,21 @@ async function submitDialog() {
                  @on-user-drag-start="onUserDragStart"
                />

+                <AdminOidcDetail
+                  v-else-if="currentOidcId && editingOidcClient"
+                  ref="adminOidcDetailRef"
+                  :client="editingOidcClient"
+                  :permissions="permissions"
+                  :is-new="editingOidcClient.isNew"
+                  :navigation-disabled="hasActiveModal"
+                  @save="handleOidcSave"
+                  @cancel="handleOidcCancel"
+                  @delete="deleteOidcClient"
+                  @reset-secret="resetOidcSecret"
+                  @create-permission="createPermissionForClient"
+                  @navigate-out="handlePanelNavigateOut"
+                />
+
              </div>
          </div>
        </section>
@@ -936,6 +1024,7 @@ async function submitDialog() {
      @submit-dialog="submitDialog"
      @close-dialog="closeDialog"
      @reset-oidc-secret="resetOidcSecret"
+      @create-permission-for-client="createPermissionForClient"
    />
  </div>
 </template>
@@ -14,6 +14,7 @@
    "pinia": "^3.0.3",
    "qrcode": "^1.5.4",
    "sirv": "^3.0.2",
+    "uuidv7": "^1.1.0",
    "vue": "^3.5.17"
  },
  "devDependencies": {
@@ -10,7 +10,7 @@ const props = defineProps({
  settings: Object
 })

-const emit = defineEmits(['submitDialog', 'closeDialog', 'resetOidcSecret'])
+const emit = defineEmits(['submitDialog', 'closeDialog', 'resetOidcSecret', 'createPermissionForClient'])

 const NAME_EDIT_TYPES = new Set(['org-update', 'role-update', 'user-update-name'])
 const NO_SUBMIT_TYPES = new Set([])
@@ -97,36 +97,44 @@ function copyText(value, label) {
          <p class="small muted">A domain ({{ rpId }} or subdomain) restricts this permission to that host. An OIDC client UUID sends it as a <em>groups</em> claim to that client.</p>
        </template>
        <template v-else-if="dialog.type==='oidc-edit'">
+          <template v-if="dialog.data.client_id">
+            <dl class="oidc-dl">
+              <dt>Auth Name (opt)</dt>
+              <dd @click="copyText('paskia', 'Authentication Name')" title="Click to copy"><output>paskia</output></dd>
+              <dt>Discovery URL</dt>
+              <dd @click="copyText(discoveryUrl, 'OpenID Connect Discovery URL')" title="Click to copy"><output>{{ discoveryUrl }}</output></dd>
+              <dt>Client ID</dt>
+              <dd @click="copyText(dialog.data.client_id, 'Client ID')" title="Click to copy"><output>{{ dialog.data.client_id }}</output></dd>
+              <dt>Client Secret</dt>
+              <dd v-if="dialog.data.client_secret" @click="copyText(dialog.data.client_secret, 'Client Secret')" title="Click to copy"><output>{{ dialog.data.client_secret }}</output></dd>
+              <dd v-else class="oidc-reset-row">
+                <button type="button" class="icon-btn" @click="$emit('resetOidcSecret', dialog.data.client_id)" title="Revoke and re-generate secret">🔄</button>
+              </dd>
+              <dt>Groups <button type="button" class="icon-btn" @click="$emit('createPermissionForClient', dialog.data.client_id)" title="Add permission scoped to this client">➕</button></dt>
+              <dd class="oidc-groups">
+                <template v-if="dialog.data.groups?.length">
+                  <div v-for="group in dialog.data.groups" :key="group.uuid" class="oidc-group" @click="copyText(group.scope, 'Group Value')" :title="group.display_name">
+                    <output>{{ group.scope }}</output>
+                  </div>
+                </template>
+                <span v-else class="small muted">No permissions defined.</span>
+              </dd>
+            </dl>
+            <p v-if="dialog.data.client_secret && dialog.data.isNew" class="small"><strong>⚠️ Save the secret now — it cannot be retrieved later.</strong></p>
+            <p v-else-if="dialog.data.client_secret" class="small"><strong>⚠️ Saving will prevent access with the old secret.</strong></p>
+          </template>
+          <p class="small muted">Configure these in the client application.</p>
+          <hr class="oidc-divider" />
+
          <label>Client Name
            <input v-model="dialog.data.name" placeholder="My Application" required />
          </label>
-          <label>Redirect URIs (one per line)
-            <textarea v-model="dialog.data.redirect_uris" placeholder="https://example.com/callback&#10;https://app.example.com/auth/callback" rows="4"></textarea>
+          <label>Redirect URIs
+            <p class="small muted">This should be provided by the client application.</p>
+            <textarea v-model="dialog.data.redirect_uris" placeholder="(autodiscover one on first use)" rows="2"></textarea>
          </label>
-          <p class="small muted">Enter the allowed callback URLs for this OIDC client, one per line.</p>

-          <template v-if="dialog.data.client_id">
-            <hr class="oidc-divider" />
-            <p class="small muted">Configure these in the remote application. Click a value to copy.</p>
-            <dl class="oidc-dl">
-              <dt>Client ID</dt>
-              <dd @click="copyText(dialog.data.client_id, 'Client ID')" title="Click to copy"><output>{{ dialog.data.client_id }}</output></dd>
-              <template v-if="dialog.data.client_secret">
-                <dt>Client Secret</dt>
-                <dd @click="copyText(dialog.data.client_secret, 'Client Secret')" title="Click to copy"><output>{{ dialog.data.client_secret }}</output></dd>
-              </template>
-              <dt>Discovery URL</dt>
-              <dd @click="copyText(discoveryUrl, 'Discovery URL')" title="Click to copy"><output>{{ discoveryUrl }}</output></dd>
-            </dl>
-            <p v-if="dialog.data.client_secret" class="small"><strong>⚠️ Save the secret now — it cannot be retrieved later.</strong></p>
-            <div v-else class="oidc-reset-row">
-              <button type="button" class="btn-secondary" @click="$emit('resetOidcSecret', dialog.data.client_id)">
-                🔄 Reset Client Secret
-              </button>
-              <span class="small muted">Generate a new secret (invalidates the current one)</span>
-            </div>
-          </template>
-        </template>
+         </template>
        <template v-else-if="dialog.type==='confirm'">
          <p>{{ dialog.data.message }}</p>
        </template>
@@ -169,4 +177,7 @@ function copyText(value, label) {
 .oidc-dl dd { margin: 0; cursor: pointer; overflow: hidden; }
 .oidc-dl output { font-family: var(--font-mono, monospace); font-size: 0.85rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; display: block; }
 .oidc-reset-row { display: flex; align-items: center; gap: var(--space-sm); flex-wrap: wrap; }
+.oidc-groups { cursor: default; }
+.oidc-group { cursor: pointer; }
+.oidc-group output { white-space: normal; word-break: break-all; }
 </style>
@@ -0,0 +1,280 @@
+<script setup>
+import { ref, computed, watch, onMounted } from 'vue'
+import { getDirection, navigateButtonRow } from '@/utils/keynav'
+import { useAuthStore } from '@/stores/auth'
+
+const props = defineProps({
+  client: Object,
+  permissions: Array,
+  isNew: { type: Boolean, default: false },
+  navigationDisabled: { type: Boolean, default: false }
+})
+
+const emit = defineEmits(['save', 'cancel', 'delete', 'resetSecret', 'createPermission', 'navigateOut'])
+
+const authStore = useAuthStore()
+const headerRef = ref(null)
+
+// Local form state
+const name = ref('')
+const redirectUris = ref('')
+const clientSecret = ref(null)
+
+// Computed
+const discoveryUrl = computed(() => `${window.location.origin}/.well-known/openid-configuration`)
+const clientId = computed(() => props.client?.client_id || props.client?.uuid || '')
+
+// Groups (permissions) scoped to this client
+const clientGroups = computed(() => {
+  if (!props.client || !props.permissions) return []
+  const clientUuid = props.client.uuid || props.client.client_id
+  return props.permissions.filter(p => p.domain === clientUuid).sort((a, b) => a.scope.localeCompare(b.scope))
+})
+
+// Initialize form data from props
+watch(() => props.client, (c) => {
+  if (c) {
+    name.value = c.name || ''
+    redirectUris.value = Array.isArray(c.redirect_uris) ? c.redirect_uris.join('\n') : (c.redirect_uris || '')
+    clientSecret.value = c.client_secret || null
+  }
+}, { immediate: true })
+
+// Copy-to-clipboard helper
+function copyText(value, label) {
+  navigator.clipboard.writeText(value).then(() => {
+    authStore.showMessage(`${label} copied to clipboard`, 'success', 1500)
+  })
+}
+
+function handleResetSecret() {
+  emit('resetSecret', clientId.value)
+}
+
+// When parent resets secret, update local state
+watch(() => props.client?.client_secret, (newSecret) => {
+  if (newSecret) {
+    clientSecret.value = newSecret
+  }
+})
+
+function handleSave() {
+  const trimmedName = name.value.trim()
+  if (!trimmedName) {
+    authStore.showMessage('Client name is required', 'error')
+    return
+  }
+  const uris = redirectUris.value.trim()
+  const redirect_uris = uris ? uris.split('\n').map(u => u.trim()).filter(u => u) : []
+
+  emit('save', {
+    client_id: clientId.value,
+    client_secret: clientSecret.value,
+    name: trimmedName,
+    redirect_uris,
+    isNew: props.isNew
+  })
+}
+
+function handleDelete() {
+  emit('delete', props.client)
+}
+
+function handleCreatePermission() {
+  emit('createPermission', clientId.value)
+}
+
+function handleCancel() {
+  emit('cancel')
+}
+
+// Keyboard navigation
+function handleHeaderKeydown(event) {
+  if (props.navigationDisabled) return
+
+  const direction = getDirection(event)
+  if (!direction) return
+
+  event.preventDefault()
+
+  if (direction === 'left' || direction === 'right') {
+    navigateButtonRow(headerRef.value, event.target, direction, { itemSelector: 'button, a' })
+  } else if (direction === 'up') {
+    emit('navigateOut', 'up')
+  }
+}
+
+function focusFirstElement() {
+  const firstFocusable = headerRef.value?.querySelector('button, a, input')
+  if (firstFocusable) firstFocusable.focus()
+}
+
+defineExpose({ focusFirstElement })
+</script>
+
+<template>
+  <div class="oidc-detail">
+    <div class="oidc-header" ref="headerRef" @keydown="handleHeaderKeydown">
+      <h2>{{ isNew ? 'New OIDC Client' : (client?.name || 'OIDC Client') }}</h2>
+    </div>
+
+    <form @submit.prevent="handleSave" class="oidc-form">
+      <!-- Client credentials section -->
+      <section class="oidc-credentials">
+        <h3>Client Credentials</h3>
+        <p class="section-description">Configure these values in the client application.</p>
+
+        <dl class="oidc-dl">
+          <dt>Auth Name (opt)</dt>
+          <dd @click="copyText('paskia', 'Authentication Name')" title="Click to copy"><output>paskia</output></dd>
+
+          <dt>Discovery URL</dt>
+          <dd @click="copyText(discoveryUrl, 'OpenID Connect Discovery URL')" title="Click to copy"><output>{{ discoveryUrl }}</output></dd>
+
+          <dt>Client ID</dt>
+          <dd @click="copyText(clientId, 'Client ID')" title="Click to copy"><output>{{ clientId }}</output></dd>
+
+          <dt>Client Secret <button v-if="!clientSecret" type="button" class="icon-btn" @click="handleResetSecret" title="Revoke and re-generate secret">🔄</button></dt>
+          <dd v-if="clientSecret" @click="copyText(clientSecret, 'Client Secret')" title="Click to copy"><output>{{ clientSecret }}</output></dd>
+          <dd v-else class="muted small">(only stored in hashed form)</dd>
+
+          <dt>Groups <button type="button" class="icon-btn" @click="handleCreatePermission" title="Add permission scoped to this client">➕</button></dt>
+          <dd class="oidc-groups">
+            <template v-if="clientGroups.length">
+              <div v-for="group in clientGroups" :key="group.uuid" class="oidc-group" @click="copyText(group.scope, 'Group Value')" :title="group.display_name">
+                <output>{{ group.scope }}</output>
+              </div>
+            </template>
+            <span v-else class="small muted">No permissions defined.</span>
+          </dd>
+        </dl>
+
+        <p v-if="clientSecret && isNew" class="warning-text"><strong>⚠️ Save the secret now — it cannot be retrieved later.</strong></p>
+        <p v-else-if="clientSecret && !isNew" class="warning-text"><strong>⚠️ Saving will prevent access with the old secret.</strong></p>
+      </section>
+
+      <hr class="oidc-divider" />
+
+      <!-- Editable fields -->
+      <section class="oidc-settings">
+        <h3>Client Settings</h3>
+
+        <label>Client Name
+          <input v-model="name" placeholder="My Application" required />
+        </label>
+
+        <label>Redirect URIs
+          <p class="small muted">This should be provided by the client application.</p>
+          <textarea v-model="redirectUris" placeholder="(autodiscover one on first use)" rows="3"></textarea>
+        </label>
+      </section>
+
+      <!-- Actions -->
+      <div class="oidc-actions">
+        <button type="button" class="btn-secondary" @click="handleCancel">Cancel</button>
+        <button v-if="!isNew" type="button" class="btn-danger" @click="handleDelete">Delete Client</button>
+        <button type="submit" class="btn-primary">Save</button>
+      </div>
+    </form>
+  </div>
+</template>
+
+<style scoped>
+.oidc-detail {
+  max-width: 600px;
+}
+
+.oidc-header {
+  margin-bottom: var(--space-lg);
+}
+
+.oidc-header h2 {
+  margin: 0;
+}
+
+.oidc-form {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-lg);
+}
+
+.oidc-credentials,
+.oidc-settings {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-sm);
+}
+
+.oidc-credentials h3,
+.oidc-settings h3 {
+  margin: 0 0 var(--space-xs) 0;
+  font-size: 1rem;
+  display: flex;
+  align-items: center;
+  gap: var(--space-sm);
+}
+
+.section-description {
+  margin: 0;
+  font-size: 0.85rem;
+  color: var(--color-text-muted);
+}
+
+.oidc-dl {
+  display: grid;
+  grid-template-columns: auto 1fr;
+  gap: 0.3rem 1rem;
+  align-items: baseline;
+  margin: var(--space-sm) 0;
+}
+
+.oidc-dl dt {
+  font-size: 0.85rem;
+  color: var(--color-text-muted);
+  white-space: nowrap;
+}
+
+.oidc-dl dd {
+  margin: 0;
+  cursor: pointer;
+  overflow: hidden;
+}
+
+.oidc-dl output {
+  font-family: var(--font-mono, monospace);
+  font-size: 0.85rem;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  display: block;
+}
+
+.warning-text {
+  font-size: 0.9rem;
+  margin: var(--space-sm) 0 0 0;
+}
+
+.oidc-groups { cursor: default; }
+.oidc-group { cursor: pointer; }
+.oidc-group output { white-space: normal; word-break: break-all; }
+
+.oidc-divider {
+  border: none;
+  border-top: 1px solid var(--color-border);
+  margin: var(--space-sm) 0;
+}
+
+.oidc-settings label {
+  display: flex;
+  flex-direction: column;
+  gap: var(--space-xs);
+  font-weight: 500;
+}
+
+.oidc-actions {
+  display: flex;
+  gap: var(--space-sm);
+  justify-content: flex-end;
+  margin-top: var(--space-md);
+}
+</style>
@@ -12,7 +12,7 @@ const props = defineProps({
  navigationDisabled: { type: Boolean, default: false }
 })

-const emit = defineEmits(['createOrg', 'openOrg', 'updateOrg', 'deleteOrg', 'toggleOrgPermission', 'openDialog', 'deletePermission', 'renamePermissionDisplay', 'createOidcClient', 'editOidcClient', 'deleteOidcClient', 'navigateOut'])
+const emit = defineEmits(['createOrg', 'openOrg', 'updateOrg', 'deleteOrg', 'toggleOrgPermission', 'openDialog', 'deletePermission', 'renamePermissionDisplay', 'createOidcClient', 'openOidcClient', 'deleteOidcClient', 'navigateOut'])

 // Template refs for navigation
 const orgSection = ref(null)
@@ -39,6 +39,23 @@ function domainDisplay(domain) {
  if (!domain) return '—'
  return oidcClientNames.value[domain] || domain
 }
+
+// Map OIDC client UUIDs to their group permissions (sorted by scope)
+const clientGroups = computed(() => {
+  const map = {}
+  for (const p of props.permissions || []) {
+    if (p.domain) {
+      if (!map[p.domain]) map[p.domain] = []
+      map[p.domain].push(p)
+    }
+  }
+  // Sort each group array by scope
+  for (const key in map) {
+    map[key].sort((a, b) => a.scope.localeCompare(b.scope))
+  }
+  return map
+})
+
 const sortedPermissions = computed(() => [...props.permissions].sort((a,b)=> a.scope.localeCompare(b.scope)))

 // Derive admin status from permissions (info contains ctx from validate response)
@@ -379,25 +396,29 @@ defineExpose({ focusFirstElement })
      <thead>
        <tr>
          <th scope="col">Client</th>
-          <th scope="col">Redirect URI</th>
+          <th scope="col">Groups</th>
+          <th scope="col" class="center">Sessions</th>
          <th scope="col" class="center">Actions</th>
        </tr>
      </thead>
      <tbody>
        <tr v-if="!oidcClients || oidcClients.length === 0">
-          <td colspan="3" class="center muted">No OIDC clients configured</td>
+          <td colspan="4" class="center muted">No OIDC clients configured</td>
        </tr>
        <tr v-for="client in oidcClients" :key="client.uuid">
          <td class="perm-name-cell">
            <div class="perm-title">
-              <span class="display-text">{{ client.name }}</span>
-              <button @click="$emit('editOidcClient', client)" class="icon-btn edit-display-btn" aria-label="Edit OIDC client" title="Edit OIDC client">✏️</button>
+              <a :href="'#oidc:' + client.uuid" @click.prevent="$emit('openOidcClient', client)">{{ client.name }}</a>
            </div>
            <div class="perm-id-info">
              <span class="id-text">{{ client.uuid }}</span>
            </div>
          </td>
-          <td class="redirect-uris">{{ client.redirect_uris.join(', ') }}</td>
+          <td class="client-groups">
+            <span v-if="clientGroups[client.uuid]?.length">{{ clientGroups[client.uuid].map(g => g.scope).join(' ') }}</span>
+            <span v-else class="muted">—</span>
+          </td>
+          <td class="center">{{ client.active_sessions || 0 }}</td>
          <td class="center">
            <button @click="$emit('deleteOidcClient', client)" class="icon-btn delete-icon" aria-label="Delete OIDC client" title="Delete OIDC client">❌</button>
          </td>
@@ -428,5 +449,5 @@ defineExpose({ focusFirstElement })
 /* OIDC Clients Section */
 .oidc-clients-section { margin-bottom: var(--space-xl); margin-top: var(--space-2xl); }
 .oidc-clients-section .section-header { display: flex; flex-direction: column; gap: 0.4rem; margin-bottom: var(--space-md); }
-.redirect-uris { font-size: 0.9rem; max-width: 300px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
+.client-groups { font-size: 0.85rem; color: var(--color-text-muted); max-width: 200px; font-family: var(--font-mono, monospace); }
 </style>
@@ -317,6 +317,7 @@ button:disabled {
  box-shadow: var(--shadow-soft);
 }

+input:not([type]),
 input[type="text"],
 input[type="search"],
 input[type="email"],
@@ -332,6 +333,17 @@ select {
  transition: border-color var(--transition-base), box-shadow var(--transition-base);
 }

+input:not([type]):focus,
+input[type="text"]:focus,
+input[type="search"]:focus,
+input[type="email"]:focus,
+textarea:focus,
+select:focus {
+  outline: none;
+  border-color: var(--color-accent);
+  box-shadow: var(--focus-ring);
+}
+
 label {
  display: flex;
  flex-direction: column;
@@ -502,7 +514,7 @@ th {
  left: 0;
  right: 0;
  margin: 0 auto;
-  z-index: 1200;
+  z-index: 2000;
  width: fit-content;
  min-width: min(520px, calc(100% - 2rem));
  max-width: calc(100% - 2rem);
@@ -1,12 +1,15 @@
 <template>
-  <dialog ref="dialog" @close="$emit('close')" @keydown="handleDialogKeydown">
-    <slot />
-  </dialog>
+  <div class="dialog-overlay" @click="$emit('close')">
+    <div ref="dialog" class="modal-panel" @keydown="handleDialogKeydown" @click.stop>
+      <slot />
+    </div>
+  </div>
 </template>

 <script setup>
 import { ref, onMounted, onUnmounted, nextTick } from 'vue'
 import { navigateButtonRow, getDirection, focusPreferred, focusDialogDefault } from '@/utils/keynav'
+import { holdGlobalBackdrop, releaseGlobalBackdrop } from 'paskia'

 const props = defineProps({
  // Optional: provide a fallback element to focus if original element is gone
@@ -17,7 +20,7 @@ const props = defineProps({
  focusSiblingSelector: { type: String, default: '' }
 })

-defineEmits(['close'])
+const emit = defineEmits(['close'])

 // Dialog element reference
 const dialog = ref(null)
@@ -76,6 +79,13 @@ const restoreFocus = () => {
 }

 const handleDialogKeydown = (event) => {
+  // ESC to close (previously handled by <dialog> natively)
+  if (event.key === 'Escape') {
+    event.preventDefault()
+    emit('close')
+    return
+  }
+
  const direction = getDirection(event)
  if (!direction) return

@@ -111,11 +121,11 @@ onMounted(() => {
  // Save currently focused element before modal takes focus
  previouslyFocusedElement.value = document.activeElement

-  // Show the dialog as a modal
+  holdGlobalBackdrop()
+
+  // Focus the most appropriate element
  nextTick(() => {
    if (dialog.value) {
-      dialog.value.showModal()
-
      // Autofocus the most appropriate element:
      // - For form dialogs (rename, edit): focus first input and select text
      // - For other dialogs: focus primary button (or fallback)
@@ -131,13 +141,14 @@ onMounted(() => {
 })

 onUnmounted(() => {
+  releaseGlobalBackdrop()
  // Restore focus when modal closes
  restoreFocus()
 })
 </script>

 <style scoped>
-dialog {
+.modal-panel {
  background: var(--color-dialog);
  color: var(--color-text);
  border: 1px solid var(--color-border);
@@ -148,65 +159,36 @@ dialog {
  width: min(500px, 90vw);
  max-height: 90vh;
  overflow-y: auto;
-  position: fixed;
-  inset: 0;
-  margin: auto;
-  height: fit-content;
 }

-dialog::backdrop {
-  background: transparent;
-  backdrop-filter: blur(.1rem) brightness(0.7);
-  -webkit-backdrop-filter: blur(.1rem) brightness(0.7);
-}
-
-dialog :deep(.modal-title),
-dialog :deep(h3) {
+.modal-panel :deep(.modal-title),
+.modal-panel :deep(h3) {
  margin: 0 0 var(--space-md);
  font-size: 1.25rem;
  font-weight: 600;
  color: var(--color-heading);
 }

-dialog :deep(form) {
+.modal-panel :deep(form) {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
 }

-dialog :deep(.modal-form) {
+.modal-panel :deep(.modal-form) {
  display: flex;
  flex-direction: column;
  gap: var(--space-md);
 }

-dialog :deep(.modal-form label) {
+.modal-panel :deep(.modal-form label) {
  display: flex;
  flex-direction: column;
  gap: var(--space-xs);
  font-weight: 500;
 }

-dialog :deep(.modal-form input),
-dialog :deep(.modal-form textarea) {
-  padding: var(--space-md);
-  border: 1px solid var(--color-border);
-  border-radius: var(--radius-sm);
-  background: var(--color-bg);
-  color: var(--color-text);
-  font-size: 1rem;
-  line-height: 1.4;
-  min-height: 2.5rem;
-}
-
-dialog :deep(.modal-form input:focus),
-dialog :deep(.modal-form textarea:focus) {
-  outline: none;
-  border-color: var(--color-accent);
-  box-shadow: var(--focus-ring);
-}
-
-dialog :deep(.modal-actions) {
+.modal-panel :deep(.modal-actions) {
  display: flex;
  justify-content: flex-end;
  gap: var(--space-sm);
@@ -1,6 +1,7 @@
 <template>
-  <dialog ref="dialog" @close="$emit('close')" @keydown="handleDialogKeydown">
-    <div class="device-dialog" role="dialog" aria-modal="true" aria-labelledby="regTitle">
+  <div v-if="linkUrl" class="dialog-overlay" @click="$emit('close')">
+    <div ref="dialog" class="modal-panel" @keydown="handleDialogKeydown" @click.stop>
+      <div class="device-dialog" role="dialog" aria-modal="true" aria-labelledby="regTitle">
      <div class="reg-header-row">
        <h2 id="regTitle" class="reg-title">
          📱 <span v-if="userName">{{ tokenType === 'account recovery' ? 'Recovery' : 'Registration' }} for {{ userName }}</span><span v-else>Add Another Device</span>
@@ -28,14 +29,15 @@
      <div class="reg-actions" ref="actionsRow" @keydown="handleActionsKeydown">
        <button class="btn-secondary" @click="$emit('close')">Close</button>
      </div>
+      </div>
    </div>
-  </dialog>
+  </div>
 </template>

 <script setup>
 import { ref, computed, onMounted, onUnmounted, nextTick } from 'vue'
 import QRCodeDisplay from '@/components/QRCodeDisplay.vue'
-import { apiJson } from 'paskia'
+import { apiJson, holdGlobalBackdrop, releaseGlobalBackdrop } from 'paskia'
 import { formatDate } from '@/utils/helpers'
 import { getDirection } from '@/utils/keynav'
 import { useAuthStore } from '@/stores/auth'
@@ -77,16 +79,13 @@ async function generateLink() {
      expiresAt.value = data.expires ? new Date(data.expires) : null
      tokenType.value = data.token_type || null

-      // Show the dialog as modal
-      await nextTick()
-      if (dialog.value) {
-        dialog.value.showModal()
+      holdGlobalBackdrop()

-        // Focus primary button (or first button if no primary) after content renders
-        const actions = actionsRow.value
-        const target = actions?.querySelector('.btn-primary') || actions?.querySelector('button')
-        target?.focus()
-      }
+      // Focus primary button (or first button if no primary) after content renders
+      await nextTick()
+      const actions = actionsRow.value
+      const target = actions?.querySelector('.btn-primary') || actions?.querySelector('button')
+      target?.focus()
    } else {
      emit('close')
    }
@@ -101,7 +100,12 @@ function onCopied() {
 }

 const handleDialogKeydown = (event) => {
-  // ESC is handled automatically by <dialog>
+  // ESC to close
+  if (event.key === 'Escape') {
+    event.preventDefault()
+    emit('close')
+    return
+  }
  // Handle other key navigation
  const direction = getDirection(event)
  if (!direction) return
@@ -147,6 +151,7 @@ onMounted(() => {
 })

 onUnmounted(() => {
+  if (linkUrl.value) releaseGlobalBackdrop()
  // Restore focus when modal closes
  const prev = previouslyFocusedElement.value
  if (prev && document.body.contains(prev) && !prev.disabled) {
@@ -156,23 +161,6 @@ onUnmounted(() => {
 </script>

 <style scoped>
-dialog {
-  border: none;
-  background: transparent;
-  padding: 0;
-  max-width: none;
-  width: fit-content;
-  height: fit-content;
-  position: fixed;
-  inset: 0;
-  margin: auto;
-}
-
-dialog::backdrop {
-  -webkit-backdrop-filter: blur(.2rem) brightness(0.5);
-  backdrop-filter: blur(.2rem) brightness(0.5);
-}
-
 .icon-btn { background: none; border: none; cursor: pointer; font-size: 1rem; opacity: .6; }
 .icon-btn:hover { opacity: 1; }
 .reg-header-row { display: flex; justify-content: space-between; align-items: center; gap: .75rem; margin-bottom: .75rem; }