feat: frontend member management
- Leden pagina met VDataTable, rol chips, uitnodigingen sectie - InviteMemberDialog + EditMemberRoleDialog - Publieke acceptatiepagina /invitations/[token] - Router guard uitgebreid met requiresAuth: false support - MemberCollection backend uitgebreid met volledige pending_invitations lijst
This commit is contained in:
211
apps/app/src/pages/invitations/[token].vue
Normal file
211
apps/app/src/pages/invitations/[token].vue
Normal file
@@ -0,0 +1,211 @@
|
||||
<script setup lang="ts">
|
||||
import { VForm } from 'vuetify/components/VForm'
|
||||
import { useInvitationDetail, useAcceptInvitation } from '@/composables/api/useMembers'
|
||||
import { useAuthStore } from '@/stores/useAuthStore'
|
||||
import { requiredValidator } from '@core/utils/validators'
|
||||
import { VNodeRenderer } from '@layouts/components/VNodeRenderer'
|
||||
import { themeConfig } from '@themeConfig'
|
||||
import type { OrganisationRole } from '@/types/member'
|
||||
|
||||
definePage({
|
||||
meta: {
|
||||
layout: 'blank',
|
||||
requiresAuth: false,
|
||||
},
|
||||
})
|
||||
|
||||
const route = useRoute()
|
||||
const router = useRouter()
|
||||
const authStore = useAuthStore()
|
||||
|
||||
const token = computed(() => String((route.params as { token: string }).token))
|
||||
|
||||
const { data: invitation, isLoading, isError } = useInvitationDetail(token)
|
||||
const { mutate: acceptInvitation, isPending: isAccepting } = useAcceptInvitation()
|
||||
|
||||
const name = ref('')
|
||||
const password = ref('')
|
||||
const passwordConfirmation = ref('')
|
||||
const isPasswordVisible = ref(false)
|
||||
const isPasswordConfirmVisible = ref(false)
|
||||
const errors = ref<Record<string, string>>({})
|
||||
const refVForm = ref<VForm>()
|
||||
|
||||
const roleLabelMap: Record<string, string> = {
|
||||
org_admin: 'Organisatie Beheerder',
|
||||
org_member: 'Organisatie Lid',
|
||||
event_manager: 'Evenement Manager',
|
||||
staff_coordinator: 'Staf Coördinator',
|
||||
volunteer_coordinator: 'Vrijwilliger Coördinator',
|
||||
}
|
||||
|
||||
const passwordMinLength = (value: string) => {
|
||||
return value.length >= 8 || 'Wachtwoord moet minimaal 8 tekens bevatten'
|
||||
}
|
||||
|
||||
const passwordConfirmed = (value: string) => {
|
||||
return value === password.value || 'Wachtwoorden komen niet overeen'
|
||||
}
|
||||
|
||||
function onSubmit() {
|
||||
refVForm.value?.validate().then(({ valid }) => {
|
||||
if (!valid) return
|
||||
|
||||
errors.value = {}
|
||||
|
||||
const payload: Record<string, string> = {}
|
||||
if (!invitation.value?.existing_user) {
|
||||
payload.name = name.value
|
||||
payload.password = password.value
|
||||
payload.password_confirmation = passwordConfirmation.value
|
||||
}
|
||||
|
||||
acceptInvitation(
|
||||
{ token: token.value, ...payload },
|
||||
{
|
||||
onSuccess: (response) => {
|
||||
authStore.setToken(response.data.token)
|
||||
authStore.setUser(response.data.user)
|
||||
router.replace('/dashboard')
|
||||
},
|
||||
onError: (err: any) => {
|
||||
const data = err.response?.data
|
||||
if (data?.errors) {
|
||||
errors.value = {
|
||||
name: data.errors.name?.[0] ?? '',
|
||||
password: data.errors.password?.[0] ?? '',
|
||||
}
|
||||
}
|
||||
else if (data?.message) {
|
||||
errors.value = { general: data.message }
|
||||
}
|
||||
},
|
||||
},
|
||||
)
|
||||
})
|
||||
}
|
||||
</script>
|
||||
|
||||
<template>
|
||||
<div class="d-flex align-center justify-center" style="min-block-size: 100vh;">
|
||||
<VCard
|
||||
max-width="500"
|
||||
class="pa-6"
|
||||
:min-width="400"
|
||||
>
|
||||
<VCardText class="text-center mb-4">
|
||||
<VNodeRenderer :nodes="themeConfig.app.logo" />
|
||||
<h4 class="text-h4 mt-4">
|
||||
{{ themeConfig.app.title }}
|
||||
</h4>
|
||||
</VCardText>
|
||||
|
||||
<!-- Loading -->
|
||||
<VCardText v-if="isLoading">
|
||||
<div class="d-flex justify-center">
|
||||
<VProgressCircular indeterminate />
|
||||
</div>
|
||||
</VCardText>
|
||||
|
||||
<!-- Error: not found -->
|
||||
<VCardText v-else-if="isError">
|
||||
<VAlert type="error">
|
||||
Uitnodiging niet gevonden
|
||||
</VAlert>
|
||||
</VCardText>
|
||||
|
||||
<!-- Expired -->
|
||||
<VCardText v-else-if="invitation?.status === 'expired'">
|
||||
<VAlert type="warning">
|
||||
Deze uitnodiging is verlopen
|
||||
</VAlert>
|
||||
</VCardText>
|
||||
|
||||
<!-- Already accepted -->
|
||||
<VCardText v-else-if="invitation?.status === 'accepted'">
|
||||
<VAlert type="info">
|
||||
Deze uitnodiging is al geaccepteerd
|
||||
</VAlert>
|
||||
</VCardText>
|
||||
|
||||
<!-- Pending: accept form -->
|
||||
<template v-else-if="invitation?.status === 'pending'">
|
||||
<VCardText>
|
||||
<h5 class="text-h5 mb-2">
|
||||
Je bent uitgenodigd voor {{ invitation.organisation.name }}
|
||||
</h5>
|
||||
<p class="text-body-1 mb-4">
|
||||
Rol:
|
||||
<VChip
|
||||
size="small"
|
||||
color="primary"
|
||||
>
|
||||
{{ roleLabelMap[invitation.role] ?? invitation.role }}
|
||||
</VChip>
|
||||
</p>
|
||||
|
||||
<!-- Existing user -->
|
||||
<VAlert
|
||||
v-if="invitation.existing_user"
|
||||
type="info"
|
||||
class="mb-4"
|
||||
>
|
||||
Er bestaat al een account voor {{ invitation.email }}. Log in om te accepteren.
|
||||
</VAlert>
|
||||
|
||||
<VAlert
|
||||
v-if="errors.general"
|
||||
type="error"
|
||||
class="mb-4"
|
||||
>
|
||||
{{ errors.general }}
|
||||
</VAlert>
|
||||
|
||||
<VForm
|
||||
ref="refVForm"
|
||||
@submit.prevent="onSubmit"
|
||||
>
|
||||
<!-- New user fields -->
|
||||
<template v-if="!invitation.existing_user">
|
||||
<AppTextField
|
||||
v-model="name"
|
||||
label="Naam"
|
||||
:rules="[requiredValidator]"
|
||||
:error-messages="errors.name"
|
||||
class="mb-4"
|
||||
/>
|
||||
<AppTextField
|
||||
v-model="password"
|
||||
label="Wachtwoord"
|
||||
:type="isPasswordVisible ? 'text' : 'password'"
|
||||
:rules="[requiredValidator, passwordMinLength]"
|
||||
:error-messages="errors.password"
|
||||
:append-inner-icon="isPasswordVisible ? 'tabler-eye-off' : 'tabler-eye'"
|
||||
class="mb-4"
|
||||
@click:append-inner="isPasswordVisible = !isPasswordVisible"
|
||||
/>
|
||||
<AppTextField
|
||||
v-model="passwordConfirmation"
|
||||
label="Wachtwoord bevestigen"
|
||||
:type="isPasswordConfirmVisible ? 'text' : 'password'"
|
||||
:rules="[requiredValidator, passwordConfirmed]"
|
||||
:append-inner-icon="isPasswordConfirmVisible ? 'tabler-eye-off' : 'tabler-eye'"
|
||||
class="mb-4"
|
||||
@click:append-inner="isPasswordConfirmVisible = !isPasswordConfirmVisible"
|
||||
/>
|
||||
</template>
|
||||
|
||||
<VBtn
|
||||
block
|
||||
type="submit"
|
||||
color="primary"
|
||||
:loading="isAccepting"
|
||||
>
|
||||
Accepteren
|
||||
</VBtn>
|
||||
</VForm>
|
||||
</VCardText>
|
||||
</template>
|
||||
</VCard>
|
||||
</div>
|
||||
</template>
|
||||
Reference in New Issue
Block a user