Add an error component

Shows when a rendering error has been triggered, like the one in 5edc402a01

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

js/src/views/About/AboutInstance.vue

@@ -25,16 +25,7 @@
       </div>
       <div class="column contact">
         <h4>{{ $t("Contact") }}</h4>
-        <p>
-          <a
-            :title="config.contact"
-            v-if="generateConfigLink()"
-            :href="generateConfigLink().uri"
-            >{{ generateConfigLink().text }}</a
-          >
-          <span v-else-if="config.contact">{{ config.contact }}</span>
-          <span v-else>{{ $t("contact uninformed") }}</span>
-        </p>
+        <instance-contact-link :contact="config.contact" />
       </div>
     </section>
     <hr />
@@ -85,6 +76,7 @@
 <script lang="ts">
 import { Component, Vue } from "vue-property-decorator";
 import { formatList } from "@/utils/i18n";
+import InstanceContactLink from "@/components/About/InstanceContactLink.vue";
 import { LANGUAGES_CODES } from "@/graphql/admin";
 import { ILanguage } from "@/types/admin.model";
 import { ABOUT } from "../../graphql/config";
@@ -109,6 +101,9 @@ import langs from "../../i18n/langs.json";
       },
     },
   },
+  components: {
+    InstanceContactLink,
+  },
 })
 export default class AboutInstance extends Vue {
   config!: IConfig;
@@ -117,14 +112,6 @@ export default class AboutInstance extends Vue {
 
   languages!: ILanguage[];
 
-  get isContactEmail(): boolean {
-    return this.config && this.config.contact.includes("@");
-  }
-
-  get isContactURL(): boolean {
-    return this.config && this.config.contact.match(/^https?:\/\//g) !== null;
-  }
-
   get formattedLanguageList(): string {
     if (this.languages) {
       const list = this.languages.map(({ name }) => name);
@@ -138,33 +125,6 @@ export default class AboutInstance extends Vue {
     const languageMaps = langs as Record<string, any>;
     return languageMaps[code];
   }
-
-  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,
-      };
-    }
-    if (this.isContactURL) {
-      return {
-        uri: this.config.contact,
-        text:
-          AboutInstance.urlToHostname(this.config.contact) ||
-          (this.$t("Contact") as string),
-      };
-    }
-    return null;
-  }
-
-  static urlToHostname(url: string): string | null {
-    try {
-      return new URL(url).hostname;
-    } catch (e) {
-      return null;
-    }
-  }
 }
 </script>
 

js/src/views/Event/Event.vue

@@ -1,6 +1,5 @@
 <template>
   <div class="container">
-    <b-loading :active.sync="$apollo.loading" />
     <transition appear name="fade" mode="out-in">
       <div>
         <div