Fix lint issues

And disable eslint when building in prod mode

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

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

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,
       },

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) {

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 {
-import { CURRENT_USER_CLIENT, UPDATE_CURRENT_USER_CLIENT } from "./graphql/user";
+  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";

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 = {

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",

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;
 

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>
+        <p class="has-text-grey" v-if="actor.name">
-        <div v-if="full" class="summary" :class="{ limit: limit }" v-html="actor.summary" />
+          @{{ usernameWithDomain(actor) }}
+        </p>
+        <div
+          v-if="full"
+          class="summary"
+          :class="{ limit: limit }"
+          v-html="actor.summary"
+        />
       </div>
     </div>
   </div>

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>

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">{{
+      <b-table-column
-        props.row.actor.id
+        field="actor.id"
-      }}</b-table-column>
+        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'}`">{{
+        <span
-          props.row.approved ? $t("Accepted") : $t("Pending")
+          :class="`tag ${props.row.approved ? 'is-success' : 'is-danger'}`"
-        }}</span>
+          >{{ 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)">{{
+          <a
-            props.row.actor.domain
+            @click="toggle(props.row)"
-          }}</a>
+            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">
+      <b-table-column
-        <span :title="$options.filters.formatDateTimeString(props.row.updatedAt)">{{
+        field="targetActor.updatedAt"
-          formatDistanceToNow(new Date(props.row.updatedAt), { locale: $dateFnsLocale })
+        :label="$t('Date')"
-        }}</span></b-table-column
+        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",
+      });
     }
   }
 

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">{{
+      <b-table-column
-        props.row.targetActor.id
+        field="targetActor.id"
-      }}</b-table-column>
+        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-table-column
-        <b-icon icon="lan" v-if="RelayMixin.isInstance(props.row.targetActor)" />
+        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'}`">{{
+        <span
-          props.row.approved ? $t("Accepted") : $t("Pending")
+          :class="`tag ${props.row.approved ? 'is-success' : 'is-danger'}`"
-        }}</span>
+          >{{ 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)">{{
+          <a
-            props.row.targetActor.domain
+            @click="toggle(props.row)"
-          }}</a>
+            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">
+      <b-table-column
-        <span :title="$options.filters.formatDateTimeString(props.row.updatedAt)">{{
+        field="targetActor.updatedAt"
-          formatDistanceToNow(new Date(props.row.updatedAt), { locale: $dateFnsLocale })
+        :label="$t('Date')"
-        }}</span></b-table-column
+        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",
+      });
     }
   }
 }

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",
+      });
     }
   }
 }

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">{{
+      <b-notification
-        $t("Comments are closed for everybody else.")
+        v-if="isEventOrganiser && !areCommentsClosed"
-      }}</b-notification>
+        :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 {

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 }) ||
+              formatDistanceToNow(new Date(comment.updatedAt), {
-              $t("Right now")
+                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 {

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 }) ||
+            formatDistanceToNowStrict(new Date(actualDate), {
-            $t("Right now")
+              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;

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);

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;

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">{{
+      <b-button
-        $t("Use my location")
+        type="is-text"
-      }}</b-button>
+        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) {

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;

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>

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;
   }
 }

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, {
+                $tc(
-                  count: participation.event.participantStats.participant,
+                  "{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> {
+  async gotToWithCheck(
-    if (participation.actor.id !== this.currentActor.id && participation.event.organizerActor) {
+    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({

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
-            <b-icon icon="link" v-if="event.visibility === EventVisibility.UNLISTED" />
+              icon="earth"
-            <b-icon icon="lock" v-if="event.visibility === EventVisibility.PRIVATE" />
+              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, {
+                $tc(
-                  count: event.participantStats.participant,
+                  "{count} participants",
-                })
+                  event.participantStats.participant,
+                  {
+                    count: event.participantStats.participant,
+                  }
+                )
               }}
             </span>
           </span>

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, {
+              $tc(
-                count: event.participantStats.notApproved,
+                "{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;
     }

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", {
+              $t(
-                queryText,
+                "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) {

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")

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 [];
   }

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">
+    <div
-      <b-dropdown aria-role="list" position="is-bottom-left" class="dropdown-disabled">
+      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;
       },

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=${
+    return `https://twitter.com/intent/tweet?url=${encodeURIComponent(
-      this.event.title
+      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 {

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
     );
   }
 }

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")

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>

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">{{
+                  <b-tag
-                    $t("Administrator")
+                    type="is-info"
-                  }}</b-tag>
+                    v-if="member.role === MemberRole.ADMINISTRATOR"
-                  <b-tag type="is-info" v-else-if="member.role === MemberRole.MODERATOR">{{
+                    >{{ $t("Administrator") }}</b-tag
-                    $t("Moderator")
+                  >
-                  }}</b-tag>
+                  <b-tag
+                    type="is-info"
+                    v-else-if="member.role === MemberRole.MODERATOR"
+                    >{{ $t("Moderator") }}</b-tag
+                  >
                 </b-taglist>
               </p>
             </router-link>

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;

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>

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;

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>

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 }>({
+      const { data } = await this.$apollo.mutate<{ acceptInvitation: IMember }>(
-        mutation: ACCEPT_INVITATION,
+        {
-        variables: {
+          mutation: ACCEPT_INVITATION,
-          id,
+          variables: {
-        },
+            id,
-        refetchQueries: [{ query: LOGGED_USER_MEMBERSHIPS }],
+          },
-      });
+          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 }>({
+      const { data } = await this.$apollo.mutate<{ rejectInvitation: IMember }>(
-        mutation: REJECT_INVITATION,
+        {
-        variables: {
+          mutation: REJECT_INVITATION,
-          id,
+          variables: {
-        },
+            id,
-        refetchQueries: [{ query: LOGGED_USER_MEMBERSHIPS }],
+          },
-      });
+          refetchQueries: [{ query: LOGGED_USER_MEMBERSHIPS }],
+        }
+      );
       if (data) {
         this.$emit("reject-invitation", data.rejectInvitation);
       }

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>

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)
     );
   }
 }

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;
 

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">{{
+        <b-button
-          $t("Create")
+          tag="router-link"
-        }}</b-button>
+          :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 }">{{
+        <b-navbar-item
-          $t("My account")
+          tag="router-link"
-        }}</b-navbar-item>
+          :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 }">{{
+          <router-link
-            $t("Log in")
+            class="button is-light"
-          }}</router-link>
+            :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();
     }

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>
+        <h1 class="title">
-        <p class="content" v-if="participation.event.joinOptions == EventJoinOptions.RESTRICTED">
+          {{ $t("Your participation request has been validated") }}
-          {{ $t("Your participation still has to be approved by the organisers.") }}
+        </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">

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>

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">{{
+          <b-button
-            $t("Send email")
+            :disabled="sendingForm"
-          }}</b-button>
+            type="is-primary"
+            native-type="submit"
+            >{{ $t("Send email") }}</b-button
+          >
           <div class="has-text-centered">
-            <b-button native-type="button" tag="a" type="is-text" @click="$router.go(-1)">{{
+            <b-button
-              $t("Back to previous page")
+              native-type="button"
-            }}</b-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>
+          <h1 class="title">
-          <p class="content">{{ $t("Check your inbox (and your junk mail folder).") }}</p>
+            {{ $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;
           }
 

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.", {
+                  $t(
-                    instance: host,
+                    "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>

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;
   }
 

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">
+            <small
-              <b-icon icon="link" size="is-small" />{{ $t("Accessible through link") }}</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;

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;

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" />

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;
 

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 }>({
+      const { data } = await this.$apollo.mutate<{ updateResource: IResource }>(
-        mutation: UPDATE_RESOURCE,
+        {
-        variables: {
+          mutation: UPDATE_RESOURCE,
-          id: resource.id,
+          variables: {
-          path: `${this.resource.path}/${resource.title}`,
+            id: resource.id,
-          parentId: this.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;
     }
   }

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>

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">{{
+    <b-button
-      $t("Move resource to {folder}", { folder: resource.title })
+      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 === "/")
     );
   }
 }

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",
+      });
     }
   }
 }

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
-        <SettingMenuItem :title="$t('Moderation log')" :to="{ name: RouteName.REPORT_LOGS }" />
+          :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
-        <SettingMenuItem :title="$t('Groups')" :to="{ name: RouteName.ADMIN_GROUPS }" />
+          :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,
   },

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>

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 } }">{{
+      <router-link
-        todo.title
+        :to="{ name: RouteName.TODO, params: { todoId: todo.id } }"
-      }}</router-link>
+        >{{ 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",
+      });
     }
   }
 }

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",
+      });
     }
   }
 }

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>

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(

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;
   }

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 {

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 {

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

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) {
+  mutation CreateCommentFromEvent(
-    createComment(eventId: $eventId, text: $text, inReplyToCommentId: $inReplyToCommentId) {
+    $eventId: ID!
+    $text: String!
+    $inReplyToCommentId: ID
+  ) {
+    createComment(
+      eventId: $eventId
+      text: $text
+      inReplyToCommentId: $inReplyToCommentId
+    ) {
       ...CommentRecursive
     }
   }

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) {
+  query SearchGroups(
-    searchGroups(term: $term, location: $location, radius: $radius, page: $page, limit: $limit) {
+    $term: String
+    $location: String
+    $radius: Float
+    $page: Int
+    $limit: Int
+  ) {
+    searchGroups(
+      term: $term
+      location: $location
+      radius: $radius
+      page: $page
+      limit: $limit
+    ) {
       total
       elements {
         id

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
   }
 `;
 

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
+    );
   }
 }

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, {
+      ? this.$tc(
-          participants: event.participantStats.participant,
+          "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);
     }

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)
       )
     );
   }

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;

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,

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)
     );
   }
 }

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;
   });

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);

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 },
   },
 ];

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: () =>
+    component: (): Promise<EsModuleComponent> =>
-      import(/* webpackChunkName: "DiscussionsList" */ "@/views/Discussions/DiscussionsList.vue"),
+      import(
+        /* webpackChunkName: "DiscussionsList" */ "@/views/Discussions/DiscussionsList.vue"
+      ),
     props: true,
     meta: { requiredAuth: true },
   },
   {
     path: "/@:preferredUsername/discussions/new",
     name: DiscussionRouteName.CREATE_DISCUSSION,
-    component: () =>
+    component: (): Promise<EsModuleComponent> =>
-      import(/* webpackChunkName: "CreateDiscussion" */ "@/views/Discussions/Create.vue"),
+      import(
+        /* webpackChunkName: "CreateDiscussion" */ "@/views/Discussions/Create.vue"
+      ),
     props: true,
     meta: { requiredAuth: true },
   },
   {
     path: "/@:preferredUsername/c/:slug/:comment_id?",
     name: DiscussionRouteName.DISCUSSION,
-    component: () =>
+    component: (): Promise<EsModuleComponent> =>
-      import(/* webpackChunkName: "Discussion" */ "@/views/Discussions/Discussion.vue"),
+      import(
+        /* webpackChunkName: "Discussion" */ "@/views/Discussions/Discussion.vue"
+      ),
     props: true,
     meta: { requiredAuth: true },
   },

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,
   },
 ];

js/src/router/event.ts

@@ -1,10 +1,16 @@
 import { RouteConfig, Route } from "vue-router";
+import { EsModuleComponent } from "vue/types/options";
 
-const participations = () =>
+const participations = (): Promise<EsModuleComponent> =>
-  import(/* webpackChunkName: "participations" */ "@/views/Event/Participants.vue");
+  import(
-const editEvent = () => import(/* webpackChunkName: "edit-event" */ "@/views/Event/Edit.vue");
+    /* webpackChunkName: "participations" */ "@/views/Event/Participants.vue"
-const event = () => import(/* webpackChunkName: "event" */ "@/views/Event/Event.vue");
+  );
-const myEvents = () => import(/* webpackChunkName: "my-events" */ "@/views/Event/MyEvents.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 },
   },

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 resourceFolder = (): Promise<EsModuleComponent> =>
-const groupEvents = () =>
+  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"),
+    component: (): Promise<EsModuleComponent> =>
-    props: (route: Route) => ({ ...route.params, ...{ isUpdate: true } }),
+      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 },

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 },
     },
     {

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: () =>
+        component: (): Promise<EsModuleComponent> =>
-          import(/* webpackChunkName: "AccountSettings" */ "@/views/Settings/AccountSettings.vue"),
+          import(
+            /* webpackChunkName: "AccountSettings" */ "@/views/Settings/AccountSettings.vue"
+          ),
         props: true,
         meta: { requiredAuth: true },
       },
       {
         path: "preferences",
         name: SettingsRouteName.PREFERENCES,
-        component: () =>
+        component: (): Promise<EsModuleComponent> =>
-          import(/* webpackChunkName: "Preferences" */ "@/views/Settings/Preferences.vue"),
+          import(
+            /* webpackChunkName: "Preferences" */ "@/views/Settings/Preferences.vue"
+          ),
         props: true,
         meta: { requiredAuth: true },
       },
       {
         path: "notifications",
         name: SettingsRouteName.NOTIFICATIONS,
-        component: () =>
+        component: (): Promise<EsModuleComponent> =>
-          import(/* webpackChunkName: "Notifications" */ "@/views/Settings/Notifications.vue"),
+          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: () =>
+        component: (): Promise<EsModuleComponent> =>
-          import(/* webpackChunkName: "AdminSettings" */ "@/views/Admin/Settings.vue"),
+          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: () =>
+        component: (): Promise<EsModuleComponent> =>
-          import(/* webpackChunkName: "AdminUserProfile" */ "@/views/Admin/AdminUserProfile.vue"),
+          import(
+            /* webpackChunkName: "AdminUserProfile" */ "@/views/Admin/AdminUserProfile.vue"
+          ),
         props: true,
         meta: { requiredAuth: true },
       },
       {
         path: "admin/profiles",
         name: SettingsRouteName.PROFILES,
-        component: () =>
+        component: (): Promise<EsModuleComponent> =>
-          import(/* webpackChunkName: "AdminProfiles" */ "@/views/Admin/Profiles.vue"),
+          import(
+            /* webpackChunkName: "AdminProfiles" */ "@/views/Admin/Profiles.vue"
+          ),
         props: true,
         meta: { requiredAuth: true },
       },
       {
         path: "admin/profiles/:id",
         name: SettingsRouteName.ADMIN_PROFILE,
-        component: () =>
+        component: (): Promise<EsModuleComponent> =>
-          import(/* webpackChunkName: "AdminProfile" */ "@/views/Admin/AdminProfile.vue"),
+          import(
+            /* webpackChunkName: "AdminProfile" */ "@/views/Admin/AdminProfile.vue"
+          ),
         props: true,
         meta: { requiredAuth: true },
       },
       {
         path: "admin/groups",
         name: SettingsRouteName.ADMIN_GROUPS,
-        component: () =>
+        component: (): Promise<EsModuleComponent> =>
-          import(/* webpackChunkName: "GroupProfiles" */ "@/views/Admin/GroupProfiles.vue"),
+          import(
+            /* webpackChunkName: "GroupProfiles" */ "@/views/Admin/GroupProfiles.vue"
+          ),
         props: true,
         meta: { requiredAuth: true },
       },
       {
         path: "admin/groups/:id",
         name: SettingsRouteName.ADMIN_GROUP_PROFILE,
-        component: () =>
+        component: (): Promise<EsModuleComponent> =>
-          import(/* webpackChunkName: "AdminGroupProfile" */ "@/views/Admin/AdminGroupProfile.vue"),
+          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: () =>
+            component: (): Promise<EsModuleComponent> =>
-              import(/* webpackChunkName: "Followings" */ "@/components/Admin/Followings.vue"),
+              import(
+                /* webpackChunkName: "Followings" */ "@/components/Admin/Followings.vue"
+              ),
             meta: { requiredAuth: true },
           },
           {
             path: "followers",
             name: SettingsRouteName.RELAY_FOLLOWERS,
-            component: () =>
+            component: (): Promise<EsModuleComponent> =>
-              import(/* webpackChunkName: "Followers" */ "@/components/Admin/Followers.vue"),
+              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: () =>
+        component: (): Promise<EsModuleComponent> =>
-          import(/* webpackChunkName: "ReportList" */ "@/views/Moderation/ReportList.vue"),
+          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: () =>
+        component: (): Promise<EsModuleComponent> =>
-          import(/* webpackChunkName: "ModerationLogs" */ "@/views/Moderation/Logs.vue"),
+          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"
           ),

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: () =>
+    component: (): Promise<EsModuleComponent> =>
-      import(/* webpackChunkName: "RegisterProfile" */ "@/views/Account/Register.vue"),
+      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: () =>
+    component: (): Promise<EsModuleComponent> =>
-      import(/* webpackChunkName: "ResendConfirmation" */ "@/views/User/ResendConfirmation.vue"),
+      import(
+        /* webpackChunkName: "ResendConfirmation" */ "@/views/User/ResendConfirmation.vue"
+      ),
     props: true,
     meta: { requiresAuth: false },
   },
   {
     path: "/password-reset/send",
     name: UserRouteName.SEND_PASSWORD_RESET,
-    component: () =>
+    component: (): Promise<EsModuleComponent> =>
-      import(/* webpackChunkName: "SendPasswordReset" */ "@/views/User/SendPasswordReset.vue"),
+      import(
+        /* webpackChunkName: "SendPasswordReset" */ "@/views/User/SendPasswordReset.vue"
+      ),
     props: true,
     meta: { requiresAuth: false },
   },
   {
     path: "/password-reset/:token",
     name: UserRouteName.PASSWORD_RESET,
-    component: () =>
+    component: (): Promise<EsModuleComponent> =>
-      import(/* webpackChunkName: "PasswordReset" */ "@/views/User/PasswordReset.vue"),
+      import(
+        /* webpackChunkName: "PasswordReset" */ "@/views/User/PasswordReset.vue"
+      ),
     meta: { requiresAuth: false },
     props: true,
   },
   {
     path: "/validate/email/:token",
     name: UserRouteName.EMAIL_VALIDATE,
-    component: () =>
+    component: (): Promise<EsModuleComponent> =>
-      import(/* webpackChunkName: "EmailValidate" */ "@/views/User/EmailValidate.vue"),
+      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 },
   },

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 {

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();
   }
 }
 

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;
+        name = this.postalCode
-        alternativeName = [this.region, this.country].filter((zone) => zone).join(", ");
+          ? `${this.description} (${this.postalCode})`
+          : this.description;
+        alternativeName = [this.region, this.country]
+          .filter((zone) => zone)
+          .join(", ");
         poiIcon = poiIcons.defaultAdministrative;
         break;
       default:

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;

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,
       })),

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;
   }
 }

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,

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?: ({

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) => {
+    AUTH_USER_ID,
-      localStorage.removeItem(key);
+    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: {

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(",");

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();
 

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);
 

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">{{
+              <b-button
-                $t("Pick an instance")
+                type="is-secondary"
-              }}</b-button>
+                size="is-large"
+                tag="a"
+                href="https://mobilizon.org"
+                >{{ $t("Pick an instance") }}</b-button
+              >
             </div>
           </div>
         </div>

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">{{
+          <a
-            generateConfigLink().text
+            :title="config.contact"
-          }}</a>
+            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;

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>

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>