Style tweaks
This commit is contained in:
parent
fadf473dde
commit
8143631364
1 changed files with 65 additions and 64 deletions
|
|
@ -11,19 +11,24 @@
|
|||
footer: 'bg-guild-900 border-t border-guild-700',
|
||||
title: 'text-guild-100',
|
||||
description: 'text-guild-400',
|
||||
}"
|
||||
>
|
||||
}">
|
||||
<template #body>
|
||||
<div class="space-y-6">
|
||||
<!-- 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">
|
||||
<Icon name="heroicons:check-circle" class="w-10 h-10 text-candlelight-400" />
|
||||
<div
|
||||
class="w-16 h-16 bg-candlelight-500/20 rounded-full flex items-center justify-center mx-auto mb-4">
|
||||
<Icon
|
||||
name="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>
|
||||
<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">{{ loginForm.email }}</strong>.
|
||||
Click the link to sign in.
|
||||
We've sent a magic link to
|
||||
<strong class="text-guild-100">{{ loginForm.email }}</strong
|
||||
>. Click the link to sign in.
|
||||
</p>
|
||||
</div>
|
||||
|
||||
|
|
@ -37,15 +42,13 @@
|
|||
class="w-full"
|
||||
placeholder="your.email@example.com"
|
||||
:ui="{
|
||||
root: 'bg-guild-800 border-guild-600 text-guild-100 placeholder-guild-500',
|
||||
}"
|
||||
/>
|
||||
root: 'bg-guild-800 text-guild-100 placeholder-guild-500',
|
||||
}" />
|
||||
</UFormField>
|
||||
|
||||
<!-- Info Box -->
|
||||
<div class="bg-guild-800 border border-guild-600 p-4 rounded-lg mb-6">
|
||||
<div class="flex items-start gap-3">
|
||||
<Icon name="heroicons:envelope" class="w-5 h-5 text-candlelight-400 flex-shrink-0 mt-0.5" />
|
||||
<p class="text-sm text-guild-300">
|
||||
We'll send you a secure magic link. No password needed!
|
||||
</p>
|
||||
|
|
@ -55,8 +58,7 @@
|
|||
<!-- Error Message -->
|
||||
<div
|
||||
v-if="loginError"
|
||||
class="mb-4 p-3 bg-ember-500/10 border border-ember-500/30 rounded-lg"
|
||||
>
|
||||
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>
|
||||
|
||||
|
|
@ -66,23 +68,22 @@
|
|||
:loading="isLoggingIn"
|
||||
:disabled="!isLoginFormValid"
|
||||
size="lg"
|
||||
class="w-full"
|
||||
>
|
||||
class="w-full">
|
||||
Send Magic Link
|
||||
</UButton>
|
||||
</UForm>
|
||||
|
||||
<!-- Join Link -->
|
||||
<div v-if="!loginSuccess" class="text-center pt-2 border-t border-guild-700">
|
||||
<div
|
||||
v-if="!loginSuccess"
|
||||
class="text-center pt-2 border-t border-guild-700">
|
||||
<p class="text-guild-400 text-sm pt-4">
|
||||
Don't have an account?
|
||||
<NuxtLink
|
||||
to="/join"
|
||||
class="text-candlelight-400 hover:text-candlelight-300 font-medium"
|
||||
@click="close"
|
||||
>
|
||||
<a
|
||||
href="https://babyghosts.fund/ghost-guild/"
|
||||
class="text-candlelight-400 hover:text-candlelight-300 font-medium">
|
||||
Join Ghost Guild
|
||||
</NuxtLink>
|
||||
</a>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
|
@ -94,8 +95,7 @@
|
|||
v-if="loginSuccess"
|
||||
variant="ghost"
|
||||
color="neutral"
|
||||
@click="resetAndClose"
|
||||
>
|
||||
@click="resetAndClose">
|
||||
Close
|
||||
</UButton>
|
||||
</div>
|
||||
|
|
@ -107,93 +107,94 @@
|
|||
const props = defineProps({
|
||||
title: {
|
||||
type: String,
|
||||
default: 'Sign in to continue',
|
||||
default: "Sign in to continue",
|
||||
},
|
||||
description: {
|
||||
type: String,
|
||||
default: 'Enter your email to receive a secure login link',
|
||||
default: "Enter your email to receive a secure login link",
|
||||
},
|
||||
dismissible: {
|
||||
type: Boolean,
|
||||
default: true,
|
||||
},
|
||||
})
|
||||
});
|
||||
|
||||
const emit = defineEmits(['success', 'close'])
|
||||
const emit = defineEmits(["success", "close"]);
|
||||
|
||||
const { showLoginModal, hideLoginModal } = useLoginModal()
|
||||
const { checkMemberStatus } = useAuth()
|
||||
const { showLoginModal, hideLoginModal } = useLoginModal();
|
||||
const { checkMemberStatus } = useAuth();
|
||||
|
||||
const isOpen = computed({
|
||||
get: () => showLoginModal.value,
|
||||
set: (value) => {
|
||||
if (!value) {
|
||||
hideLoginModal()
|
||||
emit('close')
|
||||
hideLoginModal();
|
||||
emit("close");
|
||||
}
|
||||
},
|
||||
})
|
||||
});
|
||||
|
||||
const loginForm = reactive({
|
||||
email: '',
|
||||
})
|
||||
email: "",
|
||||
});
|
||||
|
||||
const isLoggingIn = ref(false)
|
||||
const loginSuccess = ref(false)
|
||||
const loginError = ref('')
|
||||
const isLoggingIn = ref(false);
|
||||
const loginSuccess = ref(false);
|
||||
const loginError = ref("");
|
||||
|
||||
const isLoginFormValid = computed(() => {
|
||||
return loginForm.email && loginForm.email.includes('@')
|
||||
})
|
||||
return loginForm.email && loginForm.email.includes("@");
|
||||
});
|
||||
|
||||
const handleLogin = async () => {
|
||||
if (isLoggingIn.value) return
|
||||
if (isLoggingIn.value) return;
|
||||
|
||||
isLoggingIn.value = true
|
||||
loginError.value = ''
|
||||
isLoggingIn.value = true;
|
||||
loginError.value = "";
|
||||
|
||||
try {
|
||||
const response = await $fetch('/api/auth/login', {
|
||||
method: 'POST',
|
||||
const response = await $fetch("/api/auth/login", {
|
||||
method: "POST",
|
||||
body: {
|
||||
email: loginForm.email,
|
||||
},
|
||||
})
|
||||
});
|
||||
|
||||
if (response.success) {
|
||||
loginSuccess.value = true
|
||||
emit('success', { email: loginForm.email })
|
||||
loginSuccess.value = true;
|
||||
emit("success", { email: loginForm.email });
|
||||
}
|
||||
} catch (err) {
|
||||
console.error('Login error:', err)
|
||||
console.error("Login error:", err);
|
||||
|
||||
if (err.statusCode === 500) {
|
||||
loginError.value = 'Failed to send login email. Please try again later.'
|
||||
loginError.value = "Failed to send login email. Please try again later.";
|
||||
} else {
|
||||
loginError.value = err.statusMessage || 'Something went wrong. Please try again.'
|
||||
loginError.value =
|
||||
err.statusMessage || "Something went wrong. Please try again.";
|
||||
}
|
||||
} finally {
|
||||
isLoggingIn.value = false
|
||||
isLoggingIn.value = false;
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
const close = () => {
|
||||
isOpen.value = false
|
||||
}
|
||||
isOpen.value = false;
|
||||
};
|
||||
|
||||
const resetAndClose = () => {
|
||||
loginForm.email = ''
|
||||
loginSuccess.value = false
|
||||
loginError.value = ''
|
||||
close()
|
||||
}
|
||||
loginForm.email = "";
|
||||
loginSuccess.value = false;
|
||||
loginError.value = "";
|
||||
close();
|
||||
};
|
||||
|
||||
// Reset form when modal opens
|
||||
watch(isOpen, (newValue) => {
|
||||
if (newValue) {
|
||||
loginForm.email = ''
|
||||
loginSuccess.value = false
|
||||
loginError.value = ''
|
||||
loginForm.email = "";
|
||||
loginSuccess.value = false;
|
||||
loginError.value = "";
|
||||
}
|
||||
})
|
||||
});
|
||||
</script>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue