updated workflow (#37)

.github/workflows/main.yaml

@@ -4,8 +4,9 @@ on:
   push:
     branches:
       - 'main'
+
 jobs:
-  test:
+  test-backend:
     runs-on: ubuntu-latest
     steps:
       - uses: actions/checkout@v3
@@ -13,7 +14,16 @@ jobs:
         with:
           go-version: 1.21.1
       - run: cd backend && go test -race -v ./...
-  lint:
+  lint-backend:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v3
+      - uses: actions/setup-go@v4
+        with:
+          go-version: 1.21.1
+      - run: go install github.com/golangci/golangci-lint/cmd/golangci-lint@v1.54.2
+      - run: cd backend && golangci-lint run
+  format-backend:
     runs-on: ubuntu-latest
     steps:
       - uses: actions/checkout@v3
@@ -21,8 +31,18 @@ jobs:
         with:
           go-version: 1.21.1
       - run: cd backend && go fmt ./...
+  lint-frontend:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v2
+      - uses: actions/setup-node@v2
+        with:
+          node-version: '20'
+      - run: cd frontend && npm i eslint
+      - run: cd frontend && npm run lint
+
   push_latest_to_registry:
-    needs: [lint, test]
+    needs: [lint-frontend, lint-backend, test-backend, format-backend]
     name: Push latest
     runs-on: ubuntu-latest
     steps:

.github/workflows/pr-merge.yaml

@@ -5,8 +5,9 @@ on:
     branches:
       - 'main'
       - 'v[0-9]+.[0-9]+.[0-9]+'
+  
 jobs:
-  test:
+  test-backend:
     runs-on: ubuntu-latest
     steps:
       - uses: actions/checkout@v3
@@ -14,7 +15,16 @@ jobs:
         with:
           go-version: 1.21.1
       - run: cd backend && go test -race -v ./...
-  lint:
+  lint-backend:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v3
+      - uses: actions/setup-go@v4
+        with:
+          go-version: 1.21.1
+      - run: go install github.com/golangci/golangci-lint/cmd/golangci-lint@v1.54.2
+      - run: cd backend && golangci-lint run
+  format-backend:
     runs-on: ubuntu-latest
     steps:
       - uses: actions/checkout@v3
@@ -22,8 +32,18 @@ jobs:
         with:
           go-version: 1.21.1
       - run: cd backend && go fmt ./...
+  lint-frontend:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v2
+      - uses: actions/setup-node@v2
+        with:
+          node-version: '20'
+      - run: cd frontend && npm i eslint
+      - run: cd frontend && npm run lint
+
   push_pr_to_registry:
-    needs: [lint, test]
+    needs: [lint-frontend, lint-backend, test-backend, format-backend]
     name: Push PR
     runs-on: ubuntu-latest
     steps:

.github/workflows/release.yaml

@@ -5,7 +5,7 @@ on:
     branches:
       - 'v[0-9]+.[0-9]+.[0-9]+'
 jobs:
-  test:
+  test-backend:
     runs-on: ubuntu-latest
     steps:
       - uses: actions/checkout@v3
@@ -13,7 +13,16 @@ jobs:
         with:
           go-version: 1.21.1
       - run: cd backend && go test -race -v ./...
-  lint:
+  lint-backend:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v3
+      - uses: actions/setup-go@v4
+        with:
+          go-version: 1.21.1
+      - run: go install github.com/golangci/golangci-lint/cmd/golangci-lint@v1.54.2
+      - run: cd backend && golangci-lint run
+  format-backend:
     runs-on: ubuntu-latest
     steps:
       - uses: actions/checkout@v3
@@ -21,8 +30,17 @@ jobs:
         with:
           go-version: 1.21.1
       - run: cd backend && go fmt ./...
+  lint-frontend:
+    runs-on: ubuntu-latest
+    steps:
+      - uses: actions/checkout@v2
+      - uses: actions/setup-node@v2
+        with:
+          node-version: '20'
+      - run: cd frontend && npm i eslint
+      - run: cd frontend && npm run lint
   push_release_to_registry:
-    needs: [lint, test]
+    needs: [lint-frontend, lint-backend, test-backend, format-backend]
     name: Push release
     runs-on: ubuntu-latest
     if: ${{ github.event_name == 'release' }}

backend/cmd/root.go

@@ -25,14 +25,9 @@ import (
 	"github.com/gtsteffaniak/filebrowser/img"
 	"github.com/gtsteffaniak/filebrowser/search"
 	"github.com/gtsteffaniak/filebrowser/settings"
-	"github.com/gtsteffaniak/filebrowser/storage"
 	"github.com/gtsteffaniak/filebrowser/users"
 )
 
-var (
-	configFile string
-)
-
 type dirFS struct {
 	http.Dir
 }
@@ -61,6 +56,7 @@ var rootCmd = &cobra.Command{
 		if serverConfig.NumImageProcessors < 1 {
 			log.Fatal("Image resize workers count could not be < 1")
 		}
+		setupLog(serverConfig.Log)
 		imgSvc := img.New(serverConfig.NumImageProcessors)
 		var fileCache diskcache.Interface = diskcache.NewNoOp()
 		cacheDir := "/tmp"
@@ -124,13 +120,6 @@ func cleanupHandler(listener net.Listener, c chan os.Signal) { //nolint:interfac
 	os.Exit(0)
 }
 
-//nolint:gocyclo
-func getRunParams(st *storage.Storage) *settings.Server {
-	server, err := st.Settings.GetServer()
-	checkErr(err)
-	return server
-}
-
 func setupLog(logMethod string) {
 	switch logMethod {
 	case "stdout":
@@ -151,14 +140,15 @@ func setupLog(logMethod string) {
 
 func quickSetup(d pythonData) {
 	settings.GlobalConfiguration.Key = generateKey()
-	var err error
 	if settings.GlobalConfiguration.Auth.Method == "noauth" {
-		err = d.store.Auth.Save(&auth.NoAuth{})
+		err := d.store.Auth.Save(&auth.NoAuth{})
+		checkErr(err)
 	} else {
 		settings.GlobalConfiguration.Auth.Method = "password"
-		err = d.store.Auth.Save(&auth.JSONAuth{})
+		err := d.store.Auth.Save(&auth.JSONAuth{})
+		checkErr(err)
 	}
-	err = d.store.Settings.Save(&settings.GlobalConfiguration)
+	err := d.store.Settings.Save(&settings.GlobalConfiguration)
 	checkErr(err)
 	err = d.store.Settings.SaveServer(&settings.GlobalConfiguration.Server)
 	checkErr(err)

backend/cmd/users_update.go

@@ -18,9 +18,6 @@ options you want to change.`,
 	Args: cobra.ExactArgs(1),
 	Run: python(func(cmd *cobra.Command, args []string, d pythonData) {
 		username, id := parseUsernameOrID(args[0])
-		flags := cmd.Flags()
-		password := mustGetString(flags, "password")
-		newUsername := mustGetString(flags, "username")
 
 		var (
 			err  error
@@ -33,23 +30,6 @@ options you want to change.`,
 			user, err = d.store.Users.Get("", username)
 		}
 		checkErr(err)
-		user.Scope = user.Scope
-		user.Locale = user.Locale
-		user.ViewMode = user.ViewMode
-		user.SingleClick = user.SingleClick
-		user.Perm = user.Perm
-		user.Commands = user.Commands
-		user.Sorting = user.Sorting
-		user.LockPassword = user.LockPassword
-
-		if newUsername != "" {
-			user.Username = newUsername
-		}
-
-		if password != "" {
-			user.Password, err = users.HashPwd(password)
-			checkErr(err)
-		}
 
 		err = d.store.Users.Update(user)
 		checkErr(err)

backend/cmd/utils.go

@@ -3,11 +3,9 @@ package cmd
 import (
 	"encoding/json"
 	"errors"
-	"fmt"
 	"log"
 	"os"
 	"path/filepath"
-	"strings"
 
 	"github.com/asdine/storm/v3"
 	"github.com/goccy/go-yaml"
@@ -152,42 +150,3 @@ func jsonYamlArg(cmd *cobra.Command, args []string) error {
 		return errors.New("invalid format: " + ext)
 	}
 }
-
-func cleanUpInterfaceMap(in map[interface{}]interface{}) map[string]interface{} {
-	result := make(map[string]interface{})
-	for k, v := range in {
-		result[fmt.Sprintf("%v", k)] = cleanUpMapValue(v)
-	}
-	return result
-}
-
-func cleanUpInterfaceArray(in []interface{}) []interface{} {
-	result := make([]interface{}, len(in))
-	for i, v := range in {
-		result[i] = cleanUpMapValue(v)
-	}
-	return result
-}
-
-func cleanUpMapValue(v interface{}) interface{} {
-	switch v := v.(type) {
-	case []interface{}:
-		return cleanUpInterfaceArray(v)
-	case map[interface{}]interface{}:
-		return cleanUpInterfaceMap(v)
-	default:
-		return v
-	}
-}
-
-// convertCmdStrToCmdArray checks if cmd string is blank (whitespace included)
-// then returns empty string array, else returns the splitted word array of cmd.
-// This is to ensure the result will never be []string{""}
-func convertCmdStrToCmdArray(cmd string) []string {
-	var cmdArray []string
-	trimmedCmdStr := strings.TrimSpace(cmd)
-	if trimmedCmdStr != "" {
-		cmdArray = strings.Split(trimmedCmdStr, " ")
-	}
-	return cmdArray
-}

backend/search/indexing.go

@@ -84,7 +84,11 @@ func indexFiles(path string, numFiles *int, numDirs *int) (int, int, error) {
 		if file.IsDir() {
 			*numDirs++
 			addToIndex(path, file.Name(), true)
-			indexFiles(path+"/"+file.Name(), numFiles, numDirs) // recursive
+			_, _, err := indexFiles(path+"/"+file.Name(), numFiles, numDirs) // recursive
+			if err != nil {
+				log.Println("Could not index :", err)
+				return 0, 0, nil
+			}
 		} else {
 			*numFiles++
 			addToIndex(path, file.Name(), false)
@@ -261,19 +265,10 @@ func getLastPathComponent(path string) string {
 
 func generateRandomHash(length int) string {
 	const charset = "abcdefghijklmnopqrstuvwxyz0123456789"
-	rand.Seed(rand.Int63()) // Automatically seeded based on current time
+	rand.New(rand.NewSource(time.Now().UnixNano()))
 	result := make([]byte, length)
 	for i := range result {
 		result[i] = charset[rand.Intn(len(charset))]
 	}
 	return string(result)
 }
-
-func stringExistsInArray(target string, strings []string) bool {
-	for _, s := range strings {
-		if s == target {
-			return true
-		}
-	}
-	return false
-}

backend/search/search_test.go

@@ -2,7 +2,6 @@ package search
 
 import (
 	"encoding/json"
-	"fmt"
 	"math/rand"
 	"reflect"
 	"testing"
@@ -97,7 +96,7 @@ func createMockData(numDirs, numFilesPerDir int) {
 }
 
 func generateRandomPath(levels int) string {
-	rand.Seed(time.Now().UnixNano())
+	rand.New(rand.NewSource(time.Now().UnixNano()))
 	dirName := "srv"
 	for i := 0; i < levels; i++ {
 		dirName += "/" + getRandomTerm()
@@ -110,7 +109,8 @@ func getRandomTerm() string {
 		"hi", "test", "other", "name",
 		"cool", "things", "more", "items",
 	}
-	rand.Seed(time.Now().UnixNano())
+	rand.New(rand.NewSource(time.Now().UnixNano()))
+
 	index := rand.Intn(len(wordbank))
 	return wordbank[index]
 }
@@ -120,7 +120,7 @@ func getRandomExtension() string {
 		".txt", ".mp3", ".mov", ".doc",
 		".mp4", ".bak", ".zip", ".jpg",
 	}
-	rand.Seed(time.Now().UnixNano())
+	rand.New(rand.NewSource(time.Now().UnixNano()))
 	index := rand.Intn(len(wordbank))
 	return wordbank[index]
 }
@@ -145,26 +145,3 @@ func JSONBytesEqual(a, b []byte) (bool, error) {
 	}
 	return reflect.DeepEqual(j2, j), nil
 }
-
-func passedFunc(t *testing.T) {
-	t.Logf("%s passed!", t.Name())
-}
-
-func formatDuration(duration time.Duration) string {
-	if duration >= time.Second {
-		return fmt.Sprintf("%.2f seconds", duration.Seconds())
-	} else if duration >= time.Millisecond {
-		return fmt.Sprintf("%.2f ms", float64(duration.Milliseconds()))
-	}
-	return fmt.Sprintf("%.2f ns", float64(duration.Nanoseconds()))
-}
-
-func formatMemory(bytes int64) string {
-	sizes := []string{"B", "KB", "MB", "GB", "TB"}
-	i := 0
-	for bytes >= 1024 && i < len(sizes)-1 {
-		bytes /= 1024
-		i++
-	}
-	return fmt.Sprintf("%d %s", bytes, sizes[i])
-}

backend/settings/config.go

@@ -26,7 +26,7 @@ func loadConfigFile(configFile string) []byte {
 	yamlFile, err := os.Open(configFile)
 	if err != nil {
 		log.Printf("ERROR: opening config file\n %v\n WARNING: Using default config only\n If this was a mistake, please make sure the file exists and is accessible by the filebrowser binary.\n\n", err)
-		setDefaults()
+		GlobalConfiguration = setDefaults()
 		return []byte{}
 	}
 	defer yamlFile.Close()

backend/settings/structs.go

@@ -81,7 +81,7 @@ type UserDefaults struct {
 	} `json:"sorting"`
 	Perm         users.Permissions `json:"perm"`
 	Permissions  users.Permissions `json:"permissions"`
-	Commands     []string          `json:"commands,omitemptys"`
+	Commands     []string          `json:"commands,omitempty"`
 	HideDotfiles bool              `json:"hideDotfiles"`
 	DateFormat   bool              `json:"dateFormat"`
 }

frontend/.eslintrc.yml

@@ -0,0 +1,15 @@
+env:
+  browser: true
+  es2021: true
+extends:
+  - eslint:recommended
+  - plugin:vue/vue3-essential
+parserOptions:
+  ecmaVersion: latest
+  sourceType: module
+plugins:
+  - vue
+rules:
+  vue/multi-word-component-names: off
+  vue/no-reserved-component-names: "warn"
+  vue/no-mutating-props: off

frontend/package.json

@@ -39,6 +39,8 @@
   "devDependencies": {
     "@vue/cli-service": "^5.0.8",
     "compression-webpack-plugin": "^10.0.0",
+    "eslint": "^8.50.0",
+    "eslint-plugin-vue": "^9.17.0",
     "vue-template-compiler": "^2.6.10"
   },
   "postcss": {

frontend/src/components/files/ExtendedImage.vue

@@ -73,7 +73,7 @@ export default {
 
     window.addEventListener("resize", this.onResize);
   },
-  beforeDestroy() {
+  beforeUnmount() {
     window.removeEventListener("resize", this.onResize);
     document.removeEventListener("mouseup", this.onMouseUp);
   },

frontend/src/components/header/HeaderBar.vue

@@ -6,14 +6,11 @@
 
 <script>
 import { logoURL } from "@/utils/constants";
-import Action from "@/components/header/Action.vue";
 
 export default {
   name: "header-bar",
   props: ["showLogo", "showMenu"],
-  components: {
+
-    Action,
-  },
   data: function () {
     return {
       logoURL,

frontend/src/components/prompts/Share.vue

@@ -178,7 +178,7 @@ export default {
       this.$showSuccess(this.$t("success.linkCopied"));
     });
   },
-  beforeDestroy() {
+  beforeUnmount() {
     this.clip.destroy();
   },
   methods: {

frontend/src/components/settings/UserForm.vue

@@ -42,7 +42,7 @@
       <languages
         class="input input--block"
         id="locale"
-        :locale.sync="user.locale"
+        v-model:locale="user.locale"
       ></languages>
     </p>
 
@@ -55,13 +55,13 @@
       {{ $t("settings.lockPassword") }}
     </p>
 
-    <permissions :perm.sync="user.perm" />
+    <permissions v-model:perm="user.perm" />
-    <commands v-if="isExecEnabled" :commands.sync="user.commands" />
+    <commands v-if="isExecEnabled" v-model:commands="user.commands" />
 
     <div v-if="!isDefault">
       <h3>{{ $t("settings.rules") }}</h3>
       <p class="small">{{ $t("settings.rulesHelp") }}</p>
-      <rules :rules.sync="user.rules" />
+      <rules v-model:rules="user.rules" />
     </div>
   </div>
 </template>

frontend/src/views/Errors.vue

@@ -8,7 +8,6 @@
 </template>
 
 <script>
-import HeaderBar from "@/components/header/HeaderBar";
 
 const errors = {
   0: {
@@ -32,7 +31,6 @@ const errors = {
 export default {
   name: "errors",
   components: {
-    HeaderBar,
   },
   props: ["errorCode", "showHeader"],
   computed: {

frontend/src/views/Files.vue

@@ -25,7 +25,7 @@ import HeaderBar from "@/components/header/HeaderBar";
 import Breadcrumbs from "@/components/Breadcrumbs";
 import Errors from "@/views/Errors";
 import Preview from "@/views/files/Preview";
-import Listing from "@/views/files/Listing";
+import ListingView from "@/views/files/Listing";
 
 function clean(path) {
   return path.endsWith("/") ? path.slice(0, -1) : path;
@@ -38,7 +38,7 @@ export default {
     Breadcrumbs,
     Errors,
     Preview,
-    Listing,
+    ListingView,
     Editor: () => import("@/views/files/Editor"),
   },
   data: function () {
@@ -80,10 +80,10 @@ export default {
   mounted() {
     window.addEventListener("keydown", this.keyEvent);
   },
-  beforeDestroy() {
+  beforeUnmount() {
     window.removeEventListener("keydown", this.keyEvent);
   },
-  destroyed() {
+  unmounted() {
     if (this.$store.state.showShell) {
       this.$store.commit("toggleShell");
     }
@@ -91,7 +91,7 @@ export default {
   },
   currentView(newView) {
     // Commit the new value to the store
-    this.setCurrentValue(this.newValue);
+    this.setCurrentValue(newView);
   },
   methods: {
     ...mapMutations(["setLoading","setCurrentView"]),

frontend/src/views/Layout.vue

@@ -20,7 +20,6 @@ import editorBar from "./bars/EditorBar.vue"
 import defaultBar from "./bars/Default.vue"
 import listingBar from "./bars/ListingBar.vue"
 import Prompts from "@/components/prompts/Prompts";
-import Action from "@/components/header/Action";
 import { mapState, mapGetters } from "vuex";
 import Sidebar from "@/components/Sidebar.vue";
 import UploadFiles from "../components/prompts/UploadFiles";
@@ -31,7 +30,6 @@ export default {
     defaultBar,
     editorBar,
     listingBar,
-    Action,
     Sidebar,
     Prompts,
     UploadFiles,

frontend/src/views/Settings.vue

@@ -63,7 +63,7 @@ export default {
     ...mapState(["user", "loading","req"]),
     disableSettings() {
       console.log(this.User)
-      this.User.disableSettings == "true"
+      return this.User.disableSettings == "true"
     }
   },
 };

frontend/src/views/Share.vue

@@ -160,8 +160,6 @@ import { getHumanReadableFilesize } from "@/utils/filesizes";
 import { pub as api } from "@/api";
 import moment from "moment";
 
-import HeaderBar from "@/components/header/HeaderBar";
-import Action from "@/components/header/Action";
 import Breadcrumbs from "@/components/Breadcrumbs";
 import Errors from "@/views/Errors";
 import QrcodeVue from "qrcode.vue";
@@ -171,8 +169,6 @@ import Clipboard from "clipboard";
 export default {
   name: "share",
   components: {
-    HeaderBar,
-    Action,
     Breadcrumbs,
     Item,
     QrcodeVue,
@@ -206,7 +202,7 @@ export default {
       this.$showSuccess(this.$t("success.linkCopied"));
     });
   },
-  beforeDestroy() {
+  beforeUnmount() {
     window.removeEventListener("keydown", this.keyEvent);
     this.clip.destroy();
   },

frontend/src/views/bars/Default.vue

@@ -18,24 +18,18 @@
 import Vue from "vue";
 import { mapState, mapGetters, mapMutations } from "vuex";
 import { users, files as api } from "@/api";
-import { enableExec } from "@/utils/constants";
 import url from "@/utils/url";
 import HeaderBar from "@/components/header/HeaderBar.vue";
 import Action from "@/components/header/Action.vue";
 import * as upload from "@/utils/upload";
 import css from "@/utils/css";
 import throttle from "lodash.throttle";
-import Search from "@/components/Search.vue";
-
-import Item from "@/components/files/ListingItem.vue";
 
 export default {
-  name: "listing",
+  name: "listingView",
   components: {
     HeaderBar,
     Action,
-    Search,
-    Item,
   },
   data: function () {
     return {
@@ -135,12 +129,12 @@ export default {
       // Reset the show value
       this.showLimit = 50;
 
-      // Ensures that the listing is displayed
+      // Ensures that the listingView is displayed
       Vue.nextTick(() => {
-        // How much every listing item affects the window height
+        // How much every listingView item affects the window height
         this.setItemWeight();
 
-        // Fill and fit the window with listing items
+        // Fill and fit the window with listingView items
         this.fillWindow(true);
       });
     },
@@ -149,10 +143,10 @@ export default {
     // Check the columns size for the first time.
     this.colunmsResize();
 
-    // How much every listing item affects the window height
+    // How much every listingView item affects the window height
     this.setItemWeight();
 
-    // Fill and fit the window with listing items
+    // Fill and fit the window with listingView items
     this.fillWindow(true);
 
     // Add the needed event listeners to the window and document.
@@ -166,7 +160,7 @@ export default {
     document.addEventListener("dragleave", this.dragLeave);
     document.addEventListener("drop", this.drop);
   },
-  beforeDestroy() {
+  beforeUnmount() {
     // Remove event listeners before destroying this page.
     window.removeEventListener("keydown", this.keyEvent);
     window.removeEventListener("scroll", this.scrollEvent);
@@ -381,7 +375,7 @@ export default {
       let columns = Math.floor(
         document.querySelector("main").offsetWidth / this.columnWidth
       );
-      let items = css(["#listing.mosaic .item", ".mosaic#listing .item"]);
+      let items = css(["#listingView.mosaic .item", ".mosaic#listingView .item"]);
       if (columns === 0) columns = 1;
       items.style.width = `calc(${100 / columns}% - 1em)`;
     },
@@ -408,7 +402,7 @@ export default {
       this.dragCounter++;
 
       // When the user starts dragging an item, put every
-      // file on the listing with 50% opacity.
+      // file on the listingView with 50% opacity.
       let items = document.getElementsByClassName("item");
 
       Array.from(items).forEach((file) => {
@@ -550,9 +544,9 @@ export default {
       this.width = window.innerWidth;
 
       // Listing element is not displayed
-      if (this.$refs.listing == null) return;
+      if (this.$refs.listingView == null) return;
 
-      // How much every listing item affects the window height
+      // How much every listingView item affects the window height
       this.setItemWeight();
 
       // Fill but not fit the window
@@ -604,13 +598,13 @@ export default {
     },
     setItemWeight() {
       // Listing element is not displayed
-      if (this.$refs.listing == null) return;
+      if (this.$refs.listingView == null) return;
 
       let itemQuantity = this.req.numDirs + this.req.numFiles;
       if (itemQuantity > this.showLimit) itemQuantity = this.showLimit;
 
-      // How much every listing item affects the window height
+      // How much every listingView item affects the window height
-      this.itemWeight = this.$refs.listing.offsetHeight / itemQuantity;
+      this.itemWeight = this.$refs.listingView.offsetHeight / itemQuantity;
     },
     fillWindow(fit = false) {
       const totalItems = this.req.numDirs + this.req.numFiles;

frontend/src/views/bars/EditorBar.vue

@@ -30,14 +30,12 @@ import url from "@/utils/url";
 
 import HeaderBar from "@/components/header/HeaderBar";
 import Action from "@/components/header/Action";
-import Breadcrumbs from "@/components/Breadcrumbs";
 
 export default {
   name: "editor",
   components: {
     HeaderBar,
     Action,
-    Breadcrumbs,
   },
   data: function () {
     return {};
@@ -77,7 +75,7 @@ export default {
   created() {
     window.addEventListener("keydown", this.keyEvent);
   },
-  beforeDestroy() {
+  beforeUnmount() {
     window.removeEventListener("keydown", this.keyEvent);
     this.editor.destroy();
   },

frontend/src/views/bars/ListingBar.vue

@@ -30,21 +30,18 @@ import { mapState, mapGetters, mapMutations } from "vuex";
 import { users, files as api } from "@/api";
 import HeaderBar from "@/components/header/HeaderBar.vue";
 import Action from "@/components/header/Action.vue";
-import url from "@/utils/url";
 import * as upload from "@/utils/upload";
 import css from "@/utils/css";
 import throttle from "lodash.throttle";
 import Search from "@/components/Search.vue";
 
-import Item from "@/components/files/ListingItem.vue";
 
 export default {
-  name: "listing",
+  name: "listingView",
   components: {
     HeaderBar,
     Action,
     Search,
-    Item,
   },
   data: function () {
     return {
@@ -141,12 +138,12 @@ export default {
       // Reset the show value
       this.showLimit = 50;
 
-      // Ensures that the listing is displayed
+      // Ensures that the listingView is displayed
       Vue.nextTick(() => {
-        // How much every listing item affects the window height
+        // How much every listingView item affects the window height
         this.setItemWeight();
 
-        // Fill and fit the window with listing items
+        // Fill and fit the window with listingView items
         this.fillWindow(true);
       });
     },
@@ -155,10 +152,10 @@ export default {
     // Check the columns size for the first time.
     this.colunmsResize();
 
-    // How much every listing item affects the window height
+    // How much every listingView item affects the window height
     this.setItemWeight();
 
-    // Fill and fit the window with listing items
+    // Fill and fit the window with listingView items
     this.fillWindow(true);
 
     // Add the needed event listeners to the window and document.
@@ -172,7 +169,7 @@ export default {
     document.addEventListener("dragleave", this.dragLeave);
     document.addEventListener("drop", this.drop);
   },
-  beforeDestroy() {
+  beforeUnmount() {
     // Remove event listeners before destroying this page.
     window.removeEventListener("keydown", this.keyEvent);
     window.removeEventListener("scroll", this.scrollEvent);
@@ -387,7 +384,7 @@ export default {
       let columns = Math.floor(
         document.querySelector("main").offsetWidth / this.columnWidth
       );
-      let items = css(["#listing.mosaic .item", ".mosaic#listing .item"]);
+      let items = css(["#listingView.mosaic .item", ".mosaic#listingView .item"]);
       if (columns === 0) columns = 1;
       items.style.width = `calc(${100 / columns}% - 1em)`;
     },
@@ -414,7 +411,7 @@ export default {
       this.dragCounter++;
 
       // When the user starts dragging an item, put every
-      // file on the listing with 50% opacity.
+      // file on the listingView with 50% opacity.
       let items = document.getElementsByClassName("item");
 
       Array.from(items).forEach((file) => {
@@ -556,9 +553,9 @@ export default {
       this.width = window.innerWidth;
 
       // Listing element is not displayed
-      if (this.$refs.listing == null) return;
+      if (this.$refs.listingView == null) return;
 
-      // How much every listing item affects the window height
+      // How much every listingView item affects the window height
       this.setItemWeight();
 
       // Fill but not fit the window
@@ -600,13 +597,13 @@ export default {
     },
     setItemWeight() {
       // Listing element is not displayed
-      if (this.$refs.listing == null) return;
+      if (this.$refs.listingView == null) return;
 
       let itemQuantity = this.req.numDirs + this.req.numFiles;
       if (itemQuantity > this.showLimit) itemQuantity = this.showLimit;
 
-      // How much every listing item affects the window height
+      // How much every listingView item affects the window height
-      this.itemWeight = this.$refs.listing.offsetHeight / itemQuantity;
+      this.itemWeight = this.$refs.listingView.offsetHeight / itemQuantity;
     },
     fillWindow(fit = false) {
       const totalItems = this.req.numDirs + this.req.numFiles;

frontend/src/views/files/Editor.vue

@@ -7,7 +7,6 @@
 <script>
 import { mapState } from "vuex";
 import { files as api } from "@/api";
-import { theme } from "@/utils/constants";
 import buttons from "@/utils/buttons";
 import url from "@/utils/url";
 import ace from "ace-builds/src-min-noconflict/ace.js";
@@ -53,7 +52,7 @@ export default {
   created() {
     window.addEventListener("keydown", this.keyEvent);
   },
-  beforeDestroy() {
+  beforeUnmount() {
     window.removeEventListener("keydown", this.keyEvent);
     this.editor.destroy();
   },

frontend/src/views/files/Listing.vue

@@ -87,7 +87,7 @@
           multiple
         />
       </div>
-      <div v-else id="listing" ref="listing" :class="user.viewMode + ' file-icons'">
+      <div v-else id="listingView" ref="listingView" :class="user.viewMode + ' file-icons'">
         <div>
           <div class="item header">
             <div></div>
@@ -205,7 +205,6 @@
 import Vue from "vue";
 import { mapState, mapGetters, mapMutations } from "vuex";
 import { users, files as api } from "@/api";
-import { enableExec } from "@/utils/constants";
 import * as upload from "@/utils/upload";
 import css from "@/utils/css";
 import throttle from "lodash.throttle";
@@ -214,7 +213,7 @@ import Action from "@/components/header/Action";
 import Item from "@/components/files/ListingItem";
 
 export default {
-  name: "listing",
+  name: "listingView",
   components: {
     Action,
     Item,
@@ -314,12 +313,12 @@ export default {
       // Reset the show value
       this.showLimit = 50;
 
-      // Ensures that the listing is displayed
+      // Ensures that the listingView is displayed
       Vue.nextTick(() => {
-        // How much every listing item affects the window height
+        // How much every listingView item affects the window height
         this.setItemWeight();
 
-        // Fill and fit the window with listing items
+        // Fill and fit the window with listingView items
         this.fillWindow(true);
       });
     },
@@ -328,10 +327,10 @@ export default {
     // Check the columns size for the first time.
     this.colunmsResize();
 
-    // How much every listing item affects the window height
+    // How much every listingView item affects the window height
     this.setItemWeight();
 
-    // Fill and fit the window with listing items
+    // Fill and fit the window with listingView items
     this.fillWindow(true);
 
     // Add the needed event listeners to the window and document.
@@ -345,7 +344,7 @@ export default {
     document.addEventListener("dragleave", this.dragLeave);
     document.addEventListener("drop", this.drop);
   },
-  beforeDestroy() {
+  beforeUnmount() {
     // Remove event listeners before destroying this page.
     window.removeEventListener("keydown", this.keyEvent);
     window.removeEventListener("scroll", this.scrollEvent);
@@ -528,7 +527,7 @@ export default {
       let columns = Math.floor(
         document.querySelector("main").offsetWidth / this.columnWidth
       );
-      let items = css(["#listing.mosaic .item", ".mosaic#listing .item"]);
+      let items = css(["#listingView.mosaic .item", ".mosaic#listingView .item"]);
       if (columns === 0) columns = 1;
       items.style.width = `calc(${100 / columns}% - 1em)`;
     },
@@ -555,7 +554,7 @@ export default {
       this.dragCounter++;
 
       // When the user starts dragging an item, put every
-      // file on the listing with 50% opacity.
+      // file on the listingView with 50% opacity.
       let items = document.getElementsByClassName("item");
 
       Array.from(items).forEach((file) => {
@@ -697,9 +696,9 @@ export default {
       this.width = window.innerWidth;
 
       // Listing element is not displayed
-      if (this.$refs.listing == null) return;
+      if (this.$refs.listingView == null) return;
 
-      // How much every listing item affects the window height
+      // How much every listingView item affects the window height
       this.setItemWeight();
 
       // Fill but not fit the window
@@ -741,13 +740,13 @@ export default {
     },
     setItemWeight() {
       // Listing element is not displayed
-      if (this.$refs.listing == null) return;
+      if (this.$refs.listingView == null) return;
 
       let itemQuantity = this.req.numDirs + this.req.numFiles;
       if (itemQuantity > this.showLimit) itemQuantity = this.showLimit;
 
-      // How much every listing item affects the window height
+      // How much every listingView item affects the window height
-      this.itemWeight = this.$refs.listing.offsetHeight / itemQuantity;
+      this.itemWeight = this.$refs.listingView.offsetHeight / itemQuantity;
     },
     fillWindow(fit = false) {
       const totalItems = this.req.numDirs + this.req.numFiles;

frontend/src/views/files/Preview.vue

@@ -106,8 +106,6 @@ import { files as api } from "@/api";
 import { resizePreview } from "@/utils/constants";
 import url from "@/utils/url";
 import throttle from "lodash.throttle";
-import HeaderBar from "@/components/header/HeaderBar";
-import Action from "@/components/header/Action";
 import ExtendedImage from "@/components/files/ExtendedImage";
 
 const mediaTypes = ["image", "video", "audio", "blob"];
@@ -115,8 +113,6 @@ const mediaTypes = ["image", "video", "audio", "blob"];
 export default {
   name: "preview",
   components: {
-    HeaderBar,
-    Action,
     ExtendedImage,
   },
   data: function () {
@@ -176,7 +172,7 @@ export default {
     this.listing = this.oldReq.items;
     this.updatePreview();
   },
-  beforeDestroy() {
+  beforeUnmount() {
     window.removeEventListener("keydown", this.key);
   },
   methods: {

frontend/src/views/settings/Global.vue

@@ -29,7 +29,7 @@
 
           <h3>{{ $t("settings.rules") }}</h3>
           <p class="small">{{ $t("settings.globalRules") }}</p>
-          <rules :rules.sync="settings.rules" />
+          <rules v-model:rules="settings.rules" />
 
           <div v-if="isExecEnabled">
             <h3>{{ $t("settings.executeOnShell") }}</h3>
@@ -75,7 +75,7 @@
             <label for="theme">{{ $t("settings.themes.title") }}</label>
             <themes
               class="input input--block"
-              :theme.sync="settings.frontend.theme"
+              v-model:theme="settings.frontend.theme"
               id="theme"
             ></themes>
           </p>
@@ -125,7 +125,7 @@
           <user-form
             :isNew="false"
             :isDefault="true"
-            :user.sync="settings.defaults"
+            v-model:user="settings.defaults"
           />
         </div>
 

frontend/src/views/settings/Profile.vue

@@ -22,7 +22,7 @@
           <h3>{{ $t("settings.language") }}</h3>
           <languages
             class="input input--block"
-            :locale.sync="locale"
+            v-model:locale="locale"
           ></languages>
         </div>
 

frontend/src/views/settings/Shares.vue

@@ -107,7 +107,7 @@ export default {
       this.$showSuccess(this.$t("success.linkCopied"));
     });
   },
-  beforeDestroy() {
+  beforeUnmount() {
     this.clip.destroy();
   },
   methods: {

frontend/src/views/settings/User.vue

@@ -10,8 +10,8 @@
 
         <div class="card-content">
           <user-form
-            :user.sync="user"
+            v-model:user="user"
-            :createUserDir.sync="createUserDir"
+            v-model:createUserDir="createUserDir"
             :isDefault="false"
             :isNew="isNew"
           />