Improve anonymous participation and confirmation

Signed-off-by: Thomas Citharel <tcit@tcit.fr>

js/src/components/Participation/ConfirmParticipation.vue

@@ -1,33 +1,35 @@
 <template>
   <section class="section container">
-    <h1 class="title" v-if="loading">{{ $t("Your participation is being validated") }}</h1>
+    <h1 class="title" v-if="loading">{{ $t("Your participation request is being validated") }}</h1>
     <div v-else>
       <div v-if="failed">
-        <b-message :title="$t('Error while validating participation')" type="is-danger">
+        <b-message :title="$t('Error while validating participation request')" type="is-danger">
           {{
             $t(
-              "Either the participation has already been validated, either the validation token is incorrect."
+              "Either the participation request has already been validated, either the validation token is incorrect."
             )
           }}
         </b-message>
       </div>
       <div v-else>
-        <h1 class="title">{{ $t("Your participation has been validated") }}</h1>
+        <h1 class="title">{{ $t("Your participation request has been validated") }}</h1>
-        <form @submit.prevent="askToSaveParticipation">
+        <p class="content" v-if="participation.event.joinOptions == EventJoinOptions.RESTRICTED">
-          <b-field>
+          {{ $t("Your participation still has to be approved by the organisers.") }}
-            <b-checkbox v-model="saveParticipation">
-              <b>{{ $t("Remember my participation in this browser") }}</b>
-              <p>
-                {{
-                  $t(
-                    "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."
-                  )
-                }}
         </p>
-            </b-checkbox>
+        <div class="columns has-text-centered">
-          </b-field>
+          <div class="column">
-          <b-button native-type="submit" type="is-primary">{{ $t("Visit event page") }}</b-button>
+            <router-link
-        </form>
+              native-type="button"
+              tag="a"
+              class="button is-primary is-large"
+              :to="{
+                name: RouteName.EVENT,
+                params: { uuid: this.participation.event.uuid },
+              }"
+              >{{ $t("Go to the event page") }}</router-link
+            >
+          </div>
+        </div>
       </div>
     </div>
   </section>
@@ -35,11 +37,9 @@
 
 <script lang="ts">
 import { Component, Prop, Vue } from "vue-property-decorator";
-import { SnackbarProgrammatic as Snackbar } from "buefy";
 import RouteName from "../../router/name";
-import { IParticipant } from "../../types/event.model";
+import { EventJoinOptions, IParticipant } from "../../types/event.model";
 import { CONFIRM_PARTICIPATION } from "../../graphql/event";
-import { confirmLocalAnonymousParticipation } from "../../services/AnonymousParticipationStorage";
 
 @Component
 export default class ConfirmParticipation extends Vue {
@@ -51,7 +51,9 @@ export default class ConfirmParticipation extends Vue {
 
   participation!: IParticipant;
 
-  saveParticipation = true;
+  EventJoinOptions = EventJoinOptions;
+
+  RouteName = RouteName;
 
   async created(): Promise<void> {
     await this.validateAction();
@@ -74,30 +76,10 @@ export default class ConfirmParticipation extends Vue {
       }
     } catch (err) {
       console.error(err);
-
-      Snackbar.open({ message: err.message, type: "is-danger", position: "is-bottom" });
       this.failed = true;
     } finally {
       this.loading = false;
     }
   }
-
-  askToSaveParticipation(): void {
-    if (this.saveParticipation) {
-      this.saveParticipationInBrowser();
-    }
-    this.forwardToEventPage();
-  }
-
-  async saveParticipationInBrowser(): Promise<void> {
-    await confirmLocalAnonymousParticipation(this.participation.event.uuid);
-  }
-
-  async forwardToEventPage(): Promise<void> {
-    await this.$router.replace({
-      name: RouteName.EVENT,
-      params: { uuid: this.participation.event.uuid },
-    });
-  }
 }
 </script>

js/src/components/Participation/ParticipationWithoutAccount.vue

@@ -2,7 +2,7 @@
   <section class="container section hero is-fullheight">
     <div class="hero-body" v-if="event">
       <div class="container">
-        <form @submit.prevent="joinEvent">
+        <form @submit.prevent="joinEvent" v-if="!formSent">
           <p>
             {{
               $t(
@@ -18,11 +18,11 @@
             }}
           </b-message>
           <b-message type="is-danger" v-if="error">{{ error }}</b-message>
-          <b-field :label="$t('Email')">
+          <b-field :label="$t('Email address')">
             <b-input
               type="email"
               v-model="anonymousParticipation.email"
-              placeholder="Your email"
+              :placeholder="$t('Your email')"
               required
             ></b-input>
           </b-field>
@@ -42,13 +42,32 @@
               :required="event.joinOptions === EventJoinOptions.RESTRICTED"
             ></b-input>
           </b-field>
-          <b-button type="is-primary" native-type="submit">{{ $t("Send email") }}</b-button>
+          <b-field>
+            <b-checkbox v-model="anonymousParticipation.saveParticipation">
+              <b>{{ $t("Remember my participation in this browser") }}</b>
+              <p>
+                {{
+                  $t(
+                    "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."
+                  )
+                }}
+              </p>
+            </b-checkbox>
+          </b-field>
+          <b-button :disabled="sendingForm" type="is-primary" native-type="submit">{{
+            $t("Send email")
+          }}</b-button>
           <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 v-else>
+          <h1 class="title">{{ $t("Request for participation confirmation sent") }}</h1>
+          <p class="content">{{ $t("Check your inbox (and your junk mail folder).") }}</p>
+          <p class="content">{{ $t("You may now close this window.") }}</p>
+        </div>
       </div>
     </div>
   </section>
@@ -89,9 +108,10 @@ import RouteName from "../../router/name";
 export default class ParticipationWithoutAccount extends Vue {
   @Prop({ type: String, required: true }) uuid!: string;
 
-  anonymousParticipation: { email: string; message: string } = {
+  anonymousParticipation: { email: string; message: string; saveParticipation: boolean } = {
     email: "",
     message: "",
+    saveParticipation: true,
   };
 
   event!: IEvent;
@@ -100,10 +120,15 @@ export default class ParticipationWithoutAccount extends Vue {
 
   error: string | boolean = false;
 
+  formSent = false;
+
+  sendingForm = false;
+
   EventJoinOptions = EventJoinOptions;
 
-  async joinEvent(): Promise<Route> {
+  async joinEvent(): Promise<void> {
     this.error = false;
+    this.sendingForm = true;
     try {
       const { data } = await this.$apollo.mutate<{ joinEvent: IParticipant }>({
         mutation: JOIN_EVENT,
@@ -150,7 +175,11 @@ export default class ParticipationWithoutAccount extends Vue {
         },
       });
       console.log("finished with store", data);
-      if (data && data.joinEvent.metadata.cancellationToken) {
+      if (
+        data &&
+        data.joinEvent.metadata.cancellationToken &&
+        this.anonymousParticipation.saveParticipation
+      ) {
         await addLocalUnconfirmedAnonymousParticipation(
           this.event,
           data.joinEvent.metadata.cancellationToken
@@ -160,10 +189,8 @@ export default class ParticipationWithoutAccount extends Vue {
     } catch (e) {
       this.error = e.message;
     }
-    return this.$router.push({
+    this.sendingForm = false;
-      name: RouteName.EVENT,
+    this.formSent = true;
-      params: { uuid: this.event.uuid },
-    });
   }
 }
 </script>

js/src/graphql/event.ts

@@ -472,7 +472,9 @@ export const CONFIRM_PARTICIPATION = gql`
         id
       }
       event {
+        id
         uuid
+        joinOptions
       }
       role
     }

js/src/i18n/en_US.json

@@ -111,13 +111,13 @@
   "Either on the {instance} instance or on another instance.": "Either on the {instance} instance or on another instance.",
   "Either the account is already validated, either the validation token is incorrect.": "Either the account is already validated, either the validation token is incorrect.",
   "Either the email has already been changed, either the validation token is incorrect.": "Either the email has already been changed, either the validation token is incorrect.",
-  "Either the participation has already been validated, either the validation token is incorrect.": "Either the participation has already been validated, either the validation token is incorrect.",
+  "Either the participation request has already been validated, either the validation token is incorrect.": "Either the participation request has already been validated, either the validation token is incorrect.",
   "Email": "Email",
   "Ends on…": "Ends on…",
   "Enter the link URL": "Enter the link URL",
   "Error while changing email": "Error while changing email",
   "Error while validating account": "Error while validating account",
-  "Error while validating participation": "Error while validating participation",
+  "Error while validating participation request": "Error while validating participation request",
   "Event already passed": "Event already passed",
   "Event cancelled": "Event cancelled",
   "Event creation": "Event creation",
@@ -419,8 +419,8 @@
   "Your participation has been confirmed": "Your participation has been confirmed",
   "Your participation has been rejected": "Your participation has been rejected",
   "Your participation has been requested": "Your participation has been requested",
-  "Your participation has been validated": "Your participation has been validated",
+  "Your participation request has been validated": "Your participation has been validated",
-  "Your participation is being validated": "Your participation is being validated",
+  "Your participation request is being validated": "Your participation is being validated",
   "Your participation status has been changed": "Your participation status has been changed",
   "[This comment has been deleted]": "[This comment has been deleted]",
   "[deleted]": "[deleted]",
@@ -767,7 +767,6 @@
   "<b>{contact}</b> will be displayed as contact.": "<b>{contact}</b> will be displayed as contact.|<b>{contact}</b> will be displayed as contacts.",
   "and {number} groups": "and {number} groups",
   "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.": "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.",
-  "Visit event page": "Visit event page",
   "Remember my participation in this browser": "Remember my participation in this browser",
   "Organized by": "Organized by",
   "Report this group": "Report this group",
@@ -793,5 +792,11 @@
   "Instance languages": "Instance languages",
   "Main languages you/your moderators speak": "Main languages you/your moderators speak",
   "Select languages": "Select languages",
-  "No languages found": "No languages found"
+  "No languages found": "No languages found",
+  "Your participation still has to be approved by the organisers.": "Your participation still has to be approved by the organisers.",
+  "Your email": "Your email",
+  "Go to the event page": "Go to the event page",
+  "Request for participation confirmation sent": "Request for participation confirmation sent",
+  "Check your inbox (and your junk mail folder).": "Check your inbox (and your junk mail folder).",
+  "You may now close this window.": "You may now close this window."
 }

js/src/i18n/fr_FR.json

@@ -205,7 +205,7 @@
   "Either on the {instance} instance or on another instance.": "Sur l'instance {instance} ou bien sur une autre instance.",
   "Either the account is already validated, either the validation token is incorrect.": "Soit le compte est déjà validé, soit le jeton de validation est incorrect.",
   "Either the email has already been changed, either the validation token is incorrect.": "Soit l'adresse email a déjà été modifiée, soit le jeton de validation est incorrect.",
-  "Either the participation has already been validated, either the validation token is incorrect.": "Soit la participation a déjà été validée, soit le jeton de validation est incorrect.",
+  "Either the participation request has already been validated, either the validation token is incorrect.": "Soit la demande de participation a déjà été validée, soit le jeton de validation est incorrect.",
   "Email": "Email",
   "Email address": "Adresse email",
   "Email notifications": "Notifications par email",
@@ -223,7 +223,7 @@
   "Error while reporting group {groupTitle}": "Erreur lors du signalement du groupe {groupTitle}",
   "Error while saving report.": "Erreur lors de l'enregistrement du signalement.",
   "Error while validating account": "Erreur lors de la validation du compte",
-  "Error while validating participation": "Erreur lors de la validation de la participation",
+  "Error while validating participation request": "Erreur lors de la validation de la demande de participation",
   "Event": "Événement",
   "Event already passed": "Événement déjà passé",
   "Event cancelled": "Événement annulé",
@@ -765,8 +765,8 @@
   "Your participation has been confirmed": "Votre participation a été confirmée",
   "Your participation has been rejected": "Votre participation a été rejettée",
   "Your participation has been requested": "Votre participation a été demandée",
-  "Your participation has been validated": "Votre participation a été validée",
+  "Your participation request has been validated": "Votre demande de participation a été validée",
-  "Your participation is being validated": "Votre participation est en cours de validation",
+  "Your participation request is being validated": "Votre demande de participation est en cours de validation",
   "Your participation status has been changed": "Le statut de votre participation a été mis à jour",
   "Your profile will be shown as contact.": "Votre profil sera affiché en tant que contact.",
   "Your timezone is currently set to {timezone}.": "Votre fuseau horaire est actuellement défini à {timezone}.",
@@ -835,5 +835,11 @@
   "Instance languages": "Langues de l'instance",
   "Main languages you/your moderators speak": "Principales langues parlées par vous / vos modérateurs",
   "Select languages": "Choisissez une langue",
-  "No languages found": "Aucune langue trouvée"
+  "No languages found": "Aucune langue trouvée",
+  "Your participation still has to be approved by the organisers.": "Votre participation doit encore être approuvée par les organisateur·ices.",
+  "Your email": "Votre adresse e-mail",
+  "Go to the event page": "Aller à la page de l'événement",
+  "Request for participation confirmation sent": "Demande de confirmation de participation envoyée",
+  "Check your inbox (and your junk mail folder).": "Vérifiez votre boîte de réception (et votre dossier des indésirables)",
+  "You may now close this window.": "Vous pouvez maintenant fermer cette fenêtre."
 }

js/src/views/Event/Participants.vue

@@ -107,6 +107,9 @@
           <b-tag v-else-if="props.row.role === ParticipantRole.PARTICIPANT">
             {{ $t("Participant") }}
           </b-tag>
+          <b-tag v-else-if="props.row.role === ParticipantRole.NOT_CONFIRMED">
+            {{ $t("Not confirmed") }}
+          </b-tag>
           <b-tag type="is-warning" v-else-if="props.row.role === ParticipantRole.NOT_APPROVED">
             {{ $t("Not approved") }}
           </b-tag>

lib/graphql/api/participations.ex

@@ -8,6 +8,7 @@ defmodule Mobilizon.GraphQL.API.Participations do
   alias Mobilizon.Events.{Event, Participant}
   alias Mobilizon.Federation.ActivityPub
   alias Mobilizon.Federation.ActivityPub.Activity
+  alias Mobilizon.Service.Notifications.Scheduler
   alias Mobilizon.Web.Email.Participation
 
   @spec join(Event.t(), Actor.t(), map()) :: {:ok, Activity.t(), Participant.t()}
@@ -39,6 +40,7 @@ defmodule Mobilizon.GraphQL.API.Participations do
   def update(%Participant{} = participation, %Actor{} = _moderator, :not_approved) do
     with {:ok, %Participant{} = participant} <-
            Events.update_participant(participation, %{role: :not_approved}) do
+      Scheduler.pending_participation_notification(participation.event)
       {:ok, nil, participant}
     end
   end