Add anonymous and remote participations

js/src/components/Participation/UnloggedParticipation.vue

@@ -0,0 +1,104 @@
+<template>
+    <section class="section container hero">
+        <div class="hero-body" v-if="event">
+            <div class="container">
+                <h2 class="subtitle">{{ $t('You wish to participate to the following event')}}</h2>
+                <EventListViewCard v-if="event" :event="event" />
+                <div class="columns has-text-centered">
+                    <div class="column">
+                        <router-link :to="{ name: RouteName.EVENT_PARTICIPATE_WITH_ACCOUNT }">
+                            <figure class="image is-128x128">
+                                <img src="../../assets/undraw_profile.svg" alt="Profile illustration" />
+                            </figure>
+                            <b-button type="is-primary">{{ $t('I have a Mobilizon account') }}</b-button>
+                        </router-link>
+                        <p>
+                            <small>{{ $t('Either on the {instance} instance or on another instance.', {instance: host })}}</small>
+                            <b-tooltip type="is-dark" :label="$t('Mobilizon is a federated network. You can interact with this event from a different server.')">
+                                <b-icon size="is-small" icon="help-circle-outline" />
+                            </b-tooltip>
+                        </p>
+                    </div>
+                    <vertical-divider :content="$t('Or')" v-if="anonymousParticipationAllowed" />
+                    <div class="column" v-if="anonymousParticipationAllowed && hasAnonymousEmailParticipationMethod">
+                        <router-link :to="{ name: RouteName.EVENT_PARTICIPATE_WITHOUT_ACCOUNT }" v-if="event.local">
+                            <figure class="image is-128x128">
+                                <img src="../../assets/undraw_mail_2.svg" alt="Privacy illustration" />
+                            </figure>
+                            <b-button type="is-primary">{{ $t("I don't have a Mobilizon account") }}</b-button>
+                        </router-link>
+                        <a :href="`${event.url}/participate/without-account`" v-else>
+                            <figure class="image is-128x128">
+                                <img src="../../assets/undraw_mail_2.svg" alt="Privacy illustration" />
+                            </figure>
+                            <b-button type="is-primary">{{ $t("I don't have a Mobilizon account") }}</b-button>
+                        </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>
+                </div>
+                <div class="has-text-centered">
+                    <b-button tag="a" type="is-text" @click="$router.go(-1)">
+                        {{ $t('Back to previous page') }}
+                    </b-button>
+                </div>
+            </div>
+        </div>
+    </section>
+</template>
+<script lang="ts">
+import { Component, Prop, Vue } from 'vue-property-decorator';
+import { RouteName } from '@/router';
+import { FETCH_EVENT } from '@/graphql/event';
+import EventListCard from '@/components/Event/EventListCard.vue';
+import EventListViewCard from '@/components/Event/EventListViewCard.vue';
+import { EventModel, IEvent } from '@/types/event.model';
+import VerticalDivider from '@/components/Utils/VerticalDivider.vue';
+import { CONFIG } from '@/graphql/config';
+import { IConfig } from '@/types/config.model';
+
+@Component({
+  components: { VerticalDivider, EventListViewCard, EventListCard },
+  apollo: {
+    event: {
+      query: FETCH_EVENT,
+      variables() {
+        return {
+          uuid: this.uuid,
+        };
+      },
+      skip() { return !this.uuid; },
+      update: (data) => new EventModel(data.event),
+    },
+    config: CONFIG,
+  },
+})
+export default class UnloggedParticipation extends Vue {
+  @Prop({ type: String, required: true }) uuid!: string;
+  RouteName = RouteName;
+  event!: IEvent;
+  config!: IConfig;
+
+  get host() {
+    return window.location.hostname;
+  }
+
+  get anonymousParticipationAllowed(): boolean {
+    return this.event.options.anonymousParticipation;
+  }
+
+  get hasAnonymousEmailParticipationMethod(): boolean {
+    return this.config.anonymous.participation.allowed && this.config.anonymous.participation.validation.email.enabled;
+  }
+}
+</script>
+<style lang="scss" scoped>
+
+    .column > a {
+        display: flex;
+        flex-direction: column;
+        align-items: center;
+    }
+</style>