47 lines
1.3 KiB
Vue
47 lines
1.3 KiB
Vue
<script setup lang="ts">
|
|
import { t } from '@/i18n'
|
|
import { computed } from 'vue'
|
|
import { useRouter } from 'vue-router'
|
|
import { usePermissionsStore } from '@/stores/permissions'
|
|
|
|
const router = useRouter()
|
|
const permissions = usePermissionsStore()
|
|
|
|
const canReadArticles = computed(() => permissions.can('content.read', { typeKey: 'article' }))
|
|
const actionLabel = computed(() => (canReadArticles.value ? t('Go to Articles') : t('Go to Home')))
|
|
|
|
function goToSafePage() {
|
|
router.push(canReadArticles.value ? '/article' : '/home')
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<UEmpty
|
|
variant="naked"
|
|
icon="i-lucide-lock"
|
|
:title="t('You don\'t have access to this page')"
|
|
:description="
|
|
t('Your role, {0}, doesn\'t include it. Ask an owner or admin if you need it.', [
|
|
permissions.roleName,
|
|
])
|
|
"
|
|
:ui="{
|
|
root: 'gap-3 border border-default bg-default px-6 py-14',
|
|
avatar: 'mb-0 size-11 rounded-none bg-elevated text-toned',
|
|
title: 'text-md font-semibold',
|
|
description: 'max-w-85 text-pretty text-muted',
|
|
}"
|
|
>
|
|
<template #actions>
|
|
<UButton
|
|
color="neutral"
|
|
variant="outline"
|
|
class="h-11 border border-accented bg-default px-4 text-sm text-highlighted ring-0 sm:h-8"
|
|
@click="goToSafePage"
|
|
>
|
|
{{ actionLabel }}
|
|
</UButton>
|
|
</template>
|
|
</UEmpty>
|
|
</template>
|