2019-12-20 13:04:34 +01:00
|
|
|
<template>
|
2022-07-12 10:55:28 +02:00
|
|
|
<section class="container mx-auto hero">
|
2020-02-18 08:57:00 +01:00
|
|
|
<div class="hero-body" v-if="event">
|
2022-07-12 10:55:28 +02:00
|
|
|
<div class="container mx-auto">
|
|
|
|
<h2 class="text-2xl">
|
|
|
|
{{ $t("You wish to participate to the following event") }}
|
|
|
|
</h2>
|
2020-02-18 08:57:00 +01:00
|
|
|
<EventListViewCard v-if="event" :event="event" />
|
|
|
|
<div class="columns has-text-centered">
|
|
|
|
<div class="column">
|
2020-11-30 10:24:11 +01:00
|
|
|
<router-link
|
|
|
|
:to="{ name: RouteName.EVENT_PARTICIPATE_WITH_ACCOUNT }"
|
|
|
|
>
|
2020-02-18 08:57:00 +01:00
|
|
|
<figure class="image is-128x128">
|
2020-11-30 10:24:11 +01:00
|
|
|
<img
|
|
|
|
src="../../assets/undraw_profile.svg"
|
|
|
|
alt="Profile illustration"
|
|
|
|
/>
|
2020-02-18 08:57:00 +01:00
|
|
|
</figure>
|
2022-07-12 10:55:28 +02:00
|
|
|
<o-button variant="primary">{{
|
2020-11-30 10:24:11 +01:00
|
|
|
$t("I have a Mobilizon account")
|
2022-07-12 10:55:28 +02:00
|
|
|
}}</o-button>
|
2020-02-18 08:57:00 +01:00
|
|
|
</router-link>
|
|
|
|
<p>
|
|
|
|
<small>
|
|
|
|
{{
|
2020-11-30 10:24:11 +01:00
|
|
|
$t(
|
|
|
|
"Either on the {instance} instance or on another instance.",
|
|
|
|
{
|
|
|
|
instance: host,
|
|
|
|
}
|
|
|
|
)
|
2020-02-18 08:57:00 +01:00
|
|
|
}}
|
|
|
|
</small>
|
2022-07-12 10:55:28 +02:00
|
|
|
<o-tooltip
|
2022-08-26 16:08:58 +02:00
|
|
|
variant="dark"
|
2020-02-18 08:57:00 +01:00
|
|
|
:label="
|
|
|
|
$t(
|
|
|
|
'Mobilizon is a federated network. You can interact with this event from a different server.'
|
|
|
|
)
|
|
|
|
"
|
|
|
|
>
|
2022-07-12 10:55:28 +02:00
|
|
|
<o-icon size="small" icon="help-circle-outline" />
|
|
|
|
</o-tooltip>
|
2020-02-18 08:57:00 +01:00
|
|
|
</p>
|
|
|
|
</div>
|
2020-11-30 10:24:11 +01:00
|
|
|
<vertical-divider
|
|
|
|
:content="$t('Or')"
|
|
|
|
v-if="anonymousParticipationAllowed"
|
|
|
|
/>
|
2020-02-18 08:57:00 +01:00
|
|
|
<div
|
|
|
|
class="column"
|
2020-11-30 10:24:11 +01:00
|
|
|
v-if="
|
|
|
|
anonymousParticipationAllowed &&
|
|
|
|
hasAnonymousEmailParticipationMethod
|
|
|
|
"
|
2020-02-18 08:57:00 +01:00
|
|
|
>
|
|
|
|
<router-link
|
|
|
|
:to="{ name: RouteName.EVENT_PARTICIPATE_WITHOUT_ACCOUNT }"
|
|
|
|
v-if="event.local"
|
|
|
|
>
|
|
|
|
<figure class="image is-128x128">
|
2020-11-30 10:24:11 +01:00
|
|
|
<img
|
|
|
|
src="../../assets/undraw_mail_2.svg"
|
|
|
|
alt="Privacy illustration"
|
|
|
|
/>
|
2020-02-18 08:57:00 +01:00
|
|
|
</figure>
|
2022-07-12 10:55:28 +02:00
|
|
|
<o-button variant="primary">{{
|
2020-11-30 10:24:11 +01:00
|
|
|
$t("I don't have a Mobilizon account")
|
2022-07-12 10:55:28 +02:00
|
|
|
}}</o-button>
|
2020-02-18 08:57:00 +01:00
|
|
|
</router-link>
|
|
|
|
<a :href="`${event.url}/participate/without-account`" v-else>
|
|
|
|
<figure class="image is-128x128">
|
2020-11-30 10:24:11 +01:00
|
|
|
<img
|
|
|
|
src="../../assets/undraw_mail_2.svg"
|
|
|
|
alt="Privacy illustration"
|
|
|
|
/>
|
2020-02-18 08:57:00 +01:00
|
|
|
</figure>
|
2022-07-12 10:55:28 +02:00
|
|
|
<o-button variant="primary">{{
|
2020-11-30 10:24:11 +01:00
|
|
|
$t("I don't have a Mobilizon account")
|
2022-07-12 10:55:28 +02:00
|
|
|
}}</o-button>
|
2020-02-18 08:57:00 +01:00
|
|
|
</a>
|
|
|
|
<p>
|
|
|
|
<small>{{ $t("Participate using your email address") }}</small>
|
|
|
|
<br />
|
|
|
|
<small v-if="!event.local">
|
|
|
|
{{ $t("You will be redirected to the original instance") }}
|
|
|
|
</small>
|
|
|
|
</p>
|
|
|
|
</div>
|
2019-12-20 13:04:34 +01:00
|
|
|
</div>
|
2020-02-18 08:57:00 +01:00
|
|
|
<div class="has-text-centered">
|
2022-08-26 16:08:58 +02:00
|
|
|
<o-button tag="a" variant="text" @click="router.go(-1)">{{
|
2020-02-18 08:57:00 +01:00
|
|
|
$t("Back to previous page")
|
2022-07-12 10:55:28 +02:00
|
|
|
}}</o-button>
|
2020-02-18 08:57:00 +01:00
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</div>
|
|
|
|
</section>
|
2019-12-20 13:04:34 +01:00
|
|
|
</template>
|
2022-07-12 10:55:28 +02:00
|
|
|
<script lang="ts" setup>
|
2020-02-18 08:57:00 +01:00
|
|
|
import EventListViewCard from "@/components/Event/EventListViewCard.vue";
|
|
|
|
import VerticalDivider from "@/components/Utils/VerticalDivider.vue";
|
|
|
|
import RouteName from "../../router/name";
|
2022-07-12 10:55:28 +02:00
|
|
|
import { useFetchEvent } from "@/composition/apollo/event";
|
|
|
|
import { useAnonymousParticipationConfig } from "@/composition/apollo/config";
|
|
|
|
import { computed } from "vue";
|
|
|
|
import { useRouter } from "vue-router";
|
|
|
|
import { useHead } from "@vueuse/head";
|
|
|
|
import { useI18n } from "vue-i18n";
|
2019-12-20 13:04:34 +01:00
|
|
|
|
2022-07-12 10:55:28 +02:00
|
|
|
const props = defineProps<{ uuid: string }>();
|
2020-02-18 08:57:00 +01:00
|
|
|
|
2022-07-12 10:55:28 +02:00
|
|
|
const { event } = useFetchEvent(props.uuid);
|
2020-02-18 08:57:00 +01:00
|
|
|
|
2022-07-12 10:55:28 +02:00
|
|
|
const { anonymousParticipationConfig } = useAnonymousParticipationConfig();
|
2020-02-18 08:57:00 +01:00
|
|
|
|
2022-07-12 10:55:28 +02:00
|
|
|
const router = useRouter();
|
2019-12-20 13:04:34 +01:00
|
|
|
|
2022-07-12 10:55:28 +02:00
|
|
|
const { t } = useI18n({ useScope: "global" });
|
2019-12-20 13:04:34 +01:00
|
|
|
|
2022-07-12 10:55:28 +02:00
|
|
|
useHead({
|
|
|
|
title: computed(() => t("Unlogged participation")),
|
|
|
|
meta: [{ name: "robots", content: "noindex" }],
|
|
|
|
});
|
|
|
|
|
|
|
|
const host = computed((): string => {
|
|
|
|
return window.location.hostname;
|
|
|
|
});
|
2019-12-20 13:04:34 +01:00
|
|
|
|
2022-07-12 10:55:28 +02:00
|
|
|
const anonymousParticipationAllowed = computed((): boolean | undefined => {
|
|
|
|
return event.value?.options.anonymousParticipation;
|
|
|
|
});
|
|
|
|
|
|
|
|
const hasAnonymousEmailParticipationMethod = computed(
|
|
|
|
(): boolean | undefined => {
|
2020-02-18 08:57:00 +01:00
|
|
|
return (
|
2022-07-12 10:55:28 +02:00
|
|
|
anonymousParticipationConfig.value?.allowed &&
|
|
|
|
anonymousParticipationConfig.value?.validation.email.enabled
|
2020-02-18 08:57:00 +01:00
|
|
|
);
|
2019-12-20 13:04:34 +01:00
|
|
|
}
|
2022-07-12 10:55:28 +02:00
|
|
|
);
|
2019-12-20 13:04:34 +01:00
|
|
|
</script>
|
|
|
|
<style lang="scss" scoped>
|
2020-02-18 08:57:00 +01:00
|
|
|
.column > a {
|
|
|
|
display: flex;
|
|
|
|
flex-direction: column;
|
|
|
|
align-items: center;
|
|
|
|
}
|
|
|
|
</style>
|