feat(portal): redesign registration wizard, header and login with Vuexy patterns
- Registration page: switch to blank layout with split-screen design (event branding illustration on left, AppStepper wizard on right), replacing generic chip stepper - Portal header: refined to flat surface bar with proper branding and icon-based nav - Login page: upgrade to Vuexy V2 auth pattern with split-screen illustration - Success page: blank layout with centered card, avatar icon, and footer mask Co-Authored-By: Claude Opus 4.6 (1M context) <noreply@anthropic.com>
This commit is contained in:
@@ -36,55 +36,90 @@ watch([isFallbackStateActive, refLoadingIndicator], () => {
|
||||
<AppLoadingIndicator ref="refLoadingIndicator" />
|
||||
|
||||
<VAppBar
|
||||
color="primary"
|
||||
flat
|
||||
color="surface"
|
||||
border="b"
|
||||
density="comfortable"
|
||||
>
|
||||
<VAppBarNavIcon
|
||||
class="d-sm-none"
|
||||
@click="isMobileMenuOpen = !isMobileMenuOpen"
|
||||
/>
|
||||
<VContainer
|
||||
fluid
|
||||
class="d-flex align-center py-0"
|
||||
style="max-inline-size: 1440px;"
|
||||
>
|
||||
<!-- Logo & Brand -->
|
||||
<RouterLink
|
||||
to="/"
|
||||
class="d-flex align-center gap-x-2 text-decoration-none"
|
||||
>
|
||||
<VIcon
|
||||
icon="tabler-users-group"
|
||||
size="26"
|
||||
color="primary"
|
||||
/>
|
||||
<span class="text-h6 font-weight-bold text-high-emphasis">
|
||||
Crewli
|
||||
</span>
|
||||
</RouterLink>
|
||||
|
||||
<VAppBarTitle class="text-h6">
|
||||
Crewli Portal
|
||||
</VAppBarTitle>
|
||||
<!-- Mobile nav toggle -->
|
||||
<VAppBarNavIcon
|
||||
class="d-sm-none ms-auto"
|
||||
@click="isMobileMenuOpen = !isMobileMenuOpen"
|
||||
/>
|
||||
|
||||
<template #append>
|
||||
<div class="d-none d-sm-flex align-center gap-2">
|
||||
<!-- Desktop navigation -->
|
||||
<div class="d-none d-sm-flex align-center gap-1 ms-6">
|
||||
<VBtn
|
||||
v-for="item in navItems"
|
||||
:key="item.to"
|
||||
:to="item.to"
|
||||
variant="text"
|
||||
color="white"
|
||||
color="default"
|
||||
size="small"
|
||||
class="text-medium-emphasis"
|
||||
>
|
||||
<VIcon
|
||||
start
|
||||
:icon="item.icon"
|
||||
size="18"
|
||||
/>
|
||||
{{ item.title }}
|
||||
</VBtn>
|
||||
</div>
|
||||
|
||||
<VSpacer />
|
||||
|
||||
<!-- Auth actions -->
|
||||
<VBtn
|
||||
v-if="authStore.isAuthenticated"
|
||||
variant="outlined"
|
||||
color="white"
|
||||
class="ms-2"
|
||||
variant="tonal"
|
||||
color="primary"
|
||||
size="small"
|
||||
@click="authStore.logout(); $router.push('/login')"
|
||||
>
|
||||
<VIcon
|
||||
start
|
||||
icon="tabler-logout"
|
||||
size="18"
|
||||
/>
|
||||
Uitloggen
|
||||
</VBtn>
|
||||
|
||||
<VBtn
|
||||
v-else
|
||||
variant="outlined"
|
||||
color="white"
|
||||
class="ms-2"
|
||||
variant="tonal"
|
||||
color="primary"
|
||||
size="small"
|
||||
to="/login"
|
||||
>
|
||||
<VIcon
|
||||
start
|
||||
icon="tabler-login"
|
||||
size="18"
|
||||
/>
|
||||
Inloggen
|
||||
</VBtn>
|
||||
</template>
|
||||
</VContainer>
|
||||
</VAppBar>
|
||||
|
||||
<!-- Mobile navigation drawer -->
|
||||
@@ -126,6 +161,7 @@ watch([isFallbackStateActive, refLoadingIndicator], () => {
|
||||
<VContainer
|
||||
fluid
|
||||
class="pa-4 pa-sm-6"
|
||||
style="max-inline-size: 1440px;"
|
||||
>
|
||||
<RouterView v-slot="{ Component }">
|
||||
<Suspense
|
||||
|
||||
@@ -1,4 +1,12 @@
|
||||
<script setup lang="ts">
|
||||
import { useGenerateImageVariant } from '@core/composable/useGenerateImageVariant'
|
||||
import authV2LoginIllustrationLight from '@images/pages/auth-v2-login-illustration-light.png'
|
||||
import authV2LoginIllustrationDark from '@images/pages/auth-v2-login-illustration-dark.png'
|
||||
import authV2LoginIllustrationBorderedLight from '@images/pages/auth-v2-login-illustration-bordered-light.png'
|
||||
import authV2LoginIllustrationBorderedDark from '@images/pages/auth-v2-login-illustration-bordered-dark.png'
|
||||
import miscMaskLight from '@images/pages/misc-mask-light.png'
|
||||
import miscMaskDark from '@images/pages/misc-mask-dark.png'
|
||||
|
||||
definePage({
|
||||
name: 'login',
|
||||
meta: {
|
||||
@@ -13,53 +21,132 @@ const form = ref({
|
||||
})
|
||||
|
||||
const isPasswordVisible = ref(false)
|
||||
|
||||
const authThemeImg = useGenerateImageVariant(
|
||||
authV2LoginIllustrationLight,
|
||||
authV2LoginIllustrationDark,
|
||||
authV2LoginIllustrationBorderedLight,
|
||||
authV2LoginIllustrationBorderedDark,
|
||||
true,
|
||||
)
|
||||
|
||||
const authThemeMask = useGenerateImageVariant(miscMaskLight, miscMaskDark)
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<VApp>
|
||||
<VMain class="d-flex align-center justify-center" style="min-height: 100vh;">
|
||||
<!-- Logo -->
|
||||
<RouterLink to="/">
|
||||
<div class="auth-logo d-flex align-center gap-x-3">
|
||||
<VIcon
|
||||
icon="tabler-users-group"
|
||||
size="28"
|
||||
color="primary"
|
||||
/>
|
||||
<h1 class="auth-title">
|
||||
Crewli
|
||||
</h1>
|
||||
</div>
|
||||
</RouterLink>
|
||||
|
||||
<VRow
|
||||
no-gutters
|
||||
class="auth-wrapper bg-surface"
|
||||
>
|
||||
<!-- Left: Illustration -->
|
||||
<VCol
|
||||
md="8"
|
||||
class="d-none d-md-flex"
|
||||
>
|
||||
<div class="position-relative bg-background w-100 me-0">
|
||||
<div
|
||||
class="d-flex align-center justify-center w-100 h-100"
|
||||
style="padding-inline: 6.25rem;"
|
||||
>
|
||||
<VImg
|
||||
max-width="613"
|
||||
:src="authThemeImg"
|
||||
class="auth-illustration mt-16 mb-2"
|
||||
/>
|
||||
</div>
|
||||
|
||||
<img
|
||||
class="auth-footer-mask flip-in-rtl"
|
||||
:src="authThemeMask"
|
||||
alt="auth-footer-mask"
|
||||
height="280"
|
||||
width="100"
|
||||
>
|
||||
</div>
|
||||
</VCol>
|
||||
|
||||
<!-- Right: Login form -->
|
||||
<VCol
|
||||
cols="12"
|
||||
md="4"
|
||||
class="auth-card-v2 d-flex align-center justify-center"
|
||||
>
|
||||
<VCard
|
||||
max-width="450"
|
||||
width="100%"
|
||||
class="pa-6 ma-4"
|
||||
flat
|
||||
:max-width="500"
|
||||
class="mt-12 mt-sm-0 pa-6"
|
||||
>
|
||||
<VCardTitle class="text-h5 text-center mb-2">
|
||||
Inloggen
|
||||
</VCardTitle>
|
||||
<VCardSubtitle class="text-center mb-6">
|
||||
Log in om je rooster en shifts te bekijken
|
||||
</VCardSubtitle>
|
||||
<VCardText>
|
||||
<h4 class="text-h4 mb-1">
|
||||
Welkom terug!
|
||||
</h4>
|
||||
<p class="mb-0">
|
||||
Log in om je rooster en shifts te bekijken
|
||||
</p>
|
||||
</VCardText>
|
||||
|
||||
<VCardText>
|
||||
<VForm @submit.prevent>
|
||||
<VTextField
|
||||
v-model="form.email"
|
||||
label="E-mailadres"
|
||||
type="email"
|
||||
placeholder="je@email.nl"
|
||||
class="mb-4"
|
||||
/>
|
||||
<VRow>
|
||||
<VCol cols="12">
|
||||
<VTextField
|
||||
v-model="form.email"
|
||||
autofocus
|
||||
label="E-mailadres"
|
||||
type="email"
|
||||
placeholder="je@email.nl"
|
||||
/>
|
||||
</VCol>
|
||||
|
||||
<VTextField
|
||||
v-model="form.password"
|
||||
label="Wachtwoord"
|
||||
placeholder="Je wachtwoord"
|
||||
:type="isPasswordVisible ? 'text' : 'password'"
|
||||
:append-inner-icon="isPasswordVisible ? 'tabler-eye-off' : 'tabler-eye'"
|
||||
class="mb-6"
|
||||
@click:append-inner="isPasswordVisible = !isPasswordVisible"
|
||||
/>
|
||||
<VCol cols="12">
|
||||
<VTextField
|
||||
v-model="form.password"
|
||||
label="Wachtwoord"
|
||||
placeholder="Je wachtwoord"
|
||||
:type="isPasswordVisible ? 'text' : 'password'"
|
||||
:append-inner-icon="isPasswordVisible ? 'tabler-eye-off' : 'tabler-eye'"
|
||||
@click:append-inner="isPasswordVisible = !isPasswordVisible"
|
||||
/>
|
||||
|
||||
<VBtn
|
||||
block
|
||||
type="submit"
|
||||
color="primary"
|
||||
>
|
||||
Inloggen
|
||||
</VBtn>
|
||||
<div class="d-flex align-center flex-wrap justify-end my-6">
|
||||
<a
|
||||
class="text-primary text-body-2"
|
||||
href="javascript:void(0)"
|
||||
>
|
||||
Wachtwoord vergeten?
|
||||
</a>
|
||||
</div>
|
||||
|
||||
<VBtn
|
||||
block
|
||||
type="submit"
|
||||
color="primary"
|
||||
>
|
||||
Inloggen
|
||||
</VBtn>
|
||||
</VCol>
|
||||
</VRow>
|
||||
</VForm>
|
||||
</VCardText>
|
||||
</VCard>
|
||||
</VMain>
|
||||
</VApp>
|
||||
</VCol>
|
||||
</VRow>
|
||||
</template>
|
||||
|
||||
<style lang="scss">
|
||||
@use "@core/scss/template/pages/page-auth";
|
||||
</style>
|
||||
|
||||
@@ -2,6 +2,11 @@
|
||||
import { useForm } from 'vee-validate'
|
||||
import { toTypedSchema } from '@vee-validate/zod'
|
||||
import { useDisplay } from 'vuetify'
|
||||
import { useGenerateImageVariant } from '@core/composable/useGenerateImageVariant'
|
||||
import registerMultiStepIllustrationLight from '@images/illustrations/register-multi-step-illustration-light.png'
|
||||
import registerMultiStepIllustrationDark from '@images/illustrations/register-multi-step-illustration-dark.png'
|
||||
import registerMultiStepBgLight from '@images/pages/register-multi-step-bg-light.png'
|
||||
import registerMultiStepBgDark from '@images/pages/register-multi-step-bg-dark.png'
|
||||
import { useAuthStore } from '@/stores/useAuthStore'
|
||||
import { useRegistrationData, useSubmitRegistration } from '@/composables/api/useVolunteerRegistration'
|
||||
import { fullRegistrationSchema } from '@/schemas/registrationSchema'
|
||||
@@ -16,7 +21,7 @@ import type {
|
||||
definePage({
|
||||
name: 'volunteer-register',
|
||||
meta: {
|
||||
layout: 'portal',
|
||||
layout: 'blank',
|
||||
requiresAuth: false,
|
||||
},
|
||||
})
|
||||
@@ -30,9 +35,12 @@ const eventSlug = computed(() => route.params.eventSlug as string)
|
||||
const { data: registrationData, isLoading, isError } = useRegistrationData(eventSlug)
|
||||
const { mutateAsync: submitRegistration, isPending: isSubmitting } = useSubmitRegistration()
|
||||
|
||||
const currentStep = ref(1)
|
||||
const currentStep = ref(0)
|
||||
const submitError = ref<string | null>(null)
|
||||
|
||||
const registerMultiStepIllustration = useGenerateImageVariant(registerMultiStepIllustrationLight, registerMultiStepIllustrationDark)
|
||||
const registerMultiStepBg = useGenerateImageVariant(registerMultiStepBgLight, registerMultiStepBgDark)
|
||||
|
||||
// VeeValidate form
|
||||
const { errors, defineField, validateField, setFieldValue } = useForm({
|
||||
validationSchema: toTypedSchema(fullRegistrationSchema),
|
||||
@@ -62,20 +70,29 @@ const [motivation] = defineField('motivation')
|
||||
const [motivationOther] = defineField('motivation_other')
|
||||
|
||||
// Pre-fill authenticated user data
|
||||
watch(() => authStore.user, (user) => {
|
||||
watch(() => authStore.user, user => {
|
||||
if (user) {
|
||||
setFieldValue('name', user.name)
|
||||
setFieldValue('email', user.email)
|
||||
}
|
||||
}, { immediate: true })
|
||||
|
||||
// Step 4: Section preferences (by name, not ID)
|
||||
// Step 3: Section preferences (by name, not ID)
|
||||
const selectedSections = ref<string[]>([])
|
||||
|
||||
// Step 5: Availability
|
||||
// Step 4: Availability
|
||||
const selectedTimeSlotIds = ref<string[]>([])
|
||||
const timeSlotPreferences = ref<Record<string, number>>({})
|
||||
|
||||
// Stepper items for AppStepper
|
||||
const stepperItems = [
|
||||
{ title: 'Over jou', subtitle: 'Persoonlijke gegevens', icon: 'tabler-user' },
|
||||
{ title: 'Extra info', subtitle: 'Aanvullende details', icon: 'tabler-list-details' },
|
||||
{ title: 'Motivatie', subtitle: 'Waarom wil je helpen?', icon: 'tabler-heart' },
|
||||
{ title: 'Secties', subtitle: 'Voorkeur werkgebieden', icon: 'tabler-layout-grid' },
|
||||
{ title: 'Beschikbaarheid', subtitle: 'Wanneer ben je er?', icon: 'tabler-calendar-event' },
|
||||
]
|
||||
|
||||
// Constants
|
||||
const tshirtSizeItems = [
|
||||
{ title: 'Geen voorkeur', value: '' },
|
||||
@@ -90,25 +107,25 @@ const motivationItems = [
|
||||
{ title: 'Anders', value: 'Anders' },
|
||||
]
|
||||
|
||||
const stepTitles = ['Over jou', 'Meer over jou', 'Motivatie', 'Secties', 'Beschikbaarheid']
|
||||
|
||||
// Section helpers
|
||||
const sectionsByCategory = computed(() => {
|
||||
if (!registrationData.value?.sections) return {}
|
||||
|
||||
return registrationData.value.sections.reduce((groups, section) => {
|
||||
const cat = section.category || 'Overig'
|
||||
if (!groups[cat]) groups[cat] = []
|
||||
groups[cat].push(section)
|
||||
|
||||
return groups
|
||||
}, {} as Record<string, SectionOption[]>)
|
||||
})
|
||||
|
||||
function isSelected(name: string) {
|
||||
return selectedSections.value.includes(name)
|
||||
function isSelected(sectionName: string) {
|
||||
return selectedSections.value.includes(sectionName)
|
||||
}
|
||||
|
||||
function getSelectionPriority(name: string) {
|
||||
return selectedSections.value.indexOf(name) + 1
|
||||
function getSelectionPriority(sectionName: string) {
|
||||
return selectedSections.value.indexOf(sectionName) + 1
|
||||
}
|
||||
|
||||
const selectedCount = computed(() => selectedSections.value.length)
|
||||
@@ -117,6 +134,7 @@ const selectedCount = computed(() => selectedSections.value.length)
|
||||
const timeSlotsByDate = computed(() => {
|
||||
if (!registrationData.value?.time_slots) return []
|
||||
const groups = new Map<string, TimeSlotOption[]>()
|
||||
|
||||
for (const slot of registrationData.value.time_slots) {
|
||||
if (!groups.has(slot.date)) groups.set(slot.date, [])
|
||||
groups.get(slot.date)!.push(slot)
|
||||
@@ -133,13 +151,13 @@ const totalSelectedHours = computed(() => {
|
||||
.reduce((sum, s) => sum + s.duration_hours, 0)
|
||||
})
|
||||
|
||||
// Step field mapping for validation
|
||||
// Step field mapping for validation (0-based)
|
||||
type FormField = 'name' | 'email' | 'phone' | 'tshirt_size' | 'first_aid' | 'allergies' | 'access_requirements' | 'driving_licence' | 'motivation' | 'motivation_other'
|
||||
|
||||
const stepFields: Record<number, FormField[]> = {
|
||||
1: ['name', 'email', 'phone'],
|
||||
2: ['tshirt_size', 'first_aid', 'allergies', 'access_requirements', 'driving_licence'],
|
||||
3: ['motivation', 'motivation_other'],
|
||||
0: ['name', 'email', 'phone'],
|
||||
1: ['tshirt_size', 'first_aid', 'allergies', 'access_requirements', 'driving_licence'],
|
||||
2: ['motivation', 'motivation_other'],
|
||||
}
|
||||
|
||||
// Navigation
|
||||
@@ -153,22 +171,22 @@ async function validateCurrentStep(): Promise<boolean> {
|
||||
|
||||
async function nextStep() {
|
||||
if (await validateCurrentStep()) {
|
||||
if (currentStep.value < 5) currentStep.value++
|
||||
if (currentStep.value < 4) currentStep.value++
|
||||
}
|
||||
}
|
||||
|
||||
function prevStep() {
|
||||
if (currentStep.value > 1) currentStep.value--
|
||||
if (currentStep.value > 0) currentStep.value--
|
||||
}
|
||||
|
||||
// Section toggle
|
||||
function toggleSection(name: string) {
|
||||
const idx = selectedSections.value.indexOf(name)
|
||||
function toggleSection(sectionName: string) {
|
||||
const idx = selectedSections.value.indexOf(sectionName)
|
||||
if (idx !== -1) {
|
||||
selectedSections.value.splice(idx, 1)
|
||||
}
|
||||
else if (selectedSections.value.length < 5) {
|
||||
selectedSections.value.push(name)
|
||||
selectedSections.value.push(sectionName)
|
||||
}
|
||||
}
|
||||
|
||||
@@ -194,6 +212,17 @@ function formatDate(dateStr: string): string {
|
||||
})
|
||||
}
|
||||
|
||||
function formatDateRange(start: string, end: string): string {
|
||||
const startDate = new Date(`${start}T00:00:00`)
|
||||
const endDate = new Date(`${end}T00:00:00`)
|
||||
|
||||
if (startDate.getMonth() === endDate.getMonth() && startDate.getFullYear() === endDate.getFullYear()) {
|
||||
return `${startDate.getDate()} – ${endDate.toLocaleDateString('nl-NL', { day: 'numeric', month: 'long', year: 'numeric' })}`
|
||||
}
|
||||
|
||||
return `${startDate.toLocaleDateString('nl-NL', { day: 'numeric', month: 'long' })} – ${endDate.toLocaleDateString('nl-NL', { day: 'numeric', month: 'long', year: 'numeric' })}`
|
||||
}
|
||||
|
||||
function formatTimeRange(start: string, end: string): string {
|
||||
return `${start.slice(0, 5)} – ${end.slice(0, 5)}`
|
||||
}
|
||||
@@ -202,11 +231,12 @@ function formatTimeRange(start: string, end: string): string {
|
||||
async function onSubmit() {
|
||||
submitError.value = null
|
||||
|
||||
// Validate steps 1-3
|
||||
for (let step = 1; step <= 3; step++) {
|
||||
// Validate steps 0-2
|
||||
for (let step = 0; step <= 2; step++) {
|
||||
const fields = stepFields[step]
|
||||
if (!fields) continue
|
||||
const results = await Promise.all(fields.map(f => validateField(f)))
|
||||
|
||||
if (!results.every(r => r.valid)) {
|
||||
currentStep.value = step
|
||||
|
||||
@@ -216,8 +246,8 @@ async function onSubmit() {
|
||||
|
||||
if (!registrationData.value) return
|
||||
|
||||
const sectionPreferences: SectionPreference[] = selectedSections.value.map((name, index) => ({
|
||||
section_name: name,
|
||||
const sectionPreferences: SectionPreference[] = selectedSections.value.map((sectionName, index) => ({
|
||||
section_name: sectionName,
|
||||
priority: index + 1,
|
||||
}))
|
||||
|
||||
@@ -257,8 +287,10 @@ async function onSubmit() {
|
||||
}
|
||||
catch (error: unknown) {
|
||||
const axiosError = error as { response?: { status?: number; data?: { errors?: Record<string, string[]> } } }
|
||||
|
||||
if (axiosError.response?.status === 422) {
|
||||
const serverErrors = axiosError.response.data?.errors
|
||||
|
||||
if (serverErrors) {
|
||||
for (const field of Object.keys(serverErrors)) {
|
||||
for (const [step, fields] of Object.entries(stepFields)) {
|
||||
@@ -280,26 +312,44 @@ async function onSubmit() {
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<!-- Loading -->
|
||||
<!-- Logo -->
|
||||
<RouterLink to="/">
|
||||
<div class="auth-logo d-flex align-center gap-x-3">
|
||||
<VIcon
|
||||
icon="tabler-users-group"
|
||||
size="28"
|
||||
color="primary"
|
||||
/>
|
||||
<h1 class="auth-title">
|
||||
Crewli
|
||||
</h1>
|
||||
</div>
|
||||
</RouterLink>
|
||||
|
||||
<!-- Loading state -->
|
||||
<VRow
|
||||
v-if="isLoading"
|
||||
justify="center"
|
||||
no-gutters
|
||||
class="auth-wrapper bg-surface"
|
||||
>
|
||||
<VCol
|
||||
cols="12"
|
||||
md="10"
|
||||
lg="8"
|
||||
class="d-flex align-center justify-center"
|
||||
>
|
||||
<VCard class="pa-6">
|
||||
<VSkeletonLoader type="heading" />
|
||||
<VSkeletonLoader
|
||||
type="text@3"
|
||||
class="mt-4"
|
||||
/>
|
||||
<VSkeletonLoader
|
||||
type="button"
|
||||
class="mt-4"
|
||||
<VCard
|
||||
flat
|
||||
:max-width="500"
|
||||
class="pa-12 text-center"
|
||||
>
|
||||
<VProgressCircular
|
||||
indeterminate
|
||||
color="primary"
|
||||
size="48"
|
||||
class="mb-4"
|
||||
/>
|
||||
<p class="text-body-1 text-medium-emphasis mb-0">
|
||||
Registratieformulier laden...
|
||||
</p>
|
||||
</VCard>
|
||||
</VCol>
|
||||
</VRow>
|
||||
@@ -307,34 +357,36 @@ async function onSubmit() {
|
||||
<!-- Error / Not available -->
|
||||
<VRow
|
||||
v-else-if="isError || !registrationData"
|
||||
justify="center"
|
||||
no-gutters
|
||||
class="auth-wrapper bg-surface"
|
||||
>
|
||||
<VCol
|
||||
cols="12"
|
||||
md="8"
|
||||
lg="6"
|
||||
class="d-flex align-center justify-center"
|
||||
>
|
||||
<VCard class="text-center pa-8">
|
||||
<VCard
|
||||
flat
|
||||
:max-width="500"
|
||||
class="text-center pa-8"
|
||||
>
|
||||
<VIcon
|
||||
icon="tabler-calendar-off"
|
||||
size="64"
|
||||
color="warning"
|
||||
class="mb-4"
|
||||
/>
|
||||
<VCardTitle class="text-h5">
|
||||
<h4 class="text-h5 mb-2">
|
||||
Niet beschikbaar
|
||||
</VCardTitle>
|
||||
<VCardText class="text-body-1">
|
||||
</h4>
|
||||
<p class="text-body-1 text-medium-emphasis mb-6">
|
||||
Dit evenement accepteert momenteel geen aanmeldingen.
|
||||
</VCardText>
|
||||
<VCardActions class="justify-center">
|
||||
<VBtn
|
||||
to="/"
|
||||
variant="outlined"
|
||||
>
|
||||
Terug naar startpagina
|
||||
</VBtn>
|
||||
</VCardActions>
|
||||
</p>
|
||||
<VBtn
|
||||
to="/"
|
||||
variant="outlined"
|
||||
>
|
||||
Terug naar startpagina
|
||||
</VBtn>
|
||||
</VCard>
|
||||
</VCol>
|
||||
</VRow>
|
||||
@@ -342,180 +394,304 @@ async function onSubmit() {
|
||||
<!-- Registration Form -->
|
||||
<VRow
|
||||
v-else
|
||||
justify="center"
|
||||
no-gutters
|
||||
class="auth-wrapper"
|
||||
>
|
||||
<!-- Left: Event branding & illustration -->
|
||||
<VCol
|
||||
md="4"
|
||||
class="d-none d-md-flex"
|
||||
>
|
||||
<div class="d-flex flex-column align-center justify-center w-100 position-relative">
|
||||
<!-- Event info -->
|
||||
<div
|
||||
class="text-center px-8 mb-6"
|
||||
style="z-index: 1;"
|
||||
>
|
||||
<VChip
|
||||
color="primary"
|
||||
variant="flat"
|
||||
size="small"
|
||||
class="mb-4"
|
||||
>
|
||||
Aanmelding vrijwilliger
|
||||
</VChip>
|
||||
|
||||
<h2 class="text-h4 font-weight-bold mb-2">
|
||||
{{ registrationData.event.name }}
|
||||
</h2>
|
||||
|
||||
<div class="d-flex align-center justify-center gap-2 text-body-1 text-medium-emphasis">
|
||||
<VIcon
|
||||
icon="tabler-calendar"
|
||||
size="18"
|
||||
/>
|
||||
{{ formatDateRange(registrationData.event.start_date, registrationData.event.end_date) }}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Illustration -->
|
||||
<VImg
|
||||
:src="registerMultiStepIllustration"
|
||||
class="illustration-image flip-in-rtl"
|
||||
style="z-index: 1;"
|
||||
/>
|
||||
|
||||
<img
|
||||
class="bg-image position-absolute w-100 flip-in-rtl"
|
||||
:src="registerMultiStepBg"
|
||||
alt="register-bg"
|
||||
height="340"
|
||||
>
|
||||
</div>
|
||||
</VCol>
|
||||
|
||||
<!-- Right: Registration form -->
|
||||
<VCol
|
||||
cols="12"
|
||||
md="10"
|
||||
lg="8"
|
||||
md="8"
|
||||
class="auth-card-v2 d-flex align-center justify-center pa-4 pa-sm-10"
|
||||
style="background-color: rgb(var(--v-theme-surface));"
|
||||
>
|
||||
<VCard>
|
||||
<VCardTitle class="text-h5 pa-4 pa-sm-6 pb-2">
|
||||
Aanmelden als vrijwilliger
|
||||
</VCardTitle>
|
||||
<VCardSubtitle class="px-4 px-sm-6 pb-4">
|
||||
{{ registrationData.event.name }}
|
||||
</VCardSubtitle>
|
||||
<VCard
|
||||
flat
|
||||
class="mt-12 mt-sm-0 w-100"
|
||||
:max-width="750"
|
||||
>
|
||||
<!-- Mobile: Event info (hidden on desktop where it shows in left panel) -->
|
||||
<div class="d-md-none text-center mb-6">
|
||||
<VChip
|
||||
color="primary"
|
||||
variant="flat"
|
||||
size="small"
|
||||
class="mb-2"
|
||||
>
|
||||
Aanmelding vrijwilliger
|
||||
</VChip>
|
||||
|
||||
<h3 class="text-h5 font-weight-bold mb-1">
|
||||
{{ registrationData.event.name }}
|
||||
</h3>
|
||||
|
||||
<div class="d-flex align-center justify-center gap-2 text-body-2 text-medium-emphasis">
|
||||
<VIcon
|
||||
icon="tabler-calendar"
|
||||
size="16"
|
||||
/>
|
||||
{{ formatDateRange(registrationData.event.start_date, registrationData.event.end_date) }}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Auth info / Login hint -->
|
||||
<VAlert
|
||||
v-if="authStore.isAuthenticated"
|
||||
type="info"
|
||||
variant="tonal"
|
||||
class="mx-4 mx-sm-6"
|
||||
class="mb-6"
|
||||
>
|
||||
Je bent ingelogd als {{ authStore.user?.name }}. Je gegevens zijn automatisch ingevuld.
|
||||
</VAlert>
|
||||
|
||||
<div
|
||||
v-else
|
||||
class="text-body-2 text-medium-emphasis mb-6"
|
||||
>
|
||||
Al een account?
|
||||
<RouterLink
|
||||
to="/login"
|
||||
class="text-primary font-weight-medium"
|
||||
>
|
||||
Log in
|
||||
</RouterLink>
|
||||
om je gegevens automatisch in te vullen.
|
||||
</div>
|
||||
|
||||
<!-- Submit error -->
|
||||
<VAlert
|
||||
v-if="submitError"
|
||||
type="error"
|
||||
variant="tonal"
|
||||
class="mx-4 mx-sm-6 mt-4"
|
||||
class="mb-6"
|
||||
closable
|
||||
@click:close="submitError = null"
|
||||
>
|
||||
{{ submitError }}
|
||||
</VAlert>
|
||||
|
||||
<!-- Step indicator -->
|
||||
<div class="d-flex flex-wrap align-center justify-center ga-1 px-4 px-sm-6 pt-6">
|
||||
<template
|
||||
v-for="(title, i) in stepTitles"
|
||||
:key="i"
|
||||
>
|
||||
<VChip
|
||||
:color="currentStep === i + 1 ? 'primary' : currentStep > i + 1 ? 'success' : undefined"
|
||||
:variant="currentStep === i + 1 ? 'elevated' : currentStep > i + 1 ? 'tonal' : 'outlined'"
|
||||
size="small"
|
||||
class="step-chip"
|
||||
@click="i + 1 < currentStep ? currentStep = i + 1 : undefined"
|
||||
>
|
||||
<VIcon
|
||||
v-if="currentStep > i + 1"
|
||||
icon="tabler-check"
|
||||
size="14"
|
||||
start
|
||||
/>
|
||||
<span
|
||||
v-else
|
||||
class="text-caption font-weight-bold me-1"
|
||||
>{{ i + 1 }}</span>
|
||||
<span v-if="!smAndDown || currentStep === i + 1">{{ title }}</span>
|
||||
</VChip>
|
||||
<VIcon
|
||||
v-if="i < 4"
|
||||
icon="tabler-chevron-right"
|
||||
size="14"
|
||||
class="text-disabled d-none d-sm-inline-flex"
|
||||
/>
|
||||
</template>
|
||||
</div>
|
||||
<!-- Stepper -->
|
||||
<AppStepper
|
||||
v-model:current-step="currentStep"
|
||||
:items="stepperItems"
|
||||
:direction="smAndDown ? 'vertical' : 'horizontal'"
|
||||
icon-size="22"
|
||||
class="stepper-icon-step-bg mb-6"
|
||||
/>
|
||||
|
||||
<VDivider class="mb-2" />
|
||||
|
||||
<!-- Step content -->
|
||||
<VWindow v-model="currentStep">
|
||||
<!-- Step 1: Over jou -->
|
||||
<VWindowItem :value="1">
|
||||
<div class="pa-4 pa-sm-6">
|
||||
<VTextField
|
||||
v-model="name"
|
||||
label="Naam *"
|
||||
:error-messages="errors.name"
|
||||
:disabled="authStore.isAuthenticated"
|
||||
autofocus
|
||||
class="mb-4"
|
||||
/>
|
||||
<VTextField
|
||||
v-model="email"
|
||||
label="E-mailadres *"
|
||||
type="email"
|
||||
:error-messages="errors.email"
|
||||
:disabled="authStore.isAuthenticated"
|
||||
class="mb-4"
|
||||
/>
|
||||
<VTextField
|
||||
v-model="phone"
|
||||
label="Telefoonnummer"
|
||||
:error-messages="errors.phone"
|
||||
/>
|
||||
<VWindow
|
||||
v-model="currentStep"
|
||||
class="disable-tab-transition"
|
||||
>
|
||||
<!-- Step 0: Over jou -->
|
||||
<VWindowItem>
|
||||
<div class="pt-6">
|
||||
<h4 class="text-h4 mb-1">
|
||||
Over jou
|
||||
</h4>
|
||||
<p class="text-body-1 text-medium-emphasis mb-6">
|
||||
Vul je persoonlijke gegevens in
|
||||
</p>
|
||||
|
||||
<VRow>
|
||||
<VCol cols="12">
|
||||
<VTextField
|
||||
v-model="name"
|
||||
label="Naam *"
|
||||
:error-messages="errors.name"
|
||||
:disabled="authStore.isAuthenticated"
|
||||
autofocus
|
||||
/>
|
||||
</VCol>
|
||||
|
||||
<VCol cols="12">
|
||||
<VTextField
|
||||
v-model="email"
|
||||
label="E-mailadres *"
|
||||
type="email"
|
||||
:error-messages="errors.email"
|
||||
:disabled="authStore.isAuthenticated"
|
||||
/>
|
||||
</VCol>
|
||||
|
||||
<VCol cols="12">
|
||||
<VTextField
|
||||
v-model="phone"
|
||||
label="Telefoonnummer"
|
||||
:error-messages="errors.phone"
|
||||
/>
|
||||
</VCol>
|
||||
</VRow>
|
||||
</div>
|
||||
</VWindowItem>
|
||||
|
||||
<!-- Step 2: Meer over jou -->
|
||||
<VWindowItem :value="2">
|
||||
<div class="pa-4 pa-sm-6">
|
||||
<VSelect
|
||||
v-model="tshirtSize"
|
||||
:items="tshirtSizeItems"
|
||||
label="Shirtmaat"
|
||||
:error-messages="errors.tshirt_size"
|
||||
class="mb-4"
|
||||
/>
|
||||
<VSwitch
|
||||
v-model="firstAid"
|
||||
label="Ik heb een EHBO-diploma"
|
||||
color="primary"
|
||||
hide-details
|
||||
class="mb-4"
|
||||
/>
|
||||
<VTextarea
|
||||
v-model="allergies"
|
||||
label="Allergieën"
|
||||
:error-messages="errors.allergies"
|
||||
:counter="500"
|
||||
rows="2"
|
||||
auto-grow
|
||||
class="mb-4"
|
||||
/>
|
||||
<VTextarea
|
||||
v-model="accessRequirements"
|
||||
label="Toegangsbehoeften"
|
||||
:error-messages="errors.access_requirements"
|
||||
hint="Bijv. rolstoeltoegankelijk, rustige werkplek, etc."
|
||||
persistent-hint
|
||||
:counter="500"
|
||||
rows="2"
|
||||
auto-grow
|
||||
class="mb-4"
|
||||
/>
|
||||
<VSwitch
|
||||
v-model="drivingLicence"
|
||||
label="Ik heb een rijbewijs B"
|
||||
color="primary"
|
||||
hide-details
|
||||
/>
|
||||
<!-- Step 1: Extra info -->
|
||||
<VWindowItem>
|
||||
<div class="pt-6">
|
||||
<h4 class="text-h4 mb-1">
|
||||
Extra informatie
|
||||
</h4>
|
||||
<p class="text-body-1 text-medium-emphasis mb-6">
|
||||
Vertel ons meer over jezelf
|
||||
</p>
|
||||
|
||||
<VRow>
|
||||
<VCol
|
||||
cols="12"
|
||||
sm="6"
|
||||
>
|
||||
<VSelect
|
||||
v-model="tshirtSize"
|
||||
:items="tshirtSizeItems"
|
||||
label="Shirtmaat"
|
||||
:error-messages="errors.tshirt_size"
|
||||
/>
|
||||
</VCol>
|
||||
|
||||
<VCol
|
||||
cols="12"
|
||||
sm="6"
|
||||
>
|
||||
<div class="d-flex flex-column gap-4 pt-2">
|
||||
<VSwitch
|
||||
v-model="firstAid"
|
||||
label="Ik heb een EHBO-diploma"
|
||||
color="primary"
|
||||
hide-details
|
||||
/>
|
||||
|
||||
<VSwitch
|
||||
v-model="drivingLicence"
|
||||
label="Ik heb een rijbewijs B"
|
||||
color="primary"
|
||||
hide-details
|
||||
/>
|
||||
</div>
|
||||
</VCol>
|
||||
|
||||
<VCol cols="12">
|
||||
<VTextarea
|
||||
v-model="allergies"
|
||||
label="Allergieën"
|
||||
:error-messages="errors.allergies"
|
||||
:counter="500"
|
||||
rows="2"
|
||||
auto-grow
|
||||
/>
|
||||
</VCol>
|
||||
|
||||
<VCol cols="12">
|
||||
<VTextarea
|
||||
v-model="accessRequirements"
|
||||
label="Toegangsbehoeften"
|
||||
:error-messages="errors.access_requirements"
|
||||
hint="Bijv. rolstoeltoegankelijk, rustige werkplek, etc."
|
||||
persistent-hint
|
||||
:counter="500"
|
||||
rows="2"
|
||||
auto-grow
|
||||
/>
|
||||
</VCol>
|
||||
</VRow>
|
||||
</div>
|
||||
</VWindowItem>
|
||||
|
||||
<!-- Step 3: Motivatie -->
|
||||
<VWindowItem :value="3">
|
||||
<div class="pa-4 pa-sm-6">
|
||||
<VSelect
|
||||
v-model="motivation"
|
||||
:items="motivationItems"
|
||||
label="Wat is je motivatie?"
|
||||
:error-messages="errors.motivation"
|
||||
clearable
|
||||
class="mb-4"
|
||||
/>
|
||||
<VTextarea
|
||||
v-if="motivation"
|
||||
v-model="motivationOther"
|
||||
label="Toelichting"
|
||||
:error-messages="errors.motivation_other"
|
||||
:counter="500"
|
||||
rows="3"
|
||||
auto-grow
|
||||
/>
|
||||
<!-- Step 2: Motivatie -->
|
||||
<VWindowItem>
|
||||
<div class="pt-6">
|
||||
<h4 class="text-h4 mb-1">
|
||||
Motivatie
|
||||
</h4>
|
||||
<p class="text-body-1 text-medium-emphasis mb-6">
|
||||
Waarom wil je vrijwilliger worden?
|
||||
</p>
|
||||
|
||||
<VRow>
|
||||
<VCol cols="12">
|
||||
<VSelect
|
||||
v-model="motivation"
|
||||
:items="motivationItems"
|
||||
label="Wat is je motivatie?"
|
||||
:error-messages="errors.motivation"
|
||||
clearable
|
||||
/>
|
||||
</VCol>
|
||||
|
||||
<VCol
|
||||
v-if="motivation"
|
||||
cols="12"
|
||||
>
|
||||
<VTextarea
|
||||
v-model="motivationOther"
|
||||
label="Toelichting"
|
||||
:error-messages="errors.motivation_other"
|
||||
:counter="500"
|
||||
rows="3"
|
||||
auto-grow
|
||||
/>
|
||||
</VCol>
|
||||
</VRow>
|
||||
</div>
|
||||
</VWindowItem>
|
||||
|
||||
<!-- Step 4: Voorkeurssecties -->
|
||||
<VWindowItem :value="4">
|
||||
<div class="pa-4 pa-sm-6">
|
||||
<h3 class="text-h6 mb-1">
|
||||
Bij welke onderdelen wil je het liefst helpen?
|
||||
</h3>
|
||||
<p class="text-body-2 text-medium-emphasis mb-4">
|
||||
<!-- Step 3: Voorkeurssecties -->
|
||||
<VWindowItem>
|
||||
<div class="pt-6">
|
||||
<h4 class="text-h4 mb-1">
|
||||
Bij welke onderdelen wil je helpen?
|
||||
</h4>
|
||||
<p class="text-body-1 text-medium-emphasis mb-6">
|
||||
Selecteer maximaal 5 onderdelen. Je eerste keuze heeft de hoogste prioriteit.
|
||||
</p>
|
||||
|
||||
@@ -526,6 +702,7 @@ async function onSubmit() {
|
||||
<div class="text-subtitle-2 text-medium-emphasis mt-4 mb-2">
|
||||
{{ category }}
|
||||
</div>
|
||||
|
||||
<VRow dense>
|
||||
<VCol
|
||||
v-for="section in sections"
|
||||
@@ -547,12 +724,14 @@ async function onSubmit() {
|
||||
density="compact"
|
||||
hide-details
|
||||
/>
|
||||
|
||||
<VIcon
|
||||
v-if="section.icon"
|
||||
size="20"
|
||||
>
|
||||
{{ section.icon }}
|
||||
</VIcon>
|
||||
|
||||
<div class="flex-grow-1">
|
||||
<div class="text-body-1 font-weight-medium">
|
||||
{{ section.name }}
|
||||
@@ -564,6 +743,7 @@ async function onSubmit() {
|
||||
{{ section.registration_description }}
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<VChip
|
||||
v-if="isSelected(section.name)"
|
||||
size="x-small"
|
||||
@@ -596,19 +776,24 @@ async function onSubmit() {
|
||||
</div>
|
||||
</VWindowItem>
|
||||
|
||||
<!-- Step 5: Beschikbaarheid -->
|
||||
<VWindowItem :value="5">
|
||||
<div class="pa-4 pa-sm-6">
|
||||
<!-- Step 4: Beschikbaarheid -->
|
||||
<VWindowItem>
|
||||
<div class="pt-6">
|
||||
<h4 class="text-h4 mb-1">
|
||||
Beschikbaarheid
|
||||
</h4>
|
||||
<p class="text-body-1 text-medium-emphasis mb-6">
|
||||
Selecteer de tijdsloten waarop je beschikbaar bent en geef je voorkeur aan met sterren.
|
||||
</p>
|
||||
|
||||
<p
|
||||
v-if="registrationData.time_slots.length === 0"
|
||||
class="text-body-1 text-medium-emphasis"
|
||||
>
|
||||
Er zijn geen tijdsloten beschikbaar voor dit evenement.
|
||||
</p>
|
||||
|
||||
<template v-else>
|
||||
<p class="text-body-2 text-medium-emphasis mb-4">
|
||||
Selecteer de tijdsloten waarop je beschikbaar bent en geef je voorkeur aan met sterren.
|
||||
</p>
|
||||
<div
|
||||
v-for="[date, slots] in timeSlotsByDate"
|
||||
:key="date"
|
||||
@@ -621,7 +806,6 @@ async function onSubmit() {
|
||||
<VListItem
|
||||
v-for="slot in slots"
|
||||
:key="slot.id"
|
||||
class="timeslot-item"
|
||||
@click="toggleTimeSlot(slot.id)"
|
||||
>
|
||||
<template #prepend>
|
||||
@@ -630,10 +814,12 @@ async function onSubmit() {
|
||||
@click.stop="toggleTimeSlot(slot.id)"
|
||||
/>
|
||||
</template>
|
||||
|
||||
<VListItemTitle>{{ slot.name }}</VListItemTitle>
|
||||
<VListItemSubtitle>
|
||||
{{ formatTimeRange(slot.start_time, slot.end_time) }} · {{ slot.duration_hours }}u
|
||||
</VListItemSubtitle>
|
||||
|
||||
<template
|
||||
v-if="selectedTimeSlotIds.includes(slot.id)"
|
||||
#append
|
||||
@@ -673,35 +859,46 @@ async function onSubmit() {
|
||||
</VWindowItem>
|
||||
</VWindow>
|
||||
|
||||
<VDivider />
|
||||
|
||||
<!-- Navigation -->
|
||||
<div class="d-flex align-center pa-4 pa-sm-6">
|
||||
<!-- Navigation buttons -->
|
||||
<div class="d-flex flex-wrap justify-space-between gap-x-4 mt-6">
|
||||
<VBtn
|
||||
v-if="currentStep > 1"
|
||||
variant="text"
|
||||
prepend-icon="tabler-arrow-left"
|
||||
color="secondary"
|
||||
:disabled="currentStep === 0"
|
||||
variant="tonal"
|
||||
@click="prevStep"
|
||||
>
|
||||
<VIcon
|
||||
icon="tabler-arrow-left"
|
||||
start
|
||||
class="flip-in-rtl"
|
||||
/>
|
||||
Vorige
|
||||
</VBtn>
|
||||
<VSpacer />
|
||||
|
||||
<VBtn
|
||||
v-if="currentStep < 5"
|
||||
color="primary"
|
||||
append-icon="tabler-arrow-right"
|
||||
@click="nextStep"
|
||||
>
|
||||
Volgende
|
||||
</VBtn>
|
||||
<VBtn
|
||||
v-else
|
||||
color="primary"
|
||||
v-if="currentStep === 4"
|
||||
color="success"
|
||||
:loading="isSubmitting"
|
||||
prepend-icon="tabler-send"
|
||||
@click="onSubmit"
|
||||
>
|
||||
Aanmelding versturen
|
||||
<VIcon
|
||||
icon="tabler-send"
|
||||
end
|
||||
/>
|
||||
</VBtn>
|
||||
|
||||
<VBtn
|
||||
v-else
|
||||
color="primary"
|
||||
@click="nextStep"
|
||||
>
|
||||
Volgende
|
||||
<VIcon
|
||||
icon="tabler-arrow-right"
|
||||
end
|
||||
class="flip-in-rtl"
|
||||
/>
|
||||
</VBtn>
|
||||
</div>
|
||||
</VCard>
|
||||
@@ -709,14 +906,15 @@ async function onSubmit() {
|
||||
</VRow>
|
||||
</template>
|
||||
|
||||
<style scoped>
|
||||
.step-chip {
|
||||
cursor: pointer;
|
||||
min-block-size: 32px;
|
||||
<style lang="scss">
|
||||
@use "@core/scss/template/pages/page-auth.scss";
|
||||
|
||||
.illustration-image {
|
||||
block-size: 550px;
|
||||
inline-size: 248px;
|
||||
}
|
||||
|
||||
.section-item,
|
||||
.timeslot-item {
|
||||
min-block-size: 48px;
|
||||
.bg-image {
|
||||
inset-block-end: 0;
|
||||
}
|
||||
</style>
|
||||
|
||||
@@ -1,10 +1,13 @@
|
||||
<script setup lang="ts">
|
||||
import { useGenerateImageVariant } from '@core/composable/useGenerateImageVariant'
|
||||
import miscMaskLight from '@images/pages/misc-mask-light.png'
|
||||
import miscMaskDark from '@images/pages/misc-mask-dark.png'
|
||||
import { useAuthStore } from '@/stores/useAuthStore'
|
||||
|
||||
definePage({
|
||||
name: 'register-success',
|
||||
meta: {
|
||||
layout: 'portal',
|
||||
layout: 'blank',
|
||||
requiresAuth: false,
|
||||
},
|
||||
})
|
||||
@@ -14,55 +17,102 @@ const authStore = useAuthStore()
|
||||
|
||||
const eventName = computed(() => (route.query.event as string) || 'het evenement')
|
||||
const isAuthenticated = computed(() => route.query.authenticated === '1' || authStore.isAuthenticated)
|
||||
|
||||
const authThemeMask = useGenerateImageVariant(miscMaskLight, miscMaskDark)
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<VRow justify="center">
|
||||
<!-- Logo -->
|
||||
<RouterLink to="/">
|
||||
<div class="auth-logo d-flex align-center gap-x-3">
|
||||
<VIcon
|
||||
icon="tabler-users-group"
|
||||
size="28"
|
||||
color="primary"
|
||||
/>
|
||||
<h1 class="auth-title">
|
||||
Crewli
|
||||
</h1>
|
||||
</div>
|
||||
</RouterLink>
|
||||
|
||||
<VRow
|
||||
no-gutters
|
||||
class="auth-wrapper bg-surface"
|
||||
>
|
||||
<VCol
|
||||
cols="12"
|
||||
md="8"
|
||||
lg="6"
|
||||
class="d-flex align-center justify-center"
|
||||
>
|
||||
<VCard class="text-center pa-8">
|
||||
<VIcon
|
||||
icon="tabler-circle-check"
|
||||
size="80"
|
||||
color="success"
|
||||
class="mb-4"
|
||||
/>
|
||||
<VCardTitle class="text-h5 mb-2">
|
||||
Bedankt voor je aanmelding!
|
||||
</VCardTitle>
|
||||
<VCardText class="text-body-1">
|
||||
<p class="mb-4">
|
||||
Bedankt voor je aanmelding bij <strong>{{ eventName }}</strong>!
|
||||
<div class="position-relative w-100 d-flex align-center justify-center" style="min-block-size: 100dvh;">
|
||||
<VCard
|
||||
flat
|
||||
:max-width="550"
|
||||
class="text-center pa-8 pa-sm-12"
|
||||
style="z-index: 1;"
|
||||
>
|
||||
<VAvatar
|
||||
size="100"
|
||||
color="success"
|
||||
variant="tonal"
|
||||
class="mb-6"
|
||||
>
|
||||
<VIcon
|
||||
icon="tabler-circle-check"
|
||||
size="60"
|
||||
/>
|
||||
</VAvatar>
|
||||
|
||||
<h4 class="text-h4 mb-2">
|
||||
Bedankt voor je aanmelding!
|
||||
</h4>
|
||||
|
||||
<p class="text-body-1 text-medium-emphasis mb-2">
|
||||
Je aanmelding bij <strong>{{ eventName }}</strong> is succesvol ontvangen.
|
||||
</p>
|
||||
<p class="mb-4">
|
||||
Je aanmelding wordt beoordeeld door het organisatieteam.
|
||||
|
||||
<p class="text-body-1 text-medium-emphasis mb-2">
|
||||
Het organisatieteam beoordeelt je aanmelding zo snel mogelijk.
|
||||
</p>
|
||||
<p class="text-medium-emphasis">
|
||||
|
||||
<p class="text-body-2 text-disabled mb-8">
|
||||
Je ontvangt een e-mail zodra je aanmelding is goedgekeurd.
|
||||
</p>
|
||||
</VCardText>
|
||||
<VCardActions class="justify-center pt-4">
|
||||
<VBtn
|
||||
v-if="isAuthenticated"
|
||||
to="/dashboard"
|
||||
color="primary"
|
||||
prepend-icon="tabler-dashboard"
|
||||
>
|
||||
Ga naar je dashboard
|
||||
</VBtn>
|
||||
<VBtn
|
||||
v-else
|
||||
to="/login"
|
||||
variant="outlined"
|
||||
prepend-icon="tabler-login"
|
||||
>
|
||||
Heb je al een account? Log in
|
||||
</VBtn>
|
||||
</VCardActions>
|
||||
</VCard>
|
||||
|
||||
<div class="d-flex flex-wrap justify-center gap-4">
|
||||
<VBtn
|
||||
v-if="isAuthenticated"
|
||||
to="/dashboard"
|
||||
color="primary"
|
||||
prepend-icon="tabler-dashboard"
|
||||
>
|
||||
Ga naar je dashboard
|
||||
</VBtn>
|
||||
|
||||
<VBtn
|
||||
v-else
|
||||
to="/login"
|
||||
color="primary"
|
||||
variant="tonal"
|
||||
prepend-icon="tabler-login"
|
||||
>
|
||||
Heb je al een account? Log in
|
||||
</VBtn>
|
||||
</div>
|
||||
</VCard>
|
||||
|
||||
<img
|
||||
class="auth-footer-mask flip-in-rtl"
|
||||
:src="authThemeMask"
|
||||
alt="footer-mask"
|
||||
height="280"
|
||||
width="100"
|
||||
>
|
||||
</div>
|
||||
</VCol>
|
||||
</VRow>
|
||||
</template>
|
||||
|
||||
<style lang="scss">
|
||||
@use "@core/scss/template/pages/page-auth.scss";
|
||||
</style>
|
||||
|
||||
Reference in New Issue
Block a user