Many an update!
This commit is contained in:
parent
85195d6c7a
commit
d588c49946
35 changed files with 3528 additions and 1142 deletions
201
app/components/LoginModal.vue
Normal file
201
app/components/LoginModal.vue
Normal file
|
|
@ -0,0 +1,201 @@
|
|||
<template>
|
||||
<UModal
|
||||
v-model:open="isOpen"
|
||||
:title="title"
|
||||
:description="description"
|
||||
:dismissible="dismissible"
|
||||
:ui="{
|
||||
content: 'bg-ghost-900 border border-ghost-700',
|
||||
header: 'bg-ghost-900 border-b border-ghost-700',
|
||||
body: 'bg-ghost-900',
|
||||
footer: 'bg-ghost-900 border-t border-ghost-700',
|
||||
title: 'text-ghost-100',
|
||||
description: 'text-ghost-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-green-500/20 rounded-full flex items-center justify-center mx-auto mb-4">
|
||||
<Icon name="heroicons:check-circle" class="w-10 h-10 text-green-400" />
|
||||
</div>
|
||||
<h3 class="text-lg font-semibold text-ghost-100 mb-2">Check your email</h3>
|
||||
<p class="text-ghost-300">
|
||||
We've sent a magic link to <strong class="text-ghost-100">{{ 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
|
||||
v-model="loginForm.email"
|
||||
type="email"
|
||||
size="lg"
|
||||
class="w-full"
|
||||
placeholder="your.email@example.com"
|
||||
:ui="{
|
||||
root: 'bg-ghost-800 border-ghost-600 text-ghost-100 placeholder-ghost-500',
|
||||
}"
|
||||
/>
|
||||
</UFormField>
|
||||
|
||||
<!-- Info Box -->
|
||||
<div class="bg-ghost-800 border border-ghost-600 p-4 rounded-lg mb-6">
|
||||
<div class="flex items-start gap-3">
|
||||
<Icon name="heroicons:envelope" class="w-5 h-5 text-whisper-400 flex-shrink-0 mt-0.5" />
|
||||
<p class="text-sm text-ghost-300">
|
||||
We'll send you a secure magic link. No password needed!
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Error Message -->
|
||||
<div
|
||||
v-if="loginError"
|
||||
class="mb-4 p-3 bg-red-500/10 border border-red-500/30 rounded-lg"
|
||||
>
|
||||
<p class="text-red-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-ghost-700">
|
||||
<p class="text-ghost-400 text-sm pt-4">
|
||||
Don't have an account?
|
||||
<NuxtLink
|
||||
to="/join"
|
||||
class="text-whisper-400 hover:text-whisper-300 font-medium"
|
||||
@click="close"
|
||||
>
|
||||
Join Ghost Guild
|
||||
</NuxtLink>
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<template #footer>
|
||||
<div class="flex justify-end">
|
||||
<UButton
|
||||
v-if="loginSuccess"
|
||||
variant="ghost"
|
||||
color="neutral"
|
||||
@click="resetAndClose"
|
||||
>
|
||||
Close
|
||||
</UButton>
|
||||
</div>
|
||||
</template>
|
||||
</UModal>
|
||||
</template>
|
||||
|
||||
<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,
|
||||
},
|
||||
})
|
||||
|
||||
const emit = defineEmits(['success', 'close'])
|
||||
|
||||
const { showLoginModal, hideLoginModal } = useLoginModal()
|
||||
const { checkMemberStatus } = useAuth()
|
||||
|
||||
const isOpen = computed({
|
||||
get: () => showLoginModal.value,
|
||||
set: (value) => {
|
||||
if (!value) {
|
||||
hideLoginModal()
|
||||
emit('close')
|
||||
}
|
||||
},
|
||||
})
|
||||
|
||||
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 = ''
|
||||
|
||||
try {
|
||||
const response = await $fetch('/api/auth/login', {
|
||||
method: 'POST',
|
||||
body: {
|
||||
email: loginForm.email,
|
||||
},
|
||||
})
|
||||
|
||||
if (response.success) {
|
||||
loginSuccess.value = true
|
||||
emit('success', { email: loginForm.email })
|
||||
}
|
||||
} catch (err) {
|
||||
console.error('Login error:', err)
|
||||
|
||||
if (err.statusCode === 404) {
|
||||
loginError.value = 'No account found with that email. Please check your email or join Ghost Guild.'
|
||||
} else 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 close = () => {
|
||||
isOpen.value = false
|
||||
}
|
||||
|
||||
const resetAndClose = () => {
|
||||
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 = ''
|
||||
}
|
||||
})
|
||||
</script>
|
||||
126
app/components/MemberStatusBanner.vue
Normal file
126
app/components/MemberStatusBanner.vue
Normal file
|
|
@ -0,0 +1,126 @@
|
|||
<template>
|
||||
<div v-if="shouldShowBanner" class="w-full">
|
||||
<div
|
||||
:class="[
|
||||
'backdrop-blur-sm border rounded-lg p-4 flex items-start gap-4',
|
||||
statusConfig.bgColor,
|
||||
statusConfig.borderColor,
|
||||
]"
|
||||
>
|
||||
<Icon
|
||||
:name="statusConfig.icon"
|
||||
:class="['w-5 h-5 flex-shrink-0 mt-0.5', statusConfig.textColor]"
|
||||
/>
|
||||
|
||||
<div class="flex-1 min-w-0">
|
||||
<h3 :class="['font-semibold mb-1', statusConfig.textColor]">
|
||||
{{ statusConfig.label }}
|
||||
</h3>
|
||||
<p :class="['text-sm', statusConfig.textColor, 'opacity-90']">
|
||||
{{ bannerMessage }}
|
||||
</p>
|
||||
</div>
|
||||
|
||||
<div class="flex items-center gap-2 flex-shrink-0">
|
||||
<!-- Payment button for pending payment status -->
|
||||
<UButton
|
||||
v-if="isPendingPayment && nextAction"
|
||||
:color="getButtonColor(nextAction.color)"
|
||||
size="sm"
|
||||
:loading="isProcessingPayment"
|
||||
@click="handleActionClick"
|
||||
class="whitespace-nowrap"
|
||||
>
|
||||
{{ isProcessingPayment ? "Processing..." : nextAction.label }}
|
||||
</UButton>
|
||||
|
||||
<!-- Link button for other actions -->
|
||||
<NuxtLink
|
||||
v-else-if="nextAction && nextAction.link"
|
||||
:to="nextAction.link"
|
||||
:class="[
|
||||
'px-4 py-2 rounded-lg font-medium text-sm whitespace-nowrap transition-all',
|
||||
getActionButtonClass(nextAction.color),
|
||||
]"
|
||||
>
|
||||
{{ nextAction.label }}
|
||||
</NuxtLink>
|
||||
|
||||
<button
|
||||
v-if="dismissible"
|
||||
@click="isDismissed = true"
|
||||
class="text-ghost-400 hover:text-ghost-200 transition-colors"
|
||||
:aria-label="`Dismiss ${statusConfig.label} banner`"
|
||||
>
|
||||
<Icon name="heroicons:x-mark" class="w-5 h-5" />
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
const props = defineProps({
|
||||
dismissible: {
|
||||
type: Boolean,
|
||||
default: true,
|
||||
},
|
||||
compact: {
|
||||
type: Boolean,
|
||||
default: false,
|
||||
},
|
||||
});
|
||||
|
||||
const {
|
||||
isPendingPayment,
|
||||
isSuspended,
|
||||
isCancelled,
|
||||
statusConfig,
|
||||
getNextAction,
|
||||
getBannerMessage,
|
||||
} = useMemberStatus();
|
||||
const { completePayment, isProcessingPayment } = useMemberPayment();
|
||||
|
||||
const isDismissed = ref(false);
|
||||
|
||||
// Handle action button click
|
||||
const handleActionClick = async () => {
|
||||
if (isPendingPayment.value) {
|
||||
try {
|
||||
await completePayment();
|
||||
} catch (error) {
|
||||
console.error("Payment failed:", error);
|
||||
}
|
||||
}
|
||||
};
|
||||
|
||||
// Map color names to UButton color props
|
||||
const getButtonColor = (color) => {
|
||||
const colorMap = {
|
||||
orange: "orange",
|
||||
blue: "blue",
|
||||
gray: "gray",
|
||||
};
|
||||
return colorMap[color] || "blue";
|
||||
};
|
||||
|
||||
// Only show banner if status is not active
|
||||
const shouldShowBanner = computed(() => {
|
||||
if (isDismissed.value) return false;
|
||||
return isPendingPayment.value || isSuspended.value || isCancelled.value;
|
||||
});
|
||||
|
||||
const bannerMessage = computed(() => getBannerMessage());
|
||||
const nextAction = computed(() => getNextAction());
|
||||
|
||||
// Button styling based on color
|
||||
const getActionButtonClass = (color) => {
|
||||
const baseClass = "hover:scale-105 active:scale-95";
|
||||
const colorClasses = {
|
||||
orange: "bg-orange-600 text-white hover:bg-orange-700",
|
||||
blue: "bg-blue-600 text-white hover:bg-blue-700",
|
||||
gray: "bg-ghost-700 text-ghost-100 hover:bg-ghost-600",
|
||||
};
|
||||
return `${baseClass} ${colorClasses[color] || colorClasses.blue}`;
|
||||
};
|
||||
</script>
|
||||
13
app/components/MemberStatusIndicator.vue
Normal file
13
app/components/MemberStatusIndicator.vue
Normal file
|
|
@ -0,0 +1,13 @@
|
|||
<template>
|
||||
<div v-if="!isActive" class="inline-flex items-center gap-1">
|
||||
<Icon
|
||||
:name="statusConfig.icon"
|
||||
:class="['w-4 h-4', statusConfig.textColor]"
|
||||
:title="`Status: ${statusConfig.label}`"
|
||||
/>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script setup>
|
||||
const { isActive, statusConfig } = useMemberStatus()
|
||||
</script>
|
||||
Loading…
Add table
Add a link
Reference in a new issue