chore: add prettier frontent linter

frontend/src/views/settings/Global.vue

@@ -3,54 +3,93 @@
     <div class="column">
       <form class="card" @submit.prevent="save">
         <div class="card-title">
-          <h2>{{ $t('settings.globalSettings') }}</h2>
+          <h2>{{ $t("settings.globalSettings") }}</h2>
         </div>
 
         <div class="card-content">
-          <p><input type="checkbox" v-model="settings.signup"> {{ $t('settings.allowSignup') }}</p>
+          <p>
+            <input type="checkbox" v-model="settings.signup" />
+            {{ $t("settings.allowSignup") }}
+          </p>
 
-          <p><input type="checkbox" v-model="settings.createUserDir"> {{ $t('settings.createUserDir') }}</p>
+          <p>
+            <input type="checkbox" v-model="settings.createUserDir" />
+            {{ $t("settings.createUserDir") }}
+          </p>
 
-          <h3>{{ $t('settings.rules') }}</h3>
-          <p class="small">{{ $t('settings.globalRules') }}</p>
+          <h3>{{ $t("settings.rules") }}</h3>
+          <p class="small">{{ $t("settings.globalRules") }}</p>
           <rules :rules.sync="settings.rules" />
 
           <div v-if="isExecEnabled">
-            <h3>{{ $t('settings.executeOnShell') }}</h3>
-            <p class="small">{{ $t('settings.executeOnShellDescription') }}</p>
-            <input class="input input--block" type="text" placeholder="bash -c, cmd /c, ..." v-model="settings.shell" />
+            <h3>{{ $t("settings.executeOnShell") }}</h3>
+            <p class="small">{{ $t("settings.executeOnShellDescription") }}</p>
+            <input
+              class="input input--block"
+              type="text"
+              placeholder="bash -c, cmd /c, ..."
+              v-model="settings.shell"
+            />
           </div>
 
-          <h3>{{ $t('settings.branding') }}</h3>
+          <h3>{{ $t("settings.branding") }}</h3>
 
           <i18n path="settings.brandingHelp" tag="p" class="small">
-            <a class="link" target="_blank" href="https://filebrowser.org/configuration/custom-branding">{{ $t('settings.documentation') }}</a>
+            <a
+              class="link"
+              target="_blank"
+              href="https://filebrowser.org/configuration/custom-branding"
+              >{{ $t("settings.documentation") }}</a
+            >
           </i18n>
 
           <p>
-            <input type="checkbox" v-model="settings.branding.disableExternal" id="branding-links" />
-            {{ $t('settings.disableExternalLinks') }}
+            <input
+              type="checkbox"
+              v-model="settings.branding.disableExternal"
+              id="branding-links"
+            />
+            {{ $t("settings.disableExternalLinks") }}
           </p>
 
           <p>
-            <label for="theme">{{ $t('settings.themes.title') }}</label>
-            <themes class="input input--block" :theme.sync="settings.branding.theme" id="theme"></themes>
+            <label for="theme">{{ $t("settings.themes.title") }}</label>
+            <themes
+              class="input input--block"
+              :theme.sync="settings.branding.theme"
+              id="theme"
+            ></themes>
           </p>
 
           <p>
-            <label for="branding-name">{{ $t('settings.instanceName') }}</label>
-            <input class="input input--block" type="text" v-model="settings.branding.name" id="branding-name" />
+            <label for="branding-name">{{ $t("settings.instanceName") }}</label>
+            <input
+              class="input input--block"
+              type="text"
+              v-model="settings.branding.name"
+              id="branding-name"
+            />
           </p>
 
           <p>
-            <label for="branding-files">{{ $t('settings.brandingDirectoryPath') }}</label>
-            <input class="input input--block" type="text" v-model="settings.branding.files" id="branding-files" />
+            <label for="branding-files">{{
+              $t("settings.brandingDirectoryPath")
+            }}</label>
+            <input
+              class="input input--block"
+              type="text"
+              v-model="settings.branding.files"
+              id="branding-files"
+            />
           </p>
-
         </div>
 
         <div class="card-action">
-          <input class="button button--flat" type="submit" :value="$t('buttons.update')">
+          <input
+            class="button button--flat"
+            type="submit"
+            :value="$t('buttons.update')"
+          />
         </div>
       </form>
     </div>
@@ -58,17 +97,25 @@
     <div class="column">
       <form class="card" @submit.prevent="save">
         <div class="card-title">
-          <h2>{{ $t('settings.userDefaults') }}</h2>
+          <h2>{{ $t("settings.userDefaults") }}</h2>
         </div>
 
         <div class="card-content">
-          <p class="small">{{ $t('settings.defaultUserDescription') }}</p>
+          <p class="small">{{ $t("settings.defaultUserDescription") }}</p>
 
-          <user-form :isNew="false" :isDefault="true" :user.sync="settings.defaults" />
+          <user-form
+            :isNew="false"
+            :isDefault="true"
+            :user.sync="settings.defaults"
+          />
         </div>
 
         <div class="card-action">
-          <input class="button button--flat" type="submit" :value="$t('buttons.update')">
+          <input
+            class="button button--flat"
+            type="submit"
+            :value="$t('buttons.update')"
+          />
         </div>
       </form>
     </div>
@@ -76,30 +123,46 @@
     <div class="column">
       <form v-if="isExecEnabled" class="card" @submit.prevent="save">
         <div class="card-title">
-          <h2>{{ $t('settings.commandRunner') }}</h2>
+          <h2>{{ $t("settings.commandRunner") }}</h2>
         </div>
 
         <div class="card-content">
           <i18n path="settings.commandRunnerHelp" tag="p" class="small">
             <code>FILE</code>
             <code>SCOPE</code>
-            <a class="link" target="_blank" href="https://filebrowser.org/configuration/command-runner">{{ $t('settings.documentation') }}</a>
+            <a
+              class="link"
+              target="_blank"
+              href="https://filebrowser.org/configuration/command-runner"
+              >{{ $t("settings.documentation") }}</a
+            >
           </i18n>
 
-          <div v-for="command in settings.commands" :key="command.name" class="collapsible">
-            <input :id="command.name" type="checkbox">
+          <div
+            v-for="command in settings.commands"
+            :key="command.name"
+            class="collapsible"
+          >
+            <input :id="command.name" type="checkbox" />
             <label :for="command.name">
               <p>{{ capitalize(command.name) }}</p>
               <i class="material-icons">arrow_drop_down</i>
             </label>
             <div class="collapse">
-              <textarea class="input input--block input--textarea" v-model.trim="command.value"></textarea>
+              <textarea
+                class="input input--block input--textarea"
+                v-model.trim="command.value"
+              ></textarea>
             </div>
           </div>
         </div>
 
         <div class="card-action">
-          <input class="button button--flat" type="submit" :value="$t('buttons.update')">
+          <input
+            class="button button--flat"
+            type="submit"
+            :value="$t('buttons.update')"
+          />
         </div>
       </form>
     </div>
@@ -107,80 +170,84 @@
 </template>
 
 <script>
-import { mapState } from 'vuex'
-import { settings as api } from '@/api'
-import UserForm from '@/components/settings/UserForm'
-import Rules from '@/components/settings/Rules'
-import Themes from '@/components/settings/Themes'
-import { enableExec } from '@/utils/constants'
+import { mapState } from "vuex";
+import { settings as api } from "@/api";
+import UserForm from "@/components/settings/UserForm";
+import Rules from "@/components/settings/Rules";
+import Themes from "@/components/settings/Themes";
+import { enableExec } from "@/utils/constants";
 
 export default {
-  name: 'settings',
+  name: "settings",
   components: {
     Themes,
     UserForm,
-    Rules
+    Rules,
   },
   data: function () {
     return {
       originalSettings: null,
-      settings: null
-    }
+      settings: null,
+    };
   },
   computed: {
-    ...mapState([ 'user' ]),
-    isExecEnabled: () => enableExec
+    ...mapState(["user"]),
+    isExecEnabled: () => enableExec,
   },
-  async created () {
+  async created() {
     try {
-      const original = await api.get()
-      let settings = { ...original, commands: [] }
+      const original = await api.get();
+      let settings = { ...original, commands: [] };
 
       for (const key in original.commands) {
         settings.commands.push({
           name: key,
-          value: original.commands[key].join('\n')
-        })
+          value: original.commands[key].join("\n"),
+        });
       }
 
-      settings.shell = settings.shell.join(' ')
+      settings.shell = settings.shell.join(" ");
 
-      this.originalSettings = original
-      this.settings = settings
+      this.originalSettings = original;
+      this.settings = settings;
     } catch (e) {
-      this.$showError(e)
+      this.$showError(e);
     }
   },
   methods: {
-    capitalize (name, where = '_') {
-      if (where === 'caps') where = /(?=[A-Z])/
-      let splitted = name.split(where)
-      name = ''
+    capitalize(name, where = "_") {
+      if (where === "caps") where = /(?=[A-Z])/;
+      let splitted = name.split(where);
+      name = "";
 
       for (let i = 0; i < splitted.length; i++) {
-        name += splitted[i].charAt(0).toUpperCase() + splitted[i].slice(1) + ' '
+        name +=
+          splitted[i].charAt(0).toUpperCase() + splitted[i].slice(1) + " ";
       }
 
-      return name.slice(0, -1)
+      return name.slice(0, -1);
     },
-    async save () {
+    async save() {
       let settings = {
         ...this.settings,
-        shell: this.settings.shell.trim().split(' ').filter(s => s !== ''),
-        commands: {}
-      }
+        shell: this.settings.shell
+          .trim()
+          .split(" ")
+          .filter((s) => s !== ""),
+        commands: {},
+      };
 
       for (const { name, value } of this.settings.commands) {
-        settings.commands[name] = value.split('\n').filter(cmd => cmd !== '')
+        settings.commands[name] = value.split("\n").filter((cmd) => cmd !== "");
       }
 
       try {
-        await api.update(settings)
-        this.$showSuccess(this.$t('settings.settingsUpdated'))
+        await api.update(settings);
+        this.$showSuccess(this.$t("settings.settingsUpdated"));
       } catch (e) {
-        this.$showError(e)
+        this.$showError(e);
       }
-    }
-  }
-}
+    },
+  },
+};
 </script>

frontend/src/views/settings/Profile.vue

@@ -3,18 +3,31 @@
     <div class="column">
       <form class="card" @submit="updateSettings">
         <div class="card-title">
-          <h2>{{ $t('settings.profileSettings') }}</h2>
+          <h2>{{ $t("settings.profileSettings") }}</h2>
         </div>
 
         <div class="card-content">
-          <p><input type="checkbox" v-model="hideDotfiles"> {{ $t('settings.hideDotfiles') }}</p>
-          <p><input type="checkbox" v-model="singleClick"> {{ $t('settings.singleClick') }}</p>
-          <h3>{{ $t('settings.language') }}</h3>
-          <languages class="input input--block" :locale.sync="locale"></languages>
+          <p>
+            <input type="checkbox" v-model="hideDotfiles" />
+            {{ $t("settings.hideDotfiles") }}
+          </p>
+          <p>
+            <input type="checkbox" v-model="singleClick" />
+            {{ $t("settings.singleClick") }}
+          </p>
+          <h3>{{ $t("settings.language") }}</h3>
+          <languages
+            class="input input--block"
+            :locale.sync="locale"
+          ></languages>
         </div>
 
         <div class="card-action">
-          <input class="button button--flat" type="submit" :value="$t('buttons.update')">
+          <input
+            class="button button--flat"
+            type="submit"
+            :value="$t('buttons.update')"
+          />
         </div>
       </form>
     </div>
@@ -22,16 +35,32 @@
     <div class="column">
       <form class="card" v-if="!user.lockPassword" @submit="updatePassword">
         <div class="card-title">
-          <h2>{{ $t('settings.changePassword') }}</h2>
+          <h2>{{ $t("settings.changePassword") }}</h2>
         </div>
 
         <div class="card-content">
-          <input :class="passwordClass" type="password" :placeholder="$t('settings.newPassword')" v-model="password" name="password">
-          <input :class="passwordClass" type="password" :placeholder="$t('settings.newPasswordConfirm')" v-model="passwordConf" name="password">
+          <input
+            :class="passwordClass"
+            type="password"
+            :placeholder="$t('settings.newPassword')"
+            v-model="password"
+            name="password"
+          />
+          <input
+            :class="passwordClass"
+            type="password"
+            :placeholder="$t('settings.newPasswordConfirm')"
+            v-model="passwordConf"
+            name="password"
+          />
         </div>
 
         <div class="card-action">
-          <input class="button button--flat" type="submit" :value="$t('buttons.update')">
+          <input
+            class="button button--flat"
+            type="submit"
+            :value="$t('buttons.update')"
+          />
         </div>
       </form>
     </div>
@@ -39,75 +68,80 @@
 </template>
 
 <script>
-import { mapState, mapMutations } from 'vuex'
-import { users as api } from '@/api'
-import Languages from '@/components/settings/Languages'
+import { mapState, mapMutations } from "vuex";
+import { users as api } from "@/api";
+import Languages from "@/components/settings/Languages";
 
 export default {
-  name: 'settings',
+  name: "settings",
   components: {
-    Languages
+    Languages,
   },
   data: function () {
     return {
-      password: '',
-      passwordConf: '',
+      password: "",
+      passwordConf: "",
       hideDotfiles: false,
       singleClick: false,
-      locale: ''
-    }
+      locale: "",
+    };
   },
   computed: {
-    ...mapState([ 'user' ]),
-    passwordClass () {
-      const baseClass = 'input input--block'
+    ...mapState(["user"]),
+    passwordClass() {
+      const baseClass = "input input--block";
 
-      if (this.password === '' && this.passwordConf === '') {
-        return baseClass
+      if (this.password === "" && this.passwordConf === "") {
+        return baseClass;
       }
 
       if (this.password === this.passwordConf) {
-        return `${baseClass} input--green`
+        return `${baseClass} input--green`;
       }
 
-      return `${baseClass} input--red`
-    }
+      return `${baseClass} input--red`;
+    },
   },
-  created () {
-    this.locale = this.user.locale
-    this.hideDotfiles = this.user.hideDotfiles
-    this.singleClick = this.user.singleClick
+  created() {
+    this.locale = this.user.locale;
+    this.hideDotfiles = this.user.hideDotfiles;
+    this.singleClick = this.user.singleClick;
   },
   methods: {
-    ...mapMutations([ 'updateUser' ]),
-    async updatePassword (event) {
-      event.preventDefault()
+    ...mapMutations(["updateUser"]),
+    async updatePassword(event) {
+      event.preventDefault();
 
-      if (this.password !== this.passwordConf || this.password === '') {
-        return
+      if (this.password !== this.passwordConf || this.password === "") {
+        return;
       }
 
       try {
-        const data = { id: this.user.id, password: this.password }
-        await api.update(data, ['password'])
-        this.updateUser(data)
-        this.$showSuccess(this.$t('settings.passwordUpdated'))
+        const data = { id: this.user.id, password: this.password };
+        await api.update(data, ["password"]);
+        this.updateUser(data);
+        this.$showSuccess(this.$t("settings.passwordUpdated"));
       } catch (e) {
-        this.$showError(e)
+        this.$showError(e);
       }
     },
-    async updateSettings (event) {
-      event.preventDefault()
+    async updateSettings(event) {
+      event.preventDefault();
 
       try {
-        const data = { id: this.user.id, locale: this.locale, hideDotfiles: this.hideDotfiles, singleClick: this.singleClick }
-        await api.update(data, ['locale', 'hideDotfiles', 'singleClick'])
-        this.updateUser(data)
-        this.$showSuccess(this.$t('settings.settingsUpdated'))
+        const data = {
+          id: this.user.id,
+          locale: this.locale,
+          hideDotfiles: this.hideDotfiles,
+          singleClick: this.singleClick,
+        };
+        await api.update(data, ["locale", "hideDotfiles", "singleClick"]);
+        this.updateUser(data);
+        this.$showSuccess(this.$t("settings.settingsUpdated"));
       } catch (e) {
-        this.$showError(e)
+        this.$showError(e);
       }
-    }
-  }
-}
+    },
+  },
+};
 </script>

frontend/src/views/settings/Shares.vue

@@ -3,37 +3,51 @@
     <div class="column">
       <div class="card">
         <div class="card-title">
-          <h2>{{ $t('settings.shareManagement') }}</h2>
+          <h2>{{ $t("settings.shareManagement") }}</h2>
         </div>
 
         <div class="card-content full">
           <table>
             <tr>
-              <th>{{ $t('settings.path') }}</th>
-              <th>{{ $t('settings.shareDuration') }}</th>
-              <th v-if="user.perm.admin">{{ $t('settings.username') }}</th>
+              <th>{{ $t("settings.path") }}</th>
+              <th>{{ $t("settings.shareDuration") }}</th>
+              <th v-if="user.perm.admin">{{ $t("settings.username") }}</th>
               <th></th>
               <th></th>
             </tr>
 
             <tr v-for="link in links" :key="link.hash">
-              <td><a :href="buildLink(link.hash)" target="_blank">{{ link.path }}</a></td>
               <td>
-                <template v-if="link.expire !== 0">{{ humanTime(link.expire) }}</template>
-                <template v-else>{{ $t('permanent') }}</template>
+                <a :href="buildLink(link.hash)" target="_blank">{{
+                  link.path
+                }}</a>
+              </td>
+              <td>
+                <template v-if="link.expire !== 0">{{
+                  humanTime(link.expire)
+                }}</template>
+                <template v-else>{{ $t("permanent") }}</template>
               </td>
               <td v-if="user.perm.admin">{{ link.username }}</td>
               <td class="small">
-                <button class="action"
-                        @click="deleteLink($event, link)"
-                        :aria-label="$t('buttons.delete')"
-                        :title="$t('buttons.delete')"><i class="material-icons">delete</i></button>
+                <button
+                  class="action"
+                  @click="deleteLink($event, link)"
+                  :aria-label="$t('buttons.delete')"
+                  :title="$t('buttons.delete')"
+                >
+                  <i class="material-icons">delete</i>
+                </button>
               </td>
               <td class="small">
-                <button class="action copy-clipboard"
-                        :data-clipboard-text="buildLink(link.hash)"
-                        :aria-label="$t('buttons.copyToClipboard')"
-                        :title="$t('buttons.copyToClipboard')"><i class="material-icons">content_paste</i></button>
+                <button
+                  class="action copy-clipboard"
+                  :data-clipboard-text="buildLink(link.hash)"
+                  :aria-label="$t('buttons.copyToClipboard')"
+                  :title="$t('buttons.copyToClipboard')"
+                >
+                  <i class="material-icons">content_paste</i>
+                </button>
               </td>
             </tr>
           </table>
@@ -44,63 +58,67 @@
 </template>
 
 <script>
-import { share as api, users } from '@/api'
-import moment from 'moment'
-import {baseURL} from "@/utils/constants"
-import Clipboard from 'clipboard'
-import {mapState} from "vuex";
+import { share as api, users } from "@/api";
+import moment from "moment";
+import { baseURL } from "@/utils/constants";
+import Clipboard from "clipboard";
+import { mapState } from "vuex";
 
 export default {
-  name: 'shares',
-  computed: mapState([ 'user' ]),
+  name: "shares",
+  computed: mapState(["user"]),
   data: function () {
     return {
       links: [],
-      clip: null
-    }
+      clip: null,
+    };
   },
-  async created () {
+  async created() {
     try {
-      let links = await api.list()
+      let links = await api.list();
       if (this.user.perm.admin) {
-        let userMap = new Map()
-        for (let user of await users.getAll()) userMap.set(user.id, user.username)
-        for (let link of links) link.username = userMap.has(link.userID) ? userMap.get(link.userID) : ''
+        let userMap = new Map();
+        for (let user of await users.getAll())
+          userMap.set(user.id, user.username);
+        for (let link of links)
+          link.username = userMap.has(link.userID)
+            ? userMap.get(link.userID)
+            : "";
       }
-      this.links = links
+      this.links = links;
     } catch (e) {
-      this.$showError(e)
+      this.$showError(e);
     }
   },
   mounted() {
-    this.clip = new Clipboard('.copy-clipboard')
-    this.clip.on('success', () => {
-      this.$showSuccess(this.$t('success.linkCopied'))
-    })
+    this.clip = new Clipboard(".copy-clipboard");
+    this.clip.on("success", () => {
+      this.$showSuccess(this.$t("success.linkCopied"));
+    });
   },
-  beforeDestroy () {
-    this.clip.destroy()
+  beforeDestroy() {
+    this.clip.destroy();
   },
   methods: {
     deleteLink: async function (event, link) {
-      event.preventDefault()
+      event.preventDefault();
 
-      this.$store.commit('showHover', {
-        prompt: 'share-delete',
+      this.$store.commit("showHover", {
+        prompt: "share-delete",
         confirm: () => {
-          this.$store.commit('closeHovers')
+          this.$store.commit("closeHovers");
 
-          api.remove(link.hash)
-          this.links = this.links.filter(item => item.hash !== link.hash)
-        }
-      })
+          api.remove(link.hash);
+          this.links = this.links.filter((item) => item.hash !== link.hash);
+        },
+      });
     },
-    humanTime (time) {
-      return moment(time * 1000).fromNow()
+    humanTime(time) {
+      return moment(time * 1000).fromNow();
     },
-    buildLink (hash) {
-      return `${window.location.origin}${baseURL}/share/${hash}`
-    }
-  }
-}
+    buildLink(hash) {
+      return `${window.location.origin}${baseURL}/share/${hash}`;
+    },
+  },
+};
 </script>

frontend/src/views/settings/User.vue

@@ -3,8 +3,8 @@
     <div class="column">
       <form v-if="loaded" @submit="save" class="card">
         <div class="card-title">
-          <h2 v-if="user.id === 0">{{ $t('settings.newUser') }}</h2>
-          <h2 v-else>{{ $t('settings.user') }} {{ user.username }}</h2>
+          <h2 v-if="user.id === 0">{{ $t("settings.newUser") }}</h2>
+          <h2 v-else>{{ $t("settings.user") }} {{ user.username }}</h2>
         </div>
 
         <div class="card-content">
@@ -18,11 +18,15 @@
             type="button"
             class="button button--flat button--red"
             :aria-label="$t('buttons.delete')"
-            :title="$t('buttons.delete')">{{ $t('buttons.delete') }}</button>
+            :title="$t('buttons.delete')"
+          >
+            {{ $t("buttons.delete") }}
+          </button>
           <input
             class="button button--flat"
             type="submit"
-            :value="$t('buttons.save')">
+            :value="$t('buttons.save')"
+          />
         </div>
       </form>
     </div>
@@ -33,16 +37,17 @@
       </div>
 
       <div class="card-action">
-        <button class="button button--flat button--grey"
+        <button
+          class="button button--flat button--grey"
           @click="closeHovers"
           v-focus
           :aria-label="$t('buttons.cancel')"
-          :title="$t('buttons.cancel')">
-          {{ $t('buttons.cancel') }}
+          :title="$t('buttons.cancel')"
+        >
+          {{ $t("buttons.cancel") }}
         </button>
-        <button class="button button--flat"
-          @click="deleteUser">
-          {{ $t('buttons.delete') }}
+        <button class="button button--flat" @click="deleteUser">
+          {{ $t("buttons.delete") }}
         </button>
       </div>
     </div>
@@ -50,101 +55,103 @@
 </template>
 
 <script>
-import { mapMutations } from 'vuex'
-import { users as api, settings } from '@/api'
-import UserForm from '@/components/settings/UserForm'
-import deepClone from 'lodash.clonedeep'
+import { mapMutations } from "vuex";
+import { users as api, settings } from "@/api";
+import UserForm from "@/components/settings/UserForm";
+import deepClone from "lodash.clonedeep";
 
 export default {
-  name: 'user',
+  name: "user",
   components: {
-    UserForm
+    UserForm,
   },
   data: () => {
     return {
       originalUser: null,
       user: {},
-      loaded: false
-    }
+      loaded: false,
+    };
   },
-  created () {
-    this.fetchData()
+  created() {
+    this.fetchData();
   },
   computed: {
-    isNew () {
-      return this.$route.path === '/settings/users/new'
-    }
+    isNew() {
+      return this.$route.path === "/settings/users/new";
+    },
   },
   watch: {
-    '$route': 'fetchData',
-    'user.perm.admin': function () {
-      if (!this.user.perm.admin) return
-      this.user.lockPassword = false
-    }
+    $route: "fetchData",
+    "user.perm.admin": function () {
+      if (!this.user.perm.admin) return;
+      this.user.lockPassword = false;
+    },
   },
   methods: {
-    ...mapMutations([ 'closeHovers', 'showHover', 'setUser' ]),
-    async fetchData () {
+    ...mapMutations(["closeHovers", "showHover", "setUser"]),
+    async fetchData() {
       try {
         if (this.isNew) {
-          let { defaults } = await settings.get()
+          let { defaults } = await settings.get();
           this.user = {
             ...defaults,
-            username: '',
-            passsword: '',
+            username: "",
+            passsword: "",
             rules: [],
             lockPassword: false,
-            id: 0
-          }
+            id: 0,
+          };
         } else {
-          const id = this.$route.params.pathMatch
-          this.user = { ...await api.get(id) }
+          const id = this.$route.params.pathMatch;
+          this.user = { ...(await api.get(id)) };
         }
 
-        this.loaded = true
+        this.loaded = true;
       } catch (e) {
-        this.$router.push({ path: '/settings/users/new' })
+        this.$router.push({ path: "/settings/users/new" });
       }
     },
-    deletePrompt () {
-      this.showHover('deleteUser')
+    deletePrompt() {
+      this.showHover("deleteUser");
     },
-    async deleteUser (event) {
-      event.preventDefault()
+    async deleteUser(event) {
+      event.preventDefault();
 
       try {
-        await api.remove(this.user.id)
-        this.$router.push({ path: '/settings/users' })
-        this.$showSuccess(this.$t('settings.userDeleted'))
+        await api.remove(this.user.id);
+        this.$router.push({ path: "/settings/users" });
+        this.$showSuccess(this.$t("settings.userDeleted"));
       } catch (e) {
-         (e.message === "403") ? this.$showError(this.$t("errors.forbidden"), false) : this.$showError(e)
+        e.message === "403"
+          ? this.$showError(this.$t("errors.forbidden"), false)
+          : this.$showError(e);
       }
     },
-    async save (event) {
-      event.preventDefault()
+    async save(event) {
+      event.preventDefault();
       let user = {
         ...this.originalUser,
-        ...this.user
-      }
+        ...this.user,
+      };
 
       try {
         if (this.isNew) {
-          const loc = await api.create(user)
-          this.$router.push({ path: loc })
-          this.$showSuccess(this.$t('settings.userCreated'))
+          const loc = await api.create(user);
+          this.$router.push({ path: loc });
+          this.$showSuccess(this.$t("settings.userCreated"));
         } else {
-          await api.update(user)
+          await api.update(user);
 
           if (user.id === this.$store.state.user.id) {
-            this.setUser({ ...deepClone(user) })
+            this.setUser({ ...deepClone(user) });
           }
 
-          this.$showSuccess(this.$t('settings.userUpdated'))
+          this.$showSuccess(this.$t("settings.userUpdated"));
         }
       } catch (e) {
-        this.$showError(e)
+        this.$showError(e);
       }
-    }
-  }
-}
+    },
+  },
+};
 </script>

frontend/src/views/settings/Users.vue

@@ -3,25 +3,34 @@
     <div class="column">
       <div class="card">
         <div class="card-title">
-          <h2>{{ $t('settings.users') }}</h2>
-          <router-link to="/settings/users/new"><button class="button">{{ $t('buttons.new') }}</button></router-link>
+          <h2>{{ $t("settings.users") }}</h2>
+          <router-link to="/settings/users/new"
+            ><button class="button">
+              {{ $t("buttons.new") }}
+            </button></router-link
+          >
         </div>
 
         <div class="card-content full">
           <table>
             <tr>
-              <th>{{ $t('settings.username') }}</th>
-              <th>{{ $t('settings.admin') }}</th>
-              <th>{{ $t('settings.scope') }}</th>
+              <th>{{ $t("settings.username") }}</th>
+              <th>{{ $t("settings.admin") }}</th>
+              <th>{{ $t("settings.scope") }}</th>
               <th></th>
             </tr>
 
             <tr v-for="user in users" :key="user.id">
               <td>{{ user.username }}</td>
-              <td><i v-if="user.perm.admin" class="material-icons">done</i><i v-else class="material-icons">close</i></td>
+              <td>
+                <i v-if="user.perm.admin" class="material-icons">done</i
+                ><i v-else class="material-icons">close</i>
+              </td>
               <td>{{ user.scope }}</td>
               <td class="small">
-                <router-link :to="'/settings/users/' + user.id"><i class="material-icons">mode_edit</i></router-link>
+                <router-link :to="'/settings/users/' + user.id"
+                  ><i class="material-icons">mode_edit</i></router-link
+                >
               </td>
             </tr>
           </table>
@@ -32,21 +41,21 @@
 </template>
 
 <script>
-import { users as api } from '@/api'
+import { users as api } from "@/api";
 
 export default {
-  name: 'users',
+  name: "users",
   data: function () {
     return {
-      users: []
+      users: [],
+    };
+  },
+  async created() {
+    try {
+      this.users = await api.getAll();
+    } catch (e) {
+      this.$showError(e);
     }
   },
-  async created () {
-    try {
-      this.users = await api.getAll()
-    } catch (e) {
-      this.$showError(e)
-    }
-  }
-}
+};
 </script>