webmaster/slipmatz-web
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

chore: add firebase dependency to package.json

Browse Source
This commit is contained in:
Frank John Begornia
2025-11-07 17:38:13 +08:00
parent a545cbfcca
commit 50f08f8177
7 changed files with 1180 additions and 20 deletions
Download Patch File Download Diff File Expand all files Collapse all files

65
app/components/AppNavbar.vue
View File

@@ -1,29 +1,58 @@
<script setup lang="ts">
const { user, signOut, initAuth, isLoading } = useAuth()
const showLoginModal = ref(false)
// Initialize auth on component mount
onMounted(() => {
initAuth()
})
const handleSignOut = async () => {
try {
await signOut()
} catch (error) {
console.error('Sign out failed:', error)
}
}
</script>
<template>
<nav class="sticky top-0 z-30 border-b border-slate-800/60 bg-slate-950/80 backdrop-blur">
<div class="mx-auto max-w-6xl px-4 py-4 sm:px-6 lg:px-8">
<div class="flex items-center justify-between gap-6">
<p class="text-lg font-semibold text-white sm:text-xl">Slipmatz</p>
<div class="flex items-center gap-3">
<button
type="button"
class="rounded-full border border-slate-700/80 px-4 py-2 text-sm font-medium text-slate-200 transition hover:border-slate-500 hover:text-white focus:outline-none focus-visible:ring-2 focus-visible:ring-sky-500 focus-visible:ring-offset-2 focus-visible:ring-offset-slate-950"
>
Login
</button>
<button
type="button"
class="rounded-full bg-sky-500/90 px-4 py-2 text-sm font-semibold text-white transition hover:bg-sky-400 focus:outline-none focus-visible:ring-2 focus-visible:ring-sky-300 focus-visible:ring-offset-2 focus-visible:ring-offset-slate-950"
>
Register
</button>
<button
type="button"
class="rounded-full border border-slate-700/80 px-4 py-2 text-sm font-medium text-slate-200 transition hover:border-rose-500 hover:text-rose-300 focus:outline-none focus-visible:ring-2 focus-visible:ring-rose-500 focus-visible:ring-offset-2 focus-visible:ring-offset-slate-950"
>
Logout
</button>
<!-- Show user info and logout when authenticated -->
<div v-if="user && !isLoading" class="flex items-center gap-3">
<span class="text-sm text-slate-300">{{ user.email }}</span>
<button
type="button"
@click="handleSignOut"
class="rounded-full border border-slate-700/80 px-4 py-2 text-sm font-medium text-slate-200 transition hover:border-rose-500 hover:text-rose-300 focus:outline-none focus-visible:ring-2 focus-visible:ring-rose-500 focus-visible:ring-offset-2 focus-visible:ring-offset-slate-950"
>
Logout
</button>
</div>
<!-- Show login button when not authenticated -->
<div v-else-if="!isLoading" class="flex items-center gap-3">
<button
type="button"
@click="showLoginModal = true"
class="rounded-full border border-slate-700/80 px-4 py-2 text-sm font-medium text-slate-200 transition hover:border-slate-500 hover:text-white focus:outline-none focus-visible:ring-2 focus-visible:ring-sky-500 focus-visible:ring-offset-2 focus-visible:ring-offset-slate-950"
>
Login
</button>
</div>
<!-- Loading state -->
<div v-else class="flex items-center gap-3">
<div class="h-8 w-16 animate-pulse rounded bg-slate-700"></div>
</div>
</div>
</div>
</div>
<LoginModal v-model="showLoginModal" />
</nav>
</template>