feat: roles SPA foundations

web/src/views/ApiKeysView.vue

@@ -15,6 +15,7 @@ import { useApiKeys, type ApiKey, type CreatedApiKey } from '@/composables/useAp
 import { toastsAboveBulkBar } from '@/composables/useToastOffset'
 import { displayPrefix } from '@/lib/apiKeys'
 import { useSessionStore } from '@/stores/session'
+import { usePermissionsStore } from '@/stores/permissions'
 
 const DESKTOP_QUERY = '(min-width: 48rem)'
 const AUTH_HANDLED_STATUSES = [401, 403]
@@ -27,6 +28,7 @@ type LoadState = 'loading' | 'ready' | 'error'
 const toast = useLocalizedToast()
 const overlay = useLocalizedOverlay()
 const session = useSessionStore()
+const permissions = usePermissionsStore()
 const { listApiKeys, revokeApiKey } = useApiKeys()
 const isDesktop = useMediaQuery(DESKTOP_QUERY)
 
@@ -37,7 +39,7 @@ const revealed = ref<{ name: string; key: string } | null>(null)
 const revokeDialogOpen = ref(false)
 let opener: HTMLElement | null = null
 
-const isOwner = computed(() => session.session?.role === 'owner')
+const seesEveryKey = computed(() => permissions.scopeOf('apikeys.view') === 'all')
 const isEmpty = computed(() => loadState.value === 'ready' && keys.value.length === 0)
 const showList = computed(
 	() => loadState.value === 'loading' || (loadState.value === 'ready' && keys.value.length > 0),
@@ -47,7 +49,7 @@ const anyDialogOpen = computed(
 	() => createOpen.value || revealed.value !== null || revokeDialogOpen.value,
 )
 const description = computed(() =>
-	isOwner.value
+	seesEveryKey.value
 		? t("Keys act as the user who created them. As an owner you see everyone's keys.")
 		: t('Keys act as you, with your role. You only see your own keys.'),
 )
@@ -329,14 +331,14 @@ onMounted(loadKeys)
 					v-if="isDesktop"
 					:keys="keys"
 					:loading="loadState === 'loading'"
-					:show-created-by="isOwner"
+					:show-created-by="seesEveryKey"
 					@revoke="confirmRevoke"
 				/>
 				<ApiKeyCardList
 					v-else
 					:keys="keys"
 					:loading="loadState === 'loading'"
-					:show-created-by="isOwner"
+					:show-created-by="seesEveryKey"
 					@revoke="confirmRevoke"
 				/>
 			</template>