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>