78 lines
2.9 KiB
Vue
78 lines
2.9 KiB
Vue
<script setup lang="ts">
|
|
import { useI18n } from 'vue-i18n';
|
|
import { useAuthStore } from '../stores/auth';
|
|
|
|
const auth = useAuthStore();
|
|
const { t } = useI18n();
|
|
</script>
|
|
|
|
<template>
|
|
<div>
|
|
<h1 class="page-title">{{ t('dashboard.greeting', { name: auth.user?.name }) }}</h1>
|
|
<p class="page-subtitle">{{ t('dashboard.subtitle') }}</p>
|
|
|
|
<div class="dashboard__grid">
|
|
<router-link to="/clients" class="card card--interactive">
|
|
<h2 class="card__title">{{ t('dashboard.clientsTitle') }}</h2>
|
|
<p class="card__subtitle">{{ t('dashboard.clientsDesc') }}</p>
|
|
</router-link>
|
|
|
|
<router-link to="/tokens" class="card card--interactive">
|
|
<h2 class="card__title">{{ t('dashboard.tokensTitle') }}</h2>
|
|
<p class="card__subtitle">{{ t('dashboard.tokensDesc') }}</p>
|
|
</router-link>
|
|
|
|
<router-link to="/authorized-apps" class="card card--interactive">
|
|
<h2 class="card__title">{{ t('dashboard.appsTitle') }}</h2>
|
|
<p class="card__subtitle">{{ t('dashboard.appsDesc') }}</p>
|
|
</router-link>
|
|
|
|
<router-link to="/security" class="card card--interactive">
|
|
<h2 class="card__title">{{ t('dashboard.securityTitle') }}</h2>
|
|
<p class="card__subtitle">{{ t('dashboard.securityDesc') }}</p>
|
|
</router-link>
|
|
|
|
<router-link v-if="auth.isAdmin" to="/admin/users" class="card card--interactive">
|
|
<h2 class="card__title">{{ t('dashboard.usersTitle') }}</h2>
|
|
<p class="card__subtitle">{{ t('dashboard.usersDesc') }}</p>
|
|
</router-link>
|
|
|
|
<router-link v-if="auth.isAdmin" to="/admin/analytics" class="card card--interactive">
|
|
<h2 class="card__title">{{ t('dashboard.analyticsTitle') }}</h2>
|
|
<p class="card__subtitle">{{ t('dashboard.analyticsDesc') }}</p>
|
|
</router-link>
|
|
</div>
|
|
|
|
<div class="card dashboard__api-card">
|
|
<h2 class="card__title">{{ t('dashboard.apiTitle') }}</h2>
|
|
<p class="card__subtitle">
|
|
<i18n-t keypath="dashboard.apiDesc" tag="span">
|
|
<template #resource><code>/api/users</code></template>
|
|
<template #read><code>users:read</code></template>
|
|
<template #write><code>users:write</code></template>
|
|
<template #link><a href="/api/documentation" class="link">/api/documentation</a></template>
|
|
</i18n-t>
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<style scoped>
|
|
.dashboard__grid {
|
|
margin-top: 2rem;
|
|
display: grid;
|
|
grid-template-columns: 1fr;
|
|
gap: 1rem;
|
|
}
|
|
|
|
.dashboard__api-card {
|
|
margin-top: 2rem;
|
|
}
|
|
|
|
@media (min-width: 640px) {
|
|
.dashboard__grid {
|
|
grid-template-columns: repeat(3, 1fr);
|
|
}
|
|
}
|
|
</style>
|