From 87c5283ead01fd75c008a37a6bcc427ee1315fec Mon Sep 17 00:00:00 2001
From: Georg Krause <mail@georg-krause.net>
Date: Mon, 29 Nov 2021 12:28:54 +0100
Subject: [PATCH] Lint all changes files

---
 front/src/components/About.vue    | 220 ++++++++++++-----
 front/src/components/AboutPod.vue | 382 ++++++++++++++++++++++--------
 2 files changed, 434 insertions(+), 168 deletions(-)

diff --git a/front/src/components/About.vue b/front/src/components/About.vue
index 050cc17fa..b5c2ec01e 100644
--- a/front/src/components/About.vue
+++ b/front/src/components/About.vue
@@ -1,12 +1,15 @@
 <template>
-  <main class="main pusher page-about" v-title="labels.title">
+  <main
+    v-title="labels.title"
+    class="main pusher page-about"
+  >
     <div class="ui container">
       <div class="ui horizontally fitted basic stripe segment">
         <div class="ui horizontally fitted basic very padded segment">
           <div class="ui center aligned text container">
             <div class="ui text container">
               <div class="ui equal width compact stackable grid">
-                <div class="column"></div>
+                <div class="column" />
                 <div class="ten wide column">
                   <div class="ui vertically fitted basic segment">
                     <router-link to="/">
@@ -14,68 +17,115 @@
                     </router-link>
                   </div>
                 </div>
-                <div class="column"></div>
+                <div class="column" />
               </div>
               <h2 class="header">
-                <translate translate-context="Content/About/Heading">A social platform to enjoy and share music</translate>
+                <translate translate-context="Content/About/Heading">
+                  A social platform to enjoy and share music
+                </translate>
               </h2>
               <p>
-                <translate translate-context="Content/About/Paragraph">Funkwhale is a community-driven project that lets you listen and share music and audio within a decentralized, open network.</translate>
+                <translate translate-context="Content/About/Paragraph">
+                  Funkwhale is a community-driven project that lets you listen and share music and audio within a decentralized, open network.
+                </translate>
               </p>
             </div>
           </div>
         </div>
-        <div class="ui hidden divider"></div>
+        <div class="ui hidden divider" />
         <div class="ui vertically fitted basic stripe segment">
           <div class="ui two stackable cards">
             <div class="ui card">
-              <div class="signup-form content" v-if="!$store.state.auth.authenticated">
+              <div
+                v-if="!$store.state.auth.authenticated"
+                class="signup-form content"
+              >
                 <h3 class="header">
-                  <translate translate-context="*/Signup/Title">Sign up</translate>
+                  <translate translate-context="*/Signup/Title">
+                    Sign up
+                  </translate>
                 </h3>
                 <template v-if="openRegistrations">
                   <p>
-                    <translate translate-context="Content/About/Paragraph">Sign up now to keep a track of your favorites, create playlists, discover new content and much more!</translate>
+                    <translate translate-context="Content/About/Paragraph">
+                      Sign up now to keep a track of your favorites, create playlists, discover new content and much more!
+                    </translate>
                   </p>
                   <p v-if="defaultUploadQuota">
-                    <translate translate-context="Content/About/Paragraph" :translate-params="{quota: defaultUploadQuota}">Users on this pod also get %{ quota } of free storage to upload their own content!</translate>
+                    <translate
+                      translate-context="Content/About/Paragraph"
+                      :translate-params="{quota: defaultUploadQuota}"
+                    >
+                      Users on this pod also get %{ quota } of free storage to upload their own content!
+                    </translate>
                   </p>
-                  <signup-form button-classes="success" :show-login="false"></signup-form>
+                  <signup-form
+                    button-classes="success"
+                    :show-login="false"
+                  />
                 </template>
                 <div v-else>
-                  <p translate-context="Content/About/Paragraph">Registrations are closed on this pod. You can signup on another pod using the link below.</p>
+                  <p translate-context="Content/About/Paragraph">
+                    Registrations are closed on this pod. You can signup on another pod using the link below.
+                  </p>
 
-                  <a target="_blank" rel="noopener" href="https://funkwhale.audio/#get-started">
+                  <a
+                    target="_blank"
+                    rel="noopener"
+                    href="https://funkwhale.audio/#get-started"
+                  >
                     <translate translate-context="Content/About/Link">Find another pod</translate>
-                    <i class="external alternate icon margin-left"></i>
+                    <i class="external alternate icon margin-left" />
                   </a>
                 </div>
               </div>
-              <div class="signup-form content" v-else>
+              <div
+                v-else
+                class="signup-form content"
+              >
                 <div class="ui positive message">
                   <div class="header">
-                    <translate translate-context="Content/About/Message">You're already signed in!</translate>
+                    <translate translate-context="Content/About/Message">
+                      You're already signed in!
+                    </translate>
                   </div>
-                  <p><translate translate-contect="Content/About/Hello">Hello</translate> {{ $store.state.auth.username }}</p>
+                  <p>
+                    <translate translate-contect="Content/About/Hello">
+                      Hello
+                    </translate> {{ $store.state.auth.username }}
+                  </p>
                 </div>
               </div>
             </div>
             <div class="ui card">
-              <section :class="['ui', 'head', {'with-background': banner}, 'vertical', 'center', 'aligned', 'stripe', 'segment']" :style="headerStyle">
-            <h1>
-              <i class="music icon"></i>
-              {{ podName }}
-            </h1>
+              <section
+                :class="['ui', 'head', {'with-background': banner}, 'vertical', 'center', 'aligned', 'stripe', 'segment']"
+                :style="headerStyle"
+              >
+                <h1>
+                  <i class="music icon" />
+                  {{ podName }}
+                </h1>
               </section>
               <div class="content padding-top padding-bottom">
-                <h3 class="ui header" id="description">
-                  <translate translate-context="Content/About/Header">About this pod</translate>
+                <h3
+                  id="description"
+                  class="ui header"
+                >
+                  <translate translate-context="Content/About/Header">
+                    About this pod
+                  </translate>
                 </h3>
-                <div v-if="shortDescription" class="sub header">
+                <div
+                  v-if="shortDescription"
+                  class="sub header"
+                >
                   {{ shortDescription }}
                 </div>
                 <p v-else>
-                  <translate translate-context="Content/About/Paragraph">No description available.</translate>
+                  <translate translate-context="Content/About/Paragraph">
+                    No description available.
+                  </translate>
                 </p>
 
                 <template v-if="stats">
@@ -84,54 +134,89 @@
                       <div class="column">
                         <span class="statistics-figure ui text">
                           <span class="ui big text"><strong>{{ stats.users.toLocaleString($store.state.ui.momentLocale) }}</strong></span>
-                          <br />
-                          <translate translate-context="Content/About/*" :translate-n="stats.users" translate-plural="active users">active user</translate>
+                          <br>
+                          <translate
+                            translate-context="Content/About/*"
+                            :translate-n="stats.users"
+                            translate-plural="active users"
+                          >active user</translate>
                         </span>
                       </div>
                       <div class="column">
                         <span class="statistics-figure ui text">
                           <span class="ui big text"><strong>{{ parseInt(stats.hours).toLocaleString($store.state.ui.momentLocale) }}</strong></span>
-                          <br />
-                          <translate translate-context="Content/About/*" :translate-n="parseInt(stats.hours)" translate-plural="hours of music">hour of music</translate>
+                          <br>
+                          <translate
+                            translate-context="Content/About/*"
+                            :translate-n="parseInt(stats.hours)"
+                            translate-plural="hours of music"
+                          >hour of music</translate>
                         </span>
                       </div>
                     </div>
                   </div>
                 </template>
 
-                <router-link to="/about/pod" class="ui fluid basic secondary button">
-                  <translate translate-context="Content/About/Paragraph">Learn More</translate>
+                <router-link
+                  to="/about/pod"
+                  class="ui fluid basic secondary button"
+                >
+                  <translate translate-context="Content/About/Paragraph">
+                    Learn More
+                  </translate>
                 </router-link>
               </div>
             </div>
           </div>
           <div class="ui three stackable cards">
-            <router-link to="/" class="ui card">
+            <router-link
+              to="/"
+              class="ui card"
+            >
               <div class="content">
-                <h3 class="ui header" id="description">
-                  <translate translate-context="Content/About/Header">Browse public content</translate>
+                <h3
+                  id="description"
+                  class="ui header"
+                >
+                  <translate translate-context="Content/About/Header">
+                    Browse public content
+                  </translate>
                 </h3>
                 <p>
-                  <translate translate-context="Content/About/Paragraph">Listen to public albums and playlists shared on this pod.</translate>
+                  <translate translate-context="Content/About/Paragraph">
+                    Listen to public albums and playlists shared on this pod.
+                  </translate>
                 </p>
               </div>
             </router-link>
-            <a href="https://funkwhale.audio/#get-started" class="ui card">
+            <a
+              href="https://funkwhale.audio/#get-started"
+              class="ui card"
+            >
               <div class="content">
-                <h3 class="ui header" id="description">
+                <h3
+                  id="description"
+                  class="ui header"
+                >
                   <translate translate-context="Content/About/Header">Find another pod</translate>
-                  <i class="external alternate icon margin-left"></i>
+                  <i class="external alternate icon margin-left" />
                 </h3>
                 <p>
                   <translate translate-context="Content/About/Paragraph">Listen to public albums and playlists shared on this pod.</translate>
                 </p>
               </div>
             </a>
-            <a href="https://funkwhale.audio/apps" class="ui card">
+            <a
+              href="https://funkwhale.audio/apps"
+              class="ui card"
+            >
               <div class="content">
-                <h3 class="ui header" id="description">
+                <h3
+                  id="description"
+                  class="ui header"
+                >
                   <translate translate-context="Content/About/Header">Find an app</translate>
-                  <i class="external alternate icon margin-left"></i>
+                  <i class="external alternate icon margin-left" />
                 </h3>
                 <p>
                   <translate translate-context="Content/About/Paragraph">Use Funkwhale on other devices with our apps.</translate>
@@ -140,9 +225,14 @@
             </a>
           </div>
           <div class="ui fluid horizontally fitted basic clearing segment container">
-            <router-link to="/about/pod" class="ui right floated basic secondary button">
-              <translate translate-context="Content/About/Paragraph">About this pod</translate>
-              <i class="icon arrow right"></i>
+            <router-link
+              to="/about/pod"
+              class="ui right floated basic secondary button"
+            >
+              <translate translate-context="Content/About/Paragraph">
+                About this pod
+              </translate>
+              <i class="icon arrow right" />
             </router-link>
           </div>
         </div>
@@ -152,37 +242,37 @@
 </template>
 
 <script>
-import { mapState } from "vuex"
+import { mapState } from 'vuex'
 import _ from '@/lodash'
 import showdown from 'showdown'
-import {humanSize} from '@/filters'
+import { humanSize } from '@/filters'
 
-import SignupForm from "@/components/auth/SignupForm"
-import LogoText from "@/components/LogoText"
+import SignupForm from '@/components/auth/SignupForm'
+import LogoText from '@/components/LogoText'
 
 export default {
   components: {
     SignupForm,
-    LogoText,
+    LogoText
   },
   data () {
     return {
       markdown: new showdown.Converter(),
-      showAllowedDomains: false,
+      showAllowedDomains: false
     }
   },
   computed: {
 
-  ...mapState({
-      nodeinfo: state => state.instance.nodeinfo,
+    ...mapState({
+      nodeinfo: state => state.instance.nodeinfo
     }),
-    labels() {
+    labels () {
       return {
-        title: this.$pgettext('Head/About/Title', "About")
+        title: this.$pgettext('Head/About/Title', 'About')
       }
     },
-    podName() {
-      return _.get(this.nodeinfo, 'metadata.nodeName') || "Funkwhale"
+    podName () {
+      return _.get(this.nodeinfo, 'metadata.nodeName') || 'Funkwhale'
     },
     banner () {
       return _.get(this.nodeinfo, 'metadata.banner')
@@ -200,13 +290,13 @@ export default {
       return _.get(this.nodeinfo, 'metadata.terms')
     },
     stats () {
-      let data = {
+      const data = {
         users: _.get(this.nodeinfo, 'usage.users.activeMonth', null),
         hours: _.get(this.nodeinfo, 'metadata.library.music.hours', null),
         artists: _.get(this.nodeinfo, 'metadata.library.artists.total', null),
         albums: _.get(this.nodeinfo, 'metadata.library.albums.total', null),
         tracks: _.get(this.nodeinfo, 'metadata.library.tracks.total', null),
-        listenings: _.get(this.nodeinfo, 'metadata.usage.listenings.total', null),
+        listenings: _.get(this.nodeinfo, 'metadata.usage.listenings.total', null)
       }
       if (data.users === null || data.artists === null) {
         return
@@ -237,16 +327,16 @@ export default {
     federationEnabled () {
       return _.get(this.nodeinfo, 'metadata.library.federationEnabled')
     },
-    headerStyle() {
+    headerStyle () {
       if (!this.banner) {
-        return ""
+        return ''
       }
       return (
-        "background-image: url(" +
-        this.$store.getters["instance/absoluteUrl"](this.banner) +
-        ")"
+        'background-image: url(' +
+        this.$store.getters['instance/absoluteUrl'](this.banner) +
+        ')'
       )
-    },
+    }
   }
 }
 </script>
diff --git a/front/src/components/AboutPod.vue b/front/src/components/AboutPod.vue
index ecc3ec76e..085212e26 100644
--- a/front/src/components/AboutPod.vue
+++ b/front/src/components/AboutPod.vue
@@ -1,14 +1,23 @@
+<!-- eslint-disable vue/no-v-html
+We render some markdown to html here, the content is set by the admin so we should be save
+-->
 <template>
   <main
     v-title="labels.title"
     class="main pusher page-about"
   >
-    <div class="ui" :class="{ container: onDesktop}">
+    <div
+      class="ui"
+      :class="{ container: onDesktop}"
+    >
       <div class="ui horizontally fitted stripe basic segment">
         <div class="ui basic vertically fitted stripe segment content">
-          <section :class="['ui', 'head', {'with-background': banner}, 'vertical', 'center', 'aligned', 'stripe', 'segment']" :style="headerStyle">
+          <section
+            :class="['ui', 'head', {'with-background': banner}, 'vertical', 'center', 'aligned', 'stripe', 'segment']"
+            :style="headerStyle"
+          >
             <h1>
-              <i class="music icon"></i>
+              <i class="music icon" />
               {{ podName }}
             </h1>
           </section>
@@ -18,51 +27,112 @@
           <div class="about-pod-info-container">
             <div class="about-pod-info-toc">
               <div class="ui vertical pointing secondary menu">
-                <router-link to="/about/pod" class="item">
-                  <translate translate-context="Content/About/Header">About this pod</translate>
+                <router-link
+                  to="/about/pod"
+                  class="item"
+                >
+                  <translate translate-context="Content/About/Header">
+                    About this pod
+                  </translate>
                 </router-link>
-                <router-link to="/about/pod#rules" class="item">
-                  <translate translate-context="Content/About/Header">Rules</translate>
+                <router-link
+                  to="/about/pod#rules"
+                  class="item"
+                >
+                  <translate translate-context="Content/About/Header">
+                    Rules
+                  </translate>
                 </router-link>
-                <router-link to="/about/pod#terms" class="item">
-                  <translate translate-context="Content/About/Header">Terms and privacy policy</translate>
+                <router-link
+                  to="/about/pod#terms"
+                  class="item"
+                >
+                  <translate translate-context="Content/About/Header">
+                    Terms and privacy policy
+                  </translate>
                 </router-link>
-                <router-link to="/about/pod#features" class="item">
-                  <translate translate-context="Content/About/Header">Features</translate>
+                <router-link
+                  to="/about/pod#features"
+                  class="item"
+                >
+                  <translate translate-context="Content/About/Header">
+                    Features
+                  </translate>
                 </router-link>
-                <router-link v-if="stats" to="/about/pod#statistics" class="item">
-                  <translate translate-context="Content/About/Header">Statistics</translate>
+                <router-link
+                  v-if="stats"
+                  to="/about/pod#statistics"
+                  class="item"
+                >
+                  <translate translate-context="Content/About/Header">
+                    Statistics
+                  </translate>
                 </router-link>
               </div>
             </div>
 
             <div class="about-pod-info">
-              <h2 class="ui header" id="description about-this-pod">
-                <translate translate-context="Content/About/Header">About this pod</translate>
+              <h2
+                id="description about-this-pod"
+                class="ui header"
+              >
+                <translate translate-context="Content/About/Header">
+                  About this pod
+                </translate>
               </h2>
-              <div v-html="markdown.makeHtml(longDescription)" v-if="longDescription"></div>
+              <div
+                v-if="longDescription"
+                v-html="markdown.makeHtml(longDescription)"
+              />
               <p v-else>
-                <translate translate-context="Content/About/Paragraph">No description available.</translate>
+                <translate translate-context="Content/About/Paragraph">
+                  No description available.
+                </translate>
               </p>
 
-              <h3 class="ui header" id="rules">
-                <translate translate-context="Content/About/Header">Rules</translate>
+              <h3
+                id="rules"
+                class="ui header"
+              >
+                <translate translate-context="Content/About/Header">
+                  Rules
+                </translate>
               </h3>
-              <div v-html="markdown.makeHtml(rules)" v-if="rules"></div>
+              <div
+                v-if="rules"
+                v-html="markdown.makeHtml(rules)"
+              />
               <p v-else>
-                <translate translate-context="Content/About/Paragraph">No rules available.</translate>
+                <translate translate-context="Content/About/Paragraph">
+                  No rules available.
+                </translate>
               </p>
 
-              <h3 class="ui header" id="terms">
-                <translate translate-context="Content/About/Header">Terms and privacy policy</translate>
+              <h3
+                id="terms"
+                class="ui header"
+              >
+                <translate translate-context="Content/About/Header">
+                  Terms and privacy policy
+                </translate>
               </h3>
-              <div v-html="markdown.makeHtml(terms)" v-if="terms"></div>
+              <div
+                v-if="terms"
+                v-html="markdown.makeHtml(terms)"
+              />
               <p v-else>
-                <translate translate-context="Content/About/Paragraph">No terms available.</translate>
+                <translate translate-context="Content/About/Paragraph">
+                  No terms available.
+                </translate>
               </p>
 
-              <h3 class="header" id="features">
-                <translate translate-context="Content/About/Header/Name">Features</translate>
+              <h3
+                id="features"
+                class="header"
+              >
+                <translate translate-context="Content/About/Header/Name">
+                  Features
+                </translate>
               </h3>
               <div class="features-container ui two column stackable grid">
                 <div class="column">
@@ -70,14 +140,22 @@
                     <tbody>
                       <tr>
                         <td>
-                          <translate translate-context="*/*/*">Funkwhale version</translate>
+                          <translate translate-context="*/*/*">
+                            Funkwhale version
+                          </translate>
                         </td>
-                        <td v-if="version" class="right aligned">
+                        <td
+                          v-if="version"
+                          class="right aligned"
+                        >
                           <span class="features-status ui text">
                             {{ version }}
                           </span>
                         </td>
-                        <td v-else class="right aligned">
+                        <td
+                          v-else
+                          class="right aligned"
+                        >
                           <span class="features-status ui text">
                             <translate translate-context="*/*/*">N/A</translate>
                           </span>
@@ -85,34 +163,50 @@
                       </tr>
                       <tr>
                         <td>
-                          <translate translate-context="*/*/*">Federation</translate>
+                          <translate translate-context="*/*/*">
+                            Federation
+                          </translate>
                         </td>
-                        <td v-if="federationEnabled" class="right aligned">
+                        <td
+                          v-if="federationEnabled"
+                          class="right aligned"
+                        >
                           <span class="features-status ui text">
-                            <i class="check icon"></i>
+                            <i class="check icon" />
                             <translate translate-context="*/*/*/State of feature">Enabled</translate>
                           </span>
                         </td>
-                        <td v-else class="right aligned">
+                        <td
+                          v-else
+                          class="right aligned"
+                        >
                           <span class="features-status ui text">
-                            <i class="x icon"></i>
+                            <i class="x icon" />
                             <translate translate-context="*/*/*/State of feature">Disabled</translate>
                           </span>
                         </td>
                       </tr>
                       <tr>
                         <td>
-                          <translate translate-context="*/*/*">Allow-list</translate>
+                          <translate translate-context="*/*/*">
+                            Allow-list
+                          </translate>
                         </td>
-                        <td v-if="allowListEnabled" class="right aligned">
+                        <td
+                          v-if="allowListEnabled"
+                          class="right aligned"
+                        >
                           <span class="features-status ui text">
-                            <i class="check icon"></i>
+                            <i class="check icon" />
                             <translate translate-context="*/*/*/State of feature">Enabled</translate>
                           </span>
                         </td>
-                        <td v-else class="right aligned">
+                        <td
+                          v-else
+                          class="right aligned"
+                        >
                           <span class="features-status ui text">
-                            <i class="x icon"></i>
+                            <i class="x icon" />
                             <translate translate-context="*/*/*/State of feature">Disabled</translate>
                           </span>
                         </td>
@@ -125,48 +219,72 @@
                     <tbody>
                       <tr>
                         <td>
-                          <translate translate-context="*/*/*">Anonymous access</translate>
+                          <translate translate-context="*/*/*">
+                            Anonymous access
+                          </translate>
                         </td>
-                        <td v-if="anonymousCanListen" class="right aligned">
+                        <td
+                          v-if="anonymousCanListen"
+                          class="right aligned"
+                        >
                           <span class="features-status ui text">
-                            <i class="check icon"></i>
+                            <i class="check icon" />
                             <translate translate-context="*/*/*/State of feature">Enabled</translate>
                           </span>
                         </td>
-                        <td v-else class="right aligned">
+                        <td
+                          v-else
+                          class="right aligned"
+                        >
                           <span class="features-status ui text">
-                            <i class="x icon"></i>
+                            <i class="x icon" />
                             <translate translate-context="*/*/*/State of feature">Disabled</translate>
                           </span>
                         </td>
                       </tr>
                       <tr>
                         <td>
-                          <translate translate-context="*/*/*">Registrations</translate>
+                          <translate translate-context="*/*/*">
+                            Registrations
+                          </translate>
                         </td>
-                        <td v-if="openRegistrations" class="right aligned">
+                        <td
+                          v-if="openRegistrations"
+                          class="right aligned"
+                        >
                           <span class="features-status ui text">
-                            <i class="check icon"></i>
+                            <i class="check icon" />
                             <translate translate-context="*/*/*/State of registrations">Open</translate>
                           </span>
                         </td>
-                        <td v-else class="right aligned">
+                        <td
+                          v-else
+                          class="right aligned"
+                        >
                           <span class="features-status ui text">
-                            <i class="x icon"></i>
+                            <i class="x icon" />
                             <translate translate-context="*/*/*/State of registrations">Closed</translate>
                           </span>
                         </td>
                       </tr>
                       <tr>
                         <td>
-                          <translate translate-context="*/*/*">Upload quota</translate>
+                          <translate translate-context="*/*/*">
+                            Upload quota
+                          </translate>
                         </td>
-                        <td v-if="defaultUploadQuota" class="right aligned">
+                        <td
+                          v-if="defaultUploadQuota"
+                          class="right aligned"
+                        >
                           <span class="features-status ui text">
                             {{ defaultUploadQuota * 1000 * 1000 | humanSize }}
                           </span>
                         </td>
-                        <td v-else class="right aligned">
+                        <td
+                          v-else
+                          class="right aligned"
+                        >
                           <span class="features-status ui text">
                             <translate translate-context="*/*/*">N/A</translate>
                           </span>
@@ -178,69 +296,132 @@
               </div>
 
               <template v-if="stats">
-                <h3 class="header" id="statistics">
-                  <translate translate-context="Content/About/Header">Statistics</translate>
+                <h3
+                  id="statistics"
+                  class="header"
+                >
+                  <translate translate-context="Content/About/Header">
+                    Statistics
+                  </translate>
                 </h3>
                 <div class="statistics-container">
-                  <div class="statistics-statistic" v-if="stats.hours">
+                  <div
+                    v-if="stats.hours"
+                    class="statistics-statistic"
+                  >
                     <span class="statistics-figure ui text">
                       <span class="ui big text"><strong>{{ parseInt(stats.hours).toLocaleString($store.state.ui.momentLocale) }}</strong></span>
-                      <br />
-                      <translate translate-context="Content/About/*" :translate-n="parseInt(stats.hours)" translate-plural="hours of music">hour of music</translate>
+                      <br>
+                      <translate
+                        translate-context="Content/About/*"
+                        :translate-n="parseInt(stats.hours)"
+                        translate-plural="hours of music"
+                      >hour of music</translate>
                     </span>
                   </div>
-                  <div class="statistics-statistic" v-if="stats.artists">
+                  <div
+                    v-if="stats.artists"
+                    class="statistics-statistic"
+                  >
                     <span class="statistics-figure ui text">
                       <span class="ui big text"><strong>{{ stats.artists.toLocaleString($store.state.ui.momentLocale) }}</strong></span>
-                      <br />
-                      <translate translate-context="Content/About/*" :translate-n="stats.artists" translate-plural="artists">artist</translate>
+                      <br>
+                      <translate
+                        translate-context="Content/About/*"
+                        :translate-n="stats.artists"
+                        translate-plural="artists"
+                      >artist</translate>
                     </span>
                   </div>
-                  <div class="statistics-statistic" v-if="stats.albums">
+                  <div
+                    v-if="stats.albums"
+                    class="statistics-statistic"
+                  >
                     <span class="statistics-figure ui text">
                       <span class="ui big text"><strong>{{ stats.albums.toLocaleString($store.state.ui.momentLocale) }}</strong></span>
-                      <br />
-                      <translate translate-context="Content/About/*" :translate-n="stats.albums" translate-plural="albums">album</translate>
+                      <br>
+                      <translate
+                        translate-context="Content/About/*"
+                        :translate-n="stats.albums"
+                        translate-plural="albums"
+                      >album</translate>
                     </span>
                   </div>
-                  <div class="statistics-statistic" v-if="stats.tracks">
+                  <div
+                    v-if="stats.tracks"
+                    class="statistics-statistic"
+                  >
                     <span class="statistics-figure ui text">
                       <span class="ui big text"><strong>{{ stats.tracks.toLocaleString($store.state.ui.momentLocale) }}</strong></span>
-                      <br />
-                      <translate translate-context="Content/About/*" :translate-n="stats.tracks" translate-plural="tracks">track</translate>
+                      <br>
+                      <translate
+                        translate-context="Content/About/*"
+                        :translate-n="stats.tracks"
+                        translate-plural="tracks"
+                      >track</translate>
                     </span>
                   </div>
-                  <div class="statistics-statistic" v-if="stats.users">
+                  <div
+                    v-if="stats.users"
+                    class="statistics-statistic"
+                  >
                     <span class="statistics-figure ui text">
                       <span class="ui big text"><strong>{{ stats.users.toLocaleString($store.state.ui.momentLocale) }}</strong></span>
-                      <br />
-                      <translate translate-context="Content/About/*" :translate-n="stats.users" translate-plural="active users">active user</translate>
+                      <br>
+                      <translate
+                        translate-context="Content/About/*"
+                        :translate-n="stats.users"
+                        translate-plural="active users"
+                      >active user</translate>
                     </span>
                   </div>
-                  <div class="statistics-statistic" v-if="stats.listenings">
+                  <div
+                    v-if="stats.listenings"
+                    class="statistics-statistic"
+                  >
                     <span class="statistics-figure ui text">
                       <span class="ui big text"><strong>{{ stats.listenings.toLocaleString($store.state.ui.momentLocale) }}</strong></span>
-                      <br />
-                      <translate translate-context="Content/About/*" :translate-n="stats.listenings" translate-plural="listenings">listening</translate>
+                      <br>
+                      <translate
+                        translate-context="Content/About/*"
+                        :translate-n="stats.listenings"
+                        translate-plural="listenings"
+                      >listening</translate>
                     </span>
                   </div>
                 </div>
               </template>
 
               <template v-if="contactEmail">
-                <h3 class="ui header" id="contact">
-                  <translate translate-context="Content/About/Header">Contact</translate>
+                <h3
+                  id="contact"
+                  class="ui header"
+                >
+                  <translate translate-context="Content/About/Header">
+                    Contact
+                  </translate>
                 </h3>
-                <a v-if="contactEmail" :href="`mailto:${contactEmail}`">
-                  <translate translate-context="Content/About/Email" :translate-params="{ email: contactEmail }">Send us an email: {{ contactEmail }}</translate>
+                <a
+                  v-if="contactEmail"
+                  :href="`mailto:${contactEmail}`"
+                >
+                  <translate
+                    translate-context="Content/About/Email"
+                    :translate-params="{ email: contactEmail }"
+                  >Send us an email: {{ contactEmail }}</translate>
                 </a>
               </template>
 
-              <div class="ui hidden divider"></div>
+              <div class="ui hidden divider" />
               <div class="ui fluid horizontally fitted basic clearing segment container">
-                <router-link to="/about" class="ui left floated basic secondary button">
-                  <i class="icon arrow left"></i>
-                  <translate translate-context="Content/About/Paragraph">Introduction</translate>
+                <router-link
+                  to="/about"
+                  class="ui left floated basic secondary button"
+                >
+                  <i class="icon arrow left" />
+                  <translate translate-context="Content/About/Paragraph">
+                    Introduction
+                  </translate>
                 </router-link>
               </div>
             </div>
@@ -252,34 +433,29 @@
 </template>
 
 <script>
-import { mapState } from "vuex"
+import { mapState } from 'vuex'
 import _ from '@/lodash'
 import showdown from 'showdown'
 
-import SignupForm from "@/components/auth/SignupForm"
-
 export default {
-  components: {
-    SignupForm,
-  },
   data () {
     return {
       markdown: new showdown.Converter(),
-      showAllowedDomains: false,
+      showAllowedDomains: false
     }
   },
   computed: {
 
-  ...mapState({
-      nodeinfo: state => state.instance.nodeinfo,
+    ...mapState({
+      nodeinfo: state => state.instance.nodeinfo
     }),
-    labels() {
+    labels () {
       return {
-        title: this.$pgettext('Head/About/Title', "About")
+        title: this.$pgettext('Head/About/Title', 'About')
       }
     },
-    podName() {
-      return _.get(this.nodeinfo, 'metadata.nodeName') || "Funkwhale"
+    podName () {
+      return _.get(this.nodeinfo, 'metadata.nodeName') || 'Funkwhale'
     },
     banner () {
       return _.get(this.nodeinfo, 'metadata.banner')
@@ -297,13 +473,13 @@ export default {
       return _.get(this.nodeinfo, 'metadata.terms')
     },
     stats () {
-      let data = {
+      const data = {
         users: _.get(this.nodeinfo, 'usage.users.activeMonth', null),
         hours: _.get(this.nodeinfo, 'metadata.library.music.hours', null),
         artists: _.get(this.nodeinfo, 'metadata.library.artists.total', null),
         albums: _.get(this.nodeinfo, 'metadata.library.albums.total', null),
         tracks: _.get(this.nodeinfo, 'metadata.library.tracks.total', null),
-        listenings: _.get(this.nodeinfo, 'metadata.usage.listenings.total', null),
+        listenings: _.get(this.nodeinfo, 'metadata.usage.listenings.total', null)
       }
       if (data.users === null || data.artists === null) {
         return
@@ -334,19 +510,19 @@ export default {
     federationEnabled () {
       return _.get(this.nodeinfo, 'metadata.library.federationEnabled')
     },
-    headerStyle() {
+    headerStyle () {
       if (!this.banner) {
-        return ""
+        return ''
       }
       return (
-        "background-image: url(" +
-        this.$store.getters["instance/absoluteUrl"](this.banner) +
-        ")"
+        'background-image: url(' +
+        this.$store.getters['instance/absoluteUrl'](this.banner) +
+        ')'
       )
     },
     onDesktop () {
-      if(window.innerWidth > 800) return true;
-      return false;
+      if (window.innerWidth > 800) return true
+      return false
     }
   }
 }