diff --git a/js/.editorconfig b/js/.editorconfig
index c24743d00..446bb3e15 100644
--- a/js/.editorconfig
+++ b/js/.editorconfig
@@ -4,4 +4,4 @@ indent_size = 2
 end_of_line = lf
 trim_trailing_whitespace = true
 insert_final_newline = true
-max_line_length = 100
+max_line_length = 80
diff --git a/js/.eslintrc.js b/js/.eslintrc.js
index d29e98c47..939c4df9d 100644
--- a/js/.eslintrc.js
+++ b/js/.eslintrc.js
@@ -38,8 +38,11 @@ module.exports = {
       "error",
       {
         ignoreStrings: true,
+        ignoreHTMLTextContents: true,
+        ignoreTemplateLiterals: true,
+        ignoreComments: true,
         template: 170,
-        code: 100,
+        code: 80,
       },
     ],
     "prettier/prettier": "error",
@@ -56,7 +59,10 @@ module.exports = {
 
   overrides: [
     {
-      files: ["**/__tests__/*.{j,t}s?(x)", "**/tests/unit/**/*.spec.{j,t}s?(x)"],
+      files: [
+        "**/__tests__/*.{j,t}s?(x)",
+        "**/tests/unit/**/*.spec.{j,t}s?(x)",
+      ],
       env: {
         mocha: true,
       },
diff --git a/js/get_union_json.ts b/js/get_union_json.ts
index dc3899bb8..287cc9982 100644
--- a/js/get_union_json.ts
+++ b/js/get_union_json.ts
@@ -24,7 +24,9 @@ fetch(`http://localhost:4000/api`, {
   .then((result) => result.json())
   .then((result) => {
     // here we're filtering out any type information unrelated to unions or interfaces
-    const filteredData = result.data.__schema.types.filter((type) => type.possibleTypes !== null);
+    const filteredData = result.data.__schema.types.filter(
+      (type) => type.possibleTypes !== null
+    );
     result.data.__schema.types = filteredData;
     fs.writeFile("./fragmentTypes.json", JSON.stringify(result.data), (err) => {
       if (err) {
diff --git a/js/src/App.vue b/js/src/App.vue
index 0817426e7..a0b85b0f8 100644
--- a/js/src/App.vue
+++ b/js/src/App.vue
@@ -32,8 +32,16 @@
 <script lang="ts">
 import { Component, Vue } from "vue-property-decorator";
 import NavBar from "./components/NavBar.vue";
-import { AUTH_ACCESS_TOKEN, AUTH_USER_EMAIL, AUTH_USER_ID, AUTH_USER_ROLE } from "./constants";
-import { CURRENT_USER_CLIENT, UPDATE_CURRENT_USER_CLIENT } from "./graphql/user";
+import {
+  AUTH_ACCESS_TOKEN,
+  AUTH_USER_EMAIL,
+  AUTH_USER_ID,
+  AUTH_USER_ROLE,
+} from "./constants";
+import {
+  CURRENT_USER_CLIENT,
+  UPDATE_CURRENT_USER_CLIENT,
+} from "./graphql/user";
 import Footer from "./components/Footer.vue";
 import Logo from "./components/Logo.vue";
 import { initializeCurrentActor } from "./utils/auth";
diff --git a/js/src/apollo/user.ts b/js/src/apollo/user.ts
index 824df6f73..f063ad2ea 100644
--- a/js/src/apollo/user.ts
+++ b/js/src/apollo/user.ts
@@ -56,7 +56,12 @@ export default function buildCurrentUserResolver(
           preferredUsername,
           avatar,
           name,
-        }: { id: string; preferredUsername: string; avatar: string; name: string },
+        }: {
+          id: string;
+          preferredUsername: string;
+          avatar: string;
+          name: string;
+        },
         { cache: localCache }: { cache: ApolloCache<NormalizedCacheObject> }
       ) => {
         const data = {
diff --git a/js/src/apollo/utils.ts b/js/src/apollo/utils.ts
index ff7c317a7..c94e5bd08 100644
--- a/js/src/apollo/utils.ts
+++ b/js/src/apollo/utils.ts
@@ -1,4 +1,7 @@
-import { IntrospectionFragmentMatcher, NormalizedCacheObject } from "apollo-cache-inmemory";
+import {
+  IntrospectionFragmentMatcher,
+  NormalizedCacheObject,
+} from "apollo-cache-inmemory";
 import { AUTH_ACCESS_TOKEN, AUTH_REFRESH_TOKEN } from "@/constants";
 import { REFRESH_TOKEN } from "@/graphql/auth";
 import { saveTokenData } from "@/utils/auth";
@@ -11,7 +14,11 @@ export const fragmentMatcher = new IntrospectionFragmentMatcher({
         {
           kind: "UNION",
           name: "SearchResult",
-          possibleTypes: [{ name: "Event" }, { name: "Person" }, { name: "Group" }],
+          possibleTypes: [
+            { name: "Event" },
+            { name: "Person" },
+            { name: "Group" },
+          ],
         },
         {
           kind: "INTERFACE",
diff --git a/js/src/components/Account/ActorAutoComplete.vue b/js/src/components/Account/ActorAutoComplete.vue
index a26579472..879935102 100644
--- a/js/src/components/Account/ActorAutoComplete.vue
+++ b/js/src/components/Account/ActorAutoComplete.vue
@@ -13,7 +13,12 @@
     <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="" />
+          <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">
@@ -21,7 +26,9 @@
             {{ props.option.name }}
             <br />
             <small>{{ `@${props.option.preferredUsername}` }}</small>
-            <small v-if="props.option.domain">{{ `@${props.option.domain}` }}</small>
+            <small v-if="props.option.domain">{{
+              `@${props.option.domain}`
+            }}</small>
           </span>
           <span v-else>
             {{ `@${props.option.preferredUsername}` }}
@@ -53,7 +60,9 @@ export default class ActorAutoComplete extends Vue {
 
   selected: IPerson | null = this.defaultSelected;
 
-  name: string = this.defaultSelected ? this.defaultSelected.preferredUsername : "";
+  name: string = this.defaultSelected
+    ? this.defaultSelected.preferredUsername
+    : "";
 
   page = 1;
 
diff --git a/js/src/components/Account/ActorCard.vue b/js/src/components/Account/ActorCard.vue
index 0141a639a..a6b7aebad 100644
--- a/js/src/components/Account/ActorCard.vue
+++ b/js/src/components/Account/ActorCard.vue
@@ -12,8 +12,15 @@
         <p>
           {{ actor.name || `@${usernameWithDomain(actor)}` }}
         </p>
-        <p class="has-text-grey" v-if="actor.name">@{{ usernameWithDomain(actor) }}</p>
-        <div v-if="full" class="summary" :class="{ limit: limit }" v-html="actor.summary" />
+        <p class="has-text-grey" v-if="actor.name">
+          @{{ usernameWithDomain(actor) }}
+        </p>
+        <div
+          v-if="full"
+          class="summary"
+          :class="{ limit: limit }"
+          v-html="actor.summary"
+        />
       </div>
     </div>
   </div>
diff --git a/js/src/components/Account/Identities.vue b/js/src/components/Account/Identities.vue
index 6dea19a45..8d9d76e51 100644
--- a/js/src/components/Account/Identities.vue
+++ b/js/src/components/Account/Identities.vue
@@ -7,7 +7,10 @@
     <ul class="identities">
       <li v-for="identity in identities" :key="identity.id">
         <router-link
-          :to="{ name: 'UpdateIdentity', params: { identityName: identity.preferredUsername } }"
+          :to="{
+            name: 'UpdateIdentity',
+            params: { identityName: identity.preferredUsername },
+          }"
           class="media identity"
           v-bind:class="{ 'is-current-identity': isCurrentIdentity(identity) }"
         >
@@ -24,7 +27,10 @@
       </li>
     </ul>
 
-    <router-link :to="{ name: 'CreateIdentity' }" class="button create-identity is-primary">
+    <router-link
+      :to="{ name: 'CreateIdentity' }"
+      class="button create-identity is-primary"
+    >
       {{ $t("Create a new identity") }}
     </router-link>
   </section>
diff --git a/js/src/components/Admin/Followers.vue b/js/src/components/Admin/Followers.vue
index 71f13d6c0..cae94c52a 100644
--- a/js/src/components/Admin/Followers.vue
+++ b/js/src/components/Admin/Followers.vue
@@ -16,11 +16,21 @@
       checkable
       checkbox-position="left"
     >
-      <b-table-column field="actor.id" label="ID" width="40" numeric v-slot="props">{{
-        props.row.actor.id
-      }}</b-table-column>
+      <b-table-column
+        field="actor.id"
+        label="ID"
+        width="40"
+        numeric
+        v-slot="props"
+        >{{ props.row.actor.id }}</b-table-column
+      >
 
-      <b-table-column field="actor.type" :label="$t('Type')" width="80" v-slot="props">
+      <b-table-column
+        field="actor.type"
+        :label="$t('Type')"
+        width="80"
+        v-slot="props"
+      >
         <b-icon icon="lan" v-if="RelayMixin.isInstance(props.row.actor)" />
         <b-icon icon="account-circle" v-else />
       </b-table-column>
@@ -33,26 +43,39 @@
         centered
         v-slot="props"
       >
-        <span :class="`tag ${props.row.approved ? 'is-success' : 'is-danger'}`">{{
-          props.row.approved ? $t("Accepted") : $t("Pending")
-        }}</span>
+        <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 v-slot:default="props">
-          <a @click="toggle(props.row)" v-if="RelayMixin.isInstance(props.row.actor)">{{
-            props.row.actor.domain
-          }}</a>
+          <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="targetActor.updatedAt" :label="$t('Date')" sortable v-slot="props">
-        <span :title="$options.filters.formatDateTimeString(props.row.updatedAt)">{{
-          formatDistanceToNow(new Date(props.row.updatedAt), { locale: $dateFnsLocale })
-        }}</span></b-table-column
+      <b-table-column
+        field="targetActor.updatedAt"
+        :label="$t('Date')"
+        sortable
+        v-slot="props"
+      >
+        <span
+          :title="$options.filters.formatDateTimeString(props.row.updatedAt)"
+          >{{
+            formatDistanceToNow(new Date(props.row.updatedAt), {
+              locale: $dateFnsLocale,
+            })
+          }}</span
+        ></b-table-column
       >
 
       <template slot="detail" slot-scope="props">
@@ -143,7 +166,11 @@ export default class Followers extends Mixins(RelayMixin) {
       await this.$apollo.queries.relayFollowers.refetch();
       this.checkedRows = [];
     } catch (e) {
-      Snackbar.open({ message: e.message, type: "is-danger", position: "is-bottom" });
+      Snackbar.open({
+        message: e.message,
+        type: "is-danger",
+        position: "is-bottom",
+      });
     }
   }
 
@@ -158,7 +185,11 @@ export default class Followers extends Mixins(RelayMixin) {
       await this.$apollo.queries.relayFollowers.refetch();
       this.checkedRows = [];
     } catch (e) {
-      Snackbar.open({ message: e.message, type: "is-danger", position: "is-bottom" });
+      Snackbar.open({
+        message: e.message,
+        type: "is-danger",
+        position: "is-bottom",
+      });
     }
   }
 
diff --git a/js/src/components/Admin/Followings.vue b/js/src/components/Admin/Followings.vue
index f3531d931..756865d14 100644
--- a/js/src/components/Admin/Followings.vue
+++ b/js/src/components/Admin/Followings.vue
@@ -1,13 +1,22 @@
 <template>
   <div>
     <form @submit="followRelay">
-      <b-field :label="$t('Add an instance')" custom-class="add-relay" horizontal>
+      <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: mobilizon.fr')" />
+            <b-input
+              v-model="newRelayAddress"
+              :placeholder="$t('Ex: mobilizon.fr')"
+            />
           </p>
           <p class="control">
-            <b-button type="is-primary" native-type="submit">{{ $t("Add an instance") }}</b-button>
+            <b-button type="is-primary" native-type="submit">{{
+              $t("Add an instance")
+            }}</b-button>
           </p>
         </b-field>
       </b-field>
@@ -29,12 +38,25 @@
       checkable
       checkbox-position="left"
     >
-      <b-table-column field="targetActor.id" label="ID" width="40" numeric v-slot="props">{{
-        props.row.targetActor.id
-      }}</b-table-column>
+      <b-table-column
+        field="targetActor.id"
+        label="ID"
+        width="40"
+        numeric
+        v-slot="props"
+        >{{ props.row.targetActor.id }}</b-table-column
+      >
 
-      <b-table-column field="targetActor.type" :label="$t('Type')" width="80" v-slot="props">
-        <b-icon icon="lan" v-if="RelayMixin.isInstance(props.row.targetActor)" />
+      <b-table-column
+        field="targetActor.type"
+        :label="$t('Type')"
+        width="80"
+        v-slot="props"
+      >
+        <b-icon
+          icon="lan"
+          v-if="RelayMixin.isInstance(props.row.targetActor)"
+        />
         <b-icon icon="account-circle" v-else />
       </b-table-column>
 
@@ -46,26 +68,39 @@
         centered
         v-slot="props"
       >
-        <span :class="`tag ${props.row.approved ? 'is-success' : 'is-danger'}`">{{
-          props.row.approved ? $t("Accepted") : $t("Pending")
-        }}</span>
+        <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 v-slot:default="props">
-          <a @click="toggle(props.row)" v-if="RelayMixin.isInstance(props.row.targetActor)">{{
-            props.row.targetActor.domain
-          }}</a>
+          <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 v-slot="props">
-        <span :title="$options.filters.formatDateTimeString(props.row.updatedAt)">{{
-          formatDistanceToNow(new Date(props.row.updatedAt), { locale: $dateFnsLocale })
-        }}</span></b-table-column
+      <b-table-column
+        field="targetActor.updatedAt"
+        :label="$t('Date')"
+        sortable
+        v-slot="props"
+      >
+        <span
+          :title="$options.filters.formatDateTimeString(props.row.updatedAt)"
+          >{{
+            formatDistanceToNow(new Date(props.row.updatedAt), {
+              locale: $dateFnsLocale,
+            })
+          }}</span
+        ></b-table-column
       >
 
       <template slot="detail" slot-scope="props">
@@ -132,13 +167,19 @@ export default class Followings extends Mixins(RelayMixin) {
       await this.$apollo.queries.relayFollowings.refetch();
       this.newRelayAddress = "";
     } catch (err) {
-      Snackbar.open({ message: err.message, type: "is-danger", position: "is-bottom" });
+      Snackbar.open({
+        message: err.message,
+        type: "is-danger",
+        position: "is-bottom",
+      });
     }
   }
 
   async removeRelays(): Promise<void> {
     await this.checkedRows.forEach((row: IFollower) => {
-      this.removeRelay(`${row.targetActor.preferredUsername}@${row.targetActor.domain}`);
+      this.removeRelay(
+        `${row.targetActor.preferredUsername}@${row.targetActor.domain}`
+      );
     });
   }
 
@@ -153,7 +194,11 @@ export default class Followings extends Mixins(RelayMixin) {
       await this.$apollo.queries.relayFollowings.refetch();
       this.checkedRows = [];
     } catch (e) {
-      Snackbar.open({ message: e.message, type: "is-danger", position: "is-bottom" });
+      Snackbar.open({
+        message: e.message,
+        type: "is-danger",
+        position: "is-bottom",
+      });
     }
   }
 }
diff --git a/js/src/components/Comment/Comment.vue b/js/src/components/Comment/Comment.vue
index 9f9d3b304..8040a2c8b 100644
--- a/js/src/components/Comment/Comment.vue
+++ b/js/src/components/Comment/Comment.vue
@@ -1,19 +1,34 @@
 <template>
   <li :class="{ reply: comment.inReplyToComment }">
-    <article class="media" :class="{ selected: commentSelected }" :id="commentId">
+    <article
+      class="media"
+      :class="{ selected: commentSelected }"
+      :id="commentId"
+    >
       <popover-actor-card
         class="media-left"
         :actor="comment.actor"
         :inline="true"
         v-if="comment.actor"
       >
-        <figure class="image is-48x48" v-if="!comment.deletedAt && comment.actor.avatar">
+        <figure
+          class="image is-48x48"
+          v-if="!comment.deletedAt && comment.actor.avatar"
+        >
           <img class="is-rounded" :src="comment.actor.avatar.url" alt="" />
         </figure>
-        <b-icon class="media-left" v-else size="is-large" icon="account-circle" />
+        <b-icon
+          class="media-left"
+          v-else
+          size="is-large"
+          icon="account-circle"
+        />
       </popover-actor-card>
       <div v-else class="media-left">
-        <figure class="image is-48x48" v-if="!comment.deletedAt && comment.actor.avatar">
+        <figure
+          class="image is-48x48"
+          v-if="!comment.deletedAt && comment.actor.avatar"
+        >
           <img class="is-rounded" :src="comment.actor.avatar.url" alt="" />
         </figure>
         <b-icon v-else size="is-large" icon="account-circle" />
@@ -21,7 +36,9 @@
       <div class="media-content">
         <div class="content">
           <span class="first-line" v-if="!comment.deletedAt">
-            <strong :class="{ organizer: commentFromOrganizer }">{{ comment.actor.name }}</strong>
+            <strong :class="{ organizer: commentFromOrganizer }">{{
+              comment.actor.name
+            }}</strong>
             <small>@{{ usernameWithDomain(comment.actor) }}</small>
             <a class="comment-link has-text-grey" :href="commentURL">
               <small>{{
@@ -54,10 +71,15 @@
           <div class="load-replies" v-if="comment.totalReplies">
             <p v-if="!showReplies" @click="fetchReplies">
               <b-icon icon="chevron-down" /><span>{{
-                $tc("View a reply", comment.totalReplies, { totalReplies: comment.totalReplies })
+                $tc("View a reply", comment.totalReplies, {
+                  totalReplies: comment.totalReplies,
+                })
               }}</span>
             </p>
-            <p v-else-if="comment.totalReplies && showReplies" @click="showReplies = false">
+            <p
+              v-else-if="comment.totalReplies && showReplies"
+              @click="showReplies = false"
+            >
               <b-icon icon="chevron-up" />
               <span>{{ $t("Hide replies") }}</span>
             </p>
@@ -86,14 +108,24 @@
         </nav>
       </div>
     </article>
-    <form class="reply" @submit.prevent="replyToComment" v-if="currentActor.id" v-show="replyTo">
+    <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" />
+        <b-icon
+          class="media-left"
+          v-else
+          size="is-large"
+          icon="account-circle"
+        />
         <div class="media-content">
           <div class="content">
             <span class="first-line">
@@ -102,7 +134,12 @@
             </span>
             <br />
             <span class="editor-line">
-              <editor class="editor" ref="commentEditor" v-model="newComment.text" mode="comment" />
+              <editor
+                class="editor"
+                ref="commentEditor"
+                v-model="newComment.text"
+                mode="comment"
+              />
               <b-button
                 :disabled="newComment.text.trim().length === 0"
                 native-type="submit"
@@ -118,7 +155,12 @@
       <div class="left">
         <div class="vertical-border" @click="showReplies = false" />
       </div>
-      <transition-group name="comment-replies" v-if="showReplies" class="comment-replies" tag="ul">
+      <transition-group
+        name="comment-replies"
+        v-if="showReplies"
+        class="comment-replies"
+        tag="ul"
+      >
         <comment
           class="reply"
           v-for="reply in comment.replies"
@@ -155,7 +197,8 @@ import PopoverActorCard from "../Account/PopoverActorCard.vue";
     },
   },
   components: {
-    editor: () => import(/* webpackChunkName: "editor" */ "@/components/Editor.vue"),
+    editor: () =>
+      import(/* webpackChunkName: "editor" */ "@/components/Editor.vue"),
     comment: () => import(/* webpackChunkName: "comment" */ "./Comment.vue"),
     PopoverActorCard,
   },
@@ -167,7 +210,9 @@ export default class Comment extends Vue {
 
   // 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 };
+  @Ref() readonly commentEditor!: EditorComponent & {
+    replyToComment: (comment: IComment) => void;
+  };
 
   currentActor!: IPerson;
 
@@ -231,7 +276,9 @@ 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;
@@ -303,7 +350,11 @@ export default class Comment extends Vue {
         duration: 5000,
       });
     } catch (e) {
-      Snackbar.open({ message: e.message, type: "is-danger", position: "is-bottom" });
+      Snackbar.open({
+        message: e.message,
+        type: "is-danger",
+        position: "is-bottom",
+      });
     }
   }
 }
diff --git a/js/src/components/Comment/CommentTree.vue b/js/src/components/Comment/CommentTree.vue
index 06b61a31c..e3639bf36 100644
--- a/js/src/components/Comment/CommentTree.vue
+++ b/js/src/components/Comment/CommentTree.vue
@@ -6,9 +6,11 @@
       @submit.prevent="createCommentForEvent(newComment)"
       @keyup.ctrl.enter="createCommentForEvent(newComment)"
     >
-      <b-notification v-if="isEventOrganiser && !areCommentsClosed" :closable="false">{{
-        $t("Comments are closed for everybody else.")
-      }}</b-notification>
+      <b-notification
+        v-if="isEventOrganiser && !areCommentsClosed"
+        :closable="false"
+        >{{ $t("Comments are closed for everybody else.") }}</b-notification
+      >
       <article class="media">
         <figure class="media-left">
           <identity-picker-wrapper :inline="false" v-model="newComment.actor" />
@@ -16,11 +18,17 @@
         <div class="media-content">
           <div class="field">
             <p class="control">
-              <editor ref="commenteditor" mode="comment" v-model="newComment.text" />
+              <editor
+                ref="commenteditor"
+                mode="comment"
+                v-model="newComment.text"
+              />
             </p>
           </div>
           <div class="send-comment">
-            <b-button native-type="submit" type="is-primary">{{ $t("Post a comment") }}</b-button>
+            <b-button native-type="submit" type="is-primary">{{
+              $t("Post a comment")
+            }}</b-button>
           </div>
         </div>
       </article>
@@ -29,7 +37,12 @@
       $t("The organiser has chosen to close comments.")
     }}</b-notification>
     <transition name="comment-empty-list" mode="out-in">
-      <transition-group name="comment-list" v-if="comments.length" class="comment-list" tag="ul">
+      <transition-group
+        name="comment-list"
+        v-if="comments.length"
+        class="comment-list"
+        tag="ul"
+      >
         <comment
           class="root-comment"
           :comment="comment"
@@ -76,7 +89,9 @@ import { IEvent } from "../../types/event.model";
         };
       },
       update(data) {
-        return data.event.comments.map((comment: IComment) => new CommentModel(comment));
+        return data.event.comments.map(
+          (comment: IComment) => new CommentModel(comment)
+        );
       },
       skip() {
         return !this.event.uuid;
@@ -86,7 +101,8 @@ import { IEvent } from "../../types/event.model";
   components: {
     Comment,
     IdentityPickerWrapper,
-    editor: () => import(/* webpackChunkName: "editor" */ "@/components/Editor.vue"),
+    editor: () =>
+      import(/* webpackChunkName: "editor" */ "@/components/Editor.vue"),
   },
 })
 export default class CommentTree extends Vue {
@@ -113,7 +129,9 @@ export default class CommentTree extends Vue {
         variables: {
           eventId: this.event.id,
           text: comment.text,
-          inReplyToCommentId: comment.inReplyToComment ? comment.inReplyToComment.id : null,
+          inReplyToCommentId: comment.inReplyToComment
+            ? comment.inReplyToComment.id
+            : null,
         },
         update: (store, { data }) => {
           if (data == null) return;
@@ -228,7 +246,9 @@ export default class CommentTree extends Vue {
             });
             if (!localData) return;
             const { thread: oldReplyList } = localData;
-            const replies = oldReplyList.filter((reply) => reply.id !== deletedCommentId);
+            const replies = oldReplyList.filter(
+              (reply) => reply.id !== deletedCommentId
+            );
             store.writeQuery({
               query: FETCH_THREAD_REPLIES,
               variables: {
@@ -249,7 +269,9 @@ 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,
@@ -274,14 +296,18 @@ export default class CommentTree extends Vue {
       .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 (
+            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);
+    return this.orderedComments.filter(
+      (comment) => !comment.deletedAt || comment.totalReplies > 0
+    );
   }
 
   get isEventOrganiser(): boolean {
diff --git a/js/src/components/Discussion/DiscussionComment.vue b/js/src/components/Discussion/DiscussionComment.vue
index b0c825b69..2cb6bc3b7 100644
--- a/js/src/components/Discussion/DiscussionComment.vue
+++ b/js/src/components/Discussion/DiscussionComment.vue
@@ -15,7 +15,10 @@
         <span v-else class="name comment-link has-text-grey">
           {{ $t("[deleted]") }}
         </span>
-        <span class="icons" v-if="!comment.deletedAt && comment.actor.id === currentActor.id">
+        <span
+          class="icons"
+          v-if="!comment.deletedAt && comment.actor.id === currentActor.id"
+        >
           <b-dropdown aria-role="list">
             <b-icon slot="trigger" role="button" icon="dots-horizontal" />
 
@@ -44,8 +47,9 @@
         <div class="post-infos">
           <span :title="comment.insertedAt | formatDateTimeString">
             {{
-              formatDistanceToNow(new Date(comment.updatedAt), { locale: $dateFnsLocale }) ||
-              $t("Right now")
+              formatDistanceToNow(new Date(comment.updatedAt), {
+                locale: $dateFnsLocale,
+              }) || $t("Right now")
             }}</span
           >
         </div>
@@ -77,7 +81,9 @@
             type="is-primary"
             >{{ $t("Update") }}</b-button
           >
-          <b-button native-type="button" @click="toggleEditMode">{{ $t("Cancel") }}</b-button>
+          <b-button native-type="button" @click="toggleEditMode">{{
+            $t("Cancel")
+          }}</b-button>
         </div>
       </form>
     </div>
@@ -95,7 +101,8 @@ import { CURRENT_ACTOR_CLIENT } from "../../graphql/actor";
     currentActor: CURRENT_ACTOR_CLIENT,
   },
   components: {
-    editor: () => import(/* webpackChunkName: "editor" */ "@/components/Editor.vue"),
+    editor: () =>
+      import(/* webpackChunkName: "editor" */ "@/components/Editor.vue"),
   },
 })
 export default class DiscussionComment extends Vue {
diff --git a/js/src/components/Discussion/DiscussionListItem.vue b/js/src/components/Discussion/DiscussionListItem.vue
index 31f14a1e7..11d8acbd8 100644
--- a/js/src/components/Discussion/DiscussionListItem.vue
+++ b/js/src/components/Discussion/DiscussionListItem.vue
@@ -1,14 +1,23 @@
 <template>
   <router-link
     class="discussion-minimalist-card-wrapper"
-    :to="{ name: RouteName.DISCUSSION, params: { slug: discussion.slug, id: discussion.id } }"
+    :to="{
+      name: RouteName.DISCUSSION,
+      params: { slug: discussion.slug, id: discussion.id },
+    }"
   >
     <div class="media-left">
       <figure
         class="image is-32x32"
-        v-if="discussion.lastComment.actor && discussion.lastComment.actor.avatar"
+        v-if="
+          discussion.lastComment.actor && discussion.lastComment.actor.avatar
+        "
       >
-        <img class="is-rounded" :src="discussion.lastComment.actor.avatar.url" alt />
+        <img
+          class="is-rounded"
+          :src="discussion.lastComment.actor.avatar.url"
+          alt
+        />
       </figure>
       <b-icon v-else size="is-medium" icon="account-circle" />
     </div>
@@ -17,15 +26,18 @@
         <p class="discussion-minimalist-title">{{ discussion.title }}</p>
         <span :title="actualDate | formatDateTimeString">
           {{
-            formatDistanceToNowStrict(new Date(actualDate), { locale: $dateFnsLocale }) ||
-            $t("Right now")
+            formatDistanceToNowStrict(new Date(actualDate), {
+              locale: $dateFnsLocale,
+            }) || $t("Right now")
           }}</span
         >
       </div>
       <div class="has-text-grey" v-if="!discussion.lastComment.deletedAt">
         {{ htmlTextEllipsis }}
       </div>
-      <div v-else class="has-text-grey">{{ $t("[This comment has been deleted]") }}</div>
+      <div v-else class="has-text-grey">
+        {{ $t("[This comment has been deleted]") }}
+      </div>
     </div>
   </router-link>
 </template>
@@ -54,7 +66,10 @@ export default class DiscussionListItem extends Vue {
   }
 
   get actualDate(): string | Date | undefined {
-    if (this.discussion.updatedAt === this.discussion.insertedAt && this.discussion.lastComment) {
+    if (
+      this.discussion.updatedAt === this.discussion.insertedAt &&
+      this.discussion.lastComment
+    ) {
       return this.discussion.lastComment.publishedAt;
     }
     return this.discussion.updatedAt;
@@ -83,7 +98,8 @@ export default class DiscussionListItem extends Vue {
 
       .discussion-minimalist-title {
         color: #3c376e;
-        font-family: "Liberation Sans", "Helvetica Neue", Roboto, Helvetica, Arial, serif;
+        font-family: "Liberation Sans", "Helvetica Neue", Roboto, Helvetica,
+          Arial, serif;
         font-size: 1.25rem;
         font-weight: 700;
         flex: 1;
diff --git a/js/src/components/Editor.vue b/js/src/components/Editor.vue
index 7223d4ba3..e1c7b39d2 100644
--- a/js/src/components/Editor.vue
+++ b/js/src/components/Editor.vue
@@ -117,11 +117,21 @@
             <b-icon icon="format-quote-close" />
           </button>
 
-          <button v-if="!isBasicMode" class="menubar__button" @click="commands.undo" type="button">
+          <button
+            v-if="!isBasicMode"
+            class="menubar__button"
+            @click="commands.undo"
+            type="button"
+          >
             <b-icon icon="undo" />
           </button>
 
-          <button v-if="!isBasicMode" class="menubar__button" @click="commands.redo" type="button">
+          <button
+            v-if="!isBasicMode"
+            class="menubar__button"
+            @click="commands.redo"
+            type="button"
+          >
             <b-icon icon="redo" />
           </button>
         </div>
@@ -181,7 +191,9 @@
           </div>
         </div>
       </template>
-      <div v-else class="suggestion-list__item is-empty">{{ $t("No profiles found") }}</div>
+      <div v-else class="suggestion-list__item is-empty">
+        {{ $t("No profiles found") }}
+      </div>
     </div>
   </div>
 </template>
@@ -430,7 +442,8 @@ export default class EditorComponent extends Vue {
 
   upHandler(): void {
     this.navigatedActorIndex =
-      (this.navigatedActorIndex + this.filteredActors.length - 1) % this.filteredActors.length;
+      (this.navigatedActorIndex + this.filteredActors.length - 1) %
+      this.filteredActors.length;
   }
 
   /**
@@ -438,7 +451,8 @@ export default class EditorComponent extends Vue {
    * if it's the last item, navigate to the first one
    */
   downHandler(): void {
-    this.navigatedActorIndex = (this.navigatedActorIndex + 1) % this.filteredActors.length;
+    this.navigatedActorIndex =
+      (this.navigatedActorIndex + 1) % this.filteredActors.length;
   }
 
   enterHandler(): void {
@@ -533,7 +547,10 @@ export default class EditorComponent extends Vue {
         },
       });
       if (data.uploadMedia && data.uploadMedia.url) {
-        command({ src: data.uploadMedia.url, "data-media-id": data.uploadMedia.id });
+        command({
+          src: data.uploadMedia.url,
+          "data-media-id": data.uploadMedia.id,
+        });
       }
     } catch (error) {
       console.error(error);
diff --git a/js/src/components/Editor/Image.ts b/js/src/components/Editor/Image.ts
index dccce902f..93470cc13 100644
--- a/js/src/components/Editor/Image.ts
+++ b/js/src/components/Editor/Image.ts
@@ -48,9 +48,14 @@ export default class Image extends Node {
   }
 
   commands({ type }: { type: NodeType }): any {
-    return (attrs: { [key: string]: string }) => (state: EditorState, dispatch: DispatchFn) => {
+    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 position = selection.$cursor
+        ? selection.$cursor.pos
+        : selection.$to.pos;
       const node = type.create(attrs);
       const transaction = state.tr.insert(position, node);
       dispatch(transaction);
@@ -75,7 +80,8 @@ export default class Image extends Node {
               }
 
               const images = Array.from(realEvent.dataTransfer.files).filter(
-                (file: any) => /image/i.test(file.type) && !/svg/i.test(file.type)
+                (file: any) =>
+                  /image/i.test(file.type) && !/svg/i.test(file.type)
               );
 
               if (images.length === 0) {
@@ -105,7 +111,10 @@ export default class Image extends Node {
                     src: data.uploadMedia.url,
                     "data-media-id": data.uploadMedia.id,
                   });
-                  const transaction = view.state.tr.insert(coordinates.pos, node);
+                  const transaction = view.state.tr.insert(
+                    coordinates.pos,
+                    node
+                  );
                   view.dispatch(transaction);
                 });
                 return true;
diff --git a/js/src/components/Event/AddressAutoComplete.vue b/js/src/components/Event/AddressAutoComplete.vue
index 17e6c139d..93c0e1d2c 100644
--- a/js/src/components/Event/AddressAutoComplete.vue
+++ b/js/src/components/Event/AddressAutoComplete.vue
@@ -21,9 +21,13 @@
       </b-autocomplete>
     </b-field>
     <b-field v-if="isSecureContext()">
-      <b-button type="is-text" v-if="!gettingLocation" icon-right="target" @click="locateMe">{{
-        $t("Use my location")
-      }}</b-button>
+      <b-button
+        type="is-text"
+        v-if="!gettingLocation"
+        icon-right="target"
+        @click="locateMe"
+        >{{ $t("Use my location") }}</b-button
+      >
       <span v-else>{{ $t("Getting location") }}</span>
     </b-field>
     <!--
@@ -58,7 +62,8 @@ import { IConfig } from "../../types/config.model";
 
 @Component({
   components: {
-    "map-leaflet": () => import(/* webpackChunkName: "map" */ "@/components/Map.vue"),
+    "map-leaflet": () =>
+      import(/* webpackChunkName: "map" */ "@/components/Map.vue"),
   },
   apollo: {
     config: CONFIG,
@@ -121,7 +126,9 @@ export default class AddressAutoComplete extends Vue {
       },
     });
 
-    this.addressData = result.data.searchAddress.map((address: IAddress) => new Address(address));
+    this.addressData = result.data.searchAddress.map(
+      (address: IAddress) => new Address(address)
+    );
     this.isFetching = false;
   }
 
@@ -174,7 +181,9 @@ export default class AddressAutoComplete extends Vue {
       },
     });
 
-    this.addressData = result.data.reverseGeocode.map((address: IAddress) => new Address(address));
+    this.addressData = result.data.reverseGeocode.map(
+      (address: IAddress) => new Address(address)
+    );
     if (this.addressData.length > 0) {
       const defaultAddress = new Address(this.addressData[0]);
       this.selected = defaultAddress;
@@ -197,7 +206,10 @@ export default class AddressAutoComplete extends Vue {
       this.location = await AddressAutoComplete.getLocation();
       this.mapDefaultZoom = 12;
       this.reverseGeoCode(
-        new LatLng(this.location.coords.latitude, this.location.coords.longitude),
+        new LatLng(
+          this.location.coords.latitude,
+          this.location.coords.longitude
+        ),
         12
       );
     } catch (e) {
diff --git a/js/src/components/Event/DateTimePicker.vue b/js/src/components/Event/DateTimePicker.vue
index 3c21cea13..2f18f06bf 100644
--- a/js/src/components/Event/DateTimePicker.vue
+++ b/js/src/components/Event/DateTimePicker.vue
@@ -102,14 +102,20 @@ export default class DateTimePicker extends Vue {
   }
 
   get minTime(): Date | null {
-    if (this.minDatetime && this.datesAreOnSameDay(this.dateWithTime, this.minDatetime)) {
+    if (
+      this.minDatetime &&
+      this.datesAreOnSameDay(this.dateWithTime, this.minDatetime)
+    ) {
       return this.minDatetime;
     }
     return null;
   }
 
   get maxTime(): Date | null {
-    if (this.maxDatetime && this.datesAreOnSameDay(this.dateWithTime, this.maxDatetime)) {
+    if (
+      this.maxDatetime &&
+      this.datesAreOnSameDay(this.dateWithTime, this.maxDatetime)
+    ) {
       return this.maxDatetime;
     }
     return null;
diff --git a/js/src/components/Event/EventCard.vue b/js/src/components/Event/EventCard.vue
index 31d95b799..0947637da 100644
--- a/js/src/components/Event/EventCard.vue
+++ b/js/src/components/Event/EventCard.vue
@@ -1,5 +1,8 @@
 <template>
-  <router-link class="card" :to="{ name: 'Event', params: { uuid: event.uuid } }">
+  <router-link
+    class="card"
+    :to="{ name: 'Event', params: { uuid: event.uuid } }"
+  >
     <div class="card-image">
       <figure
         class="image is-16by9"
@@ -21,14 +24,18 @@
     <div class="card-content">
       <div class="media">
         <div class="media-left">
-          <date-calendar-icon v-if="!mergedOptions.hideDate" :date="event.beginsOn" />
+          <date-calendar-icon
+            v-if="!mergedOptions.hideDate"
+            :date="event.beginsOn"
+          />
         </div>
         <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>-->
             <span>
-              {{ event.physicalAddress.description }}, {{ event.physicalAddress.locality }}
+              {{ event.physicalAddress.description }},
+              {{ event.physicalAddress.locality }}
             </span>
           </div>
         </div>
diff --git a/js/src/components/Event/EventFullDate.vue b/js/src/components/Event/EventFullDate.vue
index 0146bc8de..454a39496 100644
--- a/js/src/components/Event/EventFullDate.vue
+++ b/js/src/components/Event/EventFullDate.vue
@@ -18,7 +18,9 @@
 </docs>
 
 <template>
-  <span v-if="!endsOn">{{ beginsOn | formatDateTimeString(showStartTime) }}</span>
+  <span v-if="!endsOn">{{
+    beginsOn | formatDateTimeString(showStartTime)
+  }}</span>
   <span v-else-if="isSameDay() && showStartTime && showEndTime">
     {{
       $t("On {date} from {startTime} to {endTime}", {
@@ -44,7 +46,9 @@
       })
     }}
   </span>
-  <span v-else-if="isSameDay()">{{ $t("On {date}", { date: formatDate(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}", {
@@ -97,7 +101,9 @@ export default class EventFullDate extends Vue {
   }
 
   isSameDay(): boolean {
-    const sameDay = new Date(this.beginsOn).toDateString() === new Date(this.endsOn).toDateString();
+    const sameDay =
+      new Date(this.beginsOn).toDateString() ===
+      new Date(this.endsOn).toDateString();
     return this.endsOn !== undefined && sameDay;
   }
 }
diff --git a/js/src/components/Event/EventListCard.vue b/js/src/components/Event/EventListCard.vue
index 6f2953e74..5ffa3af06 100644
--- a/js/src/components/Event/EventListCard.vue
+++ b/js/src/components/Event/EventListCard.vue
@@ -6,25 +6,38 @@
           <div class="date-component">
             <date-calendar-icon :date="participation.event.beginsOn" />
           </div>
-          <router-link :to="{ name: RouteName.EVENT, params: { uuid: participation.event.uuid } }">
+          <router-link
+            :to="{
+              name: RouteName.EVENT,
+              params: { uuid: participation.event.uuid },
+            }"
+          >
             <h3 class="title">{{ participation.event.title }}</h3>
           </router-link>
         </div>
         <div class="participation-actor has-text-grey">
           <span>
-            <b-icon icon="earth" v-if="participation.event.visibility === EventVisibility.PUBLIC" />
+            <b-icon
+              icon="earth"
+              v-if="participation.event.visibility === EventVisibility.PUBLIC"
+            />
             <b-icon
               icon="link"
-              v-else-if="participation.event.visibility === EventVisibility.UNLISTED"
+              v-else-if="
+                participation.event.visibility === EventVisibility.UNLISTED
+              "
             />
             <b-icon
               icon="lock"
-              v-else-if="participation.event.visibility === EventVisibility.PRIVATE"
+              v-else-if="
+                participation.event.visibility === EventVisibility.PRIVATE
+              "
             />
           </span>
           <span
             v-if="
-              participation.event.physicalAddress && participation.event.physicalAddress.locality
+              participation.event.physicalAddress &&
+              participation.event.physicalAddress.locality
             "
             >{{ participation.event.physicalAddress.locality }} -</span
           >
@@ -43,7 +56,11 @@
               path="Going as {name}"
               tag="span"
             >
-              <popover-actor-card slot="name" :actor="participation.actor" :inline="true">
+              <popover-actor-card
+                slot="name"
+                :actor="participation.actor"
+                :inline="true"
+              >
                 {{ participation.actor.displayName() }}
               </popover-actor-card>
             </i18n>
@@ -53,12 +70,15 @@
           <span
             class="participant-stats"
             v-if="
-              ![ParticipantRole.PARTICIPANT, ParticipantRole.NOT_APPROVED].includes(
-                participation.role
-              )
+              ![
+                ParticipantRole.PARTICIPANT,
+                ParticipantRole.NOT_APPROVED,
+              ].includes(participation.role)
             "
           >
-            <span v-if="participation.event.options.maximumAttendeeCapacity !== 0">
+            <span
+              v-if="participation.event.options.maximumAttendeeCapacity !== 0"
+            >
               {{
                 $tc(
                   "{available}/{capacity} available places",
@@ -68,16 +88,21 @@
                     available:
                       participation.event.options.maximumAttendeeCapacity -
                       participation.event.participantStats.participant,
-                    capacity: participation.event.options.maximumAttendeeCapacity,
+                    capacity:
+                      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">
@@ -107,9 +132,10 @@
         <ul>
           <li
             v-if="
-              ![ParticipantRole.PARTICIPANT, ParticipantRole.NOT_APPROVED].includes(
-                participation.role
-              )
+              ![
+                ParticipantRole.PARTICIPANT,
+                ParticipantRole.NOT_APPROVED,
+              ].includes(participation.role)
             "
           >
             <b-button
@@ -140,19 +166,23 @@
           </li>
           <li
             v-if="
-              ![ParticipantRole.PARTICIPANT, ParticipantRole.NOT_APPROVED].includes(
-                participation.role
-              )
+              ![
+                ParticipantRole.PARTICIPANT,
+                ParticipantRole.NOT_APPROVED,
+              ].includes(participation.role)
             "
             @click="openDeleteEventModalWrapper"
           >
-            <b-button type="is-text" icon-left="delete">{{ $t("Delete") }}</b-button>
+            <b-button type="is-text" icon-left="delete">{{
+              $t("Delete")
+            }}</b-button>
           </li>
           <li
             v-if="
-              ![ParticipantRole.PARTICIPANT, ParticipantRole.NOT_APPROVED].includes(
-                participation.role
-              )
+              ![
+                ParticipantRole.PARTICIPANT,
+                ParticipantRole.NOT_APPROVED,
+              ].includes(participation.role)
             "
           >
             <b-button
@@ -172,7 +202,10 @@
               tag="router-link"
               icon-left="view-compact"
               type="is-text"
-              :to="{ name: RouteName.EVENT, params: { uuid: participation.event.uuid } }"
+              :to="{
+                name: RouteName.EVENT,
+                params: { uuid: participation.event.uuid },
+              }"
               >{{ $t("View event page") }}</b-button
             >
           </li>
@@ -250,8 +283,14 @@ export default class EventListCard extends mixins(ActorMixin, EventMixin) {
     await this.openDeleteEventModal(this.participation.event);
   }
 
-  async gotToWithCheck(participation: IParticipant, route: RawLocation): Promise<Route> {
-    if (participation.actor.id !== this.currentActor.id && participation.event.organizerActor) {
+  async gotToWithCheck(
+    participation: IParticipant,
+    route: RawLocation
+  ): Promise<Route> {
+    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({
diff --git a/js/src/components/Event/EventListViewCard.vue b/js/src/components/Event/EventListViewCard.vue
index 99113f40d..700b61d1e 100644
--- a/js/src/components/Event/EventListViewCard.vue
+++ b/js/src/components/Event/EventListViewCard.vue
@@ -6,7 +6,9 @@
           <div class="date-component">
             <date-calendar-icon :date="event.beginsOn" />
           </div>
-          <router-link :to="{ name: RouteName.EVENT, params: { uuid: event.uuid } }">
+          <router-link
+            :to="{ name: RouteName.EVENT, params: { uuid: event.uuid } }"
+          >
             <h2 class="title">{{ event.title }}</h2>
           </router-link>
         </div>
@@ -15,17 +17,34 @@
             {{ event.physicalAddress.locality }}
           </span>
           <span v-if="event.attributedTo && options.memberofGroup">
-            {{ $t("Created by {name}", { name: usernameWithDomain(event.organizerActor) }) }}
+            {{
+              $t("Created by {name}", {
+                name: usernameWithDomain(event.organizerActor),
+              })
+            }}
           </span>
           <span v-else-if="options.memberofGroup">
-            {{ $t("Organized by {name}", { name: usernameWithDomain(event.organizerActor) }) }}
+            {{
+              $t("Organized by {name}", {
+                name: usernameWithDomain(event.organizerActor),
+              })
+            }}
           </span>
         </div>
         <div class="columns">
           <span class="column is-narrow">
-            <b-icon icon="earth" v-if="event.visibility === EventVisibility.PUBLIC" />
-            <b-icon icon="link" v-if="event.visibility === EventVisibility.UNLISTED" />
-            <b-icon icon="lock" v-if="event.visibility === EventVisibility.PRIVATE" />
+            <b-icon
+              icon="earth"
+              v-if="event.visibility === EventVisibility.PUBLIC"
+            />
+            <b-icon
+              icon="link"
+              v-if="event.visibility === EventVisibility.UNLISTED"
+            />
+            <b-icon
+              icon="lock"
+              v-if="event.visibility === EventVisibility.PRIVATE"
+            />
           </span>
           <span class="column is-narrow participant-stats">
             <span v-if="event.options.maximumAttendeeCapacity !== 0">
@@ -38,9 +57,13 @@
             </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>
diff --git a/js/src/components/Event/EventMinimalistCard.vue b/js/src/components/Event/EventMinimalistCard.vue
index 2f7db05a4..a80bbec42 100644
--- a/js/src/components/Event/EventMinimalistCard.vue
+++ b/js/src/components/Event/EventMinimalistCard.vue
@@ -14,10 +14,12 @@
           {{
             $tc(
               "{available}/{capacity} available places",
-              event.options.maximumAttendeeCapacity - event.participantStats.participant,
+              event.options.maximumAttendeeCapacity -
+                event.participantStats.participant,
               {
                 available:
-                  event.options.maximumAttendeeCapacity - event.participantStats.participant,
+                  event.options.maximumAttendeeCapacity -
+                  event.participantStats.participant,
                 capacity: event.options.maximumAttendeeCapacity,
               }
             )
@@ -42,9 +44,13 @@
             "
           >
             {{
-              $tc("{count} requests waiting", event.participantStats.notApproved, {
-                count: event.participantStats.notApproved,
-              })
+              $tc(
+                "{count} requests waiting",
+                event.participantStats.notApproved,
+                {
+                  count: event.participantStats.notApproved,
+                }
+              )
             }}
           </b-button>
         </span>
@@ -88,7 +94,8 @@ export default class EventMinimalistCard extends Vue {
 
     .event-minimalist-title {
       color: #3c376e;
-      font-family: "Liberation Sans", "Helvetica Neue", Roboto, Helvetica, Arial, serif;
+      font-family: "Liberation Sans", "Helvetica Neue", Roboto, Helvetica, Arial,
+        serif;
       font-size: 1.25rem;
       font-weight: 700;
     }
diff --git a/js/src/components/Event/FullAddressAutoComplete.vue b/js/src/components/Event/FullAddressAutoComplete.vue
index 14b96533d..22d360bf0 100644
--- a/js/src/components/Event/FullAddressAutoComplete.vue
+++ b/js/src/components/Event/FullAddressAutoComplete.vue
@@ -33,9 +33,12 @@
           <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,
-              })
+              $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>-->
@@ -110,7 +113,8 @@ import { IConfig } from "../../types/config.model";
 
 @Component({
   components: {
-    "map-leaflet": () => import(/* webpackChunkName: "map" */ "@/components/Map.vue"),
+    "map-leaflet": () =>
+      import(/* webpackChunkName: "map" */ "@/components/Map.vue"),
   },
   apollo: {
     config: CONFIG,
@@ -173,7 +177,9 @@ export default class FullAddressAutoComplete extends Vue {
       },
     });
 
-    this.addressData = result.data.searchAddress.map((address: IAddress) => new Address(address));
+    this.addressData = result.data.searchAddress.map(
+      (address: IAddress) => new Address(address)
+    );
     this.isFetching = false;
   }
 
@@ -224,7 +230,9 @@ export default class FullAddressAutoComplete extends Vue {
       },
     });
 
-    this.addressData = result.data.reverseGeocode.map((address: IAddress) => new Address(address));
+    this.addressData = result.data.reverseGeocode.map(
+      (address: IAddress) => new Address(address)
+    );
     if (this.addressData.length > 0) {
       const defaultAddress = new Address(this.addressData[0]);
       this.selected = defaultAddress;
@@ -248,7 +256,10 @@ export default class FullAddressAutoComplete extends Vue {
       this.location = await FullAddressAutoComplete.getLocation();
       this.mapDefaultZoom = 12;
       this.reverseGeoCode(
-        new LatLng(this.location.coords.latitude, this.location.coords.longitude),
+        new LatLng(
+          this.location.coords.latitude,
+          this.location.coords.longitude
+        ),
         12
       );
     } catch (e) {
diff --git a/js/src/components/Event/OrganizerPicker.vue b/js/src/components/Event/OrganizerPicker.vue
index dcc455789..9b3bb50e3 100644
--- a/js/src/components/Event/OrganizerPicker.vue
+++ b/js/src/components/Event/OrganizerPicker.vue
@@ -10,9 +10,18 @@
     >
       <div class="media">
         <figure class="image is-48x48" v-if="availableActor.avatar">
-          <img class="media-left is-rounded" :src="availableActor.avatar.url" alt="" />
+          <img
+            class="media-left is-rounded"
+            :src="availableActor.avatar.url"
+            alt=""
+          />
         </figure>
-        <b-icon class="media-left" v-else size="is-large" icon="account-circle" />
+        <b-icon
+          class="media-left"
+          v-else
+          size="is-large"
+          icon="account-circle"
+        />
         <div class="media-content">
           <h3>{{ availableActor.name }}</h3>
           <small>{{ `@${availableActor.preferredUsername}` }}</small>
@@ -61,16 +70,21 @@ export default class OrganizerPicker extends Vue {
   get actualMemberships(): IMember[] {
     if (this.restrictModeratorLevel) {
       return this.groupMemberships.elements.filter((membership: IMember) =>
-        [MemberRole.ADMINISTRATOR, MemberRole.MODERATOR, MemberRole.CREATOR].includes(
-          membership.role
-        )
+        [
+          MemberRole.ADMINISTRATOR,
+          MemberRole.MODERATOR,
+          MemberRole.CREATOR,
+        ].includes(membership.role)
       );
     }
     return this.groupMemberships.elements;
   }
 
   get actualAvailableActors(): IActor[] {
-    return [this.identity, ...this.actualMemberships.map((member) => member.parent)];
+    return [
+      this.identity,
+      ...this.actualMemberships.map((member) => member.parent),
+    ];
   }
 
   @Watch("currentActor")
diff --git a/js/src/components/Event/OrganizerPickerWrapper.vue b/js/src/components/Event/OrganizerPickerWrapper.vue
index ff76936aa..1f7b766c7 100644
--- a/js/src/components/Event/OrganizerPickerWrapper.vue
+++ b/js/src/components/Event/OrganizerPickerWrapper.vue
@@ -1,7 +1,11 @@
 <template>
   <div class="organizer-picker">
     <!-- If we have a current actor (inline) -->
-    <div v-if="inline && currentActor.id" class="inline box" @click="isComponentModalActive = true">
+    <div
+      v-if="inline && currentActor.id"
+      class="inline box"
+      @click="isComponentModalActive = true"
+    >
       <div class="media">
         <div class="media-left">
           <figure class="image is-48x48" v-if="currentActor.avatar">
@@ -15,7 +19,9 @@
         </div>
         <div class="media-content" v-if="currentActor.name">
           <p class="is-4">{{ currentActor.name }}</p>
-          <p class="is-6 has-text-grey">{{ `@${currentActor.preferredUsername}` }}</p>
+          <p class="is-6 has-text-grey">
+            {{ `@${currentActor.preferredUsername}` }}
+          </p>
         </div>
         <div class="media-content" v-else>
           {{ `@${currentActor.preferredUsername}` }}
@@ -26,7 +32,11 @@
       </div>
     </div>
     <!-- If we have a current actor -->
-    <span v-else-if="currentActor.id" class="block" @click="isComponentModalActive = true">
+    <span
+      v-else-if="currentActor.id"
+      class="block"
+      @click="isComponentModalActive = true"
+    >
       <img
         class="image is-48x48"
         v-if="currentActor.avatar"
@@ -40,13 +50,19 @@
       <div class="media">
         <div class="media-left">
           <figure class="image is-48x48" v-if="identity.avatar">
-            <img class="image is-rounded" :src="identity.avatar.url" :alt="identity.avatar.alt" />
+            <img
+              class="image is-rounded"
+              :src="identity.avatar.url"
+              :alt="identity.avatar.alt"
+            />
           </figure>
           <b-icon v-else size="is-large" icon="account-circle" />
         </div>
         <div class="media-content" v-if="identity.name">
           <p class="is-4">{{ identity.name }}</p>
-          <p class="is-6 has-text-grey">{{ `@${identity.preferredUsername}` }}</p>
+          <p class="is-6 has-text-grey">
+            {{ `@${identity.preferredUsername}` }}
+          </p>
         </div>
         <div class="media-content" v-else>
           {{ `@${identity.preferredUsername}` }}
@@ -74,7 +90,11 @@
             <div class="column">
               <div v-if="actorMembersForCurrentActor.length > 0">
                 <p>{{ $t("Add a contact") }}</p>
-                <p class="field" v-for="actor in actorMembersForCurrentActor" :key="actor.id">
+                <p
+                  class="field"
+                  v-for="actor in actorMembersForCurrentActor"
+                  :key="actor.id"
+                >
                   <b-checkbox v-model="actualContacts" :native-value="actor.id">
                     <div class="media">
                       <div class="media-left">
@@ -89,7 +109,9 @@
                       </div>
                       <div class="media-content" v-if="actor.name">
                         <p class="is-4">{{ actor.name }}</p>
-                        <p class="is-6 has-text-grey">{{ `@${actor.preferredUsername}` }}</p>
+                        <p class="is-6 has-text-grey">
+                          {{ `@${actor.preferredUsername}` }}
+                        </p>
                       </div>
                       <div class="media-content" v-else>
                         {{ `@${actor.preferredUsername}` }}
@@ -151,7 +173,8 @@ export default class OrganizerPickerWrapper extends Vue {
 
   groupMemberships: Paginate<IMember> = { elements: [], total: 0 };
 
-  @Prop({ type: Array, required: false, default: () => [] }) contacts!: IActor[];
+  @Prop({ type: Array, required: false, default: () => [] })
+  contacts!: IActor[];
 
   actualContacts: (string | undefined)[] = this.contacts.map(({ id }) => id);
 
@@ -172,7 +195,9 @@ export default class OrganizerPickerWrapper extends Vue {
   pickActor(): void {
     this.$emit(
       "update:contacts",
-      this.actorMembersForCurrentActor.filter(({ id }) => this.actualContacts.includes(id))
+      this.actorMembersForCurrentActor.filter(({ id }) =>
+        this.actualContacts.includes(id)
+      )
     );
     this.$emit("input", this.currentActor);
     this.isComponentModalActive = false;
@@ -183,7 +208,9 @@ export default class OrganizerPickerWrapper extends Vue {
       ({ parent: { id } }) => id === this.currentActor.id
     );
     if (currentMembership) {
-      return currentMembership.parent.members.elements.map(({ actor }: { actor: IActor }) => actor);
+      return currentMembership.parent.members.elements.map(
+        ({ actor }: { actor: IActor }) => actor
+      );
     }
     return [];
   }
diff --git a/js/src/components/Event/ParticipationButton.vue b/js/src/components/Event/ParticipationButton.vue
index 27a02da95..c19a30ccf 100644
--- a/js/src/components/Event/ParticipationButton.vue
+++ b/js/src/components/Event/ParticipationButton.vue
@@ -47,8 +47,16 @@ A button to set your participation
       >
     </b-dropdown>
 
-    <div v-else-if="participation && participation.role === ParticipantRole.NOT_APPROVED">
-      <b-dropdown aria-role="list" position="is-bottom-left" class="dropdown-disabled">
+    <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>
@@ -74,9 +82,17 @@ A button to set your participation
       <small>{{ $t("Waiting for organization team approval.") }}</small>
     </div>
 
-    <div v-else-if="participation && participation.role === ParticipantRole.REJECTED">
+    <div
+      v-else-if="
+        participation && participation.role === ParticipantRole.REJECTED
+      "
+    >
       <span>
-        {{ $t("Unfortunately, your participation request was rejected by the organizers.") }}
+        {{
+          $t(
+            "Unfortunately, your participation request was rejected by the organizers."
+          )
+        }}
       </span>
     </div>
 
@@ -92,7 +108,11 @@ A button to set your participation
         <b-icon icon="menu-down" />
       </button>
 
-      <b-dropdown-item :value="true" aria-role="listitem" @click="joinEvent(currentActor)">
+      <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">
@@ -103,7 +123,8 @@ A button to set your participation
             <span>
               {{
                 $t("as {identity}", {
-                  identity: currentActor.name || `@${currentActor.preferredUsername}`,
+                  identity:
+                    currentActor.name || `@${currentActor.preferredUsername}`,
                 })
               }}
             </span>
@@ -121,7 +142,10 @@ A button to set your participation
     </b-dropdown>
     <b-button
       tag="router-link"
-      :to="{ name: RouteName.EVENT_PARTICIPATE_LOGGED_OUT, params: { uuid: event.uuid } }"
+      :to="{
+        name: RouteName.EVENT_PARTICIPATE_LOGGED_OUT,
+        params: { uuid: event.uuid },
+      }"
       v-else-if="!participation && hasAnonymousParticipationMethods"
       type="is-primary"
       size="is-large"
@@ -130,7 +154,10 @@ A button to set your participation
     >
     <b-button
       tag="router-link"
-      :to="{ name: RouteName.EVENT_PARTICIPATE_WITH_ACCOUNT, params: { uuid: event.uuid } }"
+      :to="{
+        name: RouteName.EVENT_PARTICIPATE_WITH_ACCOUNT,
+        params: { uuid: event.uuid },
+      }"
       v-else-if="!currentActor.id"
       type="is-primary"
       size="is-large"
@@ -162,7 +189,9 @@ import RouteName from "../../router/name";
     identities: {
       query: IDENTITIES,
       update: ({ identities }) =>
-        identities ? identities.map((identity: IPerson) => new Person(identity)) : [],
+        identities
+          ? identities.map((identity: IPerson) => new Person(identity))
+          : [],
       skip() {
         return this.currentUser.isLoggedIn === false;
       },
diff --git a/js/src/components/Event/ShareEventModal.vue b/js/src/components/Event/ShareEventModal.vue
index 56e1b341a..9d599f2df 100644
--- a/js/src/components/Event/ShareEventModal.vue
+++ b/js/src/components/Event/ShareEventModal.vue
@@ -59,7 +59,12 @@
           <a :href="linkedInShareUrl" target="_blank" rel="nofollow noopener"
             ><b-icon icon="linkedin" size="is-large" type="is-primary"
           /></a>
-          <a :href="diasporaShareUrl" class="diaspora" target="_blank" rel="nofollow noopener">
+          <a
+            :href="diasporaShareUrl"
+            class="diaspora"
+            target="_blank"
+            rel="nofollow noopener"
+          >
             <span data-v-5e15e80a="" class="icon has-text-primary is-large">
               <DiasporaLogo alt="diaspora-logo" />
             </span>
@@ -90,7 +95,8 @@ import DiasporaLogo from "../../assets/diaspora-icon.svg?inline";
 export default class ShareEventModal extends Vue {
   @Prop({ type: Object, required: true }) event!: IEvent;
 
-  @Prop({ type: Boolean, required: false, default: true }) eventCapacityOK!: boolean;
+  @Prop({ type: Boolean, required: false, default: true })
+  eventCapacityOK!: boolean;
 
   @Ref("eventURLInput") readonly eventURLInput!: any;
 
@@ -101,13 +107,15 @@ export default class ShareEventModal extends Vue {
   showCopiedTooltip = false;
 
   get twitterShareUrl(): string {
-    return `https://twitter.com/intent/tweet?url=${encodeURIComponent(this.event.url)}&text=${
-      this.event.title
-    }`;
+    return `https://twitter.com/intent/tweet?url=${encodeURIComponent(
+      this.event.url
+    )}&text=${this.event.title}`;
   }
 
   get facebookShareUrl(): string {
-    return `https://www.facebook.com/sharer/sharer.php?u=${encodeURIComponent(this.event.url)}`;
+    return `https://www.facebook.com/sharer/sharer.php?u=${encodeURIComponent(
+      this.event.url
+    )}`;
   }
 
   get linkedInShareUrl(): string {
diff --git a/js/src/components/Event/TagInput.vue b/js/src/components/Event/TagInput.vue
index 0a0e82ebe..ca6f1277d 100644
--- a/js/src/components/Event/TagInput.vue
+++ b/js/src/components/Event/TagInput.vue
@@ -4,7 +4,9 @@
       {{ $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')"
+        :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>
@@ -58,7 +60,11 @@ export default class TagInput extends Vue {
 
   getFilteredTags(text: string): void {
     this.filteredTags = differenceBy(this.data, this.value, "id").filter(
-      (option) => get(option, this.path).toString().toLowerCase().indexOf(text.toLowerCase()) >= 0
+      (option) =>
+        get(option, this.path)
+          .toString()
+          .toLowerCase()
+          .indexOf(text.toLowerCase()) >= 0
     );
   }
 }
diff --git a/js/src/components/Footer.vue b/js/src/components/Footer.vue
index a84743775..657b4cae2 100644
--- a/js/src/components/Footer.vue
+++ b/js/src/components/Footer.vue
@@ -3,13 +3,20 @@
     <img :src="`/img/pics/footer_${random}.jpg`" alt="" />
     <ul>
       <li>
-        <router-link :to="{ name: RouteName.ABOUT }">{{ $t("About") }}</router-link>
+        <router-link :to="{ name: RouteName.ABOUT }">{{
+          $t("About")
+        }}</router-link>
       </li>
       <li>
-        <router-link :to="{ name: RouteName.TERMS }">{{ $t("Terms") }}</router-link>
+        <router-link :to="{ name: RouteName.TERMS }">{{
+          $t("Terms")
+        }}</router-link>
       </li>
       <li>
-        <a hreflang="en" href="https://framagit.org/framasoft/mobilizon/blob/master/LICENSE">
+        <a
+          hreflang="en"
+          href="https://framagit.org/framasoft/mobilizon/blob/master/LICENSE"
+        >
           {{ $t("License") }}
         </a>
       </li>
@@ -19,7 +26,9 @@
         tag="span"
         path="Powered by {mobilizon}. © 2018 - {date} The Mobilizon Contributors - Made with the financial support of {contributors}."
       >
-        <a slot="mobilizon" href="https://joinmobilizon.org">{{ $t("Mobilizon") }}</a>
+        <a slot="mobilizon" href="https://joinmobilizon.org">{{
+          $t("Mobilizon")
+        }}</a>
         <span slot="date">{{ new Date().getFullYear() }}</span>
         <a href="https://joinmobilizon.org/hall-of-fame" slot="contributors">{{
           $t("more than 1360 contributors")
diff --git a/js/src/components/Group/GroupCard.vue b/js/src/components/Group/GroupCard.vue
index dac9f0dc5..cf8d40bb8 100644
--- a/js/src/components/Group/GroupCard.vue
+++ b/js/src/components/Group/GroupCard.vue
@@ -17,7 +17,9 @@
           >
             <h3>{{ group.name }}</h3>
             <p class="is-6 has-text-grey">
-              <span v-if="group.domain">{{ `@${group.preferredUsername}@${group.domain}` }}</span>
+              <span v-if="group.domain">{{
+                `@${group.preferredUsername}@${group.domain}`
+              }}</span>
               <span v-else>{{ `@${group.preferredUsername}` }}</span>
             </p>
           </router-link>
diff --git a/js/src/components/Group/GroupMemberCard.vue b/js/src/components/Group/GroupMemberCard.vue
index 0b94eacdd..eb0bf1b42 100644
--- a/js/src/components/Group/GroupMemberCard.vue
+++ b/js/src/components/Group/GroupMemberCard.vue
@@ -13,7 +13,9 @@
             <router-link
               :to="{
                 name: RouteName.GROUP,
-                params: { preferredUsername: usernameWithDomain(member.parent) },
+                params: {
+                  preferredUsername: usernameWithDomain(member.parent),
+                },
               }"
             >
               <h3>{{ member.parent.name }}</h3>
@@ -23,12 +25,16 @@
                 }}</span>
                 <span v-else>{{ `@${member.parent.preferredUsername}` }}</span>
                 <b-taglist>
-                  <b-tag type="is-info" v-if="member.role === MemberRole.ADMINISTRATOR">{{
-                    $t("Administrator")
-                  }}</b-tag>
-                  <b-tag type="is-info" v-else-if="member.role === MemberRole.MODERATOR">{{
-                    $t("Moderator")
-                  }}</b-tag>
+                  <b-tag
+                    type="is-info"
+                    v-if="member.role === MemberRole.ADMINISTRATOR"
+                    >{{ $t("Administrator") }}</b-tag
+                  >
+                  <b-tag
+                    type="is-info"
+                    v-else-if="member.role === MemberRole.MODERATOR"
+                    >{{ $t("Moderator") }}</b-tag
+                  >
                 </b-taglist>
               </p>
             </router-link>
diff --git a/js/src/components/Group/GroupPicker.vue b/js/src/components/Group/GroupPicker.vue
index 12211563d..583b49671 100644
--- a/js/src/components/Group/GroupPicker.vue
+++ b/js/src/components/Group/GroupPicker.vue
@@ -8,7 +8,9 @@
         <a
           class="list-item"
           v-for="groupMembership in actualMemberships"
-          :class="{ 'is-active': groupMembership.parent.id === currentGroup.id }"
+          :class="{
+            'is-active': groupMembership.parent.id === currentGroup.id,
+          }"
           @click="changeCurrentGroup(groupMembership.parent)"
           :key="groupMembership.id"
         >
@@ -19,14 +21,25 @@
               :src="groupMembership.parent.avatar.url"
               alt=""
             />
-            <b-icon class="media-left" v-else size="is-large" icon="account-circle" />
+            <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>
+              <small>{{
+                `@${groupMembership.parent.preferredUsername}`
+              }}</small>
             </div>
           </div>
         </a>
-        <a class="list-item" @click="changeCurrentGroup(new Group())" v-if="currentGroup.id">
+        <a
+          class="list-item"
+          @click="changeCurrentGroup(new Group())"
+          v-if="currentGroup.id"
+        >
           <h3>{{ $t("Unset group") }}</h3>
         </a>
       </div>
@@ -79,9 +92,11 @@ export default class GroupPicker extends Vue {
   get actualMemberships(): IMember[] {
     if (this.restrictModeratorLevel) {
       return this.groupMemberships.elements.filter((membership: IMember) =>
-        [MemberRole.ADMINISTRATOR, MemberRole.MODERATOR, MemberRole.CREATOR].includes(
-          membership.role
-        )
+        [
+          MemberRole.ADMINISTRATOR,
+          MemberRole.MODERATOR,
+          MemberRole.CREATOR,
+        ].includes(membership.role)
       );
     }
     return this.groupMemberships.elements;
diff --git a/js/src/components/Group/GroupPickerWrapper.vue b/js/src/components/Group/GroupPickerWrapper.vue
index 61c009a32..9be9b28f9 100644
--- a/js/src/components/Group/GroupPickerWrapper.vue
+++ b/js/src/components/Group/GroupPickerWrapper.vue
@@ -10,7 +10,11 @@
         {{ $t("The event will show the group as organizer.") }}
       </p>
     </div>
-    <div v-if="inline && currentGroup.id" class="inline box" @click="isComponentModalActive = true">
+    <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">
@@ -24,7 +28,9 @@
         </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>
+          <p class="is-6 has-text-grey">
+            {{ `@${currentGroup.preferredUsername}` }}
+          </p>
         </div>
         <div class="media-content" v-else>
           {{ `@${currentGroup.preferredUsername}` }}
@@ -34,7 +40,11 @@
         </b-button>
       </div>
     </div>
-    <span v-else-if="currentGroup.id" class="block" @click="isComponentModalActive = true">
+    <span
+      v-else-if="currentGroup.id"
+      class="block"
+      @click="isComponentModalActive = true"
+    >
       <img
         class="image is-48x48"
         v-if="currentGroup.avatar"
@@ -44,7 +54,9 @@
       <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-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>
diff --git a/js/src/components/Group/GroupSection.vue b/js/src/components/Group/GroupSection.vue
index b798f4d9d..5ecdf1f4f 100644
--- a/js/src/components/Group/GroupSection.vue
+++ b/js/src/components/Group/GroupSection.vue
@@ -26,7 +26,8 @@ export default class GroupSection extends Vue {
 
   @Prop({ required: true, type: String }) icon!: string;
 
-  @Prop({ required: false, type: Boolean, default: true }) privateSection!: boolean;
+  @Prop({ required: false, type: Boolean, default: true })
+  privateSection!: boolean;
 
   @Prop({ required: true, type: Object }) route!: Route;
 }
@@ -76,7 +77,8 @@ div.group-section-title {
     ::v-deep span {
       display: inline;
       padding: 3px 8px;
-      font-family: "Liberation Sans", "Helvetica Neue", Roboto, Helvetica, Arial, serif;
+      font-family: "Liberation Sans", "Helvetica Neue", Roboto, Helvetica, Arial,
+        serif;
       font-weight: 500;
       font-size: 30px;
       flex: 1;
diff --git a/js/src/components/Group/InvitationCard.vue b/js/src/components/Group/InvitationCard.vue
index 8d02ddb51..e0e401b9c 100644
--- a/js/src/components/Group/InvitationCard.vue
+++ b/js/src/components/Group/InvitationCard.vue
@@ -2,7 +2,10 @@
   <div class="media">
     <div class="media-content">
       <div class="content">
-        <i18n tag="p" path="You have been invited by {invitedBy} to the following group:">
+        <i18n
+          tag="p"
+          path="You have been invited by {invitedBy} to the following group:"
+        >
           <b slot="invitedBy">{{ member.invitedBy.name }}</b>
         </i18n>
       </div>
@@ -20,15 +23,21 @@
                 <router-link
                   :to="{
                     name: RouteName.GROUP,
-                    params: { preferredUsername: usernameWithDomain(member.parent) },
+                    params: {
+                      preferredUsername: usernameWithDomain(member.parent),
+                    },
                   }"
                 >
                   <h3>{{ member.parent.name }}</h3>
                   <p class="is-6 has-text-grey">
                     <span v-if="member.parent.domain">
-                      {{ `@${member.parent.preferredUsername}@${member.parent.domain}` }}
+                      {{
+                        `@${member.parent.preferredUsername}@${member.parent.domain}`
+                      }}
                     </span>
-                    <span v-else>{{ `@${member.parent.preferredUsername}` }}</span>
+                    <span v-else>{{
+                      `@${member.parent.preferredUsername}`
+                    }}</span>
                   </p>
                 </router-link>
               </div>
diff --git a/js/src/components/Group/Invitations.vue b/js/src/components/Group/Invitations.vue
index c7ce08b3d..00ace4703 100644
--- a/js/src/components/Group/Invitations.vue
+++ b/js/src/components/Group/Invitations.vue
@@ -26,13 +26,15 @@ export default class Invitations extends Vue {
 
   async acceptInvitation(id: string): Promise<void> {
     try {
-      const { data } = await this.$apollo.mutate<{ acceptInvitation: IMember }>({
-        mutation: ACCEPT_INVITATION,
-        variables: {
-          id,
-        },
-        refetchQueries: [{ query: LOGGED_USER_MEMBERSHIPS }],
-      });
+      const { data } = await this.$apollo.mutate<{ acceptInvitation: IMember }>(
+        {
+          mutation: ACCEPT_INVITATION,
+          variables: {
+            id,
+          },
+          refetchQueries: [{ query: LOGGED_USER_MEMBERSHIPS }],
+        }
+      );
       if (data) {
         this.$emit("accept-invitation", data.acceptInvitation);
       }
@@ -46,13 +48,15 @@ export default class Invitations extends Vue {
 
   async rejectInvitation(id: string): Promise<void> {
     try {
-      const { data } = await this.$apollo.mutate<{ rejectInvitation: IMember }>({
-        mutation: REJECT_INVITATION,
-        variables: {
-          id,
-        },
-        refetchQueries: [{ query: LOGGED_USER_MEMBERSHIPS }],
-      });
+      const { data } = await this.$apollo.mutate<{ rejectInvitation: IMember }>(
+        {
+          mutation: REJECT_INVITATION,
+          variables: {
+            id,
+          },
+          refetchQueries: [{ query: LOGGED_USER_MEMBERSHIPS }],
+        }
+      );
       if (data) {
         this.$emit("reject-invitation", data.rejectInvitation);
       }
diff --git a/js/src/components/Group/JoinGroupWithAccount.vue b/js/src/components/Group/JoinGroupWithAccount.vue
index 83331fe90..e7df3567c 100644
--- a/js/src/components/Group/JoinGroupWithAccount.vue
+++ b/js/src/components/Group/JoinGroupWithAccount.vue
@@ -25,6 +25,8 @@ export default class JoinGroupWithAccount extends Vue {
     }`;
   }
 
-  sentence = this.$t("We will redirect you to your instance in order to interact with this group");
+  sentence = this.$t(
+    "We will redirect you to your instance in order to interact with this group"
+  );
 }
 </script>
diff --git a/js/src/components/Map.vue b/js/src/components/Map.vue
index 00ebaa3a3..0d52fd943 100644
--- a/js/src/components/Map.vue
+++ b/js/src/components/Map.vue
@@ -8,7 +8,11 @@
       @click="clickMap"
       @update:zoom="updateZoom"
     >
-      <l-tile-layer :url="config.maps.tiles.endpoint" :attribution="attribution"> </l-tile-layer>
+      <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]"
@@ -17,7 +21,9 @@
         :draggable="!readOnly"
       >
         <l-popup v-if="popupMultiLine">
-          <span v-for="line in popupMultiLine" :key="line">{{ line }}<br /></span>
+          <span v-for="line in popupMultiLine" :key="line"
+            >{{ line }}<br
+          /></span>
         </l-popup>
       </l-marker>
     </l-map>
@@ -51,7 +57,10 @@ export default class Map extends Vue {
 
   @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!: Record<string, unknown>;
 
@@ -125,7 +134,8 @@ export default class Map extends Vue {
 
   get attribution(): string {
     return (
-      this.config.maps.tiles.attribution || (this.$t("© The OpenStreetMap Contributors") as string)
+      this.config.maps.tiles.attribution ||
+      (this.$t("© The OpenStreetMap Contributors") as string)
     );
   }
 }
diff --git a/js/src/components/Map/Vue2LeafletLocateControl.vue b/js/src/components/Map/Vue2LeafletLocateControl.vue
index df2de381e..c7afaad7e 100644
--- a/js/src/components/Map/Vue2LeafletLocateControl.vue
+++ b/js/src/components/Map/Vue2LeafletLocateControl.vue
@@ -23,7 +23,10 @@ import { Component, Prop, Vue } from "vue-property-decorator";
   },
 })
 export default class Vue2LeafletLocateControl extends Vue {
-  @Prop({ type: Object, default: () => ({}) }) options!: Record<string, unknown>;
+  @Prop({ type: Object, default: () => ({}) }) options!: Record<
+    string,
+    unknown
+  >;
 
   @Prop({ type: Boolean, default: true }) visible = true;
 
diff --git a/js/src/components/NavBar.vue b/js/src/components/NavBar.vue
index 6846f78eb..53fdfcfc4 100644
--- a/js/src/components/NavBar.vue
+++ b/js/src/components/NavBar.vue
@@ -1,7 +1,15 @@
 <template>
-  <b-navbar type="is-secondary" wrapper-class="container" :active.sync="mobileNavbarActive">
+  <b-navbar
+    type="is-secondary"
+    wrapper-class="container"
+    :active.sync="mobileNavbarActive"
+  >
     <template slot="brand">
-      <b-navbar-item tag="router-link" :to="{ name: RouteName.HOME }" :aria-label="$t('Home')">
+      <b-navbar-item
+        tag="router-link"
+        :to="{ name: RouteName.HOME }"
+        :aria-label="$t('Home')"
+      >
         <logo />
       </b-navbar-item>
     </template>
@@ -19,9 +27,12 @@
         >{{ $t("My groups") }}</b-navbar-item
       >
       <b-navbar-item tag="span" v-if="config && config.features.eventCreation">
-        <b-button tag="router-link" :to="{ name: RouteName.CREATE_EVENT }" type="is-primary">{{
-          $t("Create")
-        }}</b-button>
+        <b-button
+          tag="router-link"
+          :to="{ name: RouteName.CREATE_EVENT }"
+          type="is-primary"
+          >{{ $t("Create") }}</b-button
+        >
       </b-navbar-item>
     </template>
     <template slot="end">
@@ -30,9 +41,17 @@
       </b-navbar-item>
 
       <b-navbar-dropdown v-if="currentActor.id && currentUser.isLoggedIn" right>
-        <template slot="label" v-if="currentActor" class="navbar-dropdown-profile">
+        <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>
@@ -65,9 +84,11 @@
           <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') }}-->
@@ -95,9 +116,11 @@
             <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>
@@ -112,7 +135,11 @@ import { loadLanguageAsync } from "@/utils/i18n";
 import { ICurrentUserRole } from "@/types/enums";
 import { CURRENT_USER_CLIENT, USER_SETTINGS } from "../graphql/user";
 import { changeIdentity, logout } from "../utils/auth";
-import { CURRENT_ACTOR_CLIENT, IDENTITIES, UPDATE_DEFAULT_ACTOR } from "../graphql/actor";
+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";
@@ -131,7 +158,9 @@ import RouteName from "../router/name";
     identities: {
       query: IDENTITIES,
       update: ({ identities }) =>
-        identities ? identities.map((identity: IPerson) => new Person(identity)) : [],
+        identities
+          ? identities.map((identity: IPerson) => new Person(identity))
+          : [],
       skip() {
         return this.currentUser.isLoggedIn === false;
       },
@@ -202,7 +231,8 @@ export default class NavBar extends Vue {
   async handleErrors(errors: GraphQLError[]): Promise<void> {
     if (
       errors.length > 0 &&
-      errors[0].message === "You need to be logged-in to view your list of identities"
+      errors[0].message ===
+        "You need to be logged-in to view your list of identities"
     ) {
       await this.logout();
     }
diff --git a/js/src/components/Participation/ConfirmParticipation.vue b/js/src/components/Participation/ConfirmParticipation.vue
index a72c8d4d6..2a8bd5424 100644
--- a/js/src/components/Participation/ConfirmParticipation.vue
+++ b/js/src/components/Participation/ConfirmParticipation.vue
@@ -1,9 +1,14 @@
 <template>
   <section class="section container">
-    <h1 class="title" v-if="loading">{{ $t("Your participation request is being validated") }}</h1>
+    <h1 class="title" v-if="loading">
+      {{ $t("Your participation request is being validated") }}
+    </h1>
     <div v-else>
       <div v-if="failed">
-        <b-message :title="$t('Error while validating participation request')" type="is-danger">
+        <b-message
+          :title="$t('Error while validating participation request')"
+          type="is-danger"
+        >
           {{
             $t(
               "Either the participation request has already been validated, either the validation token is incorrect."
@@ -12,9 +17,16 @@
         </b-message>
       </div>
       <div v-else>
-        <h1 class="title">{{ $t("Your participation request has been validated") }}</h1>
-        <p class="content" v-if="participation.event.joinOptions == EventJoinOptions.RESTRICTED">
-          {{ $t("Your participation still has to be approved by the organisers.") }}
+        <h1 class="title">
+          {{ $t("Your participation request has been validated") }}
+        </h1>
+        <p
+          class="content"
+          v-if="participation.event.joinOptions == EventJoinOptions.RESTRICTED"
+        >
+          {{
+            $t("Your participation still has to be approved by the organisers.")
+          }}
         </p>
         <div class="columns has-text-centered">
           <div class="column">
diff --git a/js/src/components/Participation/ParticipationWithAccount.vue b/js/src/components/Participation/ParticipationWithAccount.vue
index 6415cecd1..ec65de677 100644
--- a/js/src/components/Participation/ParticipationWithAccount.vue
+++ b/js/src/components/Participation/ParticipationWithAccount.vue
@@ -1,5 +1,9 @@
 <template>
-  <redirect-with-account :uri="uri" :pathAfterLogin="`/events/${uuid}`" :sentence="sentence" />
+  <redirect-with-account
+    :uri="uri"
+    :pathAfterLogin="`/events/${uuid}`"
+    :sentence="sentence"
+  />
 </template>
 <script lang="ts">
 import { Component, Prop, Vue } from "vue-property-decorator";
@@ -21,6 +25,8 @@ export default class ParticipationWithAccount extends Vue {
     }`;
   }
 
-  sentence = this.$t("We will redirect you to your instance in order to interact with this event");
+  sentence = this.$t(
+    "We will redirect you to your instance in order to interact with this event"
+  );
 }
 </script>
diff --git a/js/src/components/Participation/ParticipationWithoutAccount.vue b/js/src/components/Participation/ParticipationWithoutAccount.vue
index 980f2432e..9793005f0 100644
--- a/js/src/components/Participation/ParticipationWithoutAccount.vue
+++ b/js/src/components/Participation/ParticipationWithoutAccount.vue
@@ -33,7 +33,13 @@
               )
             }}
           </p>
-          <p v-else>{{ $t("If you want, you may send a message to the event organizer here.") }}</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"
@@ -54,18 +60,29 @@
               </p>
             </b-checkbox>
           </b-field>
-          <b-button :disabled="sendingForm" type="is-primary" native-type="submit">{{
-            $t("Send email")
-          }}</b-button>
+          <b-button
+            :disabled="sendingForm"
+            type="is-primary"
+            native-type="submit"
+            >{{ $t("Send email") }}</b-button
+          >
           <div class="has-text-centered">
-            <b-button native-type="button" tag="a" type="is-text" @click="$router.go(-1)">{{
-              $t("Back to previous page")
-            }}</b-button>
+            <b-button
+              native-type="button"
+              tag="a"
+              type="is-text"
+              @click="$router.go(-1)"
+              >{{ $t("Back to previous page") }}</b-button
+            >
           </div>
         </form>
         <div v-else>
-          <h1 class="title">{{ $t("Request for participation confirmation sent") }}</h1>
-          <p class="content">{{ $t("Check your inbox (and your junk mail folder).") }}</p>
+          <h1 class="title">
+            {{ $t("Request for participation confirmation sent") }}
+          </h1>
+          <p class="content">
+            {{ $t("Check your inbox (and your junk mail folder).") }}
+          </p>
           <p class="content">{{ $t("You may now close this window.") }}</p>
         </div>
       </div>
@@ -102,7 +119,11 @@ import { IParticipant } from "../../types/participant.model";
 export default class ParticipationWithoutAccount extends Vue {
   @Prop({ type: String, required: true }) uuid!: string;
 
-  anonymousParticipation: { email: string; message: string; saveParticipation: boolean } = {
+  anonymousParticipation: {
+    email: string;
+    message: string;
+    saveParticipation: boolean;
+  } = {
     email: "",
     message: "",
     saveParticipation: true,
@@ -134,7 +155,9 @@ export default class ParticipationWithoutAccount extends Vue {
         },
         update: (store, { data: updateData }) => {
           if (updateData == null) {
-            console.error("Cannot update event participant cache, because of data null value.");
+            console.error(
+              "Cannot update event participant cache, because of data null value."
+            );
             return;
           }
 
@@ -143,12 +166,16 @@ export default class ParticipationWithoutAccount extends Vue {
             variables: { uuid: this.event.uuid },
           });
           if (cachedData == null) {
-            console.error("Cannot update event participant cache, because of cached null value.");
+            console.error(
+              "Cannot update event participant cache, because of cached null value."
+            );
             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;
           }
 
diff --git a/js/src/components/Participation/UnloggedParticipation.vue b/js/src/components/Participation/UnloggedParticipation.vue
index 9adfc7d8a..9adc6d491 100644
--- a/js/src/components/Participation/UnloggedParticipation.vue
+++ b/js/src/components/Participation/UnloggedParticipation.vue
@@ -2,22 +2,34 @@
   <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>
+        <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 }">
+            <router-link
+              :to="{ name: RouteName.EVENT_PARTICIPATE_WITH_ACCOUNT }"
+            >
               <figure class="image is-128x128">
-                <img src="../../assets/undraw_profile.svg" alt="Profile illustration" />
+                <img
+                  src="../../assets/undraw_profile.svg"
+                  alt="Profile illustration"
+                />
               </figure>
-              <b-button type="is-primary">{{ $t("I have a Mobilizon account") }}</b-button>
+              <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,
-                  })
+                  $t(
+                    "Either on the {instance} instance or on another instance.",
+                    {
+                      instance: host,
+                    }
+                  )
                 }}
               </small>
               <b-tooltip
@@ -32,25 +44,41 @@
               </b-tooltip>
             </p>
           </div>
-          <vertical-divider :content="$t('Or')" v-if="anonymousParticipationAllowed" />
+          <vertical-divider
+            :content="$t('Or')"
+            v-if="anonymousParticipationAllowed"
+          />
           <div
             class="column"
-            v-if="anonymousParticipationAllowed && hasAnonymousEmailParticipationMethod"
+            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" />
+                <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>
+              <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" />
+                <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>
+              <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>
diff --git a/js/src/components/PictureUpload.vue b/js/src/components/PictureUpload.vue
index 593304a66..11a65579f 100644
--- a/js/src/components/PictureUpload.vue
+++ b/js/src/components/PictureUpload.vue
@@ -69,7 +69,11 @@ export default class PictureUpload extends Vue {
 
   @Prop({ type: Object, required: false }) defaultImage!: IMedia;
 
-  @Prop({ type: String, required: false, default: "image/gif,image/png,image/jpeg,image/webp" })
+  @Prop({
+    type: String,
+    required: false,
+    default: "image/gif,image/png,image/jpeg,image/webp",
+  })
   accept!: string;
 
   @Prop({
@@ -95,13 +99,11 @@ export default class PictureUpload extends Vue {
 
   @Watch("pictureFile")
   onPictureFileChanged(val: File): void {
-    console.log("onPictureFileChanged", val);
     this.updatePreview(val);
   }
 
   @Watch("defaultImage")
   onDefaultImageChange(defaultImage: IMedia): void {
-    console.log("onDefaultImageChange", defaultImage);
     this.imageSrc = defaultImage ? defaultImage.url : null;
   }
 
diff --git a/js/src/components/Post/PostElementItem.vue b/js/src/components/Post/PostElementItem.vue
index f377c8aae..27e526487 100644
--- a/js/src/components/Post/PostElementItem.vue
+++ b/js/src/components/Post/PostElementItem.vue
@@ -14,26 +14,46 @@
         <div class="media-content">
           <p class="post-minimalist-title">{{ post.title }}</p>
           <div class="metadata">
-            <b-tag type="is-warning" size="is-small" v-if="post.draft">{{ $t("Draft") }}</b-tag>
+            <b-tag type="is-warning" size="is-small" v-if="post.draft">{{
+              $t("Draft")
+            }}</b-tag>
             <small
-              v-if="post.visibility === PostVisibility.PUBLIC && isCurrentActorMember"
+              v-if="
+                post.visibility === PostVisibility.PUBLIC &&
+                isCurrentActorMember
+              "
               class="has-text-grey"
             >
               <b-icon icon="earth" size="is-small" />{{ $t("Public") }}</small
             >
-            <small v-else-if="post.visibility === PostVisibility.UNLISTED" class="has-text-grey">
-              <b-icon icon="link" size="is-small" />{{ $t("Accessible through link") }}</small
+            <small
+              v-else-if="post.visibility === PostVisibility.UNLISTED"
+              class="has-text-grey"
+            >
+              <b-icon icon="link" size="is-small" />{{
+                $t("Accessible through link")
+              }}</small
+            >
+            <small
+              v-else-if="post.visibility === PostVisibility.PRIVATE"
+              class="has-text-grey"
             >
-            <small v-else-if="post.visibility === PostVisibility.PRIVATE" class="has-text-grey">
               <b-icon icon="lock" size="is-small" />{{
-                $t("Accessible only to members", { group: post.attributedTo.name })
+                $t("Accessible only to members", {
+                  group: post.attributedTo.name,
+                })
               }}</small
             >
             <small class="has-text-grey">{{
-              $options.filters.formatDateTimeString(new Date(post.insertedAt), false)
+              $options.filters.formatDateTimeString(
+                new Date(post.insertedAt),
+                false
+              )
             }}</small>
             <small class="has-text-grey" v-if="isCurrentActorMember">{{
-              $t("Created by {username}", { username: `@${usernameWithDomain(post.author)}` })
+              $t("Created by {username}", {
+                username: `@${usernameWithDomain(post.author)}`,
+              })
             }}</small>
           </div>
         </div>
@@ -52,7 +72,8 @@ import { IPost } from "../../types/post.model";
 export default class PostElementItem extends Vue {
   @Prop({ required: true, type: Object }) post!: IPost;
 
-  @Prop({ required: false, type: Boolean, default: false }) isCurrentActorMember!: boolean;
+  @Prop({ required: false, type: Boolean, default: false })
+  isCurrentActorMember!: boolean;
 
   RouteName = RouteName;
 
@@ -75,7 +96,8 @@ export default class PostElementItem extends Vue {
 
     .post-minimalist-title {
       color: #3c376e;
-      font-family: "Liberation Sans", "Helvetica Neue", Roboto, Helvetica, Arial, serif;
+      font-family: "Liberation Sans", "Helvetica Neue", Roboto, Helvetica, Arial,
+        serif;
       font-size: 1rem;
       font-weight: 700;
       overflow: hidden;
diff --git a/js/src/components/Post/PostListItem.vue b/js/src/components/Post/PostListItem.vue
index 570a0e898..9290d5693 100644
--- a/js/src/components/Post/PostListItem.vue
+++ b/js/src/components/Post/PostListItem.vue
@@ -43,7 +43,8 @@ export default class PostListItem extends Vue {
 
     .post-minimalist-title {
       color: #3c376e;
-      font-family: "Liberation Sans", "Helvetica Neue", Roboto, Helvetica, Arial, serif;
+      font-family: "Liberation Sans", "Helvetica Neue", Roboto, Helvetica, Arial,
+        serif;
       font-size: 1rem;
       font-weight: 700;
       overflow: hidden;
diff --git a/js/src/components/Report/ReportCard.vue b/js/src/components/Report/ReportCard.vue
index 0ae5a991b..025250a68 100644
--- a/js/src/components/Report/ReportCard.vue
+++ b/js/src/components/Report/ReportCard.vue
@@ -22,10 +22,18 @@
       <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 }) }}
+            {{
+              $t("Reported by someone on {domain}", {
+                domain: report.reporter.domain,
+              })
+            }}
           </span>
           <span v-else>
-            {{ $t("Reported by {reporter}", { reporter: report.reporter.preferredUsername }) }}
+            {{
+              $t("Reported by {reporter}", {
+                reporter: report.reporter.preferredUsername,
+              })
+            }}
           </span>
         </div>
         <div class="column" v-if="report.content" v-html="report.content" />
diff --git a/js/src/components/Report/ReportModal.vue b/js/src/components/Report/ReportModal.vue
index 57eed0e97..abd54ccf1 100644
--- a/js/src/components/Report/ReportModal.vue
+++ b/js/src/components/Report/ReportModal.vue
@@ -4,7 +4,10 @@
       <p class="modal-card-title">{{ title }}</p>
     </header>
 
-    <section class="modal-card-body is-flex" :class="{ 'is-titleless': !title }">
+    <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" />
@@ -16,7 +19,12 @@
                 <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" />
+                <b-icon
+                  class="media-left"
+                  v-else
+                  size="is-large"
+                  icon="account-circle"
+                />
               </div>
               <div class="media-content">
                 <div class="content">
@@ -82,7 +90,10 @@ import { IComment } from "../../types/comment.model";
   },
 })
 export default class ReportModal extends Vue {
-  @Prop({ type: Function }) onConfirm!: (content: string, forward: boolean) => void;
+  @Prop({ type: Function }) onConfirm!: (
+    content: string,
+    forward: boolean
+  ) => void;
 
   @Prop({ type: String }) title!: string;
 
diff --git a/js/src/components/Resource/FolderItem.vue b/js/src/components/Resource/FolderItem.vue
index 76ef70537..ffa173b9a 100644
--- a/js/src/components/Resource/FolderItem.vue
+++ b/js/src/components/Resource/FolderItem.vue
@@ -14,7 +14,9 @@
       </div>
       <div class="body">
         <h3>{{ resource.title }}</h3>
-        <span class="host" v-if="inline">{{ resource.updatedAt | formatDateTimeString }}</span>
+        <span class="host" v-if="inline">{{
+          resource.updatedAt | formatDateTimeString
+        }}</span>
       </div>
       <draggable
         v-if="!inline"
@@ -93,21 +95,27 @@ export default class FolderItem extends Mixins(ResourceMixin) {
 
   async moveResource(resource: IResource): Promise<IResource | undefined> {
     try {
-      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,
-        },
-      });
+      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;
     } catch (e) {
-      Snackbar.open({ message: e.message, type: "is-danger", position: "is-bottom" });
+      Snackbar.open({
+        message: e.message,
+        type: "is-danger",
+        position: "is-bottom",
+      });
       return undefined;
     }
   }
diff --git a/js/src/components/Resource/ResourceItem.vue b/js/src/components/Resource/ResourceItem.vue
index 50f4e7a3e..52b109390 100644
--- a/js/src/components/Resource/ResourceItem.vue
+++ b/js/src/components/Resource/ResourceItem.vue
@@ -2,7 +2,12 @@
   <div class="resource-wrapper">
     <a :href="resource.resourceUrl" target="_blank">
       <div class="preview">
-        <div v-if="resource.type && Object.keys(mapServiceTypeToIcon).includes(resource.type)">
+        <div
+          v-if="
+            resource.type &&
+            Object.keys(mapServiceTypeToIcon).includes(resource.type)
+          "
+        >
           <b-icon :icon="mapServiceTypeToIcon[resource.type]" size="is-large" />
         </div>
         <div
@@ -21,7 +26,9 @@
           :src="resource.metadata.faviconUrl"
         />
         <h3>{{ resource.title }}</h3>
-        <span class="host" v-if="inline">{{ resource.updatedAt | formatDateTimeString }}</span>
+        <span class="host" v-if="inline">{{
+          resource.updatedAt | formatDateTimeString
+        }}</span>
         <span class="host" v-else>{{ urlHostname }}</span>
       </div>
     </a>
diff --git a/js/src/components/Resource/ResourceSelector.vue b/js/src/components/Resource/ResourceSelector.vue
index 2b1fb874b..2b55571df 100644
--- a/js/src/components/Resource/ResourceSelector.vue
+++ b/js/src/components/Resource/ResourceSelector.vue
@@ -2,9 +2,15 @@
   <div v-if="resource">
     <article class="panel is-primary">
       <p class="panel-heading">
-        {{ $t('Move "{resourceName}"', { resourceName: initialResource.title }) }}
+        {{
+          $t('Move "{resourceName}"', { resourceName: initialResource.title })
+        }}
       </p>
-      <a class="panel-block clickable" @click="resource = resource.parent" v-if="resource.parent">
+      <a
+        class="panel-block clickable"
+        @click="resource = resource.parent"
+        v-if="resource.parent"
+      >
         <span class="panel-icon">
           <b-icon icon="chevron-up" size="is-small" />
         </span>
@@ -23,12 +29,19 @@
       <a
         class="panel-block"
         v-for="element in resource.children.elements"
-        :class="{ clickable: element.type === 'folder' && element.id !== initialResource.id }"
+        :class="{
+          clickable:
+            element.type === 'folder' && element.id !== initialResource.id,
+        }"
         :key="element.id"
         @click="goDown(element)"
       >
         <span class="panel-icon">
-          <b-icon icon="folder" size="is-small" v-if="element.type === 'folder'" />
+          <b-icon
+            icon="folder"
+            size="is-small"
+            v-if="element.type === 'folder'"
+          />
           <b-icon icon="link" size="is-small" v-else />
         </span>
         {{ element.title }}
@@ -44,10 +57,17 @@
         {{ $t("No resources in this folder") }}
       </p>
     </article>
-    <b-button type="is-primary" @click="updateResource" :disabled="moveDisabled">{{
-      $t("Move resource to {folder}", { folder: resource.title })
+    <b-button
+      type="is-primary"
+      @click="updateResource"
+      :disabled="moveDisabled"
+      >{{
+        $t("Move resource to {folder}", { folder: resource.title })
+      }}</b-button
+    >
+    <b-button type="is-text" @click="$emit('close-move-modal')">{{
+      $t("Cancel")
     }}</b-button>
-    <b-button type="is-text" @click="$emit('close-move-modal')">{{ $t("Cancel") }}</b-button>
   </div>
 </template>
 <script lang="ts">
@@ -93,7 +113,8 @@ export default class ResourceSelector extends Vue {
       {
         id: this.initialResource.id,
         title: this.initialResource.title,
-        parent: this.resource && this.resource.path === "/" ? null : this.resource,
+        parent:
+          this.resource && this.resource.path === "/" ? null : this.resource,
         path: this.initialResource.path,
       },
       this.initialResource.parent
@@ -105,7 +126,9 @@ export default class ResourceSelector extends Vue {
       (this.initialResource.parent &&
         this.resource &&
         this.initialResource.parent.path === this.resource.path) ||
-      (this.initialResource.parent === undefined && this.resource && this.resource.path === "/")
+      (this.initialResource.parent === undefined &&
+        this.resource &&
+        this.resource.path === "/")
     );
   }
 }
diff --git a/js/src/components/Settings/NotificationsOnboarding.vue b/js/src/components/Settings/NotificationsOnboarding.vue
index 065fd14a8..8714bb96d 100644
--- a/js/src/components/Settings/NotificationsOnboarding.vue
+++ b/js/src/components/Settings/NotificationsOnboarding.vue
@@ -15,16 +15,27 @@
         </p>
       </div>
       <div class="field">
-        <b-checkbox v-model="notificationOnDay" @input="updateSetting({ notificationOnDay })">
+        <b-checkbox
+          v-model="notificationOnDay"
+          @input="updateSetting({ notificationOnDay })"
+        >
           <strong>{{ $t("Notification on the day of the event") }}</strong>
           <p>
             {{
-              $t("We'll use your timezone settings to send a recap of the morning of the event.")
+              $t(
+                "We'll use your timezone settings to send a recap of the morning of the event."
+              )
             }}
           </p>
         </b-checkbox>
       </div>
-      <p>{{ $t("To activate more notifications, head over to the notification settings.") }}</p>
+      <p>
+        {{
+          $t(
+            "To activate more notifications, head over to the notification settings."
+          )
+        }}
+      </p>
     </section>
   </div>
 </template>
@@ -50,7 +61,11 @@ export default class NotificationsOnboarding extends mixins(Onboarding) {
     try {
       this.doUpdateSetting(variables);
     } catch (e) {
-      Snackbar.open({ message: e.message, type: "is-danger", position: "is-bottom" });
+      Snackbar.open({
+        message: e.message,
+        type: "is-danger",
+        position: "is-bottom",
+      });
     }
   }
 }
diff --git a/js/src/components/Settings/SettingsMenu.vue b/js/src/components/Settings/SettingsMenu.vue
index 09f713c1c..e6aa18ba3 100644
--- a/js/src/components/Settings/SettingsMenu.vue
+++ b/js/src/components/Settings/SettingsMenu.vue
@@ -1,18 +1,27 @@
 <template>
   <aside>
     <ul>
-      <SettingMenuSection :title="$t('Account')" :to="{ name: RouteName.ACCOUNT_SETTINGS }">
+      <SettingMenuSection
+        :title="$t('Account')"
+        :to="{ name: RouteName.ACCOUNT_SETTINGS }"
+      >
         <SettingMenuItem
           :title="this.$t('General')"
           :to="{ name: RouteName.ACCOUNT_SETTINGS_GENERAL }"
         />
-        <SettingMenuItem :title="$t('Preferences')" :to="{ name: RouteName.PREFERENCES }" />
+        <SettingMenuItem
+          :title="$t('Preferences')"
+          :to="{ name: RouteName.PREFERENCES }"
+        />
         <SettingMenuItem
           :title="this.$t('Email notifications')"
           :to="{ name: RouteName.NOTIFICATIONS }"
         />
       </SettingMenuSection>
-      <SettingMenuSection :title="$t('Profiles')" :to="{ name: RouteName.IDENTITIES }">
+      <SettingMenuSection
+        :title="$t('Profiles')"
+        :to="{ name: RouteName.IDENTITIES }"
+      >
         <SettingMenuItem
           v-for="profile in identities"
           :key="profile.preferredUsername"
@@ -22,7 +31,10 @@
             params: { identityName: profile.preferredUsername },
           }"
         />
-        <SettingMenuItem :title="$t('New profile')" :to="{ name: RouteName.CREATE_IDENTITY }" />
+        <SettingMenuItem
+          :title="$t('New profile')"
+          :to="{ name: RouteName.CREATE_IDENTITY }"
+        />
       </SettingMenuSection>
       <SettingMenuSection
         v-if="
@@ -33,23 +45,41 @@
         :title="$t('Moderation')"
         :to="{ name: RouteName.MODERATION }"
       >
-        <SettingMenuItem :title="$t('Reports')" :to="{ name: RouteName.REPORTS }" />
-        <SettingMenuItem :title="$t('Moderation log')" :to="{ name: RouteName.REPORT_LOGS }" />
+        <SettingMenuItem
+          :title="$t('Reports')"
+          :to="{ name: RouteName.REPORTS }"
+        />
+        <SettingMenuItem
+          :title="$t('Moderation log')"
+          :to="{ name: RouteName.REPORT_LOGS }"
+        />
         <SettingMenuItem :title="$t('Users')" :to="{ name: RouteName.USERS }" />
-        <SettingMenuItem :title="$t('Profiles')" :to="{ name: RouteName.PROFILES }" />
-        <SettingMenuItem :title="$t('Groups')" :to="{ name: RouteName.ADMIN_GROUPS }" />
+        <SettingMenuItem
+          :title="$t('Profiles')"
+          :to="{ name: RouteName.PROFILES }"
+        />
+        <SettingMenuItem
+          :title="$t('Groups')"
+          :to="{ name: RouteName.ADMIN_GROUPS }"
+        />
       </SettingMenuSection>
       <SettingMenuSection
         v-if="this.currentUser.role == ICurrentUserRole.ADMINISTRATOR"
         :title="$t('Admin')"
         :to="{ name: RouteName.ADMIN }"
       >
-        <SettingMenuItem :title="$t('Dashboard')" :to="{ name: RouteName.ADMIN_DASHBOARD }" />
+        <SettingMenuItem
+          :title="$t('Dashboard')"
+          :to="{ name: RouteName.ADMIN_DASHBOARD }"
+        />
         <SettingMenuItem
           :title="$t('Instance settings')"
           :to="{ name: RouteName.ADMIN_SETTINGS }"
         />
-        <SettingMenuItem :title="$t('Federation')" :to="{ name: RouteName.RELAYS }" />
+        <SettingMenuItem
+          :title="$t('Federation')"
+          :to="{ name: RouteName.RELAYS }"
+        />
       </SettingMenuSection>
     </ul>
   </aside>
@@ -71,7 +101,8 @@ import RouteName from "../../router/name";
   apollo: {
     identities: {
       query: IDENTITIES,
-      update: (data) => data.identities.map((identity: IPerson) => new Person(identity)),
+      update: (data) =>
+        data.identities.map((identity: IPerson) => new Person(identity)),
     },
     currentUser: CURRENT_USER_CLIENT,
   },
diff --git a/js/src/components/Settings/SettingsOnboarding.vue b/js/src/components/Settings/SettingsOnboarding.vue
index 2754e206a..4eaa5614f 100644
--- a/js/src/components/Settings/SettingsOnboarding.vue
+++ b/js/src/components/Settings/SettingsOnboarding.vue
@@ -39,7 +39,10 @@
               timezone,
             })
           }}
-          <b-message type="is-danger" v-if="!$apollo.loading && !supportedTimezone">
+          <b-message
+            type="is-danger"
+            v-if="!$apollo.loading && !supportedTimezone"
+          >
             {{ $t("Your timezone {timezone} isn't supported.", { timezone }) }}
           </b-message>
         </p>
diff --git a/js/src/components/Todo/CompactTodo.vue b/js/src/components/Todo/CompactTodo.vue
index 8386e9f68..d4476e12c 100644
--- a/js/src/components/Todo/CompactTodo.vue
+++ b/js/src/components/Todo/CompactTodo.vue
@@ -2,9 +2,10 @@
   <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>
+      <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" />
@@ -13,7 +14,9 @@
         <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 v-if="todo.assignedTo.domain">{{
+            `@${todo.assignedTo.domain}`
+          }}</span>
         </span>
       </span>
     </div>
@@ -53,7 +56,11 @@ export default class Todo extends Vue {
       });
       this.editMode = false;
     } catch (e) {
-      Snackbar.open({ message: e.message, type: "is-danger", position: "is-bottom" });
+      Snackbar.open({
+        message: e.message,
+        type: "is-danger",
+        position: "is-bottom",
+      });
     }
   }
 }
diff --git a/js/src/components/Todo/FullTodo.vue b/js/src/components/Todo/FullTodo.vue
index 9ccf2e9b7..b56a8c54b 100644
--- a/js/src/components/Todo/FullTodo.vue
+++ b/js/src/components/Todo/FullTodo.vue
@@ -36,7 +36,9 @@ export default class Todo extends Vue {
 
   editMode = false;
 
-  debounceUpdateTodo!: DebouncedFunc<(obj: Record<string, unknown>) => Promise<void>>;
+  debounceUpdateTodo!: DebouncedFunc<
+    (obj: Record<string, unknown>) => Promise<void>
+  >;
 
   // We put this in data because of issues like
   // https://github.com/vuejs/vue-class-component/issues/263
@@ -89,7 +91,11 @@ export default class Todo extends Vue {
       });
       this.editMode = false;
     } catch (e) {
-      Snackbar.open({ message: e.message, type: "is-danger", position: "is-bottom" });
+      Snackbar.open({
+        message: e.message,
+        type: "is-danger",
+        position: "is-bottom",
+      });
     }
   }
 }
diff --git a/js/src/components/User/AuthProvider.vue b/js/src/components/User/AuthProvider.vue
index eef213d76..f3817ef5e 100644
--- a/js/src/components/User/AuthProvider.vue
+++ b/js/src/components/User/AuthProvider.vue
@@ -7,7 +7,11 @@
     <b-icon :icon="oauthProvider.id" />
     <span>{{ SELECTED_PROVIDERS[oauthProvider.id] }}</span></a
   >
-  <a class="button is-light" :href="`/auth/${oauthProvider.id}`" v-else-if="isProviderSelected">
+  <a
+    class="button is-light"
+    :href="`/auth/${oauthProvider.id}`"
+    v-else-if="isProviderSelected"
+  >
     <b-icon icon="lock" />
     <span>{{ oauthProvider.label }}</span>
   </a>
diff --git a/js/src/components/Utils/RedirectWithAccount.vue b/js/src/components/Utils/RedirectWithAccount.vue
index bd1fa1c17..4cb6fedca 100644
--- a/js/src/components/Utils/RedirectWithAccount.vue
+++ b/js/src/components/Utils/RedirectWithAccount.vue
@@ -20,7 +20,9 @@
           </div>
           <vertical-divider :content="$t('Or')" />
           <div class="column">
-            <subtitle>{{ $t("I have an account on another Mobilizon instance.") }}</subtitle>
+            <subtitle>{{
+              $t("I have an account on another Mobilizon instance.")
+            }}</subtitle>
             <p>{{ $t("Other software may also support this.") }}</p>
             <p>{{ sentence }}</p>
             <form @submit.prevent="redirectToInstance">
@@ -34,7 +36,9 @@
                     :placeholder="$t('profile@instance')"
                   ></b-input>
                   <p class="control">
-                    <button class="button is-primary" type="submit">{{ $t("Go") }}</button>
+                    <button class="button is-primary" type="submit">
+                      {{ $t("Go") }}
+                    </button>
                   </p>
                 </b-field>
               </b-field>
@@ -80,14 +84,22 @@ export default class RedirectWithAccount extends Vue {
 
   async redirectToInstance(): Promise<void> {
     const [, host] = this.remoteActorAddress.split("@", 2);
-    const remoteInteractionURI = await this.webFingerFetch(host, this.remoteActorAddress);
+    const remoteInteractionURI = await this.webFingerFetch(
+      host,
+      this.remoteActorAddress
+    );
     window.open(remoteInteractionURI);
   }
 
-  private async webFingerFetch(hostname: string, identity: string): Promise<string> {
+  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}`)
+      await fetch(
+        `${scheme}://${hostname}/.well-known/webfinger?resource=acct:${identity}`
+      )
     ).json();
     if (data && Array.isArray(data.links)) {
       const link: { template: string } = data.links.find(
diff --git a/js/src/components/Utils/Subtitle.vue b/js/src/components/Utils/Subtitle.vue
index 6f88cc423..acf311ad1 100644
--- a/js/src/components/Utils/Subtitle.vue
+++ b/js/src/components/Utils/Subtitle.vue
@@ -21,7 +21,8 @@ h2 {
     display: inline;
     padding: 3px 8px;
     color: #3a384c;
-    font-family: "Liberation Sans", "Helvetica Neue", Roboto, Helvetica, Arial, serif;
+    font-family: "Liberation Sans", "Helvetica Neue", Roboto, Helvetica, Arial,
+      serif;
     font-weight: 400;
     font-size: 32px;
   }
diff --git a/js/src/filters/datetime.ts b/js/src/filters/datetime.ts
index b8056b44c..8813d963a 100644
--- a/js/src/filters/datetime.ts
+++ b/js/src/filters/datetime.ts
@@ -14,7 +14,10 @@ function formatDateString(value: string): string {
 }
 
 function formatTimeString(value: string): string {
-  return parseDateTime(value).toLocaleTimeString(undefined, { hour: "numeric", minute: "numeric" });
+  return parseDateTime(value).toLocaleTimeString(undefined, {
+    hour: "numeric",
+    minute: "numeric",
+  });
 }
 
 function formatDateTimeString(value: string, showTime = true): string {
diff --git a/js/src/filters/index.ts b/js/src/filters/index.ts
index 71339a88a..4caa1e3b4 100644
--- a/js/src/filters/index.ts
+++ b/js/src/filters/index.ts
@@ -1,5 +1,9 @@
 import nl2br from "@/filters/utils";
-import { formatDateString, formatTimeString, formatDateTimeString } from "./datetime";
+import {
+  formatDateString,
+  formatTimeString,
+  formatDateTimeString,
+} from "./datetime";
 
 export default {
   install(vue: any): void {
diff --git a/js/src/graphql/actor.ts b/js/src/graphql/actor.ts
index 04569100c..f3cb8c31d 100644
--- a/js/src/graphql/actor.ts
+++ b/js/src/graphql/actor.ts
@@ -65,7 +65,10 @@ export const GET_PERSON = gql`
       feedTokens {
         token
       }
-      organizedEvents(page: $organizedEventsPage, limit: $organizedEventsLimit) {
+      organizedEvents(
+        page: $organizedEventsPage
+        limit: $organizedEventsLimit
+      ) {
         total
         elements {
           id
@@ -442,7 +445,12 @@ export const CREATE_PERSON = gql`
 `;
 
 export const UPDATE_PERSON = gql`
-  mutation UpdatePerson($id: ID!, $name: String, $summary: String, $avatar: MediaInput) {
+  mutation UpdatePerson(
+    $id: ID!
+    $name: String
+    $summary: String
+    $avatar: MediaInput
+  ) {
     updatePerson(id: $id, name: $name, summary: $summary, avatar: $avatar) {
       id
       preferredUsername
@@ -469,7 +477,12 @@ export const DELETE_PERSON = gql`
  * Prefer CREATE_PERSON when creating another identity
  */
 export const REGISTER_PERSON = gql`
-  mutation($preferredUsername: String!, $name: String!, $summary: String!, $email: String!) {
+  mutation(
+    $preferredUsername: String!
+    $name: String!
+    $summary: String!
+    $email: String!
+  ) {
     registerPerson(
       preferredUsername: $preferredUsername
       name: $name
diff --git a/js/src/graphql/comment.ts b/js/src/graphql/comment.ts
index f0ce0c920..06b6d7a28 100644
--- a/js/src/graphql/comment.ts
+++ b/js/src/graphql/comment.ts
@@ -68,8 +68,16 @@ export const COMMENTS_THREADS = gql`
 `;
 
 export const CREATE_COMMENT_FROM_EVENT = gql`
-  mutation CreateCommentFromEvent($eventId: ID!, $text: String!, $inReplyToCommentId: ID) {
-    createComment(eventId: $eventId, text: $text, inReplyToCommentId: $inReplyToCommentId) {
+  mutation CreateCommentFromEvent(
+    $eventId: ID!
+    $text: String!
+    $inReplyToCommentId: ID
+  ) {
+    createComment(
+      eventId: $eventId
+      text: $text
+      inReplyToCommentId: $inReplyToCommentId
+    ) {
       ...CommentRecursive
     }
   }
diff --git a/js/src/graphql/search.ts b/js/src/graphql/search.ts
index 345648a8e..042fdf92e 100644
--- a/js/src/graphql/search.ts
+++ b/js/src/graphql/search.ts
@@ -42,8 +42,20 @@ export const SEARCH_EVENTS = gql`
 `;
 
 export const SEARCH_GROUPS = gql`
-  query SearchGroups($term: String, $location: String, $radius: Float, $page: Int, $limit: Int) {
-    searchGroups(term: $term, location: $location, radius: $radius, page: $page, limit: $limit) {
+  query SearchGroups(
+    $term: String
+    $location: String
+    $radius: Float
+    $page: Int
+    $limit: Int
+  ) {
+    searchGroups(
+      term: $term
+      location: $location
+      radius: $radius
+      page: $page
+      limit: $limit
+    ) {
       total
       elements {
         id
diff --git a/js/src/graphql/user.ts b/js/src/graphql/user.ts
index 4f85f388a..158be5e71 100644
--- a/js/src/graphql/user.ts
+++ b/js/src/graphql/user.ts
@@ -108,7 +108,12 @@ export const UPDATE_CURRENT_USER_CLIENT = gql`
     $isLoggedIn: Boolean!
     $role: UserRole!
   ) {
-    updateCurrentUser(id: $id, email: $email, isLoggedIn: $isLoggedIn, role: $role) @client
+    updateCurrentUser(
+      id: $id
+      email: $email
+      isLoggedIn: $isLoggedIn
+      role: $role
+    ) @client
   }
 `;
 
diff --git a/js/src/mixins/actor.ts b/js/src/mixins/actor.ts
index 779eae0a7..66e31af49 100644
--- a/js/src/mixins/actor.ts
+++ b/js/src/mixins/actor.ts
@@ -7,6 +7,8 @@ export default class ActorMixin extends Vue {
   static actorIsOrganizer(actor: IActor, event: IEvent): boolean {
     console.log("actorIsOrganizer actor", actor.id);
     console.log("actorIsOrganizer event", event);
-    return event.organizerActor !== undefined && actor.id === event.organizerActor.id;
+    return (
+      event.organizerActor !== undefined && actor.id === event.organizerActor.id
+    );
   }
 }
diff --git a/js/src/mixins/event.ts b/js/src/mixins/event.ts
index ef672c7c5..df3f65bf1 100644
--- a/js/src/mixins/event.ts
+++ b/js/src/mixins/event.ts
@@ -21,7 +21,9 @@ export default class EventMixin extends mixins(Vue) {
     anonymousParticipationConfirmed: boolean | null = null
   ): Promise<void> {
     try {
-      const { data: resultData } = await this.$apollo.mutate<{ leaveEvent: IParticipant }>({
+      const { data: resultData } = await this.$apollo.mutate<{
+        leaveEvent: IParticipant;
+      }>({
         mutation: LEAVE_EVENT,
         variables: {
           eventId: event.id,
@@ -33,14 +35,18 @@ export default class EventMixin extends mixins(Vue) {
           let participation;
 
           if (!token) {
-            const participationCachedData = store.readQuery<{ person: IPerson }>({
+            const participationCachedData = store.readQuery<{
+              person: IPerson;
+            }>({
               query: EVENT_PERSON_PARTICIPATION,
               variables: { eventId: event.id, actorId },
             });
             if (participationCachedData == null) return;
             const { person } = participationCachedData;
             if (person === null) {
-              console.error("Cannot update participation cache, because of null value.");
+              console.error(
+                "Cannot update participation cache, because of null value."
+              );
               return;
             }
             [participation] = person.participations.elements;
@@ -63,7 +69,10 @@ export default class EventMixin extends mixins(Vue) {
             console.error("Cannot update event cache, because of null value.");
             return;
           }
-          if (participation && participation.role === ParticipantRole.NOT_APPROVED) {
+          if (
+            participation &&
+            participation.role === ParticipantRole.NOT_APPROVED
+          ) {
             eventCached.participantStats.notApproved -= 1;
           } else if (anonymousParticipationConfirmed === false) {
             eventCached.participantStats.notConfirmed -= 1;
@@ -82,13 +91,19 @@ export default class EventMixin extends mixins(Vue) {
         this.participationCancelledMessage();
       }
     } catch (error) {
-      Snackbar.open({ message: error.message, type: "is-danger", position: "is-bottom" });
+      Snackbar.open({
+        message: error.message,
+        type: "is-danger",
+        position: "is-bottom",
+      });
       console.error(error);
     }
   }
 
   private participationCancelledMessage() {
-    this.$notifier.success(this.$t("You have cancelled your participation") as string);
+    this.$notifier.success(
+      this.$t("You have cancelled your participation") as string
+    );
   }
 
   protected async openDeleteEventModal(event: IEvent): Promise<void> {
@@ -97,21 +112,29 @@ export default class EventMixin extends mixins(Vue) {
     }
     const participantsLength = event.participantStats.participant;
     const prefix = participantsLength
-      ? this.$tc("There are {participants} participants.", event.participantStats.participant, {
-          participants: event.participantStats.participant,
-        })
+      ? this.$tc(
+          "There are {participants} participants.",
+          event.participantStats.participant,
+          {
+            participants: event.participantStats.participant,
+          }
+        )
       : "";
 
     this.$buefy.dialog.prompt({
       type: "is-danger",
       title: this.$t("Delete event") as string,
       message: `${prefix}
-        ${this.$t("Are you sure you want to delete this event? This action cannot be reverted.")}
+        ${this.$t(
+          "Are you sure you want to delete this event? This action cannot be reverted."
+        )}
         <br><br>
         ${this.$t('To confirm, type your event title "{eventTitle}"', {
           eventTitle: event.title,
         })}`,
-      confirmText: this.$t("Delete {eventTitle}", { eventTitle: event.title }) as string,
+      confirmText: this.$t("Delete {eventTitle}", {
+        eventTitle: event.title,
+      }) as string,
       inputAttrs: {
         placeholder: event.title,
         pattern: escapeRegExp(event.title),
@@ -139,13 +162,19 @@ export default class EventMixin extends mixins(Vue) {
       this.$emit("event-deleted", event.id);
 
       this.$buefy.notification.open({
-        message: this.$t("Event {eventTitle} deleted", { eventTitle }) as string,
+        message: this.$t("Event {eventTitle} deleted", {
+          eventTitle,
+        }) as string,
         type: "is-success",
         position: "is-bottom-right",
         duration: 5000,
       });
     } catch (error) {
-      Snackbar.open({ message: error.message, type: "is-danger", position: "is-bottom" });
+      Snackbar.open({
+        message: error.message,
+        type: "is-danger",
+        position: "is-bottom",
+      });
 
       console.error(error);
     }
diff --git a/js/src/mixins/group.ts b/js/src/mixins/group.ts
index db47fb957..0abd0bcd9 100644
--- a/js/src/mixins/group.ts
+++ b/js/src/mixins/group.ts
@@ -61,7 +61,10 @@ export default class GroupMixin extends Vue {
   }
 
   get isCurrentActorAGroupModerator(): boolean {
-    return this.hasCurrentActorThisRole([MemberRole.MODERATOR, MemberRole.ADMINISTRATOR]);
+    return this.hasCurrentActorThisRole([
+      MemberRole.MODERATOR,
+      MemberRole.ADMINISTRATOR,
+    ]);
   }
 
   hasCurrentActorThisRole(givenRole: string | string[]): boolean {
@@ -69,7 +72,8 @@ export default class GroupMixin extends Vue {
     return (
       this.person &&
       this.person.memberships.elements.some(
-        ({ parent: { id }, role }) => id === this.group.id && roles.includes(role)
+        ({ parent: { id }, role }) =>
+          id === this.group.id && roles.includes(role)
       )
     );
   }
diff --git a/js/src/mixins/identityEdition.ts b/js/src/mixins/identityEdition.ts
index 0669e99a1..5602529d1 100644
--- a/js/src/mixins/identityEdition.ts
+++ b/js/src/mixins/identityEdition.ts
@@ -9,10 +9,14 @@ export default class IdentityEditionMixin extends Mixins(Vue) {
   oldDisplayName: string | null = null;
 
   autoUpdateUsername(newDisplayName: string | null): void {
-    const oldUsername = IdentityEditionMixin.convertToUsername(this.oldDisplayName);
+    const oldUsername = IdentityEditionMixin.convertToUsername(
+      this.oldDisplayName
+    );
 
     if (this.identity.preferredUsername === oldUsername) {
-      this.identity.preferredUsername = IdentityEditionMixin.convertToUsername(newDisplayName);
+      this.identity.preferredUsername = IdentityEditionMixin.convertToUsername(
+        newDisplayName
+      );
     }
 
     this.oldDisplayName = newDisplayName;
diff --git a/js/src/mixins/onboarding.ts b/js/src/mixins/onboarding.ts
index 546e574ca..a4cbd608d 100644
--- a/js/src/mixins/onboarding.ts
+++ b/js/src/mixins/onboarding.ts
@@ -13,7 +13,9 @@ export default class Onboarding extends Vue {
 
   RouteName = RouteName;
 
-  protected async doUpdateSetting(variables: Record<string, unknown>): Promise<void> {
+  protected async doUpdateSetting(
+    variables: Record<string, unknown>
+  ): Promise<void> {
     await this.$apollo.mutate<{ setUserSettings: string }>({
       mutation: SET_USER_SETTINGS,
       variables,
diff --git a/js/src/mixins/relay.ts b/js/src/mixins/relay.ts
index 20d3238d6..0db4033a6 100644
--- a/js/src/mixins/relay.ts
+++ b/js/src/mixins/relay.ts
@@ -63,7 +63,10 @@ export default class RelayMixin extends Vue {
             relayFollowings: {
               __typename: previousResult.relayFollowings.__typename,
               total: previousResult.relayFollowings.total,
-              elements: [...previousResult.relayFollowings.elements, ...newFollowings],
+              elements: [
+                ...previousResult.relayFollowings.elements,
+                ...newFollowings,
+              ],
             },
           };
         },
@@ -88,7 +91,10 @@ export default class RelayMixin extends Vue {
             relayFollowers: {
               __typename: previousResult.relayFollowers.__typename,
               total: previousResult.relayFollowers.total,
-              elements: [...previousResult.relayFollowers.elements, ...newFollowers],
+              elements: [
+                ...previousResult.relayFollowers.elements,
+                ...newFollowers,
+              ],
             },
           };
         },
@@ -101,7 +107,8 @@ export default class RelayMixin extends Vue {
   static isInstance(actor: IActor): boolean {
     return (
       actor.type === ActorType.APPLICATION &&
-      (actor.preferredUsername === "relay" || actor.preferredUsername === actor.domain)
+      (actor.preferredUsername === "relay" ||
+        actor.preferredUsername === actor.domain)
     );
   }
 }
diff --git a/js/src/plugins/dateFns.ts b/js/src/plugins/dateFns.ts
index cf2114721..78c48dd02 100644
--- a/js/src/plugins/dateFns.ts
+++ b/js/src/plugins/dateFns.ts
@@ -7,7 +7,10 @@ declare module "vue/types/vue" {
   }
 }
 
-export function DateFnsPlugin(vue: typeof VueInstance, { locale }: { locale: string }): void {
+export function DateFnsPlugin(
+  vue: typeof VueInstance,
+  { locale }: { locale: string }
+): void {
   import(`date-fns/locale/${locale}/index.js`).then((localeEntity) => {
     VueInstance.prototype.$dateFnsLocale = localeEntity;
   });
diff --git a/js/src/registerServiceWorker.ts b/js/src/registerServiceWorker.ts
index ee1efbbf2..1473a0afc 100644
--- a/js/src/registerServiceWorker.ts
+++ b/js/src/registerServiceWorker.ts
@@ -23,7 +23,9 @@ if (process.env.NODE_ENV === "production") {
       console.log("New content is available; please refresh.");
     },
     offline() {
-      console.log("No internet connection found. App is running in offline mode.");
+      console.log(
+        "No internet connection found. App is running in offline mode."
+      );
     },
     error(error) {
       console.error("Error during service worker registration:", error);
diff --git a/js/src/router/actor.ts b/js/src/router/actor.ts
index 28c6e8669..f0a74f92d 100644
--- a/js/src/router/actor.ts
+++ b/js/src/router/actor.ts
@@ -1,4 +1,5 @@
 import { RouteConfig } from "vue-router";
+import { EsModuleComponent } from "vue/types/options";
 
 export enum ActorRouteName {
   GROUP = "Group",
@@ -11,20 +12,23 @@ export const actorRoutes: RouteConfig[] = [
   {
     path: "/groups/create",
     name: ActorRouteName.CREATE_GROUP,
-    component: () => import(/* webpackChunkName: "CreateGroup" */ "@/views/Group/Create.vue"),
+    component: (): Promise<EsModuleComponent> =>
+      import(/* webpackChunkName: "CreateGroup" */ "@/views/Group/Create.vue"),
     meta: { requiredAuth: true },
   },
   {
     path: "/@:preferredUsername",
     name: ActorRouteName.GROUP,
-    component: () => import(/* webpackChunkName: "Group" */ "@/views/Group/Group.vue"),
+    component: (): Promise<EsModuleComponent> =>
+      import(/* webpackChunkName: "Group" */ "@/views/Group/Group.vue"),
     props: true,
     meta: { requiredAuth: false },
   },
   {
     path: "/groups/me",
     name: ActorRouteName.MY_GROUPS,
-    component: () => import(/* webpackChunkName: "MyGroups" */ "@/views/Group/MyGroups.vue"),
+    component: (): Promise<EsModuleComponent> =>
+      import(/* webpackChunkName: "MyGroups" */ "@/views/Group/MyGroups.vue"),
     meta: { requiredAuth: true },
   },
 ];
diff --git a/js/src/router/discussion.ts b/js/src/router/discussion.ts
index e67d6d29d..3f1211e50 100644
--- a/js/src/router/discussion.ts
+++ b/js/src/router/discussion.ts
@@ -1,4 +1,5 @@
 import { RouteConfig } from "vue-router";
+import { EsModuleComponent } from "vue/types/options";
 
 export enum DiscussionRouteName {
   DISCUSSION_LIST = "DISCUSSION_LIST",
@@ -10,24 +11,30 @@ export const discussionRoutes: RouteConfig[] = [
   {
     path: "/@:preferredUsername/discussions",
     name: DiscussionRouteName.DISCUSSION_LIST,
-    component: () =>
-      import(/* webpackChunkName: "DiscussionsList" */ "@/views/Discussions/DiscussionsList.vue"),
+    component: (): Promise<EsModuleComponent> =>
+      import(
+        /* webpackChunkName: "DiscussionsList" */ "@/views/Discussions/DiscussionsList.vue"
+      ),
     props: true,
     meta: { requiredAuth: true },
   },
   {
     path: "/@:preferredUsername/discussions/new",
     name: DiscussionRouteName.CREATE_DISCUSSION,
-    component: () =>
-      import(/* webpackChunkName: "CreateDiscussion" */ "@/views/Discussions/Create.vue"),
+    component: (): Promise<EsModuleComponent> =>
+      import(
+        /* webpackChunkName: "CreateDiscussion" */ "@/views/Discussions/Create.vue"
+      ),
     props: true,
     meta: { requiredAuth: true },
   },
   {
     path: "/@:preferredUsername/c/:slug/:comment_id?",
     name: DiscussionRouteName.DISCUSSION,
-    component: () =>
-      import(/* webpackChunkName: "Discussion" */ "@/views/Discussions/Discussion.vue"),
+    component: (): Promise<EsModuleComponent> =>
+      import(
+        /* webpackChunkName: "Discussion" */ "@/views/Discussions/Discussion.vue"
+      ),
     props: true,
     meta: { requiredAuth: true },
   },
diff --git a/js/src/router/error.ts b/js/src/router/error.ts
index fc2f5af17..ade4e32b3 100644
--- a/js/src/router/error.ts
+++ b/js/src/router/error.ts
@@ -1,5 +1,6 @@
 import { beforeRegisterGuard } from "@/router/guards/register-guard";
 import { RouteConfig } from "vue-router";
+import { EsModuleComponent } from "vue/types/options";
 
 export enum ErrorRouteName {
   ERROR = "Error",
@@ -9,7 +10,8 @@ export const errorRoutes: RouteConfig[] = [
   {
     path: "/error",
     name: ErrorRouteName.ERROR,
-    component: () => import(/* webpackChunkName: "Error" */ "../views/Error.vue"),
+    component: (): Promise<EsModuleComponent> =>
+      import(/* webpackChunkName: "Error" */ "../views/Error.vue"),
     beforeEnter: beforeRegisterGuard,
   },
 ];
diff --git a/js/src/router/event.ts b/js/src/router/event.ts
index f443235f4..460714dc3 100644
--- a/js/src/router/event.ts
+++ b/js/src/router/event.ts
@@ -1,10 +1,16 @@
 import { RouteConfig, Route } from "vue-router";
+import { EsModuleComponent } from "vue/types/options";
 
-const participations = () =>
-  import(/* webpackChunkName: "participations" */ "@/views/Event/Participants.vue");
-const editEvent = () => import(/* webpackChunkName: "edit-event" */ "@/views/Event/Edit.vue");
-const event = () => import(/* webpackChunkName: "event" */ "@/views/Event/Event.vue");
-const myEvents = () => import(/* webpackChunkName: "my-events" */ "@/views/Event/MyEvents.vue");
+const participations = (): Promise<EsModuleComponent> =>
+  import(
+    /* webpackChunkName: "participations" */ "@/views/Event/Participants.vue"
+  );
+const editEvent = (): Promise<EsModuleComponent> =>
+  import(/* webpackChunkName: "edit-event" */ "@/views/Event/Edit.vue");
+const event = (): Promise<EsModuleComponent> =>
+  import(/* webpackChunkName: "event" */ "@/views/Event/Event.vue");
+const myEvents = (): Promise<EsModuleComponent> =>
+  import(/* webpackChunkName: "my-events" */ "@/views/Event/MyEvents.vue");
 
 export enum EventRouteName {
   EVENT_LIST = "EventList",
@@ -25,7 +31,8 @@ export const eventRoutes: RouteConfig[] = [
   {
     path: "/events/list/:location?",
     name: EventRouteName.EVENT_LIST,
-    component: () => import(/* webpackChunkName: "EventList" */ "@/views/Event/EventList.vue"),
+    component: (): Promise<EsModuleComponent> =>
+      import(/* webpackChunkName: "EventList" */ "@/views/Event/EventList.vue"),
     meta: { requiredAuth: false },
   },
   {
@@ -45,7 +52,9 @@ export const eventRoutes: RouteConfig[] = [
     name: EventRouteName.EDIT_EVENT,
     component: editEvent,
     meta: { requiredAuth: true },
-    props: (route: Route): Record<string, unknown> => ({ ...route.params, ...{ isUpdate: true } }),
+    props: (route: Route): Record<string, unknown> => {
+      return { ...route.params, ...{ isUpdate: true } };
+    },
   },
   {
     path: "/events/duplicate/:eventId",
@@ -74,31 +83,36 @@ export const eventRoutes: RouteConfig[] = [
   {
     path: "/events/:uuid/participate",
     name: EventRouteName.EVENT_PARTICIPATE_LOGGED_OUT,
-    component: () => import("../components/Participation/UnloggedParticipation.vue"),
+    component: (): Promise<EsModuleComponent> =>
+      import("../components/Participation/UnloggedParticipation.vue"),
     props: true,
   },
   {
     path: "/events/:uuid/participate/with-account",
     name: EventRouteName.EVENT_PARTICIPATE_WITH_ACCOUNT,
-    component: () => import("../components/Participation/ParticipationWithAccount.vue"),
+    component: (): Promise<EsModuleComponent> =>
+      import("../components/Participation/ParticipationWithAccount.vue"),
     props: true,
   },
   {
     path: "/events/:uuid/participate/without-account",
     name: EventRouteName.EVENT_PARTICIPATE_WITHOUT_ACCOUNT,
-    component: () => import("../components/Participation/ParticipationWithoutAccount.vue"),
+    component: (): Promise<EsModuleComponent> =>
+      import("../components/Participation/ParticipationWithoutAccount.vue"),
     props: true,
   },
   {
     path: "/participation/email/confirm/:token",
     name: EventRouteName.EVENT_PARTICIPATE_CONFIRM,
-    component: () => import("../components/Participation/ConfirmParticipation.vue"),
+    component: (): Promise<EsModuleComponent> =>
+      import("../components/Participation/ConfirmParticipation.vue"),
     props: true,
   },
   {
     path: "/tag/:tag",
     name: EventRouteName.TAG,
-    component: () => import(/* webpackChunkName: "Search" */ "@/views/Search.vue"),
+    component: (): Promise<EsModuleComponent> =>
+      import(/* webpackChunkName: "Search" */ "@/views/Search.vue"),
     props: true,
     meta: { requiredAuth: false },
   },
diff --git a/js/src/router/groups.ts b/js/src/router/groups.ts
index c7700ba88..ae3a92055 100644
--- a/js/src/router/groups.ts
+++ b/js/src/router/groups.ts
@@ -1,4 +1,5 @@
 import { RouteConfig, Route } from "vue-router";
+import { EsModuleComponent } from "vue/types/options";
 
 export enum GroupsRouteName {
   TODO_LISTS = "TODO_LISTS",
@@ -18,29 +19,33 @@ export enum GroupsRouteName {
   GROUP_JOIN = "GROUP_JOIN",
 }
 
-const resourceFolder = () => import("@/views/Resources/ResourceFolder.vue");
-const groupEvents = () =>
+const resourceFolder = (): Promise<EsModuleComponent> =>
+  import("@/views/Resources/ResourceFolder.vue");
+const groupEvents = (): Promise<EsModuleComponent> =>
   import(/* webpackChunkName: "groupEvents" */ "@/views/Event/GroupEvents.vue");
 
 export const groupsRoutes: RouteConfig[] = [
   {
     path: "/@:preferredUsername/todo-lists",
     name: GroupsRouteName.TODO_LISTS,
-    component: () => import("@/views/Todos/TodoLists.vue"),
+    component: (): Promise<EsModuleComponent> =>
+      import("@/views/Todos/TodoLists.vue"),
     props: true,
     meta: { requiredAuth: true },
   },
   {
     path: "/todo-lists/:id",
     name: GroupsRouteName.TODO_LIST,
-    component: () => import("@/views/Todos/TodoList.vue"),
+    component: (): Promise<EsModuleComponent> =>
+      import("@/views/Todos/TodoList.vue"),
     props: true,
     meta: { requiredAuth: true },
   },
   {
     path: "/todo/:todoId",
     name: GroupsRouteName.TODO,
-    component: () => import("@/views/Todos/Todo.vue"),
+    component: (): Promise<EsModuleComponent> =>
+      import("@/views/Todos/Todo.vue"),
     props: true,
     meta: { requiredAuth: true },
   },
@@ -60,7 +65,8 @@ export const groupsRoutes: RouteConfig[] = [
   },
   {
     path: "/@:preferredUsername/settings",
-    component: () => import("@/views/Group/Settings.vue"),
+    component: (): Promise<EsModuleComponent> =>
+      import("@/views/Group/Settings.vue"),
     props: true,
     meta: { requiredAuth: true },
     redirect: { name: GroupsRouteName.GROUP_PUBLIC_SETTINGS },
@@ -69,40 +75,49 @@ export const groupsRoutes: RouteConfig[] = [
       {
         path: "public",
         name: GroupsRouteName.GROUP_PUBLIC_SETTINGS,
-        component: () => import("../views/Group/GroupSettings.vue"),
+        component: (): Promise<EsModuleComponent> =>
+          import("../views/Group/GroupSettings.vue"),
       },
       {
         path: "members",
         name: GroupsRouteName.GROUP_MEMBERS_SETTINGS,
-        component: () => import("../views/Group/GroupMembers.vue"),
+        component: (): Promise<EsModuleComponent> =>
+          import("../views/Group/GroupMembers.vue"),
         props: true,
       },
     ],
   },
   {
     path: "/@:preferredUsername/p/new",
-    component: () => import("@/views/Posts/Edit.vue"),
+    component: (): Promise<EsModuleComponent> =>
+      import("@/views/Posts/Edit.vue"),
     props: true,
     name: GroupsRouteName.POST_CREATE,
     meta: { requiredAuth: true },
   },
   {
     path: "/p/:slug/edit",
-    component: () => import("@/views/Posts/Edit.vue"),
-    props: (route: Route) => ({ ...route.params, ...{ isUpdate: true } }),
+    component: (): Promise<EsModuleComponent> =>
+      import("@/views/Posts/Edit.vue"),
+    props: (route: Route): Record<string, unknown> => ({
+      ...route.params,
+      ...{ isUpdate: true },
+    }),
     name: GroupsRouteName.POST_EDIT,
     meta: { requiredAuth: true },
   },
   {
     path: "/p/:slug",
-    component: () => import("@/views/Posts/Post.vue"),
+    component: (): Promise<EsModuleComponent> =>
+      import("@/views/Posts/Post.vue"),
     props: true,
     name: GroupsRouteName.POST,
     meta: { requiredAuth: false },
   },
   {
     path: "/@:preferredUsername/p",
-    component: () => import("@/views/Posts/List.vue"),
+    component: (): Promise<EsModuleComponent> =>
+      import("@/views/Posts/List.vue"),
     props: true,
     name: GroupsRouteName.POSTS,
     meta: { requiredAuth: false },
@@ -116,7 +131,8 @@ export const groupsRoutes: RouteConfig[] = [
   },
   {
     path: "/@:preferredUsername/join",
-    component: () => import("@/components/Group/JoinGroupWithAccount.vue"),
+    component: (): Promise<EsModuleComponent> =>
+      import("@/components/Group/JoinGroupWithAccount.vue"),
     props: true,
     name: GroupsRouteName.GROUP_JOIN,
     meta: { requiredAuth: false },
diff --git a/js/src/router/index.ts b/js/src/router/index.ts
index 05a2e4276..ec0729879 100644
--- a/js/src/router/index.ts
+++ b/js/src/router/index.ts
@@ -49,7 +49,8 @@ const router = new Router({
     {
       path: "/search",
       name: RouteName.SEARCH,
-      component: () => import(/* webpackChunkName: "search" */ "../views/Search.vue"),
+      component: () =>
+        import(/* webpackChunkName: "search" */ "../views/Search.vue"),
       props: true,
       meta: { requiredAuth: false },
     },
@@ -62,7 +63,8 @@ const router = new Router({
     {
       path: "/about",
       name: RouteName.ABOUT,
-      component: () => import(/* webpackChunkName: "about" */ "@/views/About.vue"),
+      component: () =>
+        import(/* webpackChunkName: "about" */ "@/views/About.vue"),
       meta: { requiredAuth: false },
       redirect: { name: RouteName.ABOUT_INSTANCE },
       children: [
@@ -70,30 +72,40 @@ const router = new Router({
           path: "instance",
           name: RouteName.ABOUT_INSTANCE,
           component: () =>
-            import(/* webpackChunkName: "about" */ "@/views/About/AboutInstance.vue"),
+            import(
+              /* webpackChunkName: "about" */ "@/views/About/AboutInstance.vue"
+            ),
         },
         {
           path: "/terms",
           name: RouteName.TERMS,
-          component: () => import(/* webpackChunkName: "cookies" */ "@/views/About/Terms.vue"),
+          component: () =>
+            import(/* webpackChunkName: "cookies" */ "@/views/About/Terms.vue"),
           meta: { requiredAuth: false },
         },
         {
           path: "/privacy",
           name: RouteName.PRIVACY,
-          component: () => import(/* webpackChunkName: "cookies" */ "@/views/About/Privacy.vue"),
+          component: () =>
+            import(
+              /* webpackChunkName: "cookies" */ "@/views/About/Privacy.vue"
+            ),
           meta: { requiredAuth: false },
         },
         {
           path: "/rules",
           name: RouteName.RULES,
-          component: () => import(/* webpackChunkName: "cookies" */ "@/views/About/Rules.vue"),
+          component: () =>
+            import(/* webpackChunkName: "cookies" */ "@/views/About/Rules.vue"),
           meta: { requiredAuth: false },
         },
         {
           path: "/glossary",
           name: RouteName.GLOSSARY,
-          component: () => import(/* webpackChunkName: "cookies" */ "@/views/About/Glossary.vue"),
+          component: () =>
+            import(
+              /* webpackChunkName: "cookies" */ "@/views/About/Glossary.vue"
+            ),
           meta: { requiredAuth: false },
         },
       ],
@@ -101,20 +113,25 @@ const router = new Router({
     {
       path: "/interact",
       name: RouteName.INTERACT,
-      component: () => import(/* webpackChunkName: "cookies" */ "@/views/Interact.vue"),
+      component: () =>
+        import(/* webpackChunkName: "cookies" */ "@/views/Interact.vue"),
       meta: { requiredAuth: false },
     },
     {
       path: "/auth/:provider/callback",
       name: "auth-callback",
       component: () =>
-        import(/* webpackChunkName: "ProviderValidation" */ "@/views/User/ProviderValidation.vue"),
+        import(
+          /* webpackChunkName: "ProviderValidation" */ "@/views/User/ProviderValidation.vue"
+        ),
     },
     {
       path: "/welcome/:step?",
       name: RouteName.WELCOME_SCREEN,
       component: () =>
-        import(/* webpackChunkName: "WelcomeScreen" */ "@/views/User/SettingsOnboard.vue"),
+        import(
+          /* webpackChunkName: "WelcomeScreen" */ "@/views/User/SettingsOnboard.vue"
+        ),
       meta: { requiredAuth: true },
       props: (route) => {
         const step = Number.parseInt(route.params.step, 10);
@@ -127,7 +144,8 @@ const router = new Router({
     {
       path: "/404",
       name: RouteName.PAGE_NOT_FOUND,
-      component: () => import(/* webpackChunkName: "search" */ "../views/PageNotFound.vue"),
+      component: () =>
+        import(/* webpackChunkName: "search" */ "../views/PageNotFound.vue"),
       meta: { requiredAuth: false },
     },
     {
diff --git a/js/src/router/settings.ts b/js/src/router/settings.ts
index c4ddacf0c..26b453a04 100644
--- a/js/src/router/settings.ts
+++ b/js/src/router/settings.ts
@@ -1,4 +1,5 @@
 import { Route, RouteConfig } from "vue-router";
+import { EsModuleComponent } from "vue/types/options";
 
 export enum SettingsRouteName {
   SETTINGS = "SETTINGS",
@@ -30,7 +31,8 @@ export enum SettingsRouteName {
 export const settingsRoutes: RouteConfig[] = [
   {
     path: "/settings",
-    component: () => import(/* webpackChunkName: "Settings" */ "@/views/Settings.vue"),
+    component: (): Promise<EsModuleComponent> =>
+      import(/* webpackChunkName: "Settings" */ "@/views/Settings.vue"),
     props: true,
     meta: { requiredAuth: true },
     redirect: { name: SettingsRouteName.ACCOUNT_SETTINGS },
@@ -45,24 +47,30 @@ export const settingsRoutes: RouteConfig[] = [
       {
         path: "account/general",
         name: SettingsRouteName.ACCOUNT_SETTINGS_GENERAL,
-        component: () =>
-          import(/* webpackChunkName: "AccountSettings" */ "@/views/Settings/AccountSettings.vue"),
+        component: (): Promise<EsModuleComponent> =>
+          import(
+            /* webpackChunkName: "AccountSettings" */ "@/views/Settings/AccountSettings.vue"
+          ),
         props: true,
         meta: { requiredAuth: true },
       },
       {
         path: "preferences",
         name: SettingsRouteName.PREFERENCES,
-        component: () =>
-          import(/* webpackChunkName: "Preferences" */ "@/views/Settings/Preferences.vue"),
+        component: (): Promise<EsModuleComponent> =>
+          import(
+            /* webpackChunkName: "Preferences" */ "@/views/Settings/Preferences.vue"
+          ),
         props: true,
         meta: { requiredAuth: true },
       },
       {
         path: "notifications",
         name: SettingsRouteName.NOTIFICATIONS,
-        component: () =>
-          import(/* webpackChunkName: "Notifications" */ "@/views/Settings/Notifications.vue"),
+        component: (): Promise<EsModuleComponent> =>
+          import(
+            /* webpackChunkName: "Notifications" */ "@/views/Settings/Notifications.vue"
+          ),
         props: true,
         meta: { requiredAuth: true },
       },
@@ -75,61 +83,77 @@ export const settingsRoutes: RouteConfig[] = [
       {
         path: "admin/dashboard",
         name: SettingsRouteName.ADMIN_DASHBOARD,
-        component: () => import(/* webpackChunkName: "Dashboard" */ "@/views/Admin/Dashboard.vue"),
+        component: (): Promise<EsModuleComponent> =>
+          import(
+            /* webpackChunkName: "Dashboard" */ "@/views/Admin/Dashboard.vue"
+          ),
         meta: { requiredAuth: true },
       },
       {
         path: "admin/settings",
         name: SettingsRouteName.ADMIN_SETTINGS,
-        component: () =>
-          import(/* webpackChunkName: "AdminSettings" */ "@/views/Admin/Settings.vue"),
+        component: (): Promise<EsModuleComponent> =>
+          import(
+            /* webpackChunkName: "AdminSettings" */ "@/views/Admin/Settings.vue"
+          ),
         props: true,
         meta: { requiredAuth: true },
       },
       {
         path: "admin/users",
         name: SettingsRouteName.USERS,
-        component: () => import(/* webpackChunkName: "Users" */ "@/views/Admin/Users.vue"),
+        component: (): Promise<EsModuleComponent> =>
+          import(/* webpackChunkName: "Users" */ "@/views/Admin/Users.vue"),
         props: true,
         meta: { requiredAuth: true },
       },
       {
         path: "admin/users/:id",
         name: SettingsRouteName.ADMIN_USER_PROFILE,
-        component: () =>
-          import(/* webpackChunkName: "AdminUserProfile" */ "@/views/Admin/AdminUserProfile.vue"),
+        component: (): Promise<EsModuleComponent> =>
+          import(
+            /* webpackChunkName: "AdminUserProfile" */ "@/views/Admin/AdminUserProfile.vue"
+          ),
         props: true,
         meta: { requiredAuth: true },
       },
       {
         path: "admin/profiles",
         name: SettingsRouteName.PROFILES,
-        component: () =>
-          import(/* webpackChunkName: "AdminProfiles" */ "@/views/Admin/Profiles.vue"),
+        component: (): Promise<EsModuleComponent> =>
+          import(
+            /* webpackChunkName: "AdminProfiles" */ "@/views/Admin/Profiles.vue"
+          ),
         props: true,
         meta: { requiredAuth: true },
       },
       {
         path: "admin/profiles/:id",
         name: SettingsRouteName.ADMIN_PROFILE,
-        component: () =>
-          import(/* webpackChunkName: "AdminProfile" */ "@/views/Admin/AdminProfile.vue"),
+        component: (): Promise<EsModuleComponent> =>
+          import(
+            /* webpackChunkName: "AdminProfile" */ "@/views/Admin/AdminProfile.vue"
+          ),
         props: true,
         meta: { requiredAuth: true },
       },
       {
         path: "admin/groups",
         name: SettingsRouteName.ADMIN_GROUPS,
-        component: () =>
-          import(/* webpackChunkName: "GroupProfiles" */ "@/views/Admin/GroupProfiles.vue"),
+        component: (): Promise<EsModuleComponent> =>
+          import(
+            /* webpackChunkName: "GroupProfiles" */ "@/views/Admin/GroupProfiles.vue"
+          ),
         props: true,
         meta: { requiredAuth: true },
       },
       {
         path: "admin/groups/:id",
         name: SettingsRouteName.ADMIN_GROUP_PROFILE,
-        component: () =>
-          import(/* webpackChunkName: "AdminGroupProfile" */ "@/views/Admin/AdminGroupProfile.vue"),
+        component: (): Promise<EsModuleComponent> =>
+          import(
+            /* webpackChunkName: "AdminGroupProfile" */ "@/views/Admin/AdminGroupProfile.vue"
+          ),
         props: true,
         meta: { requiredAuth: true },
       },
@@ -137,21 +161,26 @@ export const settingsRoutes: RouteConfig[] = [
         path: "admin/relays",
         name: SettingsRouteName.RELAYS,
         redirect: { name: SettingsRouteName.RELAY_FOLLOWINGS },
-        component: () => import(/* webpackChunkName: "Follows" */ "@/views/Admin/Follows.vue"),
+        component: (): Promise<EsModuleComponent> =>
+          import(/* webpackChunkName: "Follows" */ "@/views/Admin/Follows.vue"),
         meta: { requiredAuth: true },
         children: [
           {
             path: "followings",
             name: SettingsRouteName.RELAY_FOLLOWINGS,
-            component: () =>
-              import(/* webpackChunkName: "Followings" */ "@/components/Admin/Followings.vue"),
+            component: (): Promise<EsModuleComponent> =>
+              import(
+                /* webpackChunkName: "Followings" */ "@/components/Admin/Followings.vue"
+              ),
             meta: { requiredAuth: true },
           },
           {
             path: "followers",
             name: SettingsRouteName.RELAY_FOLLOWERS,
-            component: () =>
-              import(/* webpackChunkName: "Followers" */ "@/components/Admin/Followers.vue"),
+            component: (): Promise<EsModuleComponent> =>
+              import(
+                /* webpackChunkName: "Followers" */ "@/components/Admin/Followers.vue"
+              ),
             meta: { requiredAuth: true },
           },
         ],
@@ -166,23 +195,30 @@ export const settingsRoutes: RouteConfig[] = [
       {
         path: "/moderation/reports/:filter?",
         name: SettingsRouteName.REPORTS,
-        component: () =>
-          import(/* webpackChunkName: "ReportList" */ "@/views/Moderation/ReportList.vue"),
+        component: (): Promise<EsModuleComponent> =>
+          import(
+            /* webpackChunkName: "ReportList" */ "@/views/Moderation/ReportList.vue"
+          ),
         props: true,
         meta: { requiredAuth: true },
       },
       {
         path: "/moderation/report/:reportId",
         name: SettingsRouteName.REPORT,
-        component: () => import(/* webpackChunkName: "Report" */ "@/views/Moderation/Report.vue"),
+        component: (): Promise<EsModuleComponent> =>
+          import(
+            /* webpackChunkName: "Report" */ "@/views/Moderation/Report.vue"
+          ),
         props: true,
         meta: { requiredAuth: true },
       },
       {
         path: "/moderation/logs",
         name: SettingsRouteName.REPORT_LOGS,
-        component: () =>
-          import(/* webpackChunkName: "ModerationLogs" */ "@/views/Moderation/Logs.vue"),
+        component: (): Promise<EsModuleComponent> =>
+          import(
+            /* webpackChunkName: "ModerationLogs" */ "@/views/Moderation/Logs.vue"
+          ),
         props: true,
         meta: { requiredAuth: true },
       },
@@ -195,7 +231,7 @@ export const settingsRoutes: RouteConfig[] = [
       {
         path: "/identity/create",
         name: SettingsRouteName.CREATE_IDENTITY,
-        component: () =>
+        component: (): Promise<EsModuleComponent> =>
           import(
             /* webpackChunkName: "EditIdentity" */ "@/views/Account/children/EditIdentity.vue"
           ),
@@ -208,7 +244,7 @@ export const settingsRoutes: RouteConfig[] = [
       {
         path: "/identity/update/:identityName?",
         name: SettingsRouteName.UPDATE_IDENTITY,
-        component: () =>
+        component: (): Promise<EsModuleComponent> =>
           import(
             /* webpackChunkName: "EditIdentity" */ "@/views/Account/children/EditIdentity.vue"
           ),
diff --git a/js/src/router/user.ts b/js/src/router/user.ts
index fd7ce296a..f58de04e1 100644
--- a/js/src/router/user.ts
+++ b/js/src/router/user.ts
@@ -1,5 +1,6 @@
 import { beforeRegisterGuard } from "@/router/guards/register-guard";
 import { Route, RouteConfig } from "vue-router";
+import { EsModuleComponent } from "vue/types/options";
 
 export enum UserRouteName {
   REGISTER = "Register",
@@ -16,7 +17,10 @@ export const userRoutes: RouteConfig[] = [
   {
     path: "/register/user",
     name: UserRouteName.REGISTER,
-    component: () => import(/* webpackChunkName: "RegisterUser" */ "@/views/User/Register.vue"),
+    component: (): Promise<EsModuleComponent> =>
+      import(
+        /* webpackChunkName: "RegisterUser" */ "@/views/User/Register.vue"
+      ),
     props: true,
     meta: { requiredAuth: false },
     beforeEnter: beforeRegisterGuard,
@@ -24,8 +28,10 @@ export const userRoutes: RouteConfig[] = [
   {
     path: "/register/profile",
     name: UserRouteName.REGISTER_PROFILE,
-    component: () =>
-      import(/* webpackChunkName: "RegisterProfile" */ "@/views/Account/Register.vue"),
+    component: (): Promise<EsModuleComponent> =>
+      import(
+        /* webpackChunkName: "RegisterProfile" */ "@/views/Account/Register.vue"
+      ),
     // We can only pass string values through params, therefore
     props: (route: Route): Record<string, unknown> => ({
       email: route.params.email,
@@ -36,46 +42,56 @@ export const userRoutes: RouteConfig[] = [
   {
     path: "/resend-instructions",
     name: UserRouteName.RESEND_CONFIRMATION,
-    component: () =>
-      import(/* webpackChunkName: "ResendConfirmation" */ "@/views/User/ResendConfirmation.vue"),
+    component: (): Promise<EsModuleComponent> =>
+      import(
+        /* webpackChunkName: "ResendConfirmation" */ "@/views/User/ResendConfirmation.vue"
+      ),
     props: true,
     meta: { requiresAuth: false },
   },
   {
     path: "/password-reset/send",
     name: UserRouteName.SEND_PASSWORD_RESET,
-    component: () =>
-      import(/* webpackChunkName: "SendPasswordReset" */ "@/views/User/SendPasswordReset.vue"),
+    component: (): Promise<EsModuleComponent> =>
+      import(
+        /* webpackChunkName: "SendPasswordReset" */ "@/views/User/SendPasswordReset.vue"
+      ),
     props: true,
     meta: { requiresAuth: false },
   },
   {
     path: "/password-reset/:token",
     name: UserRouteName.PASSWORD_RESET,
-    component: () =>
-      import(/* webpackChunkName: "PasswordReset" */ "@/views/User/PasswordReset.vue"),
+    component: (): Promise<EsModuleComponent> =>
+      import(
+        /* webpackChunkName: "PasswordReset" */ "@/views/User/PasswordReset.vue"
+      ),
     meta: { requiresAuth: false },
     props: true,
   },
   {
     path: "/validate/email/:token",
     name: UserRouteName.EMAIL_VALIDATE,
-    component: () =>
-      import(/* webpackChunkName: "EmailValidate" */ "@/views/User/EmailValidate.vue"),
+    component: (): Promise<EsModuleComponent> =>
+      import(
+        /* webpackChunkName: "EmailValidate" */ "@/views/User/EmailValidate.vue"
+      ),
     props: true,
     meta: { requiresAuth: false },
   },
   {
     path: "/validate/:token",
     name: UserRouteName.VALIDATE,
-    component: () => import(/* webpackChunkName: "Validate" */ "@/views/User/Validate.vue"),
+    component: (): Promise<EsModuleComponent> =>
+      import(/* webpackChunkName: "Validate" */ "@/views/User/Validate.vue"),
     props: true,
     meta: { requiresAuth: false },
   },
   {
     path: "/login",
     name: UserRouteName.LOGIN,
-    component: () => import(/* webpackChunkName: "Login" */ "@/views/User/Login.vue"),
+    component: (): Promise<EsModuleComponent> =>
+      import(/* webpackChunkName: "Login" */ "@/views/User/Login.vue"),
     props: true,
     meta: { requiredAuth: false },
   },
diff --git a/js/src/services/AnonymousParticipationStorage.ts b/js/src/services/AnonymousParticipationStorage.ts
index a8f376d3c..25f3e441f 100644
--- a/js/src/services/AnonymousParticipationStorage.ts
+++ b/js/src/services/AnonymousParticipationStorage.ts
@@ -27,9 +27,13 @@ function mapToJson(map: Map<any, any>): string {
 /**
  * Fetch existing anonymous participations saved inside this browser
  */
-function getLocalAnonymousParticipations(): Map<string, IAnonymousParticipation> {
+function getLocalAnonymousParticipations(): Map<
+  string,
+  IAnonymousParticipation
+> {
   return jsonToMap(
-    localStorage.getItem(ANONYMOUS_PARTICIPATIONS_LOCALSTORAGE_KEY) || mapToJson(new Map())
+    localStorage.getItem(ANONYMOUS_PARTICIPATIONS_LOCALSTORAGE_KEY) ||
+      mapToJson(new Map())
   );
 }
 
@@ -58,9 +62,14 @@ function insertLocalAnonymousParticipation(
   hashedUUID: string,
   participation: IAnonymousParticipation
 ) {
-  const participations = purgeOldParticipations(getLocalAnonymousParticipations());
+  const participations = purgeOldParticipations(
+    getLocalAnonymousParticipations()
+  );
   participations.set(hashedUUID, participation);
-  localStorage.setItem(ANONYMOUS_PARTICIPATIONS_LOCALSTORAGE_KEY, mapToJson(participations));
+  localStorage.setItem(
+    ANONYMOUS_PARTICIPATIONS_LOCALSTORAGE_KEY,
+    mapToJson(participations)
+  );
 }
 
 function buildExpiration(event: IEvent): Date {
@@ -82,12 +91,14 @@ async function addLocalUnconfirmedAnonymousParticipation(
   cancellationToken: string
 ): Promise<void> {
   /**
-   * We hash the event UUID so that we can't know which events an anonymous user goes by looking up it's localstorage
+   * We hash the event UUID so that we can't know which events
+   * an anonymous user goes by looking up it's localstorage
    */
   const hashedUUID = await digestMessage(event.uuid);
 
   /**
-   * We round expiration to first day of next 3 months so that it's difficult to find event from date
+   * We round expiration to first day of next 3 months so that
+   * it's difficult to find event from date
    */
   const expiration = buildExpiration(event);
   insertLocalAnonymousParticipation(hashedUUID, {
@@ -98,19 +109,28 @@ async function addLocalUnconfirmedAnonymousParticipation(
 }
 
 async function confirmLocalAnonymousParticipation(uuid: string): Promise<void> {
-  const participations = purgeOldParticipations(getLocalAnonymousParticipations());
+  const participations = purgeOldParticipations(
+    getLocalAnonymousParticipations()
+  );
   const hashedUUID = await digestMessage(uuid);
   const participation = participations.get(hashedUUID);
   if (participation) {
     participation.confirmed = true;
     participations.set(hashedUUID, participation);
-    localStorage.setItem(ANONYMOUS_PARTICIPATIONS_LOCALSTORAGE_KEY, mapToJson(participations));
+    localStorage.setItem(
+      ANONYMOUS_PARTICIPATIONS_LOCALSTORAGE_KEY,
+      mapToJson(participations)
+    );
   }
 }
 
-async function getParticipation(eventUUID: string): Promise<IAnonymousParticipation> {
+async function getParticipation(
+  eventUUID: string
+): Promise<IAnonymousParticipation> {
   const hashedUUID = await digestMessage(eventUUID);
-  const participation = purgeOldParticipations(getLocalAnonymousParticipations()).get(hashedUUID);
+  const participation = purgeOldParticipations(
+    getLocalAnonymousParticipations()
+  ).get(hashedUUID);
   if (participation) {
     return participation;
   }
@@ -122,15 +142,22 @@ async function isParticipatingInThisEvent(eventUUID: string): Promise<boolean> {
   return participation !== undefined && participation.confirmed;
 }
 
-async function getLeaveTokenForParticipation(eventUUID: string): Promise<string> {
+async function getLeaveTokenForParticipation(
+  eventUUID: string
+): Promise<string> {
   return (await getParticipation(eventUUID)).token;
 }
 
 async function removeAnonymousParticipation(eventUUID: string): Promise<void> {
   const hashedUUID = await digestMessage(eventUUID);
-  const participations = purgeOldParticipations(getLocalAnonymousParticipations());
+  const participations = purgeOldParticipations(
+    getLocalAnonymousParticipations()
+  );
   participations.delete(hashedUUID);
-  localStorage.setItem(ANONYMOUS_PARTICIPATIONS_LOCALSTORAGE_KEY, mapToJson(participations));
+  localStorage.setItem(
+    ANONYMOUS_PARTICIPATIONS_LOCALSTORAGE_KEY,
+    mapToJson(participations)
+  );
 }
 
 export {
diff --git a/js/src/types/actor/actor.model.ts b/js/src/types/actor/actor.model.ts
index b4f86e078..42b2680af 100644
--- a/js/src/types/actor/actor.model.ts
+++ b/js/src/types/actor/actor.model.ts
@@ -52,7 +52,9 @@ export class Actor implements IActor {
   }
 
   public displayName(): string {
-    return this.name != null && this.name !== "" ? this.name : this.usernameWithDomain();
+    return this.name != null && this.name !== ""
+      ? this.name
+      : this.usernameWithDomain();
   }
 }
 
diff --git a/js/src/types/address.model.ts b/js/src/types/address.model.ts
index a306a6f1c..6bc2f7052 100644
--- a/js/src/types/address.model.ts
+++ b/js/src/types/address.model.ts
@@ -60,7 +60,8 @@ export class Address implements IAddress {
     let alternativeName = "";
     let poiIcon: IPOIIcon = poiIcons.default;
     // Google Maps doesn't have a type
-    if (this.type == null && this.description === this.street) this.type = "house";
+    if (this.type == null && this.description === this.street)
+      this.type = "house";
 
     switch (this.type) {
       case "house":
@@ -81,8 +82,12 @@ export class Address implements IAddress {
       case "zone":
       case "city":
       case "administrative":
-        name = this.postalCode ? `${this.description} (${this.postalCode})` : this.description;
-        alternativeName = [this.region, this.country].filter((zone) => zone).join(", ");
+        name = this.postalCode
+          ? `${this.description} (${this.postalCode})`
+          : this.description;
+        alternativeName = [this.region, this.country]
+          .filter((zone) => zone)
+          .join(", ");
         poiIcon = poiIcons.defaultAdministrative;
         break;
       default:
diff --git a/js/src/types/discussions.ts b/js/src/types/discussions.ts
index d3b483b9b..a2a94ee80 100644
--- a/js/src/types/discussions.ts
+++ b/js/src/types/discussions.ts
@@ -41,7 +41,9 @@ export class Discussion implements IDiscussion {
     this.title = hash.title;
     this.comments = {
       total: hash.comments.total,
-      elements: hash.comments.elements.map((comment: IComment) => new CommentModel(comment)),
+      elements: hash.comments.elements.map(
+        (comment: IComment) => new CommentModel(comment)
+      ),
     };
     this.slug = hash.slug;
     this.creator = hash.creator;
diff --git a/js/src/types/event.model.ts b/js/src/types/event.model.ts
index f00d11501..e67b107f6 100644
--- a/js/src/types/event.model.ts
+++ b/js/src/types/event.model.ts
@@ -184,7 +184,9 @@ export class EventModel implements IEvent {
 
     this.onlineAddress = hash.onlineAddress;
     this.phoneAddress = hash.phoneAddress;
-    this.physicalAddress = hash.physicalAddress ? new Address(hash.physicalAddress) : undefined;
+    this.physicalAddress = hash.physicalAddress
+      ? new Address(hash.physicalAddress)
+      : undefined;
     this.participantStats = hash.participantStats;
 
     this.contacts = hash.contacts;
@@ -209,7 +211,8 @@ export class EventModel implements IEvent {
       phoneAddress: this.phoneAddress,
       physicalAddress: this.physicalAddress,
       options: this.options,
-      attributedToId: this.attributedTo && this.attributedTo.id ? this.attributedTo.id : null,
+      attributedToId:
+        this.attributedTo && this.attributedTo.id ? this.attributedTo.id : null,
       contacts: this.contacts.map(({ id }) => ({
         id,
       })),
diff --git a/js/src/typings/intl.d.ts b/js/src/typings/intl.d.ts
index 388dd5731..67603c218 100644
--- a/js/src/typings/intl.d.ts
+++ b/js/src/typings/intl.d.ts
@@ -11,7 +11,10 @@ declare namespace Intl {
   }
 
   class ListFormat {
-    constructor(locales?: Locale | Locales | undefined, options?: Partial<ListFormatOptions>);
+    constructor(
+      locales?: Locale | Locales | undefined,
+      options?: Partial<ListFormatOptions>
+    );
     public format: (items: string[]) => string;
   }
 }
diff --git a/js/src/typings/tiptap-commands.d.ts b/js/src/typings/tiptap-commands.d.ts
index f1586e3d0..9cdd88394 100644
--- a/js/src/typings/tiptap-commands.d.ts
+++ b/js/src/typings/tiptap-commands.d.ts
@@ -13,7 +13,11 @@ declare module "tiptap-commands" {
   }
 
   export interface CommandFunction {
-    (state: EditorState, dispatch: DispatchFn | undefined, view: EditorView): boolean;
+    (
+      state: EditorState,
+      dispatch: DispatchFn | undefined,
+      view: EditorView
+    ): boolean;
   }
 
   export function toggleWrap(type: NodeType): Command;
@@ -25,7 +29,10 @@ declare module "tiptap-commands" {
     joinPredicate?: (strs: string[], node: Node) => boolean
   ): InputRule;
 
-  export function toggleMark(type: MarkType, attrs?: { [key: string]: any }): Command;
+  export function toggleMark(
+    type: MarkType,
+    attrs?: { [key: string]: any }
+  ): Command;
 
   export function pasteRule(
     regexp: RegExp,
diff --git a/js/src/typings/tiptap.d.ts b/js/src/typings/tiptap.d.ts
index 3febea473..0202ba75a 100644
--- a/js/src/typings/tiptap.d.ts
+++ b/js/src/typings/tiptap.d.ts
@@ -76,7 +76,13 @@ declare module "tiptap" {
     parseOptions?: ParseOptions;
     /** defaults to true */
     injectCSS?: boolean;
-    onInit?: ({ view, state }: { view: EditorView; state: EditorState }) => void;
+    onInit?: ({
+      view,
+      state,
+    }: {
+      view: EditorView;
+      state: EditorState;
+    }) => void;
     onTransaction?: (event: EditorUpdateEvent) => void;
     onUpdate?: (event: EditorUpdateEvent) => void;
     onFocus?: ({
diff --git a/js/src/utils/auth.ts b/js/src/utils/auth.ts
index abd073437..4af15e4d5 100644
--- a/js/src/utils/auth.ts
+++ b/js/src/utils/auth.ts
@@ -37,11 +37,15 @@ export function saveActorData(obj: IPerson): void {
 }
 
 export function deleteUserData(): void {
-  [AUTH_USER_ID, AUTH_USER_EMAIL, AUTH_ACCESS_TOKEN, AUTH_REFRESH_TOKEN, AUTH_USER_ROLE].forEach(
-    (key) => {
-      localStorage.removeItem(key);
-    }
-  );
+  [
+    AUTH_USER_ID,
+    AUTH_USER_EMAIL,
+    AUTH_ACCESS_TOKEN,
+    AUTH_REFRESH_TOKEN,
+    AUTH_USER_ROLE,
+  ].forEach((key) => {
+    localStorage.removeItem(key);
+  });
 }
 
 export class NoIdentitiesException extends Error {}
@@ -62,7 +66,9 @@ export async function changeIdentity(
  * then fetch the current identities to set in cache
  * the current identity used
  */
-export async function initializeCurrentActor(apollo: ApolloClient<any>): Promise<void> {
+export async function initializeCurrentActor(
+  apollo: ApolloClient<any>
+): Promise<void> {
   const actorId = localStorage.getItem(AUTH_USER_ACTOR_ID);
 
   const result = await apollo.query({
@@ -75,14 +81,17 @@ export async function initializeCurrentActor(apollo: ApolloClient<any>): Promise
     throw new NoIdentitiesException();
   }
   const activeIdentity =
-    identities.find((identity: IPerson) => identity.id === actorId) || (identities[0] as IPerson);
+    identities.find((identity: IPerson) => identity.id === actorId) ||
+    (identities[0] as IPerson);
 
   if (activeIdentity) {
     await changeIdentity(apollo, activeIdentity);
   }
 }
 
-export async function logout(apollo: ApolloClient<NormalizedCacheObject>): Promise<void> {
+export async function logout(
+  apollo: ApolloClient<NormalizedCacheObject>
+): Promise<void> {
   await apollo.mutate({
     mutation: UPDATE_CURRENT_USER_CLIENT,
     variables: {
diff --git a/js/src/utils/i18n.ts b/js/src/utils/i18n.ts
index 30e2b06c7..e9a1c9f01 100644
--- a/js/src/utils/i18n.ts
+++ b/js/src/utils/i18n.ts
@@ -8,10 +8,14 @@ import langs from "../i18n/langs.json";
 const DEFAULT_LOCALE = "en_US";
 
 let language =
-  localStorage.getItem(USER_LOCALE) || (document.documentElement.getAttribute("lang") as string);
+  localStorage.getItem(USER_LOCALE) ||
+  (document.documentElement.getAttribute("lang") as string);
 language =
   language ||
-  ((window.navigator as any).userLanguage || window.navigator.language).replace(/-/, "_");
+  ((window.navigator as any).userLanguage || window.navigator.language).replace(
+    /-/,
+    "_"
+  );
 export const locale =
   language && Object.prototype.hasOwnProperty.call(langs, language)
     ? language
@@ -71,7 +75,9 @@ export async function loadLanguageAsync(lang: string): Promise<string> {
   }
   // If the language hasn't been loaded yet
   const newMessages = await import(
-    /* webpackChunkName: "lang-[request]" */ `@/i18n/${vueI18NfileForLanguage(lang)}.json`
+    /* webpackChunkName: "lang-[request]" */ `@/i18n/${vueI18NfileForLanguage(
+      lang
+    )}.json`
   );
   i18n.setLocaleMessage(lang, newMessages.default);
   loadedLanguages.push(lang);
@@ -82,7 +88,10 @@ loadLanguageAsync(locale);
 
 export function formatList(list: string[]): string {
   if (window.Intl && Intl.ListFormat) {
-    const formatter = new Intl.ListFormat(undefined, { style: "long", type: "conjunction" });
+    const formatter = new Intl.ListFormat(undefined, {
+      style: "long",
+      type: "conjunction",
+    });
     return formatter.format(list);
   }
   return list.join(",");
diff --git a/js/src/utils/image.ts b/js/src/utils/image.ts
index 996f8bcf3..561f2616d 100644
--- a/js/src/utils/image.ts
+++ b/js/src/utils/image.ts
@@ -1,6 +1,8 @@
 import { IMedia } from "@/types/media.model";
 
-export async function buildFileFromIMedia(obj: IMedia | null | undefined): Promise<File | null> {
+export async function buildFileFromIMedia(
+  obj: IMedia | null | undefined
+): Promise<File | null> {
   if (!obj) return Promise.resolve(null);
 
   const response = await fetch(obj.url);
@@ -27,7 +29,9 @@ export function buildFileVariable(
   };
 }
 
-export function readFileAsync(file: File): Promise<string | ArrayBuffer | null> {
+export function readFileAsync(
+  file: File
+): Promise<string | ArrayBuffer | null> {
   return new Promise((resolve, reject) => {
     const reader = new FileReader();
 
diff --git a/js/src/utils/username.ts b/js/src/utils/username.ts
index 91fa7dae4..2b51a4c0e 100644
--- a/js/src/utils/username.ts
+++ b/js/src/utils/username.ts
@@ -12,7 +12,10 @@ function convertToUsername(value: string | null): string {
     .replace(/[^a-z0-9_]/g, "");
 }
 
-function autoUpdateUsername(actor: IActor, newDisplayName: string | null): IActor {
+function autoUpdateUsername(
+  actor: IActor,
+  newDisplayName: string | null
+): IActor {
   const actor2 = { ...actor };
   const oldUsername = convertToUsername(actor.name);
 
diff --git a/js/src/views/About.vue b/js/src/views/About.vue
index 7a1c5bdac..e15166b4d 100644
--- a/js/src/views/About.vue
+++ b/js/src/views/About.vue
@@ -51,7 +51,9 @@
                 }}</router-link>
               </li>
               <li>
-                <router-link :to="{ name: RouteName.GLOSSARY }">{{ $t("Glossary") }}</router-link>
+                <router-link :to="{ name: RouteName.GLOSSARY }">{{
+                  $t("Glossary")
+                }}</router-link>
               </li>
             </ul>
           </aside>
@@ -79,9 +81,13 @@
             </div>
             <div class="column">
               <h2 class="title">{{ $t("Find another instance") }}</h2>
-              <b-button type="is-secondary" size="is-large" tag="a" href="https://mobilizon.org">{{
-                $t("Pick an instance")
-              }}</b-button>
+              <b-button
+                type="is-secondary"
+                size="is-large"
+                tag="a"
+                href="https://mobilizon.org"
+                >{{ $t("Pick an instance") }}</b-button
+              >
             </div>
           </div>
         </div>
diff --git a/js/src/views/About/AboutInstance.vue b/js/src/views/About/AboutInstance.vue
index bd3139989..a1b7db04d 100644
--- a/js/src/views/About/AboutInstance.vue
+++ b/js/src/views/About/AboutInstance.vue
@@ -26,9 +26,12 @@
       <div class="column contact">
         <h4>{{ $t("Contact") }}</h4>
         <p>
-          <a :title="config.contact" v-if="generateConfigLink()" :href="generateConfigLink().uri">{{
-            generateConfigLink().text
-          }}</a>
+          <a
+            :title="config.contact"
+            v-if="generateConfigLink()"
+            :href="generateConfigLink().uri"
+            >{{ generateConfigLink().text }}</a
+          >
           <span v-else-if="config.contact">{{ config.contact }}</span>
           <span v-else>{{ $t("contact uninformed") }}</span>
         </p>
@@ -44,7 +47,9 @@
       <table class="table is-fullwidth">
         <tr>
           <td>{{ $t("Instance languages") }}</td>
-          <td :title="this.config.languages.join(', ')">{{ formattedLanguageList }}</td>
+          <td :title="this.config.languages.join(', ')">
+            {{ formattedLanguageList }}
+          </td>
         </tr>
         <tr>
           <td>{{ $t("Mobilizon version") }}</td>
@@ -67,7 +72,9 @@
         </tr>
         <tr>
           <td>{{ $t("Anonymous participations") }}</td>
-          <td v-if="config.anonymous.participation.allowed">{{ $t("If allowed by organizer") }}</td>
+          <td v-if="config.anonymous.participation.allowed">
+            {{ $t("If allowed by organizer") }}
+          </td>
           <td v-else>{{ $t("Disabled") }}</td>
         </tr>
       </table>
@@ -132,12 +139,17 @@ export default class AboutInstance extends Vue {
   generateConfigLink(): { uri: string; text: string } | null {
     if (!this.config.contact) return null;
     if (this.isContactEmail) {
-      return { uri: `mailto:${this.config.contact}`, text: this.config.contact };
+      return {
+        uri: `mailto:${this.config.contact}`,
+        text: this.config.contact,
+      };
     }
     if (this.isContactURL) {
       return {
         uri: this.config.contact,
-        text: AboutInstance.urlToHostname(this.config.contact) || (this.$t("Contact") as string),
+        text:
+          AboutInstance.urlToHostname(this.config.contact) ||
+          (this.$t("Contact") as string),
       };
     }
     return null;
diff --git a/js/src/views/Account/IdentityPicker.vue b/js/src/views/Account/IdentityPicker.vue
index ec1a06057..f98de9581 100644
--- a/js/src/views/Account/IdentityPicker.vue
+++ b/js/src/views/Account/IdentityPicker.vue
@@ -19,7 +19,12 @@
               :src="identity.avatar.url"
               alt=""
             />
-            <b-icon class="media-left" v-else size="is-large" icon="account-circle" />
+            <b-icon
+              class="media-left"
+              v-else
+              size="is-large"
+              icon="account-circle"
+            />
             <div class="media-content">
               <h3>@{{ identity.preferredUsername }}</h3>
               <small>{{ identity.name }}</small>
diff --git a/js/src/views/Account/IdentityPickerWrapper.vue b/js/src/views/Account/IdentityPickerWrapper.vue
index cc9716d66..368b9ba4a 100644
--- a/js/src/views/Account/IdentityPickerWrapper.vue
+++ b/js/src/views/Account/IdentityPickerWrapper.vue
@@ -3,13 +3,20 @@
     <div
       v-if="inline"
       class="inline box"
-      :class="{ 'has-background-grey-lighter': masked, 'no-other-identity': !hasOtherIdentities }"
+      :class="{
+        'has-background-grey-lighter': masked,
+        'no-other-identity': !hasOtherIdentities,
+      }"
       @click="activateModal"
     >
       <div class="media">
         <div class="media-left">
           <figure class="image is-48x48" v-if="currentIdentity.avatar">
-            <img class="image is-rounded" :src="currentIdentity.avatar.url" alt="" />
+            <img
+              class="image is-rounded"
+              :src="currentIdentity.avatar.url"
+              alt=""
+            />
           </figure>
           <b-icon v-else size="is-large" icon="account-circle" />
         </div>
@@ -23,7 +30,11 @@
         <div class="media-content" v-else>
           {{ `@${currentIdentity.preferredUsername}` }}
         </div>
-        <b-button type="is-text" v-if="identities.length > 1" @click="activateModal">
+        <b-button
+          type="is-text"
+          v-if="identities.length > 1"
+          @click="activateModal"
+        >
           {{ $t("Change") }}
         </b-button>
       </div>
diff --git a/js/src/views/Account/Profile.vue b/js/src/views/Account/Profile.vue
index 9cd1b8e00..c2dbdbc1b 100644
--- a/js/src/views/Account/Profile.vue
+++ b/js/src/views/Account/Profile.vue
@@ -40,7 +40,12 @@
           </b-dropdown-item>
         </b-dropdown>
 
-        <b-dropdown hoverable has-link aria-role="list" v-if="person.feedTokens.length > 0">
+        <b-dropdown
+          hoverable
+          has-link
+          aria-role="list"
+          v-if="person.feedTokens.length > 0"
+        >
           <button class="button is-info" slot="trigger">
             {{ $t("Private feeds") }}
             <b-icon icon="menu-down"></b-icon>
@@ -57,7 +62,11 @@
             </a>
           </b-dropdown-item>
         </b-dropdown>
-        <a class="button" v-if="currentActor.id === person.id" @click="createToken">
+        <a
+          class="button"
+          v-if="currentActor.id === person.id"
+          @click="createToken"
+        >
           {{ $t("Create token") }}
         </a>
       </div>
diff --git a/js/src/views/Account/Register.vue b/js/src/views/Account/Register.vue
index 3d60c96bc..381b0c894 100644
--- a/js/src/views/Account/Register.vue
+++ b/js/src/views/Account/Register.vue
@@ -6,7 +6,11 @@
           {{ $t("Congratulations, your account is now created!") }}
         </h1>
         <h1 class="title" v-else>
-          {{ $t("Register an account on {instanceName}!", { instanceName: config.name }) }}
+          {{
+            $t("Register an account on {instanceName}!", {
+              instanceName: config.name,
+            })
+          }}
         </h1>
         <p class="content" v-if="userAlreadyActivated">
           {{ $t("Now, create your first profile:") }}
@@ -28,7 +32,9 @@
           >
             <b-field
               :message="
-                $t('Only alphanumeric lowercased characters and underscores are supported.')
+                $t(
+                  'Only alphanumeric lowercased characters and underscores are supported.'
+                )
               "
             >
               <b-input
@@ -38,7 +44,9 @@
                 v-model="identity.preferredUsername"
                 :validation-message="
                   identity.preferredUsername
-                    ? $t('Only alphanumeric lowercased characters and underscores are supported.')
+                    ? $t(
+                        'Only alphanumeric lowercased characters and underscores are supported.'
+                      )
                     : null
                 "
               />
@@ -48,11 +56,20 @@
             </b-field>
           </b-field>
           <p class="description">
-            {{ $t("This identifier is unique to your profile. It allows others to find you.") }}
+            {{
+              $t(
+                "This identifier is unique to your profile. It allows others to find you."
+              )
+            }}
           </p>
 
           <b-field :label="$t('Short bio')">
-            <b-input type="textarea" maxlength="100" rows="2" v-model="identity.summary" />
+            <b-input
+              type="textarea"
+              maxlength="100"
+              rows="2"
+              v-model="identity.summary"
+            />
           </b-field>
 
           <p class="content">
@@ -165,7 +182,10 @@ export default class Register extends mixins(identityEditionMixin) {
         window.localStorage.setItem("new-registered-user", "yes");
 
         if (this.userAlreadyActivated) {
-          await changeIdentity(this.$apollo.provider.defaultClient, data.registerPerson);
+          await changeIdentity(
+            this.$apollo.provider.defaultClient,
+            data.registerPerson
+          );
 
           await this.$router.push({ name: RouteName.HOME });
         }
diff --git a/js/src/views/Account/children/EditIdentity.vue b/js/src/views/Account/children/EditIdentity.vue
index bf0d9a08c..bb6c44dc5 100644
--- a/js/src/views/Account/children/EditIdentity.vue
+++ b/js/src/views/Account/children/EditIdentity.vue
@@ -3,7 +3,9 @@
     <nav class="breadcrumb" aria-label="breadcrumbs">
       <ul>
         <li>
-          <router-link :to="{ name: RouteName.IDENTITIES }">{{ $t("Profiles") }}</router-link>
+          <router-link :to="{ name: RouteName.IDENTITIES }">{{
+            $t("Profiles")
+          }}</router-link>
         </li>
         <li class="is-active" v-if="isUpdate && identity">
           <router-link
@@ -27,7 +29,11 @@
         <span v-else>{{ $t("I create an identity") }}</span>
       </h1>
 
-      <picture-upload v-model="avatarFile" :defaultImage="identity.avatar" class="picture-upload" />
+      <picture-upload
+        v-model="avatarFile"
+        :defaultImage="identity.avatar"
+        class="picture-upload"
+      />
 
       <b-field horizontal :label="$t('Display name')">
         <b-input
@@ -62,7 +68,11 @@
       </b-field>
 
       <b-field horizontal :label="$t('Description')">
-        <b-input type="textarea" aria-required="false" v-model="identity.summary" />
+        <b-input
+          type="textarea"
+          aria-required="false"
+          v-model="identity.summary"
+        />
       </b-field>
 
       <b-notification
@@ -84,7 +94,9 @@
       </b-field>
 
       <div class="delete-identity" v-if="isUpdate">
-        <span @click="openDeleteIdentityConfirmation()">{{ $t("Delete this identity") }}</span>
+        <span @click="openDeleteIdentityConfirmation()">{{
+          $t("Delete this identity")
+        }}</span>
       </div>
     </div>
   </div>
@@ -229,7 +241,9 @@ export default class EditIdentity extends mixins(identityEditionMixin) {
           });
 
           if (data) {
-            data.identities = data.identities.filter((i) => i.id !== this.identity.id);
+            data.identities = data.identities.filter(
+              (i) => i.id !== this.identity.id
+            );
 
             store.writeQuery({ query: IDENTITIES, data });
           }
@@ -242,7 +256,8 @@ export default class EditIdentity extends mixins(identityEditionMixin) {
         }) as string
       );
       /**
-       * If we just deleted the current identity, we need to change it to the next one
+       * If we just deleted the current identity,
+       * we need to change it to the next one
        */
       const data = this.$apollo.provider.defaultClient.readQuery<{
         identities: IPerson[];
@@ -270,7 +285,9 @@ export default class EditIdentity extends mixins(identityEditionMixin) {
           });
 
           if (data) {
-            const index = data.identities.findIndex((i) => i.id === this.identity.id);
+            const index = data.identities.findIndex(
+              (i) => i.id === this.identity.id
+            );
 
             this.$set(data.identities, index, updatePerson);
             this.maybeUpdateCurrentActorCache(updatePerson);
@@ -351,9 +368,12 @@ export default class EditIdentity extends mixins(identityEditionMixin) {
               "Otherwise this identity will just be removed from the group administrators."
             )}
             <br /><br />
-            ${this.$t('To confirm, type your identity username "{preferredUsername}"', {
-              preferredUsername: this.identity.preferredUsername,
-            })}`,
+            ${this.$t(
+              'To confirm, type your identity username "{preferredUsername}"',
+              {
+                preferredUsername: this.identity.preferredUsername,
+              }
+            )}`,
       confirmText: this.$t("Delete {preferredUsername}", {
         preferredUsername: this.identity.preferredUsername,
       }) as string,
@@ -406,7 +426,9 @@ export default class EditIdentity extends mixins(identityEditionMixin) {
 
   private async maybeUpdateCurrentActorCache(identity: IPerson) {
     if (this.currentActor) {
-      if (this.currentActor.preferredUsername === this.identity.preferredUsername) {
+      if (
+        this.currentActor.preferredUsername === this.identity.preferredUsername
+      ) {
         await changeIdentity(this.$apollo.provider.defaultClient, identity);
       }
       this.currentActor = identity;
diff --git a/js/src/views/Admin/AdminGroupProfile.vue b/js/src/views/Admin/AdminGroupProfile.vue
index 85407e5f1..261704193 100644
--- a/js/src/views/Admin/AdminGroupProfile.vue
+++ b/js/src/views/Admin/AdminGroupProfile.vue
@@ -3,7 +3,9 @@
     <nav class="breadcrumb" aria-label="breadcrumbs">
       <ul>
         <li>
-          <router-link :to="{ name: RouteName.ADMIN }">{{ $t("Admin") }}</router-link>
+          <router-link :to="{ name: RouteName.ADMIN }">{{
+            $t("Admin")
+          }}</router-link>
         </li>
         <li>
           <router-link
@@ -26,9 +28,17 @@
     </nav>
     <div class="actor-card">
       <router-link
-        :to="{ name: RouteName.GROUP, params: { preferredUsername: usernameWithDomain(group) } }"
+        :to="{
+          name: RouteName.GROUP,
+          params: { preferredUsername: usernameWithDomain(group) },
+        }"
       >
-        <actor-card :actor="group" :full="true" :popover="false" :limit="false" />
+        <actor-card
+          :actor="group"
+          :full="true"
+          :popover="false"
+          :limit="false"
+        />
       </router-link>
     </div>
     <table v-if="metadata.length > 0" class="table is-fullwidth">
@@ -45,15 +55,25 @@
       </tbody>
     </table>
     <div class="buttons">
-      <b-button @click="confirmSuspendProfile" v-if="!group.suspended" type="is-primary">{{
-        $t("Suspend")
-      }}</b-button>
-      <b-button @click="unsuspendProfile" v-if="group.suspended" type="is-primary">{{
-        $t("Unsuspend")
-      }}</b-button>
-      <b-button @click="refreshProfile" v-if="group.domain" type="is-primary" outlined>{{
-        $t("Refresh profile")
-      }}</b-button>
+      <b-button
+        @click="confirmSuspendProfile"
+        v-if="!group.suspended"
+        type="is-primary"
+        >{{ $t("Suspend") }}</b-button
+      >
+      <b-button
+        @click="unsuspendProfile"
+        v-if="group.suspended"
+        type="is-primary"
+        >{{ $t("Unsuspend") }}</b-button
+      >
+      <b-button
+        @click="refreshProfile"
+        v-if="group.domain"
+        type="is-primary"
+        outlined
+        >{{ $t("Refresh profile") }}</b-button
+      >
     </div>
     <section>
       <h2 class="subtitle">
@@ -72,15 +92,33 @@
         :per-page="EVENTS_PER_PAGE"
         @page-change="onMembersPageChange"
       >
-        <b-table-column field="actor.preferredUsername" :label="$t('Member')" v-slot="props">
+        <b-table-column
+          field="actor.preferredUsername"
+          :label="$t('Member')"
+          v-slot="props"
+        >
           <article class="media">
-            <figure class="media-left image is-48x48" v-if="props.row.actor.avatar">
-              <img class="is-rounded" :src="props.row.actor.avatar.url" alt="" />
+            <figure
+              class="media-left image is-48x48"
+              v-if="props.row.actor.avatar"
+            >
+              <img
+                class="is-rounded"
+                :src="props.row.actor.avatar.url"
+                alt=""
+              />
             </figure>
-            <b-icon class="media-left" v-else size="is-large" icon="account-circle" />
+            <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.name">{{ props.row.actor.name }}</span
+                <span v-if="props.row.actor.name">{{
+                  props.row.actor.name
+                }}</span
                 ><br />
                 <span class="is-size-7 has-text-grey"
                   >@{{ usernameWithDomain(props.row.actor) }}</span
@@ -90,22 +128,37 @@
           </article>
         </b-table-column>
         <b-table-column field="role" :label="$t('Role')" v-slot="props">
-          <b-tag type="is-primary" v-if="props.row.role === MemberRole.ADMINISTRATOR">
+          <b-tag
+            type="is-primary"
+            v-if="props.row.role === MemberRole.ADMINISTRATOR"
+          >
             {{ $t("Administrator") }}
           </b-tag>
-          <b-tag type="is-primary" v-else-if="props.row.role === MemberRole.MODERATOR">
+          <b-tag
+            type="is-primary"
+            v-else-if="props.row.role === MemberRole.MODERATOR"
+          >
             {{ $t("Moderator") }}
           </b-tag>
           <b-tag v-else-if="props.row.role === MemberRole.MEMBER">
             {{ $t("Member") }}
           </b-tag>
-          <b-tag type="is-warning" v-else-if="props.row.role === MemberRole.NOT_APPROVED">
+          <b-tag
+            type="is-warning"
+            v-else-if="props.row.role === MemberRole.NOT_APPROVED"
+          >
             {{ $t("Not approved") }}
           </b-tag>
-          <b-tag type="is-danger" v-else-if="props.row.role === MemberRole.REJECTED">
+          <b-tag
+            type="is-danger"
+            v-else-if="props.row.role === MemberRole.REJECTED"
+          >
             {{ $t("Rejected") }}
           </b-tag>
-          <b-tag type="is-danger" v-else-if="props.row.role === MemberRole.INVITED">
+          <b-tag
+            type="is-danger"
+            v-else-if="props.row.role === MemberRole.INVITED"
+          >
             {{ $t("Invited") }}
           </b-tag>
         </b-table-column>
@@ -143,11 +196,17 @@
         @page-change="onOrganizedEventsPageChange"
       >
         <b-table-column field="title" :label="$t('Title')" v-slot="props">
-          <router-link :to="{ name: RouteName.EVENT, params: { uuid: props.row.uuid } }">
+          <router-link
+            :to="{ name: RouteName.EVENT, params: { uuid: props.row.uuid } }"
+          >
             {{ props.row.title }}
           </router-link>
         </b-table-column>
-        <b-table-column field="beginsOn" :label="$t('Begins on')" v-slot="props">
+        <b-table-column
+          field="beginsOn"
+          :label="$t('Begins on')"
+          v-slot="props"
+        >
           {{ props.row.beginsOn | formatDateTimeString }}
         </b-table-column>
         <template slot="empty">
@@ -177,11 +236,17 @@
         @page-change="onPostsPageChange"
       >
         <b-table-column field="title" :label="$t('Title')" v-slot="props">
-          <router-link :to="{ name: RouteName.POST, params: { slug: props.row.slug } }">
+          <router-link
+            :to="{ name: RouteName.POST, params: { slug: props.row.slug } }"
+          >
             {{ props.row.title }}
           </router-link>
         </b-table-column>
-        <b-table-column field="publishAt" :label="$t('Publication date')" v-slot="props">
+        <b-table-column
+          field="publishAt"
+          :label="$t('Publication date')"
+          v-slot="props"
+        >
           {{ props.row.publishAt | formatDateTimeString }}
         </b-table-column>
         <template slot="empty">
@@ -254,11 +319,15 @@ export default class AdminGroupProfile extends Vue {
     const res: Record<string, string>[] = [
       {
         key: this.$t("Status") as string,
-        value: (this.group.suspended ? this.$t("Suspended") : this.$t("Active")) as string,
+        value: (this.group.suspended
+          ? this.$t("Suspended")
+          : this.$t("Active")) as string,
       },
       {
         key: this.$t("Domain") as string,
-        value: (this.group.domain ? this.group.domain : this.$t("Local")) as string,
+        value: (this.group.domain
+          ? this.group.domain
+          : this.$t("Local")) as string,
       },
       {
         key: this.$i18n.t("Uploaded media size") as string,
@@ -360,14 +429,18 @@ export default class AdminGroupProfile extends Vue {
       },
       updateQuery: (previousResult, { fetchMoreResult }) => {
         if (!fetchMoreResult) return previousResult;
-        const newOrganizedEvents = fetchMoreResult.group.organizedEvents.elements;
+        const newOrganizedEvents =
+          fetchMoreResult.group.organizedEvents.elements;
         return {
           group: {
             ...previousResult.group,
             organizedEvents: {
               __typename: previousResult.group.organizedEvents.__typename,
               total: previousResult.group.organizedEvents.total,
-              elements: [...previousResult.group.organizedEvents.elements, ...newOrganizedEvents],
+              elements: [
+                ...previousResult.group.organizedEvents.elements,
+                ...newOrganizedEvents,
+              ],
             },
           },
         };
@@ -392,7 +465,10 @@ export default class AdminGroupProfile extends Vue {
             members: {
               __typename: previousResult.group.members.__typename,
               total: previousResult.group.members.total,
-              elements: [...previousResult.group.members.elements, ...newMembers],
+              elements: [
+                ...previousResult.group.members.elements,
+                ...newMembers,
+              ],
             },
           },
         };
diff --git a/js/src/views/Admin/AdminProfile.vue b/js/src/views/Admin/AdminProfile.vue
index 8248ac97e..68b0221b7 100644
--- a/js/src/views/Admin/AdminProfile.vue
+++ b/js/src/views/Admin/AdminProfile.vue
@@ -3,7 +3,9 @@
     <nav class="breadcrumb" aria-label="breadcrumbs">
       <ul>
         <li>
-          <router-link :to="{ name: RouteName.ADMIN }">{{ $t("Admin") }}</router-link>
+          <router-link :to="{ name: RouteName.ADMIN }">{{
+            $t("Admin")
+          }}</router-link>
         </li>
         <li>
           <router-link
@@ -25,7 +27,12 @@
       </ul>
     </nav>
     <div class="actor-card">
-      <actor-card :actor="person" :full="true" :popover="false" :limit="false" />
+      <actor-card
+        :actor="person"
+        :full="true"
+        :popover="false"
+        :limit="false"
+      />
     </div>
     <table v-if="metadata.length > 0" class="table is-fullwidth">
       <tbody>
@@ -71,11 +78,17 @@
         :per-page="EVENTS_PER_PAGE"
         @page-change="onOrganizedEventsPageChange"
       >
-        <b-table-column field="beginsOn" :label="$t('Begins on')" v-slot="props">
+        <b-table-column
+          field="beginsOn"
+          :label="$t('Begins on')"
+          v-slot="props"
+        >
           {{ props.row.beginsOn | formatDateTimeString }}
         </b-table-column>
         <b-table-column field="title" :label="$t('Title')" v-slot="props">
-          <router-link :to="{ name: RouteName.EVENT, params: { uuid: props.row.uuid } }">
+          <router-link
+            :to="{ name: RouteName.EVENT, params: { uuid: props.row.uuid } }"
+          >
             {{ props.row.title }}
           </router-link>
         </b-table-column>
@@ -97,7 +110,11 @@
         }}
       </h2>
       <b-table
-        :data="person.participations.elements.map((participation) => participation.event)"
+        :data="
+          person.participations.elements.map(
+            (participation) => participation.event
+          )
+        "
         :loading="$apollo.queries.person.loading"
         paginated
         backend-pagination
@@ -105,11 +122,17 @@
         :per-page="EVENTS_PER_PAGE"
         @page-change="onParticipationsPageChange"
       >
-        <b-table-column field="beginsOn" :label="$t('Begins on')" v-slot="props">
+        <b-table-column
+          field="beginsOn"
+          :label="$t('Begins on')"
+          v-slot="props"
+        >
           {{ props.row.beginsOn | formatDateTimeString }}
         </b-table-column>
         <b-table-column field="title" :label="$t('Title')" v-slot="props">
-          <router-link :to="{ name: RouteName.EVENT, params: { uuid: props.row.uuid } }">
+          <router-link
+            :to="{ name: RouteName.EVENT, params: { uuid: props.row.uuid } }"
+          >
             {{ props.row.title }}
           </router-link>
         </b-table-column>
@@ -127,7 +150,11 @@
 <script lang="ts">
 import { Component, Vue, Prop } from "vue-property-decorator";
 import { formatBytes } from "@/utils/datetime";
-import { GET_PERSON, SUSPEND_PROFILE, UNSUSPEND_PROFILE } from "../../graphql/actor";
+import {
+  GET_PERSON,
+  SUSPEND_PROFILE,
+  UNSUSPEND_PROFILE,
+} from "../../graphql/actor";
 import { IPerson } from "../../types/actor";
 import { usernameWithDomain } from "../../types/actor/actor.model";
 import RouteName from "../../router/name";
@@ -190,7 +217,10 @@ export default class AdminProfile extends Vue {
     if (!this.person.domain && this.person.user) {
       res.push({
         key: this.$t("User") as string,
-        link: { name: RouteName.ADMIN_USER_PROFILE, params: { id: this.person.user.id } },
+        link: {
+          name: RouteName.ADMIN_USER_PROFILE,
+          params: { id: this.person.user.id },
+        },
         value: this.person.user.email,
       });
     }
@@ -263,14 +293,18 @@ export default class AdminProfile extends Vue {
       },
       updateQuery: (previousResult, { fetchMoreResult }) => {
         if (!fetchMoreResult) return previousResult;
-        const newOrganizedEvents = fetchMoreResult.person.organizedEvents.elements;
+        const newOrganizedEvents =
+          fetchMoreResult.person.organizedEvents.elements;
         return {
           person: {
             ...previousResult.person,
             organizedEvents: {
               __typename: previousResult.person.organizedEvents.__typename,
               total: previousResult.person.organizedEvents.total,
-              elements: [...previousResult.person.organizedEvents.elements, ...newOrganizedEvents],
+              elements: [
+                ...previousResult.person.organizedEvents.elements,
+                ...newOrganizedEvents,
+              ],
             },
           },
         };
@@ -288,14 +322,18 @@ export default class AdminProfile extends Vue {
       },
       updateQuery: (previousResult, { fetchMoreResult }) => {
         if (!fetchMoreResult) return previousResult;
-        const newParticipations = fetchMoreResult.person.participations.elements;
+        const newParticipations =
+          fetchMoreResult.person.participations.elements;
         return {
           person: {
             ...previousResult.person,
             participations: {
               __typename: previousResult.person.participations.__typename,
               total: previousResult.person.participations.total,
-              elements: [...previousResult.person.participations.elements, ...newParticipations],
+              elements: [
+                ...previousResult.person.participations.elements,
+                ...newParticipations,
+              ],
             },
           },
         };
diff --git a/js/src/views/Admin/AdminUserProfile.vue b/js/src/views/Admin/AdminUserProfile.vue
index 5a6ad751f..e5ee8784e 100644
--- a/js/src/views/Admin/AdminUserProfile.vue
+++ b/js/src/views/Admin/AdminUserProfile.vue
@@ -3,7 +3,9 @@
     <nav class="breadcrumb" aria-label="breadcrumbs">
       <ul>
         <li>
-          <router-link :to="{ name: RouteName.ADMIN }">{{ $t("Admin") }}</router-link>
+          <router-link :to="{ name: RouteName.ADMIN }">{{
+            $t("Admin")
+          }}</router-link>
         </li>
         <li>
           <router-link
@@ -29,10 +31,15 @@
         <tr v-for="{ key, value, link, elements, type } in metadata" :key="key">
           <td>{{ key }}</td>
           <td v-if="elements && elements.length > 0">
-            <ul v-for="{ value, link: elementLink, active } in elements" :key="value">
+            <ul
+              v-for="{ value, link: elementLink, active } in elements"
+              :key="value"
+            >
               <li>
                 <router-link :to="elementLink">
-                  <span v-if="active">{{ $t("{profile} (by default)", { profile: value }) }}</span>
+                  <span v-if="active">{{
+                    $t("{profile} (by default)", { profile: value })
+                  }}</span>
                   <span v-else>{{ value }}</span>
                 </router-link>
               </li>
@@ -54,9 +61,12 @@
       </tbody>
     </table>
     <div class="buttons">
-      <b-button @click="deleteAccount" v-if="!user.disabled" type="is-primary">{{
-        $t("Suspend")
-      }}</b-button>
+      <b-button
+        @click="deleteAccount"
+        v-if="!user.disabled"
+        type="is-primary"
+        >{{ $t("Suspend") }}</b-button
+      >
     </div>
   </div>
 </template>
@@ -113,7 +123,9 @@ export default class AdminUserProfile extends Vue {
       },
       {
         key: this.$i18n.t("Login status"),
-        value: this.user.disabled ? this.$i18n.t("Disabled") : this.$t("Activated"),
+        value: this.user.disabled
+          ? this.$i18n.t("Disabled")
+          : this.$t("Activated"),
       },
       {
         key: this.$i18n.t("Profiles"),
@@ -123,7 +135,9 @@ export default class AdminUserProfile extends Vue {
             value: actor.name
               ? `${actor.name} (${actor.preferredUsername})`
               : actor.preferredUsername,
-            active: this.user.defaultActor ? actor.id === this.user.defaultActor.id : false,
+            active: this.user.defaultActor
+              ? actor.id === this.user.defaultActor.id
+              : false,
           };
         }),
       },
@@ -138,7 +152,9 @@ export default class AdminUserProfile extends Vue {
         key: this.$i18n.t("Last sign-in"),
         value:
           this.$options.filters && this.user.currentSignInAt
-            ? this.$options.filters.formatDateTimeString(this.user.currentSignInAt)
+            ? this.$options.filters.formatDateTimeString(
+                this.user.currentSignInAt
+              )
             : this.$t("Unknown"),
       },
       {
diff --git a/js/src/views/Admin/Dashboard.vue b/js/src/views/Admin/Dashboard.vue
index c71866422..9c2d4d613 100644
--- a/js/src/views/Admin/Dashboard.vue
+++ b/js/src/views/Admin/Dashboard.vue
@@ -3,10 +3,14 @@
     <nav class="breadcrumb" aria-label="breadcrumbs">
       <ul>
         <li>
-          <router-link :to="{ name: RouteName.ADMIN }">{{ $t("Admin") }}</router-link>
+          <router-link :to="{ name: RouteName.ADMIN }">{{
+            $t("Admin")
+          }}</router-link>
         </li>
         <li class="is-active">
-          <router-link :to="{ name: RouteName.ADMIN_DASHBOARD }">{{ $t("Dashboard") }}</router-link>
+          <router-link :to="{ name: RouteName.ADMIN_DASHBOARD }">{{
+            $t("Dashboard")
+          }}</router-link>
         </li>
       </ul>
     </nav>
@@ -24,7 +28,8 @@
                       'Published events with <b>{comments}</b> comments and <b>{participations}</b> confirmed participations',
                       {
                         comments: dashboard.numberOfComments,
-                        participations: dashboard.numberOfConfirmedParticipationsToLocalEvents,
+                        participations:
+                          dashboard.numberOfConfirmedParticipationsToLocalEvents,
                       }
                     )
                   "
@@ -46,7 +51,9 @@
               </article>
               <article class="tile is-child box">
                 <router-link :to="{ name: RouteName.RELAY_FOLLOWERS }">
-                  <p class="dashboard-number">{{ dashboard.numberOfFollowers }}</p>
+                  <p class="dashboard-number">
+                    {{ dashboard.numberOfFollowers }}
+                  </p>
                   <p>{{ $t("Instances following you") }}</p>
                 </router-link>
               </article>
@@ -54,20 +61,27 @@
             <div class="tile is-parent is-vertical">
               <article class="tile is-child box">
                 <router-link :to="{ name: RouteName.REPORTS }">
-                  <p class="dashboard-number">{{ dashboard.numberOfReports }}</p>
+                  <p class="dashboard-number">
+                    {{ dashboard.numberOfReports }}
+                  </p>
                   <p>{{ $t("Opened reports") }}</p>
                 </router-link>
               </article>
               <article class="tile is-child box">
                 <router-link :to="{ name: RouteName.RELAY_FOLLOWINGS }">
-                  <p class="dashboard-number">{{ dashboard.numberOfFollowings }}</p>
+                  <p class="dashboard-number">
+                    {{ dashboard.numberOfFollowings }}
+                  </p>
                   <p>{{ $t("Instances you follow") }}</p>
                 </router-link>
               </article>
             </div>
           </div>
           <div class="tile">
-            <div class="tile is-parent is-vertical is-6" v-if="dashboard.lastPublicEventPublished">
+            <div
+              class="tile is-parent is-vertical is-6"
+              v-if="dashboard.lastPublicEventPublished"
+            >
               <article class="tile is-child box">
                 <router-link
                   :to="{
@@ -76,19 +90,33 @@
                   }"
                 >
                   <p>{{ $t("Last published event") }}</p>
-                  <p class="subtitle">{{ dashboard.lastPublicEventPublished.title }}</p>
-                  <figure class="image is-4by3" v-if="dashboard.lastPublicEventPublished.picture">
-                    <img :src="dashboard.lastPublicEventPublished.picture.url" />
+                  <p class="subtitle">
+                    {{ dashboard.lastPublicEventPublished.title }}
+                  </p>
+                  <figure
+                    class="image is-4by3"
+                    v-if="dashboard.lastPublicEventPublished.picture"
+                  >
+                    <img
+                      :src="dashboard.lastPublicEventPublished.picture.url"
+                    />
                   </figure>
                 </router-link>
               </article>
             </div>
-            <div class="tile is-parent is-vertical" v-if="dashboard.lastGroupCreated">
+            <div
+              class="tile is-parent is-vertical"
+              v-if="dashboard.lastGroupCreated"
+            >
               <article class="tile is-child box">
                 <router-link
                   :to="{
                     name: RouteName.GROUP,
-                    params: { preferredUsername: usernameWithDomain(dashboard.lastGroupCreated) },
+                    params: {
+                      preferredUsername: usernameWithDomain(
+                        dashboard.lastGroupCreated
+                      ),
+                    },
                   }"
                 >
                   <p>{{ $t("Last group created") }}</p>
@@ -98,7 +126,10 @@
                       dashboard.lastGroupCreated.preferredUsername
                     }}
                   </p>
-                  <figure class="image is-4by3" v-if="dashboard.lastGroupCreated.avatar">
+                  <figure
+                    class="image is-4by3"
+                    v-if="dashboard.lastGroupCreated.avatar"
+                  >
                     <img :src="dashboard.lastGroupCreated.avatar.url" />
                   </figure>
                 </router-link>
diff --git a/js/src/views/Admin/Follows.vue b/js/src/views/Admin/Follows.vue
index d63e5135e..4a7d007f3 100644
--- a/js/src/views/Admin/Follows.vue
+++ b/js/src/views/Admin/Follows.vue
@@ -3,10 +3,14 @@
     <nav class="breadcrumb" aria-label="breadcrumbs">
       <ul>
         <li>
-          <router-link :to="{ name: RouteName.ADMIN }">{{ $t("Admin") }}</router-link>
+          <router-link :to="{ name: RouteName.ADMIN }">{{
+            $t("Admin")
+          }}</router-link>
         </li>
         <li>
-          <router-link :to="{ name: RouteName.RELAYS }">{{ $t("Federation") }}</router-link>
+          <router-link :to="{ name: RouteName.RELAYS }">{{
+            $t("Federation")
+          }}</router-link>
         </li>
         <li class="is-active" v-if="$route.name == RouteName.RELAY_FOLLOWINGS">
           <router-link :to="{ name: RouteName.RELAY_FOLLOWINGS }">{{
@@ -14,7 +18,9 @@
           }}</router-link>
         </li>
         <li class="is-active" v-if="$route.name == RouteName.RELAY_FOLLOWERS">
-          <router-link :to="{ name: RouteName.RELAY_FOLLOWERS }">{{ $t("Followers") }}</router-link>
+          <router-link :to="{ name: RouteName.RELAY_FOLLOWERS }">{{
+            $t("Followers")
+          }}</router-link>
         </li>
       </ul>
     </nav>
diff --git a/js/src/views/Admin/GroupProfiles.vue b/js/src/views/Admin/GroupProfiles.vue
index ae0f9dc46..5ee1c757f 100644
--- a/js/src/views/Admin/GroupProfiles.vue
+++ b/js/src/views/Admin/GroupProfiles.vue
@@ -3,10 +3,14 @@
     <nav class="breadcrumb" aria-label="breadcrumbs">
       <ul>
         <li>
-          <router-link :to="{ name: RouteName.MODERATION }">{{ $t("Moderation") }}</router-link>
+          <router-link :to="{ name: RouteName.MODERATION }">{{
+            $t("Moderation")
+          }}</router-link>
         </li>
         <li class="is-active">
-          <router-link :to="{ name: RouteName.PROFILES }">{{ $t("Groups") }}</router-link>
+          <router-link :to="{ name: RouteName.PROFILES }">{{
+            $t("Groups")
+          }}</router-link>
         </li>
       </ul>
     </nav>
@@ -24,7 +28,11 @@
         @page-change="onPageChange"
         @filters-change="onFiltersChange"
       >
-        <b-table-column field="preferredUsername" :label="$t('Username')" searchable>
+        <b-table-column
+          field="preferredUsername"
+          :label="$t('Username')"
+          searchable
+        >
           <template slot="searchable" slot-scope="props">
             <b-input
               v-model="props.filters.preferredUsername"
@@ -36,7 +44,10 @@
           <template v-slot:default="props">
             <router-link
               class="profile"
-              :to="{ name: RouteName.ADMIN_GROUP_PROFILE, params: { id: props.row.id } }"
+              :to="{
+                name: RouteName.ADMIN_GROUP_PROFILE,
+                params: { id: props.row.id },
+              }"
             >
               <article class="media">
                 <figure class="media-left" v-if="props.row.avatar">
diff --git a/js/src/views/Admin/Profiles.vue b/js/src/views/Admin/Profiles.vue
index 8ca74cc71..fa8ba120c 100644
--- a/js/src/views/Admin/Profiles.vue
+++ b/js/src/views/Admin/Profiles.vue
@@ -3,10 +3,14 @@
     <nav class="breadcrumb" aria-label="breadcrumbs">
       <ul>
         <li>
-          <router-link :to="{ name: RouteName.MODERATION }">{{ $t("Moderation") }}</router-link>
+          <router-link :to="{ name: RouteName.MODERATION }">{{
+            $t("Moderation")
+          }}</router-link>
         </li>
         <li class="is-active">
-          <router-link :to="{ name: RouteName.PROFILES }">{{ $t("Profiles") }}</router-link>
+          <router-link :to="{ name: RouteName.PROFILES }">{{
+            $t("Profiles")
+          }}</router-link>
         </li>
       </ul>
     </nav>
@@ -24,7 +28,11 @@
         @page-change="onPageChange"
         @filters-change="onFiltersChange"
       >
-        <b-table-column field="preferredUsername" :label="$t('Username')" searchable>
+        <b-table-column
+          field="preferredUsername"
+          :label="$t('Username')"
+          searchable
+        >
           <template slot="searchable" slot-scope="props">
             <b-input
               v-model="props.filters.preferredUsername"
@@ -36,7 +44,10 @@
           <template v-slot:default="props">
             <router-link
               class="profile"
-              :to="{ name: RouteName.ADMIN_PROFILE, params: { id: props.row.id } }"
+              :to="{
+                name: RouteName.ADMIN_PROFILE,
+                params: { id: props.row.id },
+              }"
             >
               <article class="media">
                 <figure class="media-left" v-if="props.row.avatar">
diff --git a/js/src/views/Admin/Settings.vue b/js/src/views/Admin/Settings.vue
index a38b75474..031f32ef1 100644
--- a/js/src/views/Admin/Settings.vue
+++ b/js/src/views/Admin/Settings.vue
@@ -3,7 +3,9 @@
     <nav class="breadcrumb" aria-label="breadcrumbs">
       <ul>
         <li>
-          <router-link :to="{ name: RouteName.ADMIN }">{{ $t("Admin") }}</router-link>
+          <router-link :to="{ name: RouteName.ADMIN }">{{
+            $t("Admin")
+          }}</router-link>
         </li>
         <li class="is-active">
           <router-link :to="{ name: RouteName.ADMIN_SETTINGS }">{{
@@ -18,7 +20,9 @@
           <b-input v-model="adminSettings.instanceName" />
         </b-field>
         <div class="field">
-          <label class="label has-help">{{ $t("Instance Short Description") }}</label>
+          <label class="label has-help">{{
+            $t("Instance Short Description")
+          }}</label>
           <small>
             {{
               $t(
@@ -26,7 +30,11 @@
               )
             }}
           </small>
-          <b-input type="textarea" v-model="adminSettings.instanceDescription" rows="2" />
+          <b-input
+            type="textarea"
+            v-model="adminSettings.instanceDescription"
+            rows="2"
+          />
         </div>
         <div class="field">
           <label class="label has-help">{{ $t("Instance Slogan") }}</label>
@@ -76,7 +84,9 @@
           </b-taginput>
         </div>
         <div class="field">
-          <label class="label has-help">{{ $t("Instance Long Description") }}</label>
+          <label class="label has-help">{{
+            $t("Instance Long Description")
+          }}</label>
           <small>
             {{
               $t(
@@ -84,13 +94,19 @@
               )
             }}
           </small>
-          <b-input type="textarea" v-model="adminSettings.instanceLongDescription" rows="4" />
+          <b-input
+            type="textarea"
+            v-model="adminSettings.instanceLongDescription"
+            rows="4"
+          />
         </div>
         <div class="field">
           <label class="label has-help">{{ $t("Instance Rules") }}</label>
           <small>
             {{
-              $t("A place for your code of conduct, rules or guidelines. You can use HTML tags.")
+              $t(
+                "A place for your code of conduct, rules or guidelines. You can use HTML tags."
+              )
             }}
           </small>
           <b-input type="textarea" v-model="adminSettings.instanceRules" />
@@ -126,7 +142,9 @@
             <div class="column">
               <div
                 class="notification"
-                v-if="adminSettings.instanceTermsType === InstanceTermsType.DEFAULT"
+                v-if="
+                  adminSettings.instanceTermsType === InstanceTermsType.DEFAULT
+                "
               >
                 <b>{{ $t("Default") }}</b>
                 <i18n
@@ -153,11 +171,15 @@
                 v-if="adminSettings.instanceTermsType === InstanceTermsType.URL"
               >
                 <b>{{ $t("URL") }}</b>
-                <p class="content">{{ $t("Set an URL to a page with your own terms.") }}</p>
+                <p class="content">
+                  {{ $t("Set an URL to a page with your own terms.") }}
+                </p>
               </div>
               <div
                 class="notification"
-                v-if="adminSettings.instanceTermsType === InstanceTermsType.CUSTOM"
+                v-if="
+                  adminSettings.instanceTermsType === InstanceTermsType.CUSTOM
+                "
               >
                 <b>{{ $t("Custom") }}</b>
                 <i18n
@@ -221,7 +243,10 @@
             <div class="column">
               <div
                 class="notification"
-                v-if="adminSettings.instancePrivacyPolicyType === InstancePrivacyType.DEFAULT"
+                v-if="
+                  adminSettings.instancePrivacyPolicyType ===
+                  InstancePrivacyType.DEFAULT
+                "
               >
                 <b>{{ $t("Default") }}</b>
                 <i18n
@@ -240,7 +265,10 @@
               </div>
               <div
                 class="notification"
-                v-if="adminSettings.instancePrivacyPolicyType === InstancePrivacyType.URL"
+                v-if="
+                  adminSettings.instancePrivacyPolicyType ===
+                  InstancePrivacyType.URL
+                "
               >
                 <b>{{ $t("URL") }}</b>
                 <p class="content">
@@ -249,7 +277,10 @@
               </div>
               <div
                 class="notification"
-                v-if="adminSettings.instancePrivacyPolicyType === InstancePrivacyType.CUSTOM"
+                v-if="
+                  adminSettings.instancePrivacyPolicyType ===
+                  InstancePrivacyType.CUSTOM
+                "
               >
                 <b>{{ $t("Custom") }}</b>
                 <i18n
@@ -272,24 +303,41 @@
         </b-field>
         <b-field
           :label="$t('Instance Privacy Policy URL')"
-          v-if="adminSettings.instancePrivacyPolicyType === InstancePrivacyType.URL"
+          v-if="
+            adminSettings.instancePrivacyPolicyType === InstancePrivacyType.URL
+          "
         >
-          <b-input type="URL" v-model="adminSettings.instancePrivacyPolicyUrl" />
+          <b-input
+            type="URL"
+            v-model="adminSettings.instancePrivacyPolicyUrl"
+          />
         </b-field>
         <b-field
           :label="$t('Instance Privacy Policy')"
-          v-if="adminSettings.instancePrivacyPolicyType === InstancePrivacyType.CUSTOM"
+          v-if="
+            adminSettings.instancePrivacyPolicyType ===
+            InstancePrivacyType.CUSTOM
+          "
         >
-          <b-input type="textarea" v-model="adminSettings.instancePrivacyPolicy" />
+          <b-input
+            type="textarea"
+            v-model="adminSettings.instancePrivacyPolicy"
+          />
         </b-field>
-        <b-button native-type="submit" type="is-primary">{{ $t("Save") }}</b-button>
+        <b-button native-type="submit" type="is-primary">{{
+          $t("Save")
+        }}</b-button>
       </form>
     </section>
   </div>
 </template>
 <script lang="ts">
 import { Component, Vue, Watch } from "vue-property-decorator";
-import { ADMIN_SETTINGS, SAVE_ADMIN_SETTINGS, LANGUAGES } from "@/graphql/admin";
+import {
+  ADMIN_SETTINGS,
+  SAVE_ADMIN_SETTINGS,
+  LANGUAGES,
+} from "@/graphql/admin";
 import { InstancePrivacyType, InstanceTermsType } from "@/types/enums";
 import { IAdminSettings, ILanguage } from "../../types/admin.model";
 import RouteName from "../../router/name";
@@ -326,15 +374,19 @@ export default class Settings extends Vue {
     const variables = { ...this.adminSettings };
     // eslint-disable-next-line @typescript-eslint/ban-ts-comment
     // @ts-ignore
-    variables.instanceLanguages = variables.instanceLanguages.map((language) => {
-      return this.codeForLanguage(language);
-    });
+    variables.instanceLanguages = variables.instanceLanguages.map(
+      (language) => {
+        return this.codeForLanguage(language);
+      }
+    );
     try {
       await this.$apollo.mutate({
         mutation: SAVE_ADMIN_SETTINGS,
         variables,
       });
-      this.$notifier.success(this.$t("Admin settings successfully saved.") as string);
+      this.$notifier.success(
+        this.$t("Admin settings successfully saved.") as string
+      );
     } catch (e) {
       console.error(e);
       this.$notifier.error(this.$t("Failed to save admin settings") as string);
@@ -345,7 +397,12 @@ export default class Settings extends Vue {
     this.filteredLanguages = this.languages
       ? this.languages
           .filter((language: ILanguage) => {
-            return language.name.toString().toLowerCase().indexOf(text.toLowerCase()) >= 0;
+            return (
+              language.name
+                .toString()
+                .toLowerCase()
+                .indexOf(text.toLowerCase()) >= 0
+            );
           })
           .map(({ name }) => name)
       : [];
diff --git a/js/src/views/Admin/Users.vue b/js/src/views/Admin/Users.vue
index b9f7a225f..ff647f011 100644
--- a/js/src/views/Admin/Users.vue
+++ b/js/src/views/Admin/Users.vue
@@ -3,10 +3,14 @@
     <nav class="breadcrumb" aria-label="breadcrumbs">
       <ul>
         <li>
-          <router-link :to="{ name: RouteName.MODERATION }">{{ $t("Moderation") }}</router-link>
+          <router-link :to="{ name: RouteName.MODERATION }">{{
+            $t("Moderation")
+          }}</router-link>
         </li>
         <li class="is-active">
-          <router-link :to="{ name: RouteName.USERS }">{{ $t("Users") }}</router-link>
+          <router-link :to="{ name: RouteName.USERS }">{{
+            $t("Users")
+          }}</router-link>
         </li>
       </ul>
     </nav>
@@ -40,7 +44,10 @@
           <template v-slot:default="props">
             <router-link
               class="user-profile"
-              :to="{ name: RouteName.ADMIN_USER_PROFILE, params: { id: props.row.id } }"
+              :to="{
+                name: RouteName.ADMIN_USER_PROFILE,
+                params: { id: props.row.id },
+              }"
               :class="{ disabled: props.row.disabled }"
             >
               {{ props.row.email }}
@@ -60,7 +67,12 @@
             {{ $t("Not confirmed") }}
           </template>
         </b-table-column>
-        <b-table-column field="locale" :label="$t('Language')" :centered="true" v-slot="props">
+        <b-table-column
+          field="locale"
+          :label="$t('Language')"
+          :centered="true"
+          v-slot="props"
+        >
           {{ props.row.locale }}
         </b-table-column>
 
diff --git a/js/src/views/Discussions/Create.vue b/js/src/views/Discussions/Create.vue
index be35210bd..adec42d16 100644
--- a/js/src/views/Discussions/Create.vue
+++ b/js/src/views/Discussions/Create.vue
@@ -11,7 +11,9 @@
         <editor v-model="discussion.text" />
       </b-field>
 
-      <button class="button is-primary" type="submit">{{ $t("Create the discussion") }}</button>
+      <button class="button is-primary" type="submit">
+        {{ $t("Create the discussion") }}
+      </button>
     </form>
   </section>
 </template>
@@ -26,7 +28,8 @@ import RouteName from "../../router/name";
 
 @Component({
   components: {
-    editor: () => import(/* webpackChunkName: "editor" */ "@/components/Editor.vue"),
+    editor: () =>
+      import(/* webpackChunkName: "editor" */ "@/components/Editor.vue"),
   },
   apollo: {
     currentActor: CURRENT_ACTOR_CLIENT,
diff --git a/js/src/views/Discussions/Discussion.vue b/js/src/views/Discussions/Discussion.vue
index fa50209d2..3524265dd 100644
--- a/js/src/views/Discussions/Discussion.vue
+++ b/js/src/views/Discussions/Discussion.vue
@@ -3,14 +3,18 @@
     <nav class="breadcrumb" aria-label="breadcrumbs">
       <ul>
         <li>
-          <router-link :to="{ name: RouteName.MY_GROUPS }">{{ $t("My groups") }}</router-link>
+          <router-link :to="{ name: RouteName.MY_GROUPS }">{{
+            $t("My groups")
+          }}</router-link>
         </li>
         <li>
           <router-link
             v-if="discussion.actor"
             :to="{
               name: RouteName.GROUP,
-              params: { preferredUsername: usernameWithDomain(discussion.actor) },
+              params: {
+                preferredUsername: usernameWithDomain(discussion.actor),
+              },
             }"
             >{{ discussion.actor.name }}</router-link
           >
@@ -21,16 +25,19 @@
             v-if="discussion.actor"
             :to="{
               name: RouteName.DISCUSSION_LIST,
-              params: { preferredUsername: usernameWithDomain(discussion.actor) },
+              params: {
+                preferredUsername: usernameWithDomain(discussion.actor),
+              },
             }"
             >{{ $t("Discussions") }}</router-link
           >
           <b-skeleton animated v-else />
         </li>
         <li class="is-active">
-          <router-link :to="{ name: RouteName.DISCUSSION, params: { id: discussion.id } }">{{
-            discussion.title
-          }}</router-link>
+          <router-link
+            :to="{ name: RouteName.DISCUSSION, params: { id: discussion.id } }"
+            >{{ discussion.title }}</router-link
+          >
         </li>
       </ul>
     </nav>
@@ -39,7 +46,10 @@
         <h2 class="title" v-if="discussion.title && !editTitleMode">
           {{ discussion.title }}
           <span
-            v-if="currentActor.id === discussion.creator.id || isCurrentActorAGroupModerator"
+            v-if="
+              currentActor.id === discussion.creator.id ||
+              isCurrentActorAGroupModerator
+            "
             @click="
               () => {
                 newTitle = discussion.title;
@@ -54,7 +64,11 @@
         <form v-else @submit.prevent="updateDiscussion" class="title-edit">
           <b-input :value="discussion.title" v-model="newTitle" />
           <div class="buttons">
-            <b-button type="is-primary" native-type="submit" icon-right="check" />
+            <b-button
+              type="is-primary"
+              native-type="submit"
+              icon-right="check"
+            />
             <b-button
               @click="
                 () => {
@@ -151,7 +165,8 @@ import { IComment } from "../../types/comment.model";
           if (
             !previousDiscussion.comments.elements.find(
               (comment: IComment) =>
-                comment.id === subscriptionData.data.discussionCommentChanged.lastComment.id
+                comment.id ===
+                subscriptionData.data.discussionCommentChanged.lastComment.id
             )
           ) {
             previousDiscussion.lastComment =
@@ -169,7 +184,8 @@ import { IComment } from "../../types/comment.model";
   },
   components: {
     DiscussionComment,
-    editor: () => import(/* webpackChunkName: "editor" */ "@/components/Editor.vue"),
+    editor: () =>
+      import(/* webpackChunkName: "editor" */ "@/components/Editor.vue"),
   },
   metaInfo() {
     return {
@@ -382,7 +398,9 @@ export default class discussion extends mixins(GroupMixin) {
     if (this.discussion.actor) {
       this.$router.push({
         name: RouteName.DISCUSSION_LIST,
-        params: { preferredUsername: usernameWithDomain(this.discussion.actor) },
+        params: {
+          preferredUsername: usernameWithDomain(this.discussion.actor),
+        },
       });
     }
   }
@@ -403,12 +421,15 @@ export default class discussion extends mixins(GroupMixin) {
 
   handleScroll(): void {
     const scrollTop =
-      (document.documentElement && document.documentElement.scrollTop) || document.body.scrollTop;
+      (document.documentElement && document.documentElement.scrollTop) ||
+      document.body.scrollTop;
     const scrollHeight =
       (document.documentElement && document.documentElement.scrollHeight) ||
       document.body.scrollHeight;
-    const clientHeight = document.documentElement.clientHeight || window.innerHeight;
-    const scrolledToBottom = Math.ceil(scrollTop + clientHeight + 800) >= scrollHeight;
+    const clientHeight =
+      document.documentElement.clientHeight || window.innerHeight;
+    const scrolledToBottom =
+      Math.ceil(scrollTop + clientHeight + 800) >= scrollHeight;
     if (scrolledToBottom) {
       this.loadMoreComments();
     }
diff --git a/js/src/views/Discussions/DiscussionsList.vue b/js/src/views/Discussions/DiscussionsList.vue
index b28de1b53..3829399e7 100644
--- a/js/src/views/Discussions/DiscussionsList.vue
+++ b/js/src/views/Discussions/DiscussionsList.vue
@@ -3,7 +3,9 @@
     <nav class="breadcrumb" aria-label="breadcrumbs">
       <ul>
         <li>
-          <router-link :to="{ name: RouteName.MY_GROUPS }">{{ $t("My groups") }}</router-link>
+          <router-link :to="{ name: RouteName.MY_GROUPS }">{{
+            $t("My groups")
+          }}</router-link>
         </li>
         <li>
           <router-link
@@ -27,7 +29,11 @@
     </nav>
     <section>
       <p>
-        {{ $t("Keep the entire conversation about a specific topic together on a single page.") }}
+        {{
+          $t(
+            "Keep the entire conversation about a specific topic together on a single page."
+          )
+        }}
       </p>
       <b-button
         tag="router-link"
diff --git a/js/src/views/Event/Edit.vue b/js/src/views/Event/Edit.vue
index bd87b7fff..ddbe02510 100644
--- a/js/src/views/Event/Edit.vue
+++ b/js/src/views/Event/Edit.vue
@@ -16,8 +16,17 @@
           :defaultImage="event.picture"
         />
 
-        <b-field :label="$t('Title')" :type="checkTitleLength[0]" :message="checkTitleLength[1]">
-          <b-input size="is-large" aria-required="true" required v-model="event.title" />
+        <b-field
+          :label="$t('Title')"
+          :type="checkTitleLength[0]"
+          :message="checkTitleLength[1]"
+        >
+          <b-input
+            size="is-large"
+            aria-required="true"
+            required
+            v-model="event.title"
+          />
         </b-field>
 
         <tag-input v-model="event.tags" :data="tags" path="title" />
@@ -41,7 +50,12 @@
         </div>
 
         <b-field :label="$t('Website / URL')">
-          <b-input icon="link" type="url" v-model="event.onlineAddress" placeholder="URL" />
+          <b-input
+            icon="link"
+            type="url"
+            v-model="event.onlineAddress"
+            placeholder="URL"
+          />
         </b-field>
 
         <subtitle>{{ $t("Organizers") }}</subtitle>
@@ -55,18 +69,28 @@
             />
           </b-field>
           <p v-if="!event.attributedTo.id || attributedToEqualToOrganizerActor">
-            {{ $t("The event will show as attributed to your personal profile.") }}
+            {{
+              $t("The event will show as attributed to your personal profile.")
+            }}
           </p>
           <p v-else>
-            <span>{{ $t("The event will show as attributed to this group.") }}</span>
+            <span>{{
+              $t("The event will show as attributed to this group.")
+            }}</span>
             <span
               v-if="event.contacts && event.contacts.length"
               v-html="
-                $tc('<b>{contact}</b> will be displayed as contact.', event.contacts.length, {
-                  contact: formatList(
-                    event.contacts.map((contact) => displayNameAndUsername(contact))
-                  ),
-                })
+                $tc(
+                  '<b>{contact}</b> will be displayed as contact.',
+                  event.contacts.length,
+                  {
+                    contact: formatList(
+                      event.contacts.map((contact) =>
+                        displayNameAndUsername(contact)
+                      )
+                    ),
+                  }
+                )
               "
             />
           </p>
@@ -96,11 +120,21 @@
           </b-radio>
         </div>-->
 
-        <div class="field" v-if="config && config.anonymous.participation.allowed">
+        <div
+          class="field"
+          v-if="config && config.anonymous.participation.allowed"
+        >
           <label class="label">{{ $t("Anonymous participations") }}</label>
           <b-switch v-model="event.options.anonymousParticipation">
-            {{ $t("I want to allow people to participate without an account.") }}
-            <small v-if="config.anonymous.participation.validation.email.confirmationRequired">
+            {{
+              $t("I want to allow people to participate without an account.")
+            }}
+            <small
+              v-if="
+                config.anonymous.participation.validation.email
+                  .confirmationRequired
+              "
+            >
               <br />
               {{
                 $t(
@@ -120,7 +154,9 @@
 
         <div class="field">
           <label class="label">{{ $t("Number of places") }}</label>
-          <b-switch v-model="limitedPlaces">{{ $t("Limited number of places") }}</b-switch>
+          <b-switch v-model="limitedPlaces">{{
+            $t("Limited number of places")
+          }}</b-switch>
         </div>
 
         <div class="box" v-if="limitedPlaces">
@@ -225,7 +261,11 @@
             </b-field>
           </section>
           <footer class="modal-card-foot">
-            <button class="button" type="button" @click="dateSettingsIsOpen = false">
+            <button
+              class="button"
+              type="button"
+              @click="dateSettingsIsOpen = false"
+            >
               {{ $t("OK") }}
             </button>
           </footer>
@@ -243,11 +283,15 @@
       <div class="container">
         <div class="navbar-menu">
           <div class="navbar-start">
-            <span class="navbar-item" v-if="isEventModified">{{ $t("Unsaved changes") }}</span>
+            <span class="navbar-item" v-if="isEventModified">{{
+              $t("Unsaved changes")
+            }}</span>
           </div>
           <div class="navbar-end">
             <span class="navbar-item">
-              <b-button type="is-text" @click="confirmGoBack">{{ $t("Cancel") }}</b-button>
+              <b-button type="is-text" @click="confirmGoBack">{{
+                $t("Cancel")
+              }}</b-button>
             </span>
             <!-- If an event has been published we can't make it draft anymore -->
             <span class="navbar-item" v-if="event.draft === true">
@@ -266,8 +310,12 @@
                 @click="createOrUpdatePublish"
                 @keyup.enter="createOrUpdatePublish"
               >
-                <span v-if="isUpdate === false">{{ $t("Create my event") }}</span>
-                <span v-else-if="event.draft === true">{{ $t("Publish") }}</span>
+                <span v-if="isUpdate === false">{{
+                  $t("Create my event")
+                }}</span>
+                <span v-else-if="event.draft === true">{{
+                  $t("Publish")
+                }}</span>
                 <span v-else>{{ $t("Update my event") }}</span>
               </b-button>
             </span>
@@ -376,7 +424,11 @@ import {
 import { IPerson, Person, displayNameAndUsername } from "../../types/actor";
 import { TAGS } from "../../graphql/tags";
 import { ITag } from "../../types/tag.model";
-import { buildFileFromIMedia, buildFileVariable, readFileAsync } from "../../utils/image";
+import {
+  buildFileFromIMedia,
+  buildFileVariable,
+  readFileAsync,
+} from "../../utils/image";
 import RouteName from "../../router/name";
 import "intersection-observer";
 import { CONFIG } from "../../graphql/config";
@@ -419,7 +471,9 @@ const DEFAULT_LIMIT_NUMBER_OF_PLACES = 10;
       // if no subcomponents specify a metaInfo.title, this title will be used
       // eslint-disable-next-line @typescript-eslint/ban-ts-comment
       // @ts-ignore
-      title: (this.isUpdate ? this.$t("Event edition") : this.$t("Event creation")) as string,
+      title: (this.isUpdate
+        ? this.$t("Event edition")
+        : this.$t("Event creation")) as string,
       // all titles will be injected into this template
       titleTemplate: "%s | Mobilizon",
     };
@@ -546,8 +600,15 @@ export default class EditEvent extends Vue {
 
   @Watch("event")
   setInitialData(): void {
-    if (this.isUpdate && this.unmodifiedEvent === undefined && this.event && this.event.uuid) {
-      this.unmodifiedEvent = JSON.parse(JSON.stringify(this.event.toEditJSON()));
+    if (
+      this.isUpdate &&
+      this.unmodifiedEvent === undefined &&
+      this.event &&
+      this.event.uuid
+    ) {
+      this.unmodifiedEvent = JSON.parse(
+        JSON.stringify(this.event.toEditJSON())
+      );
     }
   }
 
@@ -575,8 +636,10 @@ export default class EditEvent extends Vue {
       const { data } = await this.$apollo.mutate({
         mutation: CREATE_EVENT,
         variables,
-        update: (store, { data: { createEvent } }) => this.postCreateOrUpdate(store, createEvent),
-        refetchQueries: ({ data: { createEvent } }) => this.postRefetchQueries(createEvent),
+        update: (store, { data: { createEvent } }) =>
+          this.postCreateOrUpdate(store, createEvent),
+        refetchQueries: ({ data: { createEvent } }) =>
+          this.postRefetchQueries(createEvent),
       });
 
       this.$buefy.notification.open({
@@ -606,8 +669,10 @@ export default class EditEvent extends Vue {
       await this.$apollo.mutate({
         mutation: EDIT_EVENT,
         variables,
-        update: (store, { data: { updateEvent } }) => this.postCreateOrUpdate(store, updateEvent),
-        refetchQueries: ({ data: { updateEvent } }) => this.postRefetchQueries(updateEvent),
+        update: (store, { data: { updateEvent } }) =>
+          this.postCreateOrUpdate(store, updateEvent),
+        refetchQueries: ({ data: { updateEvent } }) =>
+          this.postRefetchQueries(updateEvent),
       });
 
       this.$buefy.notification.open({
@@ -774,9 +839,13 @@ export default class EditEvent extends Vue {
 
     try {
       if (this.event.picture && this.pictureFile) {
-        const oldPictureFile = (await buildFileFromIMedia(this.event.picture)) as File;
+        const oldPictureFile = (await buildFileFromIMedia(
+          this.event.picture
+        )) as File;
         const oldPictureFileContent = await readFileAsync(oldPictureFile);
-        const newPictureFileContent = await readFileAsync(this.pictureFile as File);
+        const newPictureFileContent = await readFileAsync(
+          this.pictureFile as File
+        );
         if (oldPictureFileContent === newPictureFileContent) {
           res.picture = { mediaId: this.event.picture.id };
         }
@@ -814,7 +883,8 @@ export default class EditEvent extends Vue {
       this.event.options.showRemainingAttendeeCapacity = false;
     } else {
       this.event.options.maximumAttendeeCapacity =
-        this.event.options.maximumAttendeeCapacity || DEFAULT_LIMIT_NUMBER_OF_PLACES;
+        this.event.options.maximumAttendeeCapacity ||
+        DEFAULT_LIMIT_NUMBER_OF_PLACES;
     }
   }
 
@@ -878,7 +948,10 @@ export default class EditEvent extends Vue {
   }
 
   get isEventModified(): boolean {
-    return JSON.stringify(this.event.toEditJSON()) !== JSON.stringify(this.unmodifiedEvent);
+    return (
+      JSON.stringify(this.event.toEditJSON()) !==
+      JSON.stringify(this.unmodifiedEvent)
+    );
   }
 
   get beginsOn(): Date {
diff --git a/js/src/views/Event/Event.vue b/js/src/views/Event/Event.vue
index 21adf746b..8e02c4cc8 100644
--- a/js/src/views/Event/Event.vue
+++ b/js/src/views/Event/Event.vue
@@ -18,16 +18,29 @@
               <h1 class="title" style="margin: 0">{{ event.title }}</h1>
               <div class="organizer">
                 <span v-if="event.organizerActor && !event.attributedTo">
-                  <popover-actor-card :actor="event.organizerActor" :inline="true">
+                  <popover-actor-card
+                    :actor="event.organizerActor"
+                    :inline="true"
+                  >
                     <span>
                       {{
-                        $t("By @{username}", { username: usernameWithDomain(event.organizerActor) })
+                        $t("By @{username}", {
+                          username: usernameWithDomain(event.organizerActor),
+                        })
                       }}
                     </span>
                   </popover-actor-card>
                 </span>
-                <span v-else-if="event.attributedTo && event.options.hideOrganizerWhenGroupEvent">
-                  <popover-actor-card :actor="event.attributedTo" :inline="true">
+                <span
+                  v-else-if="
+                    event.attributedTo &&
+                    event.options.hideOrganizerWhenGroupEvent
+                  "
+                >
+                  <popover-actor-card
+                    :actor="event.attributedTo"
+                    :inline="true"
+                  >
                     {{
                       $t("By @{group}", {
                         group: usernameWithDomain(event.attributedTo),
@@ -37,14 +50,26 @@
                 </span>
                 <span v-else-if="event.organizerActor && event.attributedTo">
                   <i18n path="By {group}">
-                    <popover-actor-card :actor="event.attributedTo" slot="group" :inline="true">
+                    <popover-actor-card
+                      :actor="event.attributedTo"
+                      slot="group"
+                      :inline="true"
+                    >
                       <router-link
                         :to="{
                           name: RouteName.GROUP,
-                          params: { preferredUsername: usernameWithDomain(event.attributedTo) },
+                          params: {
+                            preferredUsername: usernameWithDomain(
+                              event.attributedTo
+                            ),
+                          },
                         }"
                       >
-                        {{ $t("@{group}", { group: usernameWithDomain(event.attributedTo) }) }}
+                        {{
+                          $t("@{group}", {
+                            group: usernameWithDomain(event.attributedTo),
+                          })
+                        }}
                       </router-link>
                     </popover-actor-card>
                   </i18n>
@@ -59,14 +84,23 @@
                   <tag>{{ tag.title }}</tag>
                 </router-link>
               </p>
-              <b-tag type="is-warning" size="is-medium" v-if="event.draft">{{ $t("Draft") }}</b-tag>
-              <span class="event-status" v-if="event.status !== EventStatus.CONFIRMED">
-                <b-tag type="is-warning" v-if="event.status === EventStatus.TENTATIVE">{{
-                  $t("Event to be confirmed")
-                }}</b-tag>
-                <b-tag type="is-danger" v-if="event.status === EventStatus.CANCELLED">{{
-                  $t("Event cancelled")
-                }}</b-tag>
+              <b-tag type="is-warning" size="is-medium" v-if="event.draft">{{
+                $t("Draft")
+              }}</b-tag>
+              <span
+                class="event-status"
+                v-if="event.status !== EventStatus.CONFIRMED"
+              >
+                <b-tag
+                  type="is-warning"
+                  v-if="event.status === EventStatus.TENTATIVE"
+                  >{{ $t("Event to be confirmed") }}</b-tag
+                >
+                <b-tag
+                  type="is-danger"
+                  v-if="event.status === EventStatus.CANCELLED"
+                  >{{ $t("Event cancelled") }}</b-tag
+                >
               </span>
             </div>
             <div class="column is-3-tablet">
@@ -95,7 +129,9 @@
                   />
                   <b-button
                     type="is-text"
-                    v-if="!actorIsParticipant && anonymousParticipation !== null"
+                    v-if="
+                      !actorIsParticipant && anonymousParticipation !== null
+                    "
                     @click="cancelAnonymousParticipation"
                     >{{ $t("Cancel anonymous participation") }}</b-button
                   >
@@ -103,7 +139,9 @@
                     {{ $t("You are participating in this event anonymously") }}
                     <b-tooltip
                       :label="
-                        $t('This information is saved only on your computer. Click for details')
+                        $t(
+                          'This information is saved only on your computer. Click for details'
+                        )
                       "
                     >
                       <router-link :to="{ name: RouteName.TERMS }">
@@ -111,7 +149,11 @@
                       </router-link>
                     </b-tooltip>
                   </small>
-                  <small v-else-if="!actorIsParticipant && anonymousParticipation === false">
+                  <small
+                    v-else-if="
+                      !actorIsParticipant && anonymousParticipation === false
+                    "
+                  >
                     {{
                       $t(
                         "You are participating in this event anonymously but didn't confirm participation"
@@ -119,7 +161,9 @@
                     }}
                     <b-tooltip
                       :label="
-                        $t('This information is saved only on your computer. Click for details')
+                        $t(
+                          'This information is saved only on your computer. Click for details'
+                        )
                       "
                     >
                       <router-link :to="{ name: RouteName.TERMS }">
@@ -129,7 +173,12 @@
                   </small>
                 </div>
                 <div v-else>
-                  <button class="button is-primary" type="button" slot="trigger" disabled>
+                  <button
+                    class="button is-primary"
+                    type="button"
+                    slot="trigger"
+                    disabled
+                  >
                     <template>
                       <span>{{ $t("Event already passed") }}</span>
                     </template>
@@ -157,7 +206,10 @@
                   <router-link
                     class="participations-link"
                     v-if="actorIsOrganizer && event.draft === false"
-                    :to="{ name: RouteName.PARTICIPATIONS, params: { eventId: event.uuid } }"
+                    :to="{
+                      name: RouteName.PARTICIPATIONS,
+                      params: { eventId: event.uuid },
+                    }"
                   >
                     <!-- We retire one because of the event creator who is a participant -->
                     <span v-if="event.options.maximumAttendeeCapacity">
@@ -177,9 +229,13 @@
                     </span>
                     <span v-else>
                       {{
-                        $tc("No one is going to this event", event.participantStats.participant, {
-                          going: event.participantStats.participant,
-                        })
+                        $tc(
+                          "No one is going to this event",
+                          event.participantStats.participant,
+                          {
+                            going: event.participantStats.participant,
+                          }
+                        )
                       }}
                     </span>
                   </router-link>
@@ -201,9 +257,13 @@
                     </span>
                     <span v-else>
                       {{
-                        $tc("No one is going to this event", event.participantStats.participant, {
-                          going: event.participantStats.participant,
-                        })
+                        $tc(
+                          "No one is going to this event",
+                          event.participantStats.participant,
+                          {
+                            going: event.participantStats.participant,
+                          }
+                        )
                       }}
                     </span>
                   </span>
@@ -221,7 +281,11 @@
                   <b-icon icon="ticket-confirmation-outline" />
                 </p>
                 <b-dropdown position="is-bottom-left" aria-role="list">
-                  <b-button slot="trigger" role="button" icon-right="dots-horizontal">
+                  <b-button
+                    slot="trigger"
+                    role="button"
+                    icon-right="dots-horizontal"
+                  >
                     {{ $t("Actions") }}
                     <!-- <b-icon icon="dots-horizontal" /> -->
                   </b-button>
@@ -231,7 +295,10 @@
                     v-if="actorIsOrganizer || event.draft"
                   >
                     <router-link
-                      :to="{ name: RouteName.EDIT_EVENT, params: { eventId: event.uuid } }"
+                      :to="{
+                        name: RouteName.EDIT_EVENT,
+                        params: { eventId: event.uuid },
+                      }"
                     >
                       {{ $t("Edit") }}
                       <b-icon icon="pencil" />
@@ -243,7 +310,10 @@
                     v-if="actorIsOrganizer || event.draft"
                   >
                     <router-link
-                      :to="{ name: RouteName.DUPLICATE_EVENT, params: { eventId: event.uuid } }"
+                      :to="{
+                        name: RouteName.DUPLICATE_EVENT,
+                        params: { eventId: event.uuid },
+                      }"
                     >
                       {{ $t("Duplicate") }}
                       <b-icon icon="content-duplicate" />
@@ -263,7 +333,11 @@
                     aria-role="menuitem"
                     v-if="actorIsOrganizer || event.draft"
                   />
-                  <b-dropdown-item aria-role="listitem" v-if="!event.draft" @click="triggerShare()">
+                  <b-dropdown-item
+                    aria-role="listitem"
+                    v-if="!event.draft"
+                    @click="triggerShare()"
+                  >
                     <span>
                       {{ $t("Share this event") }}
                       <b-icon icon="share" />
@@ -299,14 +373,23 @@
             <div class="sticky">
               <event-metadata-block
                 :title="$t('Location')"
-                :icon="physicalAddress ? physicalAddress.poiInfos.poiIcon.icon : 'earth'"
+                :icon="
+                  physicalAddress
+                    ? physicalAddress.poiInfos.poiIcon.icon
+                    : 'earth'
+                "
               >
                 <div class="address-wrapper">
-                  <span v-if="!physicalAddress">{{ $t("No address defined") }}</span>
+                  <span v-if="!physicalAddress">{{
+                    $t("No address defined")
+                  }}</span>
                   <div class="address" v-if="physicalAddress">
                     <div>
                       <address>
-                        <p class="addressDescription" :title="physicalAddress.poiInfos.name">
+                        <p
+                          class="addressDescription"
+                          :title="physicalAddress.poiInfos.name"
+                        >
                           {{ physicalAddress.poiInfos.name }}
                         </p>
                         <p>{{ physicalAddress.poiInfos.alternativeName }}</p>
@@ -321,7 +404,10 @@
                   </div>
                 </div>
               </event-metadata-block>
-              <event-metadata-block :title="$t('Date and time')" icon="calendar">
+              <event-metadata-block
+                :title="$t('Date and time')"
+                icon="calendar"
+              >
                 <event-full-date
                   :beginsOn="event.beginsOn"
                   :show-start-time="event.options.showStartTime"
@@ -330,19 +416,27 @@
                 />
               </event-metadata-block>
               <event-metadata-block :title="$t('Organized by')">
-                <popover-actor-card :actor="event.organizerActor" v-if="!event.attributedTo">
+                <popover-actor-card
+                  :actor="event.organizerActor"
+                  v-if="!event.attributedTo"
+                >
                   <actor-card :actor="event.organizerActor" />
                 </popover-actor-card>
                 <router-link
                   v-if="event.attributedTo"
                   :to="{
                     name: RouteName.GROUP,
-                    params: { preferredUsername: usernameWithDomain(event.attributedTo) },
+                    params: {
+                      preferredUsername: usernameWithDomain(event.attributedTo),
+                    },
                   }"
                 >
                   <popover-actor-card
                     :actor="event.attributedTo"
-                    v-if="!event.attributedTo || !event.options.hideOrganizerWhenGroupEvent"
+                    v-if="
+                      !event.attributedTo ||
+                      !event.options.hideOrganizerWhenGroupEvent
+                    "
                   >
                     <actor-card :actor="event.attributedTo" />
                   </popover-actor-card>
@@ -397,8 +491,13 @@
             </section>
           </div>
         </div>
-        <section class="more-events section" v-if="event.relatedEvents.length > 0">
-          <h3 class="title has-text-centered">{{ $t("These events may interest you") }}</h3>
+        <section
+          class="more-events section"
+          v-if="event.relatedEvents.length > 0"
+        >
+          <h3 class="title has-text-centered">
+            {{ $t("These events may interest you") }}
+          </h3>
           <div class="columns">
             <div
               class="column is-one-third-desktop"
@@ -409,7 +508,11 @@
             </div>
           </div>
         </section>
-        <b-modal :active.sync="isReportModalActive" has-modal-card ref="reportModal">
+        <b-modal
+          :active.sync="isReportModalActive"
+          has-modal-card
+          ref="reportModal"
+        >
           <report-modal
             :on-confirm="reportEvent"
             :title="$t('Report this event')"
@@ -417,14 +520,29 @@
             @close="$refs.reportModal.close()"
           />
         </b-modal>
-        <b-modal :active.sync="isShareModalActive" has-modal-card ref="shareModal">
-          <share-event-modal :event="event" :eventCapacityOK="eventCapacityOK" />
+        <b-modal
+          :active.sync="isShareModalActive"
+          has-modal-card
+          ref="shareModal"
+        >
+          <share-event-modal
+            :event="event"
+            :eventCapacityOK="eventCapacityOK"
+          />
         </b-modal>
-        <b-modal :active.sync="isJoinModalActive" has-modal-card ref="participationModal">
+        <b-modal
+          :active.sync="isJoinModalActive"
+          has-modal-card
+          ref="participationModal"
+        >
           <identity-picker v-model="identity">
             <template v-slot:footer>
               <footer class="modal-card-foot">
-                <button class="button" ref="cancelButton" @click="isJoinModalActive = false">
+                <button
+                  class="button"
+                  ref="cancelButton"
+                  @click="isJoinModalActive = false"
+                >
                   {{ $t("Cancel") }}
                 </button>
                 <button
@@ -449,7 +567,9 @@
         >
           <div class="modal-card">
             <header class="modal-card-head">
-              <p class="modal-card-title">{{ $t("Participation confirmation") }}</p>
+              <p class="modal-card-title">
+                {{ $t("Participation confirmation") }}
+              </p>
             </header>
 
             <section class="modal-card-body">
@@ -460,7 +580,11 @@
                   )
                 }}
               </p>
-              <form @submit.prevent="joinEvent(actorForConfirmation, messageForConfirmation)">
+              <form
+                @submit.prevent="
+                  joinEvent(actorForConfirmation, messageForConfirmation)
+                "
+              >
                 <b-field :label="$t('Message')">
                   <b-input
                     type="textarea"
@@ -485,7 +609,10 @@
             </section>
           </div>
         </b-modal>
-        <b-modal v-if="physicalAddress && physicalAddress.geom" :active.sync="showMap">
+        <b-modal
+          v-if="physicalAddress && physicalAddress.geom"
+          :active.sync="showMap"
+        >
           <div class="map">
             <map-leaflet
               :coords="physicalAddress.geom"
@@ -504,7 +631,12 @@
 <script lang="ts">
 import { Component, Prop, Watch } from "vue-property-decorator";
 import BIcon from "buefy/src/components/icon/Icon.vue";
-import { EventJoinOptions, EventStatus, EventVisibility, ParticipantRole } from "@/types/enums";
+import {
+  EventJoinOptions,
+  EventStatus,
+  EventVisibility,
+  ParticipantRole,
+} from "@/types/enums";
 import {
   EVENT_PERSON_PARTICIPATION,
   EVENT_PERSON_PARTICIPATION_SUBSCRIPTION_CHANGED,
@@ -558,7 +690,8 @@ import { IParticipant } from "../../types/participant.model";
     Tag,
     ActorCard,
     PopoverActorCard,
-    "map-leaflet": () => import(/* webpackChunkName: "map" */ "../../components/Map.vue"),
+    "map-leaflet": () =>
+      import(/* webpackChunkName: "map" */ "../../components/Map.vue"),
     ShareEventModal: () =>
       import(
         /* webpackChunkName: "shareEventModal" */ "../../components/Event/ShareEventModal.vue"
@@ -603,7 +736,12 @@ import { IParticipant } from "../../types/participant.model";
         return [];
       },
       skip() {
-        return !this.currentActor || !this.event || !this.event.id || !this.currentActor.id;
+        return (
+          !this.currentActor ||
+          !this.event ||
+          !this.event.id ||
+          !this.currentActor.id
+        );
       },
     },
     config: CONFIG,
@@ -714,7 +852,8 @@ export default class Event extends EventMixin {
 
     this.$watch("eventDescription", (eventDescription) => {
       if (!eventDescription) return;
-      const eventDescriptionElement = this.$refs.eventDescriptionElement as HTMLElement;
+      const eventDescriptionElement = this.$refs
+        .eventDescriptionElement as HTMLElement;
 
       eventDescriptionElement.addEventListener("click", ($event) => {
         // TODO: Find the right type for target
@@ -724,7 +863,14 @@ export default class Event extends EventMixin {
         if (target && target.matches(".hashtag") && target.href) {
           // some sanity checks taken from vue-router:
           // https://github.com/vuejs/vue-router/blob/dev/src/components/link.js#L106
-          const { altKey, ctrlKey, metaKey, shiftKey, button, defaultPrevented } = $event;
+          const {
+            altKey,
+            ctrlKey,
+            metaKey,
+            shiftKey,
+            button,
+            defaultPrevented,
+          } = $event;
           // don't handle with control keys
           if (metaKey || altKey || ctrlKey || shiftKey) return;
           // don't handle when preventDefault called
@@ -777,7 +923,9 @@ export default class Event extends EventMixin {
           forward,
         },
       });
-      this.$notifier.success(this.$t("Event {eventTitle} reported", { eventTitle }) as string);
+      this.$notifier.success(
+        this.$t("Event {eventTitle} reported", { eventTitle }) as string
+      );
     } catch (error) {
       console.error(error);
     }
@@ -788,11 +936,16 @@ export default class Event extends EventMixin {
     this.actorForConfirmation = actor;
   }
 
-  async joinEvent(identity: IPerson, message: string | null = null): Promise<void> {
+  async joinEvent(
+    identity: IPerson,
+    message: string | null = null
+  ): Promise<void> {
     this.isJoinConfirmationModalActive = false;
     this.isJoinModalActive = false;
     try {
-      const { data: mutationData } = await this.$apollo.mutate<{ joinEvent: IParticipant }>({
+      const { data: mutationData } = await this.$apollo.mutate<{
+        joinEvent: IParticipant;
+      }>({
         mutation: JOIN_EVENT,
         variables: {
           eventId: this.event.id,
@@ -808,7 +961,9 @@ export default class Event extends EventMixin {
           if (participationCachedData == null) return;
           const { person } = participationCachedData;
           if (person === null) {
-            console.error("Cannot update participation cache, because of null value.");
+            console.error(
+              "Cannot update participation cache, because of null value."
+            );
             return;
           }
           person.participations.elements.push(data.joinEvent);
@@ -826,7 +981,9 @@ export default class Event extends EventMixin {
           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;
           }
 
@@ -861,9 +1018,12 @@ export default class Event extends EventMixin {
       title: this.$t('Leaving event "{title}"', {
         title: this.event.title,
       }) as string,
-      message: this.$t('Are you sure you want to cancel your participation at event "{title}"?', {
-        title: this.event.title,
-      }) as string,
+      message: this.$t(
+        'Are you sure you want to cancel your participation at event "{title}"?',
+        {
+          title: this.event.title,
+        }
+      ) as string,
       confirmText: this.$t("Leave event") as string,
       cancelText: this.$t("Cancel") as string,
       type: "is-danger",
@@ -901,19 +1061,27 @@ export default class Event extends EventMixin {
   }
 
   private participationConfirmedMessage() {
-    this.$notifier.success(this.$t("Your participation has been confirmed") as string);
+    this.$notifier.success(
+      this.$t("Your participation has been confirmed") as string
+    );
   }
 
   private participationRequestedMessage() {
-    this.$notifier.success(this.$t("Your participation has been requested") as string);
+    this.$notifier.success(
+      this.$t("Your participation has been requested") as string
+    );
   }
 
   private participationRejectedMessage() {
-    this.$notifier.error(this.$t("Your participation has been rejected") as string);
+    this.$notifier.error(
+      this.$t("Your participation has been rejected") as string
+    );
   }
 
   private participationChangedMessage() {
-    this.$notifier.info(this.$t("Your participation status has been changed") as string);
+    this.$notifier.info(
+      this.$t("Your participation status has been changed") as string
+    );
   }
 
   async downloadIcsEvent(): Promise<void> {
@@ -963,13 +1131,15 @@ export default class Event extends EventMixin {
     if (this.actorIsOrganizer) return true;
 
     return (
-      this.participations.length > 0 && this.participations[0].role === ParticipantRole.PARTICIPANT
+      this.participations.length > 0 &&
+      this.participations[0].role === ParticipantRole.PARTICIPANT
     );
   }
 
   get actorIsOrganizer(): boolean {
     return (
-      this.participations.length > 0 && this.participations[0].role === ParticipantRole.CREATOR
+      this.participations.length > 0 &&
+      this.participations[0].role === ParticipantRole.CREATOR
     );
   }
 
@@ -982,12 +1152,18 @@ export default class Event extends EventMixin {
   get eventCapacityOK(): boolean {
     if (this.event.draft) return true;
     if (!this.event.options.maximumAttendeeCapacity) return true;
-    return this.event.options.maximumAttendeeCapacity > this.event.participantStats.participant;
+    return (
+      this.event.options.maximumAttendeeCapacity >
+      this.event.participantStats.participant
+    );
   }
 
   get numberOfPlacesStillAvailable(): number {
     if (this.event.draft) return this.event.options.maximumAttendeeCapacity;
-    return this.event.options.maximumAttendeeCapacity - this.event.participantStats.participant;
+    return (
+      this.event.options.maximumAttendeeCapacity -
+      this.event.participantStats.participant
+    );
   }
 
   get physicalAddress(): Address | null {
@@ -1007,7 +1183,10 @@ export default class Event extends EventMixin {
   }
 
   get ableToReport(): boolean {
-    return this.config && (this.currentActor.id != null || this.config.anonymous.reports.allowed);
+    return (
+      this.config &&
+      (this.currentActor.id != null || this.config.anonymous.reports.allowed)
+    );
   }
 
   get actorForReport(): IActor | null {
diff --git a/js/src/views/Event/EventList.vue b/js/src/views/Event/EventList.vue
index 2455fdcb1..30f3f6801 100644
--- a/js/src/views/Event/EventList.vue
+++ b/js/src/views/Event/EventList.vue
@@ -10,9 +10,11 @@
         class="column is-one-quarter-desktop is-half-mobile"
       />
     </div>
-    <b-message v-if-else="events.length === 0 && $apollo.loading === false" type="is-danger">{{
-      $t("No events found")
-    }}</b-message>
+    <b-message
+      v-if-else="events.length === 0 && $apollo.loading === false"
+      type="is-danger"
+      >{{ $t("No events found") }}</b-message
+    >
   </section>
 </template>
 
diff --git a/js/src/views/Event/GroupEvents.vue b/js/src/views/Event/GroupEvents.vue
index 07b1b6e73..7f37e7a3b 100644
--- a/js/src/views/Event/GroupEvents.vue
+++ b/js/src/views/Event/GroupEvents.vue
@@ -24,7 +24,11 @@
     </nav>
     <section>
       <h1 class="title" v-if="group">
-        {{ $t("{group}'s events", { group: group.name || group.preferredUsername }) }}
+        {{
+          $t("{group}'s events", {
+            group: group.name || group.preferredUsername,
+          })
+        }}
       </h1>
       <p v-if="isCurrentActorMember">
         {{
@@ -56,7 +60,10 @@
           />
         </transition-group>
         <b-message
-          v-if="group.organizedEvents.elements.length === 0 && $apollo.loading === false"
+          v-if="
+            group.organizedEvents.elements.length === 0 &&
+            $apollo.loading === false
+          "
           type="is-danger"
         >
           {{ $t("No events found") }}
@@ -124,7 +131,9 @@ export default class GroupEvents extends mixins(GroupMixin) {
 
   get isCurrentActorMember(): boolean {
     if (!this.group || !this.memberships) return false;
-    return this.memberships.map(({ parent: { id } }) => id).includes(this.group.id);
+    return this.memberships
+      .map(({ parent: { id } }) => id)
+      .includes(this.group.id);
   }
 }
 </script>
diff --git a/js/src/views/Event/MyEvents.vue b/js/src/views/Event/MyEvents.vue
index 2640e5de1..afa22cb3c 100644
--- a/js/src/views/Event/MyEvents.vue
+++ b/js/src/views/Event/MyEvents.vue
@@ -24,7 +24,9 @@
       <div class="columns is-centered">
         <b-button
           class="column is-narrow"
-          v-if="hasMoreFutureParticipations && futureParticipations.length === limit"
+          v-if="
+            hasMoreFutureParticipations && futureParticipations.length === limit
+          "
           @click="loadMoreFutureParticipations"
           size="is-large"
           type="is-primary"
@@ -65,7 +67,9 @@
       <div class="columns is-centered">
         <b-button
           class="column is-narrow"
-          v-if="hasMorePastParticipations && pastParticipations.length === limit"
+          v-if="
+            hasMorePastParticipations && pastParticipations.length === limit
+          "
           @click="loadMorePastParticipations"
           size="is-large"
           type="is-primary"
@@ -90,7 +94,10 @@
 import { Component, Vue } from "vue-property-decorator";
 import { ParticipantRole } from "@/types/enums";
 import { IParticipant, Participant } from "../../types/participant.model";
-import { LOGGED_USER_PARTICIPATIONS, LOGGED_USER_DRAFTS } from "../../graphql/actor";
+import {
+  LOGGED_USER_PARTICIPATIONS,
+  LOGGED_USER_DRAFTS,
+} from "../../graphql/actor";
 import { EventModel, IEvent } from "../../types/event.model";
 import EventListCard from "../../components/Event/EventListCard.vue";
 import EventCard from "../../components/Event/EventCard.vue";
@@ -123,7 +130,8 @@ import Subtitle from "../../components/Utils/Subtitle.vue";
         page: 1,
         limit: 10,
       },
-      update: (data) => data.loggedUser.drafts.map((event: IEvent) => new EventModel(event)),
+      update: (data) =>
+        data.loggedUser.drafts.map((event: IEvent) => new EventModel(event)),
     },
     pastParticipations: {
       query: LOGGED_USER_PARTICIPATIONS,
@@ -170,7 +178,8 @@ export default class MyEvents extends Vue {
     revertSort = false
   ): Map<string, Participant[]> {
     const res = participations.filter(
-      ({ event, role }) => event.beginsOn != null && role !== ParticipantRole.REJECTED
+      ({ event, role }) =>
+        event.beginsOn != null && role !== ParticipantRole.REJECTED
     );
     if (revertSort) {
       res.sort(
@@ -183,16 +192,22 @@ export default class MyEvents extends Vue {
           a.event.beginsOn.getTime() - b.event.beginsOn.getTime()
       );
     }
-    return res.reduce((acc: Map<string, IParticipant[]>, participation: IParticipant) => {
-      const month = new Date(participation.event.beginsOn).toLocaleDateString(undefined, {
-        year: "numeric",
-        month: "long",
-      });
-      const filteredParticipations: IParticipant[] = acc.get(month) || [];
-      filteredParticipations.push(participation);
-      acc.set(month, filteredParticipations);
-      return acc;
-    }, new Map());
+    return res.reduce(
+      (acc: Map<string, IParticipant[]>, participation: IParticipant) => {
+        const month = new Date(participation.event.beginsOn).toLocaleDateString(
+          undefined,
+          {
+            year: "numeric",
+            month: "long",
+          }
+        );
+        const filteredParticipations: IParticipant[] = acc.get(month) || [];
+        filteredParticipations.push(participation);
+        acc.set(month, filteredParticipations);
+        return acc;
+      },
+      new Map()
+    );
   }
 
   get monthlyFutureParticipations(): Map<string, Participant[]> {
@@ -216,7 +231,8 @@ export default class MyEvents extends Vue {
         const oldParticipations = previousResult.loggedUser.participations;
         const newParticipations = fetchMoreResult.loggedUser.participations;
         this.hasMoreFutureParticipations =
-          newParticipations.total === oldParticipations.length + newParticipations.length;
+          newParticipations.total ===
+          oldParticipations.length + newParticipations.length;
 
         return {
           loggedUser: {
@@ -224,7 +240,10 @@ export default class MyEvents extends Vue {
             participations: {
               __typename: newParticipations.__typename,
               total: newParticipations.total,
-              elements: [...oldParticipations.elements, ...newParticipations.elements],
+              elements: [
+                ...oldParticipations.elements,
+                ...newParticipations.elements,
+              ],
             },
           },
         };
@@ -245,7 +264,8 @@ export default class MyEvents extends Vue {
         const oldParticipations = previousResult.loggedUser.participations;
         const newParticipations = fetchMoreResult.loggedUser.participations;
         this.hasMorePastParticipations =
-          newParticipations.total === oldParticipations.length + newParticipations.length;
+          newParticipations.total ===
+          oldParticipations.length + newParticipations.length;
 
         return {
           loggedUser: {
@@ -253,7 +273,10 @@ export default class MyEvents extends Vue {
             participations: {
               __typename: newParticipations.__typename,
               total: newParticipations.total,
-              elements: [...oldParticipations.elements, ...newParticipations.elements],
+              elements: [
+                ...oldParticipations.elements,
+                ...newParticipations.elements,
+              ],
             },
           },
         };
diff --git a/js/src/views/Event/Participants.vue b/js/src/views/Event/Participants.vue
index 7f604538d..c530dad33 100644
--- a/js/src/views/Event/Participants.vue
+++ b/js/src/views/Event/Participants.vue
@@ -4,7 +4,9 @@
       <nav class="breadcrumb" aria-label="breadcrumbs">
         <ul>
           <li>
-            <router-link :to="{ name: RouteName.MY_EVENTS }">{{ $t("My events") }}</router-link>
+            <router-link :to="{ name: RouteName.MY_EVENTS }">{{
+              $t("My events")
+            }}</router-link>
           </li>
           <li>
             <router-link
@@ -72,10 +74,21 @@
         @page-change="(newPage) => (page = newPage)"
         @sort="(field, order) => $emit('sort', field, order)"
       >
-        <b-table-column field="actor.preferredUsername" :label="$t('Participant')" v-slot="props">
+        <b-table-column
+          field="actor.preferredUsername"
+          :label="$t('Participant')"
+          v-slot="props"
+        >
           <article class="media">
-            <figure class="media-left image is-48x48" v-if="props.row.actor.avatar">
-              <img class="is-rounded" :src="props.row.actor.avatar.url" alt="" />
+            <figure
+              class="media-left image is-48x48"
+              v-if="props.row.actor.avatar"
+            >
+              <img
+                class="is-rounded"
+                :src="props.row.actor.avatar.url"
+                alt=""
+              />
             </figure>
             <b-icon
               class="media-left"
@@ -83,11 +96,18 @@
               size="is-large"
               icon="incognito"
             />
-            <b-icon class="media-left" v-else size="is-large" icon="account-circle" />
+            <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
+                  <span v-if="props.row.actor.name">{{
+                    props.row.actor.name
+                  }}</span
                   ><br />
                   <span class="is-size-7 has-text-grey"
                     >@{{ usernameWithDomain(props.row.actor) }}</span
@@ -101,7 +121,10 @@
           </article>
         </b-table-column>
         <b-table-column field="role" :label="$t('Role')" v-slot="props">
-          <b-tag type="is-primary" v-if="props.row.role === ParticipantRole.CREATOR">
+          <b-tag
+            type="is-primary"
+            v-if="props.row.role === ParticipantRole.CREATOR"
+          >
             {{ $t("Organizer") }}
           </b-tag>
           <b-tag v-else-if="props.row.role === ParticipantRole.PARTICIPANT">
@@ -110,18 +133,29 @@
           <b-tag v-else-if="props.row.role === ParticipantRole.NOT_CONFIRMED">
             {{ $t("Not confirmed") }}
           </b-tag>
-          <b-tag type="is-warning" v-else-if="props.row.role === ParticipantRole.NOT_APPROVED">
+          <b-tag
+            type="is-warning"
+            v-else-if="props.row.role === ParticipantRole.NOT_APPROVED"
+          >
             {{ $t("Not approved") }}
           </b-tag>
-          <b-tag type="is-danger" v-else-if="props.row.role === ParticipantRole.REJECTED">
+          <b-tag
+            type="is-danger"
+            v-else-if="props.row.role === ParticipantRole.REJECTED"
+          >
             {{ $t("Rejected") }}
           </b-tag>
         </b-table-column>
-        <b-table-column field="metadata.message" :label="$t('Message')" v-slot="props">
+        <b-table-column
+          field="metadata.message"
+          :label="$t('Message')"
+          v-slot="props"
+        >
           <span
             @click="toggleQueueDetails(props.row)"
             :class="{
-              'ellipsed-message': props.row.metadata.message.length > MESSAGE_ELLIPSIS_LENGTH,
+              'ellipsed-message':
+                props.row.metadata.message.length > MESSAGE_ELLIPSIS_LENGTH,
             }"
             v-if="props.row.metadata && props.row.metadata.message"
           >
@@ -223,7 +257,8 @@ const MESSAGE_ELLIPSIS_LENGTH = 130;
     },
   },
   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 Participants extends Vue {
@@ -282,7 +317,10 @@ export default class Participants extends Vue {
           event: {
             ...previousResult.event,
             participants: {
-              elements: [...oldParticipants.elements, ...newParticipants.elements],
+              elements: [
+                ...oldParticipants.elements,
+                ...newParticipants.elements,
+              ],
               total: newParticipants.total,
               __typename: oldParticipants.__typename,
             },
@@ -339,7 +377,9 @@ export default class Participants extends Vue {
    */
   get canAcceptParticipants(): boolean {
     return this.checkedRows.some((participant: IParticipant) =>
-      [ParticipantRole.NOT_APPROVED, ParticipantRole.REJECTED].includes(participant.role)
+      [ParticipantRole.NOT_APPROVED, ParticipantRole.REJECTED].includes(
+        participant.role
+      )
     );
   }
 
@@ -348,7 +388,8 @@ export default class Participants extends Vue {
    */
   get canRefuseParticipants(): boolean {
     return this.checkedRows.some(
-      (participant: IParticipant) => participant.role !== ParticipantRole.REJECTED
+      (participant: IParticipant) =>
+        participant.role !== ParticipantRole.REJECTED
     );
   }
 
@@ -357,7 +398,11 @@ export default class Participants extends Vue {
   nl2br = nl2br;
 
   toggleQueueDetails(row: IParticipant): void {
-    if (row.metadata.message && row.metadata.message.length < MESSAGE_ELLIPSIS_LENGTH) return;
+    if (
+      row.metadata.message &&
+      row.metadata.message.length < MESSAGE_ELLIPSIS_LENGTH
+    )
+      return;
     this.queueTable.toggleDetails(row);
   }
 }
diff --git a/js/src/views/Group/Create.vue b/js/src/views/Group/Create.vue
index 1401ee85e..b0517fe97 100644
--- a/js/src/views/Group/Create.vue
+++ b/js/src/views/Group/Create.vue
@@ -15,7 +15,11 @@
         <label class="label">{{ $t("Federated Group Name") }}</label>
         <div class="field-body">
           <b-field
-            :message="$t('Only alphanumeric lowercased characters and underscores are supported.')"
+            :message="
+              $t(
+                'Only alphanumeric lowercased characters and underscores are supported.'
+              )
+            "
           >
             <b-input
               ref="preferredUsernameInput"
@@ -27,7 +31,9 @@
               :useHtml5Validation="true"
               :validation-message="
                 group.preferredUsername
-                  ? $t('Only alphanumeric lowercased characters and underscores are supported.')
+                  ? $t(
+                      'Only alphanumeric lowercased characters and underscores are supported.'
+                    )
                   : null
               "
             />
@@ -60,7 +66,9 @@
         <picture-upload :textFallback="$t('Banner')" v-model="bannerFile" />
       </div>
 
-      <button class="button is-primary" native-type="submit">{{ $t("Create my group") }}</button>
+      <button class="button is-primary" native-type="submit">
+        {{ $t("Create my group") }}
+      </button>
     </form>
   </section>
 </template>
@@ -187,7 +195,9 @@ export default class CreateGroup extends mixins(IdentityEditionMixin) {
   }
 
   private handleError(err: any) {
-    this.errors.push(...err.graphQLErrors.map(({ message }: { message: string }) => message));
+    this.errors.push(
+      ...err.graphQLErrors.map(({ message }: { message: string }) => message)
+    );
   }
 }
 </script>
diff --git a/js/src/views/Group/Group.vue b/js/src/views/Group/Group.vue
index 858ef5827..616a494dd 100644
--- a/js/src/views/Group/Group.vue
+++ b/js/src/views/Group/Group.vue
@@ -4,7 +4,9 @@
       <nav class="breadcrumb" aria-label="breadcrumbs">
         <ul>
           <li>
-            <router-link :to="{ name: RouteName.MY_GROUPS }">{{ $t("My groups") }}</router-link>
+            <router-link :to="{ name: RouteName.MY_GROUPS }">{{
+              $t("My groups")
+            }}</router-link>
           </li>
           <li class="is-active">
             <router-link
@@ -28,8 +30,15 @@
       <b-message v-if="isCurrentActorARejectedGroupMember" type="is-danger">
         {{ $t("You have been removed from this group's members.") }}
       </b-message>
-      <b-message v-if="isCurrentActorAGroupMember && isCurrentActorARecentMember" type="is-info">
-        {{ $t("Since you are a new member, private content can take a few minutes to appear.") }}
+      <b-message
+        v-if="isCurrentActorAGroupMember && isCurrentActorARecentMember"
+        type="is-info"
+      >
+        {{
+          $t(
+            "Since you are a new member, private content can take a few minutes to appear."
+          )
+        }}
       </b-message>
       <header class="block-container presentation">
         <div class="block-column media">
@@ -96,7 +105,10 @@
         </div>
         <div class="block-column address" v-else>
           <address v-if="physicalAddress">
-            <p class="addressDescription" :title="physicalAddress.poiInfos.name">
+            <p
+              class="addressDescription"
+              :title="physicalAddress.poiInfos.name"
+            >
               {{ physicalAddress.poiInfos.name }}
             </p>
             <p>{{ physicalAddress.poiInfos.alternativeName }}</p>
@@ -113,11 +125,16 @@
               :label="$t('This group is invite-only')"
               position="is-bottom"
             >
-              <b-button disabled type="is-primary">{{ $t("Join group") }}</b-button></b-tooltip
+              <b-button disabled type="is-primary">{{
+                $t("Join group")
+              }}</b-button></b-tooltip
+            >
+            <b-button
+              v-else-if="currentActor.id"
+              @click="joinGroup"
+              type="is-primary"
+              >{{ $t("Join group") }}</b-button
             >
-            <b-button v-else-if="currentActor.id" @click="joinGroup" type="is-primary">{{
-              $t("Join group")
-            }}</b-button>
             <b-button
               tag="router-link"
               :to="{
@@ -129,7 +146,12 @@
               >{{ $t("Join group") }}</b-button
             >
             <b-dropdown aria-role="list" position="is-bottom-left">
-              <b-button slot="trigger" role="button" icon-right="dots-horizontal"> </b-button>
+              <b-button
+                slot="trigger"
+                role="button"
+                icon-right="dots-horizontal"
+              >
+              </b-button>
               <b-dropdown-item
                 aria-role="listitem"
                 v-if="ableToReport"
@@ -143,7 +165,11 @@
             </b-dropdown>
           </p>
         </div>
-        <img v-if="group.banner && group.banner.url" :src="group.banner.url" alt="" />
+        <img
+          v-if="group.banner && group.banner.url"
+          :src="group.banner.url"
+          alt=""
+        />
       </header>
     </div>
     <div v-if="isCurrentActorAGroupMember" class="block-container">
@@ -192,16 +218,27 @@
         >
           <template v-slot:default>
             <div v-if="group.resources.elements.length > 0">
-              <div v-for="resource in group.resources.elements" :key="resource.id">
+              <div
+                v-for="resource in group.resources.elements"
+                :key="resource.id"
+              >
                 <resource-item
                   :resource="resource"
                   v-if="resource.type !== 'folder'"
                   :inline="true"
                 />
-                <folder-item :resource="resource" :group="group" v-else :inline="true" />
+                <folder-item
+                  :resource="resource"
+                  :group="group"
+                  v-else
+                  :inline="true"
+                />
               </div>
             </div>
-            <div v-else-if="group" class="content has-text-grey has-text-centered">
+            <div
+              v-else-if="group"
+              class="content has-text-grey has-text-centered"
+            >
               <p>{{ $t("No resources yet") }}</p>
             </div>
           </template>
@@ -230,7 +267,10 @@
           }"
         >
           <template v-slot:default>
-            <div class="organized-events-wrapper" v-if="group && group.organizedEvents.total > 0">
+            <div
+              class="organized-events-wrapper"
+              v-if="group && group.organizedEvents.total > 0"
+            >
               <EventMinimalistCard
                 v-for="event in group.organizedEvents.elements"
                 :event="event"
@@ -238,7 +278,10 @@
                 class="organized-event"
               />
             </div>
-            <div v-else-if="group" class="content has-text-grey has-text-centered">
+            <div
+              v-else-if="group"
+              class="content has-text-grey has-text-centered"
+            >
               <p>{{ $t("No public upcoming events") }}</p>
             </div>
             <b-skeleton animated v-else></b-skeleton>
@@ -266,9 +309,16 @@
         >
           <template v-slot:default>
             <div v-if="group.posts.total > 0" class="posts-wrapper">
-              <post-list-item v-for="post in group.posts.elements" :key="post.id" :post="post" />
+              <post-list-item
+                v-for="post in group.posts.elements"
+                :key="post.id"
+                :post="post"
+              />
             </div>
-            <div v-else-if="group" class="content has-text-grey has-text-centered">
+            <div
+              v-else-if="group"
+              class="content has-text-grey has-text-centered"
+            >
               <p>{{ $t("No posts yet") }}</p>
             </div>
           </template>
@@ -292,14 +342,20 @@
     <div v-else class="public-container">
       <section>
         <subtitle>{{ $t("About") }}</subtitle>
-        <div v-html="group.summary" v-if="group.summary && group.summary !== '<p></p>'" />
+        <div
+          v-html="group.summary"
+          v-if="group.summary && group.summary !== '<p></p>'"
+        />
         <div v-else-if="group" class="content has-text-grey has-text-centered">
           <p>{{ $t("This group doesn't have a description yet.") }}</p>
         </div>
       </section>
       <section>
         <subtitle>{{ $t("Upcoming events") }}</subtitle>
-        <div class="organized-events-wrapper" v-if="group && group.organizedEvents.total > 0">
+        <div
+          class="organized-events-wrapper"
+          v-if="group && group.organizedEvents.total > 0"
+        >
           <EventMinimalistCard
             v-for="event in group.organizedEvents.elements"
             :event="event"
@@ -322,7 +378,11 @@
       <section>
         <subtitle>{{ $t("Latest posts") }}</subtitle>
         <div v-if="group.posts.total > 0" class="posts-wrapper">
-          <post-list-item v-for="post in group.posts.elements" :key="post.id" :post="post" />
+          <post-list-item
+            v-for="post in group.posts.elements"
+            :key="post.id"
+            :post="post"
+          />
           <router-link
             :to="{
               name: RouteName.POSTS,
@@ -336,7 +396,10 @@
         </div>
         <b-skeleton animated v-else></b-skeleton>
       </section>
-      <b-modal v-if="physicalAddress && physicalAddress.geom" :active.sync="showMap">
+      <b-modal
+        v-if="physicalAddress && physicalAddress.geom"
+        :active.sync="showMap"
+      >
         <div class="map">
           <map-leaflet
             :coords="physicalAddress.geom"
@@ -347,7 +410,11 @@
           />
         </div>
       </b-modal>
-      <b-modal :active.sync="isReportModalActive" has-modal-card ref="reportModal">
+      <b-modal
+        :active.sync="isReportModalActive"
+        has-modal-card
+        ref="reportModal"
+      >
         <report-modal
           :on-confirm="reportGroup"
           :title="$t('Report this group')"
@@ -402,7 +469,8 @@ import ReportModal from "../../components/Report/ReportModal.vue";
     GroupSection,
     Invitations,
     ReportModal,
-    "map-leaflet": () => import(/* webpackChunkName: "map" */ "../../components/Map.vue"),
+    "map-leaflet": () =>
+      import(/* webpackChunkName: "map" */ "../../components/Map.vue"),
   },
   metaInfo() {
     return {
@@ -469,7 +537,8 @@ export default class Group extends mixins(GroupMixin) {
 
   rejectInvitation({ id: memberId }: { id: string }): void {
     const index = this.person.memberships.elements.findIndex(
-      (membership) => membership.role === MemberRole.INVITED && membership.id === memberId
+      (membership) =>
+        membership.role === MemberRole.INVITED && membership.id === memberId
     );
     if (index > -1) {
       this.person.memberships.elements.splice(index, 1);
@@ -492,11 +561,15 @@ export default class Group extends mixins(GroupMixin) {
           forward,
         },
       });
-      this.$notifier.success(this.$t("Group {groupTitle} reported", { groupTitle }) as string);
+      this.$notifier.success(
+        this.$t("Group {groupTitle} reported", { groupTitle }) as string
+      );
     } catch (error) {
       console.error(error);
       this.$notifier.error(
-        this.$t("Error while reporting group {groupTitle}", { groupTitle }) as string
+        this.$t("Error while reporting group {groupTitle}", {
+          groupTitle,
+        }) as string
       );
     }
   }
@@ -513,7 +586,9 @@ export default class Group extends mixins(GroupMixin) {
 
   get groupMember(): IMember | undefined {
     if (!this.person || !this.person.id) return undefined;
-    return this.person.memberships.elements.find(({ parent: { id } }) => id === this.group.id);
+    return this.person.memberships.elements.find(
+      ({ parent: { id } }) => id === this.group.id
+    );
   }
 
   get groupMemberships(): (string | undefined)[] {
@@ -521,9 +596,11 @@ export default class Group extends mixins(GroupMixin) {
     return this.person.memberships.elements
       .filter(
         (membership: IMember) =>
-          ![MemberRole.REJECTED, MemberRole.NOT_APPROVED, MemberRole.INVITED].includes(
-            membership.role
-          )
+          ![
+            MemberRole.REJECTED,
+            MemberRole.NOT_APPROVED,
+            MemberRole.INVITED,
+          ].includes(membership.role)
       )
       .map(({ parent: { id } }) => id);
   }
@@ -535,7 +612,10 @@ export default class Group extends mixins(GroupMixin) {
   }
 
   get isCurrentActorAGroupMember(): boolean {
-    return this.groupMemberships !== undefined && this.groupMemberships.includes(this.group.id);
+    return (
+      this.groupMemberships !== undefined &&
+      this.groupMemberships.includes(this.group.id)
+    );
   }
 
   get isCurrentActorARejectedGroupMember(): boolean {
@@ -573,7 +653,11 @@ export default class Group extends mixins(GroupMixin) {
   get members(): IMember[] {
     return this.group.members.elements.filter(
       (member) =>
-        ![MemberRole.INVITED, MemberRole.REJECTED, MemberRole.NOT_APPROVED].includes(member.role)
+        ![
+          MemberRole.INVITED,
+          MemberRole.REJECTED,
+          MemberRole.NOT_APPROVED,
+        ].includes(member.role)
     );
   }
 
@@ -584,7 +668,9 @@ export default class Group extends mixins(GroupMixin) {
 
   get ableToReport(): boolean {
     return (
-      this.config && (this.currentActor.id !== undefined || this.config.anonymous.reports.allowed)
+      this.config &&
+      (this.currentActor.id !== undefined ||
+        this.config.anonymous.reports.allowed)
     );
   }
 }
@@ -725,7 +811,8 @@ div.container {
           .media-content {
             h2 {
               color: #3c376e;
-              font-family: "Liberation Sans", "Helvetica Neue", Roboto, Helvetica, Arial, serif;
+              font-family: "Liberation Sans", "Helvetica Neue", Roboto,
+                Helvetica, Arial, serif;
               font-size: 1.5rem;
               font-weight: 700;
             }
diff --git a/js/src/views/Group/GroupMembers.vue b/js/src/views/Group/GroupMembers.vue
index ec1974313..3c88a8e36 100644
--- a/js/src/views/Group/GroupMembers.vue
+++ b/js/src/views/Group/GroupMembers.vue
@@ -31,9 +31,16 @@
         </li>
       </ul>
     </nav>
-    <section class="container section" v-if="group && isCurrentActorAGroupAdmin">
+    <section
+      class="container section"
+      v-if="group && isCurrentActorAGroupAdmin"
+    >
       <form @submit.prevent="inviteMember">
-        <b-field :label="$t('Invite a new member')" custom-class="add-relay" horizontal>
+        <b-field
+          :label="$t('Invite a new member')"
+          custom-class="add-relay"
+          horizontal
+        >
           <b-field
             grouped
             expanded
@@ -42,10 +49,15 @@
             :message="inviteError"
           >
             <p class="control">
-              <b-input v-model="newMemberUsername" :placeholder="$t('Ex: someone@mobilizon.org')" />
+              <b-input
+                v-model="newMemberUsername"
+                :placeholder="$t('Ex: someone@mobilizon.org')"
+              />
             </p>
             <p class="control">
-              <b-button type="is-primary" native-type="submit">{{ $t("Invite member") }}</b-button>
+              <b-button type="is-primary" native-type="submit">{{
+                $t("Invite member")
+              }}</b-button>
             </p>
           </b-field>
         </b-field>
@@ -97,15 +109,33 @@
         @page-change="triggerLoadMoreMemberPageChange"
         @sort="(field, order) => $emit('sort', field, order)"
       >
-        <b-table-column field="actor.preferredUsername" :label="$t('Member')" v-slot="props">
+        <b-table-column
+          field="actor.preferredUsername"
+          :label="$t('Member')"
+          v-slot="props"
+        >
           <article class="media">
-            <figure class="media-left image is-48x48" v-if="props.row.actor.avatar">
-              <img class="is-rounded" :src="props.row.actor.avatar.url" alt="" />
+            <figure
+              class="media-left image is-48x48"
+              v-if="props.row.actor.avatar"
+            >
+              <img
+                class="is-rounded"
+                :src="props.row.actor.avatar.url"
+                alt=""
+              />
             </figure>
-            <b-icon class="media-left" v-else size="is-large" icon="account-circle" />
+            <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.name">{{ props.row.actor.name }}</span
+                <span v-if="props.row.actor.name">{{
+                  props.row.actor.name
+                }}</span
                 ><br />
                 <span class="is-size-7 has-text-grey"
                   >@{{ usernameWithDomain(props.row.actor) }}</span
@@ -115,22 +145,37 @@
           </article>
         </b-table-column>
         <b-table-column field="role" :label="$t('Role')" v-slot="props">
-          <b-tag type="is-primary" v-if="props.row.role === MemberRole.ADMINISTRATOR">
+          <b-tag
+            type="is-primary"
+            v-if="props.row.role === MemberRole.ADMINISTRATOR"
+          >
             {{ $t("Administrator") }}
           </b-tag>
-          <b-tag type="is-primary" v-else-if="props.row.role === MemberRole.MODERATOR">
+          <b-tag
+            type="is-primary"
+            v-else-if="props.row.role === MemberRole.MODERATOR"
+          >
             {{ $t("Moderator") }}
           </b-tag>
           <b-tag v-else-if="props.row.role === MemberRole.MEMBER">
             {{ $t("Member") }}
           </b-tag>
-          <b-tag type="is-warning" v-else-if="props.row.role === MemberRole.NOT_APPROVED">
+          <b-tag
+            type="is-warning"
+            v-else-if="props.row.role === MemberRole.NOT_APPROVED"
+          >
             {{ $t("Not approved") }}
           </b-tag>
-          <b-tag type="is-danger" v-else-if="props.row.role === MemberRole.REJECTED">
+          <b-tag
+            type="is-danger"
+            v-else-if="props.row.role === MemberRole.REJECTED"
+          >
             {{ $t("Rejected") }}
           </b-tag>
-          <b-tag type="is-warning" v-else-if="props.row.role === MemberRole.INVITED">
+          <b-tag
+            type="is-warning"
+            v-else-if="props.row.role === MemberRole.INVITED"
+          >
             {{ $t("Invited") }}
           </b-tag>
         </b-table-column>
@@ -144,13 +189,21 @@
         <b-table-column field="actions" :label="$t('Actions')" v-slot="props">
           <div class="buttons" v-if="props.row.actor.id !== currentActor.id">
             <b-button
-              v-if="[MemberRole.MEMBER, MemberRole.MODERATOR].includes(props.row.role)"
+              v-if="
+                [MemberRole.MEMBER, MemberRole.MODERATOR].includes(
+                  props.row.role
+                )
+              "
               @click="promoteMember(props.row)"
               icon-left="chevron-double-up"
               >{{ $t("Promote") }}</b-button
             >
             <b-button
-              v-if="[MemberRole.ADMINISTRATOR, MemberRole.MODERATOR].includes(props.row.role)"
+              v-if="
+                [MemberRole.ADMINISTRATOR, MemberRole.MODERATOR].includes(
+                  props.row.role
+                )
+              "
               @click="demoteMember(props.row)"
               icon-left="chevron-double-down"
               >{{ $t("Demote") }}</b-button
@@ -187,7 +240,12 @@ import { FETCH_GROUP } from "@/graphql/group";
 import { MemberRole } from "@/types/enums";
 import { IMember } from "@/types/actor/member.model";
 import RouteName from "../../router/name";
-import { INVITE_MEMBER, GROUP_MEMBERS, REMOVE_MEMBER, UPDATE_MEMBER } from "../../graphql/member";
+import {
+  INVITE_MEMBER,
+  GROUP_MEMBERS,
+  REMOVE_MEMBER,
+  UPDATE_MEMBER,
+} from "../../graphql/member";
 import { usernameWithDomain } from "../../types/actor";
 
 @Component({
@@ -380,7 +438,10 @@ export default class GroupMembers extends mixins(GroupMixin) {
           role,
         },
         refetchQueries: [
-          { query: FETCH_GROUP, variables: { name: this.$route.params.preferredUsername } },
+          {
+            query: FETCH_GROUP,
+            variables: { name: this.$route.params.preferredUsername },
+          },
         ],
       });
       let successMessage;
diff --git a/js/src/views/Group/GroupSettings.vue b/js/src/views/Group/GroupSettings.vue
index 837001bcf..819600908 100644
--- a/js/src/views/Group/GroupSettings.vue
+++ b/js/src/views/Group/GroupSettings.vue
@@ -31,7 +31,10 @@
         </li>
       </ul>
     </nav>
-    <section class="container section" v-if="group && isCurrentActorAGroupAdmin">
+    <section
+      class="container section"
+      v-if="group && isCurrentActorAGroupAdmin"
+    >
       <form @submit.prevent="updateGroup">
         <b-field :label="$t('Group name')">
           <b-input v-model="group.name" />
@@ -104,7 +107,11 @@
 
         <p class="label">{{ $t("New members") }}</p>
         <div class="field">
-          <b-radio v-model="group.openness" name="groupOpenness" :native-value="Openness.OPEN">
+          <b-radio
+            v-model="group.openness"
+            name="groupOpenness"
+            :native-value="Openness.OPEN"
+          >
             {{ $t("Anyone can join freely") }}<br />
             <small>{{
               $t(
@@ -134,8 +141,12 @@
         />
 
         <div class="buttons">
-          <b-button native-type="submit" type="is-primary">{{ $t("Update group") }}</b-button>
-          <b-button @click="confirmDeleteGroup" type="is-danger">{{ $t("Delete group") }}</b-button>
+          <b-button native-type="submit" type="is-primary">{{
+            $t("Update group")
+          }}</b-button>
+          <b-button @click="confirmDeleteGroup" type="is-danger">{{
+            $t("Delete group")
+          }}</b-button>
         </div>
       </form>
     </section>
diff --git a/js/src/views/Group/MyGroups.vue b/js/src/views/Group/MyGroups.vue
index 1cdf67b97..1d80acb27 100644
--- a/js/src/views/Group/MyGroups.vue
+++ b/js/src/views/Group/MyGroups.vue
@@ -9,9 +9,11 @@
       }}
     </p>
     <div class="buttons">
-      <router-link class="button is-primary" :to="{ name: RouteName.CREATE_GROUP }">{{
-        $t("Create group")
-      }}</router-link>
+      <router-link
+        class="button is-primary"
+        :to="{ name: RouteName.CREATE_GROUP }"
+        >{{ $t("Create group") }}</router-link
+      >
     </div>
     <b-loading :active.sync="$apollo.loading"></b-loading>
     <invitations
@@ -38,7 +40,10 @@
       >
       </b-pagination>
     </section>
-    <b-message v-if="$apollo.loading === false && memberships.length === 0" type="is-danger">
+    <b-message
+      v-if="$apollo.loading === false && memberships.length === 0"
+      type="is-danger"
+    >
       {{ $t("No groups found") }}
     </b-message>
   </section>
@@ -102,7 +107,8 @@ export default class MyGroups extends Vue {
 
   rejectInvitation({ id: memberId }: { id: string }): void {
     const index = this.membershipsPages.elements.findIndex(
-      (membership) => membership.role === MemberRole.INVITED && membership.id === memberId
+      (membership) =>
+        membership.role === MemberRole.INVITED && membership.id === memberId
     );
     if (index > -1) {
       this.membershipsPages.elements.splice(index, 1);
@@ -139,7 +145,8 @@ export default class MyGroups extends Vue {
   get memberships(): IMember[] {
     if (!this.membershipsPages) return [];
     return this.membershipsPages.elements.filter(
-      (member: IMember) => ![MemberRole.INVITED, MemberRole.REJECTED].includes(member.role)
+      (member: IMember) =>
+        ![MemberRole.INVITED, MemberRole.REJECTED].includes(member.role)
     );
   }
 }
diff --git a/js/src/views/Group/Settings.vue b/js/src/views/Group/Settings.vue
index 049c15ff3..58fd2d049 100644
--- a/js/src/views/Group/Settings.vue
+++ b/js/src/views/Group/Settings.vue
@@ -4,7 +4,10 @@
     <div class="columns">
       <aside class="column is-one-quarter-desktop">
         <ul>
-          <SettingMenuSection :title="$t('Settings')" :to="{ name: RouteName.GROUP_SETTINGS }">
+          <SettingMenuSection
+            :title="$t('Settings')"
+            :to="{ name: RouteName.GROUP_SETTINGS }"
+          >
             <SettingMenuItem
               :title="this.$t('Public')"
               :to="{ name: RouteName.GROUP_PUBLIC_SETTINGS }"
diff --git a/js/src/views/Home.vue b/js/src/views/Home.vue
index d27d09587..4e4c86508 100644
--- a/js/src/views/Home.vue
+++ b/js/src/views/Home.vue
@@ -1,11 +1,20 @@
 <template>
   <div id="homepage">
-    <section class="hero" v-if="config && (!currentUser.id || !currentActor.id)">
+    <section
+      class="hero"
+      v-if="config && (!currentUser.id || !currentActor.id)"
+    >
       <div class="hero-body">
         <div class="container">
-          <h1 class="title">{{ config.slogan || $t("Gather ⋅ Organize ⋅ Mobilize") }}</h1>
+          <h1 class="title">
+            {{ config.slogan || $t("Gather ⋅ Organize ⋅ Mobilize") }}
+          </h1>
           <p
-            v-html="$t('Join <b>{instance}</b>, a Mobilizon instance', { instance: config.name })"
+            v-html="
+              $t('Join <b>{instance}</b>, a Mobilizon instance', {
+                instance: config.name,
+              })
+            "
           />
           <p class="instance-description">{{ config.description }}</p>
           <!-- We don't invite to find other instances yet -->
@@ -25,7 +34,11 @@
             >
             <!-- We don't invite to find other instances yet -->
             <!-- <b-button v-else type="is-link" tag="a" href="https://joinmastodon.org">{{ $t('Find an instance') }}</b-button> -->
-            <b-button type="is-text" tag="router-link" :to="{ name: RouteName.ABOUT }">
+            <b-button
+              type="is-text"
+              tag="router-link"
+              :to="{ name: RouteName.ABOUT }"
+            >
               {{ $t("Learn more about {instance}", { instance: config.name }) }}
             </b-button>
           </div>
@@ -40,7 +53,10 @@
       <section class="events-featured">
         <h2 class="title">{{ $t("Featured events") }}</h2>
         <b-loading :active.sync="$apollo.loading" />
-        <div v-if="filteredFeaturedEvents.length > 0" class="columns is-multiline">
+        <div
+          v-if="filteredFeaturedEvents.length > 0"
+          class="columns is-multiline"
+        >
           <div
             class="column is-one-third-desktop"
             v-for="event in filteredFeaturedEvents.slice(0, 6)"
@@ -49,12 +65,17 @@
             <EventCard :event="event" />
           </div>
         </div>
-        <b-message v-else type="is-danger">{{ $t("No events found") }}</b-message>
+        <b-message v-else type="is-danger">{{
+          $t("No events found")
+        }}</b-message>
       </section>
     </div>
     <div id="picture" v-if="config && (!currentUser.id || !currentActor.id)">
       <div class="picture-container">
-        <img src="/img/pics/2020-10-06-mobilizon-illustration-A_homepage.jpg" alt="" />
+        <img
+          src="/img/pics/2020-10-06-mobilizon-illustration-A_homepage.jpg"
+          alt=""
+        />
       </div>
       <div class="container section">
         <div class="columns">
@@ -62,7 +83,9 @@
             <h3 class="title">{{ $t("A practical tool") }}</h3>
             <p
               v-html="
-                $t('Mobilizon is a tool that helps you <b>find, create and organise events</b>.')
+                $t(
+                  'Mobilizon is a tool that helps you <b>find, create and organise events</b>.'
+                )
               "
             />
           </div>
@@ -88,32 +111,51 @@
           </div>
         </div>
         <div class="buttons">
-          <a class="button is-primary is-large" href="https://joinmobilizon.org">{{
-            $t("Learn more about Mobilizon")
-          }}</a>
+          <a
+            class="button is-primary is-large"
+            href="https://joinmobilizon.org"
+            >{{ $t("Learn more about Mobilizon") }}</a
+          >
         </div>
       </div>
     </div>
-    <div class="container section" v-if="config && loggedUser && loggedUser.settings">
+    <div
+      class="container section"
+      v-if="config && loggedUser && loggedUser.settings"
+    >
       <section v-if="currentActor.id">
         <b-message type="is-info" v-if="welcomeBack">{{
-          $t("Welcome back {username}!", { username: currentActor.displayName() })
+          $t("Welcome back {username}!", {
+            username: currentActor.displayName(),
+          })
         }}</b-message>
         <b-message type="is-info" v-if="newRegisteredUser">{{
-          $t("Welcome to Mobilizon, {username}!", { username: currentActor.displayName() })
+          $t("Welcome to Mobilizon, {username}!", {
+            username: currentActor.displayName(),
+          })
         }}</b-message>
       </section>
-      <section v-if="currentActor.id && goingToEvents.size > 0" class="container">
+      <section
+        v-if="currentActor.id && goingToEvents.size > 0"
+        class="container"
+      >
         <h3 class="title">{{ $t("Upcoming") }}</h3>
         <b-loading :active.sync="$apollo.loading" />
         <div v-for="row of goingToEvents" class="upcoming-events" :key="row[0]">
-          <span class="date-component-container" v-if="isInLessThanSevenDays(row[0])">
+          <span
+            class="date-component-container"
+            v-if="isInLessThanSevenDays(row[0])"
+          >
             <date-component :date="row[0]" />
             <subtitle v-if="isToday(row[0])">{{
-              $tc("You have one event today.", row[1].length, { count: row[1].length })
+              $tc("You have one event today.", row[1].length, {
+                count: row[1].length,
+              })
             }}</subtitle>
             <subtitle v-else-if="isTomorrow(row[0])">{{
-              $tc("You have one event tomorrow.", row[1].length, { count: row[1].length })
+              $tc("You have one event tomorrow.", row[1].length, {
+                count: row[1].length,
+              })
             }}</subtitle>
             <subtitle v-else-if="isInLessThanSevenDays(row[0])">
               {{
@@ -155,7 +197,10 @@
       <section class="events-featured">
         <h2 class="title">{{ $t("Featured events") }}</h2>
         <b-loading :active.sync="$apollo.loading" />
-        <div v-if="filteredFeaturedEvents.length > 0" class="columns is-multiline">
+        <div
+          v-if="filteredFeaturedEvents.length > 0"
+          class="columns is-multiline"
+        >
           <div
             class="column is-one-third-desktop"
             v-for="event in filteredFeaturedEvents.slice(0, 6)"
@@ -164,7 +209,9 @@
             <EventCard :event="event" />
           </div>
         </div>
-        <b-message v-else type="is-danger">{{ $t("No events found") }}</b-message>
+        <b-message v-else type="is-danger">{{
+          $t("No events found")
+        }}</b-message>
       </section>
     </div>
   </div>
@@ -177,7 +224,10 @@ import { IParticipant, Participant } from "../types/participant.model";
 import { FETCH_EVENTS } from "../graphql/event";
 import EventListCard from "../components/Event/EventListCard.vue";
 import EventCard from "../components/Event/EventCard.vue";
-import { CURRENT_ACTOR_CLIENT, LOGGED_USER_PARTICIPATIONS } from "../graphql/actor";
+import {
+  CURRENT_ACTOR_CLIENT,
+  LOGGED_USER_PARTICIPATIONS,
+} from "../graphql/actor";
 import { IPerson, Person } from "../types/actor";
 import { ICurrentUser, IUser } from "../types/current-user.model";
 import { CURRENT_USER_CLIENT, USER_SETTINGS } from "../graphql/user";
@@ -286,7 +336,9 @@ export default class Home extends Vue {
     return window.localStorage.getItem("new-registered-user") === "yes";
   }
 
-  thisWeek(row: [string, Map<string, IParticipant>]): Map<string, IParticipant> {
+  thisWeek(
+    row: [string, Map<string, IParticipant>]
+  ): Map<string, IParticipant> {
     if (this.isInLessThanSevenDays(row[0])) {
       return row[1];
     }
@@ -330,7 +382,9 @@ export default class Home extends Vue {
 
   // eslint-disable-next-line class-methods-use-this
   calculateDiffDays(date: string): number {
-    return Math.ceil((new Date(date).getTime() - new Date().getTime()) / 1000 / 60 / 60 / 24);
+    return Math.ceil(
+      (new Date(date).getTime() - new Date().getTime()) / 1000 / 60 / 60 / 24
+    );
   }
 
   get goingToEvents(): Map<string, Map<string, IParticipant>> {
@@ -342,14 +396,22 @@ export default class Home extends Vue {
         role !== ParticipantRole.REJECTED
     );
     res.sort(
-      (a: IParticipant, b: IParticipant) => a.event.beginsOn.getTime() - b.event.beginsOn.getTime()
+      (a: IParticipant, b: IParticipant) =>
+        a.event.beginsOn.getTime() - b.event.beginsOn.getTime()
     );
 
     return res.reduce(
-      (acc: Map<string, Map<string, IParticipant>>, participation: IParticipant) => {
+      (
+        acc: Map<string, Map<string, IParticipant>>,
+        participation: IParticipant
+      ) => {
         const day = new Date(participation.event.beginsOn).toDateString();
-        const participations: Map<string, IParticipant> = acc.get(day) || new Map();
-        participations.set(`${participation.event.uuid}${participation.actor.id}`, participation);
+        const participations: Map<string, IParticipant> =
+          acc.get(day) || new Map();
+        participations.set(
+          `${participation.event.uuid}${participation.actor.id}`,
+          participation
+        );
         acc.set(day, participations);
         return acc;
       },
@@ -365,7 +427,8 @@ export default class Home extends Vue {
         role !== ParticipantRole.REJECTED
     );
     res.sort(
-      (a: IParticipant, b: IParticipant) => a.event.beginsOn.getTime() - b.event.beginsOn.getTime()
+      (a: IParticipant, b: IParticipant) =>
+        a.event.beginsOn.getTime() - b.event.beginsOn.getTime()
     );
     return res;
   }
@@ -377,7 +440,9 @@ export default class Home extends Vue {
     return this.events.filter(
       ({ id }) =>
         !this.currentUserParticipations
-          .filter((participation) => participation.role === ParticipantRole.CREATOR)
+          .filter(
+            (participation) => participation.role === ParticipantRole.CREATOR
+          )
           .map(({ event: { id: eventId } }) => eventId)
           .includes(id)
     );
@@ -396,7 +461,10 @@ export default class Home extends Vue {
   @Watch("loggedUser")
   detectEmptyUserSettings(loggedUser: IUser): void {
     if (loggedUser && loggedUser.id && loggedUser.settings === null) {
-      this.$router.push({ name: RouteName.WELCOME_SCREEN, params: { step: "1" } });
+      this.$router.push({
+        name: RouteName.WELCOME_SCREEN,
+        params: { step: "1" },
+      });
     }
   }
 }
diff --git a/js/src/views/Moderation/Logs.vue b/js/src/views/Moderation/Logs.vue
index b0cc89c6f..fde4b4ffc 100644
--- a/js/src/views/Moderation/Logs.vue
+++ b/js/src/views/Moderation/Logs.vue
@@ -3,7 +3,9 @@
     <nav class="breadcrumb" aria-label="breadcrumbs">
       <ul>
         <li>
-          <router-link :to="{ name: RouteName.MODERATION }">{{ $t("Moderation") }}</router-link>
+          <router-link :to="{ name: RouteName.MODERATION }">{{
+            $t("Moderation")
+          }}</router-link>
         </li>
         <li class="is-active">
           <router-link :to="{ name: RouteName.REPORT_LOGS }">{{
@@ -16,7 +18,11 @@
       <ul v-if="actionLogs.length > 0">
         <li v-for="log in actionLogs" :key="log.id">
           <div class="box">
-            <img class="image" :src="log.actor.avatar.url" v-if="log.actor.avatar" />
+            <img
+              class="image"
+              :src="log.actor.avatar.url"
+              v-if="log.actor.avatar"
+            />
             <i18n
               v-if="log.action === ActionLogAction.REPORT_UPDATE_CLOSED"
               tag="span"
@@ -24,13 +30,23 @@
             >
               <router-link
                 slot="moderator"
-                :to="{ name: RouteName.ADMIN_PROFILE, params: { id: log.actor.id } }"
+                :to="{
+                  name: RouteName.ADMIN_PROFILE,
+                  params: { id: log.actor.id },
+                }"
                 >@{{ log.actor.preferredUsername }}</router-link
               >
               <router-link
-                :to="{ name: RouteName.REPORT, params: { reportId: log.object.id } }"
+                :to="{
+                  name: RouteName.REPORT,
+                  params: { reportId: log.object.id },
+                }"
                 slot="report"
-                >{{ $t("report #{report_number}", { report_number: log.object.id }) }}
+                >{{
+                  $t("report #{report_number}", {
+                    report_number: log.object.id,
+                  })
+                }}
               </router-link>
             </i18n>
             <i18n
@@ -40,13 +56,23 @@
             >
               <router-link
                 slot="moderator"
-                :to="{ name: RouteName.ADMIN_PROFILE, params: { id: log.actor.id } }"
+                :to="{
+                  name: RouteName.ADMIN_PROFILE,
+                  params: { id: log.actor.id },
+                }"
                 >@{{ log.actor.preferredUsername }}</router-link
               >
               <router-link
-                :to="{ name: RouteName.REPORT, params: { reportId: log.object.id } }"
+                :to="{
+                  name: RouteName.REPORT,
+                  params: { reportId: log.object.id },
+                }"
                 slot="report"
-                >{{ $t("report #{report_number}", { report_number: log.object.id }) }}
+                >{{
+                  $t("report #{report_number}", {
+                    report_number: log.object.id,
+                  })
+                }}
               </router-link>
             </i18n>
             <i18n
@@ -56,13 +82,23 @@
             >
               <router-link
                 slot="moderator"
-                :to="{ name: RouteName.ADMIN_PROFILE, params: { id: log.actor.id } }"
+                :to="{
+                  name: RouteName.ADMIN_PROFILE,
+                  params: { id: log.actor.id },
+                }"
                 >@{{ log.actor.preferredUsername }}</router-link
               >
               <router-link
-                :to="{ name: RouteName.REPORT, params: { reportId: log.object.id } }"
+                :to="{
+                  name: RouteName.REPORT,
+                  params: { reportId: log.object.id },
+                }"
                 slot="report"
-                >{{ $t("report #{report_number}", { report_number: log.object.id }) }}
+                >{{
+                  $t("report #{report_number}", {
+                    report_number: log.object.id,
+                  })
+                }}
               </router-link>
             </i18n>
             <i18n
@@ -72,16 +108,28 @@
             >
               <router-link
                 slot="moderator"
-                :to="{ name: RouteName.ADMIN_PROFILE, params: { id: log.actor.id } }"
+                :to="{
+                  name: RouteName.ADMIN_PROFILE,
+                  params: { id: log.actor.id },
+                }"
                 >@{{ log.actor.preferredUsername }}</router-link
               >
               <router-link
                 v-if="log.object.report"
-                :to="{ name: RouteName.REPORT, params: { reportId: log.object.report.id } }"
+                :to="{
+                  name: RouteName.REPORT,
+                  params: { reportId: log.object.report.id },
+                }"
                 slot="report"
-                >{{ $t("report #{report_number}", { report_number: log.object.report.id }) }}
+                >{{
+                  $t("report #{report_number}", {
+                    report_number: log.object.report.id,
+                  })
+                }}
               </router-link>
-              <span v-else slot="report">{{ $t("a non-existent report") }}</span>
+              <span v-else slot="report">{{
+                $t("a non-existent report")
+              }}</span>
             </i18n>
             <i18n
               v-else-if="log.action === ActionLogAction.EVENT_DELETION"
@@ -90,7 +138,10 @@
             >
               <router-link
                 slot="moderator"
-                :to="{ name: RouteName.ADMIN_PROFILE, params: { id: log.actor.id } }"
+                :to="{
+                  name: RouteName.ADMIN_PROFILE,
+                  params: { id: log.actor.id },
+                }"
                 >@{{ log.actor.preferredUsername }}</router-link
               >
               <b slot="title">{{ log.object.title }}</b>
@@ -102,12 +153,18 @@
             >
               <router-link
                 slot="moderator"
-                :to="{ name: RouteName.ADMIN_PROFILE, params: { id: log.actor.id } }"
+                :to="{
+                  name: RouteName.ADMIN_PROFILE,
+                  params: { id: log.actor.id },
+                }"
                 >@{{ log.actor.preferredUsername }}</router-link
               >
               <router-link
                 slot="profile"
-                :to="{ name: RouteName.ADMIN_PROFILE, params: { id: log.object.id } }"
+                :to="{
+                  name: RouteName.ADMIN_PROFILE,
+                  params: { id: log.object.id },
+                }"
                 >{{ displayNameAndUsername(log.object) }}
               </router-link>
             </i18n>
@@ -118,12 +175,18 @@
             >
               <router-link
                 slot="moderator"
-                :to="{ name: RouteName.ADMIN_PROFILE, params: { id: log.actor.id } }"
+                :to="{
+                  name: RouteName.ADMIN_PROFILE,
+                  params: { id: log.actor.id },
+                }"
                 >@{{ log.actor.preferredUsername }}</router-link
               >
               <router-link
                 slot="profile"
-                :to="{ name: RouteName.ADMIN_PROFILE, params: { id: log.object.id } }"
+                :to="{
+                  name: RouteName.ADMIN_PROFILE,
+                  params: { id: log.object.id },
+                }"
                 >{{ displayNameAndUsername(log.object) }}
               </router-link>
             </i18n>
@@ -134,13 +197,19 @@
             >
               <router-link
                 slot="moderator"
-                :to="{ name: RouteName.ADMIN_PROFILE, params: { id: log.actor.id } }"
+                :to="{
+                  name: RouteName.ADMIN_PROFILE,
+                  params: { id: log.actor.id },
+                }"
                 >@{{ log.actor.preferredUsername }}</router-link
               >
               <router-link
                 v-if="log.object.confirmedAt"
                 slot="user"
-                :to="{ name: RouteName.ADMIN_USER_PROFILE, params: { id: log.object.id } }"
+                :to="{
+                  name: RouteName.ADMIN_USER_PROFILE,
+                  params: { id: log.object.id },
+                }"
                 >{{ log.object.email }}
               </router-link>
               <b v-else slot="user">{{ log.object.email }}</b>
diff --git a/js/src/views/Moderation/Report.vue b/js/src/views/Moderation/Report.vue
index 2534bb6a7..7ce48a807 100644
--- a/js/src/views/Moderation/Report.vue
+++ b/js/src/views/Moderation/Report.vue
@@ -3,20 +3,32 @@
     <nav class="breadcrumb" aria-label="breadcrumbs" v-if="report">
       <ul>
         <li>
-          <router-link :to="{ name: RouteName.MODERATION }">{{ $t("Moderation") }}</router-link>
+          <router-link :to="{ name: RouteName.MODERATION }">{{
+            $t("Moderation")
+          }}</router-link>
         </li>
         <li>
-          <router-link :to="{ name: RouteName.REPORTS }">{{ $t("Reports") }}</router-link>
+          <router-link :to="{ name: RouteName.REPORTS }">{{
+            $t("Reports")
+          }}</router-link>
         </li>
         <li class="is-active">
-          <router-link :to="{ name: RouteName.REPORT, params: { id: report.id } }">{{
-            $t("Report #{reportNumber}", { reportNumber: report.id })
-          }}</router-link>
+          <router-link
+            :to="{ name: RouteName.REPORT, params: { id: report.id } }"
+            >{{
+              $t("Report #{reportNumber}", { reportNumber: report.id })
+            }}</router-link
+          >
         </li>
       </ul>
     </nav>
     <section>
-      <b-message title="Error" type="is-danger" v-for="error in errors" :key="error">
+      <b-message
+        title="Error"
+        type="is-danger"
+        v-for="error in errors"
+        :key="error"
+      >
         {{ error }}
       </b-message>
       <div class="container" v-if="report">
@@ -116,7 +128,9 @@
               <tr>
                 <td>{{ $t("Status") }}</td>
                 <td>
-                  <span v-if="report.status === ReportStatusEnum.OPEN">{{ $t("Open") }}</span>
+                  <span v-if="report.status === ReportStatusEnum.OPEN">{{
+                    $t("Open")
+                  }}</span>
                   <span v-else-if="report.status === ReportStatusEnum.CLOSED">
                     {{ $t("Closed") }}
                   </span>
@@ -129,7 +143,12 @@
               <tr v-if="report.event && report.comments.length > 0">
                 <td>{{ $t("Event") }}</td>
                 <td>
-                  <router-link :to="{ name: RouteName.EVENT, params: { uuid: report.event.uuid } }">
+                  <router-link
+                    :to="{
+                      name: RouteName.EVENT,
+                      params: { uuid: report.event.uuid },
+                    }"
+                  >
                     {{ report.event.title }}
                   </router-link>
                   <span class="is-pulled-right">
@@ -159,7 +178,9 @@
         </div>
 
         <div class="box" v-if="report.event && report.comments.length === 0">
-          <router-link :to="{ name: RouteName.EVENT, params: { uuid: report.event.uuid } }">
+          <router-link
+            :to="{ name: RouteName.EVENT, params: { uuid: report.event.uuid } }"
+          >
             <h3 class="title">{{ report.event.title }}</h3>
             <p v-html="report.event.description" />
           </router-link>
@@ -184,10 +205,18 @@
               <div class="box" v-if="comment">
                 <article class="media">
                   <div class="media-left">
-                    <figure class="image is-48x48" v-if="comment.actor && comment.actor.avatar">
+                    <figure
+                      class="image is-48x48"
+                      v-if="comment.actor && 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" />
+                    <b-icon
+                      class="media-left"
+                      v-else
+                      size="is-large"
+                      icon="account-circle"
+                    />
                   </div>
                   <div class="media-content">
                     <div class="content">
@@ -214,10 +243,25 @@
         </div>
 
         <h2 class="title" v-if="report.notes.length > 0">{{ $t("Notes") }}</h2>
-        <div class="box note" v-for="note in report.notes" :id="`note-${note.id}`" :key="note.id">
+        <div
+          class="box note"
+          v-for="note in report.notes"
+          :id="`note-${note.id}`"
+          :key="note.id"
+        >
           <p>{{ note.content }}</p>
-          <router-link :to="{ name: RouteName.ADMIN_PROFILE, params: { id: note.moderator.id } }">
-            <img alt class="image" :src="note.moderator.avatar.url" v-if="note.moderator.avatar" />
+          <router-link
+            :to="{
+              name: RouteName.ADMIN_PROFILE,
+              params: { id: note.moderator.id },
+            }"
+          >
+            <img
+              alt
+              class="image"
+              :src="note.moderator.avatar.url"
+              v-if="note.moderator.avatar"
+            />
             @{{ note.moderator.preferredUsername }}
           </router-link>
           <br />
@@ -230,9 +274,15 @@
 
         <form @submit="addNote()">
           <b-field :label="$t('New note')" label-for="newNoteInput">
-            <b-input type="textarea" v-model="noteContent" id="newNoteInput"></b-input>
+            <b-input
+              type="textarea"
+              v-model="noteContent"
+              id="newNoteInput"
+            ></b-input>
           </b-field>
-          <b-button type="submit" @click="addNote">{{ $t("Add a note") }}</b-button>
+          <b-button type="submit" @click="addNote">{{
+            $t("Add a note")
+          }}</b-button>
         </form>
       </div>
     </section>
@@ -315,7 +365,9 @@ export default class Report extends Vue {
           if (cachedData == null) return;
           const { report } = cachedData;
           if (report === null) {
-            console.error("Cannot update event notes cache, because of null value.");
+            console.error(
+              "Cannot update event notes cache, because of null value."
+            );
             return;
           }
           const note = data.createReportNote;
@@ -419,7 +471,9 @@ export default class Report extends Vue {
           if (reportCachedData == null) return;
           const { report } = reportCachedData;
           if (report === null) {
-            console.error("Cannot update event notes cache, because of null value.");
+            console.error(
+              "Cannot update event notes cache, because of null value."
+            );
             return;
           }
           const updatedReport = data.updateReportStatus;
diff --git a/js/src/views/Moderation/ReportList.vue b/js/src/views/Moderation/ReportList.vue
index 4a134d518..d2b9856ba 100644
--- a/js/src/views/Moderation/ReportList.vue
+++ b/js/src/views/Moderation/ReportList.vue
@@ -3,40 +3,61 @@
     <nav class="breadcrumb" aria-label="breadcrumbs">
       <ul>
         <li>
-          <router-link :to="{ name: RouteName.MODERATION }">{{ $t("Moderation") }}</router-link>
+          <router-link :to="{ name: RouteName.MODERATION }">{{
+            $t("Moderation")
+          }}</router-link>
         </li>
         <li class="is-active">
-          <router-link :to="{ name: RouteName.REPORTS }">{{ $t("Reports") }}</router-link>
+          <router-link :to="{ name: RouteName.REPORTS }">{{
+            $t("Reports")
+          }}</router-link>
         </li>
       </ul>
     </nav>
     <section>
       <b-field>
-        <b-radio-button v-model="filterReports" :native-value="ReportStatusEnum.OPEN">{{
-          $t("Open")
-        }}</b-radio-button>
-        <b-radio-button v-model="filterReports" :native-value="ReportStatusEnum.RESOLVED">{{
-          $t("Resolved")
-        }}</b-radio-button>
-        <b-radio-button v-model="filterReports" :native-value="ReportStatusEnum.CLOSED">{{
-          $t("Closed")
-        }}</b-radio-button>
+        <b-radio-button
+          v-model="filterReports"
+          :native-value="ReportStatusEnum.OPEN"
+          >{{ $t("Open") }}</b-radio-button
+        >
+        <b-radio-button
+          v-model="filterReports"
+          :native-value="ReportStatusEnum.RESOLVED"
+          >{{ $t("Resolved") }}</b-radio-button
+        >
+        <b-radio-button
+          v-model="filterReports"
+          :native-value="ReportStatusEnum.CLOSED"
+          >{{ $t("Closed") }}</b-radio-button
+        >
       </b-field>
       <ul v-if="reports.length > 0">
         <li v-for="report in reports" :key="report.id">
-          <router-link :to="{ name: RouteName.REPORT, params: { reportId: report.id } }">
+          <router-link
+            :to="{ name: RouteName.REPORT, params: { reportId: report.id } }"
+          >
             <report-card :report="report" />
           </router-link>
         </li>
       </ul>
       <div v-else>
-        <b-message v-if="filterReports === ReportStatusEnum.OPEN" type="is-info">
+        <b-message
+          v-if="filterReports === ReportStatusEnum.OPEN"
+          type="is-info"
+        >
           {{ $t("No open reports yet") }}
         </b-message>
-        <b-message v-if="filterReports === ReportStatusEnum.RESOLVED" type="is-info">
+        <b-message
+          v-if="filterReports === ReportStatusEnum.RESOLVED"
+          type="is-info"
+        >
           {{ $t("No resolved reports yet") }}
         </b-message>
-        <b-message v-if="filterReports === ReportStatusEnum.CLOSED" type="is-info">
+        <b-message
+          v-if="filterReports === ReportStatusEnum.CLOSED"
+          type="is-info"
+        >
           {{ $t("No closed reports yet") }}
         </b-message>
       </div>
diff --git a/js/src/views/PageNotFound.vue b/js/src/views/PageNotFound.vue
index d2cb39aea..c5d70c07e 100644
--- a/js/src/views/PageNotFound.vue
+++ b/js/src/views/PageNotFound.vue
@@ -2,13 +2,26 @@
   <section class="section container has-text-centered not-found">
     <div class="columns is-vertical is-centered">
       <div class="column is-half">
-        <img src="/img/pics/2020-10-06-mobilizon-illustration-E_realisation.jpg" alt="" />
-        <h1 class="title">{{ $t("The page you're looking for doesn't exist.") }}</h1>
+        <img
+          src="/img/pics/2020-10-06-mobilizon-illustration-E_realisation.jpg"
+          alt=""
+        />
+        <h1 class="title">
+          {{ $t("The page you're looking for doesn't exist.") }}
+        </h1>
         <p>
-          {{ $t("Please make sure the address is correct and that the page hasn't been moved.") }}
+          {{
+            $t(
+              "Please make sure the address is correct and that the page hasn't been moved."
+            )
+          }}
         </p>
         <p>
-          {{ $t("Please contact this instance's Mobilizon admin if you think this is a mistake.") }}
+          {{
+            $t(
+              "Please contact this instance's Mobilizon admin if you think this is a mistake."
+            )
+          }}
         </p>
         <!--  The following should just be replaced with the SearchField component but it fails for some reason  -->
         <form @submit="enter">
@@ -21,7 +34,9 @@
               v-model="searchText"
             />
             <p class="control">
-              <button type="submit" class="button is-primary">{{ $t("Search") }}</button>
+              <button type="submit" class="button is-primary">
+                {{ $t("Search") }}
+              </button>
             </p>
           </b-field>
         </form>
diff --git a/js/src/views/Posts/Edit.vue b/js/src/views/Posts/Edit.vue
index fe30780ba..04ab604c6 100644
--- a/js/src/views/Posts/Edit.vue
+++ b/js/src/views/Posts/Edit.vue
@@ -20,7 +20,12 @@
           :type="errors.title ? 'is-danger' : null"
           :message="errors.title"
         >
-          <b-input size="is-large" aria-required="true" required v-model="post.title" />
+          <b-input
+            size="is-large"
+            aria-required="true"
+            required
+            v-model="post.title"
+          />
         </b-field>
 
         <tag-input v-model="post.tags" :data="tags" path="title" />
@@ -61,7 +66,9 @@
           <div class="navbar-menu">
             <div class="navbar-end">
               <span class="navbar-item">
-                <b-button type="is-text" @click="$router.go(-1)">{{ $t("Cancel") }}</b-button>
+                <b-button type="is-text" @click="$router.go(-1)">{{
+                  $t("Cancel")
+                }}</b-button>
               </span>
               <span class="navbar-item" v-if="this.isUpdate">
                 <b-button type="is-danger is-outlined" @click="deletePost">{{
@@ -76,7 +83,9 @@
               </span>
               <span class="navbar-item">
                 <b-button type="is-primary" native-type="submit">
-                  <span v-if="isUpdate === false || post.draft === true">{{ $t("Publish") }}</span>
+                  <span v-if="isUpdate === false || post.draft === true">{{
+                    $t("Publish")
+                  }}</span>
 
                   <span v-else>{{ $t("Update post") }}</span>
                 </b-button>
@@ -108,7 +117,12 @@ import GroupMixin from "@/mixins/group";
 import { PostVisibility } from "@/types/enums";
 import { TAGS } from "../../graphql/tags";
 import { CONFIG } from "../../graphql/config";
-import { FETCH_POST, CREATE_POST, UPDATE_POST, DELETE_POST } from "../../graphql/post";
+import {
+  FETCH_POST,
+  CREATE_POST,
+  UPDATE_POST,
+  DELETE_POST,
+} from "../../graphql/post";
 
 import { IPost } from "../../types/post.model";
 import Editor from "../../components/Editor.vue";
@@ -210,7 +224,10 @@ export default class EditPost extends mixins(GroupMixin) {
         },
       });
       if (data && data.updatePost) {
-        this.$router.push({ name: RouteName.POST, params: { slug: data.updatePost.slug } });
+        this.$router.push({
+          name: RouteName.POST,
+          params: { slug: data.updatePost.slug },
+        });
       }
     } else {
       try {
@@ -225,14 +242,22 @@ export default class EditPost extends mixins(GroupMixin) {
           },
         });
         if (data && data.createPost) {
-          this.$router.push({ name: RouteName.POST, params: { slug: data.createPost.slug } });
+          this.$router.push({
+            name: RouteName.POST,
+            params: { slug: data.createPost.slug },
+          });
         }
       } catch (error) {
         console.error(error);
-        this.errors = error.graphQLErrors.reduce((acc: { [key: string]: any }, localError: any) => {
-          acc[localError.field] = EditPost.transformMessage(localError.message);
-          return acc;
-        }, {});
+        this.errors = error.graphQLErrors.reduce(
+          (acc: { [key: string]: any }, localError: any) => {
+            acc[localError.field] = EditPost.transformMessage(
+              localError.message
+            );
+            return acc;
+          },
+          {}
+        );
       }
     }
   }
@@ -247,7 +272,9 @@ export default class EditPost extends mixins(GroupMixin) {
     if (data && this.post.attributedTo) {
       this.$router.push({
         name: RouteName.POSTS,
-        params: { preferredUsername: usernameWithDomain(this.post.attributedTo) },
+        params: {
+          preferredUsername: usernameWithDomain(this.post.attributedTo),
+        },
       });
     }
   }
@@ -278,9 +305,13 @@ export default class EditPost extends mixins(GroupMixin) {
     }
     try {
       if (this.post.picture) {
-        const oldPictureFile = (await buildFileFromIMedia(this.post.picture)) as File;
+        const oldPictureFile = (await buildFileFromIMedia(
+          this.post.picture
+        )) as File;
         const oldPictureFileContent = await readFileAsync(oldPictureFile);
-        const newPictureFileContent = await readFileAsync(this.pictureFile as File);
+        const newPictureFileContent = await readFileAsync(
+          this.pictureFile as File
+        );
         if (oldPictureFileContent === newPictureFileContent) {
           obj.picture = { mediaId: this.post.picture.id };
         }
@@ -303,7 +334,8 @@ export default class EditPost extends mixins(GroupMixin) {
     return (
       this.person &&
       this.person.memberships.elements.some(
-        ({ parent: { id }, role }) => id === this.actualGroup.id && roles.includes(role)
+        ({ parent: { id }, role }) =>
+          id === this.actualGroup.id && roles.includes(role)
       )
     );
   }
diff --git a/js/src/views/Posts/List.vue b/js/src/views/Posts/List.vue
index 5ddb22c22..e52c91a6e 100644
--- a/js/src/views/Posts/List.vue
+++ b/js/src/views/Posts/List.vue
@@ -158,7 +158,9 @@ export default class PostList extends mixins(GroupMixin) {
 
   get isCurrentActorMember(): boolean {
     if (!this.group || !this.memberships) return false;
-    return this.memberships.map(({ parent: { id } }) => id).includes(this.group.id);
+    return this.memberships
+      .map(({ parent: { id } }) => id)
+      .includes(this.group.id);
   }
 }
 </script>
diff --git a/js/src/views/Posts/Post.vue b/js/src/views/Posts/Post.vue
index 77d9f6b05..53b736837 100644
--- a/js/src/views/Posts/Post.vue
+++ b/js/src/views/Posts/Post.vue
@@ -8,20 +8,34 @@
             slot="author"
             :to="{
               name: RouteName.GROUP,
-              params: { preferredUsername: usernameWithDomain(post.attributedTo) },
+              params: {
+                preferredUsername: usernameWithDomain(post.attributedTo),
+              },
             }"
             >{{ post.attributedTo.name }}</router-link
           >
         </i18n>
-        <p class="published" v-if="!post.draft">{{ post.publishAt | formatDateTimeString }}</p>
-        <small v-if="post.visibility === PostVisibility.PRIVATE" class="has-text-grey">
+        <p class="published" v-if="!post.draft">
+          {{ post.publishAt | formatDateTimeString }}
+        </p>
+        <small
+          v-if="post.visibility === PostVisibility.PRIVATE"
+          class="has-text-grey"
+        >
           <b-icon icon="lock" size="is-small" />
-          {{ $t("Accessible only to members", { group: post.attributedTo.name }) }}
+          {{
+            $t("Accessible only to members", { group: post.attributedTo.name })
+          }}
         </small>
         <p class="buttons" v-if="isCurrentActorMember">
-          <b-tag type="is-warning" size="is-medium" v-if="post.draft">{{ $t("Draft") }}</b-tag>
+          <b-tag type="is-warning" size="is-medium" v-if="post.draft">{{
+            $t("Draft")
+          }}</b-tag>
           <router-link
-            v-if="currentActor.id === post.author.id || isCurrentActorAGroupModerator"
+            v-if="
+              currentActor.id === post.author.id ||
+              isCurrentActorAGroupModerator
+            "
             :to="{ name: RouteName.POST_EDIT, params: { slug: post.slug } }"
             tag="button"
             class="button is-text"
@@ -128,7 +142,9 @@ export default class Post extends mixins(GroupMixin) {
 
   get isCurrentActorMember(): boolean {
     if (!this.post.attributedTo || !this.memberships) return false;
-    return this.memberships.map(({ parent: { id } }) => id).includes(this.post.attributedTo.id);
+    return this.memberships
+      .map(({ parent: { id } }) => id)
+      .includes(this.post.attributedTo.id);
   }
 }
 </script>
diff --git a/js/src/views/Resources/ResourceFolder.vue b/js/src/views/Resources/ResourceFolder.vue
index 7e7188cec..83873920d 100644
--- a/js/src/views/Resources/ResourceFolder.vue
+++ b/js/src/views/Resources/ResourceFolder.vue
@@ -21,7 +21,10 @@
           >
         </li>
         <li
-          :class="{ 'is-active': index + 1 === ResourceMixin.resourcePathArray(resource).length }"
+          :class="{
+            'is-active':
+              index + 1 === ResourceMixin.resourcePathArray(resource).length,
+          }"
           v-for="(pathFragment, index) in filteredPath"
           :key="pathFragment"
         >
@@ -29,7 +32,10 @@
             :to="{
               name: RouteName.RESOURCE_FOLDER,
               params: {
-                path: ResourceMixin.resourcePathArray(resource).slice(0, index + 1),
+                path: ResourceMixin.resourcePathArray(resource).slice(
+                  0,
+                  index + 1
+                ),
                 preferredUsername: usernameWithDomain(resource.actor),
               },
             }"
@@ -44,11 +50,17 @@
               <b-icon icon="folder" />
               {{ $t("New folder") }}
             </b-dropdown-item>
-            <b-dropdown-item aria-role="listitem" @click="createLinkResourceModal = true">
+            <b-dropdown-item
+              aria-role="listitem"
+              @click="createLinkResourceModal = true"
+            >
               <b-icon icon="link" />
               {{ $t("New link") }}
             </b-dropdown-item>
-            <hr class="dropdown-divider" v-if="config.resourceProviders.length" />
+            <hr
+              class="dropdown-divider"
+              v-if="config.resourceProviders.length"
+            />
             <b-dropdown-item
               aria-role="listitem"
               v-for="resourceProvider in config.resourceProviders"
@@ -64,7 +76,9 @@
     </nav>
     <section>
       <p v-if="resource.path === '/'" class="module-description">
-        {{ $t("A place to store links to documents or resources of any type.") }}
+        {{
+          $t("A place to store links to documents or resources of any type.")
+        }}
       </p>
       <div class="list-header">
         <div class="list-header-right">
@@ -94,7 +108,10 @@
         v-if="resource.children.total > 0"
       >
         <transition-group>
-          <div v-for="localResource in resource.children.elements" :key="localResource.id">
+          <div
+            v-for="localResource in resource.children.elements"
+            :key="localResource.id"
+          >
             <div class="resource-item">
               <div
                 class="resource-checkbox"
@@ -121,7 +138,10 @@
           </div>
         </transition-group>
       </draggable>
-      <div class="content has-text-centered has-text-grey" v-if="resource.children.total === 0">
+      <div
+        class="content has-text-centered has-text-grey"
+        v-if="resource.children.total === 0"
+      >
         <p>{{ $t("No resources in this folder") }}</p>
       </div>
     </section>
@@ -133,7 +153,9 @@
               <b-input aria-required="true" v-model="updatedResource.title" />
             </b-field>
 
-            <b-button native-type="submit">{{ $t("Rename resource") }}</b-button>
+            <b-button native-type="submit">{{
+              $t("Rename resource")
+            }}</b-button>
           </form>
         </section>
       </div>
@@ -158,7 +180,9 @@
               <b-input aria-required="true" v-model="newResource.title" />
             </b-field>
 
-            <b-button native-type="submit">{{ createResourceButtonLabel }}</b-button>
+            <b-button native-type="submit">{{
+              createResourceButtonLabel
+            }}</b-button>
           </form>
         </section>
       </div>
@@ -188,7 +212,9 @@
               <b-input type="textarea" v-model="newResource.summary" />
             </b-field>
 
-            <b-button native-type="submit">{{ $t("Create resource") }}</b-button>
+            <b-button native-type="submit">{{
+              $t("Create resource")
+            }}</b-button>
           </form>
         </section>
       </div>
@@ -204,7 +230,11 @@ import { RefetchQueryDescription } from "apollo-client/core/watchQueryOptions";
 import { CURRENT_ACTOR_CLIENT } from "../../graphql/actor";
 import { IActor, usernameWithDomain } from "../../types/actor";
 import RouteName from "../../router/name";
-import { IResource, mapServiceTypeToIcon, IProvider } from "../../types/resource";
+import {
+  IResource,
+  mapServiceTypeToIcon,
+  IProvider,
+} from "../../types/resource";
 import {
   CREATE_RESOURCE,
   DELETE_RESOURCE,
@@ -320,7 +350,9 @@ export default class Resources extends Mixins(ResourceMixin) {
           actorId: this.resource.actor.id,
           resourceUrl: this.newResource.resourceUrl,
           parentId:
-            this.resource.id && this.resource.id.startsWith("root_") ? null : this.resource.id,
+            this.resource.id && this.resource.id.startsWith("root_")
+              ? null
+              : this.resource.id,
           type: this.newResource.type,
         },
         refetchQueries: () => this.postRefreshQueries(),
@@ -379,7 +411,9 @@ export default class Resources extends Mixins(ResourceMixin) {
     const randomString = [...Array(10)]
       .map(() => Math.random().toString(36)[3])
       .join("")
-      .replace(/(.|$)/g, (c) => c[!Math.round(Math.random()) ? "toString" : "toLowerCase"]());
+      .replace(/(.|$)/g, (c) =>
+        c[!Math.round(Math.random()) ? "toString" : "toLowerCase"]()
+      );
     switch (provider.type) {
       case "ethercalc":
       case "etherpad":
@@ -442,7 +476,9 @@ export default class Resources extends Mixins(ResourceMixin) {
         },
         refetchQueries: () => this.postRefreshQueries(),
       });
-      this.validCheckedResources = this.validCheckedResources.filter((id) => id !== resourceID);
+      this.validCheckedResources = this.validCheckedResources.filter(
+        (id) => id !== resourceID
+      );
       delete this.checkedResources[resourceID];
     } catch (e) {
       console.error(e);
@@ -460,8 +496,12 @@ export default class Resources extends Mixins(ResourceMixin) {
     this.updatedResource = { ...resource };
   }
 
-  async moveResource(resource: IResource, oldParent: IResource | undefined): Promise<void> {
-    const parentPath = oldParent && oldParent.path ? oldParent.path || "/" : "/";
+  async moveResource(
+    resource: IResource,
+    oldParent: IResource | undefined
+  ): Promise<void> {
+    const parentPath =
+      oldParent && oldParent.path ? oldParent.path || "/" : "/";
     await this.updateResource(resource, parentPath);
     this.moveModal = false;
   }
@@ -471,7 +511,10 @@ export default class Resources extends Mixins(ResourceMixin) {
     this.renameModal = false;
   }
 
-  async updateResource(resource: IResource, parentPath: string | null = null): Promise<void> {
+  async updateResource(
+    resource: IResource,
+    parentPath: string | null = null
+  ): Promise<void> {
     try {
       await this.$apollo.mutate<{ updateResource: IResource }>({
         mutation: UPDATE_RESOURCE,
@@ -483,7 +526,8 @@ export default class Resources extends Mixins(ResourceMixin) {
         },
         refetchQueries: () => this.postRefreshQueries(),
         update: (store, { data }) => {
-          if (!data || data.updateResource == null || parentPath == null) return;
+          if (!data || data.updateResource == null || parentPath == null)
+            return;
           if (!this.resource.actor) return;
 
           console.log("Removing ressource from old parent");
@@ -497,7 +541,9 @@ export default class Resources extends Mixins(ResourceMixin) {
           if (oldParentCachedData == null) return;
           const { resource: oldParentCachedResource } = oldParentCachedData;
           if (oldParentCachedResource == null) {
-            console.error("Cannot update resource cache, because of null value.");
+            console.error(
+              "Cannot update resource cache, because of null value."
+            );
             return;
           }
           const updatedResource: IResource = data.updateResource;
@@ -532,7 +578,9 @@ export default class Resources extends Mixins(ResourceMixin) {
           if (newParentCachedData == null) return;
           const { resource: newParentCachedResource } = newParentCachedData;
           if (newParentCachedResource == null) {
-            console.error("Cannot update resource cache, because of null value.");
+            console.error(
+              "Cannot update resource cache, because of null value."
+            );
             return;
           }
 
diff --git a/js/src/views/Search.vue b/js/src/views/Search.vue
index 54ec306af..2c2fcf6fc 100644
--- a/js/src/views/Search.vue
+++ b/js/src/views/Search.vue
@@ -17,7 +17,9 @@
               size="is-large"
               expanded
               v-model="search"
-              :placeholder="$t('For instance: London, Taekwondo, Architecture…')"
+              :placeholder="
+                $t('For instance: London, Taekwondo, Architecture…')
+              "
             />
           </b-field>
           <b-field grouped group-multiline position="is-right" expanded>
@@ -41,7 +43,11 @@
             </b-field>
             <b-field :label="$t('Date')" label-for="date">
               <b-select v-model="when" id="date" :disabled="activeTab !== 0">
-                <option v-for="(option, index) in options" :key="index" :value="option">
+                <option
+                  v-for="(option, index) in options"
+                  :key="index"
+                  :value="option"
+                >
                   {{ option.label }}
                 </option>
               </b-select>
@@ -54,13 +60,19 @@
       <b-loading :active.sync="$apollo.loading"></b-loading>
       <h2 class="title">{{ $t("Featured events") }}</h2>
       <div v-if="events.length > 0" class="columns is-multiline">
-        <div class="column is-one-third-desktop" v-for="event in events" :key="event.uuid">
+        <div
+          class="column is-one-third-desktop"
+          v-for="event in events"
+          :key="event.uuid"
+        >
           <EventCard :event="event" />
         </div>
       </div>
-      <b-message v-else-if="events.length === 0 && $apollo.loading === false" type="is-danger">{{
-        $t("No events found")
-      }}</b-message>
+      <b-message
+        v-else-if="events.length === 0 && $apollo.loading === false"
+        type="is-danger"
+        >{{ $t("No events found") }}</b-message
+      >
     </section>
     <b-tabs v-else v-model="activeTab" type="is-boxed" class="searchTabs">
       <b-tab-item>
@@ -240,7 +252,11 @@ export default class Search extends Vue {
 
   events: IEvent[] = [];
 
-  searchEvents: Paginate<IEvent> & { initial: boolean } = { total: 0, elements: [], initial: true };
+  searchEvents: Paginate<IEvent> & { initial: boolean } = {
+    total: 0,
+    elements: [],
+    initial: true,
+  };
 
   searchGroups: Paginate<IGroup> = { total: 0, elements: [] };
 
@@ -250,7 +266,8 @@ export default class Search extends Vue {
 
   search: string = (this.$route.query.term as string) || "";
 
-  activeTab: SearchTabs = tabsName[this.$route.query.searchType as "events" | "groups"] || 0;
+  activeTab: SearchTabs =
+    tabsName[this.$route.query.searchType as "events" | "groups"] || 0;
 
   location: IAddress = new Address();
 
@@ -277,7 +294,9 @@ export default class Search extends Vue {
     },
     {
       label: this.$t("Next week") as string,
-      start: startOfWeek(addWeeks(new Date(), 1), { locale: this.$dateFnsLocale }),
+      start: startOfWeek(addWeeks(new Date(), 1), {
+        locale: this.$dateFnsLocale,
+      }),
       end: endOfWeek(addWeeks(new Date(), 1), { locale: this.$dateFnsLocale }),
     },
     {
@@ -343,7 +362,10 @@ export default class Search extends Vue {
     const now = new Date();
     const endOfWeekDate = endOfWeek(now, { locale: this.$dateFnsLocale });
     const startOfWeekDate = startOfWeek(now, { locale: this.$dateFnsLocale });
-    const [start, end] = eachWeekendOfInterval({ start: startOfWeekDate, end: endOfWeekDate });
+    const [start, end] = eachWeekendOfInterval({
+      start: startOfWeekDate,
+      end: endOfWeekDate,
+    });
     return { start: startOfDay(start), end: endOfDay(end) };
   }
 
diff --git a/js/src/views/Settings.vue b/js/src/views/Settings.vue
index 6d51de272..0874637e6 100644
--- a/js/src/views/Settings.vue
+++ b/js/src/views/Settings.vue
@@ -23,7 +23,8 @@ import { ICurrentUser } from "../types/current-user.model";
   apollo: {
     identities: {
       query: IDENTITIES,
-      update: (data) => data.identities.map((identity: IPerson) => new Person(identity)),
+      update: (data) =>
+        data.identities.map((identity: IPerson) => new Person(identity)),
     },
     currentUser: CURRENT_USER_CLIENT,
   },
diff --git a/js/src/views/Settings/AccountSettings.vue b/js/src/views/Settings/AccountSettings.vue
index 1402e4f97..3702a3356 100644
--- a/js/src/views/Settings/AccountSettings.vue
+++ b/js/src/views/Settings/AccountSettings.vue
@@ -3,7 +3,9 @@
     <nav class="breadcrumb" aria-label="breadcrumbs">
       <ul>
         <li>
-          <router-link :to="{ name: RouteName.ACCOUNT_SETTINGS }">{{ $t("Account") }}</router-link>
+          <router-link :to="{ name: RouteName.ACCOUNT_SETTINGS }">{{
+            $t("Account")
+          }}</router-link>
         </li>
         <li class="is-active">
           <router-link :to="{ name: RouteName.ACCOUNT_SETTINGS_GENERAL }">{{
@@ -26,9 +28,12 @@
       </i18n>
       <b-message v-if="!canChangeEmail" type="is-warning" :closable="false">
         {{
-          $t("Your email address was automatically set based on your {provider} account.", {
-            provider: providerName(loggedUser.provider),
-          })
+          $t(
+            "Your email address was automatically set based on your {provider} account.",
+            {
+              provider: providerName(loggedUser.provider),
+            }
+          )
         }}
       </b-message>
       <b-notification
@@ -40,9 +45,19 @@
         v-for="error in changeEmailErrors"
         >{{ error }}</b-notification
       >
-      <form @submit.prevent="resetEmailAction" ref="emailForm" class="form" v-if="canChangeEmail">
+      <form
+        @submit.prevent="resetEmailAction"
+        ref="emailForm"
+        class="form"
+        v-if="canChangeEmail"
+      >
         <b-field :label="$t('New email')">
-          <b-input aria-required="true" required type="email" v-model="newEmail" />
+          <b-input
+            aria-required="true"
+            required
+            type="email"
+            v-model="newEmail"
+          />
         </b-field>
         <p class="help">{{ $t("You'll receive a confirmation email.") }}</p>
         <b-field :label="$t('Password')">
@@ -67,9 +82,12 @@
       </div>
       <b-message v-if="!canChangePassword" type="is-warning" :closable="false">
         {{
-          $t("You can't change your password because you are registered through {provider}.", {
-            provider: providerName(loggedUser.provider),
-          })
+          $t(
+            "You can't change your password because you are registered through {provider}.",
+            {
+              provider: providerName(loggedUser.provider),
+            }
+          )
         }}
       </b-message>
       <b-notification
@@ -109,7 +127,9 @@
         </b-field>
         <button
           class="button is-primary"
-          :disabled="!($refs.passwordForm && $refs.passwordForm.checkValidity())"
+          :disabled="
+            !($refs.passwordForm && $refs.passwordForm.checkValidity())
+          "
         >
           {{ $t("Change my password") }}
         </button>
@@ -117,7 +137,9 @@
       <div class="setting-title">
         <h2>{{ $t("Delete account") }}</h2>
       </div>
-      <p class="content">{{ $t("Deleting my account will delete all of my identities.") }}</p>
+      <p class="content">
+        {{ $t("Deleting my account will delete all of my identities.") }}
+      </p>
       <b-button @click="openDeleteAccountModal" type="is-danger">
         {{ $t("Delete my account") }}
       </b-button>
@@ -132,8 +154,12 @@
           <div class="hero-body has-text-centered">
             <div class="container">
               <div class="columns">
-                <div class="column is-one-third-desktop is-offset-one-third-desktop">
-                  <h1 class="title">{{ $t("Deleting your Mobilizon account") }}</h1>
+                <div
+                  class="column is-one-third-desktop is-offset-one-third-desktop"
+                >
+                  <h1 class="title">
+                    {{ $t("Deleting your Mobilizon account") }}
+                  </h1>
                   <p class="content">
                     {{
                       $t(
@@ -141,10 +167,14 @@
                       )
                     }}
                     <br />
-                    <b>{{ $t("There will be no way to recover your data.") }}</b>
+                    <b>{{
+                      $t("There will be no way to recover your data.")
+                    }}</b>
                   </p>
                   <p class="content" v-if="hasUserGotAPassword">
-                    {{ $t("Please enter your password to confirm this action.") }}
+                    {{
+                      $t("Please enter your password to confirm this action.")
+                    }}
                   </p>
                   <form @submit.prevent="deleteAccount">
                     <b-field v-if="hasUserGotAPassword">
@@ -156,12 +186,19 @@
                         :placeholder="$t('Password')"
                       />
                     </b-field>
-                    <b-button native-type="submit" type="is-danger" size="is-large">
+                    <b-button
+                      native-type="submit"
+                      type="is-danger"
+                      size="is-large"
+                    >
                       {{ $t("Delete everything") }}
                     </b-button>
                   </form>
                   <div class="cancel-button">
-                    <b-button type="is-light" @click="isDeleteAccountModalActive = false">
+                    <b-button
+                      type="is-light"
+                      @click="isDeleteAccountModalActive = false"
+                    >
                       {{ $t("Cancel") }}
                     </b-button>
                   </div>
@@ -179,7 +216,12 @@
 import { IAuthProvider } from "@/types/enums";
 import { Component, Vue, Ref } from "vue-property-decorator";
 import { Route } from "vue-router";
-import { CHANGE_EMAIL, CHANGE_PASSWORD, DELETE_ACCOUNT, LOGGED_USER } from "../../graphql/user";
+import {
+  CHANGE_EMAIL,
+  CHANGE_PASSWORD,
+  DELETE_ACCOUNT,
+  LOGGED_USER,
+} from "../../graphql/user";
 import RouteName from "../../router/name";
 import { IUser } from "../../types/current-user.model";
 import { logout, SELECTED_PROVIDERS } from "../../utils/auth";
@@ -248,7 +290,9 @@ export default class AccountSettings extends Vue {
         },
       });
 
-      this.$notifier.success(this.$t("The password was successfully changed") as string);
+      this.$notifier.success(
+        this.$t("The password was successfully changed") as string
+      );
     } catch (err) {
       this.handleErrors("password", err);
     }
@@ -264,12 +308,16 @@ export default class AccountSettings extends Vue {
       await this.$apollo.mutate({
         mutation: DELETE_ACCOUNT,
         variables: {
-          password: this.hasUserGotAPassword ? this.passwordForAccountDeletion : null,
+          password: this.hasUserGotAPassword
+            ? this.passwordForAccountDeletion
+            : null,
         },
       });
       await logout(this.$apollo.provider.defaultClient);
       this.$buefy.notification.open({
-        message: this.$t("Your account has been successfully deleted") as string,
+        message: this.$t(
+          "Your account has been successfully deleted"
+        ) as string,
         type: "is-success",
         position: "is-bottom-right",
         duration: 5000,
@@ -300,7 +348,8 @@ export default class AccountSettings extends Vue {
   get hasUserGotAPassword(): boolean {
     return (
       this.loggedUser &&
-      (this.loggedUser.provider == null || this.loggedUser.provider === IAuthProvider.LDAP)
+      (this.loggedUser.provider == null ||
+        this.loggedUser.provider === IAuthProvider.LDAP)
     );
   }
 
diff --git a/js/src/views/Settings/Notifications.vue b/js/src/views/Settings/Notifications.vue
index 82e76d9bd..aed37cf67 100644
--- a/js/src/views/Settings/Notifications.vue
+++ b/js/src/views/Settings/Notifications.vue
@@ -3,7 +3,9 @@
     <nav class="breadcrumb" aria-label="breadcrumbs">
       <ul>
         <li>
-          <router-link :to="{ name: RouteName.ACCOUNT_SETTINGS }">{{ $t("Account") }}</router-link>
+          <router-link :to="{ name: RouteName.ACCOUNT_SETTINGS }">{{
+            $t("Account")
+          }}</router-link>
         </li>
         <li class="is-active">
           <router-link :to="{ name: RouteName.NOTIFICATIONS }">{{
@@ -27,11 +29,16 @@
         {{ $t("Other notification options:") }}
       </p>
       <div class="field">
-        <b-checkbox v-model="notificationOnDay" @input="updateSetting({ notificationOnDay })">
+        <b-checkbox
+          v-model="notificationOnDay"
+          @input="updateSetting({ notificationOnDay })"
+        >
           <strong>{{ $t("Notification on the day of the event") }}</strong>
           <p>
             {{
-              $t("We'll use your timezone settings to send a recap of the morning of the event.")
+              $t(
+                "We'll use your timezone settings to send a recap of the morning of the event."
+              )
             }}
           </p>
           <div v-if="loggedUser.settings && loggedUser.settings.timezone">
@@ -40,18 +47,29 @@
                 timezone: loggedUser.settings.timezone,
               })
             }}</em>
-            <router-link class="change-timezone" :to="{ name: RouteName.PREFERENCES }">{{
-              $t("Change timezone")
-            }}</router-link>
+            <router-link
+              class="change-timezone"
+              :to="{ name: RouteName.PREFERENCES }"
+              >{{ $t("Change timezone") }}</router-link
+            >
           </div>
-          <span v-else>{{ $t("You can pick your timezone into your preferences.") }}</span>
+          <span v-else>{{
+            $t("You can pick your timezone into your preferences.")
+          }}</span>
         </b-checkbox>
       </div>
       <div class="field">
-        <b-checkbox v-model="notificationEachWeek" @input="updateSetting({ notificationEachWeek })">
+        <b-checkbox
+          v-model="notificationEachWeek"
+          @input="updateSetting({ notificationEachWeek })"
+        >
           <strong>{{ $t("Recap every week") }}</strong>
           <p>
-            {{ $t("You'll get a weekly recap every Monday for upcoming events, if you have any.") }}
+            {{
+              $t(
+                "You'll get a weekly recap every Monday for upcoming events, if you have any."
+              )
+            }}
           </p>
         </b-checkbox>
       </div>
@@ -76,7 +94,9 @@
         <h2>{{ $t("Organizer notifications") }}</h2>
       </div>
       <div class="field is-primary">
-        <strong>{{ $t("Notifications for manually approved participations to an event") }}</strong>
+        <strong>{{
+          $t("Notifications for manually approved participations to an event")
+        }}</strong>
         <p>
           {{
             $t(
@@ -130,7 +150,9 @@ export default class Notifications extends Vue {
   mounted(): void {
     this.notificationPendingParticipationValues = {
       [INotificationPendingEnum.NONE]: this.$t("Do not receive any mail"),
-      [INotificationPendingEnum.DIRECT]: this.$t("Receive one email per request"),
+      [INotificationPendingEnum.DIRECT]: this.$t(
+        "Receive one email per request"
+      ),
       [INotificationPendingEnum.ONE_HOUR]: this.$t("Hourly email summary"),
       [INotificationPendingEnum.ONE_DAY]: this.$t("Daily email summary"),
     };
diff --git a/js/src/views/Settings/Preferences.vue b/js/src/views/Settings/Preferences.vue
index d926f6bba..925243ea0 100644
--- a/js/src/views/Settings/Preferences.vue
+++ b/js/src/views/Settings/Preferences.vue
@@ -3,10 +3,14 @@
     <nav class="breadcrumb" aria-label="breadcrumbs">
       <ul>
         <li>
-          <router-link :to="{ name: RouteName.ACCOUNT_SETTINGS }">{{ $t("Account") }}</router-link>
+          <router-link :to="{ name: RouteName.ACCOUNT_SETTINGS }">{{
+            $t("Account")
+          }}</router-link>
         </li>
         <li class="is-active">
-          <router-link :to="{ name: RouteName.PREFERENCES }">{{ $t("Preferences") }}</router-link>
+          <router-link :to="{ name: RouteName.PREFERENCES }">{{
+            $t("Preferences")
+          }}</router-link>
         </li>
       </ul>
     </nav>
@@ -28,7 +32,11 @@
           :loading="!config || !loggedUser"
           v-model="selectedTimezone"
         >
-          <optgroup :label="group" v-for="(groupTimezones, group) in timezones" :key="group">
+          <optgroup
+            :label="group"
+            v-for="(groupTimezones, group) in timezones"
+            :key="group"
+          >
             <option
               v-for="timezone in groupTimezones"
               :value="`${group}/${timezone}`"
@@ -44,7 +52,9 @@
           timezone: Intl.DateTimeFormat().resolvedOptions().timeZone,
         })
       }}</em>
-      <b-message v-else type="is-danger">{{ $t("Unable to detect timezone.") }}</b-message>
+      <b-message v-else type="is-danger">{{
+        $t("Unable to detect timezone.")
+      }}</b-message>
     </div>
   </div>
 </template>
@@ -52,7 +62,11 @@
 import { Component, Vue, Watch } from "vue-property-decorator";
 import { saveLocaleData } from "@/utils/auth";
 import { TIMEZONES } from "../../graphql/config";
-import { USER_SETTINGS, SET_USER_SETTINGS, UPDATE_USER_LOCALE } from "../../graphql/user";
+import {
+  USER_SETTINGS,
+  SET_USER_SETTINGS,
+  UPDATE_USER_LOCALE,
+} from "../../graphql/user";
 import { IConfig } from "../../types/config.model";
 import { IUser } from "../../types/current-user.model";
 import langs from "../../i18n/langs.json";
@@ -93,28 +107,39 @@ export default class Preferences extends Vue {
 
   // eslint-disable-next-line class-methods-use-this
   sanitize(timezone: string): string {
-    return timezone.split("_").join(" ").replace("St ", "St. ").split("/").join(" - ");
+    return timezone
+      .split("_")
+      .join(" ")
+      .replace("St ", "St. ")
+      .split("/")
+      .join(" - ");
   }
 
   get timezones(): Record<string, string[]> {
     if (!this.config || !this.config.timezones) return {};
-    return this.config.timezones.reduce((acc: { [key: string]: Array<string> }, val: string) => {
-      const components = val.split("/");
-      const [prefix, suffix] = [components.shift() as string, components.join("/")];
-      const pushOrCreate = (
-        acc2: { [key: string]: Array<string> },
-        prefix2: string,
-        suffix2: string
-      ) => {
-        // eslint-disable-next-line no-param-reassign
-        (acc2[prefix2] = acc2[prefix2] || []).push(suffix2);
-        return acc2;
-      };
-      if (suffix) {
-        return pushOrCreate(acc, prefix, suffix);
-      }
-      return pushOrCreate(acc, this.$t("Other") as string, prefix);
-    }, {});
+    return this.config.timezones.reduce(
+      (acc: { [key: string]: Array<string> }, val: string) => {
+        const components = val.split("/");
+        const [prefix, suffix] = [
+          components.shift() as string,
+          components.join("/"),
+        ];
+        const pushOrCreate = (
+          acc2: { [key: string]: Array<string> },
+          prefix2: string,
+          suffix2: string
+        ) => {
+          // eslint-disable-next-line no-param-reassign
+          (acc2[prefix2] = acc2[prefix2] || []).push(suffix2);
+          return acc2;
+        };
+        if (suffix) {
+          return pushOrCreate(acc, prefix, suffix);
+        }
+        return pushOrCreate(acc, this.$t("Other") as string, prefix);
+      },
+      {}
+    );
   }
 
   @Watch("selectedTimezone")
diff --git a/js/src/views/Todos/Todo.vue b/js/src/views/Todos/Todo.vue
index 862fb41c8..89e5288df 100644
--- a/js/src/views/Todos/Todo.vue
+++ b/js/src/views/Todos/Todo.vue
@@ -6,13 +6,20 @@
           <router-link
             :to="{
               name: RouteName.GROUP,
-              params: { preferredUsername: todo.todoList.actor.preferredUsername },
+              params: {
+                preferredUsername: todo.todoList.actor.preferredUsername,
+              },
             }"
             >{{ todo.todoList.actor.name }}</router-link
           >
         </li>
         <li>
-          <router-link :to="{ name: RouteName.TODO_LIST, params: { id: todo.todoList.id } }">
+          <router-link
+            :to="{
+              name: RouteName.TODO_LIST,
+              params: { id: todo.todoList.id },
+            }"
+          >
             {{ todo.todoList.title }}
           </router-link>
         </li>
diff --git a/js/src/views/Todos/TodoList.vue b/js/src/views/Todos/TodoList.vue
index c8bdc1228..415d019e0 100644
--- a/js/src/views/Todos/TodoList.vue
+++ b/js/src/views/Todos/TodoList.vue
@@ -21,7 +21,9 @@
           >
         </li>
         <li class="is-active">
-          <router-link :to="{ name: RouteName.TODO_LIST, params: { id: todoList.id } }">
+          <router-link
+            :to="{ name: RouteName.TODO_LIST, params: { id: todoList.id } }"
+          >
             {{ todoList.title }}
           </router-link>
         </li>
@@ -95,7 +97,9 @@ export default class TodoList extends Vue {
         if (cachedData == null) return;
         const { todoList } = cachedData;
         if (todoList === null) {
-          console.error("Cannot update event notes cache, because of null value.");
+          console.error(
+            "Cannot update event notes cache, because of null value."
+          );
           return;
         }
         const newTodo: ITodo = data.createTodo;
diff --git a/js/src/views/Todos/TodoLists.vue b/js/src/views/Todos/TodoLists.vue
index 8886b455b..1d86d5a43 100644
--- a/js/src/views/Todos/TodoLists.vue
+++ b/js/src/views/Todos/TodoLists.vue
@@ -25,7 +25,9 @@
     <section>
       <p>
         {{
-          $t("Create to-do lists for all the tasks you need to do, assign them and set due dates.")
+          $t(
+            "Create to-do lists for all the tasks you need to do, assign them and set due dates."
+          )
         }}
       </p>
       <form class="form" @submit.prevent="createNewTodoList">
@@ -35,7 +37,9 @@
         <b-button native-type="submit">{{ $t("Create a new list") }}</b-button>
       </form>
       <div v-for="todoList in todoLists" :key="todoList.id">
-        <router-link :to="{ name: RouteName.TODO_LIST, params: { id: todoList.id } }">
+        <router-link
+          :to="{ name: RouteName.TODO_LIST, params: { id: todoList.id } }"
+        >
           <h3 class="is-size-3">
             {{
               $tc("{title} ({count} todos)", todoList.todos.total, {
@@ -45,7 +49,11 @@
             }}
           </h3>
         </router-link>
-        <compact-todo :todo="todo" v-for="todo in todoList.todos.elements" :key="todo.id" />
+        <compact-todo
+          :todo="todo"
+          v-for="todo in todoList.todos.elements"
+          :key="todo.id"
+        />
       </div>
     </section>
   </div>
diff --git a/js/src/views/User/EmailValidate.vue b/js/src/views/User/EmailValidate.vue
index 9ebd80620..1a3fd435b 100644
--- a/js/src/views/User/EmailValidate.vue
+++ b/js/src/views/User/EmailValidate.vue
@@ -1,6 +1,8 @@
 <template>
   <section class="section container">
-    <h1 class="title" v-if="loading">{{ $t("Your email is being changed") }}</h1>
+    <h1 class="title" v-if="loading">
+      {{ $t("Your email is being changed") }}
+    </h1>
     <div v-else>
       <div v-if="failed">
         <b-message :title="$t('Error while changing email')" type="is-danger">
diff --git a/js/src/views/User/Login.vue b/js/src/views/User/Login.vue
index 0531acacd..88c11e713 100644
--- a/js/src/views/User/Login.vue
+++ b/js/src/views/User/Login.vue
@@ -15,9 +15,12 @@
           type="is-danger"
           :aria-close-label="$t('Close')"
           >{{
-            $t("Error while login with {provider}. Retry or login another way.", {
-              provider: $route.query.provider,
-            })
+            $t(
+              "Error while login with {provider}. Retry or login another way.",
+              {
+                provider: $route.query.provider,
+              }
+            )
           }}</b-message
         >
         <b-message
@@ -25,12 +28,20 @@
           type="is-danger"
           :aria-close-label="$t('Close')"
           >{{
-            $t("Error while login with {provider}. This login provider doesn't exist.", {
-              provider: $route.query.provider,
-            })
+            $t(
+              "Error while login with {provider}. This login provider doesn't exist.",
+              {
+                provider: $route.query.provider,
+              }
+            )
           }}</b-message
         >
-        <b-message :title="$t('Error')" type="is-danger" v-for="error in errors" :key="error">
+        <b-message
+          :title="$t('Error')"
+          type="is-danger"
+          v-for="error in errors"
+          :key="error"
+        >
           {{ error }}
         </b-message>
         <form @submit="loginAction">
@@ -56,24 +67,35 @@
           </b-field>
 
           <p class="control has-text-centered" v-if="!submitted">
-            <button class="button is-primary is-large">{{ $t("Login") }}</button>
+            <button class="button is-primary is-large">
+              {{ $t("Login") }}
+            </button>
           </p>
           <b-loading :is-full-page="false" v-model="submitted" />
 
-          <div class="control" v-if="config && config.auth.oauthProviders.length > 0">
+          <div
+            class="control"
+            v-if="config && config.auth.oauthProviders.length > 0"
+          >
             <auth-providers :oauthProviders="config.auth.oauthProviders" />
           </div>
 
           <p class="control">
             <router-link
               class="button is-text"
-              :to="{ name: RouteName.SEND_PASSWORD_RESET, params: { email: credentials.email } }"
+              :to="{
+                name: RouteName.SEND_PASSWORD_RESET,
+                params: { email: credentials.email },
+              }"
               >{{ $t("Forgot your password ?") }}</router-link
             >
           </p>
           <router-link
             class="button is-text"
-            :to="{ name: RouteName.RESEND_CONFIRMATION, params: { email: credentials.email } }"
+            :to="{
+              name: RouteName.RESEND_CONFIRMATION,
+              params: { email: credentials.email },
+            }"
             >{{ $t("Didn't receive the instructions?") }}</router-link
           >
           <p class="control" v-if="config && config.registrationsOpen">
@@ -101,10 +123,20 @@ import { Route } from "vue-router";
 import { ICurrentUser } from "@/types/current-user.model";
 import { LoginError, LoginErrorCode } from "@/types/enums";
 import { LOGIN } from "../../graphql/auth";
-import { validateEmailField, validateRequiredField } from "../../utils/validators";
-import { initializeCurrentActor, NoIdentitiesException, saveUserData } from "../../utils/auth";
+import {
+  validateEmailField,
+  validateRequiredField,
+} from "../../utils/validators";
+import {
+  initializeCurrentActor,
+  NoIdentitiesException,
+  saveUserData,
+} from "../../utils/auth";
 import { ILogin } from "../../types/login.model";
-import { CURRENT_USER_CLIENT, UPDATE_CURRENT_USER_CLIENT } from "../../graphql/user";
+import {
+  CURRENT_USER_CLIENT,
+  UPDATE_CURRENT_USER_CLIENT,
+} from "../../graphql/user";
 import RouteName from "../../router/name";
 import { CONFIG } from "../../graphql/config";
 import { IConfig } from "../../types/config.model";
diff --git a/js/src/views/User/PasswordReset.vue b/js/src/views/User/PasswordReset.vue
index e36cfe9a6..cf96a8bfd 100644
--- a/js/src/views/User/PasswordReset.vue
+++ b/js/src/views/User/PasswordReset.vue
@@ -2,9 +2,13 @@
   <section class="section container columns is-mobile is-centered">
     <div class="card column is-half-desktop">
       <h1>{{ $t("Password reset") }}</h1>
-      <b-message title="Error" type="is-danger" v-for="error in errors" :key="error">{{
-        error
-      }}</b-message>
+      <b-message
+        title="Error"
+        type="is-danger"
+        v-for="error in errors"
+        :key="error"
+        >{{ error }}</b-message
+      >
       <form @submit="resetAction">
         <b-field :label="$t('Password')">
           <b-input
diff --git a/js/src/views/User/ProviderValidation.vue b/js/src/views/User/ProviderValidation.vue
index 83cbf605a..3be85397d 100644
--- a/js/src/views/User/ProviderValidation.vue
+++ b/js/src/views/User/ProviderValidation.vue
@@ -13,13 +13,20 @@ export default class ProviderValidate extends Vue {
     const refreshToken = this.getValueFromMeta("auth-refresh-token");
     const userId = this.getValueFromMeta("auth-user-id");
     const userEmail = this.getValueFromMeta("auth-user-email");
-    const userRole = this.getValueFromMeta("auth-user-role") as ICurrentUserRole;
+    const userRole = this.getValueFromMeta(
+      "auth-user-role"
+    ) as ICurrentUserRole;
 
     if (!(userId && userEmail && userRole && accessToken && refreshToken)) {
       await this.$router.push("/");
     } else {
       const login = {
-        user: { id: userId, email: userEmail, role: userRole, isLoggedIn: true },
+        user: {
+          id: userId,
+          email: userEmail,
+          role: userRole,
+          isLoggedIn: true,
+        },
         accessToken,
         refreshToken,
       };
@@ -39,7 +46,10 @@ export default class ProviderValidate extends Vue {
       const { loggedUser } = data;
 
       if (loggedUser.defaultActor) {
-        await changeIdentity(this.$apollo.provider.defaultClient, loggedUser.defaultActor);
+        await changeIdentity(
+          this.$apollo.provider.defaultClient,
+          loggedUser.defaultActor
+        );
         await this.$router.push({ name: RouteName.HOME });
       } else {
         // If the user didn't register any profile yet, let's create one for them
diff --git a/js/src/views/User/Register.vue b/js/src/views/User/Register.vue
index 9b112b692..9b02d28c6 100644
--- a/js/src/views/User/Register.vue
+++ b/js/src/views/User/Register.vue
@@ -3,13 +3,24 @@
     <section class="hero">
       <div class="hero-body">
         <h1 class="title">
-          {{ $t("Register an account on {instanceName}!", { instanceName: config.name }) }}
+          {{
+            $t("Register an account on {instanceName}!", {
+              instanceName: config.name,
+            })
+          }}
         </h1>
-        <i18n tag="p" path="{instanceName} is an instance of the {mobilizon} software.">
+        <i18n
+          tag="p"
+          path="{instanceName} is an instance of the {mobilizon} software."
+        >
           <b slot="instanceName">{{ config.name }}</b>
-          <a href="https://joinmobilizon.org" target="_blank" class="out" slot="mobilizon">{{
-            $t("Mobilizon")
-          }}</a>
+          <a
+            href="https://joinmobilizon.org"
+            target="_blank"
+            class="out"
+            slot="mobilizon"
+            >{{ $t("Mobilizon") }}</a
+          >
         </i18n>
       </div>
     </section>
@@ -21,10 +32,26 @@
             <div class="content">
               <ul>
                 <li>{{ $t("To create and manage your events") }}</li>
-                <li>{{ $t("To create and manage multiples identities from a same account") }}</li>
-                <li>{{ $t("To register for an event by choosing one of your identities") }}</li>
+                <li>
+                  {{
+                    $t(
+                      "To create and manage multiples identities from a same account"
+                    )
+                  }}
+                </li>
+                <li>
+                  {{
+                    $t(
+                      "To register for an event by choosing one of your identities"
+                    )
+                  }}
+                </li>
                 <li v-if="config.features.groups">
-                  {{ $t("To create or join an group and start organizing with other people") }}
+                  {{
+                    $t(
+                      "To create or join an group and start organizing with other people"
+                    )
+                  }}
                 </li>
               </ul>
             </div>
@@ -34,7 +61,9 @@
           }}</router-link>
           <hr />
           <div class="content">
-            <subtitle>{{ $t("About {instance}", { instance: config.name }) }}</subtitle>
+            <subtitle>{{
+              $t("About {instance}", { instance: config.name })
+            }}</subtitle>
             <div class="content" v-html="config.description"></div>
             <i18n
               path="Please read the {fullRules} published by {instance}'s administrators."
@@ -87,13 +116,22 @@
             </b-field>
 
             <b-checkbox required>
-              <i18n tag="span" path="I agree to the {instanceRules} and {termsOfService}">
-                <router-link class="out" slot="instanceRules" :to="{ name: RouteName.RULES }">{{
-                  $t("instance rules")
-                }}</router-link>
-                <router-link class="out" slot="termsOfService" :to="{ name: RouteName.TERMS }">{{
-                  $t("terms of service")
-                }}</router-link>
+              <i18n
+                tag="span"
+                path="I agree to the {instanceRules} and {termsOfService}"
+              >
+                <router-link
+                  class="out"
+                  slot="instanceRules"
+                  :to="{ name: RouteName.RULES }"
+                  >{{ $t("instance rules") }}</router-link
+                >
+                <router-link
+                  class="out"
+                  slot="termsOfService"
+                  :to="{ name: RouteName.TERMS }"
+                  >{{ $t("terms of service") }}</router-link
+                >
               </i18n>
             </b-checkbox>
 
@@ -111,7 +149,10 @@
             <p class="control has-text-centered">
               <router-link
                 class="button is-text"
-                :to="{ name: RouteName.RESEND_CONFIRMATION, params: { email: credentials.email } }"
+                :to="{
+                  name: RouteName.RESEND_CONFIRMATION,
+                  params: { email: credentials.email },
+                }"
                 >{{ $t("Didn't receive the instructions?") }}</router-link
               >
             </p>
@@ -120,20 +161,28 @@
                 class="button is-text"
                 :to="{
                   name: RouteName.LOGIN,
-                  params: { email: credentials.email, password: credentials.password },
+                  params: {
+                    email: credentials.email,
+                    password: credentials.password,
+                  },
                 }"
                 >{{ $t("Login") }}</router-link
               >
             </p>
 
             <hr />
-            <div class="control" v-if="config && config.auth.oauthProviders.length > 0">
+            <div
+              class="control"
+              v-if="config && config.auth.oauthProviders.length > 0"
+            >
               <auth-providers :oauthProviders="config.auth.oauthProviders" />
             </div>
           </form>
 
           <div v-if="errors.length > 0">
-            <b-message type="is-danger" v-for="error in errors" :key="error">{{ error }}</b-message>
+            <b-message type="is-danger" v-for="error in errors" :key="error">{{
+              error
+            }}</b-message>
           </div>
         </div>
       </div>
@@ -211,10 +260,13 @@ export default class Register extends Vue {
       });
     } catch (error) {
       console.error(error);
-      this.errors = error.graphQLErrors.reduce((acc: { [key: string]: any }, localError: any) => {
-        acc[localError.field] = localError.message;
-        return acc;
-      }, {});
+      this.errors = error.graphQLErrors.reduce(
+        (acc: { [key: string]: any }, localError: any) => {
+          acc[localError.field] = localError.message;
+          return acc;
+        },
+        {}
+      );
       this.sendingForm = false;
     }
   }
diff --git a/js/src/views/User/ResendConfirmation.vue b/js/src/views/User/ResendConfirmation.vue
index 292f72331..3b32b0874 100644
--- a/js/src/views/User/ResendConfirmation.vue
+++ b/js/src/views/User/ResendConfirmation.vue
@@ -7,15 +7,22 @@
         </h1>
         <form v-if="!validationSent" @submit="resendConfirmationAction">
           <b-field :label="$t('Email address')">
-            <b-input aria-required="true" required type="email" v-model="credentials.email" />
+            <b-input
+              aria-required="true"
+              required
+              type="email"
+              v-model="credentials.email"
+            />
           </b-field>
           <p class="control">
             <b-button type="is-primary" native-type="submit">
               {{ $t("Send the confirmation email again") }}
             </b-button>
-            <router-link :to="{ name: RouteName.LOGIN }" class="button is-text">{{
-              $t("Cancel")
-            }}</router-link>
+            <router-link
+              :to="{ name: RouteName.LOGIN }"
+              class="button is-text"
+              >{{ $t("Cancel") }}</router-link
+            >
           </p>
         </form>
         <div v-else>
@@ -28,7 +35,11 @@
             }}
           </b-message>
           <b-message type="is-info">
-            {{ $t("Please check your spam folder if you didn't receive the email.") }}
+            {{
+              $t(
+                "Please check your spam folder if you didn't receive the email."
+              )
+            }}
           </b-message>
         </div>
       </div>
@@ -38,7 +49,10 @@
 
 <script lang="ts">
 import { Component, Prop, Vue } from "vue-property-decorator";
-import { validateEmailField, validateRequiredField } from "../../utils/validators";
+import {
+  validateEmailField,
+  validateRequiredField,
+} from "../../utils/validators";
 import { RESEND_CONFIRMATION_EMAIL } from "../../graphql/auth";
 import RouteName from "../../router/name";
 
diff --git a/js/src/views/User/SendPasswordReset.vue b/js/src/views/User/SendPasswordReset.vue
index 01571d7de..2d47d52d1 100644
--- a/js/src/views/User/SendPasswordReset.vue
+++ b/js/src/views/User/SendPasswordReset.vue
@@ -23,23 +23,38 @@
         </b-message>
         <form @submit="sendResetPasswordTokenAction" v-if="!validationSent">
           <b-field :label="$t('Email address')">
-            <b-input aria-required="true" required type="email" v-model="credentials.email" />
+            <b-input
+              aria-required="true"
+              required
+              type="email"
+              v-model="credentials.email"
+            />
           </b-field>
           <p class="control">
             <b-button type="is-primary" native-type="submit">
               {{ $t("Submit") }}
             </b-button>
-            <router-link :to="{ name: RouteName.LOGIN }" class="button is-text">{{
-              $t("Cancel")
-            }}</router-link>
+            <router-link
+              :to="{ name: RouteName.LOGIN }"
+              class="button is-text"
+              >{{ $t("Cancel") }}</router-link
+            >
           </p>
         </form>
         <div v-else>
           <b-message type="is-success" :closable="false" title="Success">
-            {{ $t("We just sent an email to {email}", { email: credentials.email }) }}
+            {{
+              $t("We just sent an email to {email}", {
+                email: credentials.email,
+              })
+            }}
           </b-message>
           <b-message type="is-info">
-            {{ $t("Please check your spam folder if you didn't receive the email.") }}
+            {{
+              $t(
+                "Please check your spam folder if you didn't receive the email."
+              )
+            }}
           </b-message>
         </div>
       </div>
@@ -49,7 +64,10 @@
 
 <script lang="ts">
 import { Component, Prop, Vue } from "vue-property-decorator";
-import { validateEmailField, validateRequiredField } from "../../utils/validators";
+import {
+  validateEmailField,
+  validateRequiredField,
+} from "../../utils/validators";
 import { SEND_RESET_PASSWORD } from "../../graphql/auth";
 import RouteName from "../../router/name";
 
diff --git a/js/src/views/User/SettingsOnboard.vue b/js/src/views/User/SettingsOnboard.vue
index 713cda757..8eea99eed 100644
--- a/js/src/views/User/SettingsOnboard.vue
+++ b/js/src/views/User/SettingsOnboard.vue
@@ -56,9 +56,12 @@ import { IConfig } from "../../types/config.model";
 
 @Component({
   components: {
-    NotificationsOnboarding: () => import("../../components/Settings/NotificationsOnboarding.vue"),
-    SettingsOnboarding: () => import("../../components/Settings/SettingsOnboarding.vue"),
-    ProfileOnboarding: () => import("../../components/Account/ProfileOnboarding.vue"),
+    NotificationsOnboarding: () =>
+      import("../../components/Settings/NotificationsOnboarding.vue"),
+    SettingsOnboarding: () =>
+      import("../../components/Settings/SettingsOnboarding.vue"),
+    ProfileOnboarding: () =>
+      import("../../components/Account/ProfileOnboarding.vue"),
   },
   apollo: {
     config: TIMEZONES,
diff --git a/js/src/views/User/Validate.vue b/js/src/views/User/Validate.vue
index 0eb980fd1..ca5f1c095 100644
--- a/js/src/views/User/Validate.vue
+++ b/js/src/views/User/Validate.vue
@@ -1,11 +1,18 @@
 <template>
   <section class="section container">
-    <h1 class="title" v-if="loading">{{ $t("Your account is being validated") }}</h1>
+    <h1 class="title" v-if="loading">
+      {{ $t("Your account is being validated") }}
+    </h1>
     <div v-else>
       <div v-if="failed">
-        <b-message :title="$t('Error while validating account')" type="is-danger">
+        <b-message
+          :title="$t('Error while validating account')"
+          type="is-danger"
+        >
           {{
-            $t("Either the account is already validated, either the validation token is incorrect.")
+            $t(
+              "Either the account is already validated, either the validation token is incorrect."
+            )
           }}
         </b-message>
       </div>
@@ -60,7 +67,10 @@ export default class Validate extends Vue {
         });
 
         if (user.defaultActor) {
-          await changeIdentity(this.$apollo.provider.defaultClient, user.defaultActor);
+          await changeIdentity(
+            this.$apollo.provider.defaultClient,
+            user.defaultActor
+          );
           await this.$router.push({ name: RouteName.HOME });
         } else {
           // If the user didn't register any profile yet, let's create one for them
diff --git a/js/src/vue-apollo.ts b/js/src/vue-apollo.ts
index 8d62a6158..77924efa7 100644
--- a/js/src/vue-apollo.ts
+++ b/js/src/vue-apollo.ts
@@ -75,49 +75,61 @@ const link = split(
   // split based on operation type
   ({ query }) => {
     const definition = getMainDefinition(query);
-    return definition.kind === "OperationDefinition" && definition.operation === "subscription";
+    return (
+      definition.kind === "OperationDefinition" &&
+      definition.operation === "subscription"
+    );
   },
   wsLink,
   uploadLink
 );
 
-const errorLink = onError(({ graphQLErrors, networkError, forward, operation }) => {
-  if (isServerError(networkError) && networkError.statusCode === 401 && !alreadyRefreshedToken) {
-    if (!refreshingTokenPromise) refreshingTokenPromise = refreshAccessToken(apolloClient);
+const errorLink = onError(
+  ({ graphQLErrors, networkError, forward, operation }) => {
+    if (
+      isServerError(networkError) &&
+      networkError.statusCode === 401 &&
+      !alreadyRefreshedToken
+    ) {
+      if (!refreshingTokenPromise)
+        refreshingTokenPromise = refreshAccessToken(apolloClient);
 
-    return promiseToObservable(refreshingTokenPromise).flatMap(() => {
-      refreshingTokenPromise = undefined;
-      alreadyRefreshedToken = true;
+      return promiseToObservable(refreshingTokenPromise).flatMap(() => {
+        refreshingTokenPromise = undefined;
+        alreadyRefreshedToken = true;
 
-      const context = operation.getContext();
-      const oldHeaders = context.headers;
+        const context = operation.getContext();
+        const oldHeaders = context.headers;
 
-      operation.setContext({
-        headers: {
-          ...oldHeaders,
-          authorization: generateTokenHeader(),
-        },
+        operation.setContext({
+          headers: {
+            ...oldHeaders,
+            authorization: generateTokenHeader(),
+          },
+        });
+
+        return forward(operation);
       });
+    }
 
-      return forward(operation);
-    });
-  }
+    if (graphQLErrors) {
+      graphQLErrors.map(({ message, locations, path }) =>
+        console.log(
+          `[GraphQL error]: Message: ${message}, Location: ${locations}, Path: ${path}`
+        )
+      );
+    }
 
-  if (graphQLErrors) {
-    graphQLErrors.map(({ message, locations, path }) =>
-      console.log(`[GraphQL error]: Message: ${message}, Location: ${locations}, Path: ${path}`)
-    );
+    if (networkError) {
+      console.log(`[Network error]: ${networkError}`);
+      Snackbar.open({
+        message: "Please refresh the page and retry.",
+        type: "is-danger",
+        position: "is-bottom",
+      });
+    }
   }
-
-  if (networkError) {
-    console.log(`[Network error]: ${networkError}`);
-    Snackbar.open({
-      message: "Please refresh the page and retry.",
-      type: "is-danger",
-      position: "is-bottom",
-    });
-  }
-});
+);
 
 const fullLink = authMiddleware.concat(errorLink).concat(link);
 
diff --git a/js/tests/e2e/plugins/index.js b/js/tests/e2e/plugins/index.js
index b97691c5c..2e0322eff 100644
--- a/js/tests/e2e/plugins/index.js
+++ b/js/tests/e2e/plugins/index.js
@@ -1,13 +1,11 @@
 // https://docs.cypress.io/guides/guides/plugins-guide.html
 
-// if you need a custom webpack configuration you can uncomment the following import
+// if you need a custom webpack configuration
+// you can uncomment the following import
 // and then use the `file:preprocessor` event
 // as explained in the cypress docs
 // https://docs.cypress.io/api/plugins/preprocessors-api.html#Examples
 
-/* eslint-disable import/no-extraneous-dependencies, global-require, arrow-body-style */
-// const webpack = require('@cypress/webpack-preprocessor')
-
 module.exports = (on, config) => {
   // on('file:preprocessor', webpack({
   //  webpackOptions: require('@vue/cli-service/webpack.config'),
diff --git a/js/tests/e2e/specs/dashboard.js b/js/tests/e2e/specs/dashboard.js
index 8e8f39206..23c325c02 100644
--- a/js/tests/e2e/specs/dashboard.js
+++ b/js/tests/e2e/specs/dashboard.js
@@ -6,11 +6,16 @@ describe("Homepage", () => {
     cy.visit("/", { onBeforeLoad });
     cy.get("#mobilizon").find("footer").contains("The Mobilizon Contributors");
 
-    cy.contains("About").should("have.attr", "href").and("eq", "https://joinmobilizon.org");
+    cy.contains("About")
+      .should("have.attr", "href")
+      .and("eq", "https://joinmobilizon.org");
 
     cy.contains("License")
       .should("have.attr", "href")
-      .and("eq", "https://framagit.org/framasoft/mobilizon/blob/master/LICENSE");
+      .and(
+        "eq",
+        "https://framagit.org/framasoft/mobilizon/blob/master/LICENSE"
+      );
   });
 
   it("Tries to register from the hero section", () => {
diff --git a/js/tests/e2e/specs/event.js b/js/tests/e2e/specs/event.js
index 83008bc30..405dd821e 100644
--- a/js/tests/e2e/specs/event.js
+++ b/js/tests/e2e/specs/event.js
@@ -36,13 +36,21 @@ describe("Events", () => {
     cy.url().should("include", "/events/");
     cy.contains(".title", EVENT.title);
     cy.contains(".column.is-3-tablet", "One person going");
-    cy.get(".eventMetadataBlock").eq(1).contains("On Wednesday, September 15, 2021 from");
+    cy.get(".eventMetadataBlock")
+      .eq(1)
+      .contains("On Wednesday, September 15, 2021 from");
     cy.contains(".column.is-3-tablet", "Public event");
 
     cy.contains(".navbar-item", "My events").click();
     cy.contains(".title", EVENT.title);
     cy.contains(".content.column", "Organized by I'm a test user");
-    cy.contains(".title-wrapper .date-component .datetime-container .month", "Sep");
-    cy.contains(".title-wrapper .date-component .datetime-container .day", "15");
+    cy.contains(
+      ".title-wrapper .date-component .datetime-container .month",
+      "Sep"
+    );
+    cy.contains(
+      ".title-wrapper .date-component .datetime-container .day",
+      "15"
+    );
   });
 });
diff --git a/js/tests/e2e/specs/login.js b/js/tests/e2e/specs/login.js
index 8e6569191..4727f04c2 100644
--- a/js/tests/e2e/specs/login.js
+++ b/js/tests/e2e/specs/login.js
@@ -11,7 +11,9 @@ describe("Login", () => {
     cy.get("form .field").first().contains("label", "Email");
     cy.get("form .field").last().contains("label", "Password");
     cy.get("form").contains("button.button", "Login");
-    cy.get("form").contains(".control a.button", "Forgot your password ?").click();
+    cy.get("form")
+      .contains(".control a.button", "Forgot your password ?")
+      .click();
     cy.url().should("include", "/password-reset/send");
     cy.go("back");
 
@@ -24,17 +26,22 @@ describe("Login", () => {
 
   it("Tries to login with incorrect credentials", () => {
     cy.visit("/login", { onBeforeLoad });
-    cy.get("input[type=email]").type("notanemail").should("have.value", "notanemail");
+    cy.get("input[type=email]")
+      .type("notanemail")
+      .should("have.value", "notanemail");
     cy.get("input[type=password]").click();
     cy.contains("button.button.is-primary.is-large", "Login").click();
     // cy.get('form .field').first().contains('p.help.is-danger', '@');
-    // cy.get('form .field').last().contains('p.help.is-danger', 'Please fill out this field.');
   });
 
   it("Tries to login with invalid credentials", () => {
     cy.visit("/login", { onBeforeLoad });
-    cy.get("input[type=email]").type("test@email.com").should("have.value", "test@email.com");
-    cy.get("input[type=password]").type("badPassword").should("have.value", "badPassword");
+    cy.get("input[type=email]")
+      .type("test@email.com")
+      .should("have.value", "test@email.com");
+    cy.get("input[type=password]")
+      .type("badPassword")
+      .should("have.value", "badPassword");
     cy.contains("button.button.is-primary.is-large", "Login").click();
 
     cy.contains(
@@ -49,7 +56,10 @@ describe("Login", () => {
     cy.get("input[type=password]").type("some password");
     cy.get("form").submit();
     cy.wait(1000);
-    cy.get(".navbar-end .navbar-link span.icon i").should("have.class", "mdi-account-circle");
+    cy.get(".navbar-end .navbar-link span.icon i").should(
+      "have.class",
+      "mdi-account-circle"
+    );
     cy.contains("article.message.is-info", "Welcome back I'm a test user");
     cy.get(".navbar-item.has-dropdown").click();
     cy.get(".navbar-item").last().contains("Log out").click();
@@ -94,7 +104,9 @@ describe("Login", () => {
       .parent()
       .find("textarea")
       .type("This shouln't work because it' using a dupublicated username");
-    cy.get(".control.has-text-centered").contains("button", "Create my profile").click();
+    cy.get(".control.has-text-centered")
+      .contains("button", "Create my profile")
+      .click();
     cy.contains(".help.is-danger", "This username is already taken.");
 
     cy.get("form .field input").first(0).clear().type("test_user_2");
@@ -103,7 +115,13 @@ describe("Login", () => {
     cy.get("form").submit();
     cy.wait(1000);
 
-    cy.get(".navbar-link span.icon i").should("have.class", "mdi-account-circle");
-    cy.contains("article.message.is-info", "Welcome to Mobilizon, test_user_2!");
+    cy.get(".navbar-link span.icon i").should(
+      "have.class",
+      "mdi-account-circle"
+    );
+    cy.contains(
+      "article.message.is-info",
+      "Welcome to Mobilizon, test_user_2!"
+    );
   });
 });
diff --git a/js/tests/e2e/specs/register.js b/js/tests/e2e/specs/register.js
index d9b88b1be..a97f550be 100644
--- a/js/tests/e2e/specs/register.js
+++ b/js/tests/e2e/specs/register.js
@@ -10,13 +10,17 @@ describe("Registration", () => {
     cy.get("input[type=email]").click();
     cy.get("input[type=password]").type("short").should("have.value", "short");
     cy.get("form").contains("button.button.is-primary", "Register");
-    // cy.get('form .field').first().contains('p.help.is-danger', 'Please fill out this field.');
 
-    cy.get("form").contains(".control a.button", "Didn't receive the instructions ?").click();
+    cy.get("form")
+      .contains(".control a.button", "Didn't receive the instructions ?")
+      .click();
     cy.url().should("include", "/resend-instructions");
     cy.go("back");
 
-    cy.get("form").get(".control a.button").contains("Login").click({ force: true });
+    cy.get("form")
+      .get(".control a.button")
+      .contains("Login")
+      .click({ force: true });
     cy.url().should("include", "/login");
 
     cy.go("back");
@@ -48,11 +52,14 @@ describe("Registration", () => {
       .parent()
       .find("textarea")
       .type("This is a test account");
-    cy.get(".control.has-text-centered").contains("button", "Create my profile").click();
+    cy.get(".control.has-text-centered")
+      .contains("button", "Create my profile")
+      .click();
 
-    cy.contains("article.message.is-success", "Your account is nearly ready, tester").contains(
-      "A validation email was sent to user2register@email.com"
-    );
+    cy.contains(
+      "article.message.is-success",
+      "Your account is nearly ready, tester"
+    ).contains("A validation email was sent to user2register@email.com");
 
     cy.visit("/sent_emails");
 
@@ -74,7 +81,13 @@ describe("Registration", () => {
       expect(loc.pathname).to.eq("/");
     });
 
-    cy.get(".navbar-link span.icon i").should("have.class", "mdi-account-circle");
-    cy.contains("article.message.is-info", "Welcome to Mobilizon, tester account!");
+    cy.get(".navbar-link span.icon i").should(
+      "have.class",
+      "mdi-account-circle"
+    );
+    cy.contains(
+      "article.message.is-info",
+      "Welcome to Mobilizon, tester account!"
+    );
   });
 });
diff --git a/js/tests/e2e/support/commands.js b/js/tests/e2e/support/commands.js
index 050167978..e830f15f8 100644
--- a/js/tests/e2e/support/commands.js
+++ b/js/tests/e2e/support/commands.js
@@ -14,11 +14,13 @@
 //
 //
 // -- This is a child command --
-// Cypress.Commands.add("drag", { prevSubject: 'element'}, (subject, options) => { ... })
+// Cypress.Commands.add("drag",
+// { prevSubject: 'element' }, (subject, options) => { ... })
 //
 //
 // -- This is a dual command --
-// Cypress.Commands.add("dismiss", { prevSubject: 'optional'}, (subject, options) => { ... })
+// Cypress.Commands.add("dismiss",
+// { prevSubject: 'optional' }, (subject, options) => { ... })
 //
 //
 // -- This is will overwrite an existing command --
@@ -104,7 +106,10 @@ const decreaseFetches = () => {
   Cypress.env("fetchCount", count - 1);
 };
 
-const buildTrackableFetchWithSessionId = (fetch) => (fetchUrl, fetchOptions) => {
+const buildTrackableFetchWithSessionId = (fetch) => (
+  fetchUrl,
+  fetchOptions
+) => {
   const { headers } = fetchOptions;
   const modifiedHeaders = {
     "x-session-id": Cypress.env("sessionId"),
@@ -149,6 +154,8 @@ Cypress.Commands.add("iframeLoaded", { prevSubject: "element" }, ($iframe) => {
   });
 });
 
-Cypress.Commands.add("getInDocument", { prevSubject: "document" }, (document, selector) =>
-  Cypress.$(selector, document)
+Cypress.Commands.add(
+  "getInDocument",
+  { prevSubject: "document" },
+  (document, selector) => Cypress.$(selector, document)
 );
diff --git a/js/vue.config.js b/js/vue.config.js
index 6a67e8a74..5dfdba8ff 100644
--- a/js/vue.config.js
+++ b/js/vue.config.js
@@ -2,8 +2,11 @@ const path = require("path");
 const ForkTsCheckerWebpackPlugin = require("fork-ts-checker-webpack-plugin");
 
 module.exports = {
+  devServer: {
+    proxy: "http://mobilizon1.com",
+  },
   runtimeCompiler: true,
-  lintOnSave: true,
+  lintOnSave: process.env.NODE_ENV !== "production",
   filenameHashing: true,
   productionSourceMap: false,
   outputDir: path.resolve(__dirname, "../priv/static"),
@@ -17,7 +20,9 @@ module.exports = {
 
     // remove the existing ForkTsCheckerWebpackPlugin
     // so that we can replace it with our modified version
-    config.plugins = config.plugins.filter((p) => !(p instanceof ForkTsCheckerWebpackPlugin));
+    config.plugins = config.plugins.filter(
+      (p) => !(p instanceof ForkTsCheckerWebpackPlugin)
+    );
 
     // copy the options from the original ForkTsCheckerWebpackPlugin
     // instance and add the memoryLimit property