Add anonymous and remote participations

js/src/components/Event/AddressAutoComplete.vue

@@ -1,5 +1,5 @@
 <template>
-    <div>
+    <div class="address-autocomplete">
         <b-field expanded>
             <template slot="label">
                 {{ $t('Find an address') }}
@@ -245,6 +245,10 @@ export default class AddressAutoComplete extends Vue {
 }
 </script>
 <style lang="scss">
+    .address-autocomplete {
+        margin-bottom: 0.75rem;
+    }
+
     .autocomplete {
         .dropdown-menu {
             z-index: 2000;

js/src/components/Event/EventListViewCard.vue

@@ -0,0 +1,171 @@
+<docs>
+A simple card for an event
+
+```vue
+<template>
+  <div>
+    <EventListViewCard
+      :event="event"
+      />
+  </div>
+</template>
+<script>
+export default {
+  data() {
+    return {
+        event: {
+          title: 'Vue Styleguidist first meetup: learn the basics!',
+          id: 5,
+          uuid: 'some uuid',
+          beginsOn: new Date(),
+          organizerActor: {
+            preferredUsername: 'tcit',
+            name: 'Some Random Dude',
+            domain: null,
+            id: 4,
+            displayName() {
+              return 'Some random dude'
+            }
+          },
+          options: {
+            maximumAttendeeCapacity: 4
+          },
+          participantStats: {
+            approved: 1,
+            notApproved: 2
+          }
+        }
+      }
+    }
+  }
+}
+</script>
+```
+</docs>
+
+<template>
+  <article class="box">
+    <div class="columns">
+      <div class="content column">
+        <div class="title-wrapper">
+          <div class="date-component">
+            <date-calendar-icon :date="event.beginsOn" />
+          </div>
+          <router-link :to="{ name: RouteName.EVENT, params: { uuid: event.uuid } }"><h2 class="title">{{ event.title }}</h2></router-link>
+        </div>
+        <div class="participation-actor has-text-grey">
+          <span v-if="event.physicalAddress && event.physicalAddress.locality">{{ event.physicalAddress.locality }}</span>
+          <span>
+            <span>{{ $t('Organized by {name}', { name: event.organizerActor.displayName() } ) }}</span>
+          </span>
+        </div>
+        <div class="columns">
+          <span class="column is-narrow">
+            <b-icon icon="earth" v-if="event.visibility === EventVisibility.PUBLIC" />
+            <b-icon icon="lock-open" v-if="event.visibility === EventVisibility.UNLISTED" />
+            <b-icon icon="lock" v-if="event.visibility === EventVisibility.PRIVATE" />
+          </span>
+          <span class="column is-narrow participant-stats">
+            <span v-if="event.options.maximumAttendeeCapacity !== 0">
+              {{ $t('{approved} / {total} seats', {approved: event.participantStats.participant, total: event.options.maximumAttendeeCapacity }) }}
+            </span>
+            <span v-else>
+              {{ $tc('{count} participants', event.participantStats.participant, { count: event.participantStats.participant })}}
+            </span>
+          </span>
+        </div>
+      </div>
+    </div>
+    </article>
+</template>
+
+<script lang="ts">
+import { IParticipant, ParticipantRole, EventVisibility, IEventCardOptions } from '@/types/event.model';
+import { Component, Prop } from 'vue-property-decorator';
+import DateCalendarIcon from '@/components/Event/DateCalendarIcon.vue';
+import { IPerson } from '@/types/actor';
+import { mixins } from 'vue-class-component';
+import ActorMixin from '@/mixins/actor';
+import { CURRENT_ACTOR_CLIENT } from '@/graphql/actor';
+import EventMixin from '@/mixins/event';
+import { RouteName } from '@/router';
+import { changeIdentity } from '@/utils/auth';
+import { Route } from 'vue-router';
+
+const defaultOptions: IEventCardOptions = {
+  hideDate: true,
+  loggedPerson: false,
+  hideDetails: false,
+  organizerActor: null,
+};
+
+@Component({
+  components: {
+    DateCalendarIcon,
+  },
+  apollo: {
+    currentActor: {
+      query: CURRENT_ACTOR_CLIENT,
+    },
+  },
+})
+export default class EventListViewCard extends mixins(ActorMixin, EventMixin) {
+  /**
+   * The participation associated
+   */
+  @Prop({ required: true }) event!: IParticipant;
+  /**
+   * Options are merged with default options
+   */
+  @Prop({ required: false, default: () => defaultOptions }) options!: IEventCardOptions;
+
+  currentActor!: IPerson;
+
+  ParticipantRole = ParticipantRole;
+  EventVisibility = EventVisibility;
+  RouteName = RouteName;
+
+}
+</script>
+
+<style lang="scss" scoped>
+  @import "../../variables";
+
+  article.box {
+    div.content {
+      padding: 5px;
+
+      .participation-actor span, .participant-stats span {
+        padding: 0 5px;
+
+        button {
+          height: auto;
+          padding-top: 0;
+        }
+      }
+
+      div.title-wrapper {
+        display: flex;
+        align-items: center;
+
+        div.date-component {
+          flex: 0;
+          margin-right: 16px;
+        }
+
+        .title {
+          display: -webkit-box;
+          -webkit-line-clamp: 1;
+          -webkit-box-orient: vertical;
+          overflow: hidden;
+          font-weight: 400;
+          line-height: 1em;
+          font-size: 1.6em;
+          padding-bottom: 5px;
+          margin: auto 0;
+        }
+      }
+    }
+  }
+
+</style>

js/src/components/Event/ParticipationButton.vue

@@ -25,7 +25,7 @@ A button to set your participation
 <template>
     <div class="participation-button">
         <b-dropdown aria-role="list" position="is-bottom-left" v-if="participation && participation.role === ParticipantRole.PARTICIPANT">
-            <button class="button is-success" type="button" slot="trigger">
+            <button class="button is-success is-large" type="button" slot="trigger">
                 <b-icon icon="check" />
                 <template>
                     <span>{{ $t('I participate') }}</span>
@@ -33,10 +33,6 @@ A button to set your participation
                 <b-icon icon="menu-down" />
             </button>
 
-            <!--                <b-dropdown-item :value="false" aria-role="listitem">-->
-            <!--                  {{ $t('Change my identity…')}}-->
-            <!--                </b-dropdown-item>-->
-
             <b-dropdown-item :value="false" aria-role="listitem" @click="confirmLeave" class="has-text-danger">
                 {{ $t('Cancel my participation…')}}
             </b-dropdown-item>
@@ -44,7 +40,7 @@ A button to set your participation
 
         <div v-else-if="participation && participation.role === ParticipantRole.NOT_APPROVED">
             <b-dropdown aria-role="list" position="is-bottom-left" class="dropdown-disabled">
-                <button class="button is-success" type="button" slot="trigger">
+                <button class="button is-success is-large" type="button" slot="trigger">
                     <b-icon icon="timer-sand-empty" />
                     <template>
                         <span>{{ $t('I participate') }}</span>
@@ -68,8 +64,8 @@ A button to set your participation
             <span>{{ $t('Unfortunately, your participation request was rejected by the organizers.')}}</span>
         </div>
 
-        <b-dropdown aria-role="list" position="is-bottom-left" v-if="!participation">
-            <button class="button is-primary" type="button" slot="trigger">
+        <b-dropdown aria-role="list" position="is-bottom-left" v-else-if="!participation && currentActor.id">
+            <button class="button is-primary is-large" type="button" slot="trigger">
                 <template>
                     <span>{{ $t('Participate') }}</span>
                 </template>
@@ -93,22 +89,29 @@ A button to set your participation
                 {{ $t('with another identity…')}}
             </b-dropdown-item>
         </b-dropdown>
+        <b-button tag="router-link" :to="{ name: RouteName.EVENT_PARTICIPATE_LOGGED_OUT, params: { uuid: event.uuid } }" v-else-if="!participation && hasAnonymousParticipationMethods" type="is-primary" size="is-large" native-type="button">{{ $t('Participate') }}</b-button>
+        <b-button tag="router-link" :to="{ name: RouteName.EVENT_PARTICIPATE_WITH_ACCOUNT, params: { uuid: event.uuid } }" v-else-if="!currentActor.id" type="is-primary" size="is-large" native-type="button">{{ $t('Participate') }}</b-button>
     </div>
 </template>
 
 <script lang="ts">
 import { Component, Prop, Vue } from 'vue-property-decorator';
-import { IParticipant, ParticipantRole } from '@/types/event.model';
+import { EventModel, IEvent, IParticipant, ParticipantRole } from '@/types/event.model';
 import { IPerson, Person } from '@/types/actor';
-import { IDENTITIES } from '@/graphql/actor';
+import { CURRENT_ACTOR_CLIENT, IDENTITIES } from '@/graphql/actor';
 import { CURRENT_USER_CLIENT } from '@/graphql/user';
-import { ICurrentUser } from '@/types/current-user.model';
+import { CONFIG } from '@/graphql/config';
+import { IConfig } from '@/types/config.model';
+import { RouteName } from '@/router';
+import { FETCH_EVENT } from '@/graphql/event';
 
 @Component({
   apollo: {
     currentUser: {
       query: CURRENT_USER_CLIENT,
     },
+    currentActor: CURRENT_ACTOR_CLIENT,
+    config: CONFIG,
     identities: {
       query: IDENTITIES,
       update: ({ identities }) => identities ? identities.map(identity => new Person(identity)) : [],
@@ -120,11 +123,13 @@ import { ICurrentUser } from '@/types/current-user.model';
 })
 export default class ParticipationButton extends Vue {
   @Prop({ required: true }) participation!: IParticipant;
+  @Prop({ required: true }) event!: IEvent;
   @Prop({ required: true }) currentActor!: IPerson;
 
   ParticipantRole = ParticipantRole;
-  currentUser!: ICurrentUser;
   identities: IPerson[] = [];
+  config!: IConfig;
+  RouteName = RouteName;
 
   joinEvent(actor: IPerson) {
     this.$emit('joinEvent', actor);
@@ -138,10 +143,13 @@ export default class ParticipationButton extends Vue {
     this.$emit('confirmLeave');
   }
 
+  get hasAnonymousParticipationMethods(): boolean {
+    return this.event.options.anonymousParticipation;
+  }
 }
 </script>
 
-<style lang="scss">
+<style lang="scss" scoped>
     .participation-button {
         .dropdown {
             display: flex;
@@ -151,9 +159,11 @@ export default class ParticipationButton extends Vue {
                 opacity: 0.5;
             }
         }
+    }
 
-        button {
-            font-size: 1.5rem;
+    .anonymousParticipationModal {
+        /deep/ .animation-content {
+            z-index: 1;
         }
     }
 </style>

js/src/components/Footer.vue

@@ -4,6 +4,7 @@
         <img src="../assets/footer.png" :alt="$t('World map')" />
         <ul>
             <li><a href="https://joinmobilizon.org">{{ $t('About') }}</a></li>
+            <li><router-link :to="{ name: RouteName.TERMS }">{{ $t('Terms') }}</router-link></li>
             <li><a href="https://framagit.org/framasoft/mobilizon/blob/master/LICENSE">{{ $t('License') }}</a></li>
         </ul>
         <div class="content has-text-centered">
@@ -14,6 +15,7 @@
 <script lang="ts">
 import { Component, Vue } from 'vue-property-decorator';
 import Logo from './Logo.vue';
+import { RouteName } from '@/router';
 
 @Component({
   components: {
@@ -21,6 +23,7 @@ import Logo from './Logo.vue';
   },
 })
 export default class Footer extends Vue {
+  RouteName = RouteName;
 }
 </script>
 <style lang="scss" scoped>

js/src/components/Participation/ConfirmParticipation.vue

@@ -0,0 +1,59 @@
+<template>
+    <section class="container">
+        <h1 class="title" v-if="loading">
+            {{ $t('Your participation is being validated') }}
+        </h1>
+        <div v-else>
+            <div v-if="failed">
+                <b-message :title="$t('Error while validating participation')" type="is-danger">
+                    {{ $t('Either the participation has already been validated, either the validation token is incorrect.') }}
+                </b-message>
+            </div>
+            <h1 class="title" v-else>
+                {{ $t('Your participation has been validated') }}
+            </h1>
+        </div>
+    </section>
+</template>
+
+<script lang="ts">
+import { Component, Prop, Vue } from 'vue-property-decorator';
+import { RouteName } from '@/router';
+import { IParticipant } from '@/types/event.model';
+import { CONFIRM_PARTICIPATION } from '@/graphql/event';
+import { confirmLocalAnonymousParticipation } from '@/services/AnonymousParticipationStorage';
+
+@Component
+export default class ConfirmParticipation extends Vue {
+  @Prop({ type: String, required: true }) token!: string;
+
+  loading = true;
+  failed = false;
+
+  async created() {
+    await this.validateAction();
+  }
+
+  async validateAction() {
+    try {
+      const { data } = await this.$apollo.mutate<{ confirmParticipation: IParticipant }>({
+        mutation: CONFIRM_PARTICIPATION,
+        variables: {
+          token: this.token,
+        },
+      });
+
+      if (data) {
+        const { confirmParticipation: participation } = data;
+        await confirmLocalAnonymousParticipation(participation.event.uuid);
+        await this.$router.replace({ name: RouteName.EVENT, params: { uuid: data.confirmParticipation.event.uuid } } );
+      }
+    } catch (err) {
+      console.error(err);
+      this.failed = true;
+    } finally {
+      this.loading = false;
+    }
+  }
+}
+</script>

js/src/components/Participation/ParticipationWithAccount.vue

@@ -0,0 +1,82 @@
+<template>
+    <section class="section container hero is-fullheight">
+        <div class="hero-body">
+            <div class="container">
+                <div class="columns">
+                    <div class="column">
+                        <b-button type="is-primary" size="is-medium" tag="router-link" :to="{ name: RouteName.LOGIN }">{{ $t('Login on {instance}', { instance: host }) }}</b-button>
+                    </div>
+                    <vertical-divider :content="$t('Or')" />
+                    <div class="column">
+                        <h3 class="subtitle">{{ $t('I have an account on another Mobilizon instance.')}}</h3>
+                        <p>{{ $t('Other software may also support this.') }}</p>
+                        <p>{{ $t('We will redirect you to your instance in order to interact with this event') }}</p>
+                        <form @submit.prevent="redirectToInstance">
+                            <b-field :label="$t('Your federated identity')">
+                            <b-field>
+                                <b-input
+                                        expanded
+                                        autocapitalize="none" autocorrect="off"
+                                        v-model="remoteActorAddress"
+                                        :placeholder="$t('profile@instance')">
+                                </b-input>
+                                <p class="control">
+                                    <button class="button is-primary" type="submit">{{ $t('Go') }}</button>
+                                </p>
+                            </b-field>
+                            </b-field>
+                        </form>
+                    </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 VerticalDivider from '@/components/Utils/VerticalDivider.vue';
+
+@Component({
+  components: { VerticalDivider },
+})
+export default class ParticipationWithAccount extends Vue {
+  @Prop({ type: String, required: true }) uuid!: string;
+  remoteActorAddress: string = '';
+  RouteName = RouteName;
+
+  get host() {
+    return window.location.hostname;
+  }
+
+  get uri(): string {
+    return `${window.location.origin}${this.$router.resolve({ name: RouteName.EVENT, params: { uuid: this.uuid } }).href}`;
+  }
+
+  async redirectToInstance() {
+    let res;
+    const [_, host] = res = this.remoteActorAddress.split('@', 2);
+    const remoteInteractionURI = await this.webFingerFetch(host, this.remoteActorAddress);
+    window.open(remoteInteractionURI);
+  }
+
+  private async webFingerFetch(hostname: string, identity: string): Promise<string> {
+    const data = await ((await fetch(`http://${hostname}/.well-known/webfinger?resource=acct:${identity}`)).json());
+    if (data && Array.isArray(data.links)) {
+      const link: { template: string } = data.links.find((link: any) => {
+        return link && typeof link.template === 'string' && link.rel === 'http://ostatus.org/schema/1.0/subscribe';
+      });
+
+      if (link && link.template.includes('{uri}')) {
+        return link.template.replace('{uri}', encodeURIComponent(this.uri));
+      }
+    }
+    throw new Error('No interaction path found in webfinger data');
+  }
+}
+</script>

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>

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>

js/src/components/Utils/VerticalDivider.vue

@@ -0,0 +1,22 @@
+<template>
+    <div class="is-divider-vertical" :data-content="dataContent"></div>
+</template>
+<script lang="ts">
+import { Component, Prop, Vue } from 'vue-property-decorator';
+
+@Component
+export default class VerticalDivider extends Vue {
+  @Prop({ default: 'Or' }) content;
+
+  get dataContent() {
+    return this.content.toLocaleUpperCase();
+  }
+}
+</script>
+<style lang="scss" scoped>
+    @import "@/variables.scss";
+
+    .is-divider-vertical[data-content]::after {
+        background-color: $body-background-color;
+    }
+</style>