Ask to save anonymous participation in browser after email confirmation

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

js/src/components/Participation/ConfirmParticipation.vue

@@ -1,5 +1,5 @@
 <template>
-  <section class="container">
+  <section class="section container">
     <h1 class="title" v-if="loading">{{ $t("Your participation is being validated") }}</h1>
     <div v-else>
       <div v-if="failed">
@@ -11,7 +11,24 @@
           }}
         </b-message>
       </div>
-      <h1 class="title" v-else>{{ $t("Your participation has been validated") }}</h1>
+      <div v-else>
+        <h1 class="title">{{ $t("Your participation has been validated") }}</h1>
+        <form @submit.prevent="askToSaveParticipation">
+          <b-field>
+            <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>
+          </b-field>
+          <b-button native-type="submit" type="is-primary">{{ $t("Visit event page") }}</b-button>
+        </form>
+      </div>
     </div>
   </section>
 </template>
@@ -32,6 +49,10 @@ export default class ConfirmParticipation extends Vue {
 
   failed = false;
 
+  participation!: IParticipant;
+
+  saveParticipation = true;
+
   async created(): Promise<void> {
     await this.validateAction();
   }
@@ -49,11 +70,7 @@ export default class ConfirmParticipation extends Vue {
 
       if (data) {
         const { confirmParticipation: participation } = data;
-        await confirmLocalAnonymousParticipation(participation.event.uuid);
-        await this.$router.replace({
-          name: RouteName.EVENT,
-          params: { uuid: data.confirmParticipation.event.uuid },
-        });
+        this.participation = participation;
       }
     } catch (err) {
       console.error(err);
@@ -64,5 +81,23 @@ export default class ConfirmParticipation extends Vue {
       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>