faber-finances/app/app.vue

58 lines
1.4 KiB
Vue

<template>
<div>
<!-- Navigation -->
<nav class="bg-black border-b-4 border-black">
<div class="max-w-7xl mx-auto px-4 sm:px-6 lg:px-8">
<div class="flex justify-between h-16">
<div class="flex items-center">
<NuxtLink to="/" class="text-xl font-bold text-white font-mono">
FABER FINANCES
</NuxtLink>
</div>
<div class="flex items-center">
<button
v-if="authenticated"
@click="logout"
class="text-white hover:text-gray-300 px-3 py-2 text-sm font-medium"
>
Logout
</button>
</div>
</div>
</div>
</nav>
<!-- Main Content -->
<NuxtPage />
</div>
</template>
<script setup>
// Global SEO
useSeoMeta({
titleTemplate: "%s - Faber Finances",
description: "Personal finance and cash flow management system",
});
const authenticated = ref(false)
// Check authentication status
onMounted(async () => {
try {
const { authenticated: isAuth } = await $fetch('/api/auth/check')
authenticated.value = isAuth
} catch (err) {
authenticated.value = false
}
})
// Logout function
const logout = async () => {
try {
await $fetch('/api/auth/logout', { method: 'POST' })
authenticated.value = false
await navigateTo('/login')
} catch (err) {
console.error('Logout error:', err)
}
}
</script>