2019-12-20 13:04:34 +01:00
< template >
2022-07-12 10:55:28 +02:00
< section class = "container mx-auto" >
< div class = "" v-if ="event" >
< form @submit.prevent ="joinEvent" v-if ="!formSent" >
< p >
{ {
$t (
"This Mobilizon instance and this event organizer allows anonymous participations, but requires validation through email confirmation."
)
} }
< / p >
< o -notification variant = "info" >
{ {
$t (
"Your email will only be used to confirm that you're a real person and send you eventual updates for this event. It will NOT be transmitted to other instances or to the event organizer."
)
} }
< / o - n o t i f i c a t i o n >
< o -notification variant = "danger" v-if ="error" > {{
error
} } < / o - n o t i f i c a t i o n >
< o -field
: label = "$t('Email address')"
labelFor = "anonymousParticipationEmail"
>
< o -input
type = "email"
id = "anonymousParticipationEmail"
v - model = "anonymousParticipation.email"
: placeholder = "$t('Your email')"
required
/ >
< / o - f i e l d >
< p v-if ="event.joinOptions === EventJoinOptions.RESTRICTED" >
{ {
$t (
"The event organizer manually approves participations. Since you've chosen to participate without an account, please explain why you want to participate to this event."
)
} }
< / p >
< p v-else >
{ {
$t (
"If you want, you may send a message to the event organizer here."
)
} }
< / p >
< o -field
: label = "$t('Message')"
labelFor = "anonymousParticipationMessage"
>
< o -input
id = "anonymousParticipationMessage"
type = "textarea"
v - model = "anonymousParticipation.message"
minlength = "10"
: required = "event.joinOptions === EventJoinOptions.RESTRICTED"
/ >
< / o - f i e l d >
< o -field >
< o -checkbox v-model ="anonymousParticipation.saveParticipation" >
< b > { { $t ( "Remember my participation in this browser" ) } } < / b >
< p >
2020-12-07 14:48:48 +01:00
{ {
$t (
2022-07-12 10:55:28 +02:00
"Will allow to display and manage your participation status on the event page when using this device. Uncheck if you're using a public device."
2020-12-07 14:48:48 +01:00
)
2022-07-12 10:55:28 +02:00
} }
< / p >
< / o - c h e c k b o x >
< / o - f i e l d >
< div class = "flex gap-2 my-2" >
< o -button
: disabled = "sendingForm"
variant = "primary"
native - type = "submit"
> { { $t ( "Send email" ) } } < / o - b u t t o n
>
< o -button
native - type = "button"
variant = "text"
@ click = "$router.go(-1)"
> { { $t ( "Back to previous page" ) } } < / o - b u t t o n
>
< / div >
< / form >
< div v-else >
< h1 class = "title" >
{ { $t ( "Request for participation confirmation sent" ) } }
< / h1 >
< p class = "prose dark:prose-invert" >
< span > { { $t ( "Check your inbox (and your junk mail folder)." ) } } < / span >
< span
class = "details"
v - if = "event.joinOptions === EventJoinOptions.RESTRICTED"
>
{ {
2020-12-07 14:48:48 +01:00
$t (
2022-07-12 10:55:28 +02:00
"Your participation will be validated once you click the confirmation link into the email, and after the organizer manually validates your participation."
2020-12-07 14:48:48 +01:00
)
2022-07-12 10:55:28 +02:00
} } < / s p a n
> < span class = "details" v-else > {{
$t (
"Your participation will be validated once you click the confirmation link into the email."
)
} } < / span >
< / p >
< o -notification variant = "warning" v-if ="error" > {{
error
} } < / o - n o t i f i c a t i o n >
< p class = "prose dark:prose-invert" >
< i18n -t
keypath = "You may now close this window, or {return_to_event}."
>
< template # return_to_event >
2020-12-07 14:48:48 +01:00
< router -link
: to = "{ name: RouteName.EVENT, params: { uuid: event.uuid } }"
> { { $t ( "return to the event's page" ) } } < / r o u t e r - l i n k
>
2022-07-12 10:55:28 +02:00
< / template >
< / i 1 8 n - t >
< / p >
2020-02-18 08:57:00 +01:00
< / div >
< / div >
2022-07-12 10:55:28 +02:00
< o -notification variant = "danger" v -else -if = " ! loading "
2020-12-07 14:48:48 +01:00
> { {
$t (
"Unable to load event for participation. The error details are provided below:"
)
} }
< details >
< pre > { { error } } < / pre >
< / details >
2022-07-12 10:55:28 +02:00
< / o - n o t i f i c a t i o n >
2020-02-18 08:57:00 +01:00
< / section >
2019-12-20 13:04:34 +01:00
< / template >
2022-07-12 10:55:28 +02:00
< script lang = "ts" setup >
import { IEvent } from "@/types/event.model" ;
2020-12-07 14:48:48 +01:00
import { FETCH _EVENT _BASIC , JOIN _EVENT } from "@/graphql/event" ;
2020-02-18 08:57:00 +01:00
import { addLocalUnconfirmedAnonymousParticipation } from "@/services/AnonymousParticipationStorage" ;
2020-11-27 19:27:44 +01:00
import { EventJoinOptions , ParticipantRole } from "@/types/enums" ;
2020-12-07 14:48:48 +01:00
import RouteName from "@/router/name" ;
2020-11-27 19:27:44 +01:00
import { IParticipant } from "../../types/participant.model" ;
2021-06-11 14:21:27 +02:00
import { ApolloCache , FetchResult } from "@apollo/client/core" ;
2022-07-12 10:55:28 +02:00
import { useFetchEventBasic } from "@/composition/apollo/event" ;
import { useAnonymousActorId } from "@/composition/apollo/config" ;
import { computed , reactive , ref } from "vue" ;
import { useI18n } from "vue-i18n" ;
import { useHead } from "@vueuse/head" ;
import { useMutation } from "@vue/apollo-composable" ;
2019-12-20 13:04:34 +01:00
2022-07-12 10:55:28 +02:00
const error = ref < boolean | string > ( false ) ;
2020-02-18 08:57:00 +01:00
2022-07-12 10:55:28 +02:00
const { anonymousActorId } = useAnonymousActorId ( ) ;
2020-02-18 08:57:00 +01:00
2022-07-12 10:55:28 +02:00
const props = defineProps < {
uuid : string ;
} > ( ) ;
const { event , loading } = useFetchEventBasic ( props . uuid ) ;
2020-02-18 08:57:00 +01:00
2022-07-12 10:55:28 +02:00
const { t , locale } = useI18n ( { useScope : "global" } ) ;
2020-02-18 08:57:00 +01:00
2022-07-12 10:55:28 +02:00
useHead ( {
title : computed ( ( ) => t ( "Participation without account" ) ) ,
meta : [ { name : "robots" , content : "noindex" } ] ,
} ) ;
2020-02-18 08:57:00 +01:00
2022-07-12 10:55:28 +02:00
const anonymousParticipation = reactive < {
email : string ;
message : string ;
saveParticipation : boolean ;
} > ( {
email : "" ,
message : "" ,
saveParticipation : true ,
} ) ;
2020-10-07 17:05:15 +02:00
2022-07-12 10:55:28 +02:00
const formSent = ref ( false ) ;
2020-10-07 17:05:15 +02:00
2022-07-12 10:55:28 +02:00
const sendingForm = ref ( false ) ;
2019-12-20 13:04:34 +01:00
2022-07-12 10:55:28 +02:00
const {
mutate : joinEventMutation ,
onDone : joinEventDone ,
onError : joinEventError ,
} = useMutation < {
joinEvent : IParticipant ;
} > ( JOIN _EVENT , ( ) => ( {
update : (
store : ApolloCache < { joinEvent : IParticipant } > ,
{ data : updateData } : FetchResult
) => {
if ( updateData == null ) {
console . error (
"Cannot update event participant cache, because of data null value."
) ;
return ;
}
2019-12-20 13:04:34 +01:00
2022-07-12 10:55:28 +02:00
const cachedData = store . readQuery < { event : IEvent } > ( {
query : FETCH _EVENT _BASIC ,
variables : { uuid : event . value ? . uuid } ,
} ) ;
if ( cachedData == null ) {
console . error (
"Cannot update event participant cache, because of cached null value."
) ;
return ;
}
const participantStats = { ... cachedData . event . participantStats } ;
2019-12-20 13:04:34 +01:00
2022-07-12 10:55:28 +02:00
if ( updateData . joinEvent . role === ParticipantRole . NOT _CONFIRMED ) {
participantStats . notConfirmed += 1 ;
} else {
participantStats . going += 1 ;
participantStats . participant += 1 ;
}
2019-12-20 13:04:34 +01:00
2022-07-12 10:55:28 +02:00
store . writeQuery ( {
query : FETCH _EVENT _BASIC ,
variables : { uuid : event . value ? . uuid } ,
data : {
event : {
... cachedData . event ,
participantStats ,
2019-12-20 13:04:34 +01:00
} ,
2022-07-12 10:55:28 +02:00
} ,
} ) ;
} ,
} ) ) ;
joinEventDone ( async ( { data } ) => {
sendingForm . value = false ;
formSent . value = true ;
if (
data ? . joinEvent . metadata . cancellationToken &&
anonymousParticipation . saveParticipation &&
event . value
) {
try {
await addLocalUnconfirmedAnonymousParticipation (
event . value ,
data . joinEvent . metadata . cancellationToken
) ;
2021-09-29 18:20:33 +02:00
} catch ( e : any ) {
2020-12-07 14:48:48 +01:00
if (
[ "TextEncoder is not defined" , "crypto.subtle is undefined" ] . includes (
e . message
)
) {
2022-07-12 10:55:28 +02:00
error . value = t ( "Unable to save your participation in this browser." ) ;
2020-12-07 14:48:48 +01:00
}
2019-12-20 13:04:34 +01:00
}
}
2022-07-12 10:55:28 +02:00
} ) ;
joinEventError ( ( e ) => {
if ( e . graphQLErrors && e . graphQLErrors . length > 0 ) {
error . value = e . graphQLErrors [ 0 ] . message ;
} else if ( e . networkError ) {
error . value = e . networkError . message ;
}
} ) ;
const joinEvent = async ( ) : Promise < void > => {
error . value = false ;
sendingForm . value = true ;
joinEventMutation ( {
eventId : event . value ? . id ,
actorId : anonymousActorId . value ,
email : anonymousParticipation . email ,
message : anonymousParticipation . message ,
locale : locale . value ,
timezone : Intl . DateTimeFormat ( ) . resolvedOptions ( ) . timeZone ,
} ) ;
} ;
2020-02-18 08:57:00 +01:00
< / script >