Introduce group basic federation, event new page and notifications

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

js/src/components/Account/ActorAutoComplete.vue

@@ -0,0 +1,109 @@
+<template>
+  <b-autocomplete
+    :data="baseData"
+    :placeholder="$t('Actor')"
+    v-model="name"
+    field="preferredUsername"
+    :loading="$apollo.loading"
+    check-infinite-scroll
+    @typing="getAsyncData"
+    @select="handleSelect"
+    @infinite-scroll="getAsyncData"
+  >
+    <template slot-scope="props">
+      <div class="media">
+        <div class="media-left">
+          <img width="32" :src="props.option.avatar.url" v-if="props.option.avatar" alt="" />
+          <b-icon v-else icon="account-circle" />
+        </div>
+        <div class="media-content">
+          <span v-if="props.option.name">
+            {{ props.option.name }}
+            <br />
+            <small>{{ `@${props.option.preferredUsername}` }}</small>
+            <small v-if="props.option.domain">{{ `@${props.option.domain}` }}</small>
+          </span>
+          <span v-else>
+            {{ `@${props.option.preferredUsername}` }}
+          </span>
+        </div>
+      </div>
+    </template>
+    <template slot="footer">
+      <span class="has-text-grey" v-show="page > totalPages">
+        Thats it! No more movies found.
+      </span>
+    </template>
+  </b-autocomplete>
+</template>
+<script lang="ts">
+import { Component, Model, Vue, Watch } from "vue-property-decorator";
+import { debounce } from "lodash";
+import { IPerson } from "@/types/actor";
+import { SEARCH_PERSONS } from "@/graphql/search";
+import { Paginate } from "@/types/paginate";
+
+const SEARCH_PERSON_LIMIT = 10;
+
+@Component
+export default class ActorAutoComplete extends Vue {
+  @Model("change", { type: Object }) readonly defaultSelected!: IPerson | null;
+
+  baseData: IPerson[] = [];
+
+  selected: IPerson | null = this.defaultSelected;
+
+  name: string = this.defaultSelected ? this.defaultSelected.preferredUsername : "";
+
+  page = 1;
+
+  totalPages = 1;
+
+  mounted() {
+    this.selected = this.defaultSelected;
+  }
+
+  data() {
+    return {
+      getAsyncData: debounce(this.doGetAsyncData, 500),
+    };
+  }
+
+  @Watch("defaultSelected")
+  updateDefaultSelected(defaultSelected: IPerson) {
+    console.log("update defaultSelected", defaultSelected);
+    this.selected = defaultSelected;
+    this.name = defaultSelected.preferredUsername;
+  }
+
+  handleSelect(selected: IPerson) {
+    this.selected = selected;
+    this.$emit("change", selected);
+  }
+
+  async doGetAsyncData(name: string) {
+    this.baseData = [];
+    if (this.name !== name) {
+      this.name = name;
+      this.page = 1;
+    }
+    if (!name.length) {
+      this.page = 1;
+      this.totalPages = 1;
+      return;
+    }
+    const {
+      data: { searchPersons },
+    } = await this.$apollo.query<{ searchPersons: Paginate<IPerson> }>({
+      query: SEARCH_PERSONS,
+      variables: {
+        searchText: this.name,
+        page: this.page,
+        limit: SEARCH_PERSON_LIMIT,
+      },
+    });
+    this.totalPages = Math.ceil(searchPersons.total / SEARCH_PERSON_LIMIT);
+    this.baseData.push(...searchPersons.elements);
+  }
+}
+</script>

js/src/components/Account/ActorCard.vue

@@ -0,0 +1,152 @@
+<template>
+  <div class="clickable">
+    <div class="media" style="align-items: top;">
+      <div class="media-left">
+        <figure class="image is-32x32" v-if="actor.avatar">
+          <img class="is-rounded" :src="actor.avatar.url" alt="" />
+        </figure>
+        <b-icon v-else size="is-medium" icon="account-circle" />
+      </div>
+
+      <div class="media-content">
+        <p>
+          {{ actor.name || `@${usernameWithDomain(actor)}` }}
+        </p>
+        <p class="has-text-grey" v-if="actor.name">@{{ usernameWithDomain(actor) }}</p>
+        <p v-if="full">{{ actor.summary }}</p>
+      </div>
+    </div>
+  </div>
+</template>
+<script lang="ts">
+import { Component, Vue, Prop } from "vue-property-decorator";
+import { IActor, usernameWithDomain } from "../../types/actor";
+
+@Component
+export default class ActorCard extends Vue {
+  @Prop({ required: true, type: Object }) actor!: IActor;
+
+  @Prop({ required: false, type: Boolean, default: false }) full!: boolean;
+
+  @Prop({ required: false, type: Boolean, default: true }) popover!: boolean;
+
+  usernameWithDomain = usernameWithDomain;
+}
+</script>
+<style lang="scss" scoped>
+.clickable {
+  cursor: pointer;
+}
+</style>
+
+<style lang="scss">
+.tooltip {
+  display: block !important;
+  z-index: 10000;
+
+  .tooltip-inner {
+    background: black;
+    color: white;
+    border-radius: 16px;
+    padding: 5px 10px 4px;
+  }
+
+  .tooltip-arrow {
+    width: 0;
+    height: 0;
+    border-style: solid;
+    position: absolute;
+    margin: 5px;
+    border-color: black;
+    z-index: 1;
+  }
+
+  &[x-placement^="top"] {
+    margin-bottom: 5px;
+
+    .tooltip-arrow {
+      border-width: 5px 5px 0 5px;
+      border-left-color: transparent !important;
+      border-right-color: transparent !important;
+      border-bottom-color: transparent !important;
+      bottom: -5px;
+      left: calc(50% - 5px);
+      margin-top: 0;
+      margin-bottom: 0;
+    }
+  }
+
+  &[x-placement^="bottom"] {
+    margin-top: 5px;
+
+    .tooltip-arrow {
+      border-width: 0 5px 5px 5px;
+      border-left-color: transparent !important;
+      border-right-color: transparent !important;
+      border-top-color: transparent !important;
+      top: -5px;
+      left: calc(50% - 5px);
+      margin-top: 0;
+      margin-bottom: 0;
+    }
+  }
+
+  &[x-placement^="right"] {
+    margin-left: 5px;
+
+    .tooltip-arrow {
+      border-width: 5px 5px 5px 0;
+      border-left-color: transparent !important;
+      border-top-color: transparent !important;
+      border-bottom-color: transparent !important;
+      left: -5px;
+      top: calc(50% - 5px);
+      margin-left: 0;
+      margin-right: 0;
+    }
+  }
+
+  &[x-placement^="left"] {
+    margin-right: 5px;
+
+    .tooltip-arrow {
+      border-width: 5px 0 5px 5px;
+      border-top-color: transparent !important;
+      border-right-color: transparent !important;
+      border-bottom-color: transparent !important;
+      right: -5px;
+      top: calc(50% - 5px);
+      margin-left: 0;
+      margin-right: 0;
+    }
+  }
+
+  &.popover {
+    $color: #f9f9f9;
+
+    .popover-inner {
+      background: $color;
+      color: black;
+      padding: 24px;
+      border-radius: 5px;
+      box-shadow: 0 5px 30px rgba(black, 0.1);
+    }
+
+    .popover-arrow {
+      border-color: $color;
+    }
+  }
+
+  &[aria-hidden="true"] {
+    visibility: hidden;
+    opacity: 0;
+    transition: opacity 0.15s, visibility 0.15s;
+  }
+
+  &[aria-hidden="false"] {
+    visibility: visible;
+    opacity: 1;
+    transition: opacity 0.15s;
+  }
+}
+</style>

js/src/components/Account/ActorLink.vue

@@ -1,76 +0,0 @@
-<docs>
-A simple link to an actor, local or remote link
-
-```vue
-<template>
-    <ActorLink :actor="localActor">
-        <template>
-            <span>{{ localActor.preferredUsername }}</span>
-        </template>
-    </ActorLink>
-</template>
-<script>
-export default {
-    data() {
-        return {
-            localActor: {
-                domain: null,
-                preferredUsername: 'localActor'
-            },
-        }
-    }
-}
-</script>
-```
-
-```vue
-<template>
-    <ActorLink :actor="remoteActor">
-        <template>
-            <span>{{ remoteActor.preferredUsername }}</span>
-        </template>
-    </ActorLink>
-</template>
-<script>
-export default {
-    data() {
-        return {
-            remoteActor: {
-                domain: 'mobilizon.org',
-                url: 'https://mobilizon.org/@Framasoft',
-                preferredUsername: 'Framasoft'
-            },
-        }
-    }
-}
-</script>
-```
-
-</docs>
-
-<template>
-    <span>
-        <span v-if="actor.domain === null"
-                     :to="{name: 'Profile', params: { name: actor.preferredUsername } }"
-        >
-            <!-- @slot What to put inside the link -->
-            <slot></slot>
-        </span>
-        <a v-else :href="actor.url">
-            <!-- @slot What to put inside the link -->
-            <slot></slot>
-        </a>
-    </span>
-</template>
-<script lang="ts">
-import { Component, Prop, Vue } from 'vue-property-decorator';
-import { IActor } from '@/types/actor';
-
-@Component
-export default class ActorLink extends Vue {
-  /**
-   * The actor you want to make a link to
-   */
-  @Prop({ required: true }) actor!: IActor;
-}
-</script>

js/src/components/Account/Identities.vue

@@ -1,18 +1,19 @@
 <template>
   <section>
     <h1 class="title">
-      {{ $t('My identities') }}
+      {{ $t("My identities") }}
     </h1>
 
     <ul class="identities">
       <li v-for="identity in identities" :key="identity.id">
         <router-link
           :to="{ name: 'UpdateIdentity', params: { identityName: identity.preferredUsername } }"
-          class="media identity" v-bind:class="{ 'is-current-identity': isCurrentIdentity(identity) }"
+          class="media identity"
+          v-bind:class="{ 'is-current-identity': isCurrentIdentity(identity) }"
         >
           <div class="media-left">
             <figure class="image is-48x48" v-if="identity.avatar">
-              <img class="is-rounded" :src="identity.avatar.url">
+              <img class="is-rounded" :src="identity.avatar.url" />
             </figure>
           </div>
 
@@ -23,24 +24,24 @@
       </li>
     </ul>
 
-    <router-link :to="{ name: 'CreateIdentity' }" class="button create-identity is-primary" >
-      {{ $t('Create a new identity') }}
+    <router-link :to="{ name: 'CreateIdentity' }" class="button create-identity is-primary">
+      {{ $t("Create a new identity") }}
     </router-link>
   </section>
 </template>
 
 <script lang="ts">
-import { Component, Prop, Vue } from 'vue-property-decorator';
-import { IDENTITIES } from '@/graphql/actor';
-import { IPerson, Person } from '@/types/actor';
+import { Component, Prop, Vue } from "vue-property-decorator";
+import { IDENTITIES } from "../../graphql/actor";
+import { IPerson, Person } from "../../types/actor";
 
 @Component({
   apollo: {
     identities: {
       query: IDENTITIES,
 
-      update (result) {
-        return result.identities.map(i => new Person(i));
+      update(result) {
+        return result.identities.map((i: IPerson) => new Person(i));
       },
     },
   },
@@ -49,6 +50,7 @@ export default class Identities extends Vue {
   @Prop({ type: String }) currentIdentityName!: string;
 
   identities: Person[] = [];
+
   errors: string[] = [];
 
   isCurrentIdentity(identity: IPerson) {
@@ -58,25 +60,25 @@ export default class Identities extends Vue {
 </script>
 
 <style lang="scss" scoped>
-  .identities {
-    border-right: 1px solid grey;
+.identities {
+  border-right: 1px solid grey;
 
-    padding: 15px 0;
+  padding: 15px 0;
+}
+
+.media.identity {
+  align-items: center;
+  font-size: 1.3rem;
+  padding-bottom: 0;
+  margin-bottom: 15px;
+  color: #000;
+
+  &.is-current-identity {
+    background-color: rgba(0, 0, 0, 0.1);
   }
+}
 
-  .media.identity {
-    align-items: center;
-    font-size: 1.3rem;
-    padding-bottom: 0;
-    margin-bottom: 15px;
-    color: #000;
-
-    &.is-current-identity {
-      background-color: rgba(0, 0, 0, 0.1);
-    }
-  }
-
-  .title {
-    margin-bottom: 30px;
-  }
-</style>
+.title {
+  margin-bottom: 30px;
+}
+</style>

js/src/components/Account/ParticipantCard.vue

@@ -25,32 +25,58 @@
           </figure>
         </div>
         <div class="media-content">
-          <span ref="title">{{ actorDisplayName }}</span><br>
-          <small class="has-text-grey" v-if="participant.actor.domain">@{{ participant.actor.preferredUsername }}@{{ participant.actor.domain }}</small>
+          <span ref="title">{{ actorDisplayName }}</span
+          ><br />
+          <small class="has-text-grey" v-if="participant.actor.domain"
+            >@{{ participant.actor.preferredUsername }}@{{ participant.actor.domain }}</small
+          >
           <small class="has-text-grey" v-else>@{{ participant.actor.preferredUsername }}</small>
         </div>
       </div>
     </div>
     <footer class="card-footer">
-    <b-button v-if="[ParticipantRole.NOT_APPROVED, ParticipantRole.REJECTED].includes(participant.role)" @click="accept(participant)" type="is-success" class="card-footer-item">{{ $t('Approve') }}</b-button>
-    <b-button v-if="participant.role === ParticipantRole.NOT_APPROVED" @click="reject(participant)" type="is-danger" class="card-footer-item">{{ $t('Reject')}}</b-button>
-    <b-button v-if="participant.role === ParticipantRole.PARTICIPANT" @click="exclude(participant)" type="is-danger" class="card-footer-item">{{ $t('Exclude')}}</b-button>
-    <span v-if="participant.role === ParticipantRole.CREATOR" class="card-footer-item">{{ $t('Creator')}}</span>
-  </footer>
+      <b-button
+        v-if="[ParticipantRole.NOT_APPROVED, ParticipantRole.REJECTED].includes(participant.role)"
+        @click="accept(participant)"
+        type="is-success"
+        class="card-footer-item"
+        >{{ $t("Approve") }}</b-button
+      >
+      <b-button
+        v-if="participant.role === ParticipantRole.NOT_APPROVED"
+        @click="reject(participant)"
+        type="is-danger"
+        class="card-footer-item"
+        >{{ $t("Reject") }}</b-button
+      >
+      <b-button
+        v-if="participant.role === ParticipantRole.PARTICIPANT"
+        @click="exclude(participant)"
+        type="is-danger"
+        class="card-footer-item"
+        >{{ $t("Exclude") }}</b-button
+      >
+      <span v-if="participant.role === ParticipantRole.CREATOR" class="card-footer-item">{{
+        $t("Creator")
+      }}</span>
+    </footer>
   </article>
 </template>
 
 <script lang="ts">
-import { Component, Prop, Vue } from 'vue-property-decorator';
-import { Person } from '@/types/actor';
-import { IParticipant, ParticipantRole } from '@/types/event.model';
+import { Component, Prop, Vue } from "vue-property-decorator";
+import { Person } from "../../types/actor";
+import { IParticipant, ParticipantRole } from "../../types/event.model";
 
 @Component
 export default class ParticipantCard extends Vue {
   @Prop({ required: true }) participant!: IParticipant;
-  @Prop({ type: Function }) accept;
-  @Prop({ type: Function }) reject;
-  @Prop({ type: Function }) exclude;
+
+  @Prop({ type: Function }) accept!: Function;
+
+  @Prop({ type: Function }) reject!: Function;
+
+  @Prop({ type: Function }) exclude!: Function;
 
   ParticipantRole = ParticipantRole;
 
@@ -58,13 +84,12 @@ export default class ParticipantCard extends Vue {
     const actor = new Person(this.participant.actor);
     return actor.displayName();
   }
-
 }
 </script>
 
 <style lang="scss">
-  @import "../../variables.scss";
-  .card-footer-item {
-    height: $control-height;
-  }
+@import "../../variables.scss";
+.card-footer-item {
+  height: $control-height;
+}
 </style>

js/src/components/Account/PopoverActorCard.vue

@@ -0,0 +1,33 @@
+<template>
+  <v-popover offset="16" trigger="hover" :class="{ inline }" class="clickable">
+    <slot></slot>
+    <template slot="popover" class="popover">
+      <actor-card :full="true" :actor="actor" :popover="false" />
+    </template>
+  </v-popover>
+</template>
+<script lang="ts">
+import { Component, Vue, Prop } from "vue-property-decorator";
+import { IActor } from "../../types/actor";
+import ActorCard from "./ActorCard.vue";
+
+@Component({
+  components: {
+    ActorCard,
+  },
+})
+export default class PopoverActorCard extends Vue {
+  @Prop({ required: true, type: Object }) actor!: IActor;
+
+  @Prop({ required: false, type: Boolean, default: false }) inline!: boolean;
+}
+</script>
+
+<style lang="scss" scoped>
+.inline {
+  display: inline;
+}
+.clickable {
+  cursor: pointer;
+}
+</style>

js/src/components/Admin/Followers.vue

@@ -1,104 +1,123 @@
 <template>
-    <div>
-        <b-table
-                v-show="relayFollowers.elements.length > 0"
-                :data="relayFollowers.elements"
-                :loading="$apollo.queries.relayFollowers.loading"
-                ref="table"
-                :checked-rows.sync="checkedRows"
-                detailed
-                :show-detail-icon="false"
-                paginated
-                backend-pagination
-                :total="relayFollowers.total"
-                :per-page="perPage"
-                @page-change="onPageChange"
-                checkable
-                checkbox-position="left">
-            <template slot-scope="props">
-                <b-table-column field="actor.id" label="ID" width="40" numeric>
-                    {{ props.row.actor.id }}
-                </b-table-column>
+  <div>
+    <b-table
+      v-show="relayFollowers.elements.length > 0"
+      :data="relayFollowers.elements"
+      :loading="$apollo.queries.relayFollowers.loading"
+      ref="table"
+      :checked-rows.sync="checkedRows"
+      detailed
+      :show-detail-icon="false"
+      paginated
+      backend-pagination
+      :total="relayFollowers.total"
+      :per-page="perPage"
+      @page-change="onPageChange"
+      checkable
+      checkbox-position="left"
+    >
+      <template slot-scope="props">
+        <b-table-column field="actor.id" label="ID" width="40" numeric>{{
+          props.row.actor.id
+        }}</b-table-column>
 
-                <b-table-column field="actor.type" :label="$t('Type')" width="80">
-                    <b-icon icon="lan" v-if="isInstance(props.row.actor)" />
-                    <b-icon icon="account-circle" v-else />
-                </b-table-column>
+        <b-table-column field="actor.type" :label="$t('Type')" width="80">
+          <b-icon icon="lan" v-if="RelayMixin.isInstance(props.row.actor)" />
+          <b-icon icon="account-circle" v-else />
+        </b-table-column>
 
-                <b-table-column field="approved" :label="$t('Status')" width="100" sortable centered>
-                            <span :class="`tag ${props.row.approved ? 'is-success' : 'is-danger' }`">
-                               {{ props.row.approved ? $t('Accepted') : $t('Pending') }}
-                            </span>
-                </b-table-column>
+        <b-table-column field="approved" :label="$t('Status')" width="100" sortable centered>
+          <span :class="`tag ${props.row.approved ? 'is-success' : 'is-danger'}`">{{
+            props.row.approved ? $t("Accepted") : $t("Pending")
+          }}</span>
+        </b-table-column>
 
-                <b-table-column field="actor.domain" :label="$t('Domain')" sortable>
-                    <template>
-                        <a @click="toggle(props.row)" v-if="isInstance(props.row.actor)">
-                            {{ props.row.actor.domain }}
-                        </a>
-                        <a @click="toggle(props.row)" v-else>
-                            {{ `${props.row.actor.preferredUsername}@${props.row.actor.domain}` }}
-                        </a>
-                    </template>
-                </b-table-column>
+        <b-table-column field="actor.domain" :label="$t('Domain')" sortable>
+          <template>
+            <a @click="toggle(props.row)" v-if="RelayMixin.isInstance(props.row.actor)">{{
+              props.row.actor.domain
+            }}</a>
+            <a @click="toggle(props.row)" v-else>{{
+              `${props.row.actor.preferredUsername}@${props.row.actor.domain}`
+            }}</a>
+          </template>
+        </b-table-column>
 
-                <b-table-column field="actor.updatedAt" :label="$t('Date')" sortable>
-                    {{ props.row.updatedAt | formatDateTimeString }}
-                </b-table-column>
-            </template>
+        <b-table-column field="actor.updatedAt" :label="$t('Date')" sortable>{{
+          props.row.updatedAt | formatDateTimeString
+        }}</b-table-column>
+      </template>
 
-            <template slot="detail" slot-scope="props">
-                <article>
-                    <div class="content">
-                        <strong>{{ props.row.actor.domain }}</strong>
-                        <small>@{{ props.row.actor.preferredUsername }}</small>
-                        <small>31m</small>
-                        <br>
-                        <p v-html="props.row.actor.summary" />
-                    </div>
-                </article>
-            </template>
+      <template slot="detail" slot-scope="props">
+        <article>
+          <div class="content">
+            <strong>{{ props.row.actor.domain }}</strong>
+            <small>@{{ props.row.actor.preferredUsername }}</small>
+            <small>31m</small>
+            <br />
+            <p v-html="props.row.actor.summary" />
+          </div>
+        </article>
+      </template>
 
-            <template slot="bottom-left" v-if="checkedRows.length > 0">
-                <div class="buttons">
-                    <b-button @click="acceptRelays" type="is-success" v-if="checkedRowsHaveAtLeastOneToApprove">
-                        {{ $tc('No instance to approve|Approve instance|Approve {number} instances', checkedRows.length, { number: checkedRows.length }) }}
-                    </b-button>
-                    <b-button @click="rejectRelays" type="is-danger">
-                        {{ $tc('No instance to reject|Reject instance|Reject {number} instances', checkedRows.length, { number: checkedRows.length }) }}
-                    </b-button>
-                </div>
-            </template>
-        </b-table>
-        <b-message type="is-danger" v-if="relayFollowers.elements.length === 0">
-            {{ $t("No instance follows your instance yet.") }}
-        </b-message>
-    </div>
+      <template slot="bottom-left" v-if="checkedRows.length > 0">
+        <div class="buttons">
+          <b-button
+            @click="acceptRelays"
+            type="is-success"
+            v-if="checkedRowsHaveAtLeastOneToApprove"
+          >
+            {{
+              $tc(
+                "No instance to approve|Approve instance|Approve {number} instances",
+                checkedRows.length,
+                { number: checkedRows.length }
+              )
+            }}
+          </b-button>
+          <b-button @click="rejectRelays" type="is-danger">
+            {{
+              $tc(
+                "No instance to reject|Reject instance|Reject {number} instances",
+                checkedRows.length,
+                { number: checkedRows.length }
+              )
+            }}
+          </b-button>
+        </div>
+      </template>
+    </b-table>
+    <b-message type="is-danger" v-if="relayFollowers.elements.length === 0">{{
+      $t("No instance follows your instance yet.")
+    }}</b-message>
+  </div>
 </template>
 <script lang="ts">
-import { Component, Mixins } from 'vue-property-decorator';
-import { ACCEPT_RELAY, REJECT_RELAY, RELAY_FOLLOWERS } from '@/graphql/admin';
-import { Paginate } from '@/types/paginate';
-import { IFollower } from '@/types/actor/follower.model';
-import RelayMixin from '@/mixins/relay';
+import { Component, Mixins } from "vue-property-decorator";
+import { ACCEPT_RELAY, REJECT_RELAY, RELAY_FOLLOWERS } from "../../graphql/admin";
+import { Paginate } from "../../types/paginate";
+import { IFollower } from "../../types/actor/follower.model";
+import RelayMixin from "../../mixins/relay";
 
 @Component({
   apollo: {
     relayFollowers: {
       query: RELAY_FOLLOWERS,
-      fetchPolicy: 'cache-and-network',
+      fetchPolicy: "cache-and-network",
     },
   },
   metaInfo() {
     return {
-      title: this.$t('Followers') as string,
-      titleTemplate: '%s | Mobilizon',
+      title: this.$t("Followers") as string,
+      titleTemplate: "%s | Mobilizon",
     };
   },
 })
 export default class Followers extends Mixins(RelayMixin) {
   relayFollowers: Paginate<IFollower> = { elements: [], total: 0 };
 
+  RelayMixin = RelayMixin;
+
   async acceptRelays() {
     await this.checkedRows.forEach((row: IFollower) => {
       this.acceptRelay(`${row.actor.preferredUsername}@${row.actor.domain}`);
@@ -111,7 +130,7 @@ export default class Followers extends Mixins(RelayMixin) {
     });
   }
 
-  async acceptRelay(address: String) {
+  async acceptRelay(address: string) {
     await this.$apollo.mutate({
       mutation: ACCEPT_RELAY,
       variables: {
@@ -122,7 +141,7 @@ export default class Followers extends Mixins(RelayMixin) {
     this.checkedRows = [];
   }
 
-  async rejectRelay(address: String) {
+  async rejectRelay(address: string) {
     await this.$apollo.mutate({
       mutation: REJECT_RELAY,
       variables: {
@@ -134,7 +153,7 @@ export default class Followers extends Mixins(RelayMixin) {
   }
 
   get checkedRowsHaveAtLeastOneToApprove(): boolean {
-    return this.checkedRows.some(checkedRow => !checkedRow.approved);
+    return this.checkedRows.some((checkedRow) => !checkedRow.approved);
   }
 }
-</script>
+</script>

js/src/components/Admin/Followings.vue

@@ -1,125 +1,134 @@
 <template>
-    <div>
-        <form @submit="followRelay">
-            <b-field :label="$t('Add an instance')" custom-class="add-relay" horizontal>
-                <b-field grouped expanded size="is-large">
-                    <p class="control">
-                        <b-input v-model="newRelayAddress" :placeholder="$t('Ex: test.mobilizon.org')" />
-                    </p>
-                    <p class="control">
-                        <b-button type="is-primary" native-type="submit">{{ $t('Add an instance') }}</b-button>
-                    </p>
-                </b-field>
-            </b-field>
-        </form>
-        <b-table
-                v-show="relayFollowings.elements.length > 0"
-                :data="relayFollowings.elements"
-                :loading="$apollo.queries.relayFollowings.loading"
-                ref="table"
-                :checked-rows.sync="checkedRows"
-                :is-row-checkable="(row) => row.id !== 3"
-                detailed
-                :show-detail-icon="false"
-                paginated
-                backend-pagination
-                :total="relayFollowings.total"
-                :per-page="perPage"
-                @page-change="onPageChange"
-                checkable
-                checkbox-position="left">
-            <template slot-scope="props">
-                <b-table-column field="targetActor.id" label="ID" width="40" numeric>
-                    {{ props.row.targetActor.id }}
-                </b-table-column>
+  <div>
+    <form @submit="followRelay">
+      <b-field :label="$t('Add an instance')" custom-class="add-relay" horizontal>
+        <b-field grouped expanded size="is-large">
+          <p class="control">
+            <b-input v-model="newRelayAddress" :placeholder="$t('Ex: test.mobilizon.org')" />
+          </p>
+          <p class="control">
+            <b-button type="is-primary" native-type="submit">{{ $t("Add an instance") }}</b-button>
+          </p>
+        </b-field>
+      </b-field>
+    </form>
+    <b-table
+      v-show="relayFollowings.elements.length > 0"
+      :data="relayFollowings.elements"
+      :loading="$apollo.queries.relayFollowings.loading"
+      ref="table"
+      :checked-rows.sync="checkedRows"
+      :is-row-checkable="(row) => row.id !== 3"
+      detailed
+      :show-detail-icon="false"
+      paginated
+      backend-pagination
+      :total="relayFollowings.total"
+      :per-page="perPage"
+      @page-change="onPageChange"
+      checkable
+      checkbox-position="left"
+    >
+      <template slot-scope="props">
+        <b-table-column field="targetActor.id" label="ID" width="40" numeric>{{
+          props.row.targetActor.id
+        }}</b-table-column>
 
-                <b-table-column field="targetActor.type" :label="$t('Type')" width="80">
-                    <b-icon icon="lan" v-if="isInstance(props.row.targetActor)" />
-                    <b-icon icon="account-circle" v-else />
-                </b-table-column>
+        <b-table-column field="targetActor.type" :label="$t('Type')" width="80">
+          <b-icon icon="lan" v-if="RelayMixin.isInstance(props.row.targetActor)" />
+          <b-icon icon="account-circle" v-else />
+        </b-table-column>
 
-                <b-table-column field="approved" :label="$t('Status')" width="100" sortable centered>
-                                <span :class="`tag ${props.row.approved ? 'is-success' : 'is-danger' }`">
-                                   {{ props.row.approved ? $t('Accepted') : $t('Pending') }}
-                                </span>
-                </b-table-column>
+        <b-table-column field="approved" :label="$t('Status')" width="100" sortable centered>
+          <span :class="`tag ${props.row.approved ? 'is-success' : 'is-danger'}`">{{
+            props.row.approved ? $t("Accepted") : $t("Pending")
+          }}</span>
+        </b-table-column>
 
-                <b-table-column field="targetActor.domain" :label="$t('Domain')" sortable>
-                    <template>
-                        <a @click="toggle(props.row)" v-if="isInstance(props.row.targetActor)">
-                            {{ props.row.targetActor.domain }}
-                        </a>
-                        <a @click="toggle(props.row)" v-else>
-                            {{ `${props.row.targetActor.preferredUsername}@${props.row.targetActor.domain}` }}
-                        </a>
-                    </template>
-                </b-table-column>
+        <b-table-column field="targetActor.domain" :label="$t('Domain')" sortable>
+          <template>
+            <a @click="toggle(props.row)" v-if="RelayMixin.isInstance(props.row.targetActor)">{{
+              props.row.targetActor.domain
+            }}</a>
+            <a @click="toggle(props.row)" v-else>{{
+              `${props.row.targetActor.preferredUsername}@${props.row.targetActor.domain}`
+            }}</a>
+          </template>
+        </b-table-column>
 
-                <b-table-column field="targetActor.updatedAt" :label="$t('Date')" sortable>
-                    {{ props.row.updatedAt | formatDateTimeString }}
-                </b-table-column>
-            </template>
+        <b-table-column field="targetActor.updatedAt" :label="$t('Date')" sortable>{{
+          props.row.updatedAt | formatDateTimeString
+        }}</b-table-column>
+      </template>
 
-            <template slot="detail" slot-scope="props">
-                <article>
-                    <div class="content">
-                        <strong>{{ props.row.targetActor.domain }}</strong>
-                        <small>@{{ props.row.targetActor.preferredUsername }}</small>
-                        <small>31m</small>
-                        <br>
-                        <p v-html="props.row.targetActor.summary" />
-                    </div>
-                </article>
-            </template>
+      <template slot="detail" slot-scope="props">
+        <article>
+          <div class="content">
+            <strong>{{ props.row.targetActor.domain }}</strong>
+            <small>@{{ props.row.targetActor.preferredUsername }}</small>
+            <small>31m</small>
+            <br />
+            <p v-html="props.row.targetActor.summary" />
+          </div>
+        </article>
+      </template>
 
-            <template slot="bottom-left" v-if="checkedRows.length > 0">
-                <b-button @click="removeRelays" type="is-danger">
-                    {{ $tc('No instance to remove|Remove instance|Remove {number} instances', checkedRows.length, { number: checkedRows.length }) }}
-                </b-button>
-            </template>
-        </b-table>
-        <b-message type="is-danger" v-if="relayFollowings.elements.length === 0">
-            {{ $t("You don't follow any instances yet.") }}
-        </b-message>
-    </div>
+      <template slot="bottom-left" v-if="checkedRows.length > 0">
+        <b-button @click="removeRelays" type="is-danger">
+          {{
+            $tc(
+              "No instance to remove|Remove instance|Remove {number} instances",
+              checkedRows.length,
+              { number: checkedRows.length }
+            )
+          }}
+        </b-button>
+      </template>
+    </b-table>
+    <b-message type="is-danger" v-if="relayFollowings.elements.length === 0">{{
+      $t("You don't follow any instances yet.")
+    }}</b-message>
+  </div>
 </template>
 <script lang="ts">
-import { Component, Mixins } from 'vue-property-decorator';
-import { ADD_RELAY, RELAY_FOLLOWINGS, REMOVE_RELAY } from '@/graphql/admin';
-import { IFollower } from '@/types/actor/follower.model';
-import { Paginate } from '@/types/paginate';
-import RelayMixin from '@/mixins/relay';
+import { Component, Mixins } from "vue-property-decorator";
+import { ADD_RELAY, RELAY_FOLLOWINGS, REMOVE_RELAY } from "../../graphql/admin";
+import { IFollower } from "../../types/actor/follower.model";
+import { Paginate } from "../../types/paginate";
+import RelayMixin from "../../mixins/relay";
 
 @Component({
   apollo: {
     relayFollowings: {
       query: RELAY_FOLLOWINGS,
-      fetchPolicy: 'cache-and-network',
+      fetchPolicy: "cache-and-network",
     },
   },
   metaInfo() {
     return {
-      title: this.$t('Followings') as string,
-      titleTemplate: '%s | Mobilizon',
+      title: this.$t("Followings") as string,
+      titleTemplate: "%s | Mobilizon",
     };
   },
 })
 export default class Followings extends Mixins(RelayMixin) {
-
   relayFollowings: Paginate<IFollower> = { elements: [], total: 0 };
-  newRelayAddress: String = '';
 
-  async followRelay(e) {
+  newRelayAddress = "";
+
+  RelayMixin = RelayMixin;
+
+  async followRelay(e: Event) {
     e.preventDefault();
     await this.$apollo.mutate({
       mutation: ADD_RELAY,
       variables: {
         address: this.newRelayAddress,
       },
-            // TODO: Handle cache update properly without refreshing
+      // TODO: Handle cache update properly without refreshing
     });
     await this.$apollo.queries.relayFollowings.refetch();
-    this.newRelayAddress = '';
+    this.newRelayAddress = "";
   }
 
   async removeRelays() {
@@ -128,7 +137,7 @@ export default class Followings extends Mixins(RelayMixin) {
     });
   }
 
-  async removeRelay(address: String) {
+  async removeRelay(address: string) {
     await this.$apollo.mutate({
       mutation: REMOVE_RELAY,
       variables: {
@@ -139,4 +148,4 @@ export default class Followings extends Mixins(RelayMixin) {
     this.checkedRows = [];
   }
 }
-</script>
+</script>

js/src/components/Comment/Comment.vue

@@ -1,112 +1,130 @@
 <template>
-    <li :class="{ reply: comment.inReplyToComment }">
-        <article class="media" :class="{ selected: commentSelected, organizer: commentFromOrganizer }" :id="commentId">
-            <figure class="media-left" v-if="!comment.deletedAt && comment.actor.avatar">
-                <p class="image is-48x48">
-                    <img :src="comment.actor.avatar.url" alt="">
-                </p>
-            </figure>
-            <b-icon class="media-left" v-else size="is-large" icon="account-circle" />
-            <div class="media-content">
-                <div class="content">
-                    <span class="first-line" v-if="!comment.deletedAt">
-                        <strong>{{ comment.actor.name }}</strong>
-                        <small v-if="comment.actor.domain">@{{ comment.actor.preferredUsername }}@{{ comment.actor.domain }}</small>
-                        <small v-else>@{{ comment.actor.preferredUsername }}</small>
-                        <a class="comment-link has-text-grey" :href="commentURL">
-                            <small>{{ timeago(new Date(comment.updatedAt)) }}</small>
-                        </a>
-                    </span>
-                    <a v-else class="comment-link has-text-grey" :href="commentURL">
-                        <span>{{ $t('[deleted]') }}</span>
-                    </a>
-                    <span class="icons" v-if="!comment.deletedAt">
-                        <span v-if="comment.actor.id === currentActor.id"
-                              @click="$emit('delete-comment', comment)">
-                            <b-icon
-                                icon="delete"
-                                size="is-small"
-                            />
-                        </span>
-                        <span @click="reportModal()">
-                            <b-icon
-                                    icon="alert"
-                                    size="is-small"
-                            />
-                        </span>
-                    </span>
-                    <br>
-                    <div v-if="!comment.deletedAt" v-html="comment.text" />
-                    <div v-else>{{ $t('[This comment has been deleted]') }}</div>
-                    <span class="load-replies" v-if="comment.totalReplies">
-                        <span v-if="!showReplies" @click="fetchReplies">
-                            {{ $tc('View a reply', comment.totalReplies, { totalReplies: comment.totalReplies }) }}
-                        </span>
-                        <span v-else-if="comment.totalReplies && showReplies" @click="showReplies = false">
-                            {{ $t('Hide replies') }}
-                        </span>
-                    </span>
-                </div>
-                <nav class="reply-action level is-mobile" v-if="currentActor.id && event.options.commentModeration !== CommentModeration.CLOSED">
-                    <div class="level-left">
-                      <span style="cursor: pointer" class="level-item" @click="createReplyToComment(comment)">
-                        <span class="icon is-small">
-                          <b-icon icon="reply" />
-                        </span>
-                        {{ $t('Reply') }}
-                      </span>
-                    </div>
-                </nav>
-            </div>
-        </article>
-        <form class="reply" @submit.prevent="replyToComment" v-if="currentActor.id" v-show="replyTo">
-            <article class="media reply">
-                <figure class="media-left" v-if="currentActor.avatar">
-                    <p class="image is-48x48">
-                        <img :src="currentActor.avatar.url" alt="">
-                    </p>
-                </figure>
-                <b-icon class="media-left" v-else size="is-large" icon="account-circle" />
-                <div class="media-content">
-                    <div class="content">
-                        <span class="first-line">
-                            <strong>{{ currentActor.name}}</strong>
-                            <small>@{{ currentActor.preferredUsername }}</small>
-                        </span>
-                        <br>
-                        <span class="editor-line">
-                            <editor class="editor" ref="commenteditor" v-model="newComment.text" mode="comment" />
-                            <b-button :disabled="newComment.text.trim().length === 0" native-type="submit" type="is-info">{{ $t('Post a reply') }}</b-button>
-                        </span>
-                    </div>
-                </div>
-            </article>
-        </form>
-        <transition-group name="comment-replies" v-if="showReplies" class="comment-replies" tag="ul">
-            <comment
-                    class="reply"
-                    v-for="reply in comment.replies"
-                    :key="reply.id"
-                    :comment="reply"
-                    :event="event"
-                    @create-comment="$emit('create-comment', $event)"
-                    @delete-comment="$emit('delete-comment', $event)" />
-        </transition-group>
-    </li>
+  <li :class="{ reply: comment.inReplyToComment }">
+    <article
+      class="media"
+      :class="{ selected: commentSelected, organizer: commentFromOrganizer }"
+      :id="commentId"
+    >
+      <figure class="media-left" v-if="!comment.deletedAt && comment.actor.avatar">
+        <p class="image is-48x48">
+          <img :src="comment.actor.avatar.url" alt="" />
+        </p>
+      </figure>
+      <b-icon class="media-left" v-else size="is-large" icon="account-circle" />
+      <div class="media-content">
+        <div class="content">
+          <span class="first-line" v-if="!comment.deletedAt">
+            <strong>{{ comment.actor.name }}</strong>
+            <small v-if="comment.actor.domain"
+              >@{{ comment.actor.preferredUsername }}@{{ comment.actor.domain }}</small
+            >
+            <small v-else>@{{ comment.actor.preferredUsername }}</small>
+            <a class="comment-link has-text-grey" :href="commentURL">
+              <small>{{ timeago(new Date(comment.updatedAt)) }}</small>
+            </a>
+          </span>
+          <a v-else class="comment-link has-text-grey" :href="commentURL">
+            <span>{{ $t("[deleted]") }}</span>
+          </a>
+          <span class="icons" v-if="!comment.deletedAt">
+            <button
+              v-if="comment.actor.id === currentActor.id"
+              @click="$emit('delete-comment', comment)"
+            >
+              <b-icon icon="delete" size="is-small" aria-hidden="true" />
+              <span class="visually-hidden">{{ $t("Delete") }}</span>
+            </button>
+            <button @click="reportModal()">
+              <b-icon icon="alert" size="is-small" />
+              <span class="visually-hidden">{{ $t("Report") }}</span>
+            </button>
+          </span>
+          <br />
+          <div v-if="!comment.deletedAt" v-html="comment.text" />
+          <div v-else>{{ $t("[This comment has been deleted]") }}</div>
+          <span class="load-replies" v-if="comment.totalReplies">
+            <span v-if="!showReplies" @click="fetchReplies">
+              {{
+                $tc("View a reply", comment.totalReplies, { totalReplies: comment.totalReplies })
+              }}
+            </span>
+            <span v-else-if="comment.totalReplies && showReplies" @click="showReplies = false">
+              {{ $t("Hide replies") }}
+            </span>
+          </span>
+        </div>
+        <nav
+          class="reply-action level is-mobile"
+          v-if="currentActor.id && event.options.commentModeration !== CommentModeration.CLOSED"
+        >
+          <div class="level-left">
+            <span
+              style="cursor: pointer;"
+              class="level-item"
+              @click="createReplyToComment(comment)"
+            >
+              <span class="icon is-small">
+                <b-icon icon="reply" />
+              </span>
+              {{ $t("Reply") }}
+            </span>
+          </div>
+        </nav>
+      </div>
+    </article>
+    <form class="reply" @submit.prevent="replyToComment" v-if="currentActor.id" v-show="replyTo">
+      <article class="media reply">
+        <figure class="media-left" v-if="currentActor.avatar">
+          <p class="image is-48x48">
+            <img :src="currentActor.avatar.url" alt="" />
+          </p>
+        </figure>
+        <b-icon class="media-left" v-else size="is-large" icon="account-circle" />
+        <div class="media-content">
+          <div class="content">
+            <span class="first-line">
+              <strong>{{ currentActor.name }}</strong>
+              <small>@{{ currentActor.preferredUsername }}</small>
+            </span>
+            <br />
+            <span class="editor-line">
+              <editor class="editor" ref="commentEditor" v-model="newComment.text" mode="comment" />
+              <b-button
+                :disabled="newComment.text.trim().length === 0"
+                native-type="submit"
+                type="is-info"
+                >{{ $t("Post a reply") }}</b-button
+              >
+            </span>
+          </div>
+        </div>
+      </article>
+    </form>
+    <transition-group name="comment-replies" v-if="showReplies" class="comment-replies" tag="ul">
+      <comment
+        class="reply"
+        v-for="reply in comment.replies"
+        :key="reply.id"
+        :comment="reply"
+        :event="event"
+        @create-comment="$emit('create-comment', $event)"
+        @delete-comment="$emit('delete-comment', $event)"
+      />
+    </transition-group>
+  </li>
 </template>
 <script lang="ts">
-import { Component, Prop, Vue } from 'vue-property-decorator';
-import { CommentModel, IComment } from '@/types/comment.model';
-import { CURRENT_ACTOR_CLIENT } from '@/graphql/actor';
-import { IPerson } from '@/types/actor';
-import { Refs } from '@/shims-vue';
-import EditorComponent from '@/components/Editor.vue';
-import TimeAgo from 'javascript-time-ago';
-import { COMMENTS_THREADS, FETCH_THREAD_REPLIES } from '@/graphql/comment';
-import { IEvent, CommentModeration } from '@/types/event.model';
-import ReportModal from '@/components/Report/ReportModal.vue';
-import { IReport } from '@/types/report.model';
-import { CREATE_REPORT } from '@/graphql/report';
+import { Component, Prop, Vue, Ref } from "vue-property-decorator";
+import EditorComponent from "@/components/Editor.vue";
+import TimeAgo from "javascript-time-ago";
+import { CommentModel, IComment } from "../../types/comment.model";
+import { CURRENT_ACTOR_CLIENT } from "../../graphql/actor";
+import { IPerson } from "../../types/actor";
+import { COMMENTS_THREADS, FETCH_THREAD_REPLIES } from "../../graphql/comment";
+import { IEvent, CommentModeration } from "../../types/event.model";
+import ReportModal from "../Report/ReportModal.vue";
+import { IReport } from "../../types/report.model";
+import { CREATE_REPORT } from "../../graphql/report";
 
 @Component({
   apollo: {
@@ -115,23 +133,29 @@ import { CREATE_REPORT } from '@/graphql/report';
     },
   },
   components: {
-    editor: () => import(/* webpackChunkName: "editor" */ '@/components/Editor.vue'),
-    comment: () => import(/* webpackChunkName: "comment" */ './Comment.vue'),
+    editor: () => import(/* webpackChunkName: "editor" */ "@/components/Editor.vue"),
+    comment: () => import(/* webpackChunkName: "comment" */ "./Comment.vue"),
   },
 })
 export default class Comment extends Vue {
   @Prop({ required: true, type: Object }) comment!: IComment;
+
   @Prop({ required: true, type: Object }) event!: IEvent;
 
-  $refs!: Refs<{
-    commenteditor: EditorComponent,
-  }>;
+  // Hack because Vue only exports it's own interface.
+  // See https://github.com/kaorun343/vue-property-decorator/issues/257
+  @Ref() readonly commentEditor!: EditorComponent & { replyToComment: (comment: IComment) => void };
 
   currentActor!: IPerson;
+
   newComment: IComment = new CommentModel();
-  replyTo: boolean = false;
-  showReplies: boolean = false;
-  timeAgoInstance = null;
+
+  replyTo = false;
+
+  showReplies = false;
+
+  timeAgoInstance: TimeAgo | null = null;
+
   CommentModeration = CommentModeration;
 
   async mounted() {
@@ -140,7 +164,7 @@ export default class Comment extends Vue {
     TimeAgo.addLocale(locale);
     this.timeAgoInstance = new TimeAgo(localeName);
 
-    const hash = this.$route.hash;
+    const { hash } = this.$route;
     if (hash.includes(`#comment-${this.comment.uuid}`)) {
       this.fetchReplies();
     }
@@ -153,18 +177,17 @@ export default class Comment extends Vue {
       return;
     }
     this.replyTo = true;
-        // this.newComment.inReplyToComment = comment;
+    // this.newComment.inReplyToComment = comment;
     await this.$nextTick();
     await this.$nextTick(); // For some reason commenteditor needs two $nextTick() to fully render
-    const commentEditor = this.$refs.commenteditor;
-    commentEditor.replyToComment(comment);
+    this.commentEditor.replyToComment(comment);
   }
 
   replyToComment() {
     this.newComment.inReplyToComment = this.comment;
     this.newComment.originComment = this.comment.originComment || this.comment;
     this.newComment.actor = this.currentActor;
-    this.$emit('create-comment', this.newComment);
+    this.$emit("create-comment", this.newComment);
     this.newComment = new CommentModel();
     this.replyTo = false;
   }
@@ -188,7 +211,7 @@ export default class Comment extends Vue {
     if (!eventData) return;
     const { event } = eventData;
     const { comments } = event;
-    const parentCommentIndex = comments.findIndex(oldComment => oldComment.id === parentId);
+    const parentCommentIndex = comments.findIndex((oldComment) => oldComment.id === parentId);
     const parentComment = comments[parentCommentIndex];
     if (!parentComment) return;
     parentComment.replies = thread;
@@ -201,12 +224,11 @@ export default class Comment extends Vue {
     this.showReplies = true;
   }
 
-  timeago(dateTime): String {
+  timeago(dateTime: Date): string {
     if (this.timeAgoInstance != null) {
-      // @ts-ignore
       return this.timeAgoInstance.format(dateTime);
     }
-    return '';
+    return "";
   }
 
   get commentSelected(): boolean {
@@ -214,15 +236,20 @@ export default class Comment extends Vue {
   }
 
   get commentFromOrganizer(): boolean {
-    return this.event.organizerActor !== undefined && this.comment.actor && this.comment.actor.id === this.event.organizerActor.id;
+    return (
+      this.event.organizerActor !== undefined &&
+      this.comment.actor &&
+      this.comment.actor.id === this.event.organizerActor.id
+    );
   }
 
-  get commentId(): String {
-    if (this.comment.originComment) return `#comment-${this.comment.originComment.uuid}:${this.comment.uuid}`;
+  get commentId(): string {
+    if (this.comment.originComment)
+      return `#comment-${this.comment.originComment.uuid}:${this.comment.uuid}`;
     return `#comment-${this.comment.uuid}`;
   }
 
-  get commentURL(): String {
+  get commentURL(): string {
     if (!this.comment.local && this.comment.url) return this.comment.url;
     return this.commentId;
   }
@@ -232,7 +259,7 @@ export default class Comment extends Vue {
       parent: this,
       component: ReportModal,
       props: {
-        title: this.$t('Report this comment'),
+        title: this.$t("Report this comment"),
         comment: this.comment,
         onConfirm: this.reportComment,
         outsideDomain: this.comment.actor.domain,
@@ -240,7 +267,7 @@ export default class Comment extends Vue {
     });
   }
 
-  async reportComment(content: String, forward: boolean) {
+  async reportComment(content: string, forward: boolean) {
     try {
       await this.$apollo.mutate<IReport>({
         mutation: CREATE_REPORT,
@@ -254,9 +281,11 @@ export default class Comment extends Vue {
         },
       });
       this.$buefy.notification.open({
-        message: this.$t('Comment from @{username} reported', { username: this.comment.actor.preferredUsername }) as string,
-        type: 'is-success',
-        position: 'is-bottom-right',
+        message: this.$t("Comment from @{username} reported", {
+          username: this.comment.actor.preferredUsername,
+        }) as string,
+        type: "is-success",
+        position: "is-bottom-right",
         duration: 5000,
       });
     } catch (error) {
@@ -266,93 +295,105 @@ export default class Comment extends Vue {
 }
 </script>
 <style lang="scss" scoped>
-    @import "@/variables.scss";
+@import "@/variables.scss";
 
-    .first-line {
-        * {
-            padding: 0 5px 0 0;
-        }
-    }
+form.reply {
+  padding-bottom: 1rem;
+}
 
-    .editor-line {
-        display: flex;
-        max-width: calc(80rem - 64px);
+.first-line {
+  * {
+    padding: 0 5px 0 0;
+  }
+}
 
-        .editor {
-            flex: 1;
-            padding-right: 10px;
-            margin-bottom: 0;
-        }
-    }
+.editor-line {
+  display: flex;
+  max-width: calc(80rem - 64px);
 
-    .comment-link small:hover {
-        color: hsl(0, 0%, 21%);
-    }
+  .editor {
+    flex: 1;
+    padding-right: 10px;
+    margin-bottom: 0;
+  }
+}
 
-    .root-comment .comment-replies > .reply {
-        padding-left: 3rem;
-    }
+.comment-link small:hover {
+  color: hsl(0, 0%, 21%);
+}
 
-    .media .media-content {
+.root-comment .comment-replies > .reply {
+  padding-left: 3rem;
+}
 
-        .content .editor-line {
-            display: flex;
-            align-items: center;
-        }
+.media .media-content {
+  .content .editor-line {
+    display: flex;
+    align-items: center;
+  }
 
-        .icons {
-            display: none;
-        }
-    }
+  .icons {
+    display: none;
+  }
+}
 
-    .media:hover .media-content .icons {
-        display: inline;
-        cursor: pointer;
-    }
+.media:hover .media-content .icons {
+  display: inline;
 
-    .load-replies {
-        cursor: pointer;
-    }
+  button {
+    cursor: pointer;
+    border: none;
+    background: none;
+  }
+}
 
-    article {
-        border-radius: 4px;
+.load-replies {
+  cursor: pointer;
+}
 
-        &.selected {
-            background-color: lighten($secondary, 30%);
-        }
-        &.organizer:not(.selected) {
-            background-color: lighten($primary, 50%);
-        }
-    }
+article {
+  border-radius: 4px;
 
-    .comment-replies-enter-active,
-    .comment-replies-leave-active,
-    .comment-replies-move {
-        transition: 500ms cubic-bezier(0.59, 0.12, 0.34, 0.95);
-        transition-property: opacity, transform;
-    }
+  &.selected {
+    background-color: lighten($secondary, 30%);
+  }
+  &.organizer:not(.selected) {
+    background-color: lighten($primary, 50%);
+  }
+}
 
-    .comment-replies-enter {
-        opacity: 0;
-        transform: translateX(50px) scaleY(0.5);
-    }
+.comment-replies-enter-active,
+.comment-replies-leave-active,
+.comment-replies-move {
+  transition: 500ms cubic-bezier(0.59, 0.12, 0.34, 0.95);
+  transition-property: opacity, transform;
+}
 
-    .comment-replies-enter-to {
-        opacity: 1;
-        transform: translateX(0) scaleY(1);
-    }
+.comment-replies-enter {
+  opacity: 0;
+  transform: translateX(50px) scaleY(0.5);
+}
 
-    .comment-replies-leave-active {
-        position: absolute;
-    }
+.comment-replies-enter-to {
+  opacity: 1;
+  transform: translateX(0) scaleY(1);
+}
 
-    .comment-replies-leave-to {
-        opacity: 0;
-        transform: scaleY(0);
-        transform-origin: center top;
-    }
+.comment-replies-leave-active {
+  position: absolute;
+}
 
-    .reply-action .icon {
-        padding-right: 0.4rem;
-    }
+.comment-replies-leave-to {
+  opacity: 0;
+  transform: scaleY(0);
+  transform-origin: center top;
+}
+
+.reply-action .icon {
+  padding-right: 0.4rem;
+}
+
+.visually-hidden {
+  display: none;
+}
 </style>

js/src/components/Comment/CommentTree.vue

@@ -1,60 +1,66 @@
 <template>
-    <div class="columns">
-        <div class="column is-two-thirds-desktop">
-            <form class="new-comment" v-if="currentActor.id && event.options.commentModeration !== CommentModeration.CLOSED" @submit.prevent="createCommentForEvent(newComment)" @keyup.ctrl.enter="createCommentForEvent(newComment)">
-                <article class="media">
-                    <figure class="media-left">
-                        <identity-picker-wrapper :inline="false" v-model="newComment.actor" />
-                    </figure>
-                    <div class="media-content">
-                        <div class="field">
-                            <p class="control">
-                                <editor ref="commenteditor" mode="comment" v-model="newComment.text" />
-                            </p>
-                        </div>
-                        <div class="send-comment">
-                            <b-button native-type="submit" type="is-info">{{ $t('Post a comment') }}</b-button>
-                        </div>
-                    </div>
-                </article>
-            </form>
-            <b-notification v-else-if="event.options.commentModeration === CommentModeration.CLOSED" :closable="false">
-                {{ $t('Comments have been closed.') }}
-            </b-notification>
-            <transition name="comment-empty-list" mode="out-in">
-                <transition-group name="comment-list" v-if="comments.length" class="comment-list" tag="ul">
-                    <comment
-                            class="root-comment"
-                            :comment="comment"
-                            :event="event"
-                            v-for="comment in orderedComments"
-                            v-if="!comment.deletedAt || comment.totalReplies > 0"
-                            :key="comment.id"
-                            @create-comment="createCommentForEvent"
-                            @delete-comment="deleteComment"
-                    />
-                </transition-group>
-                <div v-else class="no-comments">
-                    <span>{{ $t('No comments yet') }}</span>
-                    <img src="../../assets/undraw_just_saying.svg" alt="" />
-                </div>
-            </transition>
+  <div>
+    <form
+      class="new-comment"
+      v-if="currentActor.id && event.options.commentModeration !== CommentModeration.CLOSED"
+      @submit.prevent="createCommentForEvent(newComment)"
+      @keyup.ctrl.enter="createCommentForEvent(newComment)"
+    >
+      <article class="media">
+        <figure class="media-left">
+          <identity-picker-wrapper :inline="false" v-model="newComment.actor" />
+        </figure>
+        <div class="media-content">
+          <div class="field">
+            <p class="control">
+              <editor ref="commenteditor" mode="comment" v-model="newComment.text" />
+            </p>
+          </div>
+          <div class="send-comment">
+            <b-button native-type="submit" type="is-info">{{ $t("Post a comment") }}</b-button>
+          </div>
         </div>
-    </div>
+      </article>
+    </form>
+    <b-notification
+      v-else-if="event.options.commentModeration === CommentModeration.CLOSED"
+      :closable="false"
+      >{{ $t("Comments have been closed.") }}</b-notification
+    >
+    <transition name="comment-empty-list" mode="out-in">
+      <transition-group name="comment-list" v-if="comments.length" class="comment-list" tag="ul">
+        <comment
+          class="root-comment"
+          :comment="comment"
+          :event="event"
+          v-for="comment in filteredOrderedComments"
+          :key="comment.id"
+          @create-comment="createCommentForEvent"
+          @delete-comment="deleteComment"
+        />
+      </transition-group>
+      <div v-else class="no-comments">
+        <span>{{ $t("No comments yet") }}</span>
+        <img src="../../assets/undraw_just_saying.svg" alt />
+      </div>
+    </transition>
+  </div>
 </template>
 
 <script lang="ts">
-import { Prop, Vue, Component, Watch } from 'vue-property-decorator';
-import { CommentModel, IComment } from '@/types/comment.model';
+import { Prop, Vue, Component, Watch } from "vue-property-decorator";
+import Comment from "@/components/Comment/Comment.vue";
+import IdentityPickerWrapper from "@/views/Account/IdentityPickerWrapper.vue";
+import { CommentModel, IComment } from "../../types/comment.model";
 import {
-    CREATE_COMMENT_FROM_EVENT,
-    DELETE_COMMENT, COMMENTS_THREADS, FETCH_THREAD_REPLIES,
-} from '@/graphql/comment';
-import { CURRENT_ACTOR_CLIENT } from '@/graphql/actor';
-import { IPerson } from '@/types/actor';
-import Comment from '@/components/Comment/Comment.vue';
-import { IEvent, CommentModeration } from '@/types/event.model';
-import IdentityPickerWrapper from '@/views/Account/IdentityPickerWrapper.vue';
+  CREATE_COMMENT_FROM_EVENT,
+  DELETE_COMMENT,
+  COMMENTS_THREADS,
+  FETCH_THREAD_REPLIES,
+} from "../../graphql/comment";
+import { CURRENT_ACTOR_CLIENT } from "../../graphql/actor";
+import { IPerson } from "../../types/actor";
+import { IEvent, CommentModeration } from "../../types/event.model";
 
 @Component({
   apollo: {
@@ -69,7 +75,7 @@ import IdentityPickerWrapper from '@/views/Account/IdentityPickerWrapper.vue';
         };
       },
       update(data) {
-        return data.event.comments.map((comment) => new CommentModel(comment));
+        return data.event.comments.map((comment: IComment) => new CommentModel(comment));
       },
       skip() {
         return !this.event.uuid;
@@ -79,18 +85,21 @@ import IdentityPickerWrapper from '@/views/Account/IdentityPickerWrapper.vue';
   components: {
     Comment,
     IdentityPickerWrapper,
-    editor: () => import(/* webpackChunkName: "editor" */ '@/components/Editor.vue'),
+    editor: () => import(/* webpackChunkName: "editor" */ "@/components/Editor.vue"),
   },
 })
 export default class CommentTree extends Vue {
   @Prop({ required: false, type: Object }) event!: IEvent;
 
   newComment: IComment = new CommentModel();
+
   currentActor!: IPerson;
+
   comments: IComment[] = [];
+
   CommentModeration = CommentModeration;
 
-  @Watch('currentActor')
+  @Watch("currentActor")
   watchCurrentActor(currentActor: IPerson) {
     this.newComment.actor = currentActor;
   }
@@ -123,10 +132,13 @@ export default class CommentTree extends Vue {
           const { event } = commentThreadsData;
           const { comments: oldComments } = event;
 
-          // if it's no a root comment, we first need to find existing replies and add the new reply to it
-          if (comment.originComment) {
-            // @ts-ignore
-            const parentCommentIndex = oldComments.findIndex(oldComment => oldComment.id === comment.originComment.id);
+          // if it's no a root comment, we first need to find
+          // existing replies and add the new reply to it
+          if (comment.originComment !== undefined) {
+            const { originComment } = comment;
+            const parentCommentIndex = oldComments.findIndex(
+              (oldComment) => oldComment.id === originComment.id
+            );
             const parentComment = oldComments[parentCommentIndex];
 
             let oldReplyList: IComment[] = [];
@@ -204,15 +216,15 @@ export default class CommentTree extends Vue {
 
         if (comment.originComment) {
           // we have deleted a reply to a thread
-          const data = store.readQuery<{ thread: IComment[] }>({
+          const localData = store.readQuery<{ thread: IComment[] }>({
             query: FETCH_THREAD_REPLIES,
             variables: {
               threadId: comment.originComment.id,
             },
           });
-          if (!data) return;
-          const { thread: oldReplyList } = data;
-          const replies = oldReplyList.filter(reply => reply.id !== deletedCommentId);
+          if (!localData) return;
+          const { thread: oldReplyList } = localData;
+          const replies = oldReplyList.filter((reply) => reply.id !== deletedCommentId);
           store.writeQuery({
             query: FETCH_THREAD_REPLIES,
             variables: {
@@ -221,8 +233,11 @@ export default class CommentTree extends Vue {
             data: { thread: replies },
           });
 
-          // @ts-ignore
-          const parentCommentIndex = oldComments.findIndex(oldComment => oldComment.id === comment.originComment.id);
+          const { originComment } = comment;
+
+          const parentCommentIndex = oldComments.findIndex(
+            (oldComment) => oldComment.id === originComment.id
+          );
           const parentComment = oldComments[parentCommentIndex];
           parentComment.replies = replies;
           parentComment.totalReplies -= 1;
@@ -230,7 +245,7 @@ export default class CommentTree extends Vue {
           event.comments = oldComments;
         } else {
           // we have deleted a thread itself
-          event.comments = oldComments.filter(reply => reply.id !== deletedCommentId);
+          event.comments = oldComments.filter((reply) => reply.id !== deletedCommentId);
         }
         store.writeQuery({
           query: COMMENTS_THREADS,
@@ -245,84 +260,92 @@ export default class CommentTree extends Vue {
   }
 
   get orderedComments(): IComment[] {
-    return this.comments.filter((comment => comment.inReplyToComment == null)).sort((a, b) => {
-      if (a.updatedAt && b.updatedAt) {
-        return (new Date(b.updatedAt)).getTime() - (new Date(a.updatedAt)).getTime();
-      }
-      return 0;
-    });
+    return this.comments
+      .filter((comment) => comment.inReplyToComment == null)
+      .sort((a, b) => {
+        if (a.updatedAt && b.updatedAt) {
+          return new Date(b.updatedAt).getTime() - new Date(a.updatedAt).getTime();
+        }
+        return 0;
+      });
+  }
+
+  get filteredOrderedComments(): IComment[] {
+    return this.orderedComments.filter((comment) => !comment.deletedAt || comment.totalReplies > 0);
   }
 }
 </script>
 
 <style lang="scss" scoped>
-    .new-comment {
-        .media-content {
-            display: flex;
-            align-items: center;
-            align-content: center;
+form.new-comment {
+  padding-bottom: 1rem;
 
-            .field {
-                flex: 1;
-                padding-right: 10px;
-                margin-bottom: 0;
-            }
-        }
+  .media-content {
+    display: flex;
+    align-items: center;
+    align-content: center;
+
+    .field {
+      flex: 1;
+      padding-right: 10px;
+      margin-bottom: 0;
     }
+  }
+}
 
-    .no-comments {
-        display: flex;
-        flex-direction: column;
+.no-comments {
+  display: flex;
+  flex-direction: column;
 
-        span {
-            text-align: center;
-            margin-bottom: 10px;
-        }
+  span {
+    text-align: center;
+    margin-bottom: 10px;
+  }
 
-        img {
-            max-width: 250px;
-            align-self: center;
-        }
-    }
+  img {
+    max-width: 250px;
+    align-self: center;
+  }
+}
 
-    ul.comment-list li {
-        margin-bottom: 16px;
-    }
+ul.comment-list li {
+  margin-bottom: 16px;
+}
 
-    .comment-list-enter-active,
-    .comment-list-leave-active,
-    .comment-list-move {
-        transition: 500ms cubic-bezier(0.59, 0.12, 0.34, 0.95);
-        transition-property: opacity, transform;
-    }
+.comment-list-enter-active,
+.comment-list-leave-active,
+.comment-list-move {
+  transition: 500ms cubic-bezier(0.59, 0.12, 0.34, 0.95);
+  transition-property: opacity, transform;
+}
 
-    .comment-list-enter {
-        opacity: 0;
-        transform: translateX(50px) scaleY(0.5);
-    }
+.comment-list-enter {
+  opacity: 0;
+  transform: translateX(50px) scaleY(0.5);
+}
 
-    .comment-list-enter-to {
-        opacity: 1;
-        transform: translateX(0) scaleY(1);
-    }
+.comment-list-enter-to {
+  opacity: 1;
+  transform: translateX(0) scaleY(1);
+}
 
-    .comment-list-leave-active,
-    .comment-empty-list-active {
-        position: absolute;
-    }
+.comment-list-leave-active,
+.comment-empty-list-active {
+  position: absolute;
+}
 
-    .comment-list-leave-to,
-    .comment-empty-list-leave-to {
-        opacity: 0;
-        transform: scaleY(0);
-        transform-origin: center top;
-    }
+.comment-list-leave-to,
+.comment-empty-list-leave-to {
+  opacity: 0;
+  transform: scaleY(0);
+  transform-origin: center top;
+}
 
-    /*.comment-empty-list-enter-active {*/
-    /*    transition: opacity .5s;*/
-    /*}*/
+/*.comment-empty-list-enter-active {*/
+/*    transition: opacity .5s;*/
+/*}*/
 
-    /*.comment-empty-list-enter {*/
-    /*    opacity: 0;*/
-    /*}*/
+/*.comment-empty-list-enter {*/
+/*    opacity: 0;*/
+/*}*/
 </style>

js/src/components/Conversation/ConversationComment.vue

@@ -0,0 +1,110 @@
+<template>
+  <article class="comment">
+    <div class="avatar">
+      <figure class="image is-48x48" v-if="comment.actor.avatar">
+        <img class="is-rounded" :src="comment.actor.avatar.url" alt="" />
+      </figure>
+      <b-icon v-else size="is-medium" icon="account-circle" />
+    </div>
+    <div class="body">
+      <div class="meta">
+        <div class="name">
+          <span>@{{ comment.actor.preferredUsername }}</span>
+        </div>
+        <div class="post-infos">
+          <span>{{ comment.updatedAt | formatDateTimeString }}</span>
+        </div>
+      </div>
+      <div class="description-content" v-html="comment.text"></div>
+    </div>
+  </article>
+</template>
+<script lang="ts">
+import { Component, Prop, Vue } from "vue-property-decorator";
+import { IComment } from "../../types/comment.model";
+
+@Component
+export default class ConversationComment extends Vue {
+  @Prop({ required: true, type: Object }) comment!: IComment;
+}
+</script>
+<style lang="scss" scoped>
+@import "@/variables.scss";
+
+article.comment {
+  display: flex;
+  border-top: 1px solid #e9e9e9;
+
+  div.body {
+    flex: 2;
+    margin-bottom: 2rem;
+    padding-top: 1rem;
+
+    .meta {
+      display: flex;
+      align-items: center;
+      padding: 0 1rem 0.3em;
+
+      .name {
+        margin-right: auto;
+        flex: 1 1 auto;
+        overflow: hidden;
+
+        span {
+          color: #3c376e;
+        }
+      }
+    }
+
+    div.description-content {
+      padding: 0 1rem 0.3rem;
+
+      /deep/ h1 {
+        font-size: 2rem;
+      }
+
+      /deep/ h2 {
+        font-size: 1.5rem;
+      }
+
+      /deep/ h3 {
+        font-size: 1.25rem;
+      }
+
+      /deep/ ul {
+        list-style-type: disc;
+      }
+
+      /deep/ li {
+        margin: 10px auto 10px 2rem;
+      }
+
+      /deep/ blockquote {
+        border-left: 0.2em solid #333;
+        display: block;
+        padding-left: 1em;
+      }
+
+      /deep/ p {
+        margin: 10px auto;
+
+        a {
+          display: inline-block;
+          padding: 0.3rem;
+          background: $secondary;
+          color: #111;
+
+          &:empty {
+            display: none;
+          }
+        }
+      }
+    }
+  }
+
+  div.avatar {
+    padding-top: 1rem;
+    flex: 0;
+  }
+}
+</style>

js/src/components/Conversation/ConversationListItem.vue

@@ -0,0 +1,68 @@
+<template>
+  <router-link
+    class="conversation-minimalist-card-wrapper"
+    :to="{ name: RouteName.CONVERSATION, params: { slug: conversation.slug, id: conversation.id } }"
+  >
+    <div class="media-left">
+      <figure class="image is-32x32" v-if="conversation.lastComment.actor.avatar">
+        <img class="is-rounded" :src="conversation.lastComment.actor.avatar.url" alt />
+      </figure>
+      <b-icon v-else size="is-medium" icon="account-circle" />
+    </div>
+    <div class="title-info-wrapper">
+      <p class="conversation-minimalist-title">{{ conversation.title }}</p>
+      <div class="has-text-grey">{{ htmlTextEllipsis }}</div>
+    </div>
+  </router-link>
+</template>
+<script lang="ts">
+import { Component, Prop, Vue } from "vue-property-decorator";
+import { IConversation } from "../../types/conversations";
+import RouteName from "../../router/name";
+
+@Component
+export default class ConversationListItem extends Vue {
+  @Prop({ required: true, type: Object }) conversation!: IConversation;
+
+  RouteName = RouteName;
+
+  get htmlTextEllipsis() {
+    const element = document.createElement("div");
+    element.innerHTML = this.conversation.lastComment.text
+      .replace(/<br\s*\/?>/gi, " ")
+      .replace(/<p>/gi, " ");
+    return element.innerText;
+  }
+}
+</script>
+<style lang="scss" scoped>
+.conversation-minimalist-card-wrapper {
+  display: flex;
+  width: 100%;
+  color: initial;
+  border-bottom: 1px solid #e9e9e9;
+  align-items: center;
+
+  .calendar-icon {
+    margin-right: 1rem;
+  }
+
+  .title-info-wrapper {
+    flex: 2;
+
+    .conversation-minimalist-title {
+      color: #3c376e;
+      font-family: "Liberation Sans", "Helvetica Neue", Roboto, Helvetica, Arial, serif;
+      font-size: 1.25rem;
+      font-weight: 700;
+    }
+
+    div.has-text-grey {
+      overflow: hidden;
+      display: -webkit-box;
+      -webkit-box-orient: vertical;
+      -webkit-line-clamp: 2;
+    }
+  }
+}
+</style>

js/src/components/Editor/Image.ts

@@ -1,16 +1,21 @@
-import { Node, Plugin } from 'tiptap';
-import { UPLOAD_PICTURE } from '@/graphql/upload';
-import { apolloProvider } from '@/vue-apollo';
-import ApolloClient from 'apollo-client';
-import { InMemoryCache } from 'apollo-cache-inmemory';
+import { Node } from "tiptap";
+import { UPLOAD_PICTURE } from "@/graphql/upload";
+import apolloProvider from "@/vue-apollo";
+import ApolloClient from "apollo-client";
+import { NormalizedCacheObject } from "apollo-cache-inmemory";
+import { NodeType, NodeSpec } from "prosemirror-model";
+import { EditorState, Plugin, TextSelection } from "prosemirror-state";
+import { DispatchFn } from "tiptap-commands";
+import { EditorView } from "prosemirror-view";
+
+/* eslint-disable class-methods-use-this */
 
 export default class Image extends Node {
-
   get name() {
-    return 'image';
+    return "image";
   }
 
-  get schema() {
+  get schema(): NodeSpec {
     return {
       inline: true,
       attrs: {
@@ -22,25 +27,25 @@ export default class Image extends Node {
           default: null,
         },
       },
-      group: 'inline',
+      group: "inline",
       draggable: true,
       parseDOM: [
         {
-          tag: 'img[src]',
-          getAttrs: dom => ({
-            src: dom.getAttribute('src'),
-            title: dom.getAttribute('title'),
-            alt: dom.getAttribute('alt'),
+          tag: "img[src]",
+          getAttrs: (dom: any) => ({
+            src: dom.getAttribute("src"),
+            title: dom.getAttribute("title"),
+            alt: dom.getAttribute("alt"),
           }),
         },
       ],
-      toDOM: node => ['img', node.attrs],
+      toDOM: (node: any) => ["img", node.attrs],
     };
   }
 
-  commands({ type }) {
-    return attrs => (state, dispatch) => {
-      const { selection } = state;
+  commands({ type }: { type: NodeType }): any {
+    return (attrs: { [key: string]: string }) => (state: EditorState, dispatch: DispatchFn) => {
+      const { selection }: { selection: TextSelection } = state;
       const position = selection.$cursor ? selection.$cursor.pos : selection.$to.pos;
       const node = type.create(attrs);
       const transaction = state.tr.insert(position, node);
@@ -53,28 +58,39 @@ export default class Image extends Node {
       new Plugin({
         props: {
           handleDOMEvents: {
-            async drop(view, event: DragEvent) {
-              if (!(event.dataTransfer && event.dataTransfer.files && event.dataTransfer.files.length)) {
-                return;
+            drop(view: EditorView<any>, event: Event) {
+              const realEvent = event as DragEvent;
+              if (
+                !(
+                  realEvent.dataTransfer &&
+                  realEvent.dataTransfer.files &&
+                  realEvent.dataTransfer.files.length
+                )
+              ) {
+                return false;
               }
 
-              const images = Array
-                                .from(event.dataTransfer.files)
-                                .filter((file: any) => (/image/i).test(file.type));
+              const images = Array.from(realEvent.dataTransfer.files).filter((file: any) =>
+                /image/i.test(file.type)
+              );
 
               if (images.length === 0) {
-                return;
+                return false;
               }
 
-              event.preventDefault();
+              realEvent.preventDefault();
 
               const { schema } = view.state;
-              const coordinates = view.posAtCoords({ left: event.clientX, top: event.clientY });
-              const client = apolloProvider.defaultClient as ApolloClient<InMemoryCache>;
-              const editorElem = document.getElementById('tiptab-editor');
+              const coordinates = view.posAtCoords({
+                left: realEvent.clientX,
+                top: realEvent.clientY,
+              });
+              if (!coordinates) return false;
+              const client = apolloProvider.defaultClient as ApolloClient<NormalizedCacheObject>;
+              const editorElem = document.getElementById("tiptab-editor");
               const actorId = editorElem && editorElem.dataset.actorId;
 
-              for (const image of images) {
+              images.forEach(async (image) => {
                 const { data } = await client.mutate({
                   mutation: UPLOAD_PICTURE,
                   variables: {
@@ -86,12 +102,12 @@ export default class Image extends Node {
                 const node = schema.nodes.image.create({ src: data.uploadPicture.url });
                 const transaction = view.state.tr.insert(coordinates.pos, node);
                 view.dispatch(transaction);
-              }
+              });
+              return true;
             },
           },
         },
       }),
     ];
   }
-
 }

js/src/components/Event/AddressAutoComplete.vue

@@ -1,133 +1,155 @@
 <template>
-    <div class="address-autocomplete">
-        <b-field expanded>
-            <template slot="label">
-                {{ $t('Find an address') }}
-                <b-button v-if="!gettingLocation" size="is-small" icon-right="map-marker" @click="locateMe" />
-                <span v-else>{{ $t('Getting location') }}</span>
-            </template>
-            <b-autocomplete
-                    :data="addressData"
-                    v-model="queryText"
-                    :placeholder="$t('e.g. 10 Rue Jangot')"
-                    field="fullName"
-                    :loading="isFetching"
-                    @typing="fetchAsyncData"
-                    icon="map-marker"
-                    expanded
-                    @select="updateSelected">
-
-                <template slot-scope="{option}">
-                    <b-icon :icon="option.poiInfos.poiIcon.icon" />
-                    <b>{{ option.poiInfos.name }}</b><br />
-                    <small>{{ option.poiInfos.alternativeName }}</small>
-                </template>
-                <template slot="empty">
-                    <span v-if="isFetching">{{ $t('Searching…') }}</span>
-                    <div v-else-if="queryText.length >= 3" class="is-enabled">
-                        <span>{{ $t('No results for "{queryText}"') }}</span>
-                        <span>{{ $t('You can try another search term or drag and drop the marker on the map', { queryText }) }}</span>
-<!--                        <p class="control" @click="openNewAddressModal">-->
-<!--                            <button type="button" class="button is-primary">{{ $t('Add') }}</button>-->
-<!--                        </p>-->
-                    </div>
-                </template>
-            </b-autocomplete>
-        </b-field>
-        <div class="map" v-if="selected && selected.geom">
-            <map-leaflet
-                    :coords="selected.geom"
-                    :marker="{ text: [selected.poiInfos.name, selected.poiInfos.alternativeName], icon: selected.poiInfos.poiIcon.icon}"
-                    :updateDraggableMarkerCallback="reverseGeoCode"
-                    :options="{ zoom: mapDefaultZoom }"
-                    :readOnly="false"
-            />
-        </div>
-<!--        <b-modal v-if="selected" :active.sync="addressModalActive" :width="640" has-modal-card scroll="keep">-->
-<!--            <div class="modal-card" style="width: auto">-->
-<!--                <header class="modal-card-head">-->
-<!--                    <p class="modal-card-title">{{ $t('Add an address') }}</p>-->
-<!--                </header>-->
-<!--                <section class="modal-card-body">-->
-<!--                    <form>-->
-<!--                        <b-field :label="$t('Name')">-->
-<!--                            <b-input aria-required="true" required v-model="selected.description" />-->
-<!--                        </b-field>-->
-
-<!--                        <b-field :label="$t('Street')">-->
-<!--                            <b-input v-model="selected.street" />-->
-<!--                        </b-field>-->
-
-<!--                        <b-field grouped>-->
-<!--                            <b-field :label="$t('Postal Code')">-->
-<!--                                <b-input v-model="selected.postalCode" />-->
-<!--                            </b-field>-->
-
-<!--                            <b-field :label="$t('Locality')">-->
-<!--                                <b-input v-model="selected.locality" />-->
-<!--                            </b-field>-->
-<!--                        </b-field>-->
-
-<!--                        <b-field grouped>-->
-<!--                            <b-field :label="$t('Region')">-->
-<!--                                <b-input v-model="selected.region" />-->
-<!--                            </b-field>-->
-
-<!--                            <b-field :label="$t('Country')">-->
-<!--                                <b-input v-model="selected.country" />-->
-<!--                            </b-field>-->
-<!--                        </b-field>-->
-<!--                    </form>-->
-<!--                </section>-->
-<!--                <footer class="modal-card-foot">-->
-<!--                    <button class="button" type="button" @click="resetPopup()">{{ $t('Clear') }}</button>-->
-<!--                </footer>-->
-<!--            </div>-->
-<!--        </b-modal>-->
+  <div class="address-autocomplete">
+    <b-field expanded>
+      <template slot="label">
+        {{ $t("Find an address") }}
+        <b-button
+          v-if="!gettingLocation"
+          size="is-small"
+          icon-right="map-marker"
+          @click="locateMe"
+        />
+        <span v-else>{{ $t("Getting location") }}</span>
+      </template>
+      <b-autocomplete
+        :data="addressData"
+        v-model="queryText"
+        :placeholder="$t('e.g. 10 Rue Jangot')"
+        field="fullName"
+        :loading="isFetching"
+        @typing="fetchAsyncData"
+        icon="map-marker"
+        expanded
+        @select="updateSelected"
+      >
+        <template slot-scope="{ option }">
+          <b-icon :icon="option.poiInfos.poiIcon.icon" />
+          <b>{{ option.poiInfos.name }}</b
+          ><br />
+          <small>{{ option.poiInfos.alternativeName }}</small>
+        </template>
+        <template slot="empty">
+          <span v-if="isFetching">{{ $t("Searching…") }}</span>
+          <div v-else-if="queryText.length >= 3" class="is-enabled">
+            <span>{{ $t('No results for "{queryText}"') }}</span>
+            <span>{{
+              $t("You can try another search term or drag and drop the marker on the map", {
+                queryText,
+              })
+            }}</span>
+            <!--                        <p class="control" @click="openNewAddressModal">-->
+            <!--                            <button type="button" class="button is-primary">{{ $t('Add') }}</button>-->
+            <!--                        </p>-->
+          </div>
+        </template>
+      </b-autocomplete>
+    </b-field>
+    <div class="map" v-if="selected && selected.geom">
+      <map-leaflet
+        :coords="selected.geom"
+        :marker="{
+          text: [selected.poiInfos.name, selected.poiInfos.alternativeName],
+          icon: selected.poiInfos.poiIcon.icon,
+        }"
+        :updateDraggableMarkerCallback="reverseGeoCode"
+        :options="{ zoom: mapDefaultZoom }"
+        :readOnly="false"
+      />
     </div>
+    <!--        <b-modal v-if="selected" :active.sync="addressModalActive" :width="640" has-modal-card scroll="keep">-->
+    <!--            <div class="modal-card" style="width: auto">-->
+    <!--                <header class="modal-card-head">-->
+    <!--                    <p class="modal-card-title">{{ $t('Add an address') }}</p>-->
+    <!--                </header>-->
+    <!--                <section class="modal-card-body">-->
+    <!--                    <form>-->
+    <!--                        <b-field :label="$t('Name')">-->
+    <!--                            <b-input aria-required="true" required v-model="selected.description" />-->
+    <!--                        </b-field>-->
+
+    <!--                        <b-field :label="$t('Street')">-->
+    <!--                            <b-input v-model="selected.street" />-->
+    <!--                        </b-field>-->
+
+    <!--                        <b-field grouped>-->
+    <!--                            <b-field :label="$t('Postal Code')">-->
+    <!--                                <b-input v-model="selected.postalCode" />-->
+    <!--                            </b-field>-->
+
+    <!--                            <b-field :label="$t('Locality')">-->
+    <!--                                <b-input v-model="selected.locality" />-->
+    <!--                            </b-field>-->
+    <!--                        </b-field>-->
+
+    <!--                        <b-field grouped>-->
+    <!--                            <b-field :label="$t('Region')">-->
+    <!--                                <b-input v-model="selected.region" />-->
+    <!--                            </b-field>-->
+
+    <!--                            <b-field :label="$t('Country')">-->
+    <!--                                <b-input v-model="selected.country" />-->
+    <!--                            </b-field>-->
+    <!--                        </b-field>-->
+    <!--                    </form>-->
+    <!--                </section>-->
+    <!--                <footer class="modal-card-foot">-->
+    <!--                    <button class="button" type="button" @click="resetPopup()">{{ $t('Clear') }}</button>-->
+    <!--                </footer>-->
+    <!--            </div>-->
+    <!--        </b-modal>-->
+  </div>
 </template>
 <script lang="ts">
-import { Component, Prop, Vue, Watch } from 'vue-property-decorator';
-import { Address, IAddress } from '@/types/address.model';
-import { ADDRESS, REVERSE_GEOCODE } from '@/graphql/address';
-import { Modal } from 'buefy/dist/components/dialog';
-import { LatLng } from 'leaflet';
-import { debounce } from 'lodash';
-import { CONFIG } from '@/graphql/config';
-import { IConfig } from '@/types/config.model';
+import { Component, Prop, Vue, Watch } from "vue-property-decorator";
+import { LatLng } from "leaflet";
+import { debounce } from "lodash";
+import { Address, IAddress } from "../../types/address.model";
+import { ADDRESS, REVERSE_GEOCODE } from "../../graphql/address";
+import { CONFIG } from "../../graphql/config";
+import { IConfig } from "../../types/config.model";
 
 @Component({
   components: {
-    'map-leaflet': () => import(/* webpackChunkName: "map" */ '@/components/Map.vue'),
-    Modal,
+    "map-leaflet": () => import(/* webpackChunkName: "map" */ "@/components/Map.vue"),
   },
   apollo: {
     config: CONFIG,
   },
 })
 export default class AddressAutoComplete extends Vue {
-
   @Prop({ required: true }) value!: IAddress;
 
   addressData: IAddress[] = [];
+
   selected: IAddress = new Address();
-  isFetching: boolean = false;
-  queryText: string = (this.value && (new Address(this.value)).fullName) || '';
-  addressModalActive: boolean = false;
-  private gettingLocation: boolean = false;
+
+  isFetching = false;
+
+  queryText: string = (this.value && new Address(this.value).fullName) || "";
+
+  addressModalActive = false;
+
+  private gettingLocation = false;
+
   private location!: Position;
+
   private gettingLocationError: any;
-  private mapDefaultZoom: number = 15;
+
+  private mapDefaultZoom = 15;
+
   config!: IConfig;
 
-  // We put this in data because of issues like https://github.com/vuejs/vue-class-component/issues/263
+  fetchAsyncData!: Function;
+
+  // We put this in data because of issues like
+  // https://github.com/vuejs/vue-class-component/issues/263
   data() {
     return {
       fetchAsyncData: debounce(this.asyncData, 200),
     };
   }
 
-  async asyncData(query: String) {
+  async asyncData(query: string) {
     if (!query.length) {
       this.addressData = [];
       this.selected = new Address();
@@ -142,27 +164,27 @@ export default class AddressAutoComplete extends Vue {
     this.isFetching = true;
     const result = await this.$apollo.query({
       query: ADDRESS,
-      fetchPolicy: 'network-only',
+      fetchPolicy: "network-only",
       variables: {
         query,
         locale: this.$i18n.locale,
       },
     });
 
-    this.addressData = result.data.searchAddress.map(address => new Address(address));
+    this.addressData = result.data.searchAddress.map((address: IAddress) => new Address(address));
     this.isFetching = false;
   }
 
-  @Watch('config')
-    watchConfig(config: IConfig) {
+  @Watch("config")
+  watchConfig(config: IConfig) {
     if (!config.geocoding.autocomplete) {
-      // If autocomplete is disabled, we put a larger debounce value so that we don't request with incomplete address
-      // @ts-ignore
+      // If autocomplete is disabled, we put a larger debounce value
+      // so that we don't request with incomplete address
       this.fetchAsyncData = debounce(this.asyncData, 2000);
     }
   }
 
-  @Watch('value')
+  @Watch("value")
   updateEditing() {
     if (!(this.value && this.value.id)) return;
     this.selected = this.value;
@@ -170,10 +192,10 @@ export default class AddressAutoComplete extends Vue {
     this.queryText = `${address.poiInfos.name} ${address.poiInfos.alternativeName}`;
   }
 
-  updateSelected(option) {
+  updateSelected(option: IAddress) {
     if (option == null) return;
     this.selected = option;
-    this.$emit('input', this.selected);
+    this.$emit("input", this.selected);
   }
 
   resetPopup() {
@@ -185,8 +207,8 @@ export default class AddressAutoComplete extends Vue {
     this.addressModalActive = true;
   }
 
-  async reverseGeoCode(e: LatLng, zoom: Number) {
-    // If the position has been updated through autocomplete selection, no need to geocode it !
+  async reverseGeoCode(e: LatLng, zoom: number) {
+    // If the position has been updated through autocomplete selection, no need to geocode it!
     if (this.checkCurrentPosition(e)) return;
     const result = await this.$apollo.query({
       query: REVERSE_GEOCODE,
@@ -198,74 +220,77 @@ export default class AddressAutoComplete extends Vue {
       },
     });
 
-    this.addressData = result.data.reverseGeocode.map(address => new Address(address));
+    this.addressData = result.data.reverseGeocode.map((address: IAddress) => new Address(address));
     const defaultAddress = new Address(this.addressData[0]);
     this.selected = defaultAddress;
-    this.$emit('input', this.selected);
+    this.$emit("input", this.selected);
     this.queryText = `${defaultAddress.poiInfos.name} ${defaultAddress.poiInfos.alternativeName}`;
   }
 
   checkCurrentPosition(e: LatLng) {
     if (!this.selected || !this.selected.geom) return false;
-    const lat = parseFloat(this.selected.geom.split(';')[1]);
-    const lon = parseFloat(this.selected.geom.split(';')[0]);
+    const lat = parseFloat(this.selected.geom.split(";")[1]);
+    const lon = parseFloat(this.selected.geom.split(";")[0]);
 
     return e.lat === lat && e.lng === lon;
   }
 
   async locateMe(): Promise<void> {
-
     this.gettingLocation = true;
     try {
       this.gettingLocation = false;
-      this.location = await this.getLocation();
+      this.location = await AddressAutoComplete.getLocation();
       this.mapDefaultZoom = 12;
-      this.reverseGeoCode(new LatLng(this.location.coords.latitude, this.location.coords.longitude), 12);
+      this.reverseGeoCode(
+        new LatLng(this.location.coords.latitude, this.location.coords.longitude),
+        12
+      );
     } catch (e) {
       this.gettingLocation = false;
       this.gettingLocationError = e.message;
     }
   }
 
-  async getLocation(): Promise<Position> {
+  static async getLocation(): Promise<Position> {
     return new Promise((resolve, reject) => {
-
-      if (!('geolocation' in navigator)) {
-        reject(new Error('Geolocation is not available.'));
+      if (!("geolocation" in navigator)) {
+        reject(new Error("Geolocation is not available."));
       }
 
-      navigator.geolocation.getCurrentPosition(pos => {
-        resolve(pos);
-      },                                       err => {
-        reject(err);
-      });
-
+      navigator.geolocation.getCurrentPosition(
+        (pos) => {
+          resolve(pos);
+        },
+        (err) => {
+          reject(err);
+        }
+      );
     });
   }
 }
 </script>
 <style lang="scss">
-    .address-autocomplete {
-        margin-bottom: 0.75rem;
-    }
+.address-autocomplete {
+  margin-bottom: 0.75rem;
+}
 
-    .autocomplete {
-        .dropdown-menu {
-            z-index: 2000;
-        }
+.autocomplete {
+  .dropdown-menu {
+    z-index: 2000;
+  }
 
-        .dropdown-item.is-disabled {
-            opacity: 1 !important;
-            cursor: auto;
-        }
-    }
+  .dropdown-item.is-disabled {
+    opacity: 1 !important;
+    cursor: auto;
+  }
+}
 
-    .read-only {
-        cursor: pointer;
-    }
+.read-only {
+  cursor: pointer;
+}
 
-    .map {
-        height: 400px;
-        width: 100%;
-    }
+.map {
+  height: 400px;
+  width: 100%;
+}
 </style>

js/src/components/Event/DateCalendarIcon.vue

@@ -12,13 +12,13 @@
 </docs>
 
 <template>
-    <time class="datetime-container" :datetime="dateObj.getUTCSeconds()">
-        <span class="month">{{ month }}</span>
-        <span class="day">{{ day }}</span>
-    </time>
+  <time class="datetime-container" :datetime="dateObj.getUTCSeconds()">
+    <span class="month">{{ month }}</span>
+    <span class="day">{{ day }}</span>
+  </time>
 </template>
 <script lang="ts">
-import { Component, Prop, Vue } from 'vue-property-decorator';
+import { Component, Prop, Vue } from "vue-property-decorator";
 
 @Component
 export default class DateCalendarIcon extends Vue {
@@ -32,44 +32,44 @@ export default class DateCalendarIcon extends Vue {
   }
 
   get month() {
-    return this.dateObj.toLocaleString(undefined, { month: 'short' });
+    return this.dateObj.toLocaleString(undefined, { month: "short" });
   }
 
   get day() {
-    return this.dateObj.toLocaleString(undefined, { day: 'numeric' });
+    return this.dateObj.toLocaleString(undefined, { day: "numeric" });
   }
 }
 </script>
 
 <style lang="scss" scoped>
-  time.datetime-container {
-    background: #f6f7f8;
-    border: 1px solid rgba(46,62,72,.12);
-    border-radius: 8px;
-    display: flex;
-    flex-direction: column;
-    justify-content: center;
-    /*height: 50px;*/
-    width: 50px;
-    padding: 8px;
-    text-align: center;
+time.datetime-container {
+  background: #f6f7f8;
+  border: 1px solid rgba(46, 62, 72, 0.12);
+  border-radius: 8px;
+  display: flex;
+  flex-direction: column;
+  justify-content: center;
+  /*height: 50px;*/
+  width: 50px;
+  padding: 8px;
+  text-align: center;
 
-    span {
-      display: block;
-      font-weight: 600;
+  span {
+    display: block;
+    font-weight: 600;
 
-      &.month {
-        color: #fa3e3e;
-        padding: 2px 0;
-        font-size: 12px;
-        line-height: 12px;
-        text-transform: uppercase;
-      }
+    &.month {
+      color: #fa3e3e;
+      padding: 2px 0;
+      font-size: 12px;
+      line-height: 12px;
+      text-transform: uppercase;
+    }
 
-      &.day {
-        font-size: 20px;
-        line-height: 20px;
-      }
+    &.day {
+      font-size: 20px;
+      line-height: 20px;
     }
   }
+}
 </style>

js/src/components/Event/DateTimePicker.vue

@@ -12,40 +12,41 @@
 ```
 </docs>
 <template>
-    <div class="field is-horizontal">
-        <div class="field-label is-normal">
-            <label class="label">{{ label }}</label>
-        </div>
-        <div class="field-body">
-            <div class="field is-narrow is-grouped calendar-picker">
-                <b-datepicker
-                        :day-names="localeShortWeekDayNamesProxy"
-                        :month-names="localeMonthNamesProxy"
-                        :first-day-of-week="parseInt($t('firstDayOfWeek'), 10)"
-                        :min-date="minDatetime"
-                        :max-date="maxDatetime"
-                        v-model="dateWithTime"
-                        :placeholder="$t('Click to select')"
-                        :years-range="[-2,10]"
-                        icon="calendar"
-                        class="is-narrow"
-                />
-                <b-timepicker
-                        placeholder="Type or select a time..."
-                        icon="clock"
-                        v-model="dateWithTime"
-                        :min-time="minDatetime"
-                        :max-time="maxDatetime"
-                        size="is-small"
-                        inline>
-                </b-timepicker>
-            </div>
-        </div>
+  <div class="field is-horizontal">
+    <div class="field-label is-normal">
+      <label class="label">{{ label }}</label>
     </div>
+    <div class="field-body">
+      <div class="field is-narrow is-grouped calendar-picker">
+        <b-datepicker
+          :day-names="localeShortWeekDayNamesProxy"
+          :month-names="localeMonthNamesProxy"
+          :first-day-of-week="parseInt($t('firstDayOfWeek'), 10)"
+          :min-date="minDatetime"
+          :max-date="maxDatetime"
+          v-model="dateWithTime"
+          :placeholder="$t('Click to select')"
+          :years-range="[-2, 10]"
+          icon="calendar"
+          class="is-narrow"
+        />
+        <b-timepicker
+          placeholder="Type or select a time..."
+          icon="clock"
+          v-model="dateWithTime"
+          :min-time="minDatetime"
+          :max-time="maxDatetime"
+          size="is-small"
+          inline
+        >
+        </b-timepicker>
+      </div>
+    </div>
+  </div>
 </template>
 <script lang="ts">
-import { Component, Prop, Vue, Watch } from 'vue-property-decorator';
-import { localeMonthNames, localeShortWeekDayNames } from '@/utils/datetime';
+import { Component, Prop, Vue, Watch } from "vue-property-decorator";
+import { localeMonthNames, localeShortWeekDayNames } from "@/utils/datetime";
 
 @Component
 export default class DateTimePicker extends Vue {
@@ -58,34 +59,35 @@ export default class DateTimePicker extends Vue {
   /**
    * What's shown besides the picker
    */
-  @Prop({ required: false, type: String, default: 'Datetime' }) label!: string;
+  @Prop({ required: false, type: String, default: "Datetime" }) label!: string;
 
   /**
    * The step for the time input
    */
   @Prop({ required: false, type: Number, default: 1 }) step!: number;
 
-    /**
-     * Earliest date available for selection
-     */
+  /**
+   * Earliest date available for selection
+   */
   @Prop({ required: false, type: Date, default: null }) minDatetime!: Date;
 
-      /**
-     * Latest date available for selection
-     */
+  /**
+   * Latest date available for selection
+   */
   @Prop({ required: false, type: Date, default: null }) maxDatetime!: Date;
 
   dateWithTime: Date = this.value;
 
   localeShortWeekDayNamesProxy = localeShortWeekDayNames();
+
   localeMonthNamesProxy = localeMonthNames();
 
-  @Watch('value')
+  @Watch("value")
   updateValue() {
     this.dateWithTime = this.value;
   }
 
-  @Watch('dateWithTime')
+  @Watch("dateWithTime")
   updateDateWithTimeWatcher() {
     this.updateDateTime();
   }
@@ -96,21 +98,21 @@ export default class DateTimePicker extends Vue {
      *
      * @type {Date}
      */
-    this.$emit('input', this.dateWithTime);
+    this.$emit("input", this.dateWithTime);
   }
 }
 </script>
 
 <style lang="scss" scoped>
-    .timepicker {
-        /deep/ .dropdown-content {
-            padding: 0;
-        }
-    }
+.timepicker {
+  /deep/ .dropdown-content {
+    padding: 0;
+  }
+}
 
-    .calendar-picker {
-        /deep/ .dropdown-menu {
-            z-index: 200;
-        }
-    }
+.calendar-picker {
+  /deep/ .dropdown-menu {
+    z-index: 200;
+  }
+}
 </style>

js/src/components/Event/EventCard.vue

@@ -5,7 +5,7 @@ A simple card for an event
 
 ```vue
 <EventCard
-  :event="{ 
+  :event="{
     title: 'Vue Styleguidist first meetup: learn the basics!',
     beginsOn: new Date(),
     tags: [
@@ -29,9 +29,16 @@ A simple card for an event
 <template>
   <router-link class="card" :to="{ name: 'Event', params: { uuid: event.uuid } }">
     <div class="card-image">
-      <figure class="image is-16by9" :style="`background-image: url('${event.picture ? event.picture.url : '/img/mobilizon_default_card.png'}')`">
+      <figure
+        class="image is-16by9"
+        :style="`background-image: url('${
+          event.picture ? event.picture.url : '/img/mobilizon_default_card.png'
+        }')`"
+      >
         <div class="tag-container" v-if="event.tags">
-          <b-tag v-for="tag in event.tags.slice(0, 3)" :key="tag.slug" type="is-light">{{ tag.title }}</b-tag>
+          <b-tag v-for="tag in event.tags.slice(0, 3)" :key="tag.slug" type="is-light">{{
+            tag.title
+          }}</b-tag>
         </div>
       </figure>
     </div>
@@ -43,57 +50,57 @@ A simple card for an event
         <div class="media-content">
           <p class="event-title">{{ event.title }}</p>
           <div class="event-subtitle" v-if="event.physicalAddress">
-<!--            <p>{{ $t('By @{username}', { username: actor.preferredUsername }) }}</p>-->
+            <!--            <p>{{ $t('By @{username}', { username: actor.preferredUsername }) }}</p>-->
             <span>
-                {{ event.physicalAddress.description }}, {{ event.physicalAddress.locality }}
+              {{ event.physicalAddress.description }}, {{ event.physicalAddress.locality }}
             </span>
           </div>
         </div>
       </div>
     </div>
-<!--    <div class="date-and-title">-->
-<!--      <div class="date-component">-->
-<!--        <date-calendar-icon v-if="!mergedOptions.hideDate" :date="event.beginsOn" />-->
-<!--      </div>-->
-<!--      <div class="title-wrapper">-->
-<!--        <h4>{{ event.title }}</h4>-->
-<!--        <div class="organizer-place-wrapper has-text-grey">-->
-<!--          <span>{{ $t('By @{username}', { username: actor.preferredUsername }) }}</span>-->
-<!--           ·-->
-<!--          <span v-if="event.physicalAddress">-->
-<!--            {{ event.physicalAddress.description }}, {{ event.physicalAddress.locality }}-->
-<!--          </span>-->
-<!--        </div>-->
-<!--      </div>-->
-<!--    </div>-->
-<!--    <div v-if="!mergedOptions.hideDetails" class="details">-->
-<!--      <div v-if="event.participants.length > 0 &&-->
-<!--      mergedOptions.loggedPerson &&-->
-<!--      event.participants[0].actor.id === mergedOptions.loggedPerson.id">-->
-<!--        <b-tag type="is-info"><translate>Organizer</translate></b-tag>-->
-<!--      </div>-->
-<!--      <div v-else-if="event.participants.length === 1">-->
-<!--        <translate-->
-<!--                :translate-params="{name: event.participants[0].actor.preferredUsername}"-->
-<!--        >{name} organizes this event</translate>-->
-<!--      </div>-->
-<!--      <div v-else>-->
-<!--        <span v-for="participant in event.participants" :key="participant.actor.uuid">-->
-<!--          {{ participant.actor.preferredUsername }}-->
-<!--          <span v-if="participant.role === ParticipantRole.CREATOR">(organizer)</span>,-->
-<!--          &lt;!&ndash; <translate-->
-<!--            :translate-params="{name: participant.actor.preferredUsername}"-->
-<!--          >&nbsp;{name} is in,</translate>&ndash;&gt;-->
-<!--        </span>-->
-<!--      </div>-->
-    </router-link>
+    <!--    <div class="date-and-title">-->
+    <!--      <div class="date-component">-->
+    <!--        <date-calendar-icon v-if="!mergedOptions.hideDate" :date="event.beginsOn" />-->
+    <!--      </div>-->
+    <!--      <div class="title-wrapper">-->
+    <!--        <h4>{{ event.title }}</h4>-->
+    <!--        <div class="organizer-place-wrapper has-text-grey">-->
+    <!--          <span>{{ $t('By @{username}', { username: actor.preferredUsername }) }}</span>-->
+    <!--           ·-->
+    <!--          <span v-if="event.physicalAddress">-->
+    <!--            {{ event.physicalAddress.description }}, {{ event.physicalAddress.locality }}-->
+    <!--          </span>-->
+    <!--        </div>-->
+    <!--      </div>-->
+    <!--    </div>-->
+    <!--    <div v-if="!mergedOptions.hideDetails" class="details">-->
+    <!--      <div v-if="event.participants.length > 0 &&-->
+    <!--      mergedOptions.loggedPerson &&-->
+    <!--      event.participants[0].actor.id === mergedOptions.loggedPerson.id">-->
+    <!--        <b-tag type="is-info"><translate>Organizer</translate></b-tag>-->
+    <!--      </div>-->
+    <!--      <div v-else-if="event.participants.length === 1">-->
+    <!--        <translate-->
+    <!--                :translate-params="{name: event.participants[0].actor.preferredUsername}"-->
+    <!--        >{name} organizes this event</translate>-->
+    <!--      </div>-->
+    <!--      <div v-else>-->
+    <!--        <span v-for="participant in event.participants" :key="participant.actor.uuid">-->
+    <!--          {{ participant.actor.preferredUsername }}-->
+    <!--          <span v-if="participant.role === ParticipantRole.CREATOR">(organizer)</span>,-->
+    <!--          &lt;!&ndash; <translate-->
+    <!--            :translate-params="{name: participant.actor.preferredUsername}"-->
+    <!--          >&nbsp;{name} is in,</translate>&ndash;&gt;-->
+    <!--        </span>-->
+    <!--      </div>-->
+  </router-link>
 </template>
 
 <script lang="ts">
-import { IEvent, IEventCardOptions, ParticipantRole } from '@/types/event.model';
-import { Component, Prop, Vue } from 'vue-property-decorator';
-import DateCalendarIcon from '@/components/Event/DateCalendarIcon.vue';
-import { Actor, Person } from '@/types/actor';
+import { IEvent, IEventCardOptions, ParticipantRole } from "@/types/event.model";
+import { Component, Prop, Vue } from "vue-property-decorator";
+import DateCalendarIcon from "@/components/Event/DateCalendarIcon.vue";
+import { Actor, Person } from "@/types/actor";
 
 @Component({
   components: {
@@ -102,6 +109,7 @@ import { Actor, Person } from '@/types/actor';
 })
 export default class EventCard extends Vue {
   @Prop({ required: true }) event!: IEvent;
+
   @Prop({ required: false }) options!: IEventCardOptions;
 
   ParticipantRole = ParticipantRole;
@@ -118,102 +126,103 @@ export default class EventCard extends Vue {
   }
 
   get actor(): Actor {
-    return Object.assign(new Person(), this.event.organizerActor || this.mergedOptions.organizerActor);
+    return Object.assign(
+      new Person(),
+      this.event.organizerActor || this.mergedOptions.organizerActor
+    );
   }
-
 }
 </script>
 
 <style lang="scss" scoped>
-  @import "../../variables";
+@import "../../variables";
 
-  a.card {
-    display: block;
-    background: $secondary;
-
-    &:hover {
-      // box-shadow: 0 0 5px 0 rgba(0, 0, 0, 1);
-      transform: scale(1.01, 1.01);
-      &:after {
-          opacity: 1;
-      }
-    }
-
-    border-radius: 5px;
-    box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
-    transition: all 0.6s cubic-bezier(0.165, 0.84, 0.44, 1);
+a.card {
+  display: block;
+  background: $secondary;
 
+  &:hover {
+    // box-shadow: 0 0 5px 0 rgba(0, 0, 0, 1);
+    transform: scale(1.01, 1.01);
     &:after {
-      content: "";
-      border-radius: 5px;
-      position: absolute;
-      z-index: -1;
-      top: 0;
-      left: 0;
-      width: 100%;
-      height: 100%;
-      box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
-      opacity: 0;
-      transition: all 0.6s cubic-bezier(0.165, 0.84, 0.44, 1);
-    }
-
-    div.tag-container {
-      position: absolute;
-      top: 10px;
-      right: 0;
-      margin-right: -3px;
-      z-index: 10;
-      max-width: 40%;
-
-      span.tag {
-        margin: 5px auto;
-        text-overflow: ellipsis;
-        overflow: hidden;
-        display: block;
-        font-size: 1em;
-        line-height: 1.75em;
-      }
-    }
-
-    div.card-image {
-      background: $secondary;
-
-      figure.image {
-        background-size: cover;
-        background-position: center;
-      }
-    }
-
-    .card-content {
-      padding: 0.5rem;
-
-      .event-title {
-        font-size: 1.25rem;
-        line-height: 1.25rem;
-          display: -webkit-box;
-          -webkit-line-clamp: 2;
-          -webkit-box-orient: vertical;
-          overflow: hidden;
-          min-height: 2.4rem;
-      }
-
-      .event-subtitle {
-        font-size: 0.85rem;
-          display: inline-flex;
-          flex-wrap: wrap;
-
-        span {
-            width: 15rem;
-            display: block;
-            overflow: hidden;
-
-            flex-grow: 1;
-
-            text-overflow: ellipsis;
-            white-space: nowrap;
-        }
-      }
+      opacity: 1;
     }
   }
 
+  border-radius: 5px;
+  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.1);
+  transition: all 0.6s cubic-bezier(0.165, 0.84, 0.44, 1);
+
+  &:after {
+    content: "";
+    border-radius: 5px;
+    position: absolute;
+    z-index: -1;
+    top: 0;
+    left: 0;
+    width: 100%;
+    height: 100%;
+    box-shadow: 0 5px 15px rgba(0, 0, 0, 0.3);
+    opacity: 0;
+    transition: all 0.6s cubic-bezier(0.165, 0.84, 0.44, 1);
+  }
+
+  div.tag-container {
+    position: absolute;
+    top: 10px;
+    right: 0;
+    margin-right: -3px;
+    z-index: 10;
+    max-width: 40%;
+
+    span.tag {
+      margin: 5px auto;
+      text-overflow: ellipsis;
+      overflow: hidden;
+      display: block;
+      font-size: 1em;
+      line-height: 1.75em;
+    }
+  }
+
+  div.card-image {
+    background: $secondary;
+
+    figure.image {
+      background-size: cover;
+      background-position: center;
+    }
+  }
+
+  .card-content {
+    padding: 0.5rem;
+
+    .event-title {
+      font-size: 1.25rem;
+      line-height: 1.25rem;
+      display: -webkit-box;
+      -webkit-line-clamp: 2;
+      -webkit-box-orient: vertical;
+      overflow: hidden;
+      min-height: 2.4rem;
+    }
+
+    .event-subtitle {
+      font-size: 0.85rem;
+      display: inline-flex;
+      flex-wrap: wrap;
+
+      span {
+        width: 15rem;
+        display: block;
+        overflow: hidden;
+
+        flex-grow: 1;
+
+        text-overflow: ellipsis;
+        white-space: nowrap;
+      }
+    }
+  }
+}
 </style>

js/src/components/Event/EventFullDate.vue

@@ -18,55 +18,87 @@
 </docs>
 
 <template>
-    <span v-if="!endsOn">{{ beginsOn | formatDateTimeString(showStartTime) }}</span>
-    <span v-else-if="isSameDay() && showStartTime && showEndTime">
-        {{ $t('On {date} from {startTime} to {endTime}', {date: formatDate(beginsOn), startTime: formatTime(beginsOn), endTime: formatTime(endsOn)}) }}
-    </span>
-    <span v-else-if="isSameDay() && !showStartTime && showEndTime">
-        {{ $t('On {date} ending at {endTime}', {date: formatDate(beginsOn), endTime: formatTime(endsOn)}) }}
-    </span>
-    <span v-else-if="isSameDay() && showStartTime && !showEndTime">
-        {{ $t('On {date} starting at {startTime}', {date: formatDate(beginsOn), startTime: formatTime(beginsOn)}) }}
-    </span>
-    <span v-else-if="isSameDay()">
-        {{ $t('On {date}', {date: formatDate(beginsOn)}) }}
-    </span>
-    <span v-else-if="endsOn && showStartTime && showEndTime">
-        {{ $t('From the {startDate} at {startTime} to the {endDate} at {endTime}',
-        {startDate: formatDate(beginsOn), startTime: formatTime(beginsOn), endDate: formatDate(endsOn), endTime: formatTime(endsOn)}) }}
-    </span>
-    <span v-else-if="endsOn && showStartTime">
-        {{ $t('From the {startDate} at {startTime} to the {endDate}',
-        {startDate: formatDate(beginsOn), startTime: formatTime(beginsOn), endDate: formatDate(endsOn)}) }}
-    </span>
-    <span v-else-if="endsOn">
-        {{ $t('From the {startDate} to the {endDate}',
-        {startDate: formatDate(beginsOn), endDate: formatDate(endsOn)}) }}
-    </span>
+  <span v-if="!endsOn">{{ beginsOn | formatDateTimeString(showStartTime) }}</span>
+  <span v-else-if="isSameDay() && showStartTime && showEndTime">
+    {{
+      $t("On {date} from {startTime} to {endTime}", {
+        date: formatDate(beginsOn),
+        startTime: formatTime(beginsOn),
+        endTime: formatTime(endsOn),
+      })
+    }}
+  </span>
+  <span v-else-if="isSameDay() && !showStartTime && showEndTime">
+    {{
+      $t("On {date} ending at {endTime}", {
+        date: formatDate(beginsOn),
+        endTime: formatTime(endsOn),
+      })
+    }}
+  </span>
+  <span v-else-if="isSameDay() && showStartTime && !showEndTime">
+    {{
+      $t("On {date} starting at {startTime}", {
+        date: formatDate(beginsOn),
+        startTime: formatTime(beginsOn),
+      })
+    }}
+  </span>
+  <span v-else-if="isSameDay()">{{ $t("On {date}", { date: formatDate(beginsOn) }) }}</span>
+  <span v-else-if="endsOn && showStartTime && showEndTime">
+    {{
+      $t("From the {startDate} at {startTime} to the {endDate} at {endTime}", {
+        startDate: formatDate(beginsOn),
+        startTime: formatTime(beginsOn),
+        endDate: formatDate(endsOn),
+        endTime: formatTime(endsOn),
+      })
+    }}
+  </span>
+  <span v-else-if="endsOn && showStartTime">
+    {{
+      $t("From the {startDate} at {startTime} to the {endDate}", {
+        startDate: formatDate(beginsOn),
+        startTime: formatTime(beginsOn),
+        endDate: formatDate(endsOn),
+      })
+    }}
+  </span>
+  <span v-else-if="endsOn">
+    {{
+      $t("From the {startDate} to the {endDate}", {
+        startDate: formatDate(beginsOn),
+        endDate: formatDate(endsOn),
+      })
+    }}
+  </span>
 </template>
 <script lang="ts">
-import { Component, Prop, Vue } from 'vue-property-decorator';
+import { Component, Prop, Vue } from "vue-property-decorator";
 
 @Component
 export default class EventFullDate extends Vue {
   @Prop({ required: true }) beginsOn!: string;
+
   @Prop({ required: false }) endsOn!: string;
+
   @Prop({ required: false, default: true }) showStartTime!: boolean;
+
   @Prop({ required: false, default: true }) showEndTime!: boolean;
 
-  formatDate(value) {
-    if (!this.$options.filters) return;
+  formatDate(value: Date): string | undefined {
+    if (!this.$options.filters) return undefined;
     return this.$options.filters.formatDateString(value);
   }
 
-  formatTime(value) {
-    if (!this.$options.filters) return;
+  formatTime(value: Date): string | undefined {
+    if (!this.$options.filters) return undefined;
     return this.$options.filters.formatTimeString(value);
   }
 
-  isSameDay() {
-    const sameDay = ((new Date(this.beginsOn)).toDateString()) === ((new Date(this.endsOn)).toDateString());
-    return this.endsOn && sameDay;
+  isSameDay(): boolean {
+    const sameDay = new Date(this.beginsOn).toDateString() === new Date(this.endsOn).toDateString();
+    return this.endsOn !== undefined && sameDay;
   }
 }
 </script>

js/src/components/Event/EventListCard.vue

@@ -1,55 +1,3 @@
-<docs>
-A simple card for a participation (we should rename it)
-
-```vue
-<template>
-  <div>
-    <EventListCard
-      :participation="participation"
-      />
-  </div>
-</template>
-<script>
-export default {
-  data() {
-    return {
-      participation: {
-        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
-          }
-        },
-        actor: {
-          preferredUsername: 'tcit',
-            name: 'Some Random Dude',
-            domain: null,
-            id: 4,
-            displayName() { return 'Some random dude' }
-        },
-        role: 'CREATOR',
-      }
-    }
-  }
-}
-</script>
-```
-</docs>
-
 <template>
   <article class="box">
     <div class="columns">
@@ -58,37 +6,72 @@ export default {
           <div class="date-component">
             <date-calendar-icon :date="participation.event.beginsOn" />
           </div>
-          <router-link :to="{ name: RouteName.EVENT, params: { uuid: participation.event.uuid } }"><h2 class="title">{{participation.event.title }}</h2></router-link>
+          <router-link :to="{ name: RouteName.EVENT, params: { uuid: participation.event.uuid } }">
+            <h2 class="title">{{ participation.event.title }}</h2>
+          </router-link>
         </div>
         <div class="participation-actor has-text-grey">
-          <span v-if="participation.event.physicalAddress && participation.event.physicalAddress.locality">{{ participation.event.physicalAddress.locality }} - </span>
+          <span
+            v-if="
+              participation.event.physicalAddress && participation.event.physicalAddress.locality
+            "
+            >{{ participation.event.physicalAddress.locality }} -</span
+          >
           <span>
-            <span>{{ $t('Organized by {name}', { name: participation.event.organizerActor.displayName() } ) }}</span>
-            <span v-if="participation.role === ParticipantRole.PARTICIPANT">{{ $t('Going as {name}', { name: participation.actor.displayName() }) }}</span>
+            <span>
+              {{
+                $t("Organized by {name}", {
+                  name: participation.event.organizerActor.displayName(),
+                })
+              }}
+            </span>
+            <span v-if="participation.role === ParticipantRole.PARTICIPANT">
+              {{ $t("Going as {name}", { name: participation.actor.displayName() }) }}
+            </span>
           </span>
         </div>
         <div class="columns">
           <span class="column is-narrow">
             <b-icon icon="earth" v-if="participation.event.visibility === EventVisibility.PUBLIC" />
-            <b-icon icon="lock-open" v-if="participation.event.visibility === EventVisibility.UNLISTED" />
+            <b-icon
+              icon="lock-open"
+              v-if="participation.event.visibility === EventVisibility.UNLISTED"
+            />
             <b-icon icon="lock" v-if="participation.event.visibility === EventVisibility.PRIVATE" />
           </span>
           <span class="column is-narrow participant-stats">
             <span v-if="participation.event.options.maximumAttendeeCapacity !== 0">
-              {{ $t('{approved} / {total} seats', {approved: participation.event.participantStats.participant, total: participation.event.options.maximumAttendeeCapacity }) }}
-<!--              <b-progress-->
-<!--                      v-if="participation.event.options.maximumAttendeeCapacity > 0"-->
-<!--                      size="is-medium"-->
-<!--                      :value="participation.event.participantStats.participant * 100 / participation.event.options.maximumAttendeeCapacity">-->
-<!--              </b-progress>-->
+              {{
+                $t("{approved} / {total} seats", {
+                  approved: participation.event.participantStats.participant,
+                  total: participation.event.options.maximumAttendeeCapacity,
+                })
+              }}
             </span>
             <span v-else>
-              {{ $tc('{count} participants', participation.event.participantStats.participant, { count: participation.event.participantStats.participant })}}
+              {{
+                $tc("{count} participants", participation.event.participantStats.participant, {
+                  count: participation.event.participantStats.participant,
+                })
+              }}
             </span>
-            <span
-              v-if="participation.event.participantStats.notApproved > 0">
-              <b-button type="is-text" @click="gotToWithCheck(participation, { name: RouteName.PARTICIPATIONS, params: { eventId: participation.event.uuid } })">
-                {{ $tc('{count} requests waiting', participation.event.participantStats.notApproved, { count: participation.event.participantStats.notApproved })}}
+            <span v-if="participation.event.participantStats.notApproved > 0">
+              <b-button
+                type="is-text"
+                @click="
+                  gotToWithCheck(participation, {
+                    name: RouteName.PARTICIPATIONS,
+                    params: { eventId: participation.event.uuid },
+                  })
+                "
+              >
+                {{
+                  $tc(
+                    "{count} requests waiting",
+                    participation.event.participantStats.notApproved,
+                    { count: participation.event.participantStats.notApproved }
+                  )
+                }}
               </b-button>
             </span>
           </span>
@@ -96,56 +79,86 @@ export default {
       </div>
       <div class="actions column is-narrow">
         <ul>
-          <li v-if="!([ParticipantRole.PARTICIPANT, ParticipantRole.NOT_APPROVED].includes(participation.role))">
+          <li
+            v-if="
+              ![ParticipantRole.PARTICIPANT, ParticipantRole.NOT_APPROVED].includes(
+                participation.role
+              )
+            "
+          >
             <b-button
-                    type="is-text"
-                    @click="gotToWithCheck(participation, { name: RouteName.EDIT_EVENT, params: { eventId: participation.event.uuid }  })"
-                    icon-left="pencil"
+              type="is-text"
+              @click="
+                gotToWithCheck(participation, {
+                  name: RouteName.EDIT_EVENT,
+                  params: { eventId: participation.event.uuid },
+                })
+              "
+              icon-left="pencil"
+              >{{ $t("Edit") }}</b-button
             >
-              {{ $t('Edit') }}
-            </b-button>
           </li>
-          <li v-if="!([ParticipantRole.PARTICIPANT, ParticipantRole.NOT_APPROVED].includes(participation.role))" @click="openDeleteEventModalWrapper">
-            <b-button type="is-text" icon-left="delete">
-              {{ $t('Delete') }}
-            </b-button>
+          <li
+            v-if="
+              ![ParticipantRole.PARTICIPANT, ParticipantRole.NOT_APPROVED].includes(
+                participation.role
+              )
+            "
+            @click="openDeleteEventModalWrapper"
+          >
+            <b-button type="is-text" icon-left="delete">{{ $t("Delete") }}</b-button>
           </li>
-          <li v-if="!([ParticipantRole.PARTICIPANT, ParticipantRole.NOT_APPROVED].includes(participation.role))">
+          <li
+            v-if="
+              ![ParticipantRole.PARTICIPANT, ParticipantRole.NOT_APPROVED].includes(
+                participation.role
+              )
+            "
+          >
             <b-button
-                    type="is-text"
-                    @click="gotToWithCheck(participation, { name: RouteName.PARTICIPATIONS, params: { eventId: participation.event.uuid } })"
-                    icon-left="account-multiple-plus"
+              type="is-text"
+              @click="
+                gotToWithCheck(participation, {
+                  name: RouteName.PARTICIPATIONS,
+                  params: { eventId: participation.event.uuid },
+                })
+              "
+              icon-left="account-multiple-plus"
+              >{{ $t("Manage participations") }}</b-button
             >
-              {{ $t('Manage participations') }}
-            </b-button>
           </li>
           <li>
             <b-button
               tag="router-link"
               icon-left="view-compact"
               type="is-text"
-              :to="{ name: RouteName.EVENT, params: { uuid: participation.event.uuid } }">
-              {{ $t('View event page') }}
-            </b-button>
+              :to="{ name: RouteName.EVENT, params: { uuid: participation.event.uuid } }"
+              >{{ $t("View event page") }}</b-button
+            >
           </li>
         </ul>
       </div>
     </div>
-    </article>
+  </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';
+import { Component, Prop } from "vue-property-decorator";
+import DateCalendarIcon from "@/components/Event/DateCalendarIcon.vue";
+import { mixins } from "vue-class-component";
+import { RawLocation } from "vue-router";
+import {
+  IParticipant,
+  ParticipantRole,
+  EventVisibility,
+  IEventCardOptions,
+} from "../../types/event.model";
+import { IPerson } from "../../types/actor";
+import ActorMixin from "../../mixins/actor";
+import { CURRENT_ACTOR_CLIENT } from "../../graphql/actor";
+import EventMixin from "../../mixins/event";
+import RouteName from "../../router/name";
+import { changeIdentity } from "../../utils/auth";
 
 const defaultOptions: IEventCardOptions = {
   hideDate: true,
@@ -169,15 +182,19 @@ export default class EventListCard extends mixins(ActorMixin, EventMixin) {
    * The participation associated
    */
   @Prop({ required: true }) participation!: IParticipant;
+
   /**
    * Options are merged with default options
    */
-  @Prop({ required: false, default: () => defaultOptions }) options!: IEventCardOptions;
+  @Prop({ required: false, default: () => defaultOptions })
+  options!: IEventCardOptions;
 
   currentActor!: IPerson;
 
   ParticipantRole = ParticipantRole;
+
   EventVisibility = EventVisibility;
+
   RouteName = RouteName;
 
   get mergedOptions(): IEventCardOptions {
@@ -191,114 +208,116 @@ export default class EventListCard extends mixins(ActorMixin, EventMixin) {
     await this.openDeleteEventModal(this.participation.event, this.currentActor);
   }
 
-  async gotToWithCheck(participation: IParticipant, route: Route) {
+  async gotToWithCheck(participation: IParticipant, route: RawLocation) {
     if (participation.actor.id !== this.currentActor.id && participation.event.organizerActor) {
       const organizer = participation.event.organizerActor as IPerson;
       await changeIdentity(this.$apollo.provider.defaultClient, organizer);
       this.$buefy.notification.open({
-        message: this.$t('Current identity has been changed to {identityName} in order to manage this event.', {
-          identityName: organizer.preferredUsername,
-        }) as string,
-        type: 'is-info',
-        position: 'is-bottom-right',
+        message: this.$t(
+          "Current identity has been changed to {identityName} in order to manage this event.",
+          {
+            identityName: organizer.preferredUsername,
+          }
+        ) as string,
+        type: "is-info",
+        position: "is-bottom-right",
         duration: 5000,
       });
     }
-    return await this.$router.push(route);
+    return this.$router.push(route);
   }
-
 }
 </script>
 
 <style lang="scss" scoped>
-  @import "../../variables";
+@import "../../variables";
 
-  article.box {
-    div.tag-container {
-      position: absolute;
-      top: 10px;
-      right: 0;
-      margin-right: -5px;
-      z-index: 10;
-      max-width: 40%;
+article.box {
+  div.tag-container {
+    position: absolute;
+    top: 10px;
+    right: 0;
+    margin-right: -5px;
+    z-index: 10;
+    max-width: 40%;
 
-      span.tag {
-        margin: 5px auto;
-        box-shadow: 0 0 5px 0 rgba(0, 0, 0, 1);
-        /*word-break: break-all;*/
-        text-overflow: ellipsis;
+    span.tag {
+      margin: 5px auto;
+      box-shadow: 0 0 5px 0 rgba(0, 0, 0, 1);
+      /*word-break: break-all;*/
+      text-overflow: ellipsis;
+      overflow: hidden;
+      display: block;
+      /*text-align: right;*/
+      font-size: 1em;
+      /*padding: 0 1px;*/
+      line-height: 1.75em;
+    }
+  }
+  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;
-        display: block;
-        /*text-align: right;*/
-        font-size: 1em;
-        /*padding: 0 1px;*/
-        line-height: 1.75em;
-      }
-    }
-    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;
-        }
-      }
-
-      /deep/ progress + .progress-value {
-        color: lighten($primary, 20%) !important;
+        font-weight: 400;
+        line-height: 1em;
+        font-size: 1.6em;
+        padding-bottom: 5px;
+        margin: auto 0;
       }
     }
 
-    .actions {
-      ul li {
-        margin: 0 auto;
-        .is-link {
-          cursor: pointer;
-        }
-
-        .button.is-text {
-          text-decoration: none;
-
-          /deep/ span:first-child i.mdi::before {
-            font-size: 24px !important;
-          }
-
-          /deep/ span:last-child {
-            padding-left: 4px;
-          }
-        }
-
-        * {
-          font-size: 0.8rem;
-          color: $primary;
-        }
-      }
+    /deep/ progress + .progress-value {
+      color: lighten($primary, 20%) !important;
     }
   }
 
+  .actions {
+    ul li {
+      margin: 0 auto;
+      .is-link {
+        cursor: pointer;
+      }
+
+      .button.is-text {
+        text-decoration: none;
+
+        /deep/ span:first-child i.mdi::before {
+          font-size: 24px !important;
+        }
+
+        /deep/ span:last-child {
+          padding-left: 4px;
+        }
+      }
+
+      * {
+        font-size: 0.8rem;
+        color: $primary;
+      }
+    }
+  }
+}
 </style>

js/src/components/Event/EventListViewCard.vue

@@ -1,48 +1,3 @@
-<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">
@@ -51,12 +6,18 @@ export default {
           <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>
+          <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 v-if="event.physicalAddress && event.physicalAddress.locality">
+            {{ event.physicalAddress.locality }}
+          </span>
           <span>
-            <span>{{ $t('Organized by {name}', { name: event.organizerActor.displayName() } ) }}</span>
+            <span>
+              {{ $t("Organized by {name}", { name: event.organizerActor.displayName() }) }}
+            </span>
           </span>
         </div>
         <div class="columns">
@@ -67,30 +28,44 @@ export default {
           </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 }) }}
+              {{
+                $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 })}}
+              {{
+                $tc("{count} participants", event.participantStats.participant, {
+                  count: event.participantStats.participant,
+                })
+              }}
             </span>
           </span>
         </div>
       </div>
     </div>
-    </article>
+  </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';
+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 { changeIdentity } from "@/utils/auth";
+import { Route } from "vue-router";
+import RouteName from "../../router/name";
 
 const defaultOptions: IEventCardOptions = {
   hideDate: true,
@@ -114,58 +89,61 @@ 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;
+  @Prop({ required: false, default: () => defaultOptions })
+  options!: IEventCardOptions;
 
   currentActor!: IPerson;
 
   ParticipantRole = ParticipantRole;
-  EventVisibility = EventVisibility;
-  RouteName = RouteName;
 
+  EventVisibility = EventVisibility;
+
+  RouteName = RouteName;
 }
 </script>
 
 <style lang="scss" scoped>
-  @import "../../variables";
+@import "../../variables";
 
-  article.box {
-    div.content {
-      padding: 5px;
+article.box {
+  div.content {
+    padding: 5px;
 
-      .participation-actor span, .participant-stats span {
-        padding: 0 5px;
+    .participation-actor span,
+    .participant-stats span {
+      padding: 0 5px;
 
-        button {
-          height: auto;
-          padding-top: 0;
-        }
+      button {
+        height: auto;
+        padding-top: 0;
+      }
+    }
+
+    div.title-wrapper {
+      display: flex;
+      align-items: center;
+
+      div.date-component {
+        flex: 0;
+        margin-right: 16px;
       }
 
-      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;
-        }
+      .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/EventMetadataBlock.vue

@@ -0,0 +1,42 @@
+<template>
+  <div>
+    <h2>{{ title }}</h2>
+    <div class="eventMetadataBlock">
+      <b-icon v-if="icon" :icon="icon" size="is-medium" />
+      <p :class="{ 'padding-left': icon }">
+        <slot></slot>
+      </p>
+    </div>
+  </div>
+</template>
+<script lang="ts">
+import { Component, Prop, Vue } from "vue-property-decorator";
+
+@Component
+export default class EventMetadataBlock extends Vue {
+  @Prop({ required: false, type: String }) icon!: string;
+
+  @Prop({ required: true, type: String }) title!: string;
+}
+</script>
+<style lang="scss" scoped>
+h2 {
+  font-size: 1.8rem;
+  font-weight: 500;
+  color: #f7ba30;
+}
+
+div.eventMetadataBlock {
+  display: flex;
+  align-items: center;
+  margin-bottom: 1.75rem;
+
+  p {
+    flex: 1;
+
+    &.padding-left {
+      padding-left: 20px;
+    }
+  }
+}
+</style>

js/src/components/Event/EventMinimalistCard.vue

@@ -0,0 +1,55 @@
+<template>
+  <router-link
+    class="event-minimalist-card-wrapper"
+    :to="{ name: RouteName.EVENT, params: { uuid: event.uuid } }"
+  >
+    <date-calendar-icon class="calendar-icon" :date="event.beginsOn" />
+    <div class="title-info-wrapper">
+      <p class="event-minimalist-title">{{ event.title }}</p>
+      <p v-if="event.physicalAddress" class="has-text-grey">
+        {{ event.physicalAddress.description }}
+      </p>
+      <p v-else>3 demandes de participation à traiter</p>
+    </div>
+  </router-link>
+</template>
+<script lang="ts">
+import { Component, Prop, Vue } from "vue-property-decorator";
+import { IEvent } from "@/types/event.model";
+import DateCalendarIcon from "@/components/Event/DateCalendarIcon.vue";
+import RouteName from "../../router/name";
+
+@Component({
+  components: {
+    DateCalendarIcon,
+  },
+})
+export default class EventMinimalistCard extends Vue {
+  @Prop({ required: true, type: Object }) event!: IEvent;
+
+  RouteName = RouteName;
+}
+</script>
+<style lang="scss" scoped>
+.event-minimalist-card-wrapper {
+  display: flex;
+  width: 100%;
+  color: initial;
+  align-items: flex-start;
+
+  .calendar-icon {
+    margin-right: 1rem;
+  }
+
+  .title-info-wrapper {
+    flex: 2;
+
+    .event-minimalist-title {
+      color: #3c376e;
+      font-family: "Liberation Sans", "Helvetica Neue", Roboto, Helvetica, Arial, serif;
+      font-size: 1.25rem;
+      font-weight: 700;
+    }
+  }
+}
+</style>

js/src/components/Event/ParticipationButton.vue

@@ -24,86 +24,131 @@ A button to set your participation
 </docs>
 
 <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 is-large" type="button" slot="trigger">
-                <b-icon icon="check" />
-                <template>
-                    <span>{{ $t('I participate') }}</span>
-                </template>
-                <b-icon icon="menu-down" />
-            </button>
+  <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 is-large" type="button" slot="trigger">
+        <b-icon icon="check" />
+        <template>
+          <span>{{ $t("I participate") }}</span>
+        </template>
+        <b-icon icon="menu-down" />
+      </button>
 
-            <b-dropdown-item :value="false" aria-role="listitem" @click="confirmLeave" class="has-text-danger">
-                {{ $t('Cancel my participation…')}}
-            </b-dropdown-item>
-        </b-dropdown>
+      <b-dropdown-item
+        :value="false"
+        aria-role="listitem"
+        @click="confirmLeave"
+        class="has-text-danger"
+        >{{ $t("Cancel my participation…") }}</b-dropdown-item
+      >
+    </b-dropdown>
 
-        <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 is-large" type="button" slot="trigger">
-                    <b-icon icon="timer-sand-empty" />
-                    <template>
-                        <span>{{ $t('I participate') }}</span>
-                    </template>
-                    <b-icon icon="menu-down" />
-                </button>
+    <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 is-large" type="button" slot="trigger">
+          <b-icon icon="timer-sand-empty" />
+          <template>
+            <span>{{ $t("I participate") }}</span>
+          </template>
+          <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">-->
+        <!--                  {{ $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 request…')}}
-                </b-dropdown-item>
-            </b-dropdown>
-            <small>{{ $t('Participation requested!')}}</small><br />
-            <small>{{ $t('Waiting for organization team approval.')}}</small>
-        </div>
-
-        <div v-else-if="participation && participation.role === ParticipantRole.REJECTED">
-            <span>{{ $t('Unfortunately, your participation request was rejected by the organizers.')}}</span>
-        </div>
-
-        <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>
-                <b-icon icon="menu-down" />
-            </button>
-
-            <b-dropdown-item :value="true" aria-role="listitem" @click="joinEvent(currentActor)">
-                <div class="media">
-                    <div class="media-left">
-                        <figure class="image is-32x32" v-if="currentActor.avatar">
-                            <img class="is-rounded" :src="currentActor.avatar.url" alt="" />
-                        </figure>
-                    </div>
-                    <div class="media-content">
-                        <span>{{ $t('as {identity}', {identity: currentActor.name || `@${currentActor.preferredUsername}` }) }}</span>
-                    </div>
-                </div>
-            </b-dropdown-item>
-
-            <b-dropdown-item :value="false" aria-role="listitem" @click="joinModal" v-if="identities.length > 1">
-                {{ $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>
+        <b-dropdown-item
+          :value="false"
+          aria-role="listitem"
+          @click="confirmLeave"
+          class="has-text-danger"
+          >{{ $t("Cancel my participation request…") }}</b-dropdown-item
+        >
+      </b-dropdown>
+      <small>{{ $t("Participation requested!") }}</small>
+      <br />
+      <small>{{ $t("Waiting for organization team approval.") }}</small>
     </div>
+
+    <div v-else-if="participation && participation.role === ParticipantRole.REJECTED">
+      <span>
+        {{ $t("Unfortunately, your participation request was rejected by the organizers.") }}
+      </span>
+    </div>
+
+    <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>
+        <b-icon icon="menu-down" />
+      </button>
+
+      <b-dropdown-item :value="true" aria-role="listitem" @click="joinEvent(currentActor)">
+        <div class="media">
+          <div class="media-left">
+            <figure class="image is-32x32" v-if="currentActor.avatar">
+              <img class="is-rounded" :src="currentActor.avatar.url" alt />
+            </figure>
+          </div>
+          <div class="media-content">
+            <span>
+              {{
+                $t("as {identity}", {
+                  identity: currentActor.name || `@${currentActor.preferredUsername}`,
+                })
+              }}
+            </span>
+          </div>
+        </div>
+      </b-dropdown-item>
+
+      <b-dropdown-item
+        :value="false"
+        aria-role="listitem"
+        @click="joinModal"
+        v-if="identities.length > 1"
+        >{{ $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 { EventJoinOptions, IEvent, IParticipant, ParticipantRole } from '@/types/event.model';
-import { IPerson, Person } from '@/types/actor';
-import { CURRENT_ACTOR_CLIENT, IDENTITIES } from '@/graphql/actor';
-import { CURRENT_USER_CLIENT } from '@/graphql/user';
-import { CONFIG } from '@/graphql/config';
-import { IConfig } from '@/types/config.model';
-import { RouteName } from '@/router';
+import { Component, Prop, Vue } from "vue-property-decorator";
+import { EventJoinOptions, IEvent, IParticipant, ParticipantRole } from "../../types/event.model";
+import { IPerson, Person } from "../../types/actor";
+import { CURRENT_ACTOR_CLIENT, IDENTITIES } from "../../graphql/actor";
+import { CURRENT_USER_CLIENT } from "../../graphql/user";
+import { CONFIG } from "../../graphql/config";
+import { IConfig } from "../../types/config.model";
+import RouteName from "../../router/name";
 
 @Component({
   apollo: {
@@ -114,7 +159,8 @@ import { RouteName } from '@/router';
     config: CONFIG,
     identities: {
       query: IDENTITIES,
-      update: ({ identities }) => identities ? identities.map(identity => new Person(identity)) : [],
+      update: ({ identities }) =>
+        identities ? identities.map((identity: IPerson) => new Person(identity)) : [],
       skip() {
         return this.currentUser.isLoggedIn === false;
       },
@@ -123,28 +169,33 @@ import { RouteName } from '@/router';
 })
 export default class ParticipationButton extends Vue {
   @Prop({ required: true }) participation!: IParticipant;
+
   @Prop({ required: true }) event!: IEvent;
+
   @Prop({ required: true }) currentActor!: IPerson;
 
   ParticipantRole = ParticipantRole;
+
   identities: IPerson[] = [];
+
   config!: IConfig;
+
   RouteName = RouteName;
 
   joinEvent(actor: IPerson) {
     if (this.event.joinOptions === EventJoinOptions.RESTRICTED) {
-      this.$emit('joinEventWithConfirmation', actor);
+      this.$emit("joinEventWithConfirmation", actor);
     } else {
-      this.$emit('joinEvent', actor);
+      this.$emit("joinEvent", actor);
     }
   }
 
   joinModal() {
-    this.$emit('joinModal');
+    this.$emit("joinModal");
   }
 
   confirmLeave() {
-    this.$emit('confirmLeave');
+    this.$emit("confirmLeave");
   }
 
   get hasAnonymousParticipationMethods(): boolean {
@@ -154,20 +205,20 @@ export default class ParticipationButton extends Vue {
 </script>
 
 <style lang="scss" scoped>
-    .participation-button {
-        .dropdown {
-            display: flex;
-            justify-content: flex-end;
+.participation-button {
+  .dropdown {
+    display: flex;
+    justify-content: flex-end;
 
-            &.dropdown-disabled button {
-                opacity: 0.5;
-            }
-        }
+    &.dropdown-disabled button {
+      opacity: 0.5;
     }
+  }
+}
 
-    .anonymousParticipationModal {
-        /deep/ .animation-content {
-            z-index: 1;
-        }
-    }
-</style>
+.anonymousParticipationModal {
+  /deep/ .animation-content {
+    z-index: 1;
+  }
+}
+</style>

js/src/components/Event/ParticipationTable.vue

@@ -1,123 +1,164 @@
 <template>
-    <b-table
-            :data="data"
-            ref="queueTable"
-            detailed
-            detail-key="id"
-            :checked-rows.sync="checkedRows"
-            checkable
-            :is-row-checkable="row => row.role !== ParticipantRole.CREATOR"
-            checkbox-position="left"
-            default-sort="insertedAt"
-            default-sort-direction="asc"
-            :show-detail-icon="false"
-            :loading="this.$apollo.loading"
-            paginated
-            backend-pagination
-            :aria-next-label="$t('Next page')"
-            :aria-previous-label="$t('Previous page')"
-            :aria-page-label="$t('Page')"
-            :aria-current-label="$t('Current page')"
-            :total="total"
-            :per-page="perPage"
-            backend-sorting
-            :default-sort-direction="'desc'"
-            :default-sort="['insertedAt', 'desc']"
-            @page-change="page => $emit('page-change', page)"
-            @sort="(field, order) => $emit('sort', field, order)"
-    >
-        <template slot-scope="props">
-            <b-table-column field="insertedAt" :label="$t('Date')" sortable>
-                <b-tag type="is-success" class="has-text-centered">{{ props.row.insertedAt | formatDateString }}<br>{{ props.row.insertedAt | formatTimeString }}</b-tag>
-            </b-table-column>
-            <b-table-column field="role" :label="$t('Role')" sortable v-if="showRole">
-                                  <span v-if="props.row.role === ParticipantRole.CREATOR">
-                                      {{ $t('Organizer') }}
-                                  </span>
-                <span v-else-if="props.row.role === ParticipantRole.PARTICIPANT">
-                                      {{ $t('Participant') }}
-                                  </span>
-            </b-table-column>
-            <b-table-column field="actor.preferredUsername" :label="$t('Participant')" sortable>
-                <article class="media">
-                    <figure class="media-left" v-if="props.row.actor.avatar">
-                        <p class="image is-48x48">
-                            <img :src="props.row.actor.avatar.url" alt="">
-                        </p>
-                    </figure>
-                    <b-icon class="media-left" v-else-if="props.row.actor.preferredUsername === 'anonymous'" size="is-large" icon="incognito" />
-                    <b-icon class="media-left" v-else size="is-large" icon="account-circle" />
-                    <div class="media-content">
-                        <div class="content">
-                                              <span v-if="props.row.actor.preferredUsername !== 'anonymous'">
-                                                  <span v-if="props.row.actor.name">{{ props.row.actor.name }}</span><br />
-                                                  <span class="is-size-7 has-text-grey">@{{ props.row.actor.preferredUsername }}</span>
-                                              </span>
-                            <span v-else>
-                                                  {{ $t('Anonymous participant') }}
-                                              </span>
-                        </div>
-                    </div>
-                </article>
-            </b-table-column>
-            <b-table-column field="metadata.message" :label="$t('Message')">
-                                  <span @click="toggleQueueDetails(props.row)" :class="{ 'ellipsed-message': props.row.metadata.message.length > MESSAGE_ELLIPSIS_LENGTH }" v-if="props.row.metadata && props.row.metadata.message">
-                                    {{ props.row.metadata.message | ellipsize }}
-                                  </span>
-                <span v-else class="has-text-grey">
-                                      {{ $t('No message') }}
-                                  </span>
-            </b-table-column>
-        </template>
-        <template slot="detail" slot-scope="props">
-            <article v-html="nl2br(props.row.metadata.message)" />
-        </template>
-        <template slot="bottom-left" v-if="checkedRows.length > 0">
-            <div class="buttons">
-                <b-button @click="acceptParticipants(checkedRows)" type="is-success" v-if="canAcceptParticipants">
-                    {{ $tc('No participant to approve|Approve participant|Approve {number} participants', checkedRows.length, { number: checkedRows.length }) }}
-                </b-button>
-                <b-button @click="refuseParticipants(checkedRows)" type="is-danger" v-if="canRefuseParticipants">
-                    {{ $tc('No participant to reject|Reject participant|Reject {number} participants', checkedRows.length, { number: checkedRows.length }) }}
-                </b-button>
+  <b-table
+    :data="data"
+    ref="queueTable"
+    detailed
+    detail-key="id"
+    :checked-rows.sync="checkedRows"
+    checkable
+    :is-row-checkable="(row) => row.role !== ParticipantRole.CREATOR"
+    checkbox-position="left"
+    :show-detail-icon="false"
+    :loading="this.$apollo.loading"
+    paginated
+    backend-pagination
+    :aria-next-label="$t('Next page')"
+    :aria-previous-label="$t('Previous page')"
+    :aria-page-label="$t('Page')"
+    :aria-current-label="$t('Current page')"
+    :total="total"
+    :per-page="perPage"
+    backend-sorting
+    :default-sort-direction="'desc'"
+    :default-sort="['insertedAt', 'desc']"
+    @page-change="(page) => $emit('page-change', page)"
+    @sort="(field, order) => $emit('sort', field, order)"
+  >
+    <template slot-scope="props">
+      <b-table-column field="insertedAt" :label="$t('Date')" sortable>
+        <b-tag type="is-success" class="has-text-centered"
+          >{{ props.row.insertedAt | formatDateString }}<br />{{
+            props.row.insertedAt | formatTimeString
+          }}</b-tag
+        >
+      </b-table-column>
+      <b-table-column field="role" :label="$t('Role')" sortable v-if="showRole">
+        <span v-if="props.row.role === ParticipantRole.CREATOR">
+          {{ $t("Organizer") }}
+        </span>
+        <span v-else-if="props.row.role === ParticipantRole.PARTICIPANT">
+          {{ $t("Participant") }}
+        </span>
+      </b-table-column>
+      <b-table-column field="actor.preferredUsername" :label="$t('Participant')" sortable>
+        <article class="media">
+          <figure class="media-left" v-if="props.row.actor.avatar">
+            <p class="image is-48x48">
+              <img :src="props.row.actor.avatar.url" alt="" />
+            </p>
+          </figure>
+          <b-icon
+            class="media-left"
+            v-else-if="props.row.actor.preferredUsername === 'anonymous'"
+            size="is-large"
+            icon="incognito"
+          />
+          <b-icon class="media-left" v-else size="is-large" icon="account-circle" />
+          <div class="media-content">
+            <div class="content">
+              <span v-if="props.row.actor.preferredUsername !== 'anonymous'">
+                <span v-if="props.row.actor.name">{{ props.row.actor.name }}</span
+                ><br />
+                <span class="is-size-7 has-text-grey"
+                  >@{{ props.row.actor.preferredUsername }}</span
+                >
+              </span>
+              <span v-else>
+                {{ $t("Anonymous participant") }}
+              </span>
             </div>
-        </template>
-    </b-table>
+          </div>
+        </article>
+      </b-table-column>
+      <b-table-column field="metadata.message" :label="$t('Message')">
+        <span
+          @click="toggleQueueDetails(props.row)"
+          :class="{
+            'ellipsed-message': props.row.metadata.message.length > MESSAGE_ELLIPSIS_LENGTH,
+          }"
+          v-if="props.row.metadata && props.row.metadata.message"
+        >
+          {{ props.row.metadata.message | ellipsize }}
+        </span>
+        <span v-else class="has-text-grey">
+          {{ $t("No message") }}
+        </span>
+      </b-table-column>
+    </template>
+    <template slot="detail" slot-scope="props">
+      <article v-html="nl2br(props.row.metadata.message)" />
+    </template>
+    <template slot="bottom-left" v-if="checkedRows.length > 0">
+      <div class="buttons">
+        <b-button
+          @click="acceptParticipants(checkedRows)"
+          type="is-success"
+          v-if="canAcceptParticipants"
+        >
+          {{
+            $tc(
+              "No participant to approve|Approve participant|Approve {number} participants",
+              checkedRows.length,
+              { number: checkedRows.length }
+            )
+          }}
+        </b-button>
+        <b-button
+          @click="refuseParticipants(checkedRows)"
+          type="is-danger"
+          v-if="canRefuseParticipants"
+        >
+          {{
+            $tc(
+              "No participant to reject|Reject participant|Reject {number} participants",
+              checkedRows.length,
+              { number: checkedRows.length }
+            )
+          }}
+        </b-button>
+      </div>
+    </template>
+  </b-table>
 </template>
 <script lang="ts">
-import { Component, Prop, Vue } from 'vue-property-decorator';
-import { IParticipant, ParticipantRole } from '@/types/event.model';
-import { Refs } from '@/shims-vue';
-import { nl2br } from '@/utils/html';
-import { asyncForEach } from '@/utils/asyncForEach';
+import { Component, Prop, Vue, Ref } from "vue-property-decorator";
+import { IParticipant, ParticipantRole } from "../../types/event.model";
+import { nl2br } from "../../utils/html";
+import { asyncForEach } from "../../utils/asyncForEach";
 
 const MESSAGE_ELLIPSIS_LENGTH = 130;
 
 @Component({
   filters: {
-    ellipsize: (text?: string) => text && text.substr(0, MESSAGE_ELLIPSIS_LENGTH).concat('…'),
+    ellipsize: (text?: string) => text && text.substr(0, MESSAGE_ELLIPSIS_LENGTH).concat("…"),
   },
 })
 export default class ParticipationTable extends Vue {
   @Prop({ required: true, type: Array }) data!: IParticipant[];
+
   @Prop({ required: true, type: Number }) total!: number;
-  @Prop({ required: true, type: Function }) acceptParticipant;
-  @Prop({ required: true, type: Function }) refuseParticipant;
-  @Prop({ required: false, type: Boolean, default: false }) showRole;
-  @Prop({ required: false, type: Number, default: 20 }) perPage;
+
+  @Prop({ required: true, type: Function }) acceptParticipant!: Function;
+
+  @Prop({ required: true, type: Function }) refuseParticipant!: Function;
+
+  @Prop({ required: false, type: Boolean, default: false }) showRole!: boolean;
+
+  @Prop({ required: false, type: Number, default: 20 }) perPage!: number;
+
+  @Ref("queueTable") readonly queueTable!: any;
+
   checkedRows: IParticipant[] = [];
 
   MESSAGE_ELLIPSIS_LENGTH = MESSAGE_ELLIPSIS_LENGTH;
-  nl2br = nl2br;
-  ParticipantRole = ParticipantRole;
 
-  $refs!: Refs<{
-    queueTable: any,
-  }>;
+  nl2br = nl2br;
+
+  ParticipantRole = ParticipantRole;
 
   toggleQueueDetails(row: IParticipant) {
     if (row.metadata.message && row.metadata.message.length < MESSAGE_ELLIPSIS_LENGTH) return;
-    this.$refs.queueTable.toggleDetails(row);
+    this.queueTable.toggleDetails(row);
   }
 
   async acceptParticipants(participants: IParticipant[]) {
@@ -134,31 +175,33 @@ export default class ParticipationTable extends Vue {
     this.checkedRows = [];
   }
 
-    /**
-     * We can accept participants if at least one of them is not approved
-     */
+  /**
+   * We can accept participants if at least one of them is not approved
+   */
   get canAcceptParticipants(): boolean {
-    return this.checkedRows.some(
-        (participant: IParticipant) => [ParticipantRole.NOT_APPROVED, ParticipantRole.REJECTED].includes(participant.role),
+    return this.checkedRows.some((participant: IParticipant) =>
+      [ParticipantRole.NOT_APPROVED, ParticipantRole.REJECTED].includes(participant.role)
     );
   }
 
-    /**
-     * We can refuse participants if at least one of them is something different than not approved
-     */
+  /**
+   * We can refuse participants if at least one of them is something different than not approved
+   */
   get canRefuseParticipants(): boolean {
-    return this.checkedRows.some((participant: IParticipant) => participant.role !== ParticipantRole.REJECTED);
+    return this.checkedRows.some(
+      (participant: IParticipant) => participant.role !== ParticipantRole.REJECTED
+    );
   }
 }
 </script>
 <style lang="scss" scoped>
-    .ellipsed-message {
-        cursor: pointer;
-    }
+.ellipsed-message {
+  cursor: pointer;
+}
 
-    .table {
-        span.tag {
-            height: initial;
-        }
-    }
-</style>
+.table {
+  span.tag {
+    height: initial;
+  }
+}
+</style>

js/src/components/Event/TagInput.vue

@@ -1,56 +1,33 @@
-<docs>
-### Tag input
-A special input to manage event tags
-
-```vue
-<tag-input :value="[{ title: 'toto' }]" path="title" />
-```
-
-```vue
 <template>
-  <tag-input v-model="tags" :data="sourceTags" path="title" />
-</template>
-<script>
-export default {
-  data() {
-    return {
-      sourceTags: [{ title: 'my tag'}, { title: 'my second tag' }, { title: 'another example'}],
-      tags: []
-    }
-  }
-}
-</script>
-```
-
-</docs>
-
-<template>
-    <b-field>
-        <template slot="label">
-            {{ $t('Add some tags') }}
-            <b-tooltip type="is-dark" :label="$t('You can add tags by hitting the Enter key or by adding a comma')">
-                <b-icon size="is-small" icon="help-circle-outline"></b-icon>
-            </b-tooltip>
-        </template>
-        <b-taginput
-                v-model="tagsStrings"
-                :data="filteredTags"
-                autocomplete
-                :allow-new="true"
-                :field="path"
-                icon="label"
-                maxlength="20"
-                maxtags="10"
-                :placeholder="$t('Eg: Stockholm, Dance, Chess…')"
-                @typing="getFilteredTags"
-        >
-        </b-taginput>
-    </b-field>
+  <b-field>
+    <template slot="label">
+      {{ $t("Add some tags") }}
+      <b-tooltip
+        type="is-dark"
+        :label="$t('You can add tags by hitting the Enter key or by adding a comma')"
+      >
+        <b-icon size="is-small" icon="help-circle-outline"></b-icon>
+      </b-tooltip>
+    </template>
+    <b-taginput
+      v-model="tagsStrings"
+      :data="filteredTags"
+      autocomplete
+      :allow-new="true"
+      :field="path"
+      icon="label"
+      maxlength="20"
+      maxtags="10"
+      :placeholder="$t('Eg: Stockholm, Dance, Chess…')"
+      @typing="getFilteredTags"
+    >
+    </b-taginput>
+  </b-field>
 </template>
 <script lang="ts">
-import { Component, Prop, Vue } from 'vue-property-decorator';
-import { get, differenceBy } from 'lodash';
-import { ITag } from '@/types/tag.model';
+import { Component, Prop, Vue } from "vue-property-decorator";
+import { get, differenceBy } from "lodash";
+import { ITag } from "../../types/tag.model";
 
 @Component({
   computed: {
@@ -59,32 +36,30 @@ import { ITag } from '@/types/tag.model';
         return this.$props.value.map((tag: ITag) => tag.title);
       },
       set(tagStrings) {
-        const tagEntities = tagStrings.map((tag) => {
-          if (TagInput.isTag(tag)) {
+        const tagEntities = tagStrings.map((tag: string | ITag) => {
+          if (!(tag instanceof String)) {
             return tag;
           }
           return { title: tag, slug: tag } as ITag;
         });
-        this.$emit('input', tagEntities);
+        this.$emit("input", tagEntities);
       },
     },
   },
 })
 export default class TagInput extends Vue {
-
   @Prop({ required: false, default: () => [] }) data!: ITag[];
-  @Prop({ required: true, default: 'value' }) path!: string;
+
+  @Prop({ required: true, default: "value" }) path!: string;
+
   @Prop({ required: true }) value!: ITag[];
 
   filteredTags: ITag[] = [];
 
-  getFilteredTags(text) {
-    this.filteredTags = differenceBy(this.data, this.value, 'id').filter((option) => {
-      return get(option, this.path)
-                .toString()
-                .toLowerCase()
-                .indexOf(text.toLowerCase()) >= 0;
-    });
+  getFilteredTags(text: string) {
+    this.filteredTags = differenceBy(this.data, this.value, "id").filter(
+      (option) => get(option, this.path).toString().toLowerCase().indexOf(text.toLowerCase()) >= 0
+    );
   }
 
   static isTag(x: any): x is ITag {

js/src/components/Footer.vue

@@ -1,25 +1,40 @@
 <template>
-    <footer class="footer" ref="footer">
-        <mobilizon-logo :invert="true" class="logo" />
-        <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">
-            <span>{{ $t('© The Mobilizon Contributors {date} - Made with Elixir, Phoenix, VueJS & with some love and some weeks', { date: new Date().getFullYear()}) }}</span>
-        </div>
-    </footer>
+  <footer class="footer" ref="footer">
+    <mobilizon-logo :invert="true" class="logo" />
+    <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">
+      <span>
+        {{
+          $t(
+            "© The Mobilizon Contributors {date} - Made with Elixir, Phoenix, VueJS & with some love and some weeks",
+            { date: new Date().getFullYear() }
+          )
+        }}
+      </span>
+    </div>
+  </footer>
 </template>
 <script lang="ts">
-import { Component, Vue } from 'vue-property-decorator';
-import Logo from './Logo.vue';
-import { RouteName } from '@/router';
+import { Component, Vue } from "vue-property-decorator";
+import RouteName from "../router/name";
+import Logo from "./Logo.vue";
 
 @Component({
   components: {
-    'mobilizon-logo': Logo,
+    "mobilizon-logo": Logo,
   },
 })
 export default class Footer extends Vue {
@@ -27,33 +42,34 @@ export default class Footer extends Vue {
 }
 </script>
 <style lang="scss" scoped>
-    @import "../variables.scss";
+@import "../variables.scss";
 
-    footer.footer {
-        color: $secondary;
-        display: flex;
-        flex-direction: column;
-        align-items: center;
+footer.footer {
+  color: $secondary;
+  display: flex;
+  flex-direction: column;
+  align-items: center;
 
-        .logo {
-            fill: $secondary;
-            flex: 1;
-        }
+  .logo {
+    fill: $secondary;
+    flex: 1;
+    max-width: 300px;
+  }
 
-        div.content {
-            flex: 1;
-        }
+  div.content {
+    flex: 1;
+  }
 
-        ul li {
-            display: inline-flex;
-            margin: auto 5px;
+  ul li {
+    display: inline-flex;
+    margin: auto 5px;
 
-            a {
-                color: #eee;
-                font-size: 1.5rem;
-                text-decoration: underline;
-                text-decoration-color: $secondary;
-            }
-        }
+    a {
+      color: #eee;
+      font-size: 1.5rem;
+      text-decoration: underline;
+      text-decoration-color: $secondary;
     }
+  }
+}
 </style>

js/src/components/Group/GroupCard.vue

@@ -1,32 +1,50 @@
 <template>
   <div class="card">
-    <div class="card-image" v-if="!group.banner">
-      <figure class="image is-4by3">
-        <img src="https://picsum.photos/g/400/200/">
-      </figure>
-    </div>
     <div class="card-content">
-      <div class="content">
-        <router-link :to="{ name: RouteName.GROUP, params:{ preferredUsername: group.preferredUsername } }">
-          <h2 class="title">{{ group.displayName() }}</h2>
-        </router-link>
+      <div class="media">
+        <div class="media-left">
+          <figure class="image is-48x48">
+            <img src="https://bulma.io/images/placeholders/96x96.png" alt="Placeholder image" />
+          </figure>
+        </div>
+        <div class="media-content">
+          <router-link
+            :to="{ name: RouteName.GROUP, params: { preferredUsername: groupFullUsername } }"
+          >
+            <h3>{{ member.parent.name }}</h3>
+            <p class="is-6 has-text-grey">
+              <span v-if="member.parent.domain">{{
+                `@${member.parent.preferredUsername}@${member.parent.domain}`
+              }}</span>
+              <span v-else>{{ `@${member.parent.preferredUsername}` }}</span>
+            </p>
+            <b-tag type="is-info">{{ member.role }}</b-tag>
+          </router-link>
+        </div>
       </div>
-      <div>
-        <p>{{ group.summary }}</p>
+      <div class="content">
+        <p>{{ member.parent.summary }}</p>
       </div>
     </div>
   </div>
 </template>
 
 <script lang="ts">
-import { Component, Prop, Vue } from 'vue-property-decorator';
-import { Group } from '@/types/actor';
-import { RouteName } from '@/router';
+import { Component, Prop, Vue } from "vue-property-decorator";
+import { IGroup, IMember } from "@/types/actor";
+import RouteName from "../../router/name";
 
 @Component
 export default class GroupCard extends Vue {
-  @Prop({ required: true }) group!: Group;
+  @Prop({ required: true }) member!: IMember;
 
   RouteName = RouteName;
+
+  get groupFullUsername() {
+    if (this.member.parent.domain) {
+      return `${this.member.parent.preferredUsername}@${this.member.parent.domain}`;
+    }
+    return this.member.parent.preferredUsername;
+  }
 }
 </script>

js/src/components/Group/GroupPicker.vue

@@ -0,0 +1,75 @@
+<template>
+  <div class="modal-card">
+    <header class="modal-card-head">
+      <p class="modal-card-title">{{ $t("Pick a group") }}</p>
+    </header>
+    <section class="modal-card-body">
+      <div class="list is-hoverable">
+        <a
+          class="list-item"
+          v-for="groupMembership in groupMemberships.elements"
+          :class="{ 'is-active': groupMembership.parent.id === currentGroup.id }"
+          @click="changeCurrentGroup(groupMembership.parent)"
+          :key="groupMembership.id"
+        >
+          <div class="media">
+            <img
+              class="media-left image is-48x48"
+              v-if="groupMembership.parent.avatar"
+              :src="groupMembership.parent.avatar.url"
+              alt=""
+            />
+            <b-icon class="media-left" v-else size="is-large" icon="account-circle" />
+            <div class="media-content">
+              <h3>@{{ groupMembership.parent.name }}</h3>
+              <small>{{ `@${groupMembership.parent.preferredUsername}` }}</small>
+            </div>
+          </div>
+        </a>
+        <a class="list-item" @click="changeCurrentGroup(new Group())" v-if="currentGroup.id">
+          <h3>{{ $t("Unset group") }}</h3>
+        </a>
+      </div>
+    </section>
+    <slot name="footer" />
+  </div>
+</template>
+<script lang="ts">
+import { Component, Prop, Vue } from "vue-property-decorator";
+import { IGroup, IMember, IPerson, Group } from "@/types/actor";
+import { PERSON_MEMBERSHIPS } from "@/graphql/actor";
+import { Paginate } from "@/types/paginate";
+
+@Component({
+  apollo: {
+    groupMemberships: {
+      query: PERSON_MEMBERSHIPS,
+      variables() {
+        return {
+          id: this.identity.id,
+        };
+      },
+      update: (data) => data.person.memberships,
+      skip() {
+        return !this.identity.id;
+      },
+    },
+  },
+})
+export default class GroupPicker extends Vue {
+  @Prop() value!: IGroup;
+
+  @Prop() identity!: IPerson;
+
+  groupMemberships: Paginate<IMember> = { elements: [], total: 0 };
+
+  currentGroup: IGroup = this.value;
+
+  Group = Group;
+
+  changeCurrentGroup(group: IGroup) {
+    this.currentGroup = group;
+    this.$emit("input", group);
+  }
+}
+</script>

js/src/components/Group/GroupPickerWrapper.vue

@@ -0,0 +1,110 @@
+<template>
+  <div class="group-picker">
+    <div
+      class="no-group box"
+      v-if="!currentGroup.id && groupMemberships.total > 0"
+      @click="isComponentModalActive = true"
+    >
+      <p class="is-4">{{ $t("Add a group") }}</p>
+      <p class="is-6 is-size-6 has-text-grey">
+        {{ $t("The event will show the group as organizer.") }}
+      </p>
+    </div>
+    <div v-if="inline && currentGroup.id" class="inline box" @click="isComponentModalActive = true">
+      <div class="media">
+        <div class="media-left">
+          <figure class="image is-48x48" v-if="currentGroup.avatar">
+            <img class="image" :src="currentGroup.avatar.url" :alt="currentGroup.avatar.alt" />
+          </figure>
+          <b-icon v-else size="is-large" icon="account-circle" />
+        </div>
+        <div class="media-content" v-if="currentGroup.name">
+          <p class="is-4">{{ currentGroup.name }}</p>
+          <p class="is-6 has-text-grey">{{ `@${currentGroup.preferredUsername}` }}</p>
+        </div>
+        <div class="media-content" v-else>
+          {{ `@${currentGroup.preferredUsername}` }}
+        </div>
+        <b-button type="is-text" @click="isComponentModalActive = true">
+          {{ $t("Change") }}
+        </b-button>
+      </div>
+    </div>
+    <span v-else-if="currentGroup.id" class="block" @click="isComponentModalActive = true">
+      <img
+        class="image is-48x48"
+        v-if="currentGroup.avatar"
+        :src="currentGroup.avatar.url"
+        :alt="currentGroup.avatar.alt"
+      />
+      <b-icon v-else size="is-large" icon="account-circle" />
+    </span>
+    <div v-if="groupMemberships.total === 0" class="box">
+      <p class="is-4">{{ $t("This identity is not a member of any group.") }}</p>
+      <p class="is-6 is-size-6 has-text-grey">
+        {{ $t("You need to create the group before you create an event.") }}
+      </p>
+    </div>
+    <b-modal :active.sync="isComponentModalActive" has-modal-card>
+      <group-picker v-model="currentGroup" :identity.sync="identity" @input="relay" />
+    </b-modal>
+  </div>
+</template>
+<script lang="ts">
+import { Component, Prop, Vue, Watch } from "vue-property-decorator";
+import { IGroup, IMember, IPerson } from "../../types/actor";
+import GroupPicker from "./GroupPicker.vue";
+import { PERSON_MEMBERSHIPS } from "../../graphql/actor";
+import { Paginate } from "../../types/paginate";
+
+@Component({
+  components: { GroupPicker },
+  apollo: {
+    groupMemberships: {
+      query: PERSON_MEMBERSHIPS,
+      variables() {
+        return {
+          id: this.identity.id,
+        };
+      },
+      update: (data) => data.person.memberships,
+      skip() {
+        return !this.identity.id;
+      },
+    },
+  },
+})
+export default class GroupPickerWrapper extends Vue {
+  @Prop({ type: Object, required: true }) value!: IGroup;
+
+  @Prop({ default: true, type: Boolean }) inline!: boolean;
+
+  @Prop({ type: Object, required: true }) identity!: IPerson;
+
+  isComponentModalActive = false;
+
+  currentGroup: IGroup = this.value;
+
+  groupMemberships: Paginate<IMember> = { elements: [], total: 0 };
+
+  @Watch("value")
+  updateCurrentGroup(value: IGroup) {
+    this.currentGroup = value;
+  }
+
+  relay(group: IGroup) {
+    this.currentGroup = group;
+    this.$emit("input", group);
+    this.isComponentModalActive = false;
+  }
+}
+</script>
+<style lang="scss" scoped>
+.group-picker {
+  .block,
+  .no-group,
+  .inline {
+    cursor: pointer;
+  }
+}
+</style>

js/src/components/Group/InvitationCard.vue

@@ -0,0 +1,78 @@
+<template>
+  <div class="media">
+    <div class="media-content">
+      <div class="content">
+        <p>
+          {{
+            $t("You have been invited by {invitedBy} to the following group:", {
+              invitedBy: member.invitedBy.name,
+            })
+          }}
+        </p>
+      </div>
+      <div class="media subfield">
+        <div class="media-left">
+          <figure class="image is-48x48">
+            <img src="https://bulma.io/images/placeholders/96x96.png" alt="Placeholder image" />
+          </figure>
+        </div>
+        <div class="media-content">
+          <div class="level">
+            <div class="level-left">
+              <div class="level-item">
+                <router-link
+                  :to="{
+                    name: RouteName.GROUP,
+                    params: { preferredUsername: member.parent.preferredUsername },
+                  }"
+                >
+                  <h3>{{ member.parent.name }}</h3>
+                  <p class="is-6 has-text-grey">
+                    <span v-if="member.parent.domain">
+                      {{ `@${member.parent.preferredUsername}@${member.parent.domain}` }}
+                    </span>
+                    <span v-else>{{ `@${member.parent.preferredUsername}` }}</span>
+                  </p>
+                </router-link>
+              </div>
+            </div>
+            <div class="level-right">
+              <div class="level-item">
+                <b-button type="is-success" @click="$emit('accept', member.id)">
+                  {{ $t("Accept") }}
+                </b-button>
+              </div>
+              <div class="level-item">
+                <b-button type="is-danger" @click="$emit('decline', member.id)">
+                  {{ $t("Decline") }}
+                </b-button>
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+import { Component, Prop, Vue } from "vue-property-decorator";
+import { IGroup, IMember } from "@/types/actor";
+import RouteName from "../../router/name";
+
+@Component
+export default class InvitationCard extends Vue {
+  @Prop({ required: true }) member!: IMember;
+
+  RouteName = RouteName;
+}
+</script>
+
+<style lang="scss" scoped>
+@import "@/variables.scss";
+
+.media:not(.subfield) {
+  background: lighten($primary, 40%);
+  padding: 10px;
+}
+</style>

js/src/components/Logo.vue

@@ -1,23 +1,30 @@
 <template>
-    <img svg-inline src="../assets/mobilizon_logo.svg" alt="Mobilizon" :class="{invert: invert}" height="40px">
+  <!-- <img src="../assets/mobilizon_logo.svg" alt="Mobilizon" :class="{ invert: invert }" height="40" /> -->
+  <MobilizonLogo />
 </template>
 
 <script lang="ts">
-import { Component, Prop, Vue } from 'vue-property-decorator';
-
-@Component
+import { Component, Prop, Vue } from "vue-property-decorator";
+// eslint-disable-next-line @typescript-eslint/ban-ts-ignore
+// @ts-ignore
+import MobilizonLogo from "../assets/mobilizon_logo.svg";
+@Component({
+  components: {
+    MobilizonLogo,
+  },
+})
 export default class Logo extends Vue {
   @Prop({ type: Boolean, required: false, default: false }) invert!: boolean;
 }
 </script>
 <style lang="scss" scoped>
-    @import "../variables.scss";
+@import "../variables.scss";
 
-    svg {
-        fill: $primary;
+svg {
+  fill: $primary;
 
-        &.invert {
-            fill: $secondary;
-        }
-    }
+  &.invert {
+    fill: $secondary;
+  }
+}
 </style>

js/src/components/Map.vue

@@ -1,77 +1,92 @@
 <template>
-    <div class="map-container" v-if="config">
-        <l-map
-                :zoom="mergedOptions.zoom"
-                :style="`height: ${mergedOptions.height}; width: ${mergedOptions.width}`"
-                class="leaflet-map"
-                :center="[lat, lon]"
-                @click="clickMap"
-                @update:zoom="updateZoom"
-        >
-            <l-tile-layer
-                    :url="config.maps.tiles.endpoint"
-                    :attribution="attribution"
-            >
-
-            </l-tile-layer>
-            <v-locatecontrol :options="{icon: 'mdi mdi-map-marker'}"/>
-            <l-marker :lat-lng="[lat, lon]" @add="openPopup" @update:latLng="updateDraggableMarkerPosition" :draggable="!readOnly">
-                <l-popup v-if="popupMultiLine">
-                    <span v-for="line in popupMultiLine" :key="line">{{ line }}<br /></span>
-                </l-popup>
-            </l-marker>
-        </l-map>
-    </div>
+  <div class="map-container" v-if="config">
+    <l-map
+      :zoom="mergedOptions.zoom"
+      :style="`height: ${mergedOptions.height}; width: ${mergedOptions.width}`"
+      class="leaflet-map"
+      :center="[lat, lon]"
+      @click="clickMap"
+      @update:zoom="updateZoom"
+    >
+      <l-tile-layer :url="config.maps.tiles.endpoint" :attribution="attribution"> </l-tile-layer>
+      <v-locatecontrol :options="{ icon: 'mdi mdi-map-marker' }" />
+      <l-marker
+        :lat-lng="[lat, lon]"
+        @add="openPopup"
+        @update:latLng="updateDraggableMarkerPosition"
+        :draggable="!readOnly"
+      >
+        <l-popup v-if="popupMultiLine">
+          <span v-for="line in popupMultiLine" :key="line">{{ line }}<br /></span>
+        </l-popup>
+      </l-marker>
+    </l-map>
+  </div>
 </template>
 
 <script lang="ts">
-import { Icon, LatLng, LeafletMouseEvent } from 'leaflet';
-import 'leaflet/dist/leaflet.css';
-import { Component, Prop, Vue } from 'vue-property-decorator';
-import { LMap, LTileLayer, LMarker, LPopup, LIcon } from 'vue2-leaflet';
-import Vue2LeafletLocateControl from '@/components/Map/Vue2LeafletLocateControl.vue';
-import { CONFIG } from '@/graphql/config';
-import { IConfig } from '@/types/config.model';
+import { Icon, LatLng, LeafletMouseEvent, LeafletEvent } from "leaflet";
+import "leaflet/dist/leaflet.css";
+import { Component, Prop, Vue } from "vue-property-decorator";
+import { LMap, LTileLayer, LMarker, LPopup, LIcon } from "vue2-leaflet";
+import Vue2LeafletLocateControl from "@/components/Map/Vue2LeafletLocateControl.vue";
+import { CONFIG } from "../graphql/config";
+import { IConfig } from "../types/config.model";
 
 @Component({
-  components: { LTileLayer, LMap, LMarker, LPopup, LIcon, 'v-locatecontrol': Vue2LeafletLocateControl },
+  components: {
+    LTileLayer,
+    LMap,
+    LMarker,
+    LPopup,
+    LIcon,
+    "v-locatecontrol": Vue2LeafletLocateControl,
+  },
   apollo: {
     config: CONFIG,
   },
 })
 export default class Map extends Vue {
   @Prop({ type: Boolean, required: false, default: true }) readOnly!: boolean;
+
   @Prop({ type: String, required: true }) coords!: string;
-  @Prop({ type: Object, required: false }) marker!: { text: String|String[], icon: String };
+
+  @Prop({ type: Object, required: false }) marker!: { text: string | string[]; icon: string };
+
   @Prop({ type: Object, required: false }) options!: object;
-  @Prop({ type: Function, required: false, default: () => {} }) updateDraggableMarkerCallback!: Function;
+
+  @Prop({ type: Function, required: false })
+  updateDraggableMarkerCallback!: Function;
 
   defaultOptions: {
-    zoom: Number;
-    height: String;
-    width: String;
+    zoom: number;
+    height: string;
+    width: string;
   } = {
     zoom: 15,
-    height: '100%',
-    width: '100%',
+    height: "100%",
+    width: "100%",
   };
 
   zoom = this.defaultOptions.zoom;
+
   config!: IConfig;
 
+  /* eslint-disable */
   mounted() {
     // this part resolve an issue where the markers would not appear
     // @ts-ignore
     delete Icon.Default.prototype._getIconUrl;
 
     Icon.Default.mergeOptions({
-      iconRetinaUrl: require('leaflet/dist/images/marker-icon-2x.png'),
-      iconUrl: require('leaflet/dist/images/marker-icon.png'),
-      shadowUrl: require('leaflet/dist/images/marker-shadow.png'),
+      iconRetinaUrl: require("leaflet/dist/images/marker-icon-2x.png"),
+      iconUrl: require("leaflet/dist/images/marker-icon.png"),
+      shadowUrl: require("leaflet/dist/images/marker-shadow.png"),
     });
   }
+  /* eslint-enable */
 
-  openPopup(event) {
+  openPopup(event: LeafletEvent) {
     this.$nextTick(() => {
       event.target.openPopup();
     });
@@ -81,8 +96,13 @@ export default class Map extends Vue {
     return { ...this.defaultOptions, ...this.options };
   }
 
-  get lat() { return this.$props.coords.split(';')[1]; }
-  get lon() { return this.$props.coords.split(';')[0]; }
+  get lat() {
+    return this.$props.coords.split(";")[1];
+  }
+
+  get lon() {
+    return this.$props.coords.split(";")[0];
+  }
 
   get popupMultiLine() {
     if (Array.isArray(this.marker.text)) {
@@ -99,22 +119,22 @@ export default class Map extends Vue {
     this.updateDraggableMarkerCallback(e, this.zoom);
   }
 
-  updateZoom(zoom: Number) {
+  updateZoom(zoom: number) {
     this.zoom = zoom;
   }
 
   get attribution() {
-    return this.config.maps.tiles.attribution || this.$t('© The OpenStreetMap Contributors');
+    return this.config.maps.tiles.attribution || this.$t("© The OpenStreetMap Contributors");
   }
 }
 </script>
 <style lang="scss" scoped>
-    div.map-container {
-        height: 100%;
-        width: 100%;
+div.map-container {
+  height: 100%;
+  width: 100%;
 
-        .leaflet-map {
-            z-index: 20;
-        }
-    }
+  .leaflet-map {
+    z-index: 20;
+  }
+}
 </style>

js/src/components/Map/Vue2LeafletLocateControl.vue

@@ -1,30 +1,36 @@
 <template>
-    <div style="display: none;">
-        <slot v-if="ready"></slot>
-    </div>
+  <div style="display: none;">
+    <slot v-if="ready"></slot>
+  </div>
 </template>
 
 <script lang="ts">
 /**
- * Fork of https://github.com/domoritz/leaflet-locatecontrol to try to trigger location manually (not done ATM)
+ * Fork of https://github.com/domoritz/leaflet-locatecontrol
+ * to try to trigger location manually (not done ATM)
  */
 
-import L, { DomEvent } from 'leaflet';
-import { findRealParent, propsBinder } from 'vue2-leaflet';
-import 'leaflet.locatecontrol';
-import { Component, Prop, Vue } from 'vue-property-decorator';
+import L, { DomEvent } from "leaflet";
+import { findRealParent, propsBinder } from "vue2-leaflet";
+import "leaflet.locatecontrol";
+import { Component, Prop, Vue } from "vue-property-decorator";
 
 @Component({
   beforeDestroy() {
+    // eslint-disable-next-line @typescript-eslint/ban-ts-ignore
     // @ts-ignore
     this.parentContainer.removeLayer(this);
   },
 })
 export default class Vue2LeafletLocateControl extends Vue {
-  @Prop({ type: Object, default: () => { return {}; } }) options;
+  @Prop({ type: Object, default: () => ({}) }) options!: object;
+
   @Prop({ type: Boolean, default: true }) visible = true;
-  ready: boolean = false;
+
+  ready = false;
+
   mapObject!: any;
+
   parentContainer: any;
 
   mounted() {
@@ -43,5 +49,5 @@ export default class Vue2LeafletLocateControl extends Vue {
 </script>
 
 <style>
-    @import "~leaflet.locatecontrol/dist/L.Control.Locate.css";
+@import "~leaflet.locatecontrol/dist/L.Control.Locate.css";
 </style>

js/src/components/NavBar.vue

@@ -1,13 +1,24 @@
 <template>
   <b-navbar type="is-secondary" wrapper-class="container">
     <template slot="brand">
-      <b-navbar-item tag="router-link" :to="{ name: RouteName.HOME }"><logo /></b-navbar-item>
+      <b-navbar-item tag="router-link" :to="{ name: RouteName.HOME }" :aria-label="$t('Home')">
+        <logo />
+      </b-navbar-item>
     </template>
     <template slot="start">
-      <b-navbar-item tag="router-link" :to="{ name: RouteName.EXPLORE }">{{ $t('Explore') }}</b-navbar-item>
-      <b-navbar-item tag="router-link" :to="{ name: RouteName.MY_EVENTS }">{{ $t('My events') }}</b-navbar-item>
+      <b-navbar-item tag="router-link" :to="{ name: RouteName.EXPLORE }">{{
+        $t("Explore")
+      }}</b-navbar-item>
+      <b-navbar-item tag="router-link" :to="{ name: RouteName.MY_EVENTS }">{{
+        $t("My events")
+      }}</b-navbar-item>
+      <b-navbar-item tag="router-link" :to="{ name: RouteName.MY_GROUPS }">{{
+        $t("My groups")
+      }}</b-navbar-item>
       <b-navbar-item tag="span">
-        <b-button tag="router-link" :to="{ name: RouteName.CREATE_EVENT }" type="is-success">{{ $t('Create') }}</b-button>
+        <b-button tag="router-link" :to="{ name: RouteName.CREATE_EVENT }" type="is-success">{{
+          $t("Create")
+        }}</b-button>
       </b-navbar-item>
     </template>
     <template slot="end">
@@ -18,56 +29,72 @@
       <b-navbar-dropdown v-if="currentActor.id && currentUser.isLoggedIn" right>
         <template slot="label" v-if="currentActor" class="navbar-dropdown-profile">
           <figure class="image is-32x32" v-if="currentActor.avatar">
-            <img class="is-rounded" alt="avatarUrl" :src="currentActor.avatar.url">
+            <img class="is-rounded" alt="avatarUrl" :src="currentActor.avatar.url" />
           </figure>
           <b-icon v-else icon="account-circle" />
         </template>
 
-        <b-navbar-item tag="span" v-for="identity in identities" v-if="identities.length > 1" :active="identity.id === currentActor.id" :key="identity.id">
+        <!-- No identities dropdown if no identities -->
+        <span v-if="identities.length <= 1" />
+        <b-navbar-item
+          tag="span"
+          v-for="identity in identities"
+          v-else
+          :active="identity.id === currentActor.id"
+          :key="identity.id"
+        >
           <span @click="setIdentity(identity)">
             <div class="media-left">
               <figure class="image is-32x32" v-if="identity.avatar">
-                <img class="is-rounded" :src="identity.avatar.url" alt="" />
+                <img class="is-rounded" :src="identity.avatar.url" alt />
               </figure>
               <b-icon v-else size="is-medium" icon="account-circle" />
             </div>
 
             <div class="media-content">
               <span>{{ identity.displayName() }}</span>
-              <span class="has-text-grey" v-if="identity.name">
-                @{{ identity.preferredUsername }}
-              </span>
+              <span class="has-text-grey" v-if="identity.name"
+                >@{{ identity.preferredUsername }}</span
+              >
             </div>
           </span>
 
-          <hr class="navbar-divider">
+          <hr class="navbar-divider" />
         </b-navbar-item>
 
+        <b-navbar-item tag="router-link" :to="{ name: RouteName.UPDATE_IDENTITY }">{{
+          $t("My account")
+        }}</b-navbar-item>
 
-          <b-navbar-item tag="router-link" :to="{ name: RouteName.UPDATE_IDENTITY }">
-            {{ $t('My account') }}
-          </b-navbar-item>
+        <!--          <b-navbar-item tag="router-link" :to="{ name: RouteName.CREATE_GROUP }">-->
+        <!--            {{ $t('Create group') }}-->
+        <!--          </b-navbar-item>-->
 
-<!--          <b-navbar-item tag="router-link" :to="{ name: RouteName.CREATE_GROUP }">-->
-<!--            {{ $t('Create group') }}-->
-<!--          </b-navbar-item>-->
+        <b-navbar-item
+          v-if="currentUser.role === ICurrentUserRole.ADMINISTRATOR"
+          tag="router-link"
+          :to="{ name: RouteName.ADMIN_DASHBOARD }"
+          >{{ $t("Administration") }}</b-navbar-item
+        >
 
-          <b-navbar-item v-if="currentUser.role === ICurrentUserRole.ADMINISTRATOR" tag="router-link" :to="{ name: RouteName.ADMIN_DASHBOARD }">
-            {{ $t('Administration') }}
-          </b-navbar-item>
-
-          <b-navbar-item tag="span">
-            <span @click="logout">{{ $t('Log out') }}</span>
-          </b-navbar-item>
+        <b-navbar-item tag="span">
+          <span @click="logout">{{ $t("Log out") }}</span>
+        </b-navbar-item>
       </b-navbar-dropdown>
 
       <b-navbar-item v-else tag="div">
         <div class="buttons">
-          <router-link class="button is-primary" v-if="config && config.registrationsOpen" :to="{ name: RouteName.REGISTER }">
-            <strong>{{ $t('Sign up') }}</strong>
+          <router-link
+            class="button is-primary"
+            v-if="config && config.registrationsOpen"
+            :to="{ name: RouteName.REGISTER }"
+          >
+            <strong>{{ $t("Sign up") }}</strong>
           </router-link>
 
-          <router-link class="button is-light" :to="{ name: RouteName.LOGIN }">{{ $t('Log in') }}</router-link>
+          <router-link class="button is-light" :to="{ name: RouteName.LOGIN }">{{
+            $t("Log in")
+          }}</router-link>
         </div>
       </b-navbar-item>
     </template>
@@ -75,18 +102,18 @@
 </template>
 
 <script lang="ts">
-import { Component, Vue, Watch } from 'vue-property-decorator';
-import { CURRENT_USER_CLIENT } from '@/graphql/user';
-import { changeIdentity, logout } from '@/utils/auth';
-import { CURRENT_ACTOR_CLIENT, IDENTITIES } from '@/graphql/actor';
-import { IPerson, Person } from '@/types/actor';
-import { CONFIG } from '@/graphql/config';
-import { IConfig } from '@/types/config.model';
-import { ICurrentUser, ICurrentUserRole } from '@/types/current-user.model';
-import Logo from '@/components/Logo.vue';
-import SearchField from '@/components/SearchField.vue';
-import { RouteName } from '@/router';
-import { GraphQLError } from 'graphql';
+import { Component, Vue, Watch } from "vue-property-decorator";
+import Logo from "@/components/Logo.vue";
+import { GraphQLError } from "graphql";
+import { CURRENT_USER_CLIENT } from "../graphql/user";
+import { changeIdentity, logout } from "../utils/auth";
+import { CURRENT_ACTOR_CLIENT, IDENTITIES, UPDATE_DEFAULT_ACTOR } from "../graphql/actor";
+import { IPerson, Person } from "../types/actor";
+import { CONFIG } from "../graphql/config";
+import { IConfig } from "../types/config.model";
+import { ICurrentUser, ICurrentUserRole } from "../types/current-user.model";
+import SearchField from "./SearchField.vue";
+import RouteName from "../router/name";
 
 @Component({
   apollo: {
@@ -98,11 +125,14 @@ import { GraphQLError } from 'graphql';
     },
     identities: {
       query: IDENTITIES,
-      update: ({ identities }) => identities ? identities.map(identity => new Person(identity)) : [],
+      update: ({ identities }) =>
+        identities ? identities.map((identity: IPerson) => new Person(identity)) : [],
       skip() {
         return this.currentUser.isLoggedIn === false;
       },
-      error({ graphQLErrors }) { this.handleErrors(graphQLErrors); },
+      error({ graphQLErrors }) {
+        this.handleErrors(graphQLErrors);
+      },
     },
     config: {
       query: CONFIG,
@@ -115,34 +145,45 @@ import { GraphQLError } from 'graphql';
 })
 export default class NavBar extends Vue {
   currentActor!: IPerson;
+
   config!: IConfig;
+
   currentUser!: ICurrentUser;
+
   ICurrentUserRole = ICurrentUserRole;
+
   identities: IPerson[] = [];
+
   RouteName = RouteName;
 
-  @Watch('currentActor')
+  @Watch("currentActor")
   async initializeListOfIdentities() {
     if (!this.currentUser.isLoggedIn) return;
     const { data } = await this.$apollo.query<{ identities: IPerson[] }>({
       query: IDENTITIES,
     });
     if (data) {
-      this.identities = data.identities.map(identity => new Person(identity));
+      this.identities = data.identities.map((identity) => new Person(identity));
 
       // If we don't have any identities, the user has validated their account,
       // is logging for the first time but didn't create an identity somehow
       if (this.identities.length === 0) {
         await this.$router.push({
           name: RouteName.REGISTER_PROFILE,
-          params: { email: this.currentUser.email, userAlreadyActivated: 'true' },
+          params: {
+            email: this.currentUser.email,
+            userAlreadyActivated: "true",
+          },
         });
       }
     }
   }
 
   async handleErrors(errors: GraphQLError[]) {
-    if (errors.length > 0 && errors[0].message === 'You need to be logged-in to view your list of identities') {
+    if (
+      errors.length > 0 &&
+      errors[0].message === "You need to be logged-in to view your list of identities"
+    ) {
       await this.logout();
     }
   }
@@ -150,9 +191,9 @@ export default class NavBar extends Vue {
   async logout() {
     await logout(this.$apollo.provider.defaultClient);
     this.$buefy.notification.open({
-      message: this.$t('You have been disconnected') as string,
-      type: 'is-success',
-      position: 'is-bottom-right',
+      message: this.$t("You have been disconnected") as string,
+      type: "is-success",
+      position: "is-bottom-right",
       duration: 5000,
     });
 
@@ -161,7 +202,13 @@ export default class NavBar extends Vue {
   }
 
   async setIdentity(identity: IPerson) {
-    return await changeIdentity(this.$apollo.provider.defaultClient, identity);
+    await this.$apollo.mutate({
+      mutation: UPDATE_DEFAULT_ACTOR,
+      variables: {
+        preferredUsername: identity.preferredUsername,
+      },
+    });
+    return changeIdentity(this.$apollo.provider.defaultClient, identity);
   }
 }
 </script>
@@ -169,6 +216,10 @@ export default class NavBar extends Vue {
 @import "../variables.scss";
 
 nav {
+  .navbar-item svg {
+    height: 1.75rem;
+  }
+
   .navbar-dropdown .navbar-item {
     cursor: pointer;
 

js/src/components/Participation/ConfirmParticipation.vue

@@ -1,33 +1,34 @@
 <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>
+  <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';
+import { Component, Prop, Vue } from "vue-property-decorator";
+import RouteName from "../../router/name";
+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() {
@@ -36,7 +37,9 @@ export default class ConfirmParticipation extends Vue {
 
   async validateAction() {
     try {
-      const { data } = await this.$apollo.mutate<{ confirmParticipation: IParticipant }>({
+      const { data } = await this.$apollo.mutate<{
+        confirmParticipation: IParticipant;
+      }>({
         mutation: CONFIRM_PARTICIPATION,
         variables: {
           token: this.token,
@@ -46,7 +49,10 @@ 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 } } );
+        await this.$router.replace({
+          name: RouteName.EVENT,
+          params: { uuid: data.confirmParticipation.event.uuid },
+        });
       }
     } catch (err) {
       console.error(err);

js/src/components/Participation/ParticipationWithAccount.vue

@@ -1,54 +1,65 @@
 <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">
-                        <subtitle>{{ $t('I have an account on another Mobilizon instance.')}}</subtitle>
-                        <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>
+  <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">
+            <subtitle>{{ $t("I have an account on another Mobilizon instance.") }}</subtitle>
+            <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>
-    </section>
+        <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';
-import Subtitle from '@/components/Utils/Subtitle.vue';
+import { Component, Prop, Vue } from "vue-property-decorator";
+import VerticalDivider from "@/components/Utils/VerticalDivider.vue";
+import Subtitle from "@/components/Utils/Subtitle.vue";
+import RouteName from "../../router/name";
 
 @Component({
   components: { Subtitle, VerticalDivider },
 })
 export default class ParticipationWithAccount extends Vue {
   @Prop({ type: String, required: true }) uuid!: string;
-  remoteActorAddress: string = '';
+
+  remoteActorAddress = "";
+
   RouteName = RouteName;
 
   get host() {
@@ -56,29 +67,39 @@ export default class ParticipationWithAccount extends Vue {
   }
 
   get uri(): string {
-    return `${window.location.origin}${this.$router.resolve({ name: RouteName.EVENT, params: { uuid: this.uuid } }).href}`;
+    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 [_, 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 scheme = process.env.NODE_ENV === 'production' ? 'https' : 'http';
-    const data = await ((await fetch(`${scheme}://${hostname}/.well-known/webfinger?resource=acct:${identity}`)).json());
+    const scheme = process.env.NODE_ENV === "production" ? "https" : "http";
+    const data = await (
+      await fetch(`${scheme}://${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';
-      });
+      const link: { template: string } = data.links.find(
+        (link: any) =>
+          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));
+      if (link && link.template.includes("{uri}")) {
+        return link.template.replace("{uri}", encodeURIComponent(this.uri));
       }
     }
-    throw new Error('No interaction path found in webfinger data');
+    throw new Error("No interaction path found in webfinger data");
   }
 }
-</script>
+</script>

js/src/components/Participation/ParticipationWithoutAccount.vue

@@ -1,48 +1,72 @@
 <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-input
-                                type="email"
-                                v-model="anonymousParticipation.email"
-                                placeholder="Your email"
-                                required>
-                        </b-input>
-                    </b-field>
-                    <p v-if="event.joinOptions === EventJoinOptions.RESTRICTED">{{ $t("The event organizer manually approves participations. Since you've chosen to participate without an account, please explain why you want to participate to this event.") }}</p>
-                    <p v-else>{{ $t("If you want, you may send a message to the event organizer here.") }}</p>
-                    <b-field :label="$t('Message')">
-                        <b-input
-                                type="textarea"
-                                v-model="anonymousParticipation.message"
-                                minlength="10"
-                                :required="event.joinOptions === EventJoinOptions.RESTRICTED">
-                        </b-input>
-                    </b-field>
-                    <b-button 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>
-        </div>
-    </section>
+  <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-input
+              type="email"
+              v-model="anonymousParticipation.email"
+              placeholder="Your email"
+              required
+            ></b-input>
+          </b-field>
+          <p v-if="event.joinOptions === EventJoinOptions.RESTRICTED">
+            {{
+              $t(
+                "The event organizer manually approves participations. Since you've chosen to participate without an account, please explain why you want to participate to this event."
+              )
+            }}
+          </p>
+          <p v-else>{{ $t("If you want, you may send a message to the event organizer here.") }}</p>
+          <b-field :label="$t('Message')">
+            <b-input
+              type="textarea"
+              v-model="anonymousParticipation.message"
+              minlength="10"
+              :required="event.joinOptions === EventJoinOptions.RESTRICTED"
+            ></b-input>
+          </b-field>
+          <b-button 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>
+    </div>
+  </section>
 </template>
 <script lang="ts">
-import { Component, Prop, Vue } from 'vue-property-decorator';
-import { EventModel, IEvent, IParticipant, ParticipantRole, EventJoinOptions } 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';
+import { Component, Prop, Vue } from "vue-property-decorator";
+import {
+  EventModel,
+  IEvent,
+  IParticipant,
+  ParticipantRole,
+  EventJoinOptions,
+} 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/name";
 
 @Component({
   apollo: {
@@ -53,7 +77,9 @@ import { RouteName } from '@/router';
           uuid: this.uuid,
         };
       },
-      skip() { return !this.uuid; },
+      skip() {
+        return !this.uuid;
+      },
       update: (data) => new EventModel(data.event),
     },
     config: CONFIG,
@@ -61,10 +87,18 @@ import { RouteName } from '@/router';
 })
 export default class ParticipationWithoutAccount extends Vue {
   @Prop({ type: String, required: true }) uuid!: string;
-  anonymousParticipation: { email: String, message: String } = { email: '', message: '' };
+
+  anonymousParticipation: { email: string; message: string } = {
+    email: "",
+    message: "",
+  };
+
   event!: IEvent;
+
   config!: IConfig;
-  error: String|boolean = false;
+
+  error: string | boolean = false;
+
   EventJoinOptions = EventJoinOptions;
 
   async joinEvent() {
@@ -88,7 +122,7 @@ export default class ParticipationWithoutAccount extends Vue {
           if (cachedData == null) return;
           const { event } = cachedData;
           if (event === null) {
-            console.error('Cannot update event participant cache, because of null value.');
+            console.error("Cannot update event participant cache, because of null value.");
             return;
           }
 
@@ -99,19 +133,31 @@ export default class ParticipationWithoutAccount extends Vue {
             event.participantStats.participant = event.participantStats.participant + 1;
           }
 
-          store.writeQuery({ query: FETCH_EVENT, variables: { uuid: this.event.uuid }, data: { event } });
+          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 } });
+        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;
+      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>
+</script>

js/src/components/Participation/UnloggedParticipation.vue

@@ -1,67 +1,94 @@
 <template>
-    <section class="section container hero">
-        <div class="hero-body" v-if="event">
-            <div class="container">
-                <subtitle>{{ $t('You wish to participate to the following event')}}</subtitle>
-                <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>
+  <section class="section container hero">
+    <div class="hero-body" v-if="event">
+      <div class="container">
+        <subtitle>{{ $t("You wish to participate to the following event") }}</subtitle>
+        <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>
-    </section>
+        <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';
-import Subtitle from '@/components/Utils/Subtitle.vue';
+import { Component, Prop, Vue } from "vue-property-decorator";
+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";
+import Subtitle from "@/components/Utils/Subtitle.vue";
+import RouteName from "../../router/name";
 
 @Component({
-  components: { VerticalDivider, EventListViewCard, EventListCard, Subtitle },
+  components: {
+    VerticalDivider,
+    EventListViewCard,
+    EventListCard,
+    Subtitle,
+  },
   apollo: {
     event: {
       query: FETCH_EVENT,
@@ -70,7 +97,9 @@ import Subtitle from '@/components/Utils/Subtitle.vue';
           uuid: this.uuid,
         };
       },
-      skip() { return !this.uuid; },
+      skip() {
+        return !this.uuid;
+      },
       update: (data) => new EventModel(data.event),
     },
     config: CONFIG,
@@ -78,8 +107,11 @@ import Subtitle from '@/components/Utils/Subtitle.vue';
 })
 export default class UnloggedParticipation extends Vue {
   @Prop({ type: String, required: true }) uuid!: string;
+
   RouteName = RouteName;
+
   event!: IEvent;
+
   config!: IConfig;
 
   get host() {
@@ -91,15 +123,17 @@ export default class UnloggedParticipation extends Vue {
   }
 
   get hasAnonymousEmailParticipationMethod(): boolean {
-    return this.config.anonymous.participation.allowed && this.config.anonymous.participation.validation.email.enabled;
+    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>
+.column > a {
+  display: flex;
+  flex-direction: column;
+  align-items: center;
+}
+</style>

js/src/components/PictureUpload.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="root">
     <figure class="image" v-if="imageSrc">
-      <img :src="imageSrc"  />
+      <img :src="imageSrc" />
     </figure>
     <figure class="image is-128x128" v-else>
       <div class="image-placeholder">
@@ -12,50 +12,61 @@
     <b-upload @input="onFileChanged" :accept="accept">
       <a class="button is-primary">
         <b-icon icon="upload"></b-icon>
-        <span>{{ $t('Click to upload') }}</span>
+        <span>{{ $t("Click to upload") }}</span>
       </a>
     </b-upload>
   </div>
 </template>
 
 <style scoped lang="scss">
-  .root {
-    display: flex;
-    align-items: center;
-  }
+.root {
+  display: flex;
+  align-items: center;
+}
 
-  figure.image {
-    margin-right: 30px;
-    max-height: 200px;
-    max-width: 200px;
-    overflow: hidden;
-  }
+figure.image {
+  margin-right: 30px;
+  max-height: 200px;
+  max-width: 200px;
+  overflow: hidden;
+}
 
-  .image-placeholder {
-    background-color: grey;
-    width: 100%;
-    height: 100%;
-    border-radius: 100%;
-    display: flex;
-    justify-content: center;
-    align-items: center;
+.image-placeholder {
+  background-color: grey;
+  width: 100%;
+  height: 100%;
+  border-radius: 100%;
+  display: flex;
+  justify-content: center;
+  align-items: center;
 
-    span {
-      flex: 1;
-      color: #eee;
-    }
+  span {
+    flex: 1;
+    color: #eee;
   }
+}
 </style>
 
 <script lang="ts">
-import { Component, Model, Prop, Vue, Watch } from 'vue-property-decorator';
+import { Component, Model, Prop, Vue, Watch } from "vue-property-decorator";
 
 @Component
 export default class PictureUpload extends Vue {
-  @Model('change', { type: File }) readonly pictureFile!: File;
-  @Prop({ type: String, required: false, default: 'image/gif,image/png,image/jpeg,image/webp' }) accept;
-  // @ts-ignore
-  @Prop({ type: String, required: false, default() { return this.$t('Avatar'); } }) textFallback!: string;
+  @Model("change", { type: File }) readonly pictureFile!: File;
+
+  @Prop({ type: String, required: false, default: "image/gif,image/png,image/jpeg,image/webp" })
+  accept!: string;
+
+  @Prop({
+    type: String,
+    required: false,
+    default() {
+      // eslint-disable-next-line @typescript-eslint/ban-ts-ignore
+      // @ts-ignore
+      return this.$t("Avatar");
+    },
+  })
+  textFallback!: string;
 
   imageSrc: string | null = null;
 
@@ -63,13 +74,13 @@ export default class PictureUpload extends Vue {
     this.updatePreview(this.pictureFile);
   }
 
-  @Watch('pictureFile')
+  @Watch("pictureFile")
   onPictureFileChanged(val: File) {
     this.updatePreview(val);
   }
 
   onFileChanged(file: File) {
-    this.$emit('change', file);
+    this.$emit("change", file);
 
     this.updatePreview(file);
   }

js/src/components/Report/ReportCard.vue

@@ -4,39 +4,39 @@
 ```
 </docs>
 <template>
-    <div class="card" v-if="report">
-        <div class="card-content">
-            <div class="media">
-                <div class="media-left">
-                    <figure class="image is-48x48" v-if="report.reported.avatar">
-                        <img alt="" :src="report.reported.avatar.url" />
-                    </figure>
-                    <b-icon v-else size="is-large" icon="account-circle" />
-                </div>
-                <div class="media-content">
-                    <p class="title is-4">{{ report.reported.name }}</p>
-                    <p class="subtitle is-6">@{{ report.reported.preferredUsername }}</p>
-                </div>
-            </div>
-
-            <div class="content columns">
-                <div class="column is-one-quarter-desktop">
-                    <span v-if="report.reporter.type === ActorType.APPLICATION">
-                        {{ $t('Reported by someone on {domain}', { domain: report.reporter.domain}) }}
-                    </span>
-                    <span v-else>
-                        {{ $t('Reported by {reporter}', { reporter: report.reporter.preferredUsername}) }}
-                    </span>
-                </div>
-                <div class="column" v-if="report.content">{{ report.content }}</div>
-            </div>
+  <div class="card" v-if="report">
+    <div class="card-content">
+      <div class="media">
+        <div class="media-left">
+          <figure class="image is-48x48" v-if="report.reported.avatar">
+            <img alt="" :src="report.reported.avatar.url" />
+          </figure>
+          <b-icon v-else size="is-large" icon="account-circle" />
         </div>
+        <div class="media-content">
+          <p class="title is-4">{{ report.reported.name }}</p>
+          <p class="subtitle is-6">@{{ report.reported.preferredUsername }}</p>
+        </div>
+      </div>
+
+      <div class="content columns">
+        <div class="column is-one-quarter-desktop">
+          <span v-if="report.reporter.type === ActorType.APPLICATION">
+            {{ $t("Reported by someone on {domain}", { domain: report.reporter.domain }) }}
+          </span>
+          <span v-else>
+            {{ $t("Reported by {reporter}", { reporter: report.reporter.preferredUsername }) }}
+          </span>
+        </div>
+        <div class="column" v-if="report.content">{{ report.content }}</div>
+      </div>
     </div>
+  </div>
 </template>
 <script lang="ts">
-import { Component, Prop, Vue } from 'vue-property-decorator';
-import { IReport } from '@/types/report.model';
-import { ActorType } from '@/types/actor';
+import { Component, Prop, Vue } from "vue-property-decorator";
+import { IReport } from "@/types/report.model";
+import { ActorType } from "@/types/actor";
 
 @Component
 export default class ReportCard extends Vue {
@@ -46,9 +46,9 @@ export default class ReportCard extends Vue {
 }
 </script>
 <style lang="scss">
-    .content img.image {
-        display: inline;
-        height: 1.5em;
-        vertical-align: text-bottom;
-    }
-</style>
+.content img.image {
+  display: inline;
+  height: 1.5em;
+  vertical-align: text-bottom;
+}
+</style>

js/src/components/Report/ReportModal.vue

@@ -1,77 +1,80 @@
 <template>
-        <div class="modal-card">
-            <header class="modal-card-head" v-if="title">
-                <p class="modal-card-title">{{ title }}</p>
-            </header>
+  <div class="modal-card">
+    <header class="modal-card-head" v-if="title">
+      <p class="modal-card-title">{{ title }}</p>
+    </header>
 
-            <section
-                    class="modal-card-body is-flex"
-                    :class="{ 'is-titleless': !title }">
-                <div class="media">
-                    <div
-                            class="media-left">
-                        <b-icon
-                                icon="alert"
-                                type="is-warning"
-                                size="is-large"/>
-                    </div>
-                    <div class="media-content">
-                        <div class="box" v-if="comment">
-                            <article class="media">
-                                <div class="media-left">
-                                    <figure class="image is-48x48" v-if="comment.actor.avatar">
-                                        <img :src="comment.actor.avatar.url" alt="Image">
-                                    </figure>
-                                    <b-icon class="media-left" v-else size="is-large" icon="account-circle" />
-                                </div>
-                                <div class="media-content">
-                                    <div class="content">
-                                        <strong>{{ comment.actor.name }}</strong> <small>@{{ comment.actor.preferredUsername }}</small>
-                                        <br>
-                                        <p v-html="comment.text"></p>
-                                    </div>
-                                </div>
-                            </article>
-                        </div>
-                        <p>{{ $t('The report will be sent to the moderators of your instance. You can explain why you report this content below.') }}</p>
-
-                        <div class="control">
-                            <b-input
-                                    v-model="content"
-                                    type="textarea"
-                                    @keyup.enter="confirm"
-                                    :placeholder="$t('Additional comments')"
-                            />
-                        </div>
-
-                        <div class="control" v-if="outsideDomain">
-                            <p>{{ $t('The content came from another server. Transfer an anonymous copy of the report?') }}</p>
-                            <b-switch v-model="forward">{{ $t('Transfer to {outsideDomain}', { outsideDomain }) }}</b-switch>
-                        </div>
-                    </div>
-                </div>
-            </section>
-
-            <footer class="modal-card-foot">
-                <button
-                        class="button"
-                        ref="cancelButton"
-                        @click="close">
-                    {{ translatedCancelText }}
-                </button>
-                <button
-                        class="button is-primary"
-                        ref="confirmButton"
-                        @click="confirm">
-                    {{ translatedConfirmText }}
-                </button>
-            </footer>
+    <section class="modal-card-body is-flex" :class="{ 'is-titleless': !title }">
+      <div class="media">
+        <div class="media-left">
+          <b-icon icon="alert" type="is-warning" size="is-large" />
         </div>
+        <div class="media-content">
+          <div class="box" v-if="comment">
+            <article class="media">
+              <div class="media-left">
+                <figure class="image is-48x48" v-if="comment.actor.avatar">
+                  <img :src="comment.actor.avatar.url" alt="Image" />
+                </figure>
+                <b-icon class="media-left" v-else size="is-large" icon="account-circle" />
+              </div>
+              <div class="media-content">
+                <div class="content">
+                  <strong>{{ comment.actor.name }}</strong>
+                  <small>@{{ comment.actor.preferredUsername }}</small>
+                  <br />
+                  <p v-html="comment.text"></p>
+                </div>
+              </div>
+            </article>
+          </div>
+          <p>
+            {{
+              $t(
+                "The report will be sent to the moderators of your instance. You can explain why you report this content below."
+              )
+            }}
+          </p>
+
+          <div class="control">
+            <b-input
+              v-model="content"
+              type="textarea"
+              @keyup.enter="confirm"
+              :placeholder="$t('Additional comments')"
+            />
+          </div>
+
+          <div class="control" v-if="outsideDomain">
+            <p>
+              {{
+                $t(
+                  "The content came from another server. Transfer an anonymous copy of the report?"
+                )
+              }}
+            </p>
+            <b-switch v-model="forward">{{
+              $t("Transfer to {outsideDomain}", { outsideDomain })
+            }}</b-switch>
+          </div>
+        </div>
+      </div>
+    </section>
+
+    <footer class="modal-card-foot">
+      <button class="button" ref="cancelButton" @click="close">
+        {{ translatedCancelText }}
+      </button>
+      <button class="button is-primary" ref="confirmButton" @click="confirm">
+        {{ translatedConfirmText }}
+      </button>
+    </footer>
+  </div>
 </template>
 
 <script lang="ts">
-import { Component, Prop, Vue } from 'vue-property-decorator';
-import { IComment } from '@/types/comment.model';
+import { Component, Prop, Vue } from "vue-property-decorator";
+import { IComment } from "../../types/comment.model";
 
 @Component({
   mounted() {
@@ -79,23 +82,30 @@ import { IComment } from '@/types/comment.model';
   },
 })
 export default class ReportModal extends Vue {
-  @Prop({ type: Function, default: () => {} }) onConfirm;
-  @Prop({ type: String }) title;
-  @Prop({ type: Object }) comment!: IComment;
-  @Prop({ type: String, default: '' }) outsideDomain;
-  @Prop({ type: String }) cancelText;
-  @Prop({ type: String }) confirmText;
+  @Prop({ type: Function }) onConfirm!: Function;
 
-  isActive: boolean = false;
-  content: string = '';
-  forward: boolean = false;
+  @Prop({ type: String }) title!: string;
+
+  @Prop({ type: Object }) comment!: IComment;
+
+  @Prop({ type: String, default: "" }) outsideDomain!: string;
+
+  @Prop({ type: String }) cancelText!: string;
+
+  @Prop({ type: String }) confirmText!: string;
+
+  isActive = false;
+
+  content = "";
+
+  forward = false;
 
   get translatedCancelText() {
-    return this.cancelText || this.$t('Cancel');
+    return this.cancelText || this.$t("Cancel");
   }
 
   get translatedConfirmText() {
-    return this.confirmText || this.$t('Send the report');
+    return this.confirmText || this.$t("Send the report");
   }
 
   confirm() {
@@ -103,32 +113,32 @@ export default class ReportModal extends Vue {
     this.close();
   }
 
-    /**
-     * Close the Dialog.
-     */
+  /**
+   * Close the Dialog.
+   */
   close() {
     this.isActive = false;
-    this.$emit('close');
+    this.$emit("close");
   }
 }
 </script>
 <style lang="scss" scoped>
-    .modal-card .modal-card-foot {
-        justify-content: flex-end;
+.modal-card .modal-card-foot {
+  justify-content: flex-end;
+}
+
+.modal-card-body {
+  .media-content {
+    .box {
+      .media {
+        padding-top: 0;
+        border-top: none;
+      }
     }
 
-    .modal-card-body {
-        .media-content {
-            .box {
-                .media {
-                    padding-top: 0;
-                    border-top: none;
-                }
-            }
-
-            & > p {
-                margin-bottom: 2rem;
-            }
-        }
+    & > p {
+      margin-bottom: 2rem;
     }
+  }
+}
 </style>

js/src/components/Resource/FolderItem.vue

@@ -0,0 +1,171 @@
+<template>
+  <div class="resource-wrapper">
+    <router-link
+      :to="{
+        name: RouteName.RESOURCE_FOLDER,
+        params: {
+          path: ResourceMixin.resourcePathArray(resource),
+          preferredUsername: usernameWithDomain(group),
+        },
+      }"
+    >
+      <div class="preview">
+        <b-icon icon="folder" size="is-large" />
+      </div>
+      <div class="body">
+        <h3>{{ resource.title }}</h3>
+        <span class="host" v-if="inline">{{ resource.updatedAt | formatDateTimeString }}</span>
+      </div>
+      <draggable
+        v-if="!inline"
+        class="dropzone"
+        v-model="list"
+        :sort="false"
+        :group="groupObject"
+        @change="onChange"
+      />
+    </router-link>
+    <resource-dropdown
+      class="actions"
+      v-if="!inline"
+      @delete="$emit('delete', resource.id)"
+      @move="$emit('move', resource.id)"
+      @rename="$emit('rename', resource)"
+    />
+  </div>
+</template>
+<script lang="ts">
+import { Component, Mixins, Prop } from "vue-property-decorator";
+import { Route } from "vue-router";
+import Draggable, { ChangeEvent } from "vuedraggable";
+import { IResource } from "../../types/resource";
+import RouteName from "../../router/name";
+import ResourceMixin from "../../mixins/resource";
+import { IGroup, usernameWithDomain } from "../../types/actor";
+import ResourceDropdown from "./ResourceDropdown.vue";
+import { UPDATE_RESOURCE } from "../../graphql/resources";
+
+@Component({
+  components: { Draggable, ResourceDropdown },
+})
+export default class FolderItem extends Mixins(ResourceMixin) {
+  @Prop({ required: true, type: Object }) resource!: IResource;
+
+  @Prop({ required: true, type: Object }) group!: IGroup;
+
+  @Prop({ required: false, default: false }) inline!: boolean;
+
+  list = [];
+
+  groupObject: object = {
+    name: `folder-${this.resource.title}`,
+    pull: false,
+    put: ["resources"],
+  };
+
+  RouteName = RouteName;
+
+  ResourceMixin = ResourceMixin;
+
+  usernameWithDomain = usernameWithDomain;
+
+  async onChange(evt: ChangeEvent<IResource>): Promise<Route | undefined> {
+    console.log("into folder item");
+    console.log(evt);
+    if (evt.added && evt.added.element) {
+      const movedResource = evt.added.element as IResource;
+      const updatedResource = await this.moveResource(movedResource);
+      if (updatedResource && this.resource.path) {
+        // eslint-disable-next-line
+        // @ts-ignore
+        return this.$router.push({
+          name: RouteName.RESOURCE_FOLDER,
+          params: {
+            // eslint-disable-next-line
+            // @ts-ignore
+            path: ResourceMixin.resourcePathArray(this.resource),
+            preferredUsername: this.group.preferredUsername,
+          },
+        });
+      }
+    }
+    return undefined;
+  }
+
+  async moveResource(resource: IResource): Promise<IResource | undefined> {
+    const { data } = await this.$apollo.mutate<{ updateResource: IResource }>({
+      mutation: UPDATE_RESOURCE,
+      variables: {
+        id: resource.id,
+        path: `${this.resource.path}/${resource.title}`,
+        parentId: this.resource.id,
+      },
+    });
+    if (!data) {
+      console.error("Error while updating resource");
+      return undefined;
+    }
+    return data.updateResource;
+  }
+}
+</script>
+<style lang="scss" scoped>
+@import "@/variables.scss";
+
+.resource-wrapper {
+  display: flex;
+  flex: 1;
+  align-items: center;
+
+  .actions {
+    flex: 0;
+    display: block;
+    margin: auto 1rem auto 2rem;
+    cursor: pointer;
+  }
+}
+
+.dropzone {
+  position: absolute;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  z-index: 10;
+}
+
+a {
+  display: flex;
+  font-size: 14px;
+  color: #444b5d;
+  text-decoration: none;
+  overflow: hidden;
+  flex: 1;
+  position: relative;
+
+  .preview {
+    flex: 0 0 100px;
+    position: relative;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+  }
+
+  .body {
+    padding: 10px 8px 8px;
+    flex: 1 1 auto;
+    overflow: hidden;
+
+    h3 {
+      white-space: nowrap;
+      display: block;
+      font-weight: 500;
+      margin-bottom: 5px;
+      color: $primary;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      text-decoration: none;
+    }
+  }
+}
+</style>

js/src/components/Resource/ResourceDropdown.vue

@@ -0,0 +1,24 @@
+<template>
+  <b-dropdown aria-role="list" position="is-bottom-left">
+    <b-icon icon="dots-horizontal" slot="trigger" />
+
+    <b-dropdown-item aria-role="listitem" @click="$emit('rename')">
+      <b-icon icon="pencil" />
+      {{ $t("Rename") }}
+    </b-dropdown-item>
+    <b-dropdown-item aria-role="listitem" @click="$emit('move')">
+      <b-icon icon="folder-move" />
+      {{ $t("Move") }}
+    </b-dropdown-item>
+    <b-dropdown-item aria-role="listitem" @click="$emit('delete')">
+      <b-icon icon="delete" />
+      {{ $t("Delete") }}
+    </b-dropdown-item>
+  </b-dropdown>
+</template>
+<script lang="ts">
+import { Component, Vue, Prop } from "vue-property-decorator";
+
+@Component
+export default class ResourceDropdown extends Vue {}
+</script>

js/src/components/Resource/ResourceItem.vue

@@ -0,0 +1,137 @@
+<template>
+  <div class="resource-wrapper">
+    <a :href="resource.resourceUrl" target="_blank">
+      <div class="preview">
+        <div v-if="resource.type && Object.keys(mapServiceTypeToIcon).includes(resource.type)">
+          <b-icon :icon="mapServiceTypeToIcon[resource.type]" size="is-large" />
+        </div>
+        <div
+          class="preview-image"
+          v-else-if="resource.metadata && resource.metadata.imageRemoteUrl"
+          :style="`background-image: url(${resource.metadata.imageRemoteUrl})`"
+        />
+        <div class="preview-type" v-else>
+          <b-icon icon="link" size="is-large" />
+        </div>
+      </div>
+      <div class="body">
+        <img
+          class="favicon"
+          v-if="resource.metadata && resource.metadata.faviconUrl"
+          :src="resource.metadata.faviconUrl"
+        />
+        <h3>{{ resource.title }}</h3>
+        <span class="host" v-if="inline">{{ resource.updatedAt | formatDateTimeString }}</span>
+        <span class="host" v-else>{{ urlHostname }}</span>
+      </div>
+    </a>
+    <resource-dropdown
+      class="actions"
+      v-if="!inline"
+      @delete="$emit('delete', resource.id)"
+      @move="$emit('move', resource.id)"
+      @rename="$emit('rename', resource)"
+    />
+  </div>
+</template>
+<script lang="ts">
+import { Component, Prop, Vue } from "vue-property-decorator";
+import { IResource, mapServiceTypeToIcon } from "@/types/resource";
+import ResourceDropdown from "@/components/Resource/ResourceDropdown.vue";
+
+@Component({
+  components: { ResourceDropdown },
+})
+export default class ResourceItem extends Vue {
+  @Prop({ required: true, type: Object }) resource!: IResource;
+
+  @Prop({ required: false, default: false }) inline!: boolean;
+
+  list = [];
+
+  mapServiceTypeToIcon = mapServiceTypeToIcon;
+
+  get urlHostname(): string {
+    return new URL(this.resource.resourceUrl).hostname.replace(/^(www\.)/, "");
+  }
+}
+</script>
+<style lang="scss" scoped>
+@import "@/variables.scss";
+
+.resource-wrapper {
+  display: flex;
+  flex: 1;
+  align-items: center;
+
+  .actions {
+    flex: 0;
+    display: block;
+    margin: auto 1rem auto 2rem;
+    cursor: pointer;
+  }
+}
+
+a {
+  display: flex;
+  font-size: 14px;
+  color: #444b5d;
+  text-decoration: none;
+  overflow: hidden;
+  flex: 1;
+
+  .preview {
+    flex: 0 0 100px;
+    position: relative;
+    display: flex;
+    align-items: center;
+    justify-content: center;
+
+    .preview-image {
+      border-radius: 4px 0 0 4px;
+      display: block;
+      margin: 0;
+      width: 100%;
+      height: 100%;
+      object-fit: cover;
+      background-size: cover;
+      background-position: 50%;
+    }
+  }
+
+  .body {
+    padding: 10px 8px 8px;
+    flex: 1 1 auto;
+    overflow: hidden;
+
+    img.favicon {
+      display: inline-block;
+      width: 16px;
+      height: 16px;
+      margin-right: 6px;
+      vertical-align: middle;
+    }
+
+    h3 {
+      white-space: nowrap;
+      display: inline-block;
+      font-weight: 500;
+      margin-bottom: 5px;
+      color: $primary;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      text-decoration: none;
+      vertical-align: middle;
+    }
+
+    .host {
+      display: block;
+      margin-top: 5px;
+      font-size: 13px;
+      overflow: hidden;
+      text-overflow: ellipsis;
+      white-space: nowrap;
+    }
+  }
+}
+</style>

js/src/components/SearchField.vue

@@ -1,33 +1,52 @@
 <template>
-    <b-input custom-class="searchField" icon="magnify" type="search" rounded :placeholder="defaultPlaceHolder" v-model="searchText" @keyup.native.enter="enter" />
+  <label>
+    <span class="visually-hidden">{{ defaultPlaceHolder }}</span>
+    <b-input
+      custom-class="searchField"
+      icon="magnify"
+      type="search"
+      rounded
+      :placeholder="defaultPlaceHolder"
+      v-model="searchText"
+      @keyup.native.enter="enter"
+    />
+  </label>
 </template>
 <script lang="ts">
-import { Component, Prop, Vue } from 'vue-property-decorator';
-import { RouteName } from '@/router';
+import { Component, Prop, Vue } from "vue-property-decorator";
+import RouteName from "../router/name";
 
 @Component
 export default class SearchField extends Vue {
   @Prop({ type: String, required: false }) placeholder!: string;
-  searchText: string = '';
+
+  searchText = "";
 
   enter() {
-    this.$router.push({ name: RouteName.SEARCH, params: { searchTerm: this.searchText } });
+    this.$router.push({
+      name: RouteName.SEARCH,
+      params: { searchTerm: this.searchText },
+    });
   }
 
   get defaultPlaceHolder(): string {
-      // We can't use "this" inside @Prop's default value.
-    return this.placeholder || this.$t('Search') as string;
+    // We can't use "this" inside @Prop's default value.
+    return this.placeholder || (this.$t("Search") as string);
   }
 }
 </script>
 
 <style lang="scss">
-    input.searchField {
-        box-shadow: none;
-        border-color: #b5b5b5;
+label span.visually-hidden {
+  display: none;
+}
 
-        &::placeholder {
-            color: gray;
-        }
-    }
+input.searchField {
+  box-shadow: none;
+  border-color: #b5b5b5;
+
+  &::placeholder {
+    color: gray;
+  }
+}
 </style>

js/src/components/Settings/SettingMenuItem.vue

@@ -1,14 +1,14 @@
 <template>
-    <li class="setting-menu-item" :class="{ active: isActive }">
-        <router-link v-if="menuItem.to" :to="menuItem.to">
-            <span>{{ menuItem.title }}</span>
-        </router-link>
-        <span v-else>{{ menuItem.title }}</span>
-    </li>
+  <li class="setting-menu-item" :class="{ active: isActive }">
+    <router-link v-if="menuItem.to" :to="menuItem.to">
+      <span>{{ menuItem.title }}</span>
+    </router-link>
+    <span v-else>{{ menuItem.title }}</span>
+  </li>
 </template>
 <script lang="ts">
-import { Component, Prop, Vue } from 'vue-property-decorator';
-import { ISettingMenuSection } from '@/types/setting-menu.model';
+import { Component, Prop, Vue } from "vue-property-decorator";
+import { ISettingMenuSection } from "@/types/setting-menu.model";
 
 @Component
 export default class SettingMenuItem extends Vue {
@@ -28,27 +28,28 @@ export default class SettingMenuItem extends Vue {
 </script>
 
 <style lang="scss" scoped>
-    @import "@/variables.scss";
+@import "@/variables.scss";
 
-    li.setting-menu-item {
-        font-size: 1.05rem;
-        background-color: #fff1de;
-        color: $primary;
-        margin: auto;
+li.setting-menu-item {
+  font-size: 1.05rem;
+  background-color: #fff1de;
+  color: $primary;
+  margin: auto;
 
-        span {
-            padding: 5px 15px;
-            display: block;
-        }
+  span {
+    padding: 5px 15px;
+    display: block;
+  }
 
-        a {
-            display: block;
-            color: inherit;
-        }
+  a {
+    display: block;
+    color: inherit;
+  }
 
-        &:hover, &.active {
-            cursor: pointer;
-            background-color: lighten(#fea72b, 10%);
-        }
-    }
-</style>
+  &:hover,
+  &.active {
+    cursor: pointer;
+    background-color: lighten(#fea72b, 10%);
+  }
+}
+</style>

js/src/components/Settings/SettingMenuSection.vue

@@ -1,48 +1,52 @@
 <template>
-    <li :class="{ active: sectionActive }">
-        <router-link v-if="menuSection.to" :to="menuSection.to">{{ menuSection.title }}</router-link>
-        <b v-else>{{ menuSection.title }}</b>
-        <ul>
-            <setting-menu-item :menu-item="item" v-for="item in menuSection.items" :key="item.title" />
-        </ul>
-    </li>
+  <li :class="{ active: sectionActive }">
+    <router-link v-if="menuSection.to" :to="menuSection.to">{{ menuSection.title }}</router-link>
+    <b v-else>{{ menuSection.title }}</b>
+    <ul>
+      <setting-menu-item :menu-item="item" v-for="item in menuSection.items" :key="item.title" />
+    </ul>
+  </li>
 </template>
 <script lang="ts">
-import { Component, Prop, Vue } from 'vue-property-decorator';
-import { ISettingMenuSection } from '@/types/setting-menu.model';
-import SettingMenuItem from '@/components/Settings/SettingMenuItem.vue';
+import { Component, Prop, Vue } from "vue-property-decorator";
+import { ISettingMenuSection } from "@/types/setting-menu.model";
+import SettingMenuItem from "@/components/Settings/SettingMenuItem.vue";
 @Component({
   components: { SettingMenuItem },
 })
 export default class SettingMenuSection extends Vue {
   @Prop({ required: true, type: Object }) menuSection!: ISettingMenuSection;
 
-  get sectionActive(): boolean|undefined {
-    return this.menuSection.items && this.menuSection.items.some((({ to }) => to && to.name === this.$route.name));
+  get sectionActive(): boolean | undefined {
+    return (
+      this.menuSection.items &&
+      this.menuSection.items.some(({ to }) => to && to.name === this.$route.name)
+    );
   }
 }
 </script>
 
 <style lang="scss" scoped>
-    @import "@/variables.scss";
+@import "@/variables.scss";
 
-    li {
-        font-size: 1.3rem;
-        background-color: $secondary;
-        color: $primary;
-        margin: 2px auto;
+li {
+  font-size: 1.3rem;
+  background-color: $secondary;
+  color: $primary;
+  margin: 2px auto;
 
-        &.active {
-            background-color: #fea72b;
-        }
+  &.active {
+    background-color: #fea72b;
+  }
 
-        a, b {
-            cursor: pointer;
-            margin: 5px 0;
-            display: block;
-            padding: 5px 10px;
-            color: inherit;
-            font-weight: 500;
-        }
-    }
-</style>
+  a,
+  b {
+    cursor: pointer;
+    margin: 5px 0;
+    display: block;
+    padding: 5px 10px;
+    color: inherit;
+    font-weight: 500;
+  }
+}
+</style>

js/src/components/Settings/SettingsMenu.vue

@@ -1,18 +1,20 @@
 <template>
-    <ul>
-        <SettingMenuSection v-for="section in menuValue" :key="section.title" :menu-section="section" />
-    </ul>
+  <ul>
+    <SettingMenuSection v-for="section in menuValue" :key="section.title" :menu-section="section" />
+  </ul>
 </template>
 <script lang="ts">
-import { Component, Prop, Vue } from 'vue-property-decorator';
-import SettingMenuSection from '@/components/Settings/SettingMenuSection.vue';
-import { ISettingMenuSection } from '@/types/setting-menu.model';
+import { Component, Prop, Vue } from "vue-property-decorator";
+import SettingMenuSection from "@/components/Settings/SettingMenuSection.vue";
+import { ISettingMenuSection } from "@/types/setting-menu.model";
 @Component({
   components: { SettingMenuSection },
 })
 export default class SettingsMenu extends Vue {
   @Prop({ required: true, type: Array }) menu!: ISettingMenuSection[];
 
-  get menuValue() { return this.menu; }
+  get menuValue() {
+    return this.menu;
+  }
 }
-</script>
+</script>

js/src/components/Tag.vue

@@ -0,0 +1,24 @@
+<template>
+  <span class="tag">
+    <span>
+      <slot />
+    </span>
+  </span>
+</template>
+<script lang="ts">
+import { Component, Vue } from "vue-property-decorator";
+
+@Component
+export default class Tag extends Vue {}
+</script>
+
+<style lang="scss" scoped>
+span.tag {
+  background: #ecebf7;
+  color: #8e8bae;
+  text-transform: uppercase;
+  &::before {
+    content: "#";
+  }
+}
+</style>

js/src/components/Todo/CompactTodo.vue

@@ -0,0 +1,60 @@
+<template>
+  <div class="card" v-if="todo">
+    <div class="card-content">
+      <b-checkbox v-model="status" />
+      <router-link :to="{ name: RouteName.TODO, params: { todoId: todo.id } }">{{
+        todo.title
+      }}</router-link>
+      <span class="details has-text-grey">
+        <span v-if="todo.dueDate" class="due_date">
+          <b-icon icon="calendar" />
+          {{ todo.dueDate | formatDateString }}
+        </span>
+        <span v-if="todo.assignedTo" class="assigned_to">
+          <b-icon icon="account" />
+          {{ `@${todo.assignedTo.preferredUsername}` }}
+          <span v-if="todo.assignedTo.domain">{{ `@${todo.assignedTo.domain}` }}</span>
+        </span>
+      </span>
+    </div>
+  </div>
+</template>
+<script lang="ts">
+import { Component, Prop, Vue } from "vue-property-decorator";
+import { ITodo } from "../../types/todos";
+import RouteName from "../../router/name";
+import { UPDATE_TODO } from "../../graphql/todos";
+
+@Component
+export default class Todo extends Vue {
+  @Prop({ required: true, type: Object }) todo!: ITodo;
+
+  RouteName = RouteName;
+
+  editMode = false;
+
+  get status(): boolean {
+    return this.todo.status;
+  }
+
+  set status(status: boolean) {
+    this.updateTodo({ status });
+  }
+
+  updateTodo(params: object) {
+    this.$apollo.mutate({
+      mutation: UPDATE_TODO,
+      variables: {
+        id: this.todo.id,
+        ...params,
+      },
+    });
+    this.editMode = false;
+  }
+}
+</script>
+<style lang="scss" scoped>
+span.details {
+  margin-left: 1rem;
+}
+</style>

js/src/components/Todo/FullTodo.vue

@@ -0,0 +1,90 @@
+<template>
+  <div class="card" v-if="todo">
+    <div class="card-content">
+      <b-field :label="$t('Statut')">
+        <b-checkbox size="is-large" v-model="status" />
+      </b-field>
+      <b-field :label="$t('Title')">
+        <b-input v-model="title" />
+      </b-field>
+      <b-field :label="$t('Assigned to')">
+        <actor-auto-complete v-model="assignedTo" />
+      </b-field>
+      <b-field :label="$t('Due on')">
+        <b-datepicker v-model="dueDate" />
+      </b-field>
+    </div>
+  </div>
+</template>
+<script lang="ts">
+import { Component, Prop, Vue } from "vue-property-decorator";
+import { debounce } from "lodash";
+import { ITodo } from "../../types/todos";
+import RouteName from "../../router/name";
+import { UPDATE_TODO } from "../../graphql/todos";
+import ActorAutoComplete from "../Account/ActorAutoComplete.vue";
+import { IPerson } from "../../types/actor";
+@Component({
+  components: { ActorAutoComplete },
+})
+export default class Todo extends Vue {
+  @Prop({ required: true, type: Object }) todo!: ITodo;
+
+  RouteName = RouteName;
+
+  editMode = false;
+
+  debounceUpdateTodo!: Function;
+
+  // We put this in data because of issues like
+  // https://github.com/vuejs/vue-class-component/issues/263
+  data() {
+    return {
+      debounceUpdateTodo: debounce(this.updateTodo, 1000),
+    };
+  }
+
+  get title(): string {
+    return this.todo.title;
+  }
+
+  set title(title: string) {
+    this.debounceUpdateTodo({ title });
+  }
+
+  get status(): boolean {
+    return this.todo.status;
+  }
+
+  set status(status: boolean) {
+    this.debounceUpdateTodo({ status });
+  }
+
+  get assignedTo(): IPerson | undefined {
+    return this.todo.assignedTo;
+  }
+
+  set assignedTo(person: IPerson | undefined) {
+    this.debounceUpdateTodo({ assignedToId: person ? person.id : null });
+  }
+
+  get dueDate(): Date | undefined {
+    return this.todo.dueDate;
+  }
+
+  set dueDate(dueDate: Date | undefined) {
+    this.debounceUpdateTodo({ dueDate });
+  }
+
+  updateTodo(params: object) {
+    this.$apollo.mutate({
+      mutation: UPDATE_TODO,
+      variables: {
+        id: this.todo.id,
+        ...params,
+      },
+    });
+    this.editMode = false;
+  }
+}
+</script>

js/src/components/Utils/Subtitle.vue

@@ -1,32 +1,31 @@
 <template>
-    <h3>
-        <span>
-            <slot />
-        </span>
-    </h3>
+  <h2>
+    <span>
+      <slot />
+    </span>
+  </h2>
 </template>
 <script lang="ts">
-import { Component, Vue } from 'vue-property-decorator';
+import { Component, Vue } from "vue-property-decorator";
 
 @Component
-export default class Subtitle extends Vue {
-}
+export default class Subtitle extends Vue {}
 </script>
 <style lang="scss" scoped>
-    @import "@/variables.scss";
+@import "@/variables.scss";
 
-    h3 {
-        display: block;
-        margin: 15px 0 30px;
+h2 {
+  display: block;
+  margin: 15px 0 30px;
 
-        span {
-            background: $secondary;
-            display: inline;
-            padding: 3px 8px;
-            color: #3A384C;
-            font-family: "Liberation Sans", "Helvetica Neue", Roboto, Helvetica, Arial, serif;
-            font-weight: 400;
-            font-size: 32px;
-        }
-    }
-</style>
+  span {
+    background: $secondary;
+    display: inline;
+    padding: 3px 8px;
+    color: #3a384c;
+    font-family: "Liberation Sans", "Helvetica Neue", Roboto, Helvetica, Arial, serif;
+    font-weight: 400;
+    font-size: 32px;
+  }
+}
+</style>

js/src/components/Utils/VerticalDivider.vue

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