Add anonymous and remote participations

2019-12-20 13:04:34 +01:00
parent 17e0b3968f
commit 2ed9050a90
135 changed files with 10141 additions and 2271 deletions
--- a/js/src/components/Participation/ParticipationWithoutAccount.vue
+++ b/js/src/components/Participation/ParticipationWithoutAccount.vue
@@ -0,0 +1,109 @@
+<template>
+    <section class="container section hero is-fullheight">
+        <div class="hero-body">
+            <div class="container">
+                <form @submit.prevent="joinEvent">
+                    <p>{{ $t('This Mobilizon instance and this event organizer allows anonymous participations, but requires validation through email confirmation.') }}</p>
+                    <b-message type="is-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.") }}</b-message>
+                    <b-message type="is-danger" v-if="error">{{ error }}</b-message>
+                    <b-field :label="$t('Email')">
+                        <b-field>
+                            <b-input
+                                    type="email"
+                                    v-model="anonymousParticipation.email"
+                                    placeholder="Your email"
+                                    required>
+                            </b-input>
+                            <p class="control">
+                                <b-button type="is-primary" native-type="submit">{{ $t('Send email') }}</b-button>
+                            </p>
+                        </b-field>
+                    </b-field>
+                    <div class="has-text-centered">
+                        <b-button native-type="button" tag="a" type="is-text" @click="$router.go(-1)">
+                            {{ $t('Back to previous page') }}
+                        </b-button>
+                    </div>
+                </form>
+            </div>
+        </div>
+    </section>
+</template>
+<script lang="ts">
+import { Component, Prop, Vue } from 'vue-property-decorator';
+import { EventModel, IEvent, IParticipant, ParticipantRole } from '@/types/event.model';
+import { FETCH_EVENT, JOIN_EVENT } from '@/graphql/event';
+import { IConfig } from '@/types/config.model';
+import { CONFIG } from '@/graphql/config';
+import { addLocalUnconfirmedAnonymousParticipation } from '@/services/AnonymousParticipationStorage';
+import { RouteName } from '@/router';
+
+@Component({
+  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 ParticipationWithoutAccount extends Vue {
+  @Prop({ type: String, required: true }) uuid!: string;
+  anonymousParticipation: { email: String } = { email: '' };
+  event!: IEvent;
+  config!: IConfig;
+  error: String|boolean = false;
+
+  async joinEvent() {
+    this.error = false;
+    try {
+      const { data } = await this.$apollo.mutate<{ joinEvent: IParticipant }>({
+        mutation: JOIN_EVENT,
+        variables: {
+          eventId: this.event.id,
+          actorId: this.config.anonymous.actorId,
+          email: this.anonymousParticipation.email,
+        },
+        update: (store, { data }) => {
+          if (data == null) return;
+
+          const cachedData = store.readQuery<{ event: IEvent }>({
+            query: FETCH_EVENT,
+            variables: { uuid: this.event.uuid },
+          });
+          if (cachedData == null) return;
+          const { event } = cachedData;
+          if (event === null) {
+            console.error('Cannot update event participant cache, because of null value.');
+            return;
+          }
+
+          if (data.joinEvent.role === ParticipantRole.NOT_CONFIRMED) {
+            event.participantStats.notConfirmed = event.participantStats.notConfirmed + 1;
+          } else {
+            event.participantStats.going = event.participantStats.going + 1;
+            event.participantStats.participant = event.participantStats.participant + 1;
+          }
+
+          store.writeQuery({ query: FETCH_EVENT, variables: { uuid: this.event.uuid }, data: { event } });
+        },
+      });
+      if (data && data.joinEvent.metadata.cancellationToken) {
+        await addLocalUnconfirmedAnonymousParticipation(this.event, data.joinEvent.metadata.cancellationToken);
+        return this.$router.push({ name: RouteName.EVENT, params: { uuid: this.event.uuid } });
+      }
+    } catch (e) {
+      console.log(JSON.stringify(e));
+      if (e.message === 'GraphQL error: You are already a participant of this event') {
+        this.error = this.$t('This email is already registered as participant for this event') as string;
+      }
+    }
+  }
+}
+</script>