jennie/ghostguild-org
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

feat: reskin modals to zine direction

Browse source
This commit is contained in:
Jennie Robinson Faber 2026-04-02 21:37:31 +01:00
parent 1ac21d6a98
commit 2c5986a32e
1 changed files with 221 additions and 148 deletions
Download patch file Download diff file Expand all files Collapse all files

369
app/components/LoginModal.vue
View file

@ -1,102 +1,76 @@
<template> <template>
<UModal <UModal
v-model:open="isOpen" v-model:open="isOpen"
:title="title"
:description="description"
:dismissible="dismissible" :dismissible="dismissible"
:ui="{ :ui="{
content: 'bg-guild-900 border border-guild-700', overlay: 'bg-[--parch]/60 backdrop-blur-sm',
header: 'bg-guild-900 border-b border-guild-700', content: 'bg-[--bg] border border-dashed border-[--border] rounded-none shadow-none max-w-[480px]',
body: 'bg-guild-900', header: 'hidden',
footer: 'bg-guild-900 border-t border-guild-700', body: 'p-0',
title: 'text-guild-100', footer: 'hidden',
description: 'text-guild-400', }"
}"> >
<template #body> <template #body>
<div class="space-y-6"> <div class="modal">
<!-- Success State --> <!-- Close button -->
<div v-if="loginSuccess" class="text-center py-4"> <button class="modal-close" @click="resetAndClose">&times;</button>
<div
class="w-16 h-16 bg-candlelight-500/20 rounded-full flex items-center justify-center mx-auto mb-4"> <!-- Header -->
<Icon <div class="modal-header">
name="heroicons:check-circle" <div class="modal-overline">Ghost Guild</div>
class="w-10 h-10 text-candlelight-400" /> <div class="modal-title">{{ loginModalOptions.title || 'Sign in to continue' }}</div>
</div> <div class="modal-meta">{{ loginModalOptions.description || 'Enter your email to receive a secure login link' }}</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>
</div> </div>
<!-- Login Form --> <!-- Body -->
<UForm v-else :state="loginForm" @submit="handleLogin"> <div class="modal-body">
<UFormField label="Email Address" name="email" required class="mb-4"> <!-- Success State -->
<UInput <div v-if="loginSuccess" class="success-state">
v-model="loginForm.email" <div class="success-icon">✓</div>
type="email" <h3>Check your email</h3>
size="lg" <p>We've sent a magic link to <strong>{{ loginForm.email }}</strong>. Click the link to sign in.</p>
class="w-full" </div>
placeholder="your.email@example.com"
:ui="{
root: 'bg-guild-800 text-guild-100 placeholder-guild-500',
}" />
</UFormField>
<!-- Info Box --> <!-- Login Form -->
<div class="bg-guild-800 border border-guild-600 p-4 rounded-lg mb-6"> <form v-else @submit.prevent="handleLogin">
<div class="flex items-start gap-3"> <div class="field">
<p class="text-sm text-guild-300"> <label>Email Address</label>
We'll send you a secure magic link. No password needed! <input
</p> v-model="loginForm.email"
type="email"
placeholder="your.email@example.com"
required
/>
</div> </div>
<div class="info-box">
We'll send you a secure magic link. No password needed.
</div>
<!-- Error -->
<div v-if="loginError" class="error-box">
{{ loginError }}
</div>
<button
type="submit"
class="btn btn-primary submit-btn"
:disabled="!isLoginFormValid || isLoggingIn"
>
{{ isLoggingIn ? 'Sending...' : 'Send magic link' }}
</button>
</form>
<!-- Join Link -->
<div v-if="!loginSuccess" class="join-link">
Not a member? <NuxtLink to="/join" @click="resetAndClose">Join Ghost Guild</NuxtLink>
</div> </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>
<!-- Submit Button -->
<UButton
type="submit"
:loading="isLoggingIn"
:disabled="!isLoginFormValid"
size="lg"
class="w-full">
Send Magic Link
</UButton>
</UForm>
<!-- 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> </div>
</div>
</template>
<template #footer> <!-- Footer (success only) -->
<div class="flex justify-end"> <div v-if="loginSuccess" class="modal-footer">
<UButton <button class="btn" @click="resetAndClose">Close</button>
v-if="loginSuccess" </div>
variant="ghost"
color="neutral"
@click="resetAndClose">
Close
</UButton>
</div> </div>
</template> </template>
</UModal> </UModal>
@ -104,96 +78,195 @@
<script setup> <script setup>
const props = defineProps({ const props = defineProps({
title: { dismissible: { type: Boolean, default: true },
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,
},
});
const emit = defineEmits(["success", "close"]); const emit = defineEmits(['success', 'close'])
const { showLoginModal, hideLoginModal } = useLoginModal(); const { showLoginModal, loginModalOptions, hideLoginModal } = useLoginModal()
const { checkMemberStatus } = useAuth();
const isOpen = computed({ const isOpen = computed({
get: () => showLoginModal.value, get: () => showLoginModal.value,
set: (value) => { set: (value) => {
if (!value) { if (!value) {
hideLoginModal(); hideLoginModal()
emit("close"); emit('close')
} }
}, },
}); })
const loginForm = reactive({ 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(() => { const isLoginFormValid = computed(() => {
return loginForm.email && loginForm.email.includes("@"); return loginForm.email && loginForm.email.includes('@')
}); })
const handleLogin = async () => { const handleLogin = async () => {
if (isLoggingIn.value) return; if (isLoggingIn.value) return
isLoggingIn.value = true
isLoggingIn.value = true; loginError.value = ''
loginError.value = "";
try { try {
const response = await $fetch("/api/auth/login", { const response = await $fetch('/api/auth/login', {
method: "POST", method: 'POST',
body: { body: { email: loginForm.email },
email: loginForm.email, })
},
});
if (response.success) { if (response.success) {
loginSuccess.value = true; loginSuccess.value = true
emit("success", { email: loginForm.email }); emit('success', { email: loginForm.email })
} }
} catch (err) { } catch (err) {
console.error("Login error:", err); console.error('Login error:', err)
if (err.statusCode === 500) { 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 { } else {
loginError.value = loginError.value = err.statusMessage || 'Something went wrong. Please try again.'
err.statusMessage || "Something went wrong. Please try again.";
} }
} finally { } finally {
isLoggingIn.value = false; isLoggingIn.value = false
} }
}; }
const close = () => {
isOpen.value = false;
};
const resetAndClose = () => { const resetAndClose = () => {
loginForm.email = ""; loginForm.email = ''
loginSuccess.value = false; loginSuccess.value = false
loginError.value = ""; loginError.value = ''
close(); isOpen.value = false
}; }
// Reset form when modal opens
watch(isOpen, (newValue) => { watch(isOpen, (newValue) => {
if (newValue) { if (newValue) {
loginForm.email = ""; loginForm.email = ''
loginSuccess.value = false; loginSuccess.value = false
loginError.value = ""; loginError.value = ''
} }
}); })
</script> </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>