feat: reskin modals to zine direction
This commit is contained in:
parent
1ac21d6a98
commit
2c5986a32e
1 changed files with 221 additions and 148 deletions
|
|
@ -1,102 +1,76 @@
|
|||
<template>
|
||||
<UModal
|
||||
v-model:open="isOpen"
|
||||
:title="title"
|
||||
:description="description"
|
||||
:dismissible="dismissible"
|
||||
:ui="{
|
||||
content: 'bg-guild-900 border border-guild-700',
|
||||
header: 'bg-guild-900 border-b border-guild-700',
|
||||
body: 'bg-guild-900',
|
||||
footer: 'bg-guild-900 border-t border-guild-700',
|
||||
title: 'text-guild-100',
|
||||
description: 'text-guild-400',
|
||||
}">
|
||||
overlay: 'bg-[--parch]/60 backdrop-blur-sm',
|
||||
content: 'bg-[--bg] border border-dashed border-[--border] rounded-none shadow-none max-w-[480px]',
|
||||
header: 'hidden',
|
||||
body: 'p-0',
|
||||
footer: 'hidden',
|
||||
}"
|
||||
>
|
||||
<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="modal">
|
||||
<!-- Close button -->
|
||||
<button class="modal-close" @click="resetAndClose">×</button>
|
||||
|
||||
<!-- Header -->
|
||||
<div class="modal-header">
|
||||
<div class="modal-overline">Ghost Guild</div>
|
||||
<div class="modal-title">{{ loginModalOptions.title || 'Sign in to continue' }}</div>
|
||||
<div class="modal-meta">{{ loginModalOptions.description || 'Enter your email to receive a secure login link' }}</div>
|
||||
</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">{{ loginForm.email }}</strong
|
||||
>. Click the link to sign in.
|
||||
</p>
|
||||
|
||||
<!-- Body -->
|
||||
<div class="modal-body">
|
||||
<!-- Success State -->
|
||||
<div v-if="loginSuccess" class="success-state">
|
||||
<div class="success-icon">✓</div>
|
||||
<h3>Check your email</h3>
|
||||
<p>We've sent a magic link to <strong>{{ loginForm.email }}</strong>. Click the link to sign in.</p>
|
||||
</div>
|
||||
|
||||
<!-- Login Form -->
|
||||
<UForm v-else :state="loginForm" @submit="handleLogin">
|
||||
<UFormField label="Email Address" name="email" required class="mb-4">
|
||||
<UInput
|
||||
<form v-else @submit.prevent="handleLogin">
|
||||
<div class="field">
|
||||
<label>Email Address</label>
|
||||
<input
|
||||
v-model="loginForm.email"
|
||||
type="email"
|
||||
size="lg"
|
||||
class="w-full"
|
||||
placeholder="your.email@example.com"
|
||||
:ui="{
|
||||
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">
|
||||
<p class="text-sm text-guild-300">
|
||||
We'll send you a secure magic link. No password needed!
|
||||
</p>
|
||||
</div>
|
||||
required
|
||||
/>
|
||||
</div>
|
||||
|
||||
<!-- Error Message -->
|
||||
<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 class="info-box">
|
||||
We'll send you a secure magic link. No password needed.
|
||||
</div>
|
||||
|
||||
<!-- Submit Button -->
|
||||
<UButton
|
||||
<!-- Error -->
|
||||
<div v-if="loginError" class="error-box">
|
||||
{{ loginError }}
|
||||
</div>
|
||||
|
||||
<button
|
||||
type="submit"
|
||||
:loading="isLoggingIn"
|
||||
:disabled="!isLoginFormValid"
|
||||
size="lg"
|
||||
class="w-full">
|
||||
Send Magic Link
|
||||
</UButton>
|
||||
</UForm>
|
||||
class="btn btn-primary submit-btn"
|
||||
:disabled="!isLoginFormValid || isLoggingIn"
|
||||
>
|
||||
{{ isLoggingIn ? 'Sending...' : 'Send magic link' }}
|
||||
</button>
|
||||
</form>
|
||||
|
||||
<!-- Join Link -->
|
||||
<div
|
||||
v-if="!loginSuccess"
|
||||
class="text-center pt-2 border-t border-guild-700">
|
||||
<p class="text-guild-400 text-sm pt-4">
|
||||
<a
|
||||
href="https://babyghosts.fund/ghost-guild/"
|
||||
class="text-candlelight-400 hover:text-candlelight-300 font-medium">
|
||||
Join Ghost Guild
|
||||
</a>
|
||||
</p>
|
||||
<div v-if="!loginSuccess" class="join-link">
|
||||
Not a member? <NuxtLink to="/join" @click="resetAndClose">Join Ghost Guild</NuxtLink>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<template #footer>
|
||||
<div class="flex justify-end">
|
||||
<UButton
|
||||
v-if="loginSuccess"
|
||||
variant="ghost"
|
||||
color="neutral"
|
||||
@click="resetAndClose">
|
||||
Close
|
||||
</UButton>
|
||||
<!-- Footer (success only) -->
|
||||
<div v-if="loginSuccess" class="modal-footer">
|
||||
<button class="btn" @click="resetAndClose">Close</button>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
</UModal>
|
||||
|
|
@ -104,96 +78,195 @@
|
|||
|
||||
<script setup>
|
||||
const props = defineProps({
|
||||
title: {
|
||||
type: String,
|
||||
default: "Sign in to continue",
|
||||
},
|
||||
description: {
|
||||
type: String,
|
||||
default: "Enter your email to receive a secure login link",
|
||||
},
|
||||
dismissible: {
|
||||
type: Boolean,
|
||||
default: true,
|
||||
},
|
||||
});
|
||||
dismissible: { type: Boolean, default: true },
|
||||
})
|
||||
|
||||
const emit = defineEmits(["success", "close"]);
|
||||
const emit = defineEmits(['success', 'close'])
|
||||
|
||||
const { showLoginModal, hideLoginModal } = useLoginModal();
|
||||
const { checkMemberStatus } = useAuth();
|
||||
const { showLoginModal, loginModalOptions, hideLoginModal } = useLoginModal()
|
||||
|
||||
const isOpen = computed({
|
||||
get: () => showLoginModal.value,
|
||||
set: (value) => {
|
||||
if (!value) {
|
||||
hideLoginModal();
|
||||
emit("close");
|
||||
hideLoginModal()
|
||||
emit('close')
|
||||
}
|
||||
},
|
||||
});
|
||||
})
|
||||
|
||||
const loginForm = reactive({
|
||||
email: "",
|
||||
});
|
||||
|
||||
const isLoggingIn = ref(false);
|
||||
const loginSuccess = ref(false);
|
||||
const loginError = ref("");
|
||||
const loginForm = reactive({ email: '' })
|
||||
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;
|
||||
|
||||
isLoggingIn.value = true;
|
||||
loginError.value = "";
|
||||
if (isLoggingIn.value) return
|
||||
isLoggingIn.value = true
|
||||
loginError.value = ''
|
||||
|
||||
try {
|
||||
const response = await $fetch("/api/auth/login", {
|
||||
method: "POST",
|
||||
body: {
|
||||
email: loginForm.email,
|
||||
},
|
||||
});
|
||||
|
||||
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;
|
||||
};
|
||||
|
||||
const resetAndClose = () => {
|
||||
loginForm.email = "";
|
||||
loginSuccess.value = false;
|
||||
loginError.value = "";
|
||||
close();
|
||||
};
|
||||
loginForm.email = ''
|
||||
loginSuccess.value = false
|
||||
loginError.value = ''
|
||||
isOpen.value = false
|
||||
}
|
||||
|
||||
// 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>
|
||||
|
||||
<style scoped>
|
||||
.modal {
|
||||
position: relative;
|
||||
}
|
||||
|
||||
.modal-close {
|
||||
position: absolute;
|
||||
top: 20px;
|
||||
right: 24px;
|
||||
background: none;
|
||||
border: none;
|
||||
font-family: 'Commit Mono', monospace;
|
||||
font-size: 16px;
|
||||
color: var(--text-faint);
|
||||
cursor: pointer;
|
||||
padding: 4px 8px;
|
||||
line-height: 1;
|
||||
transition: color 0.15s;
|
||||
}
|
||||
.modal-close:hover { color: var(--text); }
|
||||
|
||||
.modal-header {
|
||||
padding: 24px 28px 0;
|
||||
}
|
||||
|
||||
.modal-overline {
|
||||
font-family: 'Brygada 1918', serif;
|
||||
font-size: 14px;
|
||||
font-weight: 600;
|
||||
color: var(--candle);
|
||||
margin-bottom: 12px;
|
||||
}
|
||||
|
||||
.modal-title {
|
||||
font-family: 'Brygada 1918', serif;
|
||||
font-size: 22px;
|
||||
font-weight: 500;
|
||||
color: var(--text-bright);
|
||||
line-height: 1.25;
|
||||
margin-bottom: 8px;
|
||||
padding-right: 32px;
|
||||
}
|
||||
|
||||
.modal-meta {
|
||||
font-size: 12px;
|
||||
color: var(--text-dim);
|
||||
}
|
||||
|
||||
.modal-body {
|
||||
padding: 20px 28px;
|
||||
}
|
||||
|
||||
.modal-footer {
|
||||
padding: 16px 28px;
|
||||
border-top: 1px dashed var(--border);
|
||||
display: flex;
|
||||
gap: 8px;
|
||||
justify-content: flex-end;
|
||||
}
|
||||
|
||||
.info-box {
|
||||
font-size: 11px;
|
||||
color: var(--text-faint);
|
||||
padding: 10px 14px;
|
||||
border: 1px dashed var(--border);
|
||||
margin-bottom: 16px;
|
||||
line-height: 1.6;
|
||||
}
|
||||
|
||||
.error-box {
|
||||
font-size: 12px;
|
||||
color: var(--ember);
|
||||
padding: 10px 14px;
|
||||
border: 1px dashed var(--ember);
|
||||
margin-bottom: 16px;
|
||||
}
|
||||
|
||||
.submit-btn {
|
||||
width: 100%;
|
||||
text-align: center;
|
||||
}
|
||||
|
||||
.success-state {
|
||||
text-align: center;
|
||||
padding: 12px 0;
|
||||
}
|
||||
.success-icon {
|
||||
width: 48px;
|
||||
height: 48px;
|
||||
border: 2px dashed var(--candle);
|
||||
display: flex;
|
||||
align-items: center;
|
||||
justify-content: center;
|
||||
margin: 0 auto 16px;
|
||||
font-size: 20px;
|
||||
color: var(--candle);
|
||||
}
|
||||
.success-state h3 {
|
||||
font-family: 'Brygada 1918', serif;
|
||||
font-size: 18px;
|
||||
font-weight: 500;
|
||||
color: var(--text-bright);
|
||||
margin-bottom: 8px;
|
||||
}
|
||||
.success-state p {
|
||||
font-size: 12px;
|
||||
color: var(--text-dim);
|
||||
line-height: 1.7;
|
||||
}
|
||||
.success-state strong {
|
||||
color: var(--text);
|
||||
}
|
||||
|
||||
.join-link {
|
||||
text-align: center;
|
||||
padding-top: 16px;
|
||||
border-top: 1px dashed var(--border);
|
||||
font-size: 12px;
|
||||
color: var(--text-faint);
|
||||
}
|
||||
.join-link a {
|
||||
color: var(--candle);
|
||||
}
|
||||
</style>
|
||||
|
|
|
|||
Loading…
Add table
Add a link
Reference in a new issue