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

Implement multi-step registration process: Add step indicators, error handling, and payment processing for membership registration. Enhance form validation and user feedback with success and error messages. Refactor state management for improved clarity and maintainability.

Browse source
This commit is contained in:
Jennie Robinson Faber 2025-09-03 14:47:13 +01:00
parent a88aa62198
commit 2ca290d6e0
22 changed files with 1994 additions and 213 deletions
Download patch file Download diff file Expand all files Collapse all files

105
app/pages/events/[id].vue
View file

@ -196,58 +196,71 @@
<!-- Registration Form -->
<form v-if="registrationStatus !== 'registered'" @submit.prevent="handleRegistration" class="space-y-4">
<div>
<label for="name" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
Full Name
</label>
<UInput
id="name"
v-model="registrationForm.name"
type="text"
required
:disabled="event.membersOnly && !isMember"
placeholder="Enter your full name"
/>
</div>
<!-- Show form fields only for public events OR for logged-in members -->
<template v-if="!event.membersOnly || isMember">
<div>
<label for="name" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
Full Name
</label>
<UInput
id="name"
v-model="registrationForm.name"
type="text"
required
placeholder="Enter your full name"
/>
</div>
<div>
<label for="email" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
Email Address
</label>
<UInput
id="email"
v-model="registrationForm.email"
type="email"
required
:disabled="event.membersOnly && !isMember"
placeholder="Enter your email"
/>
</div>
<div>
<label for="email" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
Email Address
</label>
<UInput
id="email"
v-model="registrationForm.email"
type="email"
required
placeholder="Enter your email"
/>
</div>
<div>
<label for="membershipLevel" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
Membership Status
</label>
<USelect
id="membershipLevel"
v-model="registrationForm.membershipLevel"
:options="membershipOptions"
:disabled="event.membersOnly && !isMember"
/>
</div>
<div>
<label for="membershipLevel" class="block text-sm font-medium text-gray-700 dark:text-gray-300 mb-2">
Membership Status
</label>
<USelect
id="membershipLevel"
v-model="registrationForm.membershipLevel"
:options="membershipOptions"
/>
</div>
</template>
<div class="pt-4">
<UButton
v-if="!event.membersOnly || isMember"
type="submit"
color="primary"
size="lg"
block
:disabled="event.membersOnly && !isMember"
:loading="isRegistering"
>
{{ isRegistering ? 'Registering...' : 'Register for Event' }}
</UButton>
<NuxtLink
v-else
to="/join"
class="block"
>
<UButton
color="primary"
size="lg"
block
>
Become a Member to Register
</UButton>
</NuxtLink>
</div>
</form>
@ -302,8 +315,20 @@ if (error.value?.statusCode === 404) {
})
}
// Check if user is a member (this would normally come from auth/store)
const isMember = ref(false) // Set to true if user is logged in and is a member
// Authentication
const { isMember, memberData, checkMemberStatus } = useAuth()
// Check member status on mount
onMounted(async () => {
await checkMemberStatus()
// Pre-fill form if member is logged in
if (memberData.value) {
registrationForm.value.name = memberData.value.name
registrationForm.value.email = memberData.value.email
registrationForm.value.membershipLevel = memberData.value.membershipLevel || 'non-member'
}
})
// Registration form state
const registrationForm = ref({