Permissions refactor. Permissions have UUID and scope (previously id) and the latter no longer needs to be unique. Org admin uses a single global permission now. Domain scoped permissions. Removed from user info the admin fields, use effective_permission checks instead.

2026-01-23 13:54:31 +00:00
parent 236d52aa55
commit 3430c7f0cf
16 changed files with 729 additions and 318 deletions
@@ -72,10 +72,14 @@ const NAME_EDIT_TYPES = new Set(['org-update', 'role-update', 'user-update-name'
          <label>Display Name
            <input ref="displayNameInput" v-model="dialog.data.display_name" required />
          </label>
-          <label>Permission ID
-            <input v-model="dialog.data.id" :placeholder="dialog.type === 'perm-create' ? 'yourapp:permission' : dialog.data.permission.id" required :pattern="PERMISSION_ID_PATTERN" title="Allowed: A-Za-z0-9:._~-" data-form-type="other" />
+          <label>Permission Scope
+            <input v-model="dialog.data.scope" :placeholder="dialog.type === 'perm-create' ? 'yourapp:permission' : dialog.data.permission.scope" required :pattern="PERMISSION_ID_PATTERN" title="Allowed: A-Za-z0-9:._~-" data-form-type="other" />
          </label>
-          <p class="small muted">The permission ID is used for permission checks in the application. Changing it may break deployed applications that reference this permission.</p>
+          <label>Domain Scope <span class="optional">(optional)</span>
+            <input v-model="dialog.data.domain" placeholder="e.g. app.example.com" data-form-type="other" />
+          </label>
+          <p class="small muted">If set, this permission only applies when accessed from the specified domain. Must be the RP ID or a subdomain of it.</p>
+          <p class="small muted">The permission scope is used for permission checks in the application. Changing it may break deployed applications that reference this permission.</p>
        </template>
        <template v-else-if="dialog.type==='confirm'">
          <p>{{ dialog.data.message }}</p>
@@ -106,4 +110,5 @@ const NAME_EDIT_TYPES = new Set(['org-update', 'role-update', 'user-update-name'
 .error { color: var(--color-danger-text); }
 .small { font-size: 0.9rem; }
 .muted { color: var(--color-text-muted); }
+.optional { font-weight: normal; color: var(--color-text-muted); font-size: 0.85em; }
 </style>
@@ -26,8 +26,8 @@ const sortedRoles = computed(() => {
  })
 })

-function permissionDisplayName(id) {
-  return props.permissions.find(p => p.id === id)?.display_name || id
+function permissionDisplayName(scope) {
+  return props.permissions.find(p => p.scope === scope)?.display_name || scope
 }

 function toggleRolePermission(role, pid, checked) {
@@ -24,10 +24,14 @@ const sortedOrgs = computed(() => [...props.orgs].sort((a,b)=> {
  const nameCompare = a.display_name.localeCompare(b.display_name)
  return nameCompare !== 0 ? nameCompare : a.uuid.localeCompare(b.uuid)
 }))
-const sortedPermissions = computed(() => [...props.permissions].sort((a,b)=> a.id.localeCompare(b.id)))
+const sortedPermissions = computed(() => [...props.permissions].sort((a,b)=> a.scope.localeCompare(b.scope)))

-function permissionDisplayName(id) {
-  return props.permissions.find(p => p.id === id)?.display_name || id
+// Derive admin status from permissions
+const isGlobalAdmin = computed(() => props.info?.permissions?.includes('auth:admin') ?? false)
+const isOrgAdmin = computed(() => props.info?.permissions?.includes('auth:org:admin') ?? false)
+
+function permissionDisplayName(scope) {
+  return props.permissions.find(p => p.scope === scope)?.display_name || scope
 }

 function getRoleNames(org) {
@@ -89,7 +93,7 @@ function handleTableKeydown(event, tableType) {
  } else if (direction === 'down' && currentIndex === rows.length - 1) {
    // At bottom of org table, navigate to permissions section
    event.preventDefault()
-    if (tableType === 'org' && props.info.is_global_admin) {
+    if (tableType === 'org' && isGlobalAdmin.value) {
      // Navigate to permissions matrix or actions
      if (permMatrixRef.value) {
        const firstCheckbox = permMatrixRef.value.querySelector('input[type="checkbox"]')
@@ -232,7 +236,7 @@ function handlePermActionsKeydown(event) {

 // Focus helper for external navigation
 function focusFirstElement() {
-  if (props.info.is_global_admin) {
+  if (isGlobalAdmin.value) {
    focusPreferred(orgActionsRef.value, { itemSelector: 'button' })
  } else {
    const firstFocusable = orgTableRef.value?.querySelector('tbody tr a, tbody tr button:not([disabled])')
@@ -245,9 +249,9 @@ defineExpose({ focusFirstElement })

 <template>
  <div class="permissions-section" ref="orgSection">
-    <h2>{{ info.is_global_admin ? 'Organizations' : 'Your Organizations' }}</h2>
+    <h2>{{ isGlobalAdmin ? 'Organizations' : 'Your Organizations' }}</h2>
    <div class="actions" ref="orgActionsRef" @keydown="handleOrgActionsKeydown">
-      <button v-if="info.is_global_admin" @click="$emit('createOrg')">+ Create Org</button>
+      <button v-if="isGlobalAdmin" @click="$emit('createOrg')">+ Create Org</button>
    </div>
    <table class="org-table" ref="orgTableRef" @keydown="e => handleTableKeydown(e, 'org')">
      <thead>
@@ -255,18 +259,18 @@ defineExpose({ focusFirstElement })
          <th>Name</th>
          <th>Roles</th>
          <th>Members</th>
-          <th v-if="info.is_global_admin">Actions</th>
+          <th v-if="isGlobalAdmin">Actions</th>
        </tr>
      </thead>
      <tbody>
        <tr v-for="o in sortedOrgs" :key="o.uuid">
          <td>
            <a href="#org/{{o.uuid}}" @click.prevent="$emit('openOrg', o)">{{ o.display_name }}</a>
-            <button v-if="info.is_global_admin || info.is_org_admin" @click="$emit('updateOrg', o)" class="icon-btn edit-org-btn" aria-label="Rename organization" title="Rename organization">✏️</button>
+            <button v-if="isGlobalAdmin || isOrgAdmin" @click="$emit('updateOrg', o)" class="icon-btn edit-org-btn" aria-label="Rename organization" title="Rename organization">✏️</button>
          </td>
          <td class="role-names">{{ getRoleNames(o) }}</td>
          <td class="center">{{ o.roles.reduce((acc,r)=>acc + r.users.length,0) }}</td>
-          <td v-if="info.is_global_admin" class="center">
+          <td v-if="isGlobalAdmin" class="center">
            <button @click="$emit('deleteOrg', o)" class="icon-btn delete-icon" aria-label="Delete organization" title="Delete organization">❌</button>
          </td>
        </tr>
@@ -274,7 +278,7 @@ defineExpose({ focusFirstElement })
    </table>
  </div>

-  <div v-if="info.is_global_admin" class="permissions-section">
+  <div v-if="isGlobalAdmin" class="permissions-section">
    <h2>Permissions</h2>
    <div class="matrix-wrapper" ref="permMatrixRef" @keydown="handleMatrixKeydown">
      <div class="matrix-scroll">
@@ -292,19 +296,19 @@ defineExpose({ focusFirstElement })
            <span>{{ o.display_name }}</span>
          </div>

-          <template v-for="p in sortedPermissions" :key="p.id">
-            <div class="perm-name" :title="p.id">
+          <template v-for="p in sortedPermissions" :key="p.scope">
+            <div class="perm-name" :title="p.scope">
              <span class="display-text">{{ p.display_name }}</span>
            </div>
            <div
              v-for="o in sortedOrgs"
-              :key="o.uuid + '-' + p.id"
+              :key="o.uuid + '-' + p.scope"
              class="matrix-cell"
            >
              <input
                type="checkbox"
-                :checked="o.permissions.includes(p.id)"
-                @change="e => $emit('toggleOrgPermission', o, p.id, e.target.checked)"
+                :checked="o.permissions.includes(p.scope)"
+                @change="e => $emit('toggleOrgPermission', o, p.scope, e.target.checked)"
              />
            </div>
          </template>
@@ -313,28 +317,30 @@ defineExpose({ focusFirstElement })
      <p class="matrix-hint muted">Toggle which permissions each organization can grant to its members.</p>
    </div>
    <div class="actions" ref="permActionsRef" @keydown="handlePermActionsKeydown">
-      <button v-if="info.is_global_admin" @click="$emit('openDialog', 'perm-create', { display_name: '', id: '' })">+ Create Permission</button>
+      <button v-if="isGlobalAdmin" @click="$emit('openDialog', 'perm-create', { display_name: '', scope: '', domain: '' })">+ Create Permission</button>
    </div>
    <table class="org-table" ref="permTableRef" @keydown="e => handleTableKeydown(e, 'perm')">
        <thead>
          <tr>
            <th scope="col">Permission</th>
+            <th scope="col">Domain</th>
            <th scope="col" class="center">Members</th>
            <th scope="col" class="center">Actions</th>
          </tr>
        </thead>
        <tbody>
-          <tr v-for="p in sortedPermissions" :key="p.id">
+          <tr v-for="p in sortedPermissions" :key="p.scope">
            <td class="perm-name-cell">
              <div class="perm-title">
                <span class="display-text">{{ p.display_name }}</span>
-                <button @click="$emit('renamePermissionDisplay', p)" class="icon-btn edit-display-btn" aria-label="Edit display name" title="Edit display name">✏️</button>
+                <button @click="$emit('renamePermissionDisplay', p)" class="icon-btn edit-display-btn" aria-label="Edit permission" title="Edit permission">✏️</button>
              </div>
              <div class="perm-id-info">
-                <span class="id-text">{{ p.id }}</span>
+                <span class="id-text">{{ p.scope }}</span>
              </div>
            </td>
-            <td class="perm-members center">{{ permissionSummary[p.id]?.userCount || 0 }}</td>
+            <td class="perm-domain">{{ p.domain || '—' }}</td>
+            <td class="perm-members center">{{ permissionSummary[p.scope]?.userCount || 0 }}</td>
            <td class="perm-actions center">
              <button @click="$emit('deletePermission', p)" class="icon-btn delete-icon" aria-label="Delete permission" title="Delete permission">❌</button>
            </td>
@@ -355,7 +361,8 @@ defineExpose({ focusFirstElement })
 .org-table .role-names { max-width: 200px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
 .perm-name-cell { display: flex; flex-direction: column; gap: 0.3rem; }
 .perm-title { font-weight: 600; color: var(--color-heading); }
-.perm-id-info { font-size: 0.8rem; color: var(--color-text-muted); }
+.perm-id-info { font-size: 0.8rem; color: var(--color-text-muted); display: flex; align-items: center; gap: 0.5rem; flex-wrap: wrap; }
+.perm-domain { color: var(--color-text-muted); font-size: 0.9rem; }
 .icon-btn { background: none; border: none; color: var(--color-text-muted); padding: 0.2rem; border-radius: var(--radius-sm); cursor: pointer; transition: background 0.2s ease, color 0.2s ease; }
 .icon-btn:hover { color: var(--color-heading); background: var(--color-surface-muted); }
 .delete-icon { color: var(--color-danger); }
@@ -324,7 +324,10 @@ const terminateSession = async (session) => {
 const logoutEverywhere = async () => { await authStore.logoutEverywhere() }
 const logout = async () => { await authStore.logout() }
 const openNameDialog = () => { newName.value = authStore.userInfo?.user?.user_name || ''; showNameDialog.value = true }
-const isAdmin = computed(() => !!(authStore.userInfo?.is_global_admin || authStore.userInfo?.is_org_admin))
+const isAdmin = computed(() => {
+  const perms = authStore.userInfo?.permissions ?? []
+  return perms.includes('auth:admin') || perms.includes('auth:org:admin')
+})
 const hasMultipleSessions = computed(() => sessions.value.length > 1)
 const breadcrumbEntries = computed(() => { const entries = [{ label: 'Auth', href: makeUiHref() }]; if (isAdmin.value) entries.push({ label: 'Admin', href: adminUiPath() }); return entries })