updated workflow

Co-authored-by: Graham Steffaniak <graham.steffaniak@autodesk.com>

.github/workflows/stale.yml

@@ -1,24 +0,0 @@
-name: 'Close stale issues and PRs'
-permissions:
-  issues: write
-  pull-requests: write
-
-on:
-  schedule:
-    - cron: '30 1 * * *'
-
-jobs:
-  stale:
-    runs-on: ubuntu-latest
-    steps:
-      - uses: actions/stale@v5
-        with:
-          stale-pr-message: 'This PR is stale because it has been open 30 days with no activity. Remove stale label or comment or this will be closed in 5 days.'
-          close-pr-message: 'This PR was closed because it has been stalled for 5 days with no activity.'
-          stale-issue-message: 'This issue is stale because it has been open 30 days with no activity. Remove stale label or comment or this will be closed in 5 days.'
-          close-issue-message: 'This issue was closed because it has been stalled for 5 days with no activity.'
-          days-before-stale: 30
-          days-before-close: 5
-          exempt-issue-labels: 'feature ☘,enhancement ⚙,bug 🐞'
-          exempt-pr-labels: 'need-help,wip'
-          operations-per-run: 100

CHANGELOG.md

@@ -4,7 +4,15 @@ All notable changes to this project will be documented in this file. See [standa
 
 # v0.2.1
   - issue #29 - Rules can now be configured and read from configuration yaml
-  - More rounded corners
+  - issue #28 - Allow disable settings per user.
+  - issue #27 - shorten download link for password protected files
+  - issue #26 - enable dark mode per user and improve switching performance.
+  - More rounded corners and improved listing styling
+  - improve search performance
+  - fixes authentication issues
+  - adds compact view mode
+  - improves view mode configuration and behavior
+  - updates configuration file to accept new settings
 
 # v0.2.0
  - improved UI

README.md

@@ -6,7 +6,7 @@
 </p>
 <h3 align="center">Filebrowser - A modern file manager for the web</h3>
 <p align="center">
-  <img width="500" src="https://github.com/gtsteffaniak/filebrowser/assets/42989099/459937ef-3f14-408d-aef5-899cde4cf3a1" title="Main Screenshot">
+  <img width="500" src="https://github.com/gtsteffaniak/filebrowser/assets/42989099/b45683b0-bd55-4430-9831-650fe0d21eb8" title="Main Screenshot">
 </p>
 
 > **NOTE**
@@ -39,9 +39,12 @@ work better in terms of asthetics and performance. Improved search,
 ## Look
 <p align="center">
   <img width="500" src="https://github.com/gtsteffaniak/filebrowser/assets/42989099/35cdeb3b-ab79-4b04-8001-8f51f6ea06bb" title="Dark mode">
-  <img width="500" src="https://github.com/gtsteffaniak/filebrowser/assets/42989099/8d426356-26cf-407b-b078-bf58f198e799" title="Dark mode2">
-  <img width="300" src="https://github.com/gtsteffaniak/filebrowser/assets/42989099/37e8f03b-4f5a-4689-aa6c-5cd858a858e9" title="Dark mode">
-  <img width="300" src="https://github.com/gtsteffaniak/filebrowser/assets/42989099/b04d3c1f-154b-45ba-927c-2112926ad3a9" title="Dark mode">
+<img width="500" alt="image" src="https://github.com/gtsteffaniak/filebrowser/assets/42989099/55fa4f5c-440e-4a97-b711-96139208a163">
+<img width="500" alt="image" src="https://github.com/gtsteffaniak/filebrowser/assets/42989099/c76f4100-949b-4e17-a3e6-e410fb8ec08f">
+<img width="500" alt="image" src="https://github.com/gtsteffaniak/filebrowser/assets/42989099/0bde26f3-fa90-411e-bd0b-abaa47506d62">
+<img width="560" alt="image" src="https://github.com/gtsteffaniak/filebrowser/assets/42989099/71d8f2b8-6fe6-4fdc-8aac-503d08c28d86">
+
+
 </p>
 
 ## Search Performance

backend/auth/hook.go

@@ -146,14 +146,11 @@ func (a *HookAuth) SaveUser() (*users.User, error) {
 	}
 
 	if u == nil {
-		pass, err := users.HashPwd(a.Cred.Password)
-		if err != nil {
-			return nil, err
-		}
+		log.Println("creds", a.Cred.Password)
 		// create user with the provided credentials
 		d := &users.User{
 			Username:     a.Cred.Username,
-			Password:     pass,
+			Password:     a.Cred.Password,
 			Scope:        a.Settings.UserDefaults.Scope,
 			Locale:       a.Settings.UserDefaults.Locale,
 			ViewMode:     a.Settings.UserDefaults.ViewMode,
@@ -178,16 +175,6 @@ func (a *HookAuth) SaveUser() (*users.User, error) {
 		}
 	} else if p := !users.CheckPwd(a.Cred.Password, u.Password); len(a.Fields.Values) > 1 || p {
 		u = a.GetUser(u)
-
-		// update the password when it doesn't match the current
-		if p {
-			pass, err := users.HashPwd(a.Cred.Password)
-			if err != nil {
-				return nil, err
-			}
-			u.Password = pass
-		}
-
 		// update user with provided fields
 		err := a.Users.Update(u)
 		if err != nil {
@@ -201,31 +188,31 @@ func (a *HookAuth) SaveUser() (*users.User, error) {
 // GetUser returns a User filled with hook values or provided defaults
 func (a *HookAuth) GetUser(d *users.User) *users.User {
 	// adds all permissions when user is admin
-	isAdmin := a.Fields.GetBoolean("user.perm.admin", d.Perm.Admin)
+	isAdmin := d.Perm.Admin
 	perms := users.Permissions{
 		Admin:    isAdmin,
-		Execute:  isAdmin || a.Fields.GetBoolean("user.perm.execute", d.Perm.Execute),
-		Create:   isAdmin || a.Fields.GetBoolean("user.perm.create", d.Perm.Create),
-		Rename:   isAdmin || a.Fields.GetBoolean("user.perm.rename", d.Perm.Rename),
-		Modify:   isAdmin || a.Fields.GetBoolean("user.perm.modify", d.Perm.Modify),
-		Delete:   isAdmin || a.Fields.GetBoolean("user.perm.delete", d.Perm.Delete),
-		Share:    isAdmin || a.Fields.GetBoolean("user.perm.share", d.Perm.Share),
-		Download: isAdmin || a.Fields.GetBoolean("user.perm.download", d.Perm.Download),
+		Execute:  isAdmin || d.Perm.Execute,
+		Create:   isAdmin || d.Perm.Create,
+		Rename:   isAdmin || d.Perm.Rename,
+		Modify:   isAdmin || d.Perm.Modify,
+		Delete:   isAdmin || d.Perm.Delete,
+		Share:    isAdmin || d.Perm.Share,
+		Download: isAdmin || d.Perm.Download,
 	}
 	user := users.User{
 		ID:          d.ID,
 		Username:    d.Username,
 		Password:    d.Password,
-		Scope:       a.Fields.GetString("user.scope", d.Scope),
-		Locale:      a.Fields.GetString("user.locale", d.Locale),
+		Scope:       d.Scope,
+		Locale:      d.Locale,
 		ViewMode:    d.ViewMode,
-		SingleClick: a.Fields.GetBoolean("user.singleClick", d.SingleClick),
+		SingleClick: d.SingleClick,
 		Sorting: files.Sorting{
-			Asc: a.Fields.GetBoolean("user.sorting.asc", d.Sorting.Asc),
-			By:  a.Fields.GetString("user.sorting.by", d.Sorting.By),
+			Asc: d.Sorting.Asc,
+			By:  d.Sorting.By,
 		},
-		Commands:     a.Fields.GetArray("user.commands", d.Commands),
-		HideDotfiles: a.Fields.GetBoolean("user.hideDotfiles", d.HideDotfiles),
+		Commands:     d.Commands,
+		HideDotfiles: d.HideDotfiles,
 		Perm:         perms,
 		LockPassword: true,
 	}

backend/auth/json.go

@@ -30,7 +30,6 @@ func (a JSONAuth) Auth(r *http.Request, usr users.Store) (*users.User, error) {
 	if r.Body == nil {
 		return nil, os.ErrPermission
 	}
-
 	err := json.NewDecoder(r.Body).Decode(&cred)
 	if err != nil {
 		return nil, os.ErrPermission

backend/benchmark_results.txt

@@ -5,33 +5,45 @@
 ?   	github.com/gtsteffaniak/filebrowser/auth	[no test files]
 ?   	github.com/gtsteffaniak/filebrowser/cmd	[no test files]
 PASS
-ok  	github.com/gtsteffaniak/filebrowser/diskcache	0.003s
+ok  	github.com/gtsteffaniak/filebrowser/diskcache	0.004s
 ?   	github.com/gtsteffaniak/filebrowser/errors	[no test files]
 ?   	github.com/gtsteffaniak/filebrowser/files	[no test files]
 PASS
 ok  	github.com/gtsteffaniak/filebrowser/fileutils	0.003s
-2023/09/24 12:52:05 h: 401  <nil>
-2023/09/24 12:52:05 h: 401  <nil>
-2023/09/24 12:52:05 h: 401  <nil>
-2023/09/24 12:52:05 h: 401  <nil>
-2023/09/24 12:52:05 h: 401  <nil>
-2023/09/24 12:52:05 h: 401  <nil>
+2023/10/18 10:19:52 Saving new user: username
+2023/10/18 10:19:52 Saving new user: username
+2023/10/18 10:19:52 Saving new user: username
+2023/10/18 10:19:52 Saving new user: username
+2023/10/18 10:19:52 Saving new user: username
+2023/10/18 10:19:52 Saving new user: username
+2023/10/18 10:19:52 Saving new user: username
+2023/10/18 10:19:52 Saving new user: username
+2023/10/18 10:19:52 h: 401  <nil>
+2023/10/18 10:19:52 h: 401  <nil>
+2023/10/18 10:19:52 h: 401  <nil>
+2023/10/18 10:19:52 h: 401  <nil>
+2023/10/18 10:19:52 Saving new user: username
+2023/10/18 10:19:52 Saving new user: username
+2023/10/18 10:19:52 Saving new user: username
+2023/10/18 10:19:52 Saving new user: username
+2023/10/18 10:19:53 h: 401  <nil>
+2023/10/18 10:19:53 h: 401  <nil>
 PASS
-ok  	github.com/gtsteffaniak/filebrowser/http	0.094s
+ok  	github.com/gtsteffaniak/filebrowser/http	0.208s
 PASS
-ok  	github.com/gtsteffaniak/filebrowser/img	0.144s
+ok  	github.com/gtsteffaniak/filebrowser/img	0.124s
+goos: linux
+goarch: amd64
+pkg: github.com/gtsteffaniak/filebrowser/index
+cpu: 11th Gen Intel(R) Core(TM) i5-11320H @ 3.20GHz
+BenchmarkFillIndex-8          	      10	   3239196 ns/op	   11289 B/op	     448 allocs/op
+BenchmarkSearchAllIndexes-8   	      10	   6645964 ns/op	 3176834 B/op	   59104 allocs/op
+PASS
+ok  	github.com/gtsteffaniak/filebrowser/index	0.126s
 PASS
 ok  	github.com/gtsteffaniak/filebrowser/rules	0.002s
 PASS
 ok  	github.com/gtsteffaniak/filebrowser/runner	0.003s
-goos: linux
-goarch: amd64
-pkg: github.com/gtsteffaniak/filebrowser/search
-cpu: 11th Gen Intel(R) Core(TM) i5-11320H @ 3.20GHz
-BenchmarkSearchAllIndexes-8   	      10	   5912685 ns/op	 3003976 B/op	   46139 allocs/op
-BenchmarkFillIndex-8          	      10	   3157995 ns/op	   18370 B/op	     449 allocs/op
-PASS
-ok  	github.com/gtsteffaniak/filebrowser/search	0.116s
 PASS
 ok  	github.com/gtsteffaniak/filebrowser/settings	0.005s
 ?   	github.com/gtsteffaniak/filebrowser/share	[no test files]

backend/cmd/hash.go

@@ -1,25 +0,0 @@
-package cmd
-
-import (
-	"fmt"
-
-	"github.com/spf13/cobra"
-
-	"github.com/gtsteffaniak/filebrowser/users"
-)
-
-func init() {
-	rootCmd.AddCommand(hashCmd)
-}
-
-var hashCmd = &cobra.Command{
-	Use:   "hash <password>",
-	Short: "Hashes a password",
-	Long:  `Hashes a password using bcrypt algorithm.`,
-	Args:  cobra.ExactArgs(1),
-	Run: func(cmd *cobra.Command, args []string) {
-		pwd, err := users.HashPwd(args[0])
-		checkErr(err)
-		fmt.Println(pwd)
-	},
-}

backend/cmd/root.go

@@ -3,7 +3,6 @@ package cmd
 import (
 	"crypto/tls"
 	"flag"
-	"io"
 	"io/fs"
 	"log"
 	"net"
@@ -17,22 +16,16 @@ import (
 
 	"github.com/spf13/afero"
 	"github.com/spf13/cobra"
-	lumberjack "gopkg.in/natefinch/lumberjack.v2"
 
 	"github.com/gtsteffaniak/filebrowser/auth"
 	"github.com/gtsteffaniak/filebrowser/diskcache"
 	fbhttp "github.com/gtsteffaniak/filebrowser/http"
 	"github.com/gtsteffaniak/filebrowser/img"
-	"github.com/gtsteffaniak/filebrowser/search"
+	"github.com/gtsteffaniak/filebrowser/index"
 	"github.com/gtsteffaniak/filebrowser/settings"
-	"github.com/gtsteffaniak/filebrowser/storage"
 	"github.com/gtsteffaniak/filebrowser/users"
 )
 
-var (
-	configFile string
-)
-
 type dirFS struct {
 	http.Dir
 }
@@ -71,7 +64,7 @@ var rootCmd = &cobra.Command{
 			fileCache = diskcache.New(afero.NewOsFs(), cacheDir)
 		}
 		// initialize indexing and schedule indexing ever n minutes (default 5)
-		go search.InitializeIndex(serverConfig.IndexingInterval)
+		go index.Initialize(serverConfig.IndexingInterval)
 		_, err := os.Stat(serverConfig.Root)
 		checkErr(err)
 		var listener net.Listener
@@ -124,56 +117,38 @@ 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":
-		log.SetOutput(os.Stdout)
-	case "stderr":
-		log.SetOutput(os.Stderr)
-	case "":
-		log.SetOutput(io.Discard)
-	default:
-		log.SetOutput(&lumberjack.Logger{
-			Filename:   logMethod,
-			MaxSize:    100,
-			MaxAge:     14,
-			MaxBackups: 10,
-		})
-	}
-}
-
 func quickSetup(d pythonData) {
-	settings.GlobalConfiguration.Key = generateKey()
-	var err error
+	settings.GlobalConfiguration.Auth.Key = generateKey()
 	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)
-	username := settings.GlobalConfiguration.AdminUsername
-	password := settings.GlobalConfiguration.AdminPassword
-	if username == "" || password == "" {
-		log.Fatal("username and password cannot be empty during quick setup")
-	}
-	user := &users.User{
-		Username:     username,
-		Password:     password,
-		LockPassword: false,
-	}
-	user.Perm.Admin = true
+	user := &users.User{}
 	settings.GlobalConfiguration.UserDefaults.Apply(user)
+	user.Username = settings.GlobalConfiguration.Auth.AdminUsername
+	user.Password = settings.GlobalConfiguration.Auth.AdminPassword
+	user.Perm.Admin = true
+	user.Scope = "./"
+	user.DarkMode = true
+	user.ViewMode = "normal"
+	user.LockPassword = false
+	user.Perm = users.Permissions{
+		Create:   true,
+		Rename:   true,
+		Modify:   true,
+		Delete:   true,
+		Share:    true,
+		Download: true,
+		Admin:    true,
+	}
 	err = d.store.Users.Save(user)
 	checkErr(err)
 }

backend/cmd/users_add.go

@@ -16,12 +16,9 @@ var usersAddCmd = &cobra.Command{
 	Long:  `Create a new user and add it to the database.`,
 	Args:  cobra.ExactArgs(2), //nolint:gomnd
 	Run: python(func(cmd *cobra.Command, args []string, d pythonData) {
-		password, err := users.HashPwd(args[1])
-		checkErr(err)
-
 		user := &users.User{
 			Username:     args[0],
-			Password:     password,
+			Password:     args[1],
 			LockPassword: mustGetBool(cmd.Flags(), "lockPassword"),
 		}
 		servSettings, err := d.store.Settings.GetServer()

backend/cmd/users_update.go

@@ -8,9 +8,6 @@ import (
 
 func init() {
 	usersCmd.AddCommand(usersUpdateCmd)
-
-	usersUpdateCmd.Flags().StringP("password", "p", "", "new password")
-	usersUpdateCmd.Flags().StringP("username", "u", "", "new username")
 }
 
 var usersUpdateCmd = &cobra.Command{
@@ -21,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
@@ -36,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/filebrowser.yaml

@@ -2,12 +2,19 @@ server:
   port: 8080
   baseURL: "/"
 auth:
-  method: noauth
+  method: password
   signup: true
-frontend:
-  theme: dark
-users:
-  - name: admin
-    settings:
-      hideDotfiles: true
-      singleClick: false
+userDefaults:
+  darkMode: true
+  disableSettings: false
+  scope: "."
+  hideDotfiles: true
+  singleClick: false
+  permissions:
+    admin: false
+    create: false
+    rename: false
+    modify: false
+    delete: false
+    share: false
+    download: false

backend/http/auth.go

@@ -12,6 +12,7 @@ import (
 	"github.com/golang-jwt/jwt/v4/request"
 
 	"github.com/gtsteffaniak/filebrowser/errors"
+	"github.com/gtsteffaniak/filebrowser/settings"
 	"github.com/gtsteffaniak/filebrowser/users"
 )
 
@@ -19,20 +20,8 @@ const (
 	TokenExpirationTime = time.Hour * 2
 )
 
-type userInfo struct {
-	ID           uint              `json:"id"`
-	Locale       string            `json:"locale"`
-	ViewMode     string            `json:"viewMode"`
-	SingleClick  bool              `json:"singleClick"`
-	Perm         users.Permissions `json:"perm"`
-	Commands     []string          `json:"commands"`
-	LockPassword bool              `json:"lockPassword"`
-	HideDotfiles bool              `json:"hideDotfiles"`
-	DateFormat   bool              `json:"dateFormat"`
-}
-
 type authToken struct {
-	User userInfo `json:"user"`
+	User users.User `json:"user"`
 	jwt.RegisteredClaims
 }
 
@@ -66,7 +55,7 @@ func (e extractor) ExtractToken(r *http.Request) (string, error) {
 func withUser(fn handleFunc) handleFunc {
 	return func(w http.ResponseWriter, r *http.Request, d *data) (int, error) {
 		keyFunc := func(token *jwt.Token) (interface{}, error) {
-			return d.settings.Key, nil
+			return d.settings.Auth.Key, nil
 		}
 
 		var tk authToken
@@ -123,7 +112,7 @@ type signupBody struct {
 }
 
 var signupHandler = func(w http.ResponseWriter, r *http.Request, d *data) (int, error) {
-	if !d.settings.Signup {
+	if !settings.GlobalConfiguration.Auth.Signup {
 		return http.StatusMethodNotAllowed, nil
 	}
 
@@ -143,15 +132,9 @@ var signupHandler = func(w http.ResponseWriter, r *http.Request, d *data) (int,
 
 	user := &users.User{
 		Username: info.Username,
+		Password: info.Password,
 	}
-
-	pwd, err := users.HashPwd(info.Password)
-	if err != nil {
-		return http.StatusInternalServerError, err
-	}
-
-	user.Password = pwd
-
+	settings.GlobalConfiguration.UserDefaults.Apply(user)
 	userHome, err := d.settings.MakeUserDir(user.Username, user.Scope, d.server.Root)
 	if err != nil {
 		log.Printf("create user: failed to mkdir user home dir: [%s]", userHome)
@@ -159,7 +142,7 @@ var signupHandler = func(w http.ResponseWriter, r *http.Request, d *data) (int,
 	}
 	user.Scope = userHome
 	log.Printf("new user: %s, home dir: [%s].", user.Username, userHome)
-
+	settings.GlobalConfiguration.UserDefaults.Apply(user)
 	err = d.store.Users.Save(user)
 	if err == errors.ErrExist {
 		return http.StatusConflict, err
@@ -176,17 +159,7 @@ var renewHandler = withUser(func(w http.ResponseWriter, r *http.Request, d *data
 
 func printToken(w http.ResponseWriter, _ *http.Request, d *data, user *users.User) (int, error) {
 	claims := &authToken{
-		User: userInfo{
-			ID:           user.ID,
-			Locale:       user.Locale,
-			ViewMode:     user.ViewMode,
-			SingleClick:  user.SingleClick,
-			Perm:         user.Perm,
-			LockPassword: user.LockPassword,
-			Commands:     user.Commands,
-			HideDotfiles: user.HideDotfiles,
-			DateFormat:   user.DateFormat,
-		},
+		User: *user,
 		RegisteredClaims: jwt.RegisteredClaims{
 			IssuedAt:  jwt.NewNumericDate(time.Now()),
 			ExpiresAt: jwt.NewNumericDate(time.Now().Add(TokenExpirationTime)),
@@ -195,7 +168,7 @@ func printToken(w http.ResponseWriter, _ *http.Request, d *data, user *users.Use
 	}
 
 	token := jwt.NewWithClaims(jwt.SigningMethodHS256, claims)
-	signed, err := token.SignedString(d.settings.Key)
+	signed, err := token.SignedString(d.settings.Auth.Key)
 	if err != nil {
 		return http.StatusInternalServerError, err
 	}

backend/http/public_test.go

@@ -85,7 +85,11 @@ func TestPublicShareHandlerAuthentication(t *testing.T) {
 				if err := storage.Users.Save(&users.User{Username: "username", Password: "pw"}); err != nil {
 					t.Fatalf("failed to save user: %v", err)
 				}
-				if err := storage.Settings.Save(&settings.Settings{Key: []byte("key")}); err != nil {
+				if err := storage.Settings.Save(&settings.Settings{
+					Auth: settings.Auth{
+						Key: []byte("key"),
+					},
+				}); err != nil {
 					t.Fatalf("failed to save settings: %v", err)
 				}
 

backend/http/search.go

@@ -2,18 +2,22 @@ package http
 
 import (
 	"net/http"
+	"strings"
 
-	"github.com/gtsteffaniak/filebrowser/search"
+	"github.com/gtsteffaniak/filebrowser/index"
 )
 
 var searchHandler = withUser(func(w http.ResponseWriter, r *http.Request, d *data) (int, error) {
 	response := []map[string]interface{}{}
 	query := r.URL.Query().Get("query")
-
 	// Retrieve the User-Agent and X-Auth headers from the request
 	sessionId := r.Header.Get("SessionId")
-	indexInfo, fileTypes := search.SearchAllIndexes(query, r.URL.Path, sessionId)
-	for _, path := range indexInfo {
+	userScope := r.Header.Get("UserScope")
+	index := *index.GetIndex()
+	combinedScope := strings.TrimPrefix(userScope+r.URL.Path, ".")
+	combinedScope = strings.TrimPrefix(combinedScope, "/")
+	results, fileTypes := index.Search(query, combinedScope, sessionId)
+	for _, path := range results {
 		responseObj := map[string]interface{}{
 			"path": path,
 			"dir":  true,

backend/http/settings.go

@@ -21,9 +21,9 @@ type settingsData struct {
 
 var settingsGetHandler = withAdmin(func(w http.ResponseWriter, r *http.Request, d *data) (int, error) {
 	data := &settingsData{
-		Signup:           d.settings.Signup,
-		CreateUserDir:    d.settings.CreateUserDir,
-		UserHomeBasePath: d.settings.UserHomeBasePath,
+		Signup:           settings.GlobalConfiguration.Auth.Signup,
+		CreateUserDir:    settings.GlobalConfiguration.Server.CreateUserDir,
+		UserHomeBasePath: settings.GlobalConfiguration.Server.UserHomeBasePath,
 		Defaults:         d.settings.UserDefaults,
 		Rules:            d.settings.Rules,
 		Frontend:         d.settings.Frontend,
@@ -41,9 +41,8 @@ var settingsPutHandler = withAdmin(func(w http.ResponseWriter, r *http.Request,
 		return http.StatusBadRequest, err
 	}
 
-	d.settings.Signup = req.Signup
-	d.settings.CreateUserDir = req.CreateUserDir
-	d.settings.UserHomeBasePath = req.UserHomeBasePath
+	d.settings.Server.CreateUserDir = req.CreateUserDir
+	d.settings.Server.UserHomeBasePath = req.UserHomeBasePath
 	d.settings.UserDefaults = req.Defaults
 	d.settings.Rules = req.Rules
 	d.settings.Frontend = req.Frontend

backend/http/share.go

@@ -129,7 +129,7 @@ var sharePostHandler = withPermShare(func(w http.ResponseWriter, r *http.Request
 
 	var token string
 	if len(hash) > 0 {
-		tokenBuffer := make([]byte, 96) //nolint:gomnd
+		tokenBuffer := make([]byte, 24) //nolint:gomnd
 		if _, err := rand.Read(tokenBuffer); err != nil {
 			return http.StatusInternalServerError, err
 		}

backend/http/static.go

@@ -30,17 +30,17 @@ func handleWithStaticData(w http.ResponseWriter, _ *http.Request, d *data, fSys
 		"Name":                  d.settings.Frontend.Name,
 		"DisableExternal":       d.settings.Frontend.DisableExternal,
 		"DisableUsedPercentage": d.settings.Frontend.DisableUsedPercentage,
+		"darkMode":              settings.GlobalConfiguration.UserDefaults.DarkMode,
 		"Color":                 d.settings.Frontend.Color,
 		"BaseURL":               d.server.BaseURL,
 		"Version":               version.Version,
 		"StaticURL":             path.Join(d.server.BaseURL, "/static"),
-		"Signup":                d.settings.Signup,
+		"Signup":                settings.GlobalConfiguration.Auth.Signup,
 		"NoAuth":                d.settings.Auth.Method == "noauth",
 		"AuthMethod":            d.settings.Auth.Method,
 		"LoginPage":             auther.LoginPage(),
 		"CSS":                   false,
 		"ReCaptcha":             false,
-		"Theme":                 d.settings.Frontend.Theme,
 		"EnableThumbs":          d.server.EnableThumbnails,
 		"ResizePreview":         d.server.ResizePreview,
 		"EnableExec":            d.server.EnableExec,

backend/http/users.go

@@ -124,11 +124,6 @@ var userPostHandler = withAdmin(func(w http.ResponseWriter, r *http.Request, d *
 		return http.StatusBadRequest, errors.ErrEmptyPassword
 	}
 
-	req.Data.Password, err = users.HashPwd(req.Data.Password)
-	if err != nil {
-		return http.StatusInternalServerError, err
-	}
-
 	userHome, err := d.settings.MakeUserDir(req.Data.Username, req.Data.Scope, d.server.Root)
 	if err != nil {
 		log.Printf("create user: failed to mkdir user home dir: [%s]", userHome)
@@ -184,7 +179,6 @@ var userPutHandler = withSelfOrAdmin(func(w http.ResponseWriter, r *http.Request
 			if !d.user.Perm.Admin && d.user.LockPassword {
 				return http.StatusForbidden, nil
 			}
-
 			req.Data.Password, err = users.HashPwd(req.Data.Password)
 			if err != nil {
 				return http.StatusInternalServerError, err

backend/index/conditions.go

@@ -1,13 +1,21 @@
-package search
+package index
 
 import (
+	"mime"
 	"regexp"
 	"strconv"
 	"strings"
 )
 
 var typeRegexp = regexp.MustCompile(`type:(\S+)`)
-
+var AllFiletypeOptions = []string{
+	"image",
+	"audio",
+	"archive",
+	"video",
+	"doc",
+	"dir",
+}
 var documentTypes = []string{
 	".word",
 	".pdf",
@@ -120,3 +128,35 @@ func updateSize(given string) int {
 		return size
 	}
 }
+
+func IsMatchingType(extension string, matchType string) bool {
+	mimetype := mime.TypeByExtension(extension)
+	if strings.HasPrefix(mimetype, matchType) {
+		return true
+	}
+	switch matchType {
+	case "doc":
+		return isDoc(extension)
+	case "archive":
+		return isArchive(extension)
+	}
+	return false
+}
+
+func isDoc(extension string) bool {
+	for _, typefile := range documentTypes {
+		if extension == typefile {
+			return true
+		}
+	}
+	return false
+}
+
+func isArchive(extension string) bool {
+	for _, typefile := range compressedFile {
+		if extension == typefile {
+			return true
+		}
+	}
+	return false
+}

backend/index/indexing.go

@@ -0,0 +1,138 @@
+package index
+
+import (
+	"log"
+	"os"
+	"slices"
+	"strings"
+	"sync"
+	"time"
+
+	"github.com/gtsteffaniak/filebrowser/settings"
+)
+
+type Index struct {
+	Dirs  []string
+	Files []string
+}
+
+var (
+	rootPath    string = "/srv"
+	indexes     Index
+	indexMutex  sync.RWMutex
+	lastIndexed time.Time
+)
+
+func GetIndex() *Index {
+	return &indexes
+}
+
+func Initialize(intervalMinutes uint32) {
+	// Initialize the index
+	indexes = Index{
+		Dirs:  []string{},
+		Files: []string{},
+	}
+	rootPath = settings.GlobalConfiguration.Server.Root
+	var numFiles, numDirs int
+	log.Println("Indexing files...")
+	lastIndexedStart := time.Now()
+	// Call the function to index files and directories
+	totalNumFiles, totalNumDirs, err := indexFiles(rootPath, &numFiles, &numDirs)
+	if err != nil {
+		log.Fatal(err)
+	}
+	lastIndexed = lastIndexedStart
+	go indexingScheduler(intervalMinutes)
+	log.Println("Successfully indexed files.")
+	log.Println("Files found       :", totalNumFiles)
+	log.Println("Directories found :", totalNumDirs)
+}
+
+func indexingScheduler(intervalMinutes uint32) {
+	log.Printf("Indexing scheduler will run every %v minutes", intervalMinutes)
+	for {
+		indexes.Dirs = slices.Compact(indexes.Dirs)
+		indexes.Files = slices.Compact(indexes.Files)
+		time.Sleep(time.Duration(intervalMinutes) * time.Minute)
+		var numFiles, numDirs int
+		lastIndexedStart := time.Now()
+		totalNumFiles, totalNumDirs, err := indexFiles(rootPath, &numFiles, &numDirs)
+		if err != nil {
+			log.Fatal(err)
+		}
+		lastIndexed = lastIndexedStart
+		if totalNumFiles+totalNumDirs > 0 {
+			log.Println("re-indexing found changes and updated the index.")
+		}
+	}
+}
+
+func removeFromSlice(slice []string, target string) []string {
+	for i, s := range slice {
+		if s == target {
+			// Swap the target element with the last element
+			slice[i], slice[len(slice)-1] = slice[len(slice)-1], slice[i]
+			// Resize the slice to exclude the last element
+			slice = slice[:len(slice)-1]
+			break // Exit the loop, assuming there's only one target element
+		}
+	}
+	return slice
+}
+
+// Define a function to recursively index files and directories
+func indexFiles(path string, numFiles *int, numDirs *int) (int, int, error) {
+	// Check if the current directory has been modified since last indexing
+	dir, err := os.Open(path)
+	if err != nil {
+		// directory must have been deleted, remove from index
+		indexes.Dirs = removeFromSlice(indexes.Dirs, path)
+		indexes.Files = removeFromSlice(indexes.Files, path)
+	}
+	defer dir.Close()
+	dirInfo, err := dir.Stat()
+	if err != nil {
+		return *numFiles, *numDirs, err
+	}
+	// Compare the last modified time of the directory with the last indexed time
+	if dirInfo.ModTime().Before(lastIndexed) {
+		return *numFiles, *numDirs, nil
+	}
+	// Read the directory contents
+	files, err := dir.Readdir(-1)
+	if err != nil {
+		return *numFiles, *numDirs, err
+	}
+	// Iterate over the files and directories
+	for _, file := range files {
+		if file.IsDir() {
+			*numDirs++
+			addToIndex(path, file.Name(), true)
+			_, _, err := indexFiles(path+"/"+file.Name(), numFiles, numDirs) // recursive
+			if err != nil {
+				log.Println("Could not index :", err)
+			}
+		} else {
+			*numFiles++
+			addToIndex(path, file.Name(), false)
+		}
+	}
+	return *numFiles, *numDirs, nil
+}
+
+func addToIndex(path string, fileName string, isDir bool) {
+	indexMutex.Lock()
+	defer indexMutex.Unlock()
+	path = strings.TrimPrefix(path, rootPath+"/")
+	path = strings.TrimSuffix(path, "/")
+	adjustedPath := path + "/" + fileName
+	if path == rootPath {
+		adjustedPath = fileName
+	}
+	if isDir {
+		indexes.Dirs = append(indexes.Dirs, adjustedPath)
+	} else {
+		indexes.Files = append(indexes.Files, adjustedPath)
+	}
+}

backend/index/indexing_test.go

@@ -0,0 +1,184 @@
+package index
+
+import (
+	"encoding/json"
+	"math/rand"
+	"reflect"
+	"testing"
+	"time"
+)
+
+func BenchmarkFillIndex(b *testing.B) {
+	indexes = Index{
+		Dirs:  []string{},
+		Files: []string{},
+	}
+	b.ResetTimer()
+	b.ReportAllocs()
+	for i := 0; i < b.N; i++ {
+		createMockData(50, 3) // 1000 dirs, 3 files per dir
+	}
+}
+
+func createMockData(numDirs, numFilesPerDir int) {
+	for i := 0; i < numDirs; i++ {
+		dirName := generateRandomPath(rand.Intn(3) + 1)
+		addToIndex("/", dirName, true)
+		for j := 0; j < numFilesPerDir; j++ {
+			fileName := "file-" + getRandomTerm() + getRandomExtension()
+			addToIndex("/"+dirName, fileName, false)
+		}
+	}
+}
+
+func generateRandomPath(levels int) string {
+	rand.New(rand.NewSource(time.Now().UnixNano()))
+	dirName := "srv"
+	for i := 0; i < levels; i++ {
+		dirName += "/" + getRandomTerm()
+	}
+	return dirName
+}
+
+func getRandomTerm() string {
+	wordbank := []string{
+		"hi", "test", "other", "name",
+		"cool", "things", "more", "items",
+	}
+	rand.New(rand.NewSource(time.Now().UnixNano()))
+
+	index := rand.Intn(len(wordbank))
+	return wordbank[index]
+}
+
+func getRandomExtension() string {
+	wordbank := []string{
+		".txt", ".mp3", ".mov", ".doc",
+		".mp4", ".bak", ".zip", ".jpg",
+	}
+	rand.New(rand.NewSource(time.Now().UnixNano()))
+	index := rand.Intn(len(wordbank))
+	return wordbank[index]
+}
+
+func generateRandomSearchTerms(numTerms int) []string {
+	// Generate random search terms
+	searchTerms := make([]string, numTerms)
+	for i := 0; i < numTerms; i++ {
+		searchTerms[i] = getRandomTerm()
+	}
+	return searchTerms
+}
+
+// JSONBytesEqual compares the JSON in two byte slices.
+func JSONBytesEqual(a, b []byte) (bool, error) {
+	var j, j2 interface{}
+	if err := json.Unmarshal(a, &j); err != nil {
+		return false, err
+	}
+	if err := json.Unmarshal(b, &j2); err != nil {
+		return false, err
+	}
+	return reflect.DeepEqual(j2, j), nil
+}
+
+func TestGetIndex(t *testing.T) {
+	tests := []struct {
+		name string
+		want *map[string][]string
+	}{
+		// TODO: Add test cases.
+	}
+	for _, tt := range tests {
+		t.Run(tt.name, func(t *testing.T) {
+			if got := GetIndex(); !reflect.DeepEqual(got, tt.want) {
+				t.Errorf("GetIndex() = %v, want %v", got, tt.want)
+			}
+		})
+	}
+}
+
+func TestInitializeIndex(t *testing.T) {
+	type args struct {
+		intervalMinutes uint32
+	}
+	tests := []struct {
+		name string
+		args args
+	}{
+		// TODO: Add test cases.
+	}
+	for _, tt := range tests {
+		t.Run(tt.name, func(t *testing.T) {
+			Initialize(tt.args.intervalMinutes)
+		})
+	}
+}
+
+func Test_indexingScheduler(t *testing.T) {
+	type args struct {
+		intervalMinutes uint32
+	}
+	tests := []struct {
+		name string
+		args args
+	}{
+		// TODO: Add test cases.
+	}
+	for _, tt := range tests {
+		t.Run(tt.name, func(t *testing.T) {
+			indexingScheduler(tt.args.intervalMinutes)
+		})
+	}
+}
+
+func Test_indexFiles(t *testing.T) {
+	type args struct {
+		path     string
+		numFiles *int
+		numDirs  *int
+	}
+	tests := []struct {
+		name    string
+		args    args
+		want    int
+		want1   int
+		wantErr bool
+	}{
+		// TODO: Add test cases.
+	}
+	for _, tt := range tests {
+		t.Run(tt.name, func(t *testing.T) {
+			got, got1, err := indexFiles(tt.args.path, tt.args.numFiles, tt.args.numDirs)
+			if (err != nil) != tt.wantErr {
+				t.Errorf("indexFiles() error = %v, wantErr %v", err, tt.wantErr)
+				return
+			}
+			if got != tt.want {
+				t.Errorf("indexFiles() got = %v, want %v", got, tt.want)
+			}
+			if got1 != tt.want1 {
+				t.Errorf("indexFiles() got1 = %v, want %v", got1, tt.want1)
+			}
+		})
+	}
+}
+
+func Test_addToIndex(t *testing.T) {
+	type args struct {
+		path     string
+		fileName string
+		isDir    bool
+	}
+	tests := []struct {
+		name string
+		args args
+	}{
+		// TODO: Add test cases.
+	}
+	for _, tt := range tests {
+		t.Run(tt.name, func(t *testing.T) {
+			addToIndex(tt.args.path, tt.args.fileName, tt.args.isDir)
+		})
+	}
+}

backend/index/search_index.go

@@ -0,0 +1,164 @@
+package index
+
+import (
+	"math/rand"
+	"os"
+	"path/filepath"
+	"sort"
+	"strings"
+	"sync"
+	"time"
+)
+
+var (
+	sessionInProgress sync.Map
+	mutex             sync.RWMutex
+	maxSearchResults        = 100
+	bytesInMegabyte   int64 = 1000000
+)
+
+func (si *Index) Search(search string, scope string, sourceSession string) ([]string, map[string]map[string]bool) {
+	if scope == "" {
+		scope = "/"
+	}
+	runningHash := generateRandomHash(4)
+	sessionInProgress.Store(sourceSession, runningHash) // Store the value in the sync.Map
+	searchOptions := ParseSearch(search)
+	mutex.RLock()
+	defer mutex.RUnlock()
+	fileListTypes := make(map[string]map[string]bool)
+	matching := []string{}
+	for _, searchTerm := range searchOptions.Terms {
+		if searchTerm == "" {
+			continue
+		}
+		// Iterate over the embedded index.Index fields Dirs and Files
+		for _, i := range []string{"Dirs", "Files"} {
+			isDir := false
+			count := 0
+			var paths []string
+
+			switch i {
+			case "Dirs":
+				isDir = true
+				paths = si.Dirs
+			case "Files":
+				paths = si.Files
+			}
+			for _, path := range paths {
+				value, found := sessionInProgress.Load(sourceSession)
+				if !found || value != runningHash {
+					return []string{}, map[string]map[string]bool{}
+				}
+				if count > maxSearchResults {
+					break
+				}
+				pathName := scopedPathNameFilter(path, scope, isDir)
+				if pathName == "" {
+					continue
+				}
+				fileTypes := map[string]bool{}
+				matches, fileType := containsSearchTerm(path, searchTerm, *searchOptions, isDir, fileTypes)
+				if !matches {
+					continue
+				}
+				fileListTypes[pathName] = fileType
+				matching = append(matching, pathName)
+				count++
+			}
+		}
+	}
+	// Sort the strings based on the number of elements after splitting by "/"
+	sort.Slice(matching, func(i, j int) bool {
+		parts1 := strings.Split(matching[i], "/")
+		parts2 := strings.Split(matching[j], "/")
+		return len(parts1) < len(parts2)
+	})
+	return matching, fileListTypes
+}
+
+func scopedPathNameFilter(pathName string, scope string, isDir bool) string {
+	scope = strings.TrimPrefix(scope, "/")
+	pathName = strings.TrimPrefix(pathName, "/")
+	pathName = strings.TrimSuffix(pathName, "/")
+	if strings.HasPrefix(pathName, scope) {
+		pathName = strings.TrimPrefix(pathName, scope)
+		if isDir {
+			pathName = pathName + "/"
+		}
+	} else {
+		pathName = "" // return not matched
+	}
+	return pathName
+}
+
+func containsSearchTerm(pathName string, searchTerm string, options SearchOptions, isDir bool, fileTypes map[string]bool) (bool, map[string]bool) {
+	conditions := options.Conditions
+	path := getLastPathComponent(pathName)
+	// Convert to lowercase once
+	if !conditions["exact"] {
+		path = strings.ToLower(path)
+		searchTerm = strings.ToLower(searchTerm)
+	}
+	if strings.Contains(path, searchTerm) {
+		// Calculate fileSize only if needed
+		var fileSize int64
+		matchesAllConditions := true
+		extension := filepath.Ext(path)
+		for _, k := range AllFiletypeOptions {
+			if IsMatchingType(extension, k) {
+				fileTypes[k] = true
+			}
+		}
+		fileTypes["dir"] = isDir
+		for t, v := range conditions {
+			if t == "exact" {
+				continue
+			}
+			var matchesCondition bool
+			switch t {
+			case "larger":
+				if fileSize == 0 {
+					fileSize = getFileSize(pathName)
+				}
+				matchesCondition = fileSize > int64(options.LargerThan)*bytesInMegabyte
+			case "smaller":
+				if fileSize == 0 {
+					fileSize = getFileSize(pathName)
+				}
+				matchesCondition = fileSize < int64(options.SmallerThan)*bytesInMegabyte
+			default:
+				matchesCondition = v == fileTypes[t]
+			}
+			if !matchesCondition {
+				matchesAllConditions = false
+			}
+		}
+		return matchesAllConditions, fileTypes
+	}
+	// Clear variables and return
+	return false, map[string]bool{}
+}
+
+func getFileSize(filepath string) int64 {
+	fileInfo, err := os.Stat(rootPath + "/" + filepath)
+	if err != nil {
+		return 0
+	}
+	return fileInfo.Size()
+}
+
+func getLastPathComponent(path string) string {
+	// Use filepath.Base to extract the last component of the path
+	return filepath.Base(path)
+}
+
+func generateRandomHash(length int) string {
+	const charset = "abcdefghijklmnopqrstuvwxyz0123456789"
+	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)
+}

backend/index/search_index_test.go

@@ -0,0 +1,251 @@
+package index
+
+import (
+	"reflect"
+	"testing"
+
+	"github.com/stretchr/testify/assert"
+)
+
+func BenchmarkSearchAllIndexes(b *testing.B) {
+	indexes = Index{
+		Dirs:  []string{},
+		Files: []string{},
+	}
+	// Create mock data
+	createMockData(50, 3) // 1000 dirs, 3 files per dir
+
+	// Generate 100 random search terms
+	searchTerms := generateRandomSearchTerms(100)
+
+	b.ResetTimer()
+	b.ReportAllocs()
+	for i := 0; i < b.N; i++ {
+		// Execute the SearchAllIndexes function
+		for _, term := range searchTerms {
+			indexes.Search(term, "/", "test")
+		}
+	}
+}
+
+// loop over test files and compare output
+func TestParseSearch(t *testing.T) {
+	value := ParseSearch("my test search")
+	want := &SearchOptions{
+		Conditions: map[string]bool{
+			"exact": false,
+		},
+		Terms: []string{"my test search"},
+	}
+	if !reflect.DeepEqual(value, want) {
+		t.Fatalf("\n got:  %+v\n want: %+v", value, want)
+	}
+	value = ParseSearch("case:exact my|test|search")
+	want = &SearchOptions{
+		Conditions: map[string]bool{
+			"exact": true,
+		},
+		Terms: []string{"my", "test", "search"},
+	}
+	if !reflect.DeepEqual(value, want) {
+		t.Fatalf("\n got:  %+v\n want: %+v", value, want)
+	}
+	value = ParseSearch("type:largerThan=100 type:smallerThan=1000 test")
+	want = &SearchOptions{
+		Conditions: map[string]bool{
+			"exact":  false,
+			"larger": true,
+		},
+		Terms:       []string{"test"},
+		LargerThan:  100,
+		SmallerThan: 1000,
+	}
+	if !reflect.DeepEqual(value, want) {
+		t.Fatalf("\n got:  %+v\n want: %+v", value, want)
+	}
+	value = ParseSearch("type:audio thisfile")
+	want = &SearchOptions{
+		Conditions: map[string]bool{
+			"exact": false,
+			"audio": true,
+		},
+		Terms: []string{"thisfile"},
+	}
+	if !reflect.DeepEqual(value, want) {
+		t.Fatalf("\n got:  %+v\n want: %+v", value, want)
+	}
+}
+
+func TestSearchIndexes(t *testing.T) {
+	indexes = Index{
+		Dirs: []string{
+			"/test",
+			"/test/path",
+			"/new/test/path",
+		},
+		Files: []string{
+			"/test/path/file.txt",
+			"/test/audio1.wav",
+			"/new/test/audio.wav",
+			"/new/test/video.mp4",
+			"/new/test/video.MP4",
+			"/new/test/path/archive.zip",
+		},
+	}
+	tests := []struct {
+		search         string
+		scope          string
+		expectedResult []string
+		expectedTypes  map[string]map[string]bool
+	}{
+		{
+			search:         "audio",
+			scope:          "/new/",
+			expectedResult: []string{"test/audio.wav"},
+			expectedTypes: map[string]map[string]bool{
+				"test/audio.wav": map[string]bool{"audio": true, "dir": false},
+			},
+		},
+		{
+			search:         "test",
+			scope:          "/",
+			expectedResult: []string{"test/"},
+			expectedTypes: map[string]map[string]bool{
+				"test/": map[string]bool{"dir": true},
+			},
+		},
+		{
+			search:         "archive",
+			scope:          "/",
+			expectedResult: []string{"new/test/path/archive.zip"},
+			expectedTypes: map[string]map[string]bool{
+				"new/test/path/archive.zip": map[string]bool{"archive": true, "dir": false},
+			},
+		},
+		{
+			search: "video",
+			scope:  "/",
+			expectedResult: []string{
+				"new/test/video.mp4",
+				"new/test/video.MP4",
+			},
+			expectedTypes: map[string]map[string]bool{
+				"new/test/video.MP4": map[string]bool{"video": true, "dir": false},
+				"new/test/video.mp4": map[string]bool{"video": true, "dir": false},
+			},
+		},
+	}
+	for _, tt := range tests {
+		t.Run(tt.search, func(t *testing.T) {
+			actualResult, actualTypes := indexes.Search(tt.search, tt.scope, "")
+			assert.Equal(t, tt.expectedResult, actualResult)
+			if len(tt.expectedTypes) > 0 {
+				for key, value := range tt.expectedTypes {
+					actualValue, exists := actualTypes[key]
+					assert.True(t, exists, "Expected type key '%s' not found in actual types", key)
+					assert.Equal(t, value, actualValue, "Type value mismatch for key '%s'", key)
+				}
+			}
+		})
+	}
+}
+
+func Test_isDoc(t *testing.T) {
+	type args struct {
+		extension string
+	}
+	tests := []struct {
+		name string
+		args args
+		want bool
+	}{
+		// TODO: Add test cases.
+	}
+	for _, tt := range tests {
+		t.Run(tt.name, func(t *testing.T) {
+			if got := isDoc(tt.args.extension); got != tt.want {
+				t.Errorf("isDoc() = %v, want %v", got, tt.want)
+			}
+		})
+	}
+}
+
+func Test_getFileSize(t *testing.T) {
+	type args struct {
+		filepath string
+	}
+	tests := []struct {
+		name string
+		args args
+		want int64
+	}{
+		// TODO: Add test cases.
+	}
+	for _, tt := range tests {
+		t.Run(tt.name, func(t *testing.T) {
+			if got := getFileSize(tt.args.filepath); got != tt.want {
+				t.Errorf("getFileSize() = %v, want %v", got, tt.want)
+			}
+		})
+	}
+}
+
+func Test_isArchive(t *testing.T) {
+	type args struct {
+		extension string
+	}
+	tests := []struct {
+		name string
+		args args
+		want bool
+	}{
+		// TODO: Add test cases.
+	}
+	for _, tt := range tests {
+		t.Run(tt.name, func(t *testing.T) {
+			if got := isArchive(tt.args.extension); got != tt.want {
+				t.Errorf("isArchive() = %v, want %v", got, tt.want)
+			}
+		})
+	}
+}
+
+func Test_getLastPathComponent(t *testing.T) {
+	type args struct {
+		path string
+	}
+	tests := []struct {
+		name string
+		args args
+		want string
+	}{
+		// TODO: Add test cases.
+	}
+	for _, tt := range tests {
+		t.Run(tt.name, func(t *testing.T) {
+			if got := getLastPathComponent(tt.args.path); got != tt.want {
+				t.Errorf("getLastPathComponent() = %v, want %v", got, tt.want)
+			}
+		})
+	}
+}
+
+func Test_generateRandomHash(t *testing.T) {
+	type args struct {
+		length int
+	}
+	tests := []struct {
+		name string
+		args args
+		want string
+	}{
+		// TODO: Add test cases.
+	}
+	for _, tt := range tests {
+		t.Run(tt.name, func(t *testing.T) {
+			if got := generateRandomHash(tt.args.length); got != tt.want {
+				t.Errorf("generateRandomHash() = %v, want %v", got, tt.want)
+			}
+		})
+	}
+}

backend/search/indexing.go

@@ -1,279 +0,0 @@
-package search
-
-import (
-	"log"
-	"math/rand"
-	"mime"
-	"os"
-	"path/filepath"
-	"sort"
-	"strings"
-	"sync"
-	"time"
-)
-
-var (
-	sessionInProgress sync.Map // Track session with requests in progress
-	rootPath          string   = "/srv"
-	indexes           map[string][]string
-	mutex             sync.RWMutex
-	lastIndexed       time.Time
-)
-
-func InitializeIndex(intervalMinutes uint32) {
-	// Initialize the indexes map
-	indexes = make(map[string][]string)
-	indexes["dirs"] = []string{}
-	indexes["files"] = []string{}
-	var numFiles, numDirs int
-	log.Println("Indexing files...")
-	lastIndexedStart := time.Now()
-	// Call the function to index files and directories
-	totalNumFiles, totalNumDirs, err := indexFiles(rootPath, &numFiles, &numDirs)
-	if err != nil {
-		log.Fatal(err)
-	}
-	lastIndexed = lastIndexedStart
-	go indexingScheduler(intervalMinutes)
-	log.Println("Successfully indexed files.")
-	log.Println("Files found       :", totalNumFiles)
-	log.Println("Directories found :", totalNumDirs)
-}
-
-func indexingScheduler(intervalMinutes uint32) {
-	log.Printf("Indexing scheduler will run every %v minutes", intervalMinutes)
-	for {
-		time.Sleep(time.Duration(intervalMinutes) * time.Minute)
-		var numFiles, numDirs int
-		lastIndexedStart := time.Now()
-		totalNumFiles, totalNumDirs, err := indexFiles(rootPath, &numFiles, &numDirs)
-		if err != nil {
-			log.Fatal(err)
-		}
-		lastIndexed = lastIndexedStart
-		if totalNumFiles+totalNumDirs > 0 {
-			log.Println("re-indexing found changes and updated the index.")
-		}
-	}
-}
-
-// Define a function to recursively index files and directories
-func indexFiles(path string, numFiles *int, numDirs *int) (int, int, error) {
-	// Check if the current directory has been modified since last indexing
-	dir, err := os.Open(path)
-	if err != nil {
-		// directory must have been deleted, remove from index
-		delete(indexes, path)
-	}
-	defer dir.Close()
-	dirInfo, err := dir.Stat()
-	if err != nil {
-		return *numFiles, *numDirs, err
-	}
-	// Compare the last modified time of the directory with the last indexed time
-	if dirInfo.ModTime().Before(lastIndexed) {
-		return *numFiles, *numDirs, nil
-	}
-	// Read the directory contents
-	files, err := dir.Readdir(-1)
-	if err != nil {
-		return *numFiles, *numDirs, err
-	}
-	// Iterate over the files and directories
-	for _, file := range files {
-		if file.IsDir() {
-			*numDirs++
-			addToIndex(path, file.Name(), true)
-			indexFiles(path+"/"+file.Name(), numFiles, numDirs) // recursive
-		} else {
-			*numFiles++
-			addToIndex(path, file.Name(), false)
-		}
-	}
-	return *numFiles, *numDirs, nil
-}
-
-func addToIndex(path string, fileName string, isDir bool) {
-	mutex.Lock()
-	defer mutex.Unlock()
-	path = strings.TrimPrefix(path, rootPath+"/")
-	path = strings.TrimSuffix(path, "/")
-	adjustedPath := path + "/" + fileName
-	if path == rootPath {
-		adjustedPath = fileName
-	}
-	if isDir {
-		indexes["dirs"] = append(indexes["dirs"], adjustedPath)
-	} else {
-		indexes["files"] = append(indexes["files"], adjustedPath)
-	}
-}
-
-func SearchAllIndexes(search string, scope string, sourceSession string) ([]string, map[string]map[string]bool) {
-	runningHash := generateRandomHash(4)
-	sessionInProgress.Store(sourceSession, runningHash) // Store the value in the sync.Map
-
-	searchOptions := ParseSearch(search)
-	mutex.RLock()
-	defer mutex.RUnlock()
-	fileListTypes := make(map[string]map[string]bool)
-	var matching []string
-	maximum := 100
-
-	for _, searchTerm := range searchOptions.Terms {
-		if searchTerm == "" {
-			continue
-		}
-		// Iterate over the indexes
-		for _, i := range []string{"dirs", "files"} {
-			isdir := i == "dirs"
-			count := 0
-			for _, path := range indexes[i] {
-				value, found := sessionInProgress.Load(sourceSession)
-				if !found || value != runningHash {
-					return []string{}, map[string]map[string]bool{}
-				}
-				if count > maximum {
-					break
-				}
-				pathName := scopedPathNameFilter(path, scope)
-				if pathName == "" {
-					continue
-				}
-				matches, fileType := containsSearchTerm(path, searchTerm, *searchOptions, isdir)
-				if !matches {
-					continue
-				}
-				if isdir {
-					pathName = pathName + "/"
-				}
-				matching = append(matching, pathName)
-				fileListTypes[pathName] = fileType
-				count++
-			}
-		}
-	}
-	// Sort the strings based on the number of elements after splitting by "/"
-	sort.Slice(matching, func(i, j int) bool {
-		parts1 := strings.Split(matching[i], "/")
-		parts2 := strings.Split(matching[j], "/")
-		return len(parts1) < len(parts2)
-	})
-	return matching, fileListTypes
-}
-
-func scopedPathNameFilter(pathName string, scope string) string {
-	scope = strings.TrimPrefix(scope, "/")
-	if strings.HasPrefix(pathName, scope) {
-		pathName = strings.TrimPrefix(pathName, scope)
-	} else {
-		pathName = ""
-	}
-	return pathName
-}
-
-func containsSearchTerm(pathName string, searchTerm string, options SearchOptions, isDir bool) (bool, map[string]bool) {
-	conditions := options.Conditions
-	path := getLastPathComponent(pathName)
-	// Convert to lowercase once
-	lowerSearchTerm := searchTerm
-	if !conditions["exact"] {
-		path = strings.ToLower(path)
-		lowerSearchTerm = strings.ToLower(searchTerm)
-	}
-	if strings.Contains(path, lowerSearchTerm) {
-		// Reuse the fileTypes map and clear its values
-		fileTypes := map[string]bool{
-			"audio":   false,
-			"image":   false,
-			"video":   false,
-			"doc":     false,
-			"archive": false,
-			"dir":     false,
-		}
-		// Calculate fileSize only if needed
-		var fileSize int64
-		if conditions["larger"] || conditions["smaller"] {
-			fileSize = getFileSize(pathName)
-		}
-		matchesAllConditions := true
-		extension := filepath.Ext(path)
-		mimetype := mime.TypeByExtension(extension)
-		fileTypes["audio"] = strings.HasPrefix(mimetype, "audio")
-		fileTypes["image"] = strings.HasPrefix(mimetype, "image")
-		fileTypes["video"] = strings.HasPrefix(mimetype, "video")
-		fileTypes["doc"] = isDoc(extension)
-		fileTypes["archive"] = isArchive(extension)
-		fileTypes["dir"] = isDir
-		for t, v := range conditions {
-			if t == "exact" {
-				continue
-			}
-			var matchesCondition bool
-			switch t {
-			case "larger":
-				matchesCondition = fileSize > int64(options.LargerThan)*1000000
-			case "smaller":
-				matchesCondition = fileSize < int64(options.SmallerThan)*1000000
-			default:
-				matchesCondition = v == fileTypes[t]
-			}
-			if !matchesCondition {
-				matchesAllConditions = false
-			}
-		}
-		return matchesAllConditions, fileTypes
-	}
-	// Clear variables and return
-	return false, map[string]bool{}
-}
-
-func isDoc(extension string) bool {
-	for _, typefile := range documentTypes {
-		if extension == typefile {
-			return true
-		}
-	}
-	return false
-}
-
-func getFileSize(filepath string) int64 {
-	fileInfo, err := os.Stat(rootPath + "/" + filepath)
-	if err != nil {
-		return 0
-	}
-	return fileInfo.Size()
-}
-
-func isArchive(extension string) bool {
-	for _, typefile := range compressedFile {
-		if extension == typefile {
-			return true
-		}
-	}
-	return false
-}
-
-func getLastPathComponent(path string) string {
-	// Use filepath.Base to extract the last component of the path
-	return filepath.Base(path)
-}
-
-func generateRandomHash(length int) string {
-	const charset = "abcdefghijklmnopqrstuvwxyz0123456789"
-	rand.Seed(rand.Int63()) // Automatically seeded based on current time
-	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

@@ -1,170 +0,0 @@
-package search
-
-import (
-	"encoding/json"
-	"fmt"
-	"math/rand"
-	"reflect"
-	"testing"
-	"time"
-)
-
-// loop over test files and compare output
-func TestParseSearch(t *testing.T) {
-	value := ParseSearch("my test search")
-	want := &SearchOptions{
-		Conditions: map[string]bool{
-			"exact": false,
-		},
-		Terms: []string{"my test search"},
-	}
-	if !reflect.DeepEqual(value, want) {
-		t.Fatalf("\n got:  %+v\n want: %+v", value, want)
-	}
-	value = ParseSearch("case:exact my|test|search")
-	want = &SearchOptions{
-		Conditions: map[string]bool{
-			"exact": true,
-		},
-		Terms: []string{"my", "test", "search"},
-	}
-	if !reflect.DeepEqual(value, want) {
-		t.Fatalf("\n got:  %+v\n want: %+v", value, want)
-	}
-	value = ParseSearch("type:largerThan=100 type:smallerThan=1000 test")
-	want = &SearchOptions{
-		Conditions: map[string]bool{
-			"exact":  false,
-			"larger": true,
-		},
-		Terms:       []string{"test"},
-		LargerThan:  100,
-		SmallerThan: 1000,
-	}
-	if !reflect.DeepEqual(value, want) {
-		t.Fatalf("\n got:  %+v\n want: %+v", value, want)
-	}
-	value = ParseSearch("type:audio thisfile")
-	want = &SearchOptions{
-		Conditions: map[string]bool{
-			"exact": false,
-			"audio": true,
-		},
-		Terms: []string{"thisfile"},
-	}
-	if !reflect.DeepEqual(value, want) {
-		t.Fatalf("\n got:  %+v\n want: %+v", value, want)
-	}
-}
-
-func BenchmarkSearchAllIndexes(b *testing.B) {
-	indexes = make(map[string][]string)
-
-	// Create mock data
-	createMockData(50, 3) // 1000 dirs, 3 files per dir
-
-	// Generate 100 random search terms
-	searchTerms := generateRandomSearchTerms(100)
-
-	b.ResetTimer()
-	b.ReportAllocs()
-	for i := 0; i < b.N; i++ {
-		// Execute the SearchAllIndexes function
-		for _, term := range searchTerms {
-			SearchAllIndexes(term, "/", "test")
-		}
-	}
-}
-
-func BenchmarkFillIndex(b *testing.B) {
-	indexes = make(map[string][]string)
-	b.ResetTimer()
-	b.ReportAllocs()
-	for i := 0; i < b.N; i++ {
-		createMockData(50, 3) // 1000 dirs, 3 files per dir
-	}
-}
-
-func createMockData(numDirs, numFilesPerDir int) {
-	for i := 0; i < numDirs; i++ {
-		dirName := generateRandomPath(rand.Intn(3) + 1)
-		addToIndex("/", dirName, true)
-		for j := 0; j < numFilesPerDir; j++ {
-			fileName := "file-" + getRandomTerm() + getRandomExtension()
-			addToIndex("/"+dirName, fileName, false)
-		}
-	}
-}
-
-func generateRandomPath(levels int) string {
-	rand.Seed(time.Now().UnixNano())
-	dirName := "srv"
-	for i := 0; i < levels; i++ {
-		dirName += "/" + getRandomTerm()
-	}
-	return dirName
-}
-
-func getRandomTerm() string {
-	wordbank := []string{
-		"hi", "test", "other", "name",
-		"cool", "things", "more", "items",
-	}
-	rand.Seed(time.Now().UnixNano())
-	index := rand.Intn(len(wordbank))
-	return wordbank[index]
-}
-
-func getRandomExtension() string {
-	wordbank := []string{
-		".txt", ".mp3", ".mov", ".doc",
-		".mp4", ".bak", ".zip", ".jpg",
-	}
-	rand.Seed(time.Now().UnixNano())
-	index := rand.Intn(len(wordbank))
-	return wordbank[index]
-}
-
-func generateRandomSearchTerms(numTerms int) []string {
-	// Generate random search terms
-	searchTerms := make([]string, numTerms)
-	for i := 0; i < numTerms; i++ {
-		searchTerms[i] = getRandomTerm()
-	}
-	return searchTerms
-}
-
-// JSONBytesEqual compares the JSON in two byte slices.
-func JSONBytesEqual(a, b []byte) (bool, error) {
-	var j, j2 interface{}
-	if err := json.Unmarshal(a, &j); err != nil {
-		return false, err
-	}
-	if err := json.Unmarshal(b, &j2); err != nil {
-		return false, err
-	}
-	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

@@ -18,7 +18,6 @@ func Initialize(configFile string) {
 		log.Fatalf("Error unmarshaling YAML data: %v", err)
 	}
 	GlobalConfiguration.UserDefaults.Perm = GlobalConfiguration.UserDefaults.Permissions
-	GlobalConfiguration.Server.Root = "/srv" // hardcoded for now. TODO allow changing
 }
 
 func loadConfigFile(configFile string) []byte {
@@ -26,7 +25,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()
@@ -46,11 +45,9 @@ func loadConfigFile(configFile string) []byte {
 
 func setDefaults() Settings {
 	return Settings{
-		Signup:        true,
-		AdminUsername: "admin",
-		AdminPassword: "admin",
 		Server: Server{
 			EnableThumbnails:   true,
+			ResizePreview:      false,
 			EnableExec:         false,
 			IndexingInterval:   5,
 			Port:               8080,
@@ -61,23 +58,45 @@ func setDefaults() Settings {
 			Root:               "/srv",
 		},
 		Auth: Auth{
-			Method: "password",
+			AdminUsername: "admin",
+			AdminPassword: "admin",
+			Method:        "password",
+			Signup:        false,
 			Recaptcha: Recaptcha{
 				Host: "",
 			},
 		},
 		UserDefaults: UserDefaults{
-			Scope:        ".",
-			LockPassword: false,
-			HideDotfiles: true,
+			Scope:           ".",
+			LockPassword:    false,
+			HideDotfiles:    true,
+			DarkMode:        false,
+			DisableSettings: false,
+			Locale:          "en",
 			Permissions: users.Permissions{
-				Create:   true,
-				Rename:   true,
-				Modify:   true,
-				Delete:   true,
-				Share:    true,
-				Download: true,
+				Create:   false,
+				Rename:   false,
+				Modify:   false,
+				Delete:   false,
+				Share:    false,
+				Download: false,
+				Admin:    false,
 			},
 		},
 	}
 }
+
+// Apply applies the default options to a user.
+func (d *UserDefaults) Apply(u *users.User) {
+	u.DisableSettings = d.DisableSettings
+	u.DarkMode = d.DarkMode
+	u.Scope = d.Scope
+	u.Locale = d.Locale
+	u.ViewMode = d.ViewMode
+	u.SingleClick = d.SingleClick
+	u.Perm = d.Perm
+	u.Sorting = d.Sorting
+	u.Commands = d.Commands
+	u.HideDotfiles = d.HideDotfiles
+	u.DateFormat = d.DateFormat
+}

backend/settings/config_test.go

@@ -0,0 +1,59 @@
+package settings
+
+import (
+	"reflect"
+	"testing"
+)
+
+func TestInitialize(t *testing.T) {
+	type args struct {
+		configFile string
+	}
+	tests := []struct {
+		name string
+		args args
+	}{
+		// TODO: Add test cases.
+	}
+	for _, tt := range tests {
+		t.Run(tt.name, func(t *testing.T) {
+			Initialize(tt.args.configFile)
+		})
+	}
+}
+
+func Test_loadConfigFile(t *testing.T) {
+	type args struct {
+		configFile string
+	}
+	tests := []struct {
+		name string
+		args args
+		want []byte
+	}{
+		// TODO: Add test cases.
+	}
+	for _, tt := range tests {
+		t.Run(tt.name, func(t *testing.T) {
+			if got := loadConfigFile(tt.args.configFile); !reflect.DeepEqual(got, tt.want) {
+				t.Errorf("loadConfigFile() = %v, want %v", got, tt.want)
+			}
+		})
+	}
+}
+
+func Test_setDefaults(t *testing.T) {
+	tests := []struct {
+		name string
+		want Settings
+	}{
+		// TODO: Add test cases.
+	}
+	for _, tt := range tests {
+		t.Run(tt.name, func(t *testing.T) {
+			if got := setDefaults(); !reflect.DeepEqual(got, tt.want) {
+				t.Errorf("setDefaults() = %v, want %v", got, tt.want)
+			}
+		})
+	}
+}

backend/settings/dir.go

@@ -21,13 +21,13 @@ var (
 // MakeUserDir makes the user directory according to settings.
 func (s *Settings) MakeUserDir(username, userScope, serverRoot string) (string, error) {
 	userScope = strings.TrimSpace(userScope)
-	if userScope == "" && s.CreateUserDir {
+	if userScope == "" && s.Server.CreateUserDir {
 		username = cleanUsername(username)
 		if username == "" || username == "-" || username == "." {
 			log.Printf("create user: invalid user for home dir creation: [%s]", username)
 			return "", errors.New("invalid user for home dir creation")
 		}
-		userScope = path.Join(s.UserHomeBasePath, username)
+		userScope = path.Join(s.Server.UserHomeBasePath, username)
 	}
 
 	userScope = path.Join("/", userScope)

backend/settings/dir_test.go

@@ -0,0 +1,81 @@
+package settings
+
+import (
+	"testing"
+
+	"github.com/gtsteffaniak/filebrowser/rules"
+)
+
+func TestSettings_MakeUserDir(t *testing.T) {
+	type fields struct {
+		Signup           bool
+		CreateUserDir    bool
+		UserHomeBasePath string
+		Commands         map[string][]string
+		Shell            []string
+		AdminUsername    string
+		AdminPassword    string
+		Rules            []rules.Rule
+		Server           Server
+		Auth             Auth
+		Frontend         Frontend
+		Users            []UserDefaults
+		UserDefaults     UserDefaults
+	}
+	type args struct {
+		username   string
+		userScope  string
+		serverRoot string
+	}
+	tests := []struct {
+		name    string
+		fields  fields
+		args    args
+		want    string
+		wantErr bool
+	}{
+		// TODO: Add test cases.
+	}
+	for _, tt := range tests {
+		t.Run(tt.name, func(t *testing.T) {
+			s := &Settings{
+				Commands:     tt.fields.Commands,
+				Shell:        tt.fields.Shell,
+				Rules:        tt.fields.Rules,
+				Server:       tt.fields.Server,
+				Auth:         tt.fields.Auth,
+				Frontend:     tt.fields.Frontend,
+				Users:        tt.fields.Users,
+				UserDefaults: tt.fields.UserDefaults,
+			}
+			got, err := s.MakeUserDir(tt.args.username, tt.args.userScope, tt.args.serverRoot)
+			if (err != nil) != tt.wantErr {
+				t.Errorf("Settings.MakeUserDir() error = %v, wantErr %v", err, tt.wantErr)
+				return
+			}
+			if got != tt.want {
+				t.Errorf("Settings.MakeUserDir() = %v, want %v", got, tt.want)
+			}
+		})
+	}
+}
+
+func Test_cleanUsername(t *testing.T) {
+	type args struct {
+		s string
+	}
+	tests := []struct {
+		name string
+		args args
+		want string
+	}{
+		// TODO: Add test cases.
+	}
+	for _, tt := range tests {
+		t.Run(tt.name, func(t *testing.T) {
+			if got := cleanUsername(tt.args.s); got != tt.want {
+				t.Errorf("cleanUsername() = %v, want %v", got, tt.want)
+			}
+		})
+	}
+}

backend/settings/storage.go

@@ -3,7 +3,6 @@ package settings
 import (
 	"github.com/gtsteffaniak/filebrowser/errors"
 	"github.com/gtsteffaniak/filebrowser/rules"
-	"github.com/gtsteffaniak/filebrowser/users"
 )
 
 // StorageBackend is a settings storage backend.
@@ -30,8 +29,8 @@ func (s *Storage) Get() (*Settings, error) {
 	if err != nil {
 		return nil, err
 	}
-	if set.UserHomeBasePath == "" {
-		set.UserHomeBasePath = DefaultUsersHomeBasePath
+	if set.Server.UserHomeBasePath == "" {
+		set.Server.UserHomeBasePath = DefaultUsersHomeBasePath
 	}
 	return set, nil
 }
@@ -46,7 +45,7 @@ var defaultEvents = []string{
 
 // Save saves the settings for the current instance.
 func (s *Storage) Save(set *Settings) error {
-	if len(set.Key) == 0 {
+	if len(set.Auth.Key) == 0 {
 		return errors.ErrEmptyKey
 	}
 
@@ -59,7 +58,7 @@ func (s *Storage) Save(set *Settings) error {
 	}
 
 	if set.UserDefaults.ViewMode == "" {
-		set.UserDefaults.ViewMode = users.MosaicViewMode
+		set.UserDefaults.ViewMode = "normal"
 	}
 
 	if set.Rules == nil {

backend/settings/structs.go

@@ -5,43 +5,27 @@ import (
 	"github.com/gtsteffaniak/filebrowser/users"
 )
 
-// Apply applies the default options to a user.
-func (d *UserDefaults) Apply(u *users.User) {
-	u.Scope = d.Scope
-	u.Locale = d.Locale
-	u.ViewMode = d.ViewMode
-	u.SingleClick = d.SingleClick
-	u.Perm = d.Perm
-	u.Sorting = d.Sorting
-	u.Commands = d.Commands
-	u.HideDotfiles = d.HideDotfiles
-	u.DateFormat = d.DateFormat
-}
-
 type Settings struct {
-	Key              []byte              `json:"key"`
-	Signup           bool                `json:"signup"`
-	CreateUserDir    bool                `json:"createUserDir"`
-	UserHomeBasePath string              `json:"userHomeBasePath"`
-	Commands         map[string][]string `json:"commands"`
-	Shell            []string            `json:"shell"`
-	AdminUsername    string              `json:"adminUsername"`
-	AdminPassword    string              `json:"adminPassword"`
-	Rules            []rules.Rule        `json:"rules"`
-	Server           Server              `json:"server"`
-	Auth             Auth                `json:"auth"`
-	Frontend         Frontend            `json:"frontend"`
-	Users            []UserDefaults      `json:"users,omitempty"`
-	UserDefaults     UserDefaults        `json:"userDefaults"`
+	Commands     map[string][]string `json:"commands"`
+	Shell        []string            `json:"shell"`
+	Rules        []rules.Rule        `json:"rules"`
+	Server       Server              `json:"server"`
+	Auth         Auth                `json:"auth"`
+	Frontend     Frontend            `json:"frontend"`
+	Users        []UserDefaults      `json:"users,omitempty"`
+	UserDefaults UserDefaults        `json:"userDefaults"`
 }
 
 type Auth struct {
-	Recaptcha Recaptcha `json:"recaptcha"`
-	Header    string    `json:"header"`
-	Method    string    `json:"method"`
-	Command   string    `json:"command"`
-	Signup    bool      `json:"signup"`
-	Shell     string    `json:"shell"`
+	Recaptcha     Recaptcha `json:"recaptcha"`
+	Header        string    `json:"header"`
+	Method        string    `json:"method"`
+	Command       string    `json:"command"`
+	Signup        bool      `json:"signup"`
+	Shell         string    `json:"shell"`
+	AdminUsername string    `json:"adminUsername"`
+	AdminPassword string    `json:"adminPassword"`
+	Key           []byte    `json:"key"`
 }
 
 type Recaptcha struct {
@@ -67,6 +51,8 @@ type Server struct {
 	Log                   string `json:"log"`
 	Database              string `json:"database"`
 	Root                  string `json:"root"`
+	UserHomeBasePath      string `json:"userHomeBasePath"`
+	CreateUserDir         bool   `json:"createUserDir"`
 }
 
 type Frontend struct {
@@ -74,26 +60,27 @@ type Frontend struct {
 	DisableExternal       bool   `json:"disableExternal"`
 	DisableUsedPercentage bool   `json:"disableUsedPercentage"`
 	Files                 string `json:"files"`
-	Theme                 string `json:"theme"`
 	Color                 string `json:"color"`
 }
 
 // UserDefaults is a type that holds the default values
 // for some fields on User.
 type UserDefaults struct {
-	LockPassword bool         `json:"lockPassword"`
-	Scope        string       `json:"scope"`
-	Locale       string       `json:"locale"`
-	ViewMode     string       `json:"viewMode"`
-	SingleClick  bool         `json:"singleClick"`
-	Rules        []rules.Rule `json:"rules"`
-	Sorting      struct {
+	DarkMode        bool         `json:"darkMode"`
+	LockPassword    bool         `json:"lockPassword"`
+	DisableSettings bool         `json:"disableSettings,omitempty"`
+	Scope           string       `json:"scope"`
+	Locale          string       `json:"locale"`
+	ViewMode        string       `json:"viewMode"`
+	SingleClick     bool         `json:"singleClick"`
+	Rules           []rules.Rule `json:"rules"`
+	Sorting         struct {
 		By  string `json:"by"`
 		Asc bool   `json:"asc"`
 	} `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"`
 }

backend/settings/testingConfig.yaml

@@ -28,12 +28,13 @@ frontend:
   disableExternal: true
   disableUsedPercentage: true
   files: ""
-  theme: ""
   color: ""
 userDefaults:
   scope: ""
   locale: ""
   viewMode: ""
+  darkMode: true
+  disableSettings: false
   singleClick: true
   sorting:
     by: ""

backend/storage/bolt/users.go

@@ -73,11 +73,11 @@ func (st usersBackend) Update(user *users.User, fields ...string) error {
 }
 
 func (st usersBackend) Save(user *users.User) error {
-	password, err := users.HashPwd(user.Password)
+	pass, err := users.HashPwd(user.Password)
 	if err != nil {
 		return err
 	}
-	user.Password = password
+	user.Password = pass
 	err = st.db.Save(user)
 	if err == storm.ErrAlreadyExists {
 		return errors.ErrExist

backend/users/storage.go

@@ -1,6 +1,7 @@
 package users
 
 import (
+	"log"
 	"sync"
 	"time"
 
@@ -73,7 +74,7 @@ func (s *Storage) Gets(baseScope string) ([]*User, error) {
 
 // Update updates a user in the database.
 func (s *Storage) Update(user *User, fields ...string) error {
-	err := user.Clean("", fields...)
+	err := user.Clean("")
 	if err != nil {
 		return err
 	}
@@ -91,6 +92,7 @@ func (s *Storage) Update(user *User, fields ...string) error {
 
 // Save saves the user in a storage.
 func (s *Storage) Save(user *User) error {
+	log.Println("Saving new user:", user.Username)
 	if err := user.Clean(""); err != nil {
 		return err
 	}

backend/users/users.go

@@ -6,16 +6,10 @@ import (
 
 	"github.com/spf13/afero"
 
-	"github.com/gtsteffaniak/filebrowser/errors"
 	"github.com/gtsteffaniak/filebrowser/files"
 	"github.com/gtsteffaniak/filebrowser/rules"
 )
 
-var (
-	ListViewMode   = "list"
-	MosaicViewMode = "mosaic"
-)
-
 type Permissions struct {
 	Admin    bool `json:"admin"`
 	Execute  bool `json:"execute"`
@@ -29,21 +23,23 @@ type Permissions struct {
 
 // User describes a user.
 type User struct {
-	ID           uint          `storm:"id,increment" json:"id"`
-	Username     string        `storm:"unique" json:"username"`
-	Password     string        `json:"password"`
-	Scope        string        `json:"scope"`
-	Locale       string        `json:"locale"`
-	LockPassword bool          `json:"lockPassword"`
-	ViewMode     string        `json:"viewMode"`
-	SingleClick  bool          `json:"singleClick"`
-	Perm         Permissions   `json:"perm"`
-	Commands     []string      `json:"commands"`
-	Sorting      files.Sorting `json:"sorting"`
-	Fs           afero.Fs      `json:"-" yaml:"-"`
-	Rules        []rules.Rule  `json:"rules"`
-	HideDotfiles bool          `json:"hideDotfiles"`
-	DateFormat   bool          `json:"dateFormat"`
+	DarkMode        bool          `json:"darkMode"`
+	DisableSettings bool          `json:"disableSettings"`
+	ID              uint          `storm:"id,increment" json:"id"`
+	Username        string        `storm:"unique" json:"username"`
+	Password        string        `json:"password"`
+	Scope           string        `json:"scope"`
+	Locale          string        `json:"locale"`
+	LockPassword    bool          `json:"lockPassword"`
+	ViewMode        string        `json:"viewMode"`
+	SingleClick     bool          `json:"singleClick"`
+	Perm            Permissions   `json:"perm"`
+	Commands        []string      `json:"commands"`
+	Sorting         files.Sorting `json:"sorting"`
+	Fs              afero.Fs      `json:"-" yaml:"-"`
+	Rules           []rules.Rule  `json:"rules"`
+	HideDotfiles    bool          `json:"hideDotfiles"`
+	DateFormat      bool          `json:"dateFormat"`
 }
 
 // GetRules implements rules.Provider.
@@ -51,53 +47,11 @@ func (u *User) GetRules() []rules.Rule {
 	return u.Rules
 }
 
-var checkableFields = []string{
-	"Username",
-	"Password",
-	"Scope",
-	"ViewMode",
-	"Commands",
-	"Sorting",
-	"Rules",
-}
-
 // Clean cleans up a user and verifies if all its fields
 // are alright to be saved.
 //
 //nolint:gocyclo
-func (u *User) Clean(baseScope string, fields ...string) error {
-	if len(fields) == 0 {
-		fields = checkableFields
-	}
-
-	for _, field := range fields {
-		switch field {
-		case "Username":
-			if u.Username == "" {
-				return errors.ErrEmptyUsername
-			}
-		case "Password":
-			if u.Password == "" {
-				return errors.ErrEmptyPassword
-			}
-		case "ViewMode":
-			if u.ViewMode == "" {
-				u.ViewMode = ListViewMode
-			}
-		case "Commands":
-			if u.Commands == nil {
-				u.Commands = []string{}
-			}
-		case "Sorting":
-			if u.Sorting.By == "" {
-				u.Sorting.By = "name"
-			}
-		case "Rules":
-			if u.Rules == nil {
-				u.Rules = []rules.Rule{}
-			}
-		}
-	}
+func (u *User) Clean(baseScope string) error {
 
 	if u.Fs == nil {
 		scope := u.Scope

backend/version/version.go

@@ -2,7 +2,7 @@ package version
 
 var (
 	// Version is the current File Browser version.
-	Version = "(0.2.0)"
+	Version = "(0.2.1)"
 	// CommitSHA is the commmit sha.
 	CommitSHA = "(unknown)"
 )

configuration.md

@@ -7,7 +7,11 @@ This document covers the available configuration options, their defaults, and ho
 Here is an expanded config file which includes all possible configurations:
 
 ```
+adminUsername: admin
+adminPassword: admin
 server:
+  CreateUserDir: false
+  UserHomeBasePath: ""
   indexingInterval: 5
   numImageProcessors: 4
   socket: ""
@@ -37,11 +41,12 @@ frontend:
   disableExternal: false
   disableUsedPercentage: true
   files: ""
-  theme: ""
   color: ""
 userDefaults:
+  settingsAllowed: true
+  darkMode: false
   scope: ""
-  locale: ""
+  locale: "en"
   viewMode: ""
   singleClick: true
   sorting:
@@ -64,34 +69,37 @@ userDefaults:
 Here are the defaults if nothing is set:
 
 ```
-Signup: true
-AdminUsername: admin
-AdminPassword: admin
-Server:
-  EnableThumbnails: true
-  EnableExec: false
-  IndexingInterval: 5
-  Port: 8080
-  NumImageProcessors: 4
-  BaseURL: ""
-  Database: database.db
-  Log: stdout
-  Root: /srv
-Auth:
-  Method: password
-  Recaptcha:
-    Host: ""
-UserDefaults:
-  Scope: "."
-  LockPassword: false
-  HideDotfiles: true
-  Permissions:
-    Create: true
-    Rename: true
-    Modify: true
-    Delete: true
-    Share: true
-    Download: true
+adminUsername: admin
+adminPassword: admin
+server:
+  enableThumbnails: true
+  enableExec: false
+  indexingInterval: 5
+  port: 8080
+  numImageProcessors: 4
+  baseURL: ""
+  database: database.db
+  log: stdout
+  root: /srv
+auth:
+  method: password
+  recaptcha:
+    host: ""
+userDefaults:
+  settingsAllowed: true
+  darkMode: false
+  scope: ""
+  locale: "en"
+  scope: "."
+  lockPassword: false
+  hideDotfiles: true
+  permissions:
+    create: true
+    rename: true
+    modify: true
+    delete: true
+    share: true
+    download: true
 ```
 
 ## About each configuration
@@ -100,17 +108,11 @@ UserDefaults:
 
 ## About each configuration
 
-- `Signup`: This boolean value indicates whether user signup is enabled.
-
-- `AdminUsername`: This is the username of the admin user.
-
-- `AdminPassword`: This is the password of the admin user.
-
 ### Server configuration settings
 
-- `indexingInterval`: This is the time in minutes the system waits before checking for filesystem changes (used in search only).
+- `indexingInterval`: This is the time in minutes the system waits before checking for filesystem changes. Default: `5`
 
-- `numImageProcessors`: This is the number of image processors available.
+- `numImageProcessors`: This is the number of image processors available. Default: `4`
 
 - `socket`: This is the socket configuration.
 
@@ -118,23 +120,27 @@ UserDefaults:
 
 - `tlsCert`: This is the TLS certificate configuration.
 
-- `enableThumbnails`: This boolean value determines whether thumbnails are enabled.
+- `enableThumbnails`: This boolean value determines whether thumbnails are enabled on ui. Default: `true`
 
-- `resizePreview`: This boolean value determines whether preview resizing is enabled.
+- `resizePreview`: This boolean value determines whether preview resizing is enabled. Default: `false`
 
 - `typeDetectionByHeader`: This boolean value determines whether type detection is based on headers.
 
-- `port`: This is the port number on which the server is running.
+- `port`: This is the port number on which the server is running. Default: `8080`
 
-- `baseURL`: This is the base URL for the server.
+- `baseURL`: This is the base URL for the server. Default: `""`
 
-- `address`: This is the server address configuration.
+- `address`: This is the server address configuration. Default: `0.0.0.0`
 
-- `log`: This specifies the log destination (e.g., "stdout" for standard output).
+- `log`: This specifies the log destination. Default: `stdout`
 
-- `database`: This is the database file path + filename that will be created if it does not already exist. If it exists, it will use the existing file.
+- `database`: This is the database file path + filename that will be created if it does not already exist. If it exists, it will use the existing file. Default `database.db`
 
-- `root`: This is the root directory path.
+- `root`: This is the root directory path. Default: `/srv`
+
+- `CreateUserDir`: Boolean to create user directory on user creation. Default: `false`
+
+- `UserHomeBasePath`: String to define user home directory base path. Default: `""`
 
 ### Auth configuration settings
 
@@ -149,17 +155,22 @@ UserDefaults:
 - `header`: This is the authentication header.
 
 - `method`: This is the authentication method used (e.g., "json"). Possible values:
-  - password - username and password
-  - hook - hook authentication
-  - proxy - proxy authentication
-  - oath - oath authentication
+  - `password` - username and password
+  - `hook` - hook authentication
+  - `proxy` - proxy authentication
+  - `oath` - oath authentication
+  - `noauth` - no authentication/login required.
 
-- `command`: This is the authentication command.
-
-- `signup`: This boolean value indicates whether user signup is enabled.
+- `command`: Deprecated: This is the authentication command.
 
 - `shell`: This is the shell configuration.
-  
+
+- `Signup`: This boolean value indicates whether user signup is enabled on the login page. NOTE: Be mindful of `userDefaults` settings if enabled. Default: `false`
+
+- `AdminUsername`: This is the username of the admin user. Default: `admin`
+
+- `AdminPassword`: This is the password of the admin user. Default: `admin`
+
 ### Frontend configuration settings
 
 - `name`: This is the name of the frontend.
@@ -173,22 +184,26 @@ UserDefaults:
 - `theme`: This is the theme configuration.
 
 - `color`: This is the color configuration.
-  
+
 ### UserDefaults configuration settings
 
+- `darkMode`: Determines whether dark mode is enabled for the user (`true` or `false`)
+
+- `settingsAllowed`: Determines whether settings page is enabled for the user (`true` or `false`)
+
 - `scope`: This is a scope of the permissions, "." or "./" means all directories, "./downloads" would mean only the downloads folder.
 
-- `locale`: This is the locale configuration.
+- `locale`: String locale configuration. Default: `en`
 
-- `viewMode`: This is the view mode configuration.
+- `viewMode`: This is the view mode configuration. Possible values: `normal`, `compact`, `list`, and `gallery`. default: `normal`
 
-- `singleClick`: This boolean value determines whether single-click is enabled.
+- `singleClick`: This boolean value determines whether single-click is enabled. (`true` or `false`)
 
 - `sorting`:
 
   - `by`: This is the sorting method used (e.g., "asc").
 
-  - `asc`: This boolean value determines the sorting order.
+  - `asc`: This boolean value determines the sorting order is ascending or descending. (`true` or `false`)
 
 - `permissions`:
 
@@ -208,9 +223,8 @@ UserDefaults:
 
   - `download`: This boolean value determines whether download permissions are granted.
 
-- `commands`: This is a list of commands.
+- `commands`: Deprecated: This is a list of commands.
 
-- `hideDotfiles`: This boolean value determines whether dotfiles are hidden.
-
-- `dateFormat`: This boolean value determines whether date formatting is enabled.
+- `hideDotfiles`: This boolean value determines whether dotfiles are hidden. (`true` or `false`)
 
+- `dateFormat`: This boolean value determines whether date formatting is enabled. (`true` or `false`)

frontend/.eslintrc.yml

@@ -0,0 +1,16 @@
+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
+  vue/no-deprecated-v-bind-sync: warn

frontend/package.json

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

frontend/public/img/icons/safari-pinned-tab.svg

@@ -1,42 +0,0 @@
-<?xml version="1.0" standalone="no"?>
-<!DOCTYPE svg PUBLIC "-//W3C//DTD SVG 20010904//EN"
- "http://www.w3.org/TR/2001/REC-SVG-20010904/DTD/svg10.dtd">
-<svg version="1.0" xmlns="http://www.w3.org/2000/svg"
- width="700.000000pt" height="700.000000pt" viewBox="0 0 700.000000 700.000000"
- preserveAspectRatio="xMidYMid meet">
-<metadata>
-Created by potrace 1.11, written by Peter Selinger 2001-2013
-</metadata>
-<g transform="translate(0.000000,700.000000) scale(0.100000,-0.100000)"
-fill="#000000" stroke="none">
-<path d="M3245 6989 c-522 -39 -1042 -197 -1480 -449 -849 -488 -1459 -1308
--1673 -2250 -177 -776 -89 -1582 250 -2301 368 -778 1052 -1418 1857 -1739
-903 -359 1927 -325 2812 92 778 368 1418 1052 1739 1857 359 903 325 1927 -92
-2812 -296 627 -806 1175 -1423 1529 -587 338 -1308 500 -1990 449z m555 -580
-c519 -51 1018 -245 1446 -565 788 -588 1229 -1526 1174 -2496 -16 -277 -58
--500 -145 -763 -144 -440 -378 -819 -710 -1150 -452 -452 -1005 -730 -1655
--832 -91 -14 -175 -18 -405 -18 -304 0 -369 6 -595 51 -1105 223 -1999 1092
--2259 2197 -52 221 -73 412 -73 667 0 397 64 732 204 1080 304 752 886 1334
-1638 1638 431 174 895 238 1380 191z"/>
-<path d="M2670 5215 c0 -13 -44 -15 -335 -15 -352 0 -383 -3 -399 -45 -3 -9
--6 -758 -6 -1663 0 -1168 -3 -1643 -11 -1632 -8 11 -9 8 -4 -15 3 -16 17 -41
-31 -55 l24 -25 1530 0 1530 0 24 25 c14 14 26 36 27 50 1 14 1 711 1 1550 l-2
-1526 -228 142 -229 142 -136 0 -137 0 0 -600 0 -600 -705 0 -705 0 0 615 0
-615 -135 0 c-113 0 -135 -2 -135 -15z m-264 -190 c57 -29 89 -71 103 -137 35
--154 -98 -282 -258 -247 -55 12 -122 62 -148 113 -36 69 -12 186 49 243 62 58
-170 70 254 28z m2316 -1702 c17 -15 18 -49 18 -670 l0 -653 -1245 0 -1245 0 0
-654 c0 582 2 656 16 670 14 14 139 16 1226 16 1113 0 1213 -1 1230 -17z
-m-2602 -1363 c40 -40 13 -100 -43 -100 -60 0 -88 59 -47 100 11 11 31 20 45
-20 14 0 34 -9 45 -20z m2840 0 c41 -41 11 -100 -52 -100 -35 0 -58 24 -58 60
-0 54 71 79 110 40z"/>
-<path d="M2431 3091 c-7 -13 -7 -23 2 -35 11 -15 97 -16 1067 -14 l1055 3 0
-30 0 30 -1057 3 c-1023 2 -1058 1 -1067 -17z"/>
-<path d="M2436 2675 c-19 -19 -11 -41 17 -49 41 -11 2067 -7 2088 4 23 13 25
-46 3 54 -9 3 -483 6 -1054 6 -919 0 -1040 -2 -1054 -15z"/>
-<path d="M2447 2273 c-14 -4 -17 -13 -15 -36 l3 -32 1049 -3 c767 -1 1052 1
-1062 9 20 16 17 47 -5 59 -20 10 -2055 13 -2094 3z"/>
-<path d="M3822 5027 c-21 -23 -22 -30 -22 -293 0 -258 1 -271 20 -292 27 -29
-56 -35 140 -30 56 3 75 8 93 26 22 22 22 26 22 298 l0 276 -24 19 c-19 16 -40
-19 -115 19 -84 0 -95 -2 -114 -23z"/>
-</g>
-</svg>

frontend/public/img/logo.svg

@@ -1,147 +0,0 @@
-<?xml version="1.0" encoding="UTF-8" standalone="no"?>
-<svg
-   xmlns:dc="http://purl.org/dc/elements/1.1/"
-   xmlns:cc="http://creativecommons.org/ns#"
-   xmlns:rdf="http://www.w3.org/1999/02/22-rdf-syntax-ns#"
-   xmlns:svg="http://www.w3.org/2000/svg"
-   xmlns="http://www.w3.org/2000/svg"
-   xmlns:sodipodi="http://sodipodi.sourceforge.net/DTD/sodipodi-0.dtd"
-   xmlns:inkscape="http://www.inkscape.org/namespaces/inkscape"
-   xml:space="preserve"
-   width="560"
-   height="560"
-   version="1.1"
-   style="clip-rule:evenodd;fill-rule:evenodd;image-rendering:optimizeQuality;shape-rendering:geometricPrecision;text-rendering:geometricPrecision"
-   viewBox="0 0 560 560"
-   id="svg44"
-   sodipodi:docname="icon_raw.svg"
-   inkscape:version="0.92.3 (2405546, 2018-03-11)"
-   inkscape:export-filename="/home/umarcor/filebrowser/logo/icon_raw.svg.png"
-   inkscape:export-xdpi="96"
-   inkscape:export-ydpi="96"><metadata
-   id="metadata48"><rdf:RDF><cc:Work
-       rdf:about=""><dc:format>image/svg+xml</dc:format><dc:type
-         rdf:resource="http://purl.org/dc/dcmitype/StillImage" /><dc:title /></cc:Work></rdf:RDF></metadata><sodipodi:namedview
-   pagecolor="#ffffff"
-   bordercolor="#666666"
-   borderopacity="1"
-   objecttolerance="10"
-   gridtolerance="10"
-   guidetolerance="10"
-   inkscape:pageopacity="0"
-   inkscape:pageshadow="2"
-   inkscape:window-width="1366"
-   inkscape:window-height="711"
-   id="namedview46"
-   showgrid="false"
-   inkscape:zoom="0.33714286"
-   inkscape:cx="-172.33051"
-   inkscape:cy="280"
-   inkscape:window-x="0"
-   inkscape:window-y="20"
-   inkscape:window-maximized="1"
-   inkscape:current-layer="svg44" />
-  <defs
-   id="defs4">
-    <style
-   type="text/css"
-   id="style2">
-      <![CDATA[
-       .fil1 {fill:#FEFEFE}
-       .fil6 {fill:#006498}
-       .fil7 {fill:#0EA5EB}
-       .fil8 {fill:#2979FF}
-       .fil3 {fill:#2BBCFF}
-       .fil0 {fill:#455A64}
-       .fil4 {fill:#53C6FC}
-       .fil5 {fill:#BDEAFF}
-       .fil2 {fill:#332C2B;fill-opacity:0.149020}
-      ]]>
-    </style>
-  </defs>
-  <g
-   id="g85"
-   transform="translate(-70,-70)"><path
-     class="fil1"
-     d="M 350,71 C 504,71 629,196 629,350 629,504 504,629 350,629 196,629 71,504 71,350 71,196 196,71 350,71 Z"
-     id="path9"
-     inkscape:connector-curvature="0"
-     style="fill:#fefefe" /><path
-     class="fil2"
-     d="M 475,236 593,387 C 596,503 444,639 301,585 L 225,486 339,330 c 0,0 138,-95 136,-94 z"
-     id="path11"
-     inkscape:connector-curvature="0"
-     style="fill:#332c2b;fill-opacity:0.14902003" /><path
-     class="fil3"
-     d="m 231,211 h 208 l 38,24 v 246 c 0,5 -3,8 -8,8 H 231 c -5,0 -8,-3 -8,-8 V 219 c 0,-5 3,-8 8,-8 z"
-     id="path13"
-     inkscape:connector-curvature="0"
-     style="fill:#2bbcff" /><path
-     class="fil4"
-     d="m 231,211 h 208 l 38,24 v 2 L 440,214 H 231 c -4,0 -7,3 -7,7 v 263 c -1,-1 -1,-2 -1,-3 V 219 c 0,-5 3,-8 8,-8 z"
-     id="path15"
-     inkscape:connector-curvature="0"
-     style="fill:#53c6fc" /><polygon
-     class="fil5"
-     points="305,212 418,212 418,310 305,310 "
-     id="polygon17"
-     style="fill:#bdeaff" /><path
-     class="fil5"
-     d="m 255,363 h 189 c 3,0 5,2 5,4 V 483 H 250 V 367 c 0,-2 2,-4 5,-4 z"
-     id="path19"
-     inkscape:connector-curvature="0"
-     style="fill:#bdeaff" /><polygon
-     class="fil6"
-     points="250,470 449,470 449,483 250,483 "
-     id="polygon21"
-     style="fill:#006498" /><path
-     class="fil6"
-     d="m 380,226 h 10 c 3,0 6,2 6,5 v 40 c 0,3 -3,6 -6,6 h -10 c -3,0 -6,-3 -6,-6 v -40 c 0,-3 3,-5 6,-5 z"
-     id="path23"
-     inkscape:connector-curvature="0"
-     style="fill:#006498" /><path
-     class="fil1"
-     d="m 254,226 c 10,0 17,7 17,17 0,9 -7,16 -17,16 -9,0 -17,-7 -17,-16 0,-10 8,-17 17,-17 z"
-     id="path25"
-     inkscape:connector-curvature="0"
-     style="fill:#fefefe" /><path
-     class="fil6"
-     d="m 267,448 h 165 c 2,0 3,1 3,3 v 0 c 0,1 -1,3 -3,3 H 267 c -2,0 -3,-2 -3,-3 v 0 c 0,-2 1,-3 3,-3 z"
-     id="path27"
-     inkscape:connector-curvature="0"
-     style="fill:#006498" /><path
-     class="fil6"
-     d="m 267,415 h 165 c 2,0 3,1 3,3 v 0 c 0,1 -1,2 -3,2 H 267 c -2,0 -3,-1 -3,-2 v 0 c 0,-2 1,-3 3,-3 z"
-     id="path29"
-     inkscape:connector-curvature="0"
-     style="fill:#006498" /><path
-     class="fil6"
-     d="m 267,381 h 165 c 2,0 3,2 3,3 v 0 c 0,2 -1,3 -3,3 H 267 c -2,0 -3,-1 -3,-3 v 0 c 0,-1 1,-3 3,-3 z"
-     id="path31"
-     inkscape:connector-curvature="0"
-     style="fill:#006498" /><path
-     class="fil1"
-     d="m 236,472 c 3,0 5,2 5,5 0,2 -2,4 -5,4 -3,0 -5,-2 -5,-4 0,-3 2,-5 5,-5 z"
-     id="path33"
-     inkscape:connector-curvature="0"
-     style="fill:#fefefe" /><path
-     class="fil1"
-     d="m 463,472 c 3,0 5,2 5,5 0,2 -2,4 -5,4 -3,0 -5,-2 -5,-4 0,-3 2,-5 5,-5 z"
-     id="path35"
-     inkscape:connector-curvature="0"
-     style="fill:#fefefe" /><polygon
-     class="fil6"
-     points="305,212 284,212 284,310 305,310 "
-     id="polygon37"
-     style="fill:#006498" /><path
-     class="fil7"
-     d="m 477,479 v 2 c 0,5 -3,8 -8,8 H 231 c -5,0 -8,-3 -8,-8 v -2 c 0,4 3,8 8,8 h 238 c 5,0 8,-4 8,-8 z"
-     id="path39"
-     inkscape:connector-curvature="0"
-     style="fill:#0ea5eb" /><path
-     class="fil8"
-     d="M 350,70 C 505,70 630,195 630,350 630,505 505,630 350,630 195,630 70,505 70,350 70,195 195,70 350,70 Z m 0,46 C 479,116 584,221 584,350 584,479 479,584 350,584 221,584 116,479 116,350 116,221 221,116 350,116 Z"
-     id="path41"
-     inkscape:connector-curvature="0"
-     style="fill:#2979ff" /></g>
-</svg>

frontend/public/index.html

@@ -120,17 +120,22 @@
 <body>
   <div id="app"></div>
 
-  <div id="loading">
+  [{[ if .darkMode -]}]
+  <div id="loading dark-mode">
     <div class="spinner">
       <div class="bounce1"></div>
       <div class="bounce2"></div>
       <div class="bounce3"></div>
     </div>
   </div>
-
-  [{[ if .Theme -]}]
-    <link rel="stylesheet" href="[{[ .StaticURL ]}]/themes/[{[ .Theme ]}].css" />
-  [{[ end ]}]
+  [{[ else ]}]
+  <div id="loading">
+    <div class="spinner">
+      <div class="bounce1"></div>
+      <div class="bounce2"></div>
+      <div class="bounce3"></div>
+    </div>
+  </div>  [{[ end ]}]
   [{[ if .CSS -]}]
     <link rel="stylesheet" href="[{[ .StaticURL ]}]/custom.css" />
   [{[ end ]}]

frontend/public/themes/dark.css

@@ -1,220 +0,0 @@
-:root {
-  --background: #141D24;
-  --surfacePrimary: #20292F;
-  --surfaceSecondary: #3A4147;
-  --divider: rgba(255, 255, 255, 0.12);
-  --textPrimary: rgba(255, 255, 255, 0.87);
-  --textSecondary: rgba(255, 255, 255, 0.6);
-}
-
-body {
-  background: var(--background);
-  color: var(--textPrimary);
-}
-
-#loading {
-  background: var(--background);
-}
-
-#login {
-  background: var(--background);
-}
-
-header {
-  background: var(--surfacePrimary);
-}
-
-@supports (backdrop-filter: none) {
-  header {
-    background: transparent;
-    backdrop-filter: blur(16px) invert(0.1);
-  }
-}
-
-#search #input {
-  background: var(--surfaceSecondary);
-  border-color: var(--surfaceSecondary);
-}
-#search #input input::placeholder {
-  color: var(--textSecondary);
-}
-#search.active #input {
-  background: var(--surfacePrimary);
-  border-color: white;
-}
-#search.active input {
-  color: var(--textPrimary);
-}
-#search #result {
-  background: var(--background);
-  color: var(--textPrimary);
-}
-#search .boxes h3 {
-  color: var(--textPrimary);
-}
-
-.action {
-  color: var(--textPrimary) !important;
-}
-.action:hover {
-  background-color: rgba(255, 255, 255, .1);
-}
-
-.action .counter {
-  border-color: var(--surfacePrimary);
-}
-
-nav > div {
-  border-color: var(--divider);
-}
-
-.breadcrumbs {
-  border-color: var(--divider);
-  color: var(--textPrimary) !important;
-}
-.breadcrumbs span {
-  color: var(--textPrimary) !important;
-}
-.breadcrumbs a:hover {
-  background-color: rgba(255, 255, 255, .1);
-}
-
-#listing .item {
-  background: var(--surfacePrimary);
-  color: var(--textPrimary);
-  border-color: var(--divider) !important;
-}
-
-#listing .item .modified {
-  color: var(--textSecondary);
-}
-#listing h2,
-#listing.list .header span {
-  color: var(--textPrimary) !important;
-}
-#listing.list .header span {
-  color: var(--textPrimary);
-}
-
-#listing.list .item.header {
-  background: var(--background);
-}
-
-.message {
-  color: var(--textPrimary);
-}
-
-.card {
-  background: var(--surfacePrimary);
-  color: var(--textPrimary);
-}
-.button--flat:hover {
-  background: var(--surfaceSecondary);
-}
-
-.dashboard #nav ul li {
-  color: var(--textSecondary);
-}
-.dashboard #nav ul li:hover {
-  background: var(--surfaceSecondary);
-}
-#result-list {
-  background-color:#292929;
-}
-
-.card h3,
-.dashboard #nav,
-.dashboard p label {
-  color: var(--textPrimary);
-}
-.card#share input,
-.card#share select,
-.input {
-  background: var(--surfaceSecondary);
-  color: var(--textPrimary);
-}
-
-.input:hover,
-.input:focus {
-  border-color: rgba(255, 255, 255, 0.15);
-}
-.input--red {
-  background: #73302D;
-}
-
-.input--green {
-  background: #147A41;
-}
-
-.dashboard #nav .wrapper,
-.collapsible {
-  border-color: var(--divider);
-}
-.collapsible > label * {
-  color: var(--textPrimary);
-}
-
-table th {
-  color: var(--textSecondary);
-}
-
-.file-list li:hover {
-  background: var(--surfaceSecondary);
-}
-.file-list li:before {
-  color: var(--textSecondary);
-}
-
-.shell {
-  background: var(--surfacePrimary);
-  color: var(--textPrimary);
-}
-.shell__result {
-  border-top: 1px solid var(--divider);
-}
-
-#editor-container {
-  background: var(--background);
-}
-
-#editor-container .bar {
-  background: var(--surfacePrimary);
-}
-nav {
-  background: var(--surfaceSecondary) !important;
-}
-
-#file-selection {
-  background: var(--surfaceSecondary) !important;
-}
-#file-selection span {
-  color: var(--textPrimary) !important;
-}
-#dropdown {
-  background: var(--surfaceSecondary) !important;
-}
-
-.share__box {
-  background: var(--surfacePrimary) !important;
-  color: var(--textPrimary);
-}
-
-.share__box__element {
-  border-top-color: var(--divider);
-}
-
-.helpButton {
-  background: var(--background);
-}
-.sizeInputWrapper {
-  background: var(--background);
-  color: white
-}
-.button-group button {
-  background: var(--background);
-  color: white
-}
-#result-desktop #result-list {
-  background: #2a3137;
-  max-height: unset;
-}

frontend/src/App.vue

@@ -1,24 +1,20 @@
 <template>
-  <router-view></router-view>
+    <router-view></router-view>
 </template>
 
 <script>
+
 // eslint-disable-next-line no-undef
 __webpack_public_path__ = window.FileBrowser.StaticURL + "/";
 
 export default {
   name: "app",
-  mounted() {
-    const loading = document.getElementById("loading");
-    loading.classList.add("done");
-
-    setTimeout(function () {
-      loading.parentNode.removeChild(loading);
-    }, 200);
-  },
+  computed: {},
 };
 </script>
 
 <style>
+/* Always load styles.css */
 @import "./css/styles.css";
+@import "./css/dark.css";
 </style>

frontend/src/api/utils.js

@@ -15,6 +15,7 @@ export async function fetchURL(url, opts, auth = true) {
       headers: {
         "X-Auth": store.state.jwt,
         "sessionId": store.state.sessionId,
+        "userScope": store.state.user.scope,
         ...headers,
       },
       ...rest,

frontend/src/components/Search.vue

@@ -1,20 +1,44 @@
 <template>
-  <div id="search" @click="open" v-bind:class="{ active, ongoing }">
+  <div
+    id="search"
+    @click="open"
+    v-bind:class="{ active, ongoing, 'dark-mode': isDarkMode }"
+  >
     <div id="input">
-      <button v-if="active" class="action" @click="close" :aria-label="$t('buttons.close')" :title="$t('buttons.close')">
+      <button
+        v-if="active"
+        class="action"
+        @click="close"
+        :aria-label="$t('buttons.close')"
+        :title="$t('buttons.close')"
+      >
         <i class="material-icons">close</i>
       </button>
       <i v-else class="material-icons">search</i>
-      <input class="main-input" type="text" @keyup.exact="keyup" @input="submit" ref="input" :autofocus="active"
-        v-model.trim="value" :aria-label="$t('search.search')" :placeholder="$t('search.search')" />
+      <input
+        class="main-input"
+        type="text"
+        @keyup.exact="keyup"
+        @input="submit"
+        ref="input"
+        :autofocus="active"
+        v-model.trim="value"
+        :aria-label="$t('search.search')"
+        :placeholder="$t('search.search')"
+      />
     </div>
     <div v-if="isMobile && active" id="result" :class="{ hidden: !active }" ref="result">
       <div id="result-list">
         <div class="button" style="width: 100%">
-          Search Context: {{ getContext(this.$route.path) }}
+          Search Context: {{ this.searchContext }}
         </div>
         <ul v-show="results.length > 0">
-          <li v-for="(s, k) in results" :key="k" @click.stop.prevent="navigateTo(s.url)" style="cursor: pointer">
+          <li
+            v-for="(s, k) in results"
+            :key="k"
+            @click.stop.prevent="navigateTo(s.url)"
+            style="cursor: pointer"
+          >
             <router-link to="#" event="">
               <i v-if="s.dir" class="material-icons folder-icons"> folder </i>
               <i v-else-if="s.audio" class="material-icons audio-icons"> volume_up </i>
@@ -23,7 +47,7 @@
               <i v-else-if="s.archive" class="material-icons archive-icons"> archive </i>
               <i v-else class="material-icons file-icons"> insert_drive_file </i>
               <span class="text-container">
-                {{ basePath(s.path) }}<b>{{ baseName(s.path) }}</b>
+                {{ basePath(s.path,s.dir) }}<b>{{ baseName(s.path) }}</b>
               </span>
             </router-link>
           </li>
@@ -37,15 +61,26 @@
           </div>
         </div>
         <template v-if="isEmpty">
-          <button class="mobile-boxes" v-if="value.length === 0 && !showBoxes" @click="resetSearchFilters()">
+          <button
+            class="mobile-boxes"
+            v-if="value.length === 0 && !showBoxes"
+            @click="resetSearchFilters()"
+          >
             Reset filters
           </button>
           <template v-if="value.length === 0 && showBoxes">
             <div class="boxes">
               <h3>{{ $t("search.types") }}</h3>
               <div>
-                <div class="mobile-boxes" tabindex="0" v-for="(v, k) in boxes" :key="k" role="button"
-                  @click="addToTypes('type:' + k)" :aria-label="v.label">
+                <div
+                  class="mobile-boxes"
+                  tabindex="0"
+                  v-for="(v, k) in boxes"
+                  :key="k"
+                  role="button"
+                  @click="addToTypes('type:' + k)"
+                  :aria-label="v.label"
+                >
                   <i class="material-icons">{{ v.icon }}</i>
                   <p>{{ v.label }}</p>
                 </div>
@@ -56,7 +91,7 @@
       </div>
     </div>
     <div v-show="!isMobile && active" id="result-desktop" ref="result">
-      <div class="searchContext">Search Context: {{ getContext(this.$route.path) }}</div>
+      <div class="searchContext">Search Context: {{ this.searchContext }}</div>
       <div id="result-list">
         <template>
           <p v-show="isEmpty && isRunning" id="renew">
@@ -90,26 +125,51 @@
             </p>
           </div>
           <template>
-            <ButtonGroup :buttons="folderSelect" @button-clicked="addToTypes" @remove-button-clicked="removeFromTypes"
-              @disableAll="folderSelectClicked()" @enableAll="resetButtonGroups()" />
-            <ButtonGroup :buttons="typeSelect" @button-clicked="addToTypes" @remove-button-clicked="removeFromTypes"
-              :isDisabled="isTypeSelectDisabled" />
+            <ButtonGroup
+              :buttons="folderSelect"
+              @button-clicked="addToTypes"
+              @remove-button-clicked="removeFromTypes"
+              @disableAll="folderSelectClicked()"
+              @enableAll="resetButtonGroups()"
+            />
+            <ButtonGroup
+              :buttons="typeSelect"
+              @button-clicked="addToTypes"
+              @remove-button-clicked="removeFromTypes"
+              :isDisabled="isTypeSelectDisabled"
+            />
             <div class="sizeConstraints">
               <div class="sizeInputWrapper">
                 <p>Smaller Than:</p>
-                <input class="sizeInput" v-model="smallerThan" type="number" min="0" placeholder="number" />
+                <input
+                  class="sizeInput"
+                  v-model="smallerThan"
+                  type="number"
+                  min="0"
+                  placeholder="number"
+                />
                 <p>MB</p>
               </div>
               <div class="sizeInputWrapper">
                 <p>Larger Than:</p>
-                <input class="sizeInput" v-model="largerThan" type="number" placeholder="number" />
+                <input
+                  class="sizeInput"
+                  v-model="largerThan"
+                  type="number"
+                  placeholder="number"
+                />
                 <p>MB</p>
               </div>
             </div>
           </template>
         </template>
         <ul v-show="results.length > 0">
-          <li v-for="(s, k) in results" :key="k" @click.stop.prevent="navigateTo(s.url)" style="cursor: pointer">
+          <li
+            v-for="(s, k) in results"
+            :key="k"
+            @click.stop.prevent="navigateTo(s.url)"
+            style="cursor: pointer"
+          >
             <router-link to="#" event="">
               <i v-if="s.dir" class="material-icons folder-icons"> folder </i>
               <i v-else-if="s.audio" class="material-icons audio-icons"> volume_up </i>
@@ -118,7 +178,7 @@
               <i v-else-if="s.archive" class="material-icons archive-icons"> archive </i>
               <i v-else class="material-icons file-icons"> insert_drive_file </i>
               <span class="text-container">
-                {{ basePath(s.path) }}<b>{{ baseName(s.path) }}</b>
+                {{ basePath(s.path,s.dir) }}<b>{{ baseName(s.path) }}</b>
               </span>
             </router-link>
           </li>
@@ -142,13 +202,14 @@
   border-right: 1px solid gray;
 }
 
-#result-desktop>#result-list {
+#result-desktop > #result-list {
   max-height: 80vh;
   width: 35em;
   overflow: scroll;
   padding-bottom: 1em;
   -webkit-transition: width 0.3s ease 0s;
   transition: width 0.3s ease 0s;
+  background-color: unset;
 }
 
 #result-desktop {
@@ -172,13 +233,15 @@
   background-color: lightgray;
   max-height: 80vh;
   overflow: hidden;
+  display: flex;
+  flex-direction: column;
 }
 
 #search.active #result-desktop ul li a {
   display: flex;
   align-items: center;
-  padding: .3em 0;
-  margin-right: .3em;
+  padding: 0.3em 0;
+  margin-right: 0.3em;
 }
 
 #search #result-list.active {
@@ -201,9 +264,10 @@
 
 /* Search */
 #search {
-  z-index:3;
+  background-color: unset;
+  z-index: 3;
   position: fixed;
-  top: .5em;
+  top: 0.5em;
   min-width: 35em;
   left: 50%;
   -webkit-transform: translateX(-50%);
@@ -255,7 +319,6 @@
   direction: rtl;
 }
 
-
 #search #result {
   padding-top: 1em;
   overflow: hidden;
@@ -276,7 +339,7 @@ body.rtl #search #result {
   direction: ltr;
 }
 
-#search #result>div>*:first-child {
+#search #result > div > *:first-child {
   margin-top: 0;
 }
 
@@ -286,7 +349,7 @@ body.rtl #search #result {
 }
 
 /* Search Results */
-body.rtl #search #result ul>* {
+body.rtl #search #result ul > * {
   direction: ltr;
   text-align: left;
 }
@@ -314,7 +377,7 @@ body.rtl #search #result ul>* {
 }
 
 #search.active #input {
-  background-color: lightgray;
+  background-color: var(--background);
   border-color: black;
   border-style: solid;
   border-bottom-style: none;
@@ -411,7 +474,7 @@ body.rtl #search .boxes h3 {
   width: 5em;
   border-radius: 1em;
   padding: 1em;
-  backdrop-filter: invert(.1);
+  backdrop-filter: invert(0.1);
   border: none !important;
 }
 
@@ -427,7 +490,7 @@ body.rtl #search .boxes h3 {
   -webkit-box-align: center;
   -ms-flex-align: center;
   align-items: center;
-  border: 1px solid #ccc
+  border: 1px solid #ccc;
 }
 
 .helpButton {
@@ -453,6 +516,7 @@ body.rtl #search .boxes h3 {
 import ButtonGroup from "./ButtonGroup.vue";
 import { mapState, mapGetters, mapMutations } from "vuex";
 import { search } from "@/api";
+import { darkMode } from "@/utils/constants";
 
 var boxes = {
   folder: { label: "folders", icon: "folder" },
@@ -471,6 +535,7 @@ export default {
   name: "search",
   data: function () {
     return {
+      searchContext: "./",
       largerThan: "",
       smallerThan: "",
       noneMessage: "Start typing 3 or more characters to begin searching.",
@@ -485,7 +550,7 @@ export default {
         { label: "Photos", value: "type:image" },
         { label: "Audio", value: "type:audio" },
         { label: "Videos", value: "type:video" },
-        { label: "Documents", value: "type:docs" },
+        { label: "Documents", value: "type:doc" },
         { label: "Archives", value: "type:archive" },
       ],
       value: "",
@@ -502,12 +567,11 @@ export default {
       const resultList = document.getElementById("result-list");
       if (!active) {
         resultList.classList.remove("active");
-        return
+        return;
       }
       setTimeout(() => {
         resultList.classList.add("active");
       }, 100);
-
     },
     show(val, old) {
       this.active = val === "search";
@@ -538,6 +602,9 @@ export default {
   computed: {
     ...mapState(["user", "show"]),
     ...mapGetters(["isListing"]),
+    isDarkMode() {
+      return this.user && Object.prototype.hasOwnProperty.call(this.user, "darkMode") ? this.user.darkMode : darkMode;
+    },
     showBoxes() {
       return this.searchTypes == "";
     },
@@ -568,6 +635,7 @@ export default {
   },
   mounted() {
     window.addEventListener("resize", this.handleResize);
+    this.searchContext = this.getContext(this.$route.path)
     this.handleResize(); // Call this once to set the initial width
   },
   methods: {
@@ -584,15 +652,18 @@ export default {
       let path = "./" + url.substring(url.indexOf("/") + 1);
       return path.replace(/\/+$/, "") + "/";
     },
-    basePath(str) {
-      let parts = str.split("/");
+    basePath(str,isDir) {
+      let parts = str.replace(/(\/$|^\/)/, "").split("/");
       if (parts.length <= 2) {
-        return "/";
+        if (isDir) {
+          return "/"
+        }
+        return "";
       }
       parts.pop();
       parts = parts.join("/") + "/";
-      if (str.endsWith("/")) {
-        parts = "/" + parts;
+      if (isDir) {
+        parts = "/" + parts; // fix weird rtl thing
       }
       return parts;
     },
@@ -623,7 +694,6 @@ export default {
         return false;
       }
       this.searchTypes = this.searchTypes + string + " ";
-
     },
     resetSearchFilters() {
       this.searchTypes = "";

frontend/src/components/Sidebar.vue

@@ -1,59 +1,99 @@
 <template>
-  <nav :class="{ active }">
+  <nav :class="{ active, 'dark-mode': isDarkMode }">
     <template v-if="isLogged">
-      <button class="action" @click="toRoot" :aria-label="$t('sidebar.myFiles')" :title="$t('sidebar.myFiles')">
+      <button
+        class="action"
+        @click="toRoot"
+        :aria-label="$t('sidebar.myFiles')"
+        :title="$t('sidebar.myFiles')"
+      >
         <i class="material-icons">folder</i>
         <span>{{ $t("sidebar.myFiles") }}</span>
       </button>
       <div v-if="user.perm.create">
-        <button @click="$store.commit('showHover', 'newDir')" class="action" :aria-label="$t('sidebar.newFolder')"
-          :title="$t('sidebar.newFolder')">
+        <button
+          @click="$store.commit('showHover', 'newDir')"
+          class="action"
+          :aria-label="$t('sidebar.newFolder')"
+          :title="$t('sidebar.newFolder')"
+        >
           <i class="material-icons">create_new_folder</i>
           <span>{{ $t("sidebar.newFolder") }}</span>
         </button>
-        <button @click="$store.commit('showHover', 'newFile')" class="action" :aria-label="$t('sidebar.newFile')"
-          :title="$t('sidebar.newFile')">
+        <button
+          @click="$store.commit('showHover', 'newFile')"
+          class="action"
+          :aria-label="$t('sidebar.newFile')"
+          :title="$t('sidebar.newFile')"
+        >
           <i class="material-icons">note_add</i>
           <span>{{ $t("sidebar.newFile") }}</span>
         </button>
-        <button id="upload-button" @click="upload($event)" class="action" >
+        <button id="upload-button" @click="upload($event)" class="action">
           <i class="material-icons">file_upload</i>
           <span>Upload file</span>
         </button>
       </div>
       <div>
-        <button class="action" @click="toSettings" :aria-label="$t('sidebar.settings')" :title="$t('sidebar.settings')">
+        <button
+          class="action"
+          @click="toSettings"
+          :aria-label="$t('sidebar.settings')"
+          :title="$t('sidebar.settings')"
+        >
           <i class="material-icons">settings_applications</i>
           <span>{{ $t("sidebar.settings") }}</span>
         </button>
 
-        <button v-if="canLogout" @click="logout" class="action" id="logout" :aria-label="$t('sidebar.logout')"
-          :title="$t('sidebar.logout')">
+        <button
+          v-if="canLogout"
+          @click="logout"
+          class="action"
+          id="logout"
+          :aria-label="$t('sidebar.logout')"
+          :title="$t('sidebar.logout')"
+        >
           <i class="material-icons">exit_to_app</i>
           <span>{{ $t("sidebar.logout") }}</span>
         </button>
       </div>
     </template>
     <template v-else>
-      <router-link class="action" to="/login" :aria-label="$t('sidebar.login')" :title="$t('sidebar.login')">
+      <router-link
+        class="action"
+        to="/login"
+        :aria-label="$t('sidebar.login')"
+        :title="$t('sidebar.login')"
+      >
         <i class="material-icons">exit_to_app</i>
         <span>{{ $t("sidebar.login") }}</span>
       </router-link>
-      <router-link v-if="signup" class="action" to="/login" :aria-label="$t('sidebar.signup')"
-        :title="$t('sidebar.signup')">
+      <router-link
+        v-if="signup"
+        class="action"
+        to="/login"
+        :aria-label="$t('sidebar.signup')"
+        :title="$t('sidebar.signup')"
+      >
         <i class="material-icons">person_add</i>
         <span>{{ $t("sidebar.signup") }}</span>
       </router-link>
     </template>
-    <div class="credits" v-if="$router.currentRoute.path.includes('/files/') && !disableUsedPercentage
-      ">
+    <div
+      class="credits"
+      v-if="$router.currentRoute.path.includes('/files/') && !disableUsedPercentage"
+    >
       <progress-bar :val="usage.usedPercentage" size="medium"></progress-bar>
-      <span style="text-align:center">{{ usage.usedPercentage }}%</span>
+      <span style="text-align: center">{{ usage.usedPercentage }}%</span>
       <span>{{ usage.used }} of {{ usage.total }} used</span>
-      <br>
+      <br />
       <span v-if="disableExternal">File Browser</span>
       <span v-else>
-        <a rel="noopener noreferrer" target="_blank" href="https://github.com/gtsteffaniak/filebrowser">
+        <a
+          rel="noopener noreferrer"
+          target="_blank"
+          href="https://github.com/gtsteffaniak/filebrowser"
+        >
           File Browser
         </a>
       </span>
@@ -79,6 +119,7 @@ import {
 import { files as api } from "@/api";
 import ProgressBar from "vue-simple-progress";
 import prettyBytes from "pretty-bytes";
+import { darkMode } from "@/utils/constants";
 
 export default {
   name: "sidebar",
@@ -87,6 +128,9 @@ export default {
   },
   computed: {
     ...mapState(["user"]),
+    isDarkMode() {
+      return this.user && Object.prototype.hasOwnProperty.call(this.user, "darkMode") ? this.user.darkMode : darkMode;
+    },
     ...mapGetters(["isLogged"]),
     active() {
       return this.$store.state.show === "sidebar";
@@ -127,11 +171,11 @@ export default {
   },
   methods: {
     toRoot() {
-      this.$router.push({ path: "/files/" }, () => { });
+      this.$router.push({ path: "/files/" }, () => {});
       this.$store.commit("closeHovers");
     },
     toSettings() {
-      this.$router.push({ path: "/settings" }, () => { });
+      this.$router.push({ path: "/settings" }, () => {});
       this.$store.commit("closeHovers");
     },
     help() {

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/ViewMode.vue

@@ -0,0 +1,24 @@
+<template>
+  <select v-on:change="change" :value="viewMode">
+    <option v-for="mode in viewModes" :key="mode" :value="mode">
+      {{ mode }}
+    </option>
+  </select>
+</template>
+
+<script>
+export default {
+  name: "ViewMode",
+  props: ["viewMode"],
+  data() {
+    return {
+      viewModes: ['list', 'compact', 'normal', 'gallery'],
+    };
+  },
+  methods: {
+    change(event) {
+      this.$emit("update:viewMode", event.target.value);
+    },
+  },
+};
+</script>

frontend/src/css/_buttons.css

@@ -2,7 +2,7 @@
   outline: 0;
   border: 0;
   padding: .5em 1em;
-  border-radius: .1em;
+  border-radius: 1em;
   cursor: pointer;
   background: var(--blue);
   color: white;

frontend/src/css/_inputs.css

@@ -1,5 +1,5 @@
 .input {
-  border-radius: .1em;
+  border-radius: 1em;
   padding: .5em 1em;
   background: white;
   border: 1px solid rgba(0, 0, 0, 0.1);

frontend/src/css/_share.css

@@ -14,7 +14,7 @@
 .share__box {
   box-shadow: rgba(0, 0, 0, 0.06) 0px 1px 3px, rgba(0, 0, 0, 0.12) 0px 1px 2px;
   background: #fff;
-  border-radius: 0.2em;
+  border-radius: 1em;
   margin: 5px;
   overflow: hidden;
 }

frontend/src/css/base.css

@@ -203,6 +203,7 @@ body.rtl .breadcrumbs a {
   width: 95%;
   max-width: 30em;
   z-index: 1;
+  border-radius: 1em;
 }
 
 button {

frontend/src/css/dark.css

@@ -0,0 +1,279 @@
+/* Define a class .dark-mode for dark mode styles */
+.dark-mode {
+  --background: #141D24;
+  --surfacePrimary: #20292F;
+  --surfaceSecondary: #3A4147;
+  --divider: rgba(255, 255, 255, 0.12);
+  --textPrimary: rgba(255, 255, 255, 0.87);
+  --textSecondary: rgba(255, 255, 255, 0.6);
+}
+
+.dark-mode #loading {
+  background: var(--background);
+}
+
+.dark-mode #login {
+  background: var(--background);
+}
+/* Loading */
+.dark-mode #loading {
+  background: var(--background);
+}
+
+/* Login */
+.dark-mode #login {
+  background: var(--background);
+}
+
+#search.dark-mode input {
+  color:white
+}
+
+#search.active.dark-mode #input {
+  border-color: white;
+}
+/* Search input */
+.dark-mode #search #input {
+  background: var(--surfaceSecondary);
+  border-color: var(--surfaceSecondary);
+}
+
+.dark-mode #search #input input::placeholder {
+  color: var(--textSecondary);
+}
+
+/* Active Search input */
+.dark-mode #search.active #input {
+  background: var(--surfacePrimary);
+  border-color: white;
+}
+
+.dark-mode #search.active input {
+  color: var(--textPrimary);
+}
+
+/* Search result */
+.dark-mode #search #result {
+  background: var(--background);
+  color: var(--textPrimary);
+}
+
+/* Search boxes */
+.dark-mode #search .boxes h3 {
+  color: var(--textPrimary);
+}
+
+/* Action */
+.dark-mode .action {
+  color: var(--textPrimary) !important;
+}
+
+.dark-mode .action:hover {
+  background-color: rgba(255, 255, 255, .1);
+}
+
+/* Action counter */
+.dark-mode .action .counter {
+  border-color: var(--surfacePrimary);
+}
+
+/* Navigation */
+.dark-mode nav > div {
+  border-color: var(--divider);
+}
+
+/* Breadcrumbs */
+.dark-mode .breadcrumbs {
+  border-color: var(--divider);
+  color: var(--textPrimary) !important;
+}
+
+.dark-mode .breadcrumbs span {
+  color: var(--textPrimary) !important;
+}
+
+.dark-mode .breadcrumbs a:hover {
+  background-color: rgba(255, 255, 255, .1);
+}
+
+/* Listing items */
+.dark-mode #listing .item {
+  background: var(--surfacePrimary);
+  color: var(--textPrimary);
+  border-color: var(--divider) !important;
+}
+
+/* Listing item modified text */
+.dark-mode #listing .item .modified {
+  color: var(--textSecondary);
+}
+
+/* Listing header and span */
+.dark-mode #listing h2,
+.dark-mode #listing.list .header span {
+  color: var(--textPrimary) !important;
+}
+
+/* Message */
+.dark-mode .message {
+  color: var(--textPrimary);
+}
+
+/* Card */
+.dark-mode .card {
+  background: var(--surfacePrimary);
+  color: var(--textPrimary);
+}
+
+/* Flat button hover */
+.dark-mode .button--flat:hover {
+  background: var(--surfaceSecondary);
+}
+
+/* Dashboard navigation */
+.dark-mode .dashboard #nav ul li {
+  color: var(--textSecondary);
+}
+
+.dark-mode .dashboard #nav ul li:hover {
+  background: var(--surfaceSecondary);
+}
+#search.active.dark-mode #result {
+  background-color: black;
+}
+/* Result list */
+.dark-mode #result-list {
+  background-color: var(--surfacePrimary);
+  color:white;
+}
+
+/* Card, Dashboard navigation, and label */
+.dark-mode .card h3,
+.dark-mode .dashboard #nav,
+.dark-mode .dashboard p label {
+  color: var(--textPrimary);
+}
+
+.dark-mode .card#share input,
+.dark-mode .card#share select,
+.dark-mode .input {
+  background: var(--surfaceSecondary);
+  color: var(--textPrimary);
+}
+
+/* Input hover and focus */
+.dark-mode .input:hover,
+.dark-mode .input:focus {
+  border-color: rgba(255, 255, 255, 0.15);
+}
+
+/* Red input */
+.dark-mode .input--red {
+  background: #73302D;
+}
+
+/* Green input */
+.dark-mode .input--green {
+  background: #147A41;
+}
+
+/* Collapsible and label */
+.dark-mode .dashboard #nav .wrapper,
+.dark-mode .collapsible {
+  border-color: var(--divider);
+}
+
+.dark-mode .collapsible > label * {
+  color: var(--textPrimary);
+}
+
+/* Table header */
+.dark-mode table th {
+  color: var(--textSecondary);
+}
+
+/* File list item */
+.dark-mode .file-list li:hover {
+  background: var(--surfaceSecondary);
+}
+
+.dark-mode .file-list li:before {
+  color: var(--textSecondary);
+}
+
+/* Shell */
+.dark-mode .shell {
+  background: var(--surfacePrimary);
+  color: var(--textPrimary);
+}
+
+/* Shell result */
+.dark-mode .shell__result {
+  border-top: 1px solid var(--divider);
+}
+
+/* Editor container */
+.dark-mode #editor-container {
+  background: var(--background);
+}
+
+.dark-mode #editor-container .bar {
+  background: var(--surfacePrimary);
+}
+
+/* Navigation */
+.dark-mode nav {
+  background: var(--surfaceSecondary) !important;
+}
+
+/* File selection */
+.dark-mode #file-selection {
+  background: var(--surfaceSecondary) !important;
+}
+
+.dark-mode #file-selection span {
+  color: var(--textPrimary) !important;
+}
+
+/* Dropdown */
+.dark-mode #dropdown {
+  background: var(--surfaceSecondary) !important;
+}
+
+/* Share box */
+.dark-mode .share__box {
+  background: var(--surfacePrimary) !important;
+  color: var(--textPrimary);
+}
+
+/* Share box element */
+.dark-mode .share__box__element {
+  border-top-color: var(--divider);
+}
+
+/* Help button */
+.dark-mode .helpButton {
+  background: var(--background);
+}
+
+/* Size input wrapper */
+.dark-mode .sizeInputWrapper {
+  background: var(--background);
+  color: white;
+}
+
+/* Button group button */
+.dark-mode .button-group button {
+  background: var(--background);
+  color: white;
+}
+
+/* Result desktop */
+.dark-mode #result-desktop #result-list {
+  max-height: unset;
+}
+
+/* Result desktop background */
+.dark-mode #result-desktop {
+  background-color: var(--background);
+}

frontend/src/css/dashboard.css

@@ -166,6 +166,7 @@ table tr>*:last-child {
   border-radius: 2px;
   box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12), 0 3px 1px -2px rgba(0, 0, 0, 0.2);
   overflow: auto;
+  border-radius: 1em;
 }
 
 .card.floating {
@@ -459,7 +460,7 @@ body.rtl .card .card-title>*:first-child {
 .card .card-action.full .action {
   flex: 1;
   padding: 2em;
-  border-radius: 0.2em;
+  border-radius: 1em;
   border: 1px solid rgba(0, 0, 0, 0.1);
   text-align: center;
 }

frontend/src/css/listing.css

@@ -85,41 +85,52 @@ body.rtl #listing {
   display: block;
 }
 
-#listing.mosaic {
+#listing {
   padding-top: 1em;
   margin: 0 -0.5em;
 }
 
-#listing.mosaic .item {
-  width: calc(33% - 1em);
+#listing.gallery .item,
+#listing.compact .item,
+#listing.normal .item,
+#listing.list .item {
+  max-width: 300px;
   margin: .5em;
   padding: 0.5em;
-  border-radius: 0.2em;
+  border-radius: 1em;
   box-shadow: 0 1px 3px rgba(0, 0, 0, .06), 0 1px 2px rgba(0, 0, 0, .12);
 }
+#listing.gallery .item {
+  max-width: 300px;
+}
+#listing.list .item,
+#listing.compact .item {
+  max-width: 100%;
+  border-radius: 0em;
+}
 
-#listing.mosaic .item:hover {
+#listing .item:hover {
   box-shadow: 0 1px 3px rgba(0, 0, 0, .12), 0 1px 2px rgba(0, 0, 0, .24) !important;
 }
 
-#listing.mosaic .header {
+#listing .header {
   display: none;
 }
 
-#listing.mosaic .item div:first-of-type {
+#listing .item div:first-of-type {
   width: 5em;
 }
 
-#listing.mosaic .item div:last-of-type {
+#listing .item div:last-of-type {
   width: calc(100% - 5vw);
 }
 
-#listing.mosaic.gallery .item div:first-of-type {
+#listing.gallery .item div:first-of-type {
   width: 100%;
   height: 12em;
 }
 
-#listing.mosaic.gallery .item div:last-of-type {
+#listing.gallery .item div:last-of-type {
   position: absolute;
   bottom: 0.5em;
   padding: 1em;
@@ -127,19 +138,19 @@ body.rtl #listing {
   text-align: center;
 }
 
-#listing.mosaic.gallery .item[data-type=image] div:last-of-type {
+#listing.gallery .item[data-type=image] div:last-of-type {
   color: white;
   background: linear-gradient(#0000, #0009);
 }
 
-#listing.mosaic.gallery .item i {
+#listing.gallery .item i {
     width: 100%;
     margin-right: 0;
     font-size: 8em;
     text-align: center;
 }
 
-#listing.mosaic.gallery .item img {
+#listing.gallery .item img {
   width: 100%;
   height: 100%;
 }
@@ -149,6 +160,109 @@ body.rtl #listing {
   display: none;
 }
 
+#listing.compact {
+  flex-direction: column;
+  width: 100%;
+  max-width: 100%;
+  margin: 0;
+}
+
+#listing.compact .item {
+  width: 100%;
+  margin: 0;
+  border: 1px solid rgba(0, 0, 0, 0.1);
+  padding: 0;
+  border-top: 0;
+}
+
+#listing.compact h2 {
+  display: none;
+}
+
+#listing.compact .item div:first-of-type {
+  width: 3em;
+}
+
+#listing.compact .item div:first-of-type i {
+  font-size: 2em;
+}
+
+#listing.compact .item div:first-of-type img {
+  width: 2em;
+  height: 2em;
+}
+
+#listing.compact .item div:last-of-type {
+  width: calc(100% - 3em);
+  display: flex;
+  align-items: center;
+}
+
+#listing.compact .item .name {
+  width: 50%;
+}
+
+#listing.compact .item .size {
+  width: 25%;
+}
+
+#listing.compact .header i {
+  font-size: 1.5em;
+  vertical-align: middle;
+  margin-left: .2em;
+}
+
+#listing.compact .header {
+  display: flex !important;
+  background: var(--surfacePrimary);
+  z-index: 999;
+  padding: .85em;
+  border: 0;
+  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
+}
+
+#listing.compact .header>div:first-child {
+  width: 0;
+}
+
+#listing.compact .header .name {
+  margin-right: 3em;
+}
+
+#listing.compact .header a {
+  color: inherit;
+}
+
+#listing.compact .header>div:first-child {
+  width: 0;
+}
+
+#listing.compact .name {
+  font-weight: normal;
+}
+
+#listing.compact .header .name {
+  margin-right: 3em;
+}
+
+#listing.compact .header span {
+  vertical-align: middle;
+}
+
+#listing.compact .header i {
+  opacity: 0;
+  transition: .1s ease all;
+}
+
+#listing.compact .header p:hover i,
+#listing.compact .header .active i {
+  opacity: 1;
+}
+
+#listing.compact .header .active {
+  font-weight: bold;
+}
+
 #listing.list {
   flex-direction: column;
   width: 100%;
@@ -160,14 +274,10 @@ body.rtl #listing {
   width: 100%;
   margin: 0;
   border: 1px solid rgba(0, 0, 0, 0.1);
-  padding: 0;
+  padding: .5em;
   border-top: 0;
 }
 
-#listing.list h2 {
-  display: none;
-}
-
 #listing .item[aria-selected=true] {
   background: var(--blue) !important;
   color: var(--item-selected) !important;
@@ -200,7 +310,7 @@ body.rtl #listing {
   width: 25%;
 }
 
-#listing .item.header {
+#listing .header {
   display: none !important;
   background-color: #ccc;
 }
@@ -211,20 +321,34 @@ body.rtl #listing {
   margin-left: .2em;
 }
 
-#listing.list .item.header {
+#listing.compact .header,
+#listing.list .header {
   display: flex !important;
-  background: #fafafa;
+  background: var(--surfacePrimary);
+  border-top-left-radius: 1em;
+  border-top-right-radius: 1em;
   z-index: 999;
   padding: .85em;
+  width:100%;
   border: 0;
   border-bottom: 1px solid rgba(0, 0, 0, 0.1);
 }
+#listing.list .item:first-child {
+  margin-top: .5em;
+  border-top-left-radius: 1em;
+  border-top-right-radius: 1em;
+}
 
-#listing.list .item.header>div:first-child {
+#listing.list .item:last-child  {
+  margin-bottom: .5em;
+   border-bottom-left-radius: 1em;
+   border-bottom-right-radius: 1em;
+}
+#listing.list .header>div:first-child {
   width: 0;
 }
 
-#listing.list .item.header .name {
+#listing.list .header .name {
   margin-right: 3em;
 }
 
@@ -232,7 +356,7 @@ body.rtl #listing {
   color: inherit;
 }
 
-#listing.list .item.header>div:first-child {
+#listing.list .header>div:first-child {
   width: 0;
 }
 
@@ -240,7 +364,7 @@ body.rtl #listing {
   font-weight: normal;
 }
 
-#listing.list .item.header .name {
+#listing.list .header .name {
   margin-right: 3em;
 }
 
@@ -258,7 +382,7 @@ body.rtl #listing {
   opacity: 1;
 }
 
-#listing.list .item.header .active {
+#listing.list .header .active {
   font-weight: bold;
 }
 

frontend/src/css/login.css

@@ -1,5 +1,5 @@
 #login {
-  background: #fff;
+  background: var(--background);
   position: fixed;
   top: 0;
   left: 0;

frontend/src/css/mobile.css

@@ -7,14 +7,14 @@
 }
 
 @media (max-width: 800px) {
+  #listing.list .item div:last-of-type{
+    display:block;
+    width:100%;
+  }
   body {
     padding-bottom: 5em;
   }
 
-  #listing.list .item .size {
-    display: none;
-  }
-
   #listing.list .item .name {
     width: 60%;
   }
@@ -36,7 +36,9 @@
   #listing {
     margin-bottom: 5em;
   }
-
+  #listing .item {
+    min-width: 100%
+  }
   body.rtl #listing {
     margin-right: unset;
   }
@@ -117,9 +119,6 @@
 
 
 @media (max-width: 450px) {
-  #listing.list .item .modified {
-    display: none;
-  }
 
   #listing.list .item .name {
     width: 100%;

frontend/src/utils/auth.js

@@ -11,9 +11,7 @@ export function parseToken(token) {
   }
 
   const data = JSON.parse(Base64.decode(parts[1]));
-
   document.cookie = `auth=${token}; path=/`;
-
   localStorage.setItem("jwt", token);
   store.commit("setJWT", token);
   store.commit("setSession", generateRandomCode(8));
@@ -40,7 +38,6 @@ export async function login(username, password, recaptcha) {
     },
     body: JSON.stringify(data),
   });
-
   const body = await res.text();
 
   if (res.status === 200) {

frontend/src/utils/constants.js

@@ -3,20 +3,21 @@ const disableExternal = window.FileBrowser.DisableExternal;
 const disableUsedPercentage = window.FileBrowser.DisableUsedPercentage;
 const baseURL = window.FileBrowser.BaseURL;
 const staticURL = window.FileBrowser.StaticURL;
+const darkMode = window.FileBrowser.darkMode;
 const recaptcha = window.FileBrowser.ReCaptcha;
 const recaptchaKey = window.FileBrowser.ReCaptchaKey;
 const signup = window.FileBrowser.Signup;
 const version = window.FileBrowser.Version;
-const logoURL = `${staticURL}/img/logo.svg`;
+const logoURL = `${staticURL}/img/logo.png`;
 const noAuth = window.FileBrowser.NoAuth;
 const authMethod = window.FileBrowser.AuthMethod;
 const loginPage = window.FileBrowser.LoginPage;
-const theme = window.FileBrowser.Theme;
 const enableThumbs = window.FileBrowser.EnableThumbs;
 const resizePreview = window.FileBrowser.ResizePreview;
 const enableExec = window.FileBrowser.EnableExec;
 const origin = window.location.origin;
 
+console.log(window.FileBrowser)
 export {
   name,
   disableExternal,
@@ -30,9 +31,9 @@ export {
   noAuth,
   authMethod,
   loginPage,
-  theme,
   enableThumbs,
   resizePreview,
   enableExec,
   origin,
+  darkMode
 };

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

@@ -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

@@ -3,35 +3,35 @@
     <div v-if="progress" class="progress">
       <div v-bind:style="{ width: this.progress + '%' }"></div>
     </div>
-    <listingBar v-if="currentView === 'listing'"></listingBar>
-    <editorBar v-else-if="currentView === 'editor'"></editorBar>
-    <defaultBar v-else></defaultBar>
+    <listingBar :class="{ 'dark-mode-header': isDarkMode }" v-if="currentView === 'listing'"></listingBar>
+    <editorBar :class="{ 'dark-mode-header': isDarkMode }" v-else-if="currentView === 'editor'"></editorBar>
+    <defaultBar :class="{ 'dark-mode-header': isDarkMode }" v-else></defaultBar>
     <sidebar></sidebar>
-    <main>
+    <main :class="{ 'dark-mode': isDarkMode }">
       <router-view></router-view>
     </main>
-    <prompts></prompts>
+    <prompts :class="{ 'dark-mode': isDarkMode }"></prompts>
     <upload-files></upload-files>
   </div>
 </template>
 
 <script>
-import editorBar from "./bars/EditorBar.vue"
-import defaultBar from "./bars/Default.vue"
-import listingBar from "./bars/ListingBar.vue"
+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";
 import { enableExec } from "@/utils/constants";
+import { darkMode } from "@/utils/constants";
+
 export default {
   name: "layout",
   components: {
     defaultBar,
     editorBar,
     listingBar,
-    Action,
     Sidebar,
     Prompts,
     UploadFiles,
@@ -47,7 +47,9 @@ export default {
   computed: {
     ...mapGetters(["isLogged", "progress", "isListing"]),
     ...mapState(["req", "user", "state"]),
-
+    isDarkMode() {
+      return this.user && Object.prototype.hasOwnProperty.call(this.user, "darkMode") ? this.user.darkMode : darkMode;
+    },
     isExecEnabled: () => enableExec,
     currentView() {
       if (this.req.type == undefined) {
@@ -56,10 +58,7 @@ export default {
 
       if (this.req.isDir) {
         return "listing";
-      } else if (
-        this.req.type === "text" ||
-        this.req.type === "textImmutable"
-      ) {
+      } else if (this.req.type === "text" || this.req.type === "textImmutable") {
         return "editor";
       } else {
         return "preview";
@@ -75,12 +74,34 @@ export default {
   },
   methods: {
     getTitle() {
-      let title = "Title"
-      if (this.$route.path.startsWith('/settings/')) {
-        title = "Settings"
+      let title = "Title";
+      if (this.$route.path.startsWith("/settings/")) {
+        title = "Settings";
       }
-      return title
+      return title;
     },
   },
 };
-</script>
+</script>
+
+<style>
+/* Use the class .dark-mode to apply styles conditionally */
+.dark-mode {
+  background: var(--background);
+  color: var(--textPrimary);
+}
+
+/* Header */
+.dark-mode-header {
+  color:white;
+  background: var(--surfacePrimary);
+}
+
+/* Header with backdrop-filter support */
+@supports (backdrop-filter: none) {
+  .dark-mode-header {
+    background: transparent;
+    backdrop-filter: blur(16px) invert(0.1);
+  }
+}
+</style>

frontend/src/views/Login.vue

@@ -1,5 +1,5 @@
 <template>
-  <div id="login" :class="{ recaptcha: recaptcha }">
+  <div id="login" :class="{ recaptcha: recaptcha, 'dark-mode': isDarkMode }">
     <form @submit="submit">
       <img :src="logoURL" alt="File Browser" />
       <h1>{{ name }}</h1>
@@ -51,6 +51,7 @@ import {
   recaptcha,
   recaptchaKey,
   signup,
+  darkMode,
 } from "@/utils/constants";
 
 export default {
@@ -59,6 +60,9 @@ export default {
     signup: () => signup,
     name: () => name,
     logoURL: () => logoURL,
+    isDarkMode() {
+      return darkMode === true
+    },
   },
   data: function () {
     return {

frontend/src/views/Settings.vue

@@ -1,7 +1,7 @@
 <template>
   <div class="dashboard">
     <div id="nav">
-      <div class="wrapper">
+      <div v-if="settingsEnabled" class="wrapper">
         <ul>
           <router-link to="/settings/profile"
             ><li :class="{ active: $route.path === '/settings/profile' }">
@@ -57,7 +57,10 @@ export default {
     this.$store.commit("updateRequest", { name: "Settings" });
   },
   computed: {
-    ...mapState(["user", "loading","req"]),
+    ...mapState(["user", "loading"]),
+    settingsEnabled() {
+      return this.user.disableSettings == false;
+    },
   },
 };
-</script>
+</script>

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",
   components: {
     HeaderBar,
     Action,
-    Search,
-    Item,
   },
   data: function () {
     return {
@@ -44,6 +38,7 @@ export default {
       dragCounter: 0,
       width: window.innerWidth,
       itemWeight: 0,
+      viewModes: ['list', 'compact', 'normal', 'gallery'],
     };
   },
   computed: {
@@ -112,8 +107,9 @@ export default {
     viewIcon() {
       const icons = {
         list: "view_module",
-        mosaic: "grid_view",
-        "mosaic gallery": "view_list",
+        compact: "view_module",
+        normal: "grid_view",
+        gallery: "view_list",
       };
       return icons[this.user.viewMode];
     },
@@ -166,7 +162,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);
@@ -265,21 +261,14 @@ export default {
     },
     switchView: async function () {
       this.$store.commit("closeHovers");
-      const modes = {
-        list: "mosaic",
-        mosaic: "mosaic gallery",
-        "mosaic gallery": "list",
-      };
-
+      const currentIndex = this.viewModes.indexOf(this.user.viewMode);
+      const nextIndex = (currentIndex + 1) % this.viewModes.length;
       const data = {
         id: this.user.id,
-        viewMode: modes[this.user.viewMode] || "list",
+        viewMode: this.viewModes[nextIndex],
       };
-      //users.update(data, ["viewMode"]).catch(this.$showError);
+      users.update(data, ["viewMode"]).catch(this.$showError);
       this.$store.commit("updateUser", data);
-
-      //this.setItemWeight();
-      //this.fillWindow();
     },
     preventDefault(event) {
       // Wrapper around prevent default.
@@ -381,7 +370,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(["#listing .item", "#listing .item"]);
       if (columns === 0) columns = 1;
       items.style.width = `calc(${100 / columns}% - 1em)`;
     },
@@ -589,7 +578,6 @@ export default {
       }
       this.$store.commit("updateRequest", {});
       let uri = url.removeLastDir(this.$route.path) + "/";
-      console.log(url)
       this.$router.push({ path: uri });
     },
     upload: function () {

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,13 +30,11 @@ 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",
@@ -44,7 +42,6 @@ export default {
     HeaderBar,
     Action,
     Search,
-    Item,
   },
   data: function () {
     return {
@@ -53,6 +50,7 @@ export default {
       dragCounter: 0,
       width: window.innerWidth,
       itemWeight: 0,
+      viewModes: ['list', 'compact', 'normal', 'gallery'],
     };
   },
   computed: {
@@ -118,8 +116,9 @@ export default {
     viewIcon() {
       const icons = {
         list: "view_module",
-        mosaic: "grid_view",
-        "mosaic gallery": "view_list",
+        compact: "view_module",
+        normal: "grid_view",
+        gallery: "view_list",
       };
       return icons[this.user.viewMode];
     },
@@ -172,7 +171,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);
@@ -271,21 +270,14 @@ export default {
     },
     switchView: async function () {
       this.$store.commit("closeHovers");
-      const modes = {
-        list: "mosaic",
-        mosaic: "mosaic gallery",
-        "mosaic gallery": "list",
-      };
-
+      const currentIndex = this.viewModes.indexOf(this.user.viewMode);
+      const nextIndex = (currentIndex + 1) % this.viewModes.length;
       const data = {
         id: this.user.id,
-        viewMode: modes[this.user.viewMode] || "list",
+        viewMode: this.viewModes[nextIndex],
       };
-      //users.update(data, ["viewMode"]).catch(this.$showError);
+      users.update(data, ["viewMode"]).catch(this.$showError);
       this.$store.commit("updateUser", data);
-
-      //this.setItemWeight();
-      //this.fillWindow();
     },
     preventDefault(event) {
       // Wrapper around prevent default.
@@ -387,7 +379,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(["#listing .item", "#listing .item"]);
       if (columns === 0) columns = 1;
       items.style.width = `calc(${100 / columns}% - 1em)`;
     },

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="listing" ref="listing" :class="listingViewMode + ' file-icons'">
         <div>
           <div class="item header">
             <div></div>
@@ -132,8 +132,11 @@
             </div>
           </div>
         </div>
-
-        <h2 v-if="req.numDirs > 0">{{ $t("files.folders") }}</h2>
+        <div v-if="req.numDirs > 0">
+          <div class="header-items">
+            <h2>{{ $t("files.folders") }}</h2>
+          </div>
+        </div>
         <div v-if="req.numDirs > 0">
           <item
             v-for="item in dirs"
@@ -150,7 +153,11 @@
           </item>
         </div>
 
-        <h2 v-if="req.numFiles > 0">{{ $t("files.files") }}</h2>
+        <div v-if="req.numFiles > 0">
+          <div class="header-items">
+            <h2>{{ $t("files.files") }}</h2>
+          </div>
+        </div>
         <div v-if="req.numFiles > 0">
           <item
             v-for="item in files"
@@ -201,11 +208,19 @@
   </div>
 </template>
 
+<style>
+
+.header-items {
+  width: 100% !important;
+  max-width: 100% !important;
+  justify-content: center;
+}
+</style>
+
 <script>
 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";
@@ -291,11 +306,15 @@ export default {
     viewIcon() {
       const icons = {
         list: "view_module",
-        mosaic: "grid_view",
-        "mosaic gallery": "view_list",
+        compact: "view_module",
+        normal: "grid_view",
+        gallery: "view_list",
       };
       return icons[this.user.viewMode];
     },
+    listingViewMode() {
+      return this.user.viewMode
+    },
     headerButtons() {
       return {
         select: this.selectedCount > 0,
@@ -345,7 +364,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 +547,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(["#listing .item", "#listing .item"]);
       if (columns === 0) columns = 1;
       items.style.width = `calc(${100 / columns}% - 1em)`;
     },

frontend/src/views/files/Preview.vue

@@ -4,7 +4,7 @@
     @mousemove="toggleNavigation"
     @touchstart="toggleNavigation"
   >
-    <div class="loading delayed" v-if="loading">
+    <div class="loading delayed" :class="{ 'dark-mode': isDarkMode }" v-if="loading">
       <div class="spinner">
         <div class="bounce1"></div>
         <div class="bounce2"></div>
@@ -103,11 +103,9 @@
 <script>
 import { mapState } from "vuex";
 import { files as api } from "@/api";
-import { resizePreview } from "@/utils/constants";
+import { resizePreview, darkMode } 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 () {
@@ -136,6 +132,9 @@ export default {
   },
   computed: {
     ...mapState(["req", "user", "oldReq", "jwt", "loading", "show"]),
+    isDarkMode() {
+      return this.user && Object.prototype.hasOwnProperty.call(this.user, "darkMode") ? this.user.darkMode : darkMode;
+    },
     hasPrevious() {
       return this.previousLink !== "";
     },
@@ -176,7 +175,7 @@ export default {
     this.listing = this.oldReq.items;
     this.updatePreview();
   },
-  beforeDestroy() {
+  beforeUnmount() {
     window.removeEventListener("keydown", this.key);
   },
   methods: {

frontend/src/views/settings/Global.vue

@@ -71,15 +71,6 @@
             {{ $t("settings.disableUsedDiskPercentage") }}
           </p>
 
-          <p>
-            <label for="theme">{{ $t("settings.themes.title") }}</label>
-            <themes
-              class="input input--block"
-              :theme.sync="settings.frontend.theme"
-              id="theme"
-            ></themes>
-          </p>
-
           <p>
             <label for="branding-name">{{ $t("settings.instanceName") }}</label>
             <input
@@ -194,13 +185,11 @@ import { settings as api } from "@/api";
 import { enableExec } from "@/utils/constants";
 import UserForm from "@/components/settings/UserForm";
 import Rules from "@/components/settings/Rules";
-import Themes from "@/components/settings/Themes";
 import Errors from "@/views/Errors";
 
 export default {
   name: "settings",
   components: {
-    Themes,
     UserForm,
     Rules,
     Errors,

frontend/src/views/settings/Profile.vue

@@ -7,6 +7,10 @@
         </div>
 
         <div class="card-content">
+          <p>
+            <input type="checkbox" v-model="darkMode" />
+            Dark Mode
+          </p>
           <p>
             <input type="checkbox" v-model="hideDotfiles" />
             {{ $t("settings.hideDotfiles") }}
@@ -19,6 +23,11 @@
             <input type="checkbox" v-model="dateFormat" />
             {{ $t("settings.setDateFormat") }}
           </p>
+          <h3>Listing View Style</h3>
+          <ViewMode
+            class="input input--block"
+            :viewMode.sync="viewMode"
+          ></ViewMode>
           <h3>{{ $t("settings.language") }}</h3>
           <languages
             class="input input--block"
@@ -75,11 +84,13 @@
 import { mapState, mapMutations } from "vuex";
 import { users as api } from "@/api";
 import Languages from "@/components/settings/Languages";
+import ViewMode from "@/components/settings/ViewMode";
 import i18n, { rtlLanguages } from "@/i18n";
 
 export default {
   name: "settings",
   components: {
+    ViewMode,
     Languages,
   },
   data: function () {
@@ -89,6 +100,8 @@ export default {
       hideDotfiles: false,
       singleClick: false,
       dateFormat: false,
+      darkMode: false,
+      viewMode: "list",
       locale: "",
     };
   },
@@ -109,8 +122,14 @@ export default {
     },
   },
   created() {
+    if (typeof this.user.darkMode === 'undefined') {
+      this.darkMode = false;
+    } else {
+      this.darkMode = this.user.darkMode
+    }
     this.setLoading(false);
     this.locale = this.user.locale;
+    this.viewMode = this.user.viewMode;
     this.hideDotfiles = this.user.hideDotfiles;
     this.singleClick = this.user.singleClick;
     this.dateFormat = this.user.dateFormat;
@@ -135,11 +154,12 @@ export default {
     },
     async updateSettings(event) {
       event.preventDefault();
-
       try {
         const data = {
           id: this.user.id,
           locale: this.locale,
+          darkMode: this.darkMode,
+          viewMode: this.viewMode,
           hideDotfiles: this.hideDotfiles,
           singleClick: this.singleClick,
           dateFormat: this.dateFormat,
@@ -149,6 +169,8 @@ export default {
           rtlLanguages.includes(i18n.locale);
         await api.update(data, [
           "locale",
+          "darkMode",
+          "viewMode",
           "hideDotfiles",
           "singleClick",
           "dateFormat",

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

@@ -37,7 +37,7 @@
       </form>
     </div>
 
-    <div v-if="$store.state.show === 'deleteUser'" class="card floating">
+    <div v-if="showDeletePrompt" class="card floating">
       <div class="card-content">
         <p>Are you sure you want to delete this user?</p>
       </div>
@@ -78,6 +78,7 @@ export default {
       error: null,
       originalUser: null,
       user: {},
+      showDelete: false,
       createUserDir: false,
     };
   },
@@ -89,6 +90,9 @@ export default {
       return this.$route.path === "/settings/users/new";
     },
     ...mapState(["loading"]),
+    showDeletePrompt() {
+      return this.showDelete
+    },
   },
   watch: {
     $route: "fetchData",
@@ -125,7 +129,7 @@ export default {
       }
     },
     deletePrompt() {
-      this.showHover("deleteUser");
+      this.showDelete = true
     },
     async deleteUser(event) {
       event.preventDefault();

roadmap.md

@@ -22,7 +22,7 @@ Future releases (within 6 months):
  - Add tools to sidebar
    - duplicate file detector.
    - bulk rename https://github.com/filebrowser/filebrowser/issues/2473
- - Add Job status to the sidebar - indexin status.
+ - Add Job status to the sidebar - index status.
  - Use vite instead of webpack
  - upgrade to vue3
  - support minio/s3 https://github.com/filebrowser/filebrowser/issues/2544