129 lines
4 KiB
Vue
129 lines
4 KiB
Vue
<template>
|
|
<div class="min-h-screen w-full flex flex-col items-center justify-center px-4">
|
|
<h1 class="text-display-xl font-bold mb-2 uppercase font-sans!">Ghost Guild</h1>
|
|
<p
|
|
v-if="!isAuthenticated"
|
|
class="text-display-sm text-guild-400 mb-10 uppercase py-4 text-center font-sans!">
|
|
Coming Soon
|
|
</p>
|
|
|
|
<!-- Logged-in state -->
|
|
<div v-if="isAuthenticated" class="w-full max-w-sm flex flex-col items-center space-y-4 text-center mt-8">
|
|
<p class="text-guild-200 font-sans py-4 text-center">
|
|
Welcome, <strong class="text-guild-100">{{ memberData.name || memberData.email }}</strong>
|
|
</p>
|
|
<a
|
|
href="https://wiki.ghostguild.org"
|
|
class="block w-full py-3 px-6 bg-candlelight-500 hover:bg-candlelight-600 text-guild-900 font-semibold rounded-full uppercase tracking-wide transition-colors font-sans text-center">
|
|
Go to Wiki
|
|
</a>
|
|
<button
|
|
class="block w-full text-sm text-candlelight-400 hover:text-candlelight-300 font-medium uppercase tracking-wide transition-colors"
|
|
@click="handleLogout">
|
|
Sign out
|
|
</button>
|
|
</div>
|
|
|
|
<!-- Login form -->
|
|
<div v-else class="w-full max-w-sm">
|
|
<!-- Success state -->
|
|
<div v-if="loginSuccess" class="text-center py-4">
|
|
<div
|
|
class="w-16 h-16 bg-candlelight-500/20 rounded-full flex items-center justify-center mx-auto mb-4">
|
|
<UIcon name="i-heroicons-check-circle" class="w-10 h-10 text-candlelight-400" />
|
|
</div>
|
|
<h3 class="text-lg font-semibold text-guild-100 mb-2">
|
|
Check your email
|
|
</h3>
|
|
<p class="text-guild-300">
|
|
We've sent a magic link to
|
|
<strong class="text-guild-100">{{ email }}</strong>.
|
|
Click the link to sign in.
|
|
</p>
|
|
</div>
|
|
|
|
<!-- Form -->
|
|
<UForm v-else :state="{ email }" @submit="handleLogin">
|
|
<UFormField name="email" required class="mb-4">
|
|
<UInput
|
|
v-model="email"
|
|
type="email"
|
|
size="lg"
|
|
class="w-full"
|
|
placeholder="your.email@example.com" />
|
|
</UFormField>
|
|
|
|
<div v-if="loginError" class="mb-4 p-3 bg-ember-500/10 border border-ember-500/30 rounded-lg">
|
|
<p class="text-ember-400 text-sm">{{ loginError }}</p>
|
|
</div>
|
|
|
|
<div class="flex justify-center">
|
|
<UButton
|
|
type="submit"
|
|
:loading="isLoggingIn"
|
|
:disabled="!isFormValid"
|
|
size="lg"
|
|
class="rounded-full uppercase tracking-wide font-semibold whitespace-nowrap">
|
|
Send Magic Link
|
|
</UButton>
|
|
</div>
|
|
|
|
<div class="text-center pt-6 border-t border-guild-700 mt-6">
|
|
<p class="text-guild-400 text-sm">
|
|
<a
|
|
href="https://babyghosts.fund/ghost-guild/"
|
|
class="text-candlelight-400 hover:text-candlelight-300 font-medium uppercase tracking-wide">
|
|
Pre-Register
|
|
</a>
|
|
</p>
|
|
</div>
|
|
</UForm>
|
|
</div>
|
|
</div>
|
|
</template>
|
|
|
|
<script setup>
|
|
definePageMeta({
|
|
layout: "coming-soon",
|
|
});
|
|
|
|
const { isAuthenticated, memberData, checkMemberStatus, logout } = useAuth();
|
|
|
|
const email = ref("");
|
|
const isLoggingIn = ref(false);
|
|
const loginSuccess = ref(false);
|
|
const loginError = ref("");
|
|
|
|
const isFormValid = computed(() => email.value && email.value.includes("@"));
|
|
|
|
const handleLogin = async () => {
|
|
if (isLoggingIn.value) return;
|
|
|
|
isLoggingIn.value = true;
|
|
loginError.value = "";
|
|
|
|
try {
|
|
const response = await $fetch("/api/auth/login", {
|
|
method: "POST",
|
|
body: { email: email.value },
|
|
});
|
|
|
|
if (response.success) {
|
|
loginSuccess.value = true;
|
|
}
|
|
} catch (err) {
|
|
if (err.statusCode === 500) {
|
|
loginError.value = "Failed to send login email. Please try again later.";
|
|
} else {
|
|
loginError.value =
|
|
err.statusMessage || "Something went wrong. Please try again.";
|
|
}
|
|
} finally {
|
|
isLoggingIn.value = false;
|
|
}
|
|
};
|
|
|
|
const handleLogout = async () => {
|
|
await logout();
|
|
};
|
|
</script>
|