64 lines
1.8 KiB
Vue
64 lines
1.8 KiB
Vue
<script setup lang="ts">
|
|
import { useForm } from '@inertiajs/vue3'
|
|
import { useAuth } from '@/composables/useAuth'
|
|
|
|
defineProps<{
|
|
appName: string
|
|
}>()
|
|
|
|
const { user, isAuthenticated, config } = useAuth()
|
|
|
|
const logoutForm = useForm({})
|
|
|
|
function logout() {
|
|
logoutForm.post('/logout')
|
|
}
|
|
</script>
|
|
|
|
<template>
|
|
<UApp>
|
|
<div class="min-h-screen flex flex-col bg-gray-100 dark:bg-gray-900">
|
|
<header class="flex items-center justify-end gap-4 p-4">
|
|
<template v-if="isAuthenticated">
|
|
<UButton to="/dashboard" variant="ghost">
|
|
Dashboard
|
|
</UButton>
|
|
<span class="text-sm text-gray-600 dark:text-gray-400">
|
|
{{ user?.full_name }}
|
|
</span>
|
|
<UButton variant="outline" :loading="logoutForm.processing" @click="logout">
|
|
Logout
|
|
</UButton>
|
|
</template>
|
|
<template v-else>
|
|
<UButton to="/login" variant="ghost">
|
|
Login
|
|
</UButton>
|
|
<UButton v-if="config.features.registration" to="/register">
|
|
Register
|
|
</UButton>
|
|
</template>
|
|
</header>
|
|
|
|
<div class="flex-1 flex items-center justify-center">
|
|
<div class="text-center">
|
|
<h1 class="text-4xl font-bold text-gray-900 dark:text-white">
|
|
Welcome to {{ appName }}
|
|
</h1>
|
|
<p class="mt-4 text-gray-600 dark:text-gray-400">
|
|
Inertia.js with Vue and Nuxt UI is ready to go!
|
|
</p>
|
|
<div v-if="!isAuthenticated" class="mt-8 flex gap-4 justify-center">
|
|
<UButton to="/register">
|
|
Get Started
|
|
</UButton>
|
|
<UButton variant="outline">
|
|
Learn More
|
|
</UButton>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</UApp>
|
|
</template>
|