46 lines
1.4 KiB
Vue
46 lines
1.4 KiB
Vue
<script setup lang="ts">
|
|
import { t } from '@/i18n'
|
|
import { computed, ref } from 'vue'
|
|
import ProfileCard from '@/components/ProfileCard.vue'
|
|
import RoleBadge from '@/components/RoleBadge.vue'
|
|
import RoleSummaryDialog from '@/components/RoleSummaryDialog.vue'
|
|
import { buildHeldRolePreview } from '@/lib/rolePreview'
|
|
import { usePermissionsStore } from '@/stores/permissions'
|
|
import { useIsDesktop } from '@/composables/useIsDesktop'
|
|
|
|
const permissions = usePermissionsStore()
|
|
const isDesktop = useIsDesktop()
|
|
const summaryOpen = ref(false)
|
|
|
|
const model = computed(() => buildHeldRolePreview(permissions.grants))
|
|
</script>
|
|
|
|
<template>
|
|
<ProfileCard :title="t('Your role')">
|
|
<div class="flex flex-wrap items-center gap-2">
|
|
<RoleBadge :role="permissions.role" />
|
|
<span v-if="permissions.roleAssignedBy" class="text-muted">{{
|
|
t('Assigned by {0}', [permissions.roleAssignedBy.name])
|
|
}}</span>
|
|
</div>
|
|
<UButton
|
|
color="neutral"
|
|
variant="link"
|
|
icon="i-lucide-list-checks"
|
|
class="self-start p-0 font-medium text-highlighted"
|
|
@click="summaryOpen = true"
|
|
>
|
|
{{ t('See what I can do') }}
|
|
</UButton>
|
|
<p class="text-pretty text-muted">
|
|
{{ t('Your API keys follow this role. If your role changes, they change too.') }}
|
|
</p>
|
|
<RoleSummaryDialog
|
|
v-model:open="summaryOpen"
|
|
:model="model"
|
|
:role-name="permissions.roleName"
|
|
:mobile="!isDesktop"
|
|
/>
|
|
</ProfileCard>
|
|
</template>
|