Adding features
This commit is contained in:
parent
600fef2b7c
commit
2b55ca4104
75 changed files with 9796 additions and 2759 deletions
|
|
@ -1,142 +1,191 @@
|
|||
<template>
|
||||
<nav class="border-b border-gray-200 dark:border-gray-800 bg-white dark:bg-gray-900">
|
||||
<UContainer>
|
||||
<div class="flex items-center justify-between py-4">
|
||||
<!-- Logo/Brand -->
|
||||
<NuxtLink to="/" class="flex items-center gap-2">
|
||||
<div class="w-8 h-8 bg-emerald-500 rounded-full flex items-center justify-center">
|
||||
<div class="w-4 h-4 bg-white rounded-sm" />
|
||||
</div>
|
||||
<div class="w-6 h-6 bg-emerald-500" style="clip-path: polygon(50% 0%, 0% 100%, 100% 100%)" />
|
||||
<span class="text-xl font-bold text-gray-900 dark:text-white ml-2">Ghost Guild</span>
|
||||
</NuxtLink>
|
||||
|
||||
<!-- Desktop Navigation -->
|
||||
<div class="hidden md:flex items-center gap-8">
|
||||
<NuxtLink
|
||||
v-for="item in navigationItems"
|
||||
:key="item.path"
|
||||
:to="item.path"
|
||||
class="text-gray-600 dark:text-gray-300 hover:text-emerald-600 dark:hover:text-emerald-400 transition-colors font-medium"
|
||||
active-class="text-emerald-600 dark:text-emerald-400"
|
||||
>
|
||||
{{ item.label }}
|
||||
</NuxtLink>
|
||||
<!-- Auth-based buttons -->
|
||||
<div v-if="isAuthenticated" class="flex items-center gap-3 ml-4">
|
||||
<UButton
|
||||
to="/member/dashboard"
|
||||
variant="solid"
|
||||
size="sm"
|
||||
>
|
||||
Dashboard
|
||||
</UButton>
|
||||
<UButton
|
||||
@click="logout"
|
||||
variant="outline"
|
||||
size="sm"
|
||||
>
|
||||
Logout
|
||||
</UButton>
|
||||
</div>
|
||||
<UButton
|
||||
v-else
|
||||
to="/login"
|
||||
variant="outline"
|
||||
size="sm"
|
||||
class="ml-4"
|
||||
>
|
||||
Login
|
||||
</UButton>
|
||||
</div>
|
||||
|
||||
<!-- Mobile Menu Button -->
|
||||
<button
|
||||
class="md:hidden p-2"
|
||||
@click="toggleMobileMenu"
|
||||
aria-label="Toggle menu"
|
||||
<nav
|
||||
class="w-64 lg:w-80 backdrop-blur-sm h-screen sticky top-0 flex flex-col"
|
||||
>
|
||||
<!-- Logo/Brand at top -->
|
||||
<div class="p-8 border-b border-ghost-800 bg-blue-400">
|
||||
<NuxtLink to="/" class="flex flex-col items-center gap-3 group">
|
||||
<span
|
||||
class="text-xl font-bold text-stone-100 ethereal-text tracking-wider"
|
||||
>Ghost Guild Logo</span
|
||||
>
|
||||
<div class="space-y-1">
|
||||
<div class="h-0.5 w-6 bg-gray-600 dark:bg-gray-300 transition-all" :class="{ 'rotate-45 translate-y-1.5': mobileMenuOpen }" />
|
||||
<div class="h-0.5 w-6 bg-gray-600 dark:bg-gray-300 transition-all" :class="{ 'opacity-0': mobileMenuOpen }" />
|
||||
<div class="h-0.5 w-6 bg-gray-600 dark:bg-gray-300 transition-all" :class="{ '-rotate-45 -translate-y-1.5': mobileMenuOpen }" />
|
||||
</div>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<!-- Mobile Navigation -->
|
||||
<div
|
||||
v-if="mobileMenuOpen"
|
||||
class="md:hidden py-4 border-t border-gray-200 dark:border-gray-700"
|
||||
>
|
||||
<div class="flex flex-col space-y-3">
|
||||
<NuxtLink
|
||||
v-for="item in navigationItems"
|
||||
:key="item.path"
|
||||
:to="item.path"
|
||||
class="text-gray-600 dark:text-gray-300 hover:text-emerald-600 dark:hover:text-emerald-400 transition-colors font-medium py-2"
|
||||
active-class="text-emerald-600 dark:text-emerald-400"
|
||||
@click="mobileMenuOpen = false"
|
||||
>
|
||||
{{ item.label }}
|
||||
</NuxtLink>
|
||||
</div>
|
||||
|
||||
<!-- Vertical Navigation -->
|
||||
<div class="flex-1 p-8 overflow-y-auto">
|
||||
<ul class="space-y-6">
|
||||
<li v-for="item in navigationItems" :key="item.path">
|
||||
<NuxtLink :to="item.path" class="block group relative">
|
||||
<!-- Hover indicator -->
|
||||
|
||||
<span
|
||||
class="text-stone-200 hover:text-stone-100 transition-all duration-300 text-lg tracking-wide block py-2 hover:ethereal-text"
|
||||
active-class="text-stone-100 ethereal-text translate-x-2"
|
||||
>
|
||||
{{ item.label }}
|
||||
</span>
|
||||
</NuxtLink>
|
||||
<!-- Mobile auth buttons -->
|
||||
<div v-if="isAuthenticated" class="flex flex-col gap-3 mt-4">
|
||||
<UButton
|
||||
to="/member/dashboard"
|
||||
variant="solid"
|
||||
size="sm"
|
||||
class="w-fit"
|
||||
@click="mobileMenuOpen = false"
|
||||
>
|
||||
Dashboard
|
||||
</UButton>
|
||||
<UButton
|
||||
@click="logout; mobileMenuOpen = false"
|
||||
variant="outline"
|
||||
size="sm"
|
||||
class="w-fit"
|
||||
>
|
||||
Logout
|
||||
</UButton>
|
||||
</div>
|
||||
<UButton
|
||||
v-else
|
||||
to="/login"
|
||||
variant="outline"
|
||||
size="sm"
|
||||
class="mt-4 w-fit"
|
||||
@click="mobileMenuOpen = false"
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<!-- Auth section -->
|
||||
<div class="mt-12 pt-8 border-t border-ghost-800/50">
|
||||
<div v-if="isAuthenticated" class="space-y-4">
|
||||
<NuxtLink
|
||||
to="/member/dashboard"
|
||||
class="block text-stone-300 hover:text-stone-100 hover:ethereal-text transition-all duration-300 py-2"
|
||||
>
|
||||
Login
|
||||
</UButton>
|
||||
<span class="block text-sm text-whisper-400 mb-1">{{
|
||||
memberData?.name || "Member"
|
||||
}}</span>
|
||||
Dashboard
|
||||
</NuxtLink>
|
||||
<button
|
||||
@click="logout"
|
||||
class="text-stone-500 hover:text-stone-300 transition-all duration-300 text-sm"
|
||||
>
|
||||
Logout
|
||||
</button>
|
||||
</div>
|
||||
<div v-else class="space-y-4">
|
||||
<p class="text-stone-400 text-sm mb-4">
|
||||
Enter your email to receive a login link
|
||||
</p>
|
||||
|
||||
<UForm :state="loginForm" @submit="handleLogin">
|
||||
<UFormField name="email">
|
||||
<UInput
|
||||
v-model="loginForm.email"
|
||||
type="email"
|
||||
size="md"
|
||||
placeholder="your.email@example.com"
|
||||
class="w-full"
|
||||
/>
|
||||
</UFormField>
|
||||
|
||||
<UButton
|
||||
type="submit"
|
||||
:loading="isLoggingIn"
|
||||
:disabled="!isLoginFormValid"
|
||||
size="md"
|
||||
class="w-full mt-3"
|
||||
>
|
||||
Send Magic Link
|
||||
</UButton>
|
||||
</UForm>
|
||||
|
||||
<div
|
||||
v-if="loginSuccess"
|
||||
class="p-3 bg-green-900/20 rounded border border-green-800"
|
||||
>
|
||||
<p class="text-green-300 text-sm">✅ Check your email!</p>
|
||||
</div>
|
||||
|
||||
<div
|
||||
v-if="loginError"
|
||||
class="p-3 bg-red-900/20 rounded border border-red-800"
|
||||
>
|
||||
<p class="text-red-300 text-sm">{{ loginError }}</p>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</UContainer>
|
||||
</div>
|
||||
</nav>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
import { ref } from 'vue'
|
||||
import { reactive, ref, computed } from "vue";
|
||||
|
||||
const mobileMenuOpen = ref(false)
|
||||
const { isAuthenticated, logout } = useAuth()
|
||||
const { isAuthenticated, logout, memberData } = useAuth();
|
||||
|
||||
const navigationItems = [
|
||||
{ label: 'Home', path: '/' },
|
||||
{ label: 'About', path: '/about' },
|
||||
{ label: 'Events', path: '/events' },
|
||||
{ label: 'Members', path: '/members' },
|
||||
{ label: 'Join', path: '/join' },
|
||||
{ label: 'Contact', path: '/contact' },
|
||||
]
|
||||
const publicNavigationItems = [
|
||||
{ label: "Home", path: "/", accent: "entry point" },
|
||||
{ label: "About", path: "/about", accent: "who we are" },
|
||||
{ label: "Events", path: "/events", accent: "gatherings" },
|
||||
{ label: "Join", path: "/join", accent: "become one" },
|
||||
{ label: "Contact", path: "/contact", accent: "reach out" },
|
||||
];
|
||||
|
||||
const toggleMobileMenu = () => {
|
||||
mobileMenuOpen.value = !mobileMenuOpen.value
|
||||
const memberNavigationItems = [
|
||||
{ label: "Dashboard", path: "/member/dashboard" },
|
||||
{ label: "Events", path: "/events" },
|
||||
{ label: "Members", path: "/members" },
|
||||
{ label: "Resources", path: "/resources" },
|
||||
{ label: "Updates", path: "/updates" },
|
||||
{ label: "Peer Support", path: "/peer-support" },
|
||||
{ label: "Profile", path: "/member/profile" },
|
||||
];
|
||||
|
||||
const navigationItems = computed(() =>
|
||||
isAuthenticated.value ? memberNavigationItems : publicNavigationItems,
|
||||
);
|
||||
|
||||
// Login form state
|
||||
const loginForm = reactive({
|
||||
email: "",
|
||||
});
|
||||
|
||||
const isLoggingIn = ref(false);
|
||||
const loginSuccess = ref(false);
|
||||
const loginError = ref("");
|
||||
|
||||
const isLoginFormValid = computed(() => {
|
||||
return loginForm.email && loginForm.email.includes("@");
|
||||
});
|
||||
|
||||
const handleLogin = async () => {
|
||||
if (isLoggingIn.value) return;
|
||||
|
||||
isLoggingIn.value = true;
|
||||
loginError.value = "";
|
||||
loginSuccess.value = false;
|
||||
|
||||
try {
|
||||
const response = await $fetch("/api/auth/login", {
|
||||
method: "POST",
|
||||
body: {
|
||||
email: loginForm.email,
|
||||
},
|
||||
});
|
||||
|
||||
if (response.success) {
|
||||
loginSuccess.value = true;
|
||||
loginError.value = "";
|
||||
loginForm.email = "";
|
||||
}
|
||||
} catch (err) {
|
||||
console.error("Login error:", err);
|
||||
|
||||
if (err.statusCode === 404) {
|
||||
loginError.value = "No account found";
|
||||
} else if (err.statusCode === 500) {
|
||||
loginError.value = "Failed to send email";
|
||||
} else {
|
||||
loginError.value = "Something went wrong";
|
||||
}
|
||||
} finally {
|
||||
isLoggingIn.value = false;
|
||||
}
|
||||
};
|
||||
</script>
|
||||
|
||||
<style scoped>
|
||||
@keyframes float {
|
||||
0%,
|
||||
100% {
|
||||
transform: translateY(0) rotate(0deg);
|
||||
}
|
||||
50% {
|
||||
transform: translateY(-5px) rotate(10deg);
|
||||
}
|
||||
}
|
||||
|
||||
// Close mobile menu when clicking outside
|
||||
const closeMobileMenu = () => {
|
||||
mobileMenuOpen.value = false
|
||||
.delay-75 {
|
||||
animation-delay: 75ms;
|
||||
}
|
||||
</script>
|
||||
|
||||
.delay-150 {
|
||||
animation-delay: 150ms;
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue