100 lines
3.2 KiB
Vue
100 lines
3.2 KiB
Vue
<script setup lang="ts">
|
|
import { useAuth } from '@/composables/useAuth'
|
|
import DashboardLayout from '@/layouts/DashboardLayout.vue'
|
|
|
|
defineOptions({
|
|
layout: DashboardLayout,
|
|
})
|
|
|
|
const { user } = useAuth()
|
|
</script>
|
|
|
|
<template>
|
|
<UDashboardPanel>
|
|
<template #header>
|
|
<UDashboardNavbar title="Dashboard" />
|
|
</template>
|
|
|
|
<template #body>
|
|
<div class="flex flex-col gap-6">
|
|
<UCard>
|
|
<div class="flex items-center gap-4">
|
|
<UIcon name="i-lucide-shield-check" class="text-primary size-8" />
|
|
<div>
|
|
<h2 class="text-lg font-medium">
|
|
Welcome back, {{ user?.first_name }}!
|
|
</h2>
|
|
<p class="text-muted text-sm">
|
|
Your email is verified and you have access to this protected page.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</UCard>
|
|
|
|
<div class="grid grid-cols-1 md:grid-cols-3 gap-4">
|
|
<UCard>
|
|
<div class="flex items-center gap-3">
|
|
<UIcon name="i-lucide-lock" class="text-primary size-5" />
|
|
<div>
|
|
<p class="text-sm font-medium">
|
|
Auth Middleware
|
|
</p>
|
|
<p class="text-muted text-xs">
|
|
Route requires authentication
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</UCard>
|
|
|
|
<UCard>
|
|
<div class="flex items-center gap-3">
|
|
<UIcon name="i-lucide-mail-check" class="text-primary size-5" />
|
|
<div>
|
|
<p class="text-sm font-medium">
|
|
Verified Middleware
|
|
</p>
|
|
<p class="text-muted text-xs">
|
|
Route requires email verification
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</UCard>
|
|
|
|
<UCard>
|
|
<div class="flex items-center gap-3">
|
|
<UIcon name="i-lucide-layout-dashboard" class="text-primary size-5" />
|
|
<div>
|
|
<p class="text-sm font-medium">
|
|
Nuxt UI Dashboard
|
|
</p>
|
|
<p class="text-muted text-xs">
|
|
Built with dashboard components
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</UCard>
|
|
</div>
|
|
|
|
<UCard>
|
|
<template #header>
|
|
<h3 class="font-medium">
|
|
Route Protection
|
|
</h3>
|
|
</template>
|
|
<div class="text-sm space-y-2">
|
|
<p class="text-muted">
|
|
This page is protected with both <code class="bg-gray-100 dark:bg-gray-800 px-1.5 py-0.5 rounded text-xs">auth</code> and <code class="bg-gray-100 dark:bg-gray-800 px-1.5 py-0.5 rounded text-xs">verified</code> middleware. Unauthenticated users are redirected to login, and unverified users are redirected to the email verification page.
|
|
</p>
|
|
<UAlert
|
|
icon="i-lucide-info"
|
|
color="info"
|
|
variant="subtle"
|
|
title="Enable email verification by setting AUTH_ENABLE_EMAIL_VERIFICATION=true in your .env file."
|
|
/>
|
|
</div>
|
|
</UCard>
|
|
</div>
|
|
</template>
|
|
</UDashboardPanel>
|
|
</template>
|