chore(release): 2.15.0

Some fixes

.docker.json

@@ -0,0 +1,8 @@
+{
+  "port": 80,
+  "baseURL": "",
+  "address": "",
+  "log": "stdout",
+  "database": "/database.db",
+  "root": "/srv"
+}

.dockerignore

@@ -1,2 +1,3 @@
 *
+!.docker.json
 !filebrowser

.github/ISSUE_TEMPLATE/bug_report.md

@@ -4,19 +4,19 @@ about: Create a report to help us improve
 ---
 
 **Description**
-A clear and concise description of what the issue is about. What are you trying to do?
+<!-- A clear and concise description of what the issue is about. What are you trying to do? -->
 
 **Expected behaviour**
-What did you expect to happen?
+<!-- What did you expect to happen? -->
 
 **What is happening instead?**
-Please, give full error messages and/or log.
+<!-- Please, give full error messages and/or log. -->
 
 **Additional context**
-Add any other context about the problem here. If applicable, add screenshots to help explain your problem.
+<!-- Add any other context about the problem here. If applicable, add screenshots to help explain your problem. -->
 
 **How to reproduce?**
-Tell us how to reproduce this issue. How can someone who is starting from scratch reproduce this behaviour as minimally as possible?
+<!-- Tell us how to reproduce this issue. How can someone who is starting from scratch reproduce this behaviour as minimally as possible? -->
 
 **Files**
-A list of relevant files for this issue. Large files can be uploaded one-by-one or in a tarball/zipfile.
+<!-- A list of relevant files for this issue. Large files can be uploaded one-by-one or in a tarball/zipfile. -->

.github/ISSUE_TEMPLATE/feature_request.md

@@ -4,13 +4,13 @@ about: Suggest an idea for this project
 ---
 
 **Is your feature request related to a problem? Please describe.**
-Add a clear and concise description of what the problem is. E.g. *I'm always frustrated when [...]*
+<!-- Add a clear and concise description of what the problem is. E.g. *I'm always frustrated when [...]* -->
 
 **Describe the solution you'd like**
-Add a clear and concise description of what you want to happen.
+<!-- Add a clear and concise description of what you want to happen.  -->
 
 **Describe alternatives you've considered**
-Add a clear and concise description of any alternative solutions or features you've considered.
+<!-- Add a clear and concise description of any alternative solutions or features you've considered.  -->
 
 **Additional context**
-Add any other context or screenshots about the feature request here.
+<!-- Add any other context or screenshots about the feature request here. -->

.github/PULL_REQUEST_TEMPLATE.md

@@ -1,6 +1,8 @@
 **Description**
+<!--
 Please explain the changes you made here.
 If the feature changes current behaviour, explain why your solution is better.
+-->
 
 :rotating_light: Before submitting your PR, please read [community](https://github.com/filebrowser/community), and indicate which issues (in any of the repos) are either fixed or closed by this PR. See [GitHub Help: Closing issues using keywords](https://help.github.com/articles/closing-issues-via-commit-messages/).
 
@@ -11,6 +13,8 @@ If the feature changes current behaviour, explain why your solution is better.
 - [ ] AVOID breaking the continuous integration build.
 
 **Further comments**
+<!--
 If this is a relatively large or complex change, kick off the discussion by explaining why you chose the solution you did, what alternatives you considered, etc.
 
 :heart: Thank you!
+-->

.gitignore

@@ -5,11 +5,10 @@ _old
 rice-box.go
 .idea/
 filebrowser
-dist/
+filebrowser.exe
 
 .DS_Store
 node_modules
-/frontend/dist
 
 # local env files
 .env.local

.goreleaser.yml

@@ -3,10 +3,6 @@ project_name: filebrowser
 env:
   - GO111MODULE=on
 
-before:
-  hooks:
-    - make bundle-frontend
-
 build:
   env:
     - CGO_ENABLED=0
@@ -59,6 +55,8 @@ dockers:
     image_templates:
       - "filebrowser/filebrowser:{{ .Tag }}-amd64"
       - "filebrowser/filebrowser:v{{ .Major }}-amd64"
+    extra_files:
+      - .docker.json
   -
     dockerfile: Dockerfile
     use_buildx: true
@@ -75,6 +73,8 @@ dockers:
     image_templates:
       - "filebrowser/filebrowser:{{ .Tag }}-arm64"
       - "filebrowser/filebrowser:v{{ .Major }}-arm64"
+    extra_files:
+      - .docker.json
   -
     dockerfile: Dockerfile
     use_buildx: true
@@ -92,6 +92,8 @@ dockers:
     image_templates:
       - "filebrowser/filebrowser:{{ .Tag }}-armv6"
       - "filebrowser/filebrowser:v{{ .Major }}-armv6"
+    extra_files:
+      - .docker.json
   -
     dockerfile: Dockerfile
     use_buildx: true
@@ -109,6 +111,8 @@ dockers:
     image_templates:
       - "filebrowser/filebrowser:{{ .Tag }}-armv7"
       - "filebrowser/filebrowser:v{{ .Major }}-armv7"
+    extra_files:
+      - .docker.json
 docker_manifests:
   - name_template: "filebrowser/filebrowser:latest"
     image_templates:

CHANGELOG.md

@@ -2,6 +2,92 @@
 
 All notable changes to this project will be documented in this file. See [standard-version](https://github.com/conventional-changelog/standard-version) for commit guidelines.
 
+## [2.15.0](https://github.com/filebrowser/filebrowser/compare/v2.14.1...v2.15.0) (2021-04-06)
+
+
+### Features
+
+* add EXIF thumbnail support for JPEG files ([#1234](https://github.com/filebrowser/filebrowser/issues/1234)) ([7dd5b34](https://github.com/filebrowser/filebrowser/commit/7dd5b34d425dfbc2782152310483cbecf85c800a))
+* dynamic autoplay on previewer ([a76e01d](https://github.com/filebrowser/filebrowser/commit/a76e01d2b78a785f3665a8b3532c7cc566bfabce))
+* dynamic item count on file listing ([6c8ee96](https://github.com/filebrowser/filebrowser/commit/6c8ee96e6a21fae5d4608bdc7a5c5a161d7dafd3))
+* dynamic zoom limit on previewer ([e410272](https://github.com/filebrowser/filebrowser/commit/e410272e6be6a0b660efe8d4eee6c6e9dd834cc5))
+
+
+### Bug Fixes
+
+* buttons without permission on header ([1516d99](https://github.com/filebrowser/filebrowser/commit/1516d9932bf9926ac8b4cb3e738a5f51e80d5b1d))
+* check modify permission on file overwrite ([59f9964](https://github.com/filebrowser/filebrowser/commit/59f9964e80c8233775f27be33a4c16a31bfe848a))
+* empty archive name on directory download ([2697093](https://github.com/filebrowser/filebrowser/commit/2697093ac151f74eea3022951d128acfe04d1dcf))
+* empty text file on editor ([e9baf0c](https://github.com/filebrowser/filebrowser/commit/e9baf0c4b688fab291cdc842ec464c7a7a816499))
+* error causes panic on upload ([e1a6f59](https://github.com/filebrowser/filebrowser/commit/e1a6f593e1824e7fa4345a61dff5b1bb8cd22d05))
+* hidden editor header on Safari ([b521dec](https://github.com/filebrowser/filebrowser/commit/b521dec8f9b14dd92248c429e902ebc639046389))
+* image quality switch on previewer ([c0d85f3](https://github.com/filebrowser/filebrowser/commit/c0d85f3d85926c8790757bf142140d19455ae8ca))
+* list item interactions on share ([87f1881](https://github.com/filebrowser/filebrowser/commit/87f1881b429877a740ea84a8e783ad4103248289))
+* missing bold variation for Roboto font ([98d79b8](https://github.com/filebrowser/filebrowser/commit/98d79b8ed955df5691a306d709b4ab60d91da408))
+* mouse wheel zoom on previewer ([fcb115f](https://github.com/filebrowser/filebrowser/commit/fcb115f42d33db2be7a4d428ec53d65d6050320b))
+* no header button animations on file listing ([fe80730](https://github.com/filebrowser/filebrowser/commit/fe80730bb135b38e4d9de470c75cbe10b1aec201))
+
+### [2.14.1](https://github.com/filebrowser/filebrowser/compare/v2.14.0...v2.14.1) (2021-03-21)
+
+
+### Bug Fixes
+
+* display public routes with header proxy auth ([da54bd6](https://github.com/filebrowser/filebrowser/commit/da54bd6c214d7ee39b71d710ddfe6dd25fc4e5d6))
+
+## [2.14.0](https://github.com/filebrowser/filebrowser/compare/v2.13.0...v2.14.0) (2021-03-21)
+
+
+### Features
+
+* add health check handler ([a721dc1](https://github.com/filebrowser/filebrowser/commit/a721dc1f314732e60d331a1a7da97d06e0e8b613))
+
+
+### Bug Fixes
+
+* hide dotfile error on share ([5f4a031](https://github.com/filebrowser/filebrowser/commit/5f4a0317ab5685fe4a558df74e604c12e04a1c10))
+* prefix handling on http router ([93a35ad](https://github.com/filebrowser/filebrowser/commit/93a35ad2516accdcb9735db509550979d01de2c3))
+* qr code url on share ([22f4be8](https://github.com/filebrowser/filebrowser/commit/22f4be8f54162b7cf494177705ffb8b09117bd01))
+* text file detection on editor ([eeadc53](https://github.com/filebrowser/filebrowser/commit/eeadc532fe6057969b3c1a4726f236851b154cfa))
+
+## [2.13.0](https://github.com/filebrowser/filebrowser/compare/v2.12.1...v2.13.0) (2021-03-14)
+
+
+### Features
+
+* dual pane settings view ([db5aad8](https://github.com/filebrowser/filebrowser/commit/db5aad8eb679cfe1b1ace5142cf342951217f0f7))
+* improved settings navbar ([5b28aa0](https://github.com/filebrowser/filebrowser/commit/5b28aa0848710b9d3ee02a2aa912856395f48bd2))
+* improved sharing prompt ([1819377](https://github.com/filebrowser/filebrowser/commit/18193778971e27d18b5a35df8c2d0e2953b48111))
+* increased header button counter size ([4fb832c](https://github.com/filebrowser/filebrowser/commit/4fb832c0422107e16f22b7aa928224f36de4978f))
+* larger previewer content ([62fff5c](https://github.com/filebrowser/filebrowser/commit/62fff5ca60da1f887c1f95fa4808d3753596dab2))
+
+
+### Bug Fixes
+
+* archive contains parent path on Windows ([54f3570](https://github.com/filebrowser/filebrowser/commit/54f35701a2bd5cb7ec0628ca9789047072c073db))
+* check rules on http resource handlers ([5bf1554](https://github.com/filebrowser/filebrowser/commit/5bf15548d0ad147acfad5000277531be2671f7ce))
+* download current dir on file listing ([488d980](https://github.com/filebrowser/filebrowser/commit/488d98045e7476ed11e53c13d9498a9db3165bbc))
+* encoded file path on share ([7955e07](https://github.com/filebrowser/filebrowser/commit/7955e0720baef3710106c7e69bbbf078d5489220))
+* full file path on share ([e017a19](https://github.com/filebrowser/filebrowser/commit/e017a199850e19dd51b960ba59402c215fd8f1af))
+* header dropdown icon color on previewer ([f8df76f](https://github.com/filebrowser/filebrowser/commit/f8df76f52684f10722ce123fec2c90e321ddf103))
+* item dragging on file listing ([326b35a](https://github.com/filebrowser/filebrowser/commit/326b35a7ac7871afcdf892ca150349665b7f6379))
+* modified time on info prompt ([11ebaec](https://github.com/filebrowser/filebrowser/commit/11ebaec5f0671ec02ebe55d4a73a514bce3a6713))
+* root path name on archive ([426b38b](https://github.com/filebrowser/filebrowser/commit/426b38bb3362d2d477d0d8aa27d880664d537431))
+* stuck icon on header button ([6a734c0](https://github.com/filebrowser/filebrowser/commit/6a734c01391b437c2842f5d97fb63f29a0017510))
+* update image cache when replacing ([81b6f4d](https://github.com/filebrowser/filebrowser/commit/81b6f4d6f6a01886583016f61f4f1951a59f244d))
+* wait for async command exit ([#1326](https://github.com/filebrowser/filebrowser/issues/1326)) ([6d5ceae](https://github.com/filebrowser/filebrowser/commit/6d5ceae8b454edd749b3b65c88aacc0a31ce9215))
+
+
+### Refactorings
+
+* migrate from rice to embed.FS ([fc55061](https://github.com/filebrowser/filebrowser/commit/fc5506179a64e9e2f57f7b6d6cce4b95f5ebc235))
+
+### [2.12.1](https://github.com/filebrowser/filebrowser/compare/v2.12.0...v2.12.1) (2021-03-07)
+
+
+### Bug Fixes
+
+* add missing default config into the docker image ([7358b3f](https://github.com/filebrowser/filebrowser/commit/7358b3fe3178c20007b4b5ef5c03705badd538c4))
+
 ## [2.12.0](https://github.com/filebrowser/filebrowser/compare/v2.11.0...v2.12.0) (2021-03-04)
 
 

Dockerfile

@@ -1,10 +1,15 @@
 FROM alpine:latest
-RUN apk --update add ca-certificates
-RUN apk --update add mailcap
+RUN apk --update add ca-certificates \
+                     mailcap \
+                     curl
+
+HEALTHCHECK --start-period=2s --interval=5s --timeout=3s \
+  CMD curl -f http://localhost/health || exit 1
 
 VOLUME /srv
 EXPOSE 80
 
+COPY .docker.json /.filebrowser.json
 COPY filebrowser /filebrowser
 
 ENTRYPOINT [ "/filebrowser" ]

Makefile

@@ -37,9 +37,6 @@ $(BIN)/golangci-lint: PACKAGE=github.com/golangci/golangci-lint/cmd/golangci-lin
 GOIMPORTS = $(BIN)/goimports
 $(BIN)/goimports: PACKAGE=golang.org/x/tools/cmd/goimports@v0.1.0
 
-RICE = $(BIN)/rice
-$(BIN)/rice: PACKAGE=github.com/GeertJohan/go.rice/rice@v1.0.2
-
 ## build: Build
 .PHONY: build
 build: | build-frontend build-backend ; $(info $(M) building…)
@@ -51,11 +48,8 @@ build-frontend: | ; $(info $(M) building frontend…)
 
 ## build-backend: Build backend
 .PHONY: build-backend
-build-backend: bundle-frontend | ; $(info $(M) building backend…)
-	$Q $(GO) build -ldflags '$(LDFLAGS)' -o filebrowser
-
-bundle-frontend: | $(RICE) ; $(info $(M) building backend…)
-	$Q cd ./http && rm -rf rice-box.go && $(RICE) embed-go
+build-backend: | ; $(info $(M) building backend…)
+	$Q $(GO) build -ldflags '$(LDFLAGS)' -o .
 
 ## test: Run all tests
 .PHONY: test
@@ -67,7 +61,7 @@ test-frontend: | ; $(info $(M) running frontend tests…)
 
 ## test-backend: Run backend tests
 .PHONY: test-backend
-test-backend: | $(RICE) ; $(info $(M) running backend tests…)
+test-backend: | ; $(info $(M) running backend tests…)
 	$Q $(GO) test -v ./...
 
 ## lint: Lint

cmd/root.go

@@ -3,6 +3,7 @@ package cmd
 import (
 	"crypto/tls"
 	"errors"
+	"io/fs"
 	"io/ioutil"
 	"log"
 	"net"
@@ -22,6 +23,7 @@ import (
 
 	"github.com/filebrowser/filebrowser/v2/auth"
 	"github.com/filebrowser/filebrowser/v2/diskcache"
+	"github.com/filebrowser/filebrowser/v2/frontend"
 	fbhttp "github.com/filebrowser/filebrowser/v2/http"
 	"github.com/filebrowser/filebrowser/v2/img"
 	"github.com/filebrowser/filebrowser/v2/settings"
@@ -168,7 +170,12 @@ user created with the credentials from options "username" and "password".`,
 		signal.Notify(sigc, os.Interrupt, syscall.SIGTERM)
 		go cleanupHandler(listener, sigc)
 
-		handler, err := fbhttp.NewHandler(imgSvc, fileCache, d.store, server)
+		assetsFs, err := fs.Sub(frontend.Assets(), "dist")
+		if err != nil {
+			panic(err)
+		}
+
+		handler, err := fbhttp.NewHandler(imgSvc, fileCache, d.store, server, assetsFs)
 		checkErr(err)
 
 		defer listener.Close()

files/file.go

@@ -148,12 +148,15 @@ func (i *FileInfo) detectType(modify, saveContent, readHeader bool) error {
 	// of files couldn't be opened: we'd have immediately
 	// a 500 even though it doesn't matter. So we just log it.
 
-	var buffer []byte
-
 	mimetype := mime.TypeByExtension(i.Extension)
-	if mimetype == "" && readHeader {
+
+	var buffer []byte
+	if readHeader {
 		buffer = i.readFirstBytes()
-		mimetype = http.DetectContentType(buffer)
+
+		if mimetype == "" {
+			mimetype = http.DetectContentType(buffer)
+		}
 	}
 
 	switch {
@@ -167,7 +170,7 @@ func (i *FileInfo) detectType(modify, saveContent, readHeader bool) error {
 	case strings.HasPrefix(mimetype, "image"):
 		i.Type = "image"
 		return nil
-	case (strings.HasPrefix(mimetype, "text") || (len(buffer) > 0 && !isBinary(buffer))) && i.Size <= 10*1024*1024: // 10 MB
+	case (strings.HasPrefix(mimetype, "text") || !isBinary(buffer)) && i.Size <= 10*1024*1024: // 10 MB
 		i.Type = "text"
 
 		if !modify {

frontend/assets.go

@@ -0,0 +1,12 @@
+// +build !dev
+
+package frontend
+
+import "embed"
+
+//go:embed dist/*
+var assets embed.FS
+
+func Assets() embed.FS {
+	return assets
+}

frontend/assets_dev.go

@@ -0,0 +1,14 @@
+// +build dev
+
+package frontend
+
+import (
+	"io/fs"
+	"os"
+)
+
+var assets fs.FS = os.DirFS("frontend")
+
+func Assets() fs.FS {
+	return assets
+}

frontend/babel.config.js

@@ -1,5 +1,3 @@
 module.exports = {
-  presets: [
-    '@vue/app'
-  ]
-}
+  presets: ["@vue/app"],
+};

frontend/dist/.gitignore

@@ -0,0 +1,4 @@
+# Ignore everything in this directory
+*
+# Except this file
+!.gitignore

frontend/package.json

@@ -4,13 +4,15 @@
   "private": true,
   "scripts": {
     "serve": "vue-cli-service serve",
-    "build": "vue-cli-service build",
-    "watch": "vue-cli-service build --watch",
-    "lint": "vue-cli-service lint --fix"
+    "build": "find ./dist -maxdepth 1 -mindepth 1 ! -name '.gitignore' -exec rm -r {} + && vue-cli-service build --no-clean",
+    "lint": "npx vue-cli-service lint --no-fix",
+    "fix": "npx vue-cli-service lint",
+    "watch": "find ./dist -maxdepth 1 -mindepth 1 ! -name '.gitignore' -exec rm -r {} + && vue-cli-service build --watch --no-clean"
   },
   "dependencies": {
     "ace-builds": "^1.4.7",
     "clipboard": "^2.0.4",
+    "core-js": "^3.9.1",
     "js-base64": "^2.5.1",
     "lodash.clonedeep": "^4.5.0",
     "lodash.throttle": "^4.1.1",
@@ -29,11 +31,14 @@
   },
   "devDependencies": {
     "@vue/cli-plugin-babel": "^4.1.2",
-    "@vue/cli-plugin-eslint": "^4.1.1",
+    "@vue/cli-plugin-eslint": "~4.5.0",
     "@vue/cli-service": "^4.1.2",
-    "babel-eslint": "^10.0.3",
+    "@vue/eslint-config-prettier": "^6.0.0",
+    "babel-eslint": "^10.1.0",
     "eslint": "^6.7.2",
-    "eslint-plugin-vue": "^6.1.2",
+    "eslint-plugin-prettier": "^3.3.1",
+    "eslint-plugin-vue": "^6.2.2",
+    "prettier": "^2.2.1",
     "vue-template-compiler": "^2.6.10"
   },
   "eslintConfig": {
@@ -43,7 +48,8 @@
     },
     "extends": [
       "plugin:vue/essential",
-      "eslint:recommended"
+      "eslint:recommended",
+      "@vue/prettier"
     ],
     "rules": {},
     "parserOptions": {

frontend/public/themes/dark.css

@@ -69,13 +69,16 @@ nav > div {
   border-color: var(--divider);
 }
 
-#breadcrumbs {
+.breadcrumbs {
   border-color: var(--divider);
   color: var(--textPrimary) !important;
 }
-#breadcrumbs span {
+.breadcrumbs span {
   color: var(--textPrimary) !important;
 }
+.breadcrumbs a:hover {
+  background-color: rgba(255, 255, 255, .1);
+}
 
 #listing .item {
   background: var(--surfacePrimary);
@@ -114,13 +117,20 @@ nav > div {
   background: var(--surfaceSecondary);
 }
 
+.dashboard #nav ul li {
+  color: var(--textSecondary);
+}
+.dashboard #nav ul li:hover {
+  background: var(--surfaceSecondary);
+}
+
 .card h3,
 .dashboard #nav,
 .dashboard p label {
   color: var(--textPrimary);
 }
-.card#share ul li input,
-.card#share ul li select,
+.card#share input,
+.card#share select,
 .input {
   background: var(--surfaceSecondary);
   color: var(--textPrimary);
@@ -138,7 +148,7 @@ nav > div {
   background: #147A41;
 }
 
-.dashboard #nav li,
+.dashboard #nav .wrapper,
 .collapsible {
   border-color: var(--divider);
 }

frontend/src/App.vue

@@ -6,18 +6,18 @@
 
 <script>
 export default {
-  name: 'app',
-  mounted () {
-    const loading = document.getElementById('loading')
-    loading.classList.add('done')
+  name: "app",
+  mounted() {
+    const loading = document.getElementById("loading");
+    loading.classList.add("done");
 
     setTimeout(function () {
-      loading.parentNode.removeChild(loading)
-    }, 200)
-  }
-}
+      loading.parentNode.removeChild(loading);
+    }, 200);
+  },
+};
 </script>
 
 <style>
-@import './css/styles.css';
+@import "./css/styles.css";
 </style>

frontend/src/api/commands.js

@@ -1,16 +1,16 @@
-import { removePrefix } from './utils'
-import { baseURL } from '@/utils/constants'
-import store from '@/store'
+import { removePrefix } from "./utils";
+import { baseURL } from "@/utils/constants";
+import store from "@/store";
 
-const ssl = (window.location.protocol === 'https:')
-const protocol = (ssl ? 'wss:' : 'ws:')
+const ssl = window.location.protocol === "https:";
+const protocol = ssl ? "wss:" : "ws:";
 
 export default function command(url, command, onmessage, onclose) {
-  url = removePrefix(url)
-  url = `${protocol}//${window.location.host}${baseURL}/api/command${url}?auth=${store.state.jwt}`
+  url = removePrefix(url);
+  url = `${protocol}//${window.location.host}${baseURL}/api/command${url}?auth=${store.state.jwt}`;
 
-  let conn = new window.WebSocket(url)
-  conn.onopen = () => conn.send(command)
-  conn.onmessage = onmessage
-  conn.onclose = onclose
+  let conn = new window.WebSocket(url);
+  conn.onopen = () => conn.send(command);
+  conn.onmessage = onmessage;
+  conn.onclose = onclose;
 }

frontend/src/api/files.js

@@ -1,149 +1,156 @@
-import { fetchURL, removePrefix } from './utils'
-import { baseURL } from '@/utils/constants'
-import store from '@/store'
+import { fetchURL, removePrefix } from "./utils";
+import { baseURL } from "@/utils/constants";
+import store from "@/store";
 
-export async function fetch (url) {
-  url = removePrefix(url)
+export async function fetch(url) {
+  url = removePrefix(url);
 
-  const res = await fetchURL(`/api/resources${url}`, {})
+  const res = await fetchURL(`/api/resources${url}`, {});
 
   if (res.status === 200) {
-    let data = await res.json()
-    data.url = `/files${url}`
+    let data = await res.json();
+    data.url = `/files${url}`;
 
     if (data.isDir) {
-      if (!data.url.endsWith('/')) data.url += '/'
+      if (!data.url.endsWith("/")) data.url += "/";
       data.items = data.items.map((item, index) => {
-        item.index = index
-        item.url = `${data.url}${encodeURIComponent(item.name)}`
+        item.index = index;
+        item.url = `${data.url}${encodeURIComponent(item.name)}`;
 
         if (item.isDir) {
-          item.url += '/'
+          item.url += "/";
         }
 
-        return item
-      })
+        return item;
+      });
     }
 
-    return data
+    return data;
   } else {
-    throw new Error(res.status)
+    throw new Error(res.status);
   }
 }
 
-async function resourceAction (url, method, content) {
-  url = removePrefix(url)
+async function resourceAction(url, method, content) {
+  url = removePrefix(url);
 
-  let opts = { method }
+  let opts = { method };
 
   if (content) {
-    opts.body = content
+    opts.body = content;
   }
 
-  const res = await fetchURL(`/api/resources${url}`, opts)
+  const res = await fetchURL(`/api/resources${url}`, opts);
 
   if (res.status !== 200) {
-    throw new Error(await res.text())
+    throw new Error(await res.text());
   } else {
-    return res
+    return res;
   }
 }
 
-export async function remove (url) {
-  return resourceAction(url, 'DELETE')
+export async function remove(url) {
+  return resourceAction(url, "DELETE");
 }
 
-export async function put (url, content = '') {
-  return resourceAction(url, 'PUT', content)
+export async function put(url, content = "") {
+  return resourceAction(url, "PUT", content);
 }
 
-export function download (format, ...files) {
-  let url = store.getters['isSharing'] ? `${baseURL}/api/public/dl/${store.state.hash}` : `${baseURL}/api/raw`
+export function download(format, ...files) {
+  let url = `${baseURL}/api/raw`;
 
   if (files.length === 1) {
-    url += removePrefix(files[0]) + '?'
+    url += removePrefix(files[0]) + "?";
   } else {
-    let arg = ''
+    let arg = "";
 
     for (let file of files) {
-      arg += removePrefix(file) + ','
+      arg += removePrefix(file) + ",";
     }
 
-    arg = arg.substring(0, arg.length - 1)
-    arg = encodeURIComponent(arg)
-    url += `/?files=${arg}&`
+    arg = arg.substring(0, arg.length - 1);
+    arg = encodeURIComponent(arg);
+    url += `/?files=${arg}&`;
   }
 
-  if (format !== null) {
-    url += `algo=${format}&`
-  }
-  if (store.state.jwt !== ''){
-    url += `auth=${store.state.jwt}&`
-  }
-  if (store.state.token !== ''){
-    url += `token=${store.state.token}`
+  if (format) {
+    url += `algo=${format}&`;
   }
 
-  window.open(url)
+  if (store.state.jwt) {
+    url += `auth=${store.state.jwt}&`;
+  }
+
+  window.open(url);
 }
 
-export async function post (url, content = '', overwrite = false, onupload) {
-  url = removePrefix(url)
+export async function post(url, content = "", overwrite = false, onupload) {
+  url = removePrefix(url);
 
-  let bufferContent
-  if (content instanceof Blob && !['http:', 'https:'].includes(window.location.protocol)) {
-    bufferContent = await new Response(content).arrayBuffer()
+  let bufferContent;
+  if (
+    content instanceof Blob &&
+    !["http:", "https:"].includes(window.location.protocol)
+  ) {
+    bufferContent = await new Response(content).arrayBuffer();
   }
 
   return new Promise((resolve, reject) => {
-    let request = new XMLHttpRequest()
-    request.open('POST', `${baseURL}/api/resources${url}?override=${overwrite}`, true)
-    request.setRequestHeader('X-Auth', store.state.jwt)
+    let request = new XMLHttpRequest();
+    request.open(
+      "POST",
+      `${baseURL}/api/resources${url}?override=${overwrite}`,
+      true
+    );
+    request.setRequestHeader("X-Auth", store.state.jwt);
 
-    if (typeof onupload === 'function') {
-      request.upload.onprogress = onupload
+    if (typeof onupload === "function") {
+      request.upload.onprogress = onupload;
     }
 
     request.onload = () => {
       if (request.status === 200) {
-        resolve(request.responseText)
+        resolve(request.responseText);
       } else if (request.status === 409) {
-        reject(request.status)
+        reject(request.status);
       } else {
-        reject(request.responseText)
+        reject(request.responseText);
       }
-    }
+    };
 
     request.onerror = (error) => {
-      reject(error)
-    }
+      reject(error);
+    };
 
-    request.send(bufferContent || content)
-  })
+    request.send(bufferContent || content);
+  });
 }
 
-function moveCopy (items, copy = false, overwrite = false, rename = false) {
-  let promises = []
+function moveCopy(items, copy = false, overwrite = false, rename = false) {
+  let promises = [];
 
   for (let item of items) {
-    const from = item.from
-    const to = encodeURIComponent(removePrefix(item.to))
-    const url = `${from}?action=${copy ? 'copy' : 'rename'}&destination=${to}&override=${overwrite}&rename=${rename}`
-    promises.push(resourceAction(url, 'PATCH'))
+    const from = item.from;
+    const to = encodeURIComponent(removePrefix(item.to));
+    const url = `${from}?action=${
+      copy ? "copy" : "rename"
+    }&destination=${to}&override=${overwrite}&rename=${rename}`;
+    promises.push(resourceAction(url, "PATCH"));
   }
 
-  return Promise.all(promises)
+  return Promise.all(promises);
 }
 
-export function move (items, overwrite = false, rename = false) {
-  return moveCopy(items, false, overwrite, rename)
+export function move(items, overwrite = false, rename = false) {
+  return moveCopy(items, false, overwrite, rename);
 }
 
-export function copy (items, overwrite = false, rename = false) {
-  return moveCopy(items, true, overwrite, rename)
+export function copy(items, overwrite = false, rename = false) {
+  return moveCopy(items, true, overwrite, rename);
 }
 
-export async function checksum (url, algo) {
-  const data = await resourceAction(`${url}?checksum=${algo}`, 'GET')
-  return (await data.json()).checksums[algo]
+export async function checksum(url, algo) {
+  const data = await resourceAction(`${url}?checksum=${algo}`, "GET");
+  return (await data.json()).checksums[algo];
 }

frontend/src/api/index.js

@@ -1,15 +1,9 @@
-import * as files from './files'
-import * as share from './share'
-import * as users from './users'
-import * as settings from './settings'
-import search from './search'
-import commands from './commands'
+import * as files from "./files";
+import * as share from "./share";
+import * as users from "./users";
+import * as settings from "./settings";
+import * as pub from "./pub";
+import search from "./search";
+import commands from "./commands";
 
-export {
-  files,
-  share,
-  users,
-  settings,
-  commands,
-  search
-}
+export { files, share, users, settings, pub, commands, search };

frontend/src/api/pub.js

@@ -0,0 +1,61 @@
+import { fetchURL, removePrefix } from "./utils";
+import { baseURL } from "@/utils/constants";
+
+export async function fetch(url, password = "") {
+  url = removePrefix(url);
+
+  const res = await fetchURL(`/api/public/share${url}`, {
+    headers: { "X-SHARE-PASSWORD": password },
+  });
+
+  if (res.status === 200) {
+    let data = await res.json();
+    data.url = `/share${url}`;
+
+    if (data.isDir) {
+      if (!data.url.endsWith("/")) data.url += "/";
+      data.items = data.items.map((item, index) => {
+        item.index = index;
+        item.url = `${data.url}${encodeURIComponent(item.name)}`;
+
+        if (item.isDir) {
+          item.url += "/";
+        }
+
+        return item;
+      });
+    }
+
+    return data;
+  } else {
+    throw new Error(res.status);
+  }
+}
+
+export function download(format, hash, token, ...files) {
+  let url = `${baseURL}/api/public/dl/${hash}`;
+
+  if (files.length === 1) {
+    url += encodeURIComponent(files[0]) + "?";
+  } else {
+    let arg = "";
+
+    for (let file of files) {
+      arg += encodeURIComponent(file) + ",";
+    }
+
+    arg = arg.substring(0, arg.length - 1);
+    arg = encodeURIComponent(arg);
+    url += `/?files=${arg}&`;
+  }
+
+  if (format) {
+    url += `algo=${format}&`;
+  }
+
+  if (token) {
+    url += `token=${token}&`;
+  }
+
+  window.open(url);
+}

frontend/src/api/search.js

@@ -1,31 +1,31 @@
-import { fetchURL, removePrefix } from './utils'
-import url from '../utils/url'
+import { fetchURL, removePrefix } from "./utils";
+import url from "../utils/url";
 
-export default async function search (base, query) {
-  base = removePrefix(base)
-  query = encodeURIComponent(query)
+export default async function search(base, query) {
+  base = removePrefix(base);
+  query = encodeURIComponent(query);
 
-  if (!base.endsWith('/')) {
-    base += '/'
+  if (!base.endsWith("/")) {
+    base += "/";
   }
 
-  let res = await fetchURL(`/api/search${base}?query=${query}`, {})
+  let res = await fetchURL(`/api/search${base}?query=${query}`, {});
 
   if (res.status === 200) {
-    let data = await res.json()
+    let data = await res.json();
 
     data = data.map((item) => {
-      item.url = `/files${base}` + url.encodePath(item.path)
+      item.url = `/files${base}` + url.encodePath(item.path);
 
       if (item.dir) {
-        item.url += '/'
+        item.url += "/";
       }
 
-      return item
-    })
+      return item;
+    });
 
-    return data
+    return data;
   } else {
-    throw Error(res.status)
+    throw Error(res.status);
   }
-}
+}

frontend/src/api/settings.js

@@ -1,16 +1,16 @@
-import { fetchURL, fetchJSON } from './utils'
+import { fetchURL, fetchJSON } from "./utils";
 
-export function get () {
-  return fetchJSON(`/api/settings`, {})
+export function get() {
+  return fetchJSON(`/api/settings`, {});
 }
 
-export async function update (settings) {
+export async function update(settings) {
   const res = await fetchURL(`/api/settings`, {
-    method: 'PUT',
-    body: JSON.stringify(settings)
-  })
+    method: "PUT",
+    body: JSON.stringify(settings),
+  });
 
   if (res.status !== 200) {
-    throw new Error(res.status)
+    throw new Error(res.status);
   }
 }

frontend/src/api/share.js

@@ -1,42 +1,36 @@
-import { fetchURL, fetchJSON, removePrefix } from './utils'
+import { fetchURL, fetchJSON, removePrefix } from "./utils";
 
 export async function list() {
-  return fetchJSON('/api/shares')
-}
-
-export async function getHash(hash, password = "") {
-  return fetchJSON(`/api/public/share/${hash}`, {
-    headers: {'X-SHARE-PASSWORD': password},
-  })
+  return fetchJSON("/api/shares");
 }
 
 export async function get(url) {
-  url = removePrefix(url)
-  return fetchJSON(`/api/share${url}`)
+  url = removePrefix(url);
+  return fetchJSON(`/api/share${url}`);
 }
 
 export async function remove(hash) {
   const res = await fetchURL(`/api/share/${hash}`, {
-    method: 'DELETE'
-  })
+    method: "DELETE",
+  });
 
   if (res.status !== 200) {
-    throw new Error(res.status)
+    throw new Error(res.status);
   }
 }
 
-export async function create(url, password = '', expires = '', unit = 'hours') {
-  url = removePrefix(url)
-  url = `/api/share${url}`
-  if (expires !== '') {
-    url += `?expires=${expires}&unit=${unit}`
+export async function create(url, password = "", expires = "", unit = "hours") {
+  url = removePrefix(url);
+  url = `/api/share${url}`;
+  if (expires !== "") {
+    url += `?expires=${expires}&unit=${unit}`;
   }
-  let body = '{}';
-  if (password != '' || expires !== '' || unit !== 'hours') {
-    body = JSON.stringify({password: password, expires: expires, unit: unit})
+  let body = "{}";
+  if (password != "" || expires !== "" || unit !== "hours") {
+    body = JSON.stringify({ password: password, expires: expires, unit: unit });
   }
   return fetchJSON(url, {
-    method: 'POST',
+    method: "POST",
     body: body,
-  })
+  });
 }

frontend/src/api/users.js

@@ -1,52 +1,51 @@
-import { fetchURL, fetchJSON } from './utils'
+import { fetchURL, fetchJSON } from "./utils";
 
-export async function getAll () {
-  return fetchJSON(`/api/users`, {})
+export async function getAll() {
+  return fetchJSON(`/api/users`, {});
 }
 
-export async function get (id) {
-  return fetchJSON(`/api/users/${id}`, {})
+export async function get(id) {
+  return fetchJSON(`/api/users/${id}`, {});
 }
 
-export async function create (user) {
+export async function create(user) {
   const res = await fetchURL(`/api/users`, {
-    method: 'POST',
+    method: "POST",
     body: JSON.stringify({
-      what: 'user',
+      what: "user",
       which: [],
-      data: user
-    })
-  })
+      data: user,
+    }),
+  });
 
   if (res.status === 201) {
-    return res.headers.get('Location')
+    return res.headers.get("Location");
   } else {
-    throw new Error(res.status)
+    throw new Error(res.status);
   }
-
 }
 
-export async function update (user, which = ['all']) {
+export async function update(user, which = ["all"]) {
   const res = await fetchURL(`/api/users/${user.id}`, {
-    method: 'PUT',
+    method: "PUT",
     body: JSON.stringify({
-      what: 'user',
+      what: "user",
       which: which,
-      data: user
-    })
-  })
+      data: user,
+    }),
+  });
 
   if (res.status !== 200) {
-    throw new Error(res.status)
+    throw new Error(res.status);
   }
 }
 
-export async function remove (id) {
+export async function remove(id) {
   const res = await fetchURL(`/api/users/${id}`, {
-    method: 'DELETE'
-  })
+    method: "DELETE",
+  });
 
   if (res.status !== 200) {
-    throw new Error(res.status)
+    throw new Error(res.status);
   }
 }

frontend/src/api/utils.js

@@ -1,47 +1,42 @@
-import store from '@/store'
-import { renew } from '@/utils/auth'
-import { baseURL } from '@/utils/constants'
+import store from "@/store";
+import { renew } from "@/utils/auth";
+import { baseURL } from "@/utils/constants";
 
-export async function fetchURL (url, opts) {
-  opts = opts || {}
-  opts.headers = opts.headers || {}
+export async function fetchURL(url, opts) {
+  opts = opts || {};
+  opts.headers = opts.headers || {};
 
-  let { headers, ...rest } = opts
+  let { headers, ...rest } = opts;
 
   const res = await fetch(`${baseURL}${url}`, {
     headers: {
-      'X-Auth': store.state.jwt,
-      ...headers
+      "X-Auth": store.state.jwt,
+      ...headers,
     },
-    ...rest
-  })
+    ...rest,
+  });
 
-  if (res.headers.get('X-Renew-Token') === 'true') {
-    await renew(store.state.jwt)
+  if (res.headers.get("X-Renew-Token") === "true") {
+    await renew(store.state.jwt);
   }
 
-  return res
+  return res;
 }
 
-export async function fetchJSON (url, opts) {
-  const res = await fetchURL(url, opts)
+export async function fetchJSON(url, opts) {
+  const res = await fetchURL(url, opts);
 
   if (res.status === 200) {
-    return res.json()
+    return res.json();
   } else {
-    throw new Error(res.status)
+    throw new Error(res.status);
   }
 }
 
-export function removePrefix (url) {
-  if (url.startsWith('/files')) {
-    url = url.slice(6)
-  } else if (store.getters['isSharing']) {
-    url = url.slice(7 + store.state.hash.length)
-  }
+export function removePrefix(url) {
+  url = url.split("/").splice(2).join("/");
 
-  if (url === '') url = '/'
-  if (url[0] !== '/') url = '/' + url
-  return url
+  if (url === "") url = "/";
+  if (url[0] !== "/") url = "/" + url;
+  return url;
 }
-

frontend/src/components/Breadcrumbs.vue

@@ -0,0 +1,75 @@
+<template>
+  <div class="breadcrumbs">
+    <component
+      :is="element"
+      :to="base || ''"
+      :aria-label="$t('files.home')"
+      :title="$t('files.home')"
+    >
+      <i class="material-icons">home</i>
+    </component>
+
+    <span v-for="(link, index) in items" :key="index">
+      <span class="chevron"
+        ><i class="material-icons">keyboard_arrow_right</i></span
+      >
+      <component :is="element" :to="link.url">{{ link.name }}</component>
+    </span>
+  </div>
+</template>
+
+<script>
+export default {
+  name: "breadcrumbs",
+  props: ["base", "noLink"],
+  computed: {
+    items() {
+      const relativePath = this.$route.path.replace(this.base, "");
+      let parts = relativePath.split("/");
+
+      if (parts[0] === "") {
+        parts.shift();
+      }
+
+      if (parts[parts.length - 1] === "") {
+        parts.pop();
+      }
+
+      let breadcrumbs = [];
+
+      for (let i = 0; i < parts.length; i++) {
+        if (i === 0) {
+          breadcrumbs.push({
+            name: decodeURIComponent(parts[i]),
+            url: this.base + "/" + parts[i] + "/",
+          });
+        } else {
+          breadcrumbs.push({
+            name: decodeURIComponent(parts[i]),
+            url: breadcrumbs[i - 1].url + parts[i] + "/",
+          });
+        }
+      }
+
+      if (breadcrumbs.length > 3) {
+        while (breadcrumbs.length !== 4) {
+          breadcrumbs.shift();
+        }
+
+        breadcrumbs[0].name = "...";
+      }
+
+      return breadcrumbs;
+    },
+    element() {
+      if (this.noLink !== undefined) {
+        return "span";
+      }
+
+      return "router-link";
+    },
+  },
+};
+</script>
+
+<style></style>

frontend/src/components/Header.vue

@@ -1,185 +0,0 @@
-<template>
-  <header v-if="!isEditor && !isPreview">
-    <div>
-      <button @click="openSidebar" :aria-label="$t('buttons.toggleSidebar')" :title="$t('buttons.toggleSidebar')" class="action">
-        <i class="material-icons">menu</i>
-      </button>
-      <img :src="logoURL" alt="File Browser">
-      <search v-if="isLogged"></search>
-    </div>
-    <div>
-      <template v-if="isLogged || isSharing">
-        <button v-show="!isSharing" @click="openSearch" :aria-label="$t('buttons.search')" :title="$t('buttons.search')" class="search-button action">
-          <i class="material-icons">search</i>
-        </button>
-
-        <button @click="openMore" id="more" :aria-label="$t('buttons.more')" :title="$t('buttons.more')" class="action">
-          <i class="material-icons">more_vert</i>
-        </button>
-
-        <!-- Menu that shows on listing AND mobile when there are files selected -->
-        <div id="file-selection" v-if="isMobile && isListing && !isSharing">
-          <span v-if="selectedCount > 0">{{ selectedCount }} selected</span>
-          <share-button v-show="showShareButton"></share-button>
-          <rename-button v-show="showRenameButton"></rename-button>
-          <copy-button v-show="showCopyButton"></copy-button>
-          <move-button v-show="showMoveButton"></move-button>
-          <delete-button v-show="showDeleteButton"></delete-button>
-        </div>
-
-        <!-- This buttons are shown on a dropdown on mobile phones -->
-        <div id="dropdown" :class="{ active: showMore }">
-          <div v-if="!isListing || !isMobile">
-            <share-button v-show="showShareButton"></share-button>
-            <rename-button v-show="showRenameButton"></rename-button>
-            <copy-button v-show="showCopyButton"></copy-button>
-            <move-button v-show="showMoveButton"></move-button>
-            <delete-button v-show="showDeleteButton"></delete-button>
-          </div>
-
-          <shell-button v-if="isExecEnabled && !isSharing && user.perm.execute" />
-          <switch-button v-show="isListing"></switch-button>
-          <download-button v-show="showDownloadButton"></download-button>
-          <upload-button v-show="showUpload"></upload-button>
-          <info-button v-show="isFiles"></info-button>
-
-          <button v-show="isListing || (isSharing && req.isDir)" @click="toggleMultipleSelection" :aria-label="$t('buttons.selectMultiple')" :title="$t('buttons.selectMultiple')" class="action" >
-            <i class="material-icons">check_circle</i>
-            <span>{{ $t('buttons.select') }}</span>
-          </button>
-        </div>
-      </template>
-
-      <div v-show="showOverlay" @click="resetPrompts" class="overlay"></div>
-    </div>
-  </header>
-</template>
-
-<script>
-import Search from './Search'
-import InfoButton from './buttons/Info'
-import DeleteButton from './buttons/Delete'
-import RenameButton from './buttons/Rename'
-import UploadButton from './buttons/Upload'
-import DownloadButton from './buttons/Download'
-import SwitchButton from './buttons/SwitchView'
-import MoveButton from './buttons/Move'
-import CopyButton from './buttons/Copy'
-import ShareButton from './buttons/Share'
-import ShellButton from './buttons/Shell'
-import {mapGetters, mapState} from 'vuex'
-import { logoURL, enableExec } from '@/utils/constants'
-import * as api from '@/api'
-import buttons from '@/utils/buttons'
-
-export default {
-  name: 'header-layout',
-  components: {
-    Search,
-    InfoButton,
-    DeleteButton,
-    ShareButton,
-    RenameButton,
-    DownloadButton,
-    CopyButton,
-    UploadButton,
-    SwitchButton,
-    MoveButton,
-    ShellButton
-  },
-  data: function () {
-    return {
-      width: window.innerWidth,
-      pluginData: {
-        api,
-        buttons,
-        'store': this.$store,
-        'router': this.$router
-      }
-    }
-  },
-  created () {
-    window.addEventListener('resize', () => {
-      this.width = window.innerWidth
-    })
-  },
-  computed: {
-    ...mapGetters([
-      'selectedCount',
-      'isFiles',
-      'isEditor',
-      'isPreview',
-      'isListing',
-      'isLogged',
-      'isSharing'
-    ]),
-    ...mapState([
-      'req',
-      'user',
-      'loading',
-      'reload',
-      'multiple'
-    ]),
-    logoURL: () => logoURL,
-    isExecEnabled: () => enableExec,
-    isMobile () {
-      return this.width <= 736
-    },
-    showUpload () {
-      return this.isListing && this.user.perm.create
-    },
-    showDownloadButton () {
-      return (this.isFiles && this.user.perm.download) || (this.isSharing && this.selectedCount > 0)
-    },
-    showDeleteButton () {
-      return this.isFiles && (this.isListing
-        ? (this.selectedCount !== 0 && this.user.perm.delete)
-        : this.user.perm.delete)
-    },
-    showRenameButton () {
-      return this.isFiles && (this.isListing
-        ? (this.selectedCount === 1 && this.user.perm.rename)
-        : this.user.perm.rename)
-    },
-    showShareButton () {
-      return this.isFiles && (this.isListing
-        ? (this.selectedCount === 1 && this.user.perm.share)
-        : this.user.perm.share)
-    },
-    showMoveButton () {
-      return this.isFiles && (this.isListing
-        ? (this.selectedCount > 0 && this.user.perm.rename)
-        : this.user.perm.rename)
-    },
-    showCopyButton () {
-      return this.isFiles && (this.isListing
-        ? (this.selectedCount > 0 && this.user.perm.create)
-        : this.user.perm.create)
-    },
-    showMore () {
-      return (this.isFiles || this.isSharing) && this.$store.state.show === 'more'
-    },
-    showOverlay () {
-      return this.showMore
-    }
-  },
-  methods: {
-    openSidebar () {
-      this.$store.commit('showHover', 'sidebar')
-    },
-    openMore () {
-      this.$store.commit('showHover', 'more')
-    },
-    openSearch () {
-      this.$store.commit('showHover', 'search')
-    },
-    toggleMultipleSelection () {
-      this.$store.commit('multiple', !this.multiple)
-      this.resetPrompts()
-    },
-    resetPrompts () {
-      this.$store.commit('closeHovers')
-    }
-  }
-}
-</script>

frontend/src/components/Search.vue

@@ -1,5 +1,5 @@
 <template>
-  <div id="search" @click="open" v-bind:class="{ active , ongoing }">
+  <div id="search" @click="open" v-bind:class="{ active, ongoing }">
     <div id="input">
       <button
         v-if="active"
@@ -20,7 +20,7 @@
         v-model.trim="value"
         :aria-label="$t('search.search')"
         :placeholder="$t('search.search')"
-      >
+      />
     </div>
 
     <div id="result" ref="result">
@@ -30,25 +30,25 @@
 
           <template v-if="value.length === 0">
             <div class="boxes">
-              <h3>{{ $t('search.types') }}</h3>
+              <h3>{{ $t("search.types") }}</h3>
               <div>
                 <div
                   tabindex="0"
-                  v-for="(v,k) in boxes"
+                  v-for="(v, k) in boxes"
                   :key="k"
                   role="button"
-                  @click="init('type:'+k)"
-                  :aria-label="$t('search.'+v.label)"
+                  @click="init('type:' + k)"
+                  :aria-label="$t('search.' + v.label)"
                 >
-                  <i class="material-icons">{{v.icon}}</i>
-                  <p>{{ $t('search.'+v.label) }}</p>
+                  <i class="material-icons">{{ v.icon }}</i>
+                  <p>{{ $t("search." + v.label) }}</p>
                 </div>
               </div>
             </div>
           </template>
         </template>
         <ul v-show="results.length > 0">
-          <li v-for="(s,k) in filteredResults" :key="k">
+          <li v-for="(s, k) in filteredResults" :key="k">
             <router-link @click.native="close" :to="s.url">
               <i v-if="s.dir" class="material-icons">folder</i>
               <i v-else class="material-icons">insert_drive_file</i>
@@ -65,20 +65,20 @@
 </template>
 
 <script>
-import { mapState, mapGetters, mapMutations } from "vuex"
-import url from "@/utils/url"
-import { search } from "@/api"
+import { mapState, mapGetters, mapMutations } from "vuex";
+import url from "@/utils/url";
+import { search } from "@/api";
 
 var boxes = {
   image: { label: "images", icon: "insert_photo" },
   audio: { label: "music", icon: "volume_up" },
   video: { label: "video", icon: "movie" },
-  pdf: { label: "pdf", icon: "picture_as_pdf" }
-}
+  pdf: { label: "pdf", icon: "picture_as_pdf" },
+};
 
 export default {
   name: "search",
-  data: function() {
+  data: function () {
     return {
       value: "",
       active: false,
@@ -86,111 +86,116 @@ export default {
       results: [],
       reload: false,
       resultsCount: 50,
-      scrollable: null
-    }
+      scrollable: null,
+    };
   },
   watch: {
-    show (val, old) {
-      this.active = val === "search"
+    show(val, old) {
+      this.active = val === "search";
 
       if (old === "search" && !this.active) {
         if (this.reload) {
-          this.setReload(true)
+          this.setReload(true);
         }
 
-        document.body.style.overflow = "auto"
-        this.reset()
-        this.value = ''
-        this.active = false
-        this.$refs.input.blur()
+        document.body.style.overflow = "auto";
+        this.reset();
+        this.value = "";
+        this.active = false;
+        this.$refs.input.blur();
       } else if (this.active) {
-        this.reload = false
-        this.$refs.input.focus()
-        document.body.style.overflow = "hidden"
+        this.reload = false;
+        this.$refs.input.focus();
+        document.body.style.overflow = "hidden";
       }
     },
-    value () {
+    value() {
       if (this.results.length) {
-        this.reset()
+        this.reset();
       }
-    }
+    },
   },
   computed: {
     ...mapState(["user", "show"]),
     ...mapGetters(["isListing"]),
     boxes() {
-      return boxes
+      return boxes;
     },
     isEmpty() {
-      return this.results.length === 0
+      return this.results.length === 0;
     },
     text() {
       if (this.ongoing) {
-        return ""
+        return "";
       }
 
-      return this.value === '' ? this.$t("search.typeToSearch") : this.$t("search.pressToSearch")
+      return this.value === ""
+        ? this.$t("search.typeToSearch")
+        : this.$t("search.pressToSearch");
+    },
+    filteredResults() {
+      return this.results.slice(0, this.resultsCount);
     },
-    filteredResults () {
-      return this.results.slice(0, this.resultsCount)
-    }
   },
   mounted() {
-    this.$refs.result.addEventListener('scroll', event => {
-      if (event.target.offsetHeight + event.target.scrollTop >= event.target.scrollHeight - 100) {
-        this.resultsCount += 50
+    this.$refs.result.addEventListener("scroll", (event) => {
+      if (
+        event.target.offsetHeight + event.target.scrollTop >=
+        event.target.scrollHeight - 100
+      ) {
+        this.resultsCount += 50;
       }
-    })
+    });
   },
   methods: {
     ...mapMutations(["showHover", "closeHovers", "setReload"]),
     open() {
-      this.showHover("search")
+      this.showHover("search");
     },
     close(event) {
-      event.stopPropagation()
-      event.preventDefault()
-      this.closeHovers()
+      event.stopPropagation();
+      event.preventDefault();
+      this.closeHovers();
     },
     keyup(event) {
       if (event.keyCode === 27) {
-        this.close(event)
-        return
+        this.close(event);
+        return;
       }
 
-      this.results.length = 0
+      this.results.length = 0;
     },
-    init (string) {
-      this.value = `${string} `
-      this.$refs.input.focus()
+    init(string) {
+      this.value = `${string} `;
+      this.$refs.input.focus();
     },
-    reset () {
-      this.ongoing = false
-      this.resultsCount = 50
-      this.results = []
+    reset() {
+      this.ongoing = false;
+      this.resultsCount = 50;
+      this.results = [];
     },
     async submit(event) {
-      event.preventDefault()
+      event.preventDefault();
 
-      if (this.value === '') {
-        return
+      if (this.value === "") {
+        return;
       }
 
-      let path = this.$route.path
+      let path = this.$route.path;
       if (!this.isListing) {
-        path = url.removeLastDir(path) + "/"
+        path = url.removeLastDir(path) + "/";
       }
 
-      this.ongoing = true
+      this.ongoing = true;
 
       try {
-        this.results = await search(path, this.value)
+        this.results = await search(path, this.value);
       } catch (error) {
-        this.$showError(error)
+        this.$showError(error);
       }
 
-      this.ongoing = false
-    }
-  }
-}
+      this.ongoing = false;
+    },
+  },
+};
 </script>

frontend/src/components/Shell.vue

@@ -1,12 +1,21 @@
 <template>
-  <div @click="focus" class="shell" ref="scrollable" :class="{ ['shell--hidden']: !showShell}">
-    <div v-for="(c, index) in content" :key="index" class="shell__result" >
-      <div class="shell__prompt"><i class="material-icons">chevron_right</i></div>
+  <div
+    @click="focus"
+    class="shell"
+    ref="scrollable"
+    :class="{ ['shell--hidden']: !showShell }"
+  >
+    <div v-for="(c, index) in content" :key="index" class="shell__result">
+      <div class="shell__prompt">
+        <i class="material-icons">chevron_right</i>
+      </div>
       <pre class="shell__text">{{ c.text }}</pre>
     </div>
 
-    <div class="shell__result" :class="{ 'shell__result--hidden': !canInput }" >
-      <div class="shell__prompt"><i class="material-icons">chevron_right</i></div>
+    <div class="shell__result" :class="{ 'shell__result--hidden': !canInput }">
+      <div class="shell__prompt">
+        <i class="material-icons">chevron_right</i>
+      </div>
       <pre
         tabindex="0"
         ref="input"
@@ -14,102 +23,103 @@
         contenteditable="true"
         @keydown.prevent.38="historyUp"
         @keydown.prevent.40="historyDown"
-        @keypress.prevent.enter="submit" />
+        @keypress.prevent.enter="submit"
+      />
     </div>
   </div>
 </template>
 
 <script>
-import { mapMutations, mapState, mapGetters } from 'vuex'
-import { commands } from '@/api'
+import { mapMutations, mapState, mapGetters } from "vuex";
+import { commands } from "@/api";
 
 export default {
-  name: 'shell',
+  name: "shell",
   computed: {
-    ...mapState([ 'user', 'showShell' ]),
-    ...mapGetters([ 'isFiles', 'isLogged' ]),
+    ...mapState(["user", "showShell"]),
+    ...mapGetters(["isFiles", "isLogged"]),
     path: function () {
       if (this.isFiles) {
-        return this.$route.path
+        return this.$route.path;
       }
 
-      return ''
-    }
+      return "";
+    },
   },
   data: () => ({
     content: [],
     history: [],
     historyPos: 0,
-    canInput: true
+    canInput: true,
   }),
   methods: {
-    ...mapMutations([ 'toggleShell' ]),
+    ...mapMutations(["toggleShell"]),
     scroll: function () {
-      this.$refs.scrollable.scrollTop = this.$refs.scrollable.scrollHeight
+      this.$refs.scrollable.scrollTop = this.$refs.scrollable.scrollHeight;
     },
     focus: function () {
-      this.$refs.input.focus()
+      this.$refs.input.focus();
     },
-    historyUp () {
+    historyUp() {
       if (this.historyPos > 0) {
-        this.$refs.input.innerText = this.history[--this.historyPos]
-        this.focus()
+        this.$refs.input.innerText = this.history[--this.historyPos];
+        this.focus();
       }
     },
-    historyDown () {
+    historyDown() {
       if (this.historyPos >= 0 && this.historyPos < this.history.length - 1) {
-        this.$refs.input.innerText = this.history[++this.historyPos]
-        this.focus()
+        this.$refs.input.innerText = this.history[++this.historyPos];
+        this.focus();
       } else {
-        this.historyPos = this.history.length
-        this.$refs.input.innerText = ''
+        this.historyPos = this.history.length;
+        this.$refs.input.innerText = "";
       }
     },
     submit: function (event) {
-      const cmd = event.target.innerText.trim()
+      const cmd = event.target.innerText.trim();
 
-      if (cmd === '') {
-        return
+      if (cmd === "") {
+        return;
       }
 
-      if (cmd === 'clear') {
-        this.content = []
-        event.target.innerHTML = ''
-        return
+      if (cmd === "clear") {
+        this.content = [];
+        event.target.innerHTML = "";
+        return;
       }
 
-      if (cmd === 'exit') {
-        event.target.innerHTML = ''
-        this.toggleShell()
-        return
+      if (cmd === "exit") {
+        event.target.innerHTML = "";
+        this.toggleShell();
+        return;
       }
 
-      this.canInput = false
-      event.target.innerHTML = ''
+      this.canInput = false;
+      event.target.innerHTML = "";
 
       let results = {
-        text: `${cmd}\n\n`
-      }
-      
-      this.history.push(cmd)
-      this.historyPos = this.history.length
-      this.content.push(results)
+        text: `${cmd}\n\n`,
+      };
+
+      this.history.push(cmd);
+      this.historyPos = this.history.length;
+      this.content.push(results);
 
       commands(
         this.path,
         cmd,
-        event => {
-          results.text += `${event.data}\n`
-          this.scroll()
+        (event) => {
+          results.text += `${event.data}\n`;
+          this.scroll();
         },
         () => {
-          results.text = results.text.trimEnd()
-          this.canInput = true
-          this.$refs.input.focus()
-          this.scroll()
+          results.text = results.text.trimEnd();
+          this.canInput = true;
+          this.$refs.input.focus();
+          this.scroll();
         }
-      )
-    }
-  }
-}
+      );
+    },
+  },
+};
 </script>

frontend/src/components/Sidebar.vue

@@ -1,82 +1,134 @@
 <template>
-  <nav :class="{active}">
+  <nav :class="{ active }">
     <template v-if="isLogged">
-      <router-link class="action" to="/files/" :aria-label="$t('sidebar.myFiles')" :title="$t('sidebar.myFiles')">
+      <router-link
+        class="action"
+        to="/files/"
+        :aria-label="$t('sidebar.myFiles')"
+        :title="$t('sidebar.myFiles')"
+      >
         <i class="material-icons">folder</i>
-        <span>{{ $t('sidebar.myFiles') }}</span>
+        <span>{{ $t("sidebar.myFiles") }}</span>
       </router-link>
 
       <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>
+          <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>
+          <span>{{ $t("sidebar.newFile") }}</span>
         </button>
       </div>
 
       <div>
-        <router-link class="action" to="/settings" :aria-label="$t('sidebar.settings')" :title="$t('sidebar.settings')">
+        <router-link
+          class="action"
+          to="/settings"
+          :aria-label="$t('sidebar.settings')"
+          :title="$t('sidebar.settings')"
+        >
           <i class="material-icons">settings_applications</i>
-          <span>{{ $t('sidebar.settings') }}</span>
+          <span>{{ $t("sidebar.settings") }}</span>
         </router-link>
 
-        <button v-if="authMethod == 'json'" @click="logout" class="action" id="logout" :aria-label="$t('sidebar.logout')" :title="$t('sidebar.logout')">
+        <button
+          v-if="authMethod == 'json'"
+          @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>
+          <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>
+        <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>
+        <span>{{ $t("sidebar.signup") }}</span>
       </router-link>
     </template>
 
     <p class="credits">
       <span>
         <span v-if="disableExternal">File Browser</span>
-        <a v-else rel="noopener noreferrer" target="_blank" href="https://github.com/filebrowser/filebrowser">File Browser</a>
+        <a
+          v-else
+          rel="noopener noreferrer"
+          target="_blank"
+          href="https://github.com/filebrowser/filebrowser"
+          >File Browser</a
+        >
         <span> {{ version }}</span>
       </span>
-      <span><a @click="help">{{ $t('sidebar.help') }}</a></span>
+      <span
+        ><a @click="help">{{ $t("sidebar.help") }}</a></span
+      >
     </p>
   </nav>
 </template>
 
 <script>
-import { mapState, mapGetters } from 'vuex'
-import * as auth from '@/utils/auth'
-import { version, signup, disableExternal, noAuth, authMethod } from '@/utils/constants'
+import { mapState, mapGetters } from "vuex";
+import * as auth from "@/utils/auth";
+import {
+  version,
+  signup,
+  disableExternal,
+  noAuth,
+  authMethod,
+} from "@/utils/constants";
 
 export default {
-  name: 'sidebar',
+  name: "sidebar",
   computed: {
-    ...mapState([ 'user' ]),
-    ...mapGetters([ 'isLogged' ]),
-    active () {
-      return this.$store.state.show === 'sidebar'
+    ...mapState(["user"]),
+    ...mapGetters(["isLogged"]),
+    active() {
+      return this.$store.state.show === "sidebar";
     },
     signup: () => signup,
     version: () => version,
     disableExternal: () => disableExternal,
     noAuth: () => noAuth,
-    authMethod: () => authMethod
+    authMethod: () => authMethod,
   },
   methods: {
-    help () {
-      this.$store.commit('showHover', 'help')
+    help() {
+      this.$store.commit("showHover", "help");
     },
-    logout: auth.logout
-  }
-}
+    logout: auth.logout,
+  },
+};
 </script>

frontend/src/components/buttons/Copy.vue

@@ -1,17 +0,0 @@
-<template>
-  <button @click="show" :aria-label="$t('buttons.copy')" :title="$t('buttons.copy')" class="action" id="copy-button">
-    <i class="material-icons">content_copy</i>
-    <span>{{ $t('buttons.copyFile') }}</span>
-  </button>
-</template>
-
-<script>
-export default {
-  name: 'copy-button',
-  methods: {
-    show: function () {
-      this.$store.commit('showHover', 'copy')
-    }
-  }
-}
-</script>

frontend/src/components/buttons/Delete.vue

@@ -1,17 +0,0 @@
-<template>
-  <button @click="show" :aria-label="$t('buttons.delete')" :title="$t('buttons.delete')" class="action" id="delete-button">
-    <i class="material-icons">delete</i>
-    <span>{{ $t('buttons.delete') }}</span>
-  </button>
-</template>
-
-<script>
-export default {
-  name: 'delete-button',
-  methods: {
-    show: function () {
-      this.$store.commit('showHover', 'delete')
-    }
-  }
-}
-</script>

frontend/src/components/buttons/Download.vue

@@ -1,35 +0,0 @@
-<template>
-  <button @click="download" :aria-label="$t('buttons.download')" :title="$t('buttons.download')" id="download-button" class="action">
-    <i class="material-icons">file_download</i>
-    <span>{{ $t('buttons.download') }}</span>
-    <span v-if="selectedCount > 0" class="counter">{{ selectedCount }}</span>
-  </button>
-</template>
-
-<script>
-import {mapGetters, mapState} from 'vuex'
-import { files as api } from '@/api'
-
-export default {
-  name: 'download-button',
-  computed: {
-    ...mapState(['req', 'selected']),
-    ...mapGetters(['isListing', 'selectedCount', 'isSharing'])
-  },
-  methods: {
-    download: function () {
-      if (!this.isListing && !this.isSharing) {
-        api.download(null, this.$route.path)
-        return
-      }
-
-      if (this.selectedCount === 1 && !this.req.items[this.selected[0]].isDir) {
-        api.download(null, this.req.items[this.selected[0]].url)
-        return
-      }
-
-      this.$store.commit('showHover', 'download')
-    }
-  }
-}
-</script>

frontend/src/components/buttons/Info.vue

@@ -1,17 +0,0 @@
-<template>
-  <button :title="$t('buttons.info')" :aria-label="$t('buttons.info')" class="action" @click="show">
-    <i class="material-icons">info</i>
-    <span>{{ $t('buttons.info') }}</span>
-  </button>
-</template>
-
-<script>
-export default {
-  name: 'info-button',
-  methods: {
-    show: function () {
-      this.$store.commit('showHover', 'info')
-    }
-  }
-}
-</script>

frontend/src/components/buttons/Move.vue

@@ -1,17 +0,0 @@
-<template>
-  <button @click="show" :aria-label="$t('buttons.move')" :title="$t('buttons.move')" class="action" id="move-button">
-    <i class="material-icons">forward</i>
-    <span>{{ $t('buttons.moveFile') }}</span>
-  </button>
-</template>
-
-<script>
-export default {
-  name: 'move-button',
-  methods: {
-    show: function () {
-      this.$store.commit('showHover', 'move')
-    }
-  }
-}
-</script>

frontend/src/components/buttons/PreviewSize.vue

@@ -1,22 +0,0 @@
-<template>
-  <button :title="$t('buttons.info')" :aria-label="$t('buttons.info')" class="action" @click="$emit('change-size')">
-    <i class="material-icons">{{ this.icon }}</i>
-    <span>{{ $t('buttons.info') }}</span>
-  </button>
-</template>
-
-<script>
-export default {
-  name: 'preview-size-button',
-  props: [ 'size' ],
-  computed: {
-    icon () {
-      if (this.size) {
-        return 'photo_size_select_large'
-      }
-
-      return 'hd'
-    }
-  }
-}
-</script>

frontend/src/components/buttons/Rename.vue

@@ -1,17 +0,0 @@
-<template>
-  <button @click="show" :aria-label="$t('buttons.rename')" :title="$t('buttons.rename')" class="action" id="rename-button">
-    <i class="material-icons">mode_edit</i>
-    <span>{{ $t('buttons.rename') }}</span>
-  </button>
-</template>
-
-<script>
-export default {
-  name: 'rename-button',
-  methods: {
-    show: function () {
-      this.$store.commit('showHover', 'rename')
-    }
-  }
-}
-</script>

frontend/src/components/buttons/Share.vue

@@ -1,17 +0,0 @@
-<template>
-  <button @click="show" :aria-label="$t('buttons.share')" :title="$t('buttons.share')" class="action">
-    <i class="material-icons">share</i>
-    <span>{{ $t('buttons.share') }}</span>
-  </button>
-</template>
-
-<script>
-export default {
-  name: 'share-button',
-  methods: {
-    show () {
-      this.$store.commit('showHover', 'share')
-    }
-  }
-}
-</script>

frontend/src/components/buttons/Shell.vue

@@ -1,17 +0,0 @@
-<template>
-  <button @click="show" :aria-label="$t('buttons.shell')" :title="$t('buttons.shell')" class="action">
-    <i class="material-icons">code</i>
-    <span>{{ $t('buttons.shell') }}</span>
-  </button>
-</template>
-
-<script>
-export default {
-  name: 'shell-button',
-  methods: {
-    show: function () {
-      this.$store.commit('toggleShell')
-    }
-  }
-}
-</script>

frontend/src/components/buttons/SwitchView.vue

@@ -1,40 +0,0 @@
-<template>
-  <button @click="change" :aria-label="$t('buttons.switchView')" :title="$t('buttons.switchView')" class="action" id="switch-view-button">
-    <i class="material-icons">{{ icon }}</i>
-    <span>{{ $t('buttons.switchView') }}</span>
-  </button>
-</template>
-
-<script>
-import { mapState, mapMutations } from 'vuex'
-import { users as api } from '@/api'
-
-export default {
-  name: 'switch-button',
-  computed: {
-    ...mapState(['user']),
-    icon: function () {
-      if (this.user.viewMode === 'mosaic') return 'view_list'
-      return 'view_module'
-    }
-  },
-  methods: {
-    ...mapMutations([ 'updateUser', 'closeHovers' ]),
-    change: async function () {
-      this.closeHovers()
-
-      const data = {
-        id: this.user.id,
-        viewMode: (this.icon === 'view_list') ? 'list' : 'mosaic'
-      }
-
-      try {
-        await api.update(data, ['viewMode'])
-        this.updateUser(data)
-      } catch (e) {
-        this.$showError(e)
-      }
-    }
-  }
-}
-</script>

frontend/src/components/buttons/Upload.vue

@@ -1,21 +0,0 @@
-<template>
-  <button @click="upload" :aria-label="$t('buttons.upload')" :title="$t('buttons.upload')" class="action" id="upload-button">
-    <i class="material-icons">file_upload</i>
-    <span>{{ $t('buttons.upload') }}</span>
-  </button>
-</template>
-
-<script>
-export default {
-  name: 'upload-button',
-  methods: {
-    upload: function () {
-      if (typeof(DataTransferItem.prototype.webkitGetAsEntry) !== 'undefined') {
-        this.$store.commit('showHover', 'upload')
-      } else {
-        document.getElementById('upload-input').click();
-      }
-    }
-  }
-}
-</script>

frontend/src/components/files/Editor.vue

@@ -1,132 +0,0 @@
-<template>
-  <div id="editor-container">
-    <div class="bar">
-      <button @click="back" :title="$t('files.closePreview')" :aria-label="$t('files.closePreview')" id="close" class="action">
-        <i class="material-icons">close</i>
-      </button>
-
-      <div class="title">
-        <span>{{ req.name }}</span>
-      </div>
-
-      <button @click="save" v-show="user.perm.modify" :aria-label="$t('buttons.save')" :title="$t('buttons.save')" id="save-button" class="action">
-        <i class="material-icons">save</i>
-      </button>
-    </div>
-
-    <div id="breadcrumbs">
-      <span><i class="material-icons">home</i></span>
-
-      <span v-for="(link, index) in breadcrumbs" :key="index">
-        <span class="chevron"><i class="material-icons">keyboard_arrow_right</i></span>
-        <span>{{ link.name }}</span>
-      </span>
-    </div>
-
-    <form id="editor"></form>
-  </div>
-</template>
-
-<script>
-import { mapState } from 'vuex'
-import { files as api } from '@/api'
-import buttons from '@/utils/buttons'
-import url from '@/utils/url'
-
-import ace from 'ace-builds/src-min-noconflict/ace.js'
-import modelist from 'ace-builds/src-min-noconflict/ext-modelist.js'
-import 'ace-builds/webpack-resolver'
-import { theme } from '@/utils/constants'
-
-export default {
-  name: 'editor',
-  data: function () {
-    return {}
-  },
-  computed: {
-    ...mapState(['req', 'user']),
-    breadcrumbs () {
-      let parts = this.$route.path.split('/')
-
-      if (parts[0] === '') {
-        parts.shift()
-      }
-
-      if (parts[parts.length - 1] === '') {
-        parts.pop()
-      }
-
-      let breadcrumbs = []
-
-      for (let i = 0; i < parts.length; i++) {
-        breadcrumbs.push({ name: decodeURIComponent(parts[i]) })
-      }
-
-      breadcrumbs.shift()
-
-      if (breadcrumbs.length > 3) {
-        while (breadcrumbs.length !== 4) {
-          breadcrumbs.shift()
-        }
-
-        breadcrumbs[0].name = '...'
-      }
-
-      return breadcrumbs
-    }
-  },
-  created () {
-    window.addEventListener('keydown', this.keyEvent)
-  },
-  beforeDestroy () {
-    window.removeEventListener('keydown', this.keyEvent)
-    this.editor.destroy();
-  },
-  mounted: function () {    
-    const fileContent = this.req.content || '';
-
-    this.editor = ace.edit('editor', {
-      value: fileContent,
-      showPrintMargin: false,
-      readOnly: this.req.type === 'textImmutable',
-      theme: 'ace/theme/chrome',
-      mode: modelist.getModeForPath(this.req.name).mode,
-      wrap: true
-    })
-
-    if (theme == 'dark') {
-      this.editor.setTheme("ace/theme/twilight");
-    }
-  },
-  methods: {
-    back () {
-      let uri = url.removeLastDir(this.$route.path) + '/'
-      this.$router.push({ path: uri })
-    },
-    keyEvent (event) {
-      if (!event.ctrlKey && !event.metaKey) {
-        return
-      }
-
-      if (String.fromCharCode(event.which).toLowerCase() !== 's') {
-        return
-      }
-
-      event.preventDefault()
-      this.save()
-    },
-    async save () {
-      const button = 'save'
-      buttons.loading('save')
-
-      try {
-        await api.put(this.$route.path, this.editor.getValue())
-        buttons.success(button)
-      } catch (e) {
-        buttons.done(button)
-        this.$showError(e)
-      }
-    }
-  }
-}
-</script>

frontend/src/components/files/ExtendedImage.vue

@@ -10,40 +10,33 @@
     @mouseup="mouseUp"
     @wheel="wheelMove"
   >
-    <img src="" class="image-ex-img image-ex-img-center" ref="imgex" @load="onLoad">
+    <img
+      src=""
+      class="image-ex-img image-ex-img-center"
+      ref="imgex"
+      @load="onLoad"
+    />
   </div>
 </template>
 <script>
-import throttle from 'lodash.throttle'
-import UTIF from 'utif'
+import throttle from "lodash.throttle";
+import UTIF from "utif";
 
 export default {
   props: {
     src: String,
     moveDisabledTime: {
       type: Number,
-      default: () => 200
-    },
-    maxScale: {
-      type: Number,
-      default: () => 4
-    },
-    minScale: {
-      type: Number,
-      default: () => 0.25
+      default: () => 200,
     },
     classList: {
       type: Array,
-      default: () => []
+      default: () => [],
     },
     zoomStep: {
       type: Number,
-      default: () => 0.25
+      default: () => 0.25,
     },
-    autofill: {
-      type: Boolean,
-      default: () => false
-    }
   },
   data() {
     return {
@@ -57,204 +50,229 @@ export default {
       imageLoaded: false,
       position: {
         center: { x: 0, y: 0 },
-        relative: { x: 0, y: 0 }
-      }
-    }
+        relative: { x: 0, y: 0 },
+      },
+      maxScale: 4,
+      minScale: 0.25,
+    };
   },
   mounted() {
     if (!this.decodeUTIF()) {
-      this.$refs.imgex.src = this.src
+      this.$refs.imgex.src = this.src;
     }
-    let container = this.$refs.container
-    this.classList.forEach(className => container.classList.add(className))
+    let container = this.$refs.container;
+    this.classList.forEach((className) => container.classList.add(className));
     // set width and height if they are zero
     if (getComputedStyle(container).width === "0px") {
-      container.style.width = "100%"
+      container.style.width = "100%";
     }
     if (getComputedStyle(container).height === "0px") {
-      container.style.height = "100%"
+      container.style.height = "100%";
     }
 
-    window.addEventListener('resize', this.onResize)
+    window.addEventListener("resize", this.onResize);
   },
-  beforeDestroy () {
-    window.removeEventListener('resize', this.onResize)
-    document.removeEventListener('mouseup', this.onMouseUp)
+  beforeDestroy() {
+    window.removeEventListener("resize", this.onResize);
+    document.removeEventListener("mouseup", this.onMouseUp);
   },
   watch: {
     src: function () {
-      this.scale = 1
-      this.setZoom()
-      this.setCenter()
-    }
+      if (!this.decodeUTIF()) {
+        this.$refs.imgex.src = this.src;
+      }
+
+      this.scale = 1;
+      this.setZoom();
+      this.setCenter();
+    },
   },
   methods: {
     // Modified from UTIF.replaceIMG
     decodeUTIF() {
-      const sufs = ["tif", "tiff", "dng", "cr2", "nef"]
-      let suff = document.location.pathname.split(".").pop().toLowerCase()
-      if (sufs.indexOf(suff) == -1) return false
-      let xhr = new XMLHttpRequest()
-      UTIF._xhrs.push(xhr)
-      UTIF._imgs.push(this.$refs.imgex)
-      xhr.open("GET", this.src)
-      xhr.responseType = "arraybuffer"
-      xhr.onload = UTIF._imgLoaded
-      xhr.send()
-      return true
+      const sufs = ["tif", "tiff", "dng", "cr2", "nef"];
+      let suff = document.location.pathname.split(".").pop().toLowerCase();
+      if (sufs.indexOf(suff) == -1) return false;
+      let xhr = new XMLHttpRequest();
+      UTIF._xhrs.push(xhr);
+      UTIF._imgs.push(this.$refs.imgex);
+      xhr.open("GET", this.src);
+      xhr.responseType = "arraybuffer";
+      xhr.onload = UTIF._imgLoaded;
+      xhr.send();
+      return true;
     },
     onLoad() {
-      let img = this.$refs.imgex
+      let img = this.$refs.imgex;
 
-      this.imageLoaded = true
+      this.imageLoaded = true;
 
       if (img === undefined) {
-        return
+        return;
       }
 
-      img.classList.remove('image-ex-img-center')
-      this.setCenter()
-      img.classList.add('image-ex-img-ready')
+      img.classList.remove("image-ex-img-center");
+      this.setCenter();
+      img.classList.add("image-ex-img-ready");
 
-      document.addEventListener('mouseup', this.onMouseUp)
+      document.addEventListener("mouseup", this.onMouseUp);
+
+      let realSize = img.naturalWidth;
+      let displaySize = img.offsetWidth;
+
+      // Image is in portrait orientation
+      if (img.naturalHeight > img.naturalWidth) {
+        realSize = img.naturalHeight;
+        displaySize = img.offsetHeight;
+      }
+
+      // Scale needed to display the image on full size
+      const fullScale = realSize / displaySize;
+
+      // Full size plus additional zoom
+      this.maxScale = fullScale + 4;
     },
     onMouseUp() {
-      this.inDrag = false
+      this.inDrag = false;
     },
-    onResize: throttle(function() {
+    onResize: throttle(function () {
       if (this.imageLoaded) {
-        this.setCenter()
-        this.doMove(this.position.relative.x, this.position.relative.y)
+        this.setCenter();
+        this.doMove(this.position.relative.x, this.position.relative.y);
       }
     }, 100),
     setCenter() {
-      let container = this.$refs.container
-      let img = this.$refs.imgex
+      let container = this.$refs.container;
+      let img = this.$refs.imgex;
 
-      this.position.center.x = Math.floor((container.clientWidth - img.clientWidth) / 2)
-      this.position.center.y = Math.floor((container.clientHeight - img.clientHeight) / 2)
+      this.position.center.x = Math.floor(
+        (container.clientWidth - img.clientWidth) / 2
+      );
+      this.position.center.y = Math.floor(
+        (container.clientHeight - img.clientHeight) / 2
+      );
 
-      img.style.left = this.position.center.x + 'px'
-      img.style.top = this.position.center.y + 'px'
+      img.style.left = this.position.center.x + "px";
+      img.style.top = this.position.center.y + "px";
     },
     mousedownStart(event) {
-      this.lastX = null
-      this.lastY = null
-      this.inDrag = true
-      event.preventDefault()
+      this.lastX = null;
+      this.lastY = null;
+      this.inDrag = true;
+      event.preventDefault();
     },
     mouseMove(event) {
-      if (!this.inDrag) return
-      this.doMove(event.movementX, event.movementY)
-      event.preventDefault()
+      if (!this.inDrag) return;
+      this.doMove(event.movementX, event.movementY);
+      event.preventDefault();
     },
     mouseUp(event) {
-      this.inDrag = false
-      event.preventDefault()
+      this.inDrag = false;
+      event.preventDefault();
     },
     touchStart(event) {
-      this.lastX = null
-      this.lastY = null
-      this.lastTouchDistance = null
+      this.lastX = null;
+      this.lastY = null;
+      this.lastTouchDistance = null;
       if (event.targetTouches.length < 2) {
         setTimeout(() => {
-          this.touches = 0
-        }, 300)
-        this.touches++
+          this.touches = 0;
+        }, 300);
+        this.touches++;
         if (this.touches > 1) {
-          this.zoomAuto(event)
+          this.zoomAuto(event);
         }
-      }    
-      event.preventDefault()
+      }
+      event.preventDefault();
     },
     zoomAuto(event) {
       switch (this.scale) {
         case 1:
-          this.scale = 2
-          break
+          this.scale = 2;
+          break;
         case 2:
-          this.scale = 4
-          break
+          this.scale = 4;
+          break;
         default:
         case 4:
-          this.scale = 1
-          this.setCenter()
-          break
+          this.scale = 1;
+          this.setCenter();
+          break;
       }
-      this.setZoom()
-      event.preventDefault()
+      this.setZoom();
+      event.preventDefault();
     },
     touchMove(event) {
-      event.preventDefault()
+      event.preventDefault();
       if (this.lastX === null) {
-        this.lastX = event.targetTouches[0].pageX
-        this.lastY = event.targetTouches[0].pageY
-        return
+        this.lastX = event.targetTouches[0].pageX;
+        this.lastY = event.targetTouches[0].pageY;
+        return;
       }
-      let step = this.$refs.imgex.width / 5
+      let step = this.$refs.imgex.width / 5;
       if (event.targetTouches.length === 2) {
-        this.moveDisabled = true
-        clearTimeout(this.disabledTimer)
+        this.moveDisabled = true;
+        clearTimeout(this.disabledTimer);
         this.disabledTimer = setTimeout(
           () => (this.moveDisabled = false),
           this.moveDisabledTime
-        )
+        );
 
-        let p1 = event.targetTouches[0]
-        let p2 = event.targetTouches[1]
+        let p1 = event.targetTouches[0];
+        let p2 = event.targetTouches[1];
         let touchDistance = Math.sqrt(
           Math.pow(p2.pageX - p1.pageX, 2) + Math.pow(p2.pageY - p1.pageY, 2)
-        )
+        );
         if (!this.lastTouchDistance) {
-          this.lastTouchDistance = touchDistance
-          return
+          this.lastTouchDistance = touchDistance;
+          return;
         }
-        this.scale += (touchDistance - this.lastTouchDistance) / step
-        this.lastTouchDistance = touchDistance
-        this.setZoom()
+        this.scale += (touchDistance - this.lastTouchDistance) / step;
+        this.lastTouchDistance = touchDistance;
+        this.setZoom();
       } else if (event.targetTouches.length === 1) {
-        if (this.moveDisabled) return
-        let x = event.targetTouches[0].pageX - this.lastX
-        let y = event.targetTouches[0].pageY - this.lastY
-        if (Math.abs(x) >= step && Math.abs(y) >= step) return
-        this.lastX = event.targetTouches[0].pageX
-        this.lastY = event.targetTouches[0].pageY
-        this.doMove(x, y)
+        if (this.moveDisabled) return;
+        let x = event.targetTouches[0].pageX - this.lastX;
+        let y = event.targetTouches[0].pageY - this.lastY;
+        if (Math.abs(x) >= step && Math.abs(y) >= step) return;
+        this.lastX = event.targetTouches[0].pageX;
+        this.lastY = event.targetTouches[0].pageY;
+        this.doMove(x, y);
       }
     },
     doMove(x, y) {
-      let style = this.$refs.imgex.style
-      let posX = this.pxStringToNumber(style.left) + x
-      let posY = this.pxStringToNumber(style.top) + y
+      let style = this.$refs.imgex.style;
+      let posX = this.pxStringToNumber(style.left) + x;
+      let posY = this.pxStringToNumber(style.top) + y;
 
-      style.left = posX + 'px'
-      style.top = posY + 'px'
+      style.left = posX + "px";
+      style.top = posY + "px";
 
-      this.position.relative.x =  Math.abs(this.position.center.x - posX)
-      this.position.relative.y =  Math.abs(this.position.center.y - posY)
+      this.position.relative.x = Math.abs(this.position.center.x - posX);
+      this.position.relative.y = Math.abs(this.position.center.y - posY);
 
       if (posX < this.position.center.x) {
-        this.position.relative.x = this.position.relative.x * -1
+        this.position.relative.x = this.position.relative.x * -1;
       }
 
       if (posY < this.position.center.y) {
-        this.position.relative.y = this.position.relative.y * -1
+        this.position.relative.y = this.position.relative.y * -1;
       }
     },
     wheelMove(event) {
-      this.scale += (event.wheelDeltaY / 100) * this.zoomStep
-      this.setZoom()
+      this.scale += -Math.sign(event.deltaY) * this.zoomStep;
+      this.setZoom();
     },
     setZoom() {
-      this.scale = this.scale < this.minScale ? this.minScale : this.scale
-      this.scale = this.scale > this.maxScale ? this.maxScale : this.scale
-      this.$refs.imgex.style.transform = `scale(${this.scale})`
+      this.scale = this.scale < this.minScale ? this.minScale : this.scale;
+      this.scale = this.scale > this.maxScale ? this.maxScale : this.scale;
+      this.$refs.imgex.style.transform = `scale(${this.scale})`;
     },
     pxStringToNumber(style) {
-      return +style.replace("px", "")
-    }
-  }
-}
+      return +style.replace("px", "");
+    },
+  },
+};
 </script>
 <style>
 .image-ex-container {

frontend/src/components/files/Listing.vue

@@ -1,464 +0,0 @@
-<template>
-  <div v-if="(req.numDirs + req.numFiles) == 0">
-    <h2 class="message">
-      <i class="material-icons">sentiment_dissatisfied</i>
-      <span>{{ $t('files.lonely') }}</span>
-    </h2>
-    <input style="display:none" type="file" id="upload-input" @change="uploadInput($event)" multiple>
-    <input style="display:none" type="file" id="upload-folder-input" @change="uploadInput($event)" webkitdirectory multiple>
-  </div>
-  <div v-else id="listing"
-    :class="user.viewMode">
-    <div>
-      <div class="item header">
-        <div></div>
-        <div>
-          <p :class="{ active: nameSorted }" class="name"
-            role="button"
-            tabindex="0"
-            @click="sort('name')"
-            :title="$t('files.sortByName')"
-            :aria-label="$t('files.sortByName')">
-            <span>{{ $t('files.name') }}</span>
-            <i class="material-icons">{{ nameIcon }}</i>
-          </p>
-
-          <p :class="{ active: sizeSorted }" class="size"
-            role="button"
-            tabindex="0"
-            @click="sort('size')"
-            :title="$t('files.sortBySize')"
-            :aria-label="$t('files.sortBySize')">
-            <span>{{ $t('files.size') }}</span>
-            <i class="material-icons">{{ sizeIcon }}</i>
-          </p>
-          <p :class="{ active: modifiedSorted }" class="modified"
-            role="button"
-            tabindex="0"
-            @click="sort('modified')"
-            :title="$t('files.sortByLastModified')"
-            :aria-label="$t('files.sortByLastModified')">
-            <span>{{ $t('files.lastModified') }}</span>
-            <i class="material-icons">{{ modifiedIcon }}</i>
-          </p>
-        </div>
-      </div>
-    </div>
-
-    <h2 v-if="req.numDirs > 0">{{ $t('files.folders') }}</h2>
-    <div v-if="req.numDirs > 0">
-      <item v-for="(item) in dirs"
-        :key="base64(item.name)"
-        v-bind:index="item.index"
-        v-bind:name="item.name"
-        v-bind:isDir="item.isDir"
-        v-bind:url="item.url"
-        v-bind:modified="item.modified"
-        v-bind:type="item.type"
-        v-bind:size="item.size">
-      </item>
-    </div>
-
-    <h2 v-if="req.numFiles > 0">{{ $t('files.files') }}</h2>
-    <div v-if="req.numFiles > 0">
-      <item v-for="(item) in files"
-        :key="base64(item.name)"
-        v-bind:index="item.index"
-        v-bind:name="item.name"
-        v-bind:isDir="item.isDir"
-        v-bind:url="item.url"
-        v-bind:modified="item.modified"
-        v-bind:type="item.type"
-        v-bind:size="item.size">
-      </item>
-    </div>
-
-    <input style="display:none" type="file" id="upload-input" @change="uploadInput($event)" multiple>
-    <input style="display:none" type="file" id="upload-folder-input" @change="uploadInput($event)" webkitdirectory multiple>
-
-    <div :class="{ active: $store.state.multiple }" id="multiple-selection">
-    <p>{{ $t('files.multipleSelectionEnabled') }}</p>
-      <div @click="$store.commit('multiple', false)" tabindex="0" role="button" :title="$t('files.clear')" :aria-label="$t('files.clear')" class="action">
-        <i class="material-icons">clear</i>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script>
-import { mapState, mapMutations } from 'vuex'
-import Item from './ListingItem'
-import css from '@/utils/css'
-import { users, files as api } from '@/api'
-import * as upload  from '@/utils/upload'
-
-export default {
-  name: 'listing',
-  components: { Item },
-  data: function () {
-    return {
-      showLimit: 50,
-      dragCounter: 0
-    }
-  },
-  computed: {
-    ...mapState(['req', 'selected', 'user', 'show']),
-    nameSorted () {
-      return (this.req.sorting.by === 'name')
-    },
-    sizeSorted () {
-      return (this.req.sorting.by === 'size')
-    },
-    modifiedSorted () {
-      return (this.req.sorting.by === 'modified')
-    },
-    ascOrdered () {
-      return this.req.sorting.asc
-    },
-    items () {
-      const dirs = []
-      const files = []
-
-      this.req.items.forEach((item) => {
-        if (item.isDir) {
-          dirs.push(item)
-        } else {
-          files.push(item)
-        }
-      })
-
-      return { dirs, files }
-    },
-    dirs () {
-      return this.items.dirs.slice(0, this.showLimit)
-    },
-    files () {
-      let showLimit = this.showLimit - this.items.dirs.length
-
-      if (showLimit < 0) showLimit = 0
-
-      return this.items.files.slice(0, showLimit)
-    },
-    nameIcon () {
-      if (this.nameSorted && !this.ascOrdered) {
-        return 'arrow_upward'
-      }
-
-      return 'arrow_downward'
-    },
-    sizeIcon () {
-      if (this.sizeSorted && this.ascOrdered) {
-        return 'arrow_downward'
-      }
-
-      return 'arrow_upward'
-    },
-    modifiedIcon () {
-      if (this.modifiedSorted && this.ascOrdered) {
-        return 'arrow_downward'
-      }
-
-      return 'arrow_upward'
-    }
-  },
-  mounted: function () {
-    // Check the columns size for the first time.
-    this.resizeEvent()
-
-    // Add the needed event listeners to the window and document.
-    window.addEventListener('keydown', this.keyEvent)
-    window.addEventListener('resize', this.resizeEvent)
-    window.addEventListener('scroll', this.scrollEvent)
-    document.addEventListener('dragover', this.preventDefault)
-    document.addEventListener('dragenter', this.dragEnter)
-    document.addEventListener('dragleave', this.dragLeave)
-    document.addEventListener('drop', this.drop)
-  },
-  beforeDestroy () {
-    // Remove event listeners before destroying this page.
-    window.removeEventListener('keydown', this.keyEvent)
-    window.removeEventListener('resize', this.resizeEvent)
-    window.removeEventListener('scroll', this.scrollEvent)
-    document.removeEventListener('dragover', this.preventDefault)
-    document.removeEventListener('dragenter', this.dragEnter)
-    document.removeEventListener('dragleave', this.dragLeave)
-    document.removeEventListener('drop', this.drop)
-  },
-  methods: {
-    ...mapMutations([ 'updateUser', 'addSelected' ]),
-    base64: function (name) {
-      return window.btoa(unescape(encodeURIComponent(name)))
-    },
-    keyEvent (event) {
-      if (this.show !== null) {
-        return
-      }
-
-      if (!event.ctrlKey && !event.metaKey) {
-        return
-      }
-
-      let key = String.fromCharCode(event.which).toLowerCase()
-
-      switch (key) {
-        case 'f':
-          event.preventDefault()
-          this.$store.commit('showHover', 'search')
-          break
-        case 'c':
-        case 'x':
-          this.copyCut(event, key)
-          break
-        case 'v':
-          this.paste(event)
-          break
-        case 'a':
-          event.preventDefault()
-          for (let file of this.items.files) {
-            if (this.$store.state.selected.indexOf(file.index) === -1) {
-              this.addSelected(file.index)
-            }
-          }
-          for (let dir of this.items.dirs) {
-            if (this.$store.state.selected.indexOf(dir.index) === -1) {
-              this.addSelected(dir.index)
-            }
-          }
-          break
-      }
-    },
-    preventDefault (event) {
-      // Wrapper around prevent default.
-      event.preventDefault()
-    },
-    copyCut (event, key) {
-      if (event.target.tagName.toLowerCase() === 'input') {
-        return
-      }
-
-      let items = []
-
-      for (let i of this.selected) {
-        items.push({
-          from: this.req.items[i].url,
-          name: encodeURIComponent(this.req.items[i].name)
-        })
-      }
-
-      if (items.length == 0) {
-        return
-      }
-
-      this.$store.commit('updateClipboard', {
-        key: key,
-        items: items,
-        path: this.$route.path
-      })
-    },
-    paste (event) {
-      if (event.target.tagName.toLowerCase() === 'input') {
-        return
-      }
-
-      let items = []
-
-      for (let item of this.$store.state.clipboard.items) {
-        const from = item.from.endsWith('/') ? item.from.slice(0, -1) : item.from
-        const to = this.$route.path + item.name
-        items.push({ from, to, name: item.name })
-      }
-
-      if (items.length === 0) {
-        return
-      }
-
-      let action = (overwrite, rename) => {
-        api.copy(items, overwrite, rename).then(() => {
-          this.$store.commit('setReload', true)
-        }).catch(this.$showError)
-      }
-
-      if (this.$store.state.clipboard.key === 'x') {
-        action = (overwrite, rename) => {
-          api.move(items, overwrite, rename).then(() => {
-            this.$store.commit('resetClipboard')
-            this.$store.commit('setReload', true)
-          }).catch(this.$showError)
-        }
-      }
-
-      if (this.$store.state.clipboard.path == this.$route.path) {
-        action(false, true)
-
-        return
-      }
-
-      let conflict = upload.checkConflict(items, this.req.items)
-
-      let overwrite = false
-      let rename = false
-
-      if (conflict) {
-        this.$store.commit('showHover', {
-          prompt: 'replace-rename',
-          confirm: (event, option) => {
-            overwrite = option == 'overwrite'
-            rename = option == 'rename'
-
-            event.preventDefault()
-            this.$store.commit('closeHovers')
-            action(overwrite, rename)
-          }
-        })
-
-        return
-      }
-
-      action(overwrite, rename)
-    },
-    resizeEvent () {
-      // Update the columns size based on the window width.
-      let columns = Math.floor(document.querySelector('main').offsetWidth / 300)
-      let items = css(['#listing.mosaic .item', '.mosaic#listing .item'])
-      if (columns === 0) columns = 1
-      items.style.width = `calc(${100 / columns}% - 1em)`
-    },
-    scrollEvent () {
-      if ((window.innerHeight + window.scrollY) >= document.body.offsetHeight) {
-        this.showLimit += 50
-      }
-    },
-    dragEnter () {
-      this.dragCounter++
-
-      // When the user starts dragging an item, put every
-      // file on the listing with 50% opacity.
-      let items = document.getElementsByClassName('item')
-
-      Array.from(items).forEach(file => {
-        file.style.opacity = 0.5
-      })
-    },
-    dragLeave () {
-      this.dragCounter--
-
-      if (this.dragCounter == 0) {
-        this.resetOpacity()
-      }
-    },
-    drop: async function (event) {
-      event.preventDefault()
-      this.dragCounter = 0
-      this.resetOpacity()
-
-      let dt = event.dataTransfer
-      let el = event.target
-
-      if (dt.files.length <= 0) return
-
-      for (let i = 0; i < 5; i++) {
-        if (el !== null && !el.classList.contains('item')) {
-          el = el.parentElement
-        }
-      }
-
-      let base = ''
-      if (el !== null && el.classList.contains('item') && el.dataset.dir === 'true') {
-        base = el.querySelector('.name').innerHTML + '/'
-      }
-
-      let files = await upload.scanFiles(dt)
-      let path = this.$route.path.endsWith('/') ? this.$route.path + base : this.$route.path + '/' + base
-      let items = this.req.items
-
-      if (base !== '') {
-        try {
-          items = (await api.fetch(path)).items
-        } catch (error) {
-          this.$showError(error)
-        }
-      }
-
-      let conflict = upload.checkConflict(files, items)
-
-      if (conflict) {
-        this.$store.commit('showHover', {
-          prompt: 'replace',
-          confirm: (event) => {
-            event.preventDefault()
-            this.$store.commit('closeHovers')
-            upload.handleFiles(files, path, true)
-          }
-        })
-
-        return
-      }
-
-      upload.handleFiles(files, path)
-    },
-    uploadInput (event) {
-      this.$store.commit('closeHovers')
-
-      let files = event.currentTarget.files
-      let folder_upload = files[0].webkitRelativePath !== undefined && files[0].webkitRelativePath !== ''
-
-      if (folder_upload) {
-        for (let i = 0; i < files.length; i++) {
-          let file = files[i]
-          files[i].fullPath = file.webkitRelativePath
-        }
-      }
-
-      let path = this.$route.path.endsWith('/') ? this.$route.path : this.$route.path + '/'
-      let conflict = upload.checkConflict(files, this.req.items)
-
-      if (conflict) {
-        this.$store.commit('showHover', {
-          prompt: 'replace',
-          confirm: (event) => {
-            event.preventDefault()
-            this.$store.commit('closeHovers')
-            upload.handleFiles(files, path, true)
-          }
-        })
-
-        return
-      }
-
-      upload.handleFiles(files, path)
-    },
-    resetOpacity () {
-      let items = document.getElementsByClassName('item')
-
-      Array.from(items).forEach(file => {
-        file.style.opacity = 1
-      })
-    },
-    async sort (by) {
-      let asc = false
-
-      if (by === 'name') {
-        if (this.nameIcon === 'arrow_upward') {
-          asc = true
-        }
-      } else if (by === 'size') {
-        if (this.sizeIcon === 'arrow_upward') {
-          asc = true
-        }
-      } else if (by === 'modified') {
-        if (this.modifiedIcon === 'arrow_upward') {
-          asc = true
-        }
-      }
-
-      try {
-        await users.update({ id: this.user.id, sorting: { by, asc } }, ['sorting'])
-      } catch (e) {
-        this.$showError(e)
-      }
-
-      this.$store.commit('setReload', true)
-    }
-  }
-}
-</script>

frontend/src/components/files/ListingItem.vue

@@ -1,19 +1,24 @@
 <template>
-  <div class="item"
-  role="button"
-  tabindex="0"
-  :draggable="isDraggable"
-  @dragstart="dragStart"
-  @dragover="dragOver"
-  @drop="drop"
-  @click="itemClick"
-  @dblclick="dblclick"
-  @touchstart="touchstart"
-  :data-dir="isDir"
-  :aria-label="name"
-  :aria-selected="isSelected">
+  <div
+    class="item"
+    role="button"
+    tabindex="0"
+    :draggable="isDraggable"
+    @dragstart="dragStart"
+    @dragover="dragOver"
+    @drop="drop"
+    @click="itemClick"
+    @dblclick="dblclick"
+    @touchstart="touchstart"
+    :data-dir="isDir"
+    :aria-label="name"
+    :aria-selected="isSelected"
+  >
     <div>
-      <img v-if="type==='image' && isThumbsEnabled && !isSharing" v-lazy="thumbnailUrl">
+      <img
+        v-if="readOnly == undefined && type === 'image' && isThumbsEnabled"
+        v-lazy="thumbnailUrl"
+      />
       <i v-else class="material-icons">{{ icon }}</i>
     </div>
 
@@ -31,200 +36,221 @@
 </template>
 
 <script>
-import { baseURL, enableThumbs } from '@/utils/constants'
-import { mapMutations, mapGetters, mapState } from 'vuex'
-import filesize from 'filesize'
-import moment from 'moment'
-import { files as api } from '@/api'
-import * as upload  from '@/utils/upload'
+import { baseURL, enableThumbs } from "@/utils/constants";
+import { mapMutations, mapGetters, mapState } from "vuex";
+import filesize from "filesize";
+import moment from "moment";
+import { files as api } from "@/api";
+import * as upload from "@/utils/upload";
 
 export default {
-  name: 'item',
+  name: "item",
   data: function () {
     return {
-      touches: 0
-    }
+      touches: 0,
+    };
   },
-  props: ['name', 'isDir', 'url', 'type', 'size', 'modified', 'index'],
+  props: [
+    "name",
+    "isDir",
+    "url",
+    "type",
+    "size",
+    "modified",
+    "index",
+    "readOnly",
+  ],
   computed: {
-    ...mapState(['user', 'selected', 'req', 'jwt']),
-    ...mapGetters(['selectedCount', 'isSharing']),
-    singleClick () {
-      if (this.isSharing) return false
-      return this.user.singleClick
+    ...mapState(["user", "selected", "req", "jwt"]),
+    ...mapGetters(["selectedCount"]),
+    singleClick() {
+      return this.readOnly == undefined && this.user.singleClick;
     },
-    isSelected () {
-      return (this.selected.indexOf(this.index) !== -1)
+    isSelected() {
+      return this.selected.indexOf(this.index) !== -1;
     },
-    icon () {
-      if (this.isDir) return 'folder'
-      if (this.type === 'image') return 'insert_photo'
-      if (this.type === 'audio') return 'volume_up'
-      if (this.type === 'video') return 'movie'
-      return 'insert_drive_file'
+    icon() {
+      if (this.isDir) return "folder";
+      if (this.type === "image") return "insert_photo";
+      if (this.type === "audio") return "volume_up";
+      if (this.type === "video") return "movie";
+      return "insert_drive_file";
     },
-    isDraggable () {
-      return !this.isSharing && this.user.perm.rename
+    isDraggable() {
+      return this.readOnly == undefined && this.user.perm.rename;
     },
-    canDrop () {
-      if (!this.isDir || this.isSharing) return false
+    canDrop() {
+      if (!this.isDir || this.readOnly !== undefined) return false;
 
       for (let i of this.selected) {
         if (this.req.items[i].url === this.url) {
-          return false
+          return false;
         }
       }
 
-      return true
+      return true;
     },
-    thumbnailUrl () {
-      const path = this.url.replace(/^\/files\//, '')
-      return `${baseURL}/api/preview/thumb/${path}?auth=${this.jwt}&inline=true`
+    thumbnailUrl() {
+      const path = this.url.replace(/^\/files\//, "");
+
+      // reload the image when the file is replaced
+      const key = Date.parse(this.modified);
+
+      return `${baseURL}/api/preview/thumb/${path}?auth=${this.jwt}&inline=true&k=${key}`;
+    },
+    isThumbsEnabled() {
+      return enableThumbs;
     },
-    isThumbsEnabled () {
-      return enableThumbs
-    }
   },
   methods: {
-    ...mapMutations(['addSelected', 'removeSelected', 'resetSelected']),
+    ...mapMutations(["addSelected", "removeSelected", "resetSelected"]),
     humanSize: function () {
-      return filesize(this.size)
+      return filesize(this.size);
     },
     humanTime: function () {
-      return moment(this.modified).fromNow()
+      return moment(this.modified).fromNow();
     },
     dragStart: function () {
       if (this.selectedCount === 0) {
-        this.addSelected(this.index)
-        return
+        this.addSelected(this.index);
+        return;
       }
 
       if (!this.isSelected) {
-        this.resetSelected()
-        this.addSelected(this.index)
+        this.resetSelected();
+        this.addSelected(this.index);
       }
     },
     dragOver: function (event) {
-      if (!this.canDrop) return
+      if (!this.canDrop) return;
 
-      event.preventDefault()
-      let el = event.target
+      event.preventDefault();
+      let el = event.target;
 
       for (let i = 0; i < 5; i++) {
-        if (!el.classList.contains('item')) {
-          el = el.parentElement
+        if (!el.classList.contains("item")) {
+          el = el.parentElement;
         }
       }
 
-      el.style.opacity = 1
+      el.style.opacity = 1;
     },
     drop: async function (event) {
-      if (!this.canDrop) return
-      event.preventDefault()
+      if (!this.canDrop) return;
+      event.preventDefault();
 
-      if (this.selectedCount === 0) return
+      if (this.selectedCount === 0) return;
 
-      let el = event.target
+      let el = event.target;
       for (let i = 0; i < 5; i++) {
-        if (el !== null && !el.classList.contains('item')) {
-          el = el.parentElement
+        if (el !== null && !el.classList.contains("item")) {
+          el = el.parentElement;
         }
       }
 
-      let items = []
+      let items = [];
 
       for (let i of this.selected) {
         items.push({
           from: this.req.items[i].url,
           to: this.url + this.req.items[i].name,
-          name: this.req.items[i].name
-        })
-      }      
+          name: this.req.items[i].name,
+        });
+      }
 
-      let base = el.querySelector('.name').innerHTML + '/'
-      let path = this.$route.path + base
-      let baseItems = (await api.fetch(path)).items
+      let base = el.querySelector(".name").innerHTML + "/";
+      let path = this.$route.path + base;
+      let baseItems = (await api.fetch(path)).items;
 
       let action = (overwrite, rename) => {
-        api.move(items, overwrite, rename).then(() => {
-          this.$store.commit('setReload', true)
-        }).catch(this.$showError)
-      }
+        api
+          .move(items, overwrite, rename)
+          .then(() => {
+            this.$store.commit("setReload", true);
+          })
+          .catch(this.$showError);
+      };
 
-      let conflict = upload.checkConflict(items, baseItems)
+      let conflict = upload.checkConflict(items, baseItems);
 
-      let overwrite = false
-      let rename = false
+      let overwrite = false;
+      let rename = false;
 
       if (conflict) {
-        this.$store.commit('showHover', {
-          prompt: 'replace-rename',
+        this.$store.commit("showHover", {
+          prompt: "replace-rename",
           confirm: (event, option) => {
-            overwrite = option == 'overwrite'
-            rename = option == 'rename'
+            overwrite = option == "overwrite";
+            rename = option == "rename";
 
-            event.preventDefault()
-            this.$store.commit('closeHovers')
-            action(overwrite, rename)
-          }
-        })
+            event.preventDefault();
+            this.$store.commit("closeHovers");
+            action(overwrite, rename);
+          },
+        });
 
-        return
+        return;
       }
 
-      action(overwrite, rename)
+      action(overwrite, rename);
     },
-    itemClick: function(event) {
-      if (this.singleClick && !this.$store.state.multiple) this.open()
-      else this.click(event)
+    itemClick: function (event) {
+      if (this.singleClick && !this.$store.state.multiple) this.open();
+      else this.click(event);
     },
     click: function (event) {
-      if (!this.singleClick && this.selectedCount !== 0) event.preventDefault()
+      if (!this.singleClick && this.selectedCount !== 0) event.preventDefault();
       if (this.$store.state.selected.indexOf(this.index) !== -1) {
-        this.removeSelected(this.index)
-        return
+        this.removeSelected(this.index);
+        return;
       }
 
       if (event.shiftKey && this.selected.length > 0) {
-        let fi = 0
-        let la = 0
+        let fi = 0;
+        let la = 0;
 
         if (this.index > this.selected[0]) {
-          fi = this.selected[0] + 1
-          la = this.index
+          fi = this.selected[0] + 1;
+          la = this.index;
         } else {
-          fi = this.index
-          la = this.selected[0] - 1
+          fi = this.index;
+          la = this.selected[0] - 1;
         }
 
         for (; fi <= la; fi++) {
           if (this.$store.state.selected.indexOf(fi) == -1) {
-            this.addSelected(fi)
+            this.addSelected(fi);
           }
         }
 
-        return
+        return;
       }
 
-      if (!this.singleClick && !event.ctrlKey && !event.metaKey && !this.$store.state.multiple) this.resetSelected()
-      this.addSelected(this.index)
+      if (
+        !this.singleClick &&
+        !event.ctrlKey &&
+        !event.metaKey &&
+        !this.$store.state.multiple
+      )
+        this.resetSelected();
+      this.addSelected(this.index);
     },
     dblclick: function () {
-      if (!this.singleClick) this.open()
+      if (!this.singleClick) this.open();
     },
-    touchstart () {
+    touchstart() {
       setTimeout(() => {
-        this.touches = 0
-      }, 300)
+        this.touches = 0;
+      }, 300);
 
-      this.touches++
+      this.touches++;
       if (this.touches > 1) {
-        this.open()
+        this.open();
       }
     },
     open: function () {
-      this.$router.push({path: this.url})
-    }
-  }
-}
-</script>
+      this.$router.push({ path: this.url });
+    },
+  },
+};
+</script>

frontend/src/components/files/Preview.vue

@@ -1,238 +0,0 @@
-<template>
-  <div id="previewer">
-    <div class="bar">
-      <button @click="back" class="action" :title="$t('files.closePreview')" :aria-label="$t('files.closePreview')" id="close">
-        <i class="material-icons">close</i>
-      </button>
-
-      <div class="title">{{ this.name }}</div>
-
-      <preview-size-button v-if="isResizeEnabled && this.req.type === 'image'" @change-size="toggleSize" v-bind:size="fullSize" :disabled="loading"></preview-size-button>
-      <button @click="openMore" id="more" :aria-label="$t('buttons.more')" :title="$t('buttons.more')" class="action">
-        <i class="material-icons">more_vert</i>
-      </button>
-
-      <div id="dropdown" :class="{ active : showMore }">
-        <rename-button :disabled="loading" v-if="user.perm.rename"></rename-button>
-        <delete-button :disabled="loading" v-if="user.perm.delete"></delete-button>
-        <download-button :disabled="loading" v-if="user.perm.download"></download-button>
-        <info-button :disabled="loading"></info-button>
-      </div>
-    </div>
-
-    <div class="loading" v-if="loading">
-      <div class="spinner">
-        <div class="bounce1"></div>
-        <div class="bounce2"></div>
-        <div class="bounce3"></div>
-      </div>
-    </div>
-
-    <button class="action" @click="prev" v-show="hasPrevious" :aria-label="$t('buttons.previous')" :title="$t('buttons.previous')">
-      <i class="material-icons">chevron_left</i>
-    </button>
-    <button class="action" @click="next" v-show="hasNext" :aria-label="$t('buttons.next')" :title="$t('buttons.next')">
-      <i class="material-icons">chevron_right</i>
-    </button>
-
-    <template v-if="!loading">
-      <div class="preview">
-        <ExtendedImage v-if="req.type == 'image'" :src="raw"></ExtendedImage>
-        <audio v-else-if="req.type == 'audio'" :src="raw" autoplay controls></audio>
-        <video v-else-if="req.type == 'video'" :src="raw" autoplay controls>
-          <track
-            kind="captions"
-            v-for="(sub, index) in subtitles"
-            :key="index"
-            :src="sub"
-            :label="'Subtitle ' + index" :default="index === 0">
-          Sorry, your browser doesn't support embedded videos,
-          but don't worry, you can <a :href="download">download it</a>
-          and watch it with your favorite video player!
-        </video>
-        <object v-else-if="req.extension.toLowerCase() == '.pdf'" class="pdf" :data="raw"></object>
-        <a v-else-if="req.type == 'blob'" :href="download">
-          <h2 class="message">{{ $t('buttons.download') }} <i class="material-icons">file_download</i></h2>
-        </a>
-      </div>
-    </template>
-
-    <div v-show="showMore" @click="resetPrompts" class="overlay"></div>
-  </div>
-</template>
-
-<script>
-import { mapState } from 'vuex'
-import url from '@/utils/url'
-import { baseURL, resizePreview } from '@/utils/constants'
-import { files as api } from '@/api'
-import PreviewSizeButton from '@/components/buttons/PreviewSize'
-import InfoButton from '@/components/buttons/Info'
-import DeleteButton from '@/components/buttons/Delete'
-import RenameButton from '@/components/buttons/Rename'
-import DownloadButton from '@/components/buttons/Download'
-import ExtendedImage from './ExtendedImage'
-
-const mediaTypes = [
-  "image",
-  "video",
-  "audio",
-  "blob"
-]
-
-export default {
-  name: 'preview',
-  components: {
-    PreviewSizeButton,
-    InfoButton,
-    DeleteButton,
-    RenameButton,
-    DownloadButton,
-    ExtendedImage
-  },
-  data: function () {
-    return {
-      previousLink: '',
-      nextLink: '',
-      listing: null,
-      name: '',
-      subtitles: [],
-      fullSize: false
-    }
-  },
-  computed: {
-    ...mapState(['req', 'user', 'oldReq', 'jwt', 'loading', 'show']),
-    hasPrevious () {
-      return (this.previousLink !== '')
-    },
-    hasNext () {
-      return (this.nextLink !== '')
-    },
-    download () {
-      return `${baseURL}/api/raw${url.encodePath(this.req.path)}?auth=${this.jwt}`
-    },
-    previewUrl () {
-      if (this.req.type === 'image' && !this.fullSize) {
-        return `${baseURL}/api/preview/big${url.encodePath(this.req.path)}?auth=${this.jwt}`
-      }
-      return `${baseURL}/api/raw${url.encodePath(this.req.path)}?auth=${this.jwt}`
-    },
-    raw () {
-      return `${this.previewUrl}&inline=true`
-    },
-    showMore () {
-      return this.$store.state.show === 'more'
-    },
-    isResizeEnabled () {
-      return resizePreview
-    }
-  },
-  watch: {
-    $route: function () {
-      this.updatePreview()
-    }
-  },
-  async mounted () {
-    window.addEventListener('keydown', this.key)
-    this.$store.commit('setPreviewMode', true)
-    this.listing = this.oldReq.items
-    this.$root.$on('preview-deleted', this.deleted)
-    this.updatePreview()
-  },
-  beforeDestroy () {
-    window.removeEventListener('keydown', this.key)
-    this.$store.commit('setPreviewMode', false)
-    this.$root.$off('preview-deleted', this.deleted)
-  },
-  methods: {
-    deleted () {
-      this.listing = this.listing.filter(item => item.name !== this.name)
-
-      if (this.hasNext) {
-        this.next()
-      } else if (!this.hasPrevious && !this.hasNext) {
-        this.back()
-      } else {
-        this.prev()
-      }
-    },
-    back () {
-      this.$store.commit('setPreviewMode', false)
-      let uri = url.removeLastDir(this.$route.path) + '/'
-      this.$router.push({ path: uri })
-    },
-    prev () {
-      this.$router.push({ path: this.previousLink })
-    },
-    next () {
-      this.$router.push({ path: this.nextLink })
-    },
-    key (event) {
-
-      if (this.show !== null) {
-        return
-      }
-
-      if (event.which === 13 || event.which === 39) { // right arrow
-        if (this.hasNext) this.next()
-      } else if (event.which === 37) { // left arrow
-        if (this.hasPrevious) this.prev()
-      } else if (event.which === 27) { // esc
-        this.back()
-      }
-    },
-    async updatePreview () {
-      if (this.req.subtitles) {
-        this.subtitles = this.req.subtitles.map(sub => `${baseURL}/api/raw${sub}?auth=${this.jwt}&inline=true`)
-      }
-
-      let dirs = this.$route.fullPath.split("/")
-      this.name = decodeURIComponent(dirs[dirs.length - 1])
-
-      if (!this.listing) {
-        try {
-          const path = url.removeLastDir(this.$route.path)
-          const res = await api.fetch(path)
-          this.listing = res.items
-        } catch (e) {
-          this.$showError(e)
-        }
-      }
-
-      this.previousLink = ''
-      this.nextLink = ''
-
-      for (let i = 0; i < this.listing.length; i++) {
-        if (this.listing[i].name !== this.name) {
-          continue
-        }
-
-        for (let j = i - 1; j >= 0; j--) {
-          if (mediaTypes.includes(this.listing[j].type)) {
-            this.previousLink = this.listing[j].url
-            break
-          }
-        }
-
-        for (let j = i + 1; j < this.listing.length; j++) {
-          if (mediaTypes.includes(this.listing[j].type)) {
-            this.nextLink = this.listing[j].url
-            break
-          }
-        }
-
-        return
-      }
-    },
-    openMore () {
-      this.$store.commit('showHover', 'more')
-    },
-    resetPrompts () {
-      this.$store.commit('closeHovers')
-    },
-    toggleSize () {
-      this.fullSize = !this.fullSize
-    }
-  }
-}
-</script>

frontend/src/components/header/Action.vue

@@ -0,0 +1,25 @@
+<template>
+  <button @click="action" :aria-label="label" :title="label" class="action">
+    <i class="material-icons">{{ icon }}</i>
+    <span>{{ label }}</span>
+    <span v-if="counter > 0" class="counter">{{ counter }}</span>
+  </button>
+</template>
+
+<script>
+export default {
+  name: "action",
+  props: ["icon", "label", "counter", "show"],
+  methods: {
+    action: function () {
+      if (this.show) {
+        this.$store.commit("showHover", this.show);
+      }
+
+      this.$emit("action");
+    },
+  },
+};
+</script>
+
+<style></style>

frontend/src/components/header/HeaderBar.vue

@@ -0,0 +1,58 @@
+<template>
+  <header>
+    <img v-if="showLogo !== undefined" :src="logoURL" />
+    <action
+      v-if="showMenu !== undefined"
+      class="menu-button"
+      icon="menu"
+      :label="$t('buttons.toggleSidebar')"
+      @action="openSidebar()"
+    />
+
+    <slot />
+
+    <div id="dropdown" :class="{ active: this.$store.state.show === 'more' }">
+      <slot name="actions" />
+    </div>
+
+    <action
+      v-if="this.$slots.actions"
+      id="more"
+      icon="more_vert"
+      :label="$t('buttons.more')"
+      @action="$store.commit('showHover', 'more')"
+    />
+
+    <div
+      class="overlay"
+      v-show="this.$store.state.show == 'more'"
+      @click="$store.commit('closeHovers')"
+    />
+  </header>
+</template>
+
+<script>
+import { logoURL } from "@/utils/constants";
+
+import Action from "@/components/header/Action";
+
+export default {
+  name: "header-bar",
+  props: ["showLogo", "showMenu"],
+  components: {
+    Action,
+  },
+  data: function () {
+    return {
+      logoURL,
+    };
+  },
+  methods: {
+    openSidebar() {
+      this.$store.commit("showHover", "sidebar");
+    },
+  },
+};
+</script>
+
+<style></style>

frontend/src/components/prompts/Copy.vue

@@ -1,108 +1,119 @@
 <template>
   <div class="card floating">
     <div class="card-title">
-      <h2>{{ $t('prompts.copy') }}</h2>
+      <h2>{{ $t("prompts.copy") }}</h2>
     </div>
 
     <div class="card-content">
-      <p>{{ $t('prompts.copyMessage') }}</p>
-      <file-list @update:selected="val => dest = val"></file-list>
+      <p>{{ $t("prompts.copyMessage") }}</p>
+      <file-list @update:selected="(val) => (dest = val)"></file-list>
     </div>
 
     <div class="card-action">
-      <button class="button button--flat button--grey"
+      <button
+        class="button button--flat button--grey"
         @click="$store.commit('closeHovers')"
         :aria-label="$t('buttons.cancel')"
-        :title="$t('buttons.cancel')">{{ $t('buttons.cancel') }}</button>
-      <button class="button button--flat"
+        :title="$t('buttons.cancel')"
+      >
+        {{ $t("buttons.cancel") }}
+      </button>
+      <button
+        class="button button--flat"
         @click="copy"
         :aria-label="$t('buttons.copy')"
-        :title="$t('buttons.copy')">{{ $t('buttons.copy') }}</button>
+        :title="$t('buttons.copy')"
+      >
+        {{ $t("buttons.copy") }}
+      </button>
     </div>
   </div>
 </template>
 
 <script>
-import { mapState } from 'vuex'
-import FileList from './FileList'
-import { files as api } from '@/api'
-import buttons from '@/utils/buttons'
-import * as upload  from '@/utils/upload'
+import { mapState } from "vuex";
+import FileList from "./FileList";
+import { files as api } from "@/api";
+import buttons from "@/utils/buttons";
+import * as upload from "@/utils/upload";
 
 export default {
-  name: 'copy',
+  name: "copy",
   components: { FileList },
   data: function () {
     return {
       current: window.location.pathname,
-      dest: null
-    }
+      dest: null,
+    };
   },
-  computed: mapState(['req', 'selected']),
+  computed: mapState(["req", "selected"]),
   methods: {
     copy: async function (event) {
-      event.preventDefault()
-      let items = []
+      event.preventDefault();
+      let items = [];
 
       // Create a new promise for each file.
       for (let item of this.selected) {
         items.push({
           from: this.req.items[item].url,
           to: this.dest + encodeURIComponent(this.req.items[item].name),
-          name: this.req.items[item].name
-        })
+          name: this.req.items[item].name,
+        });
       }
 
       let action = async (overwrite, rename) => {
-        buttons.loading('copy')
+        buttons.loading("copy");
 
-        await api.copy(items, overwrite, rename).then(() => {
-          buttons.success('copy')
+        await api
+          .copy(items, overwrite, rename)
+          .then(() => {
+            buttons.success("copy");
 
-          if (this.$route.path === this.dest) {
-            this.$store.commit('setReload', true)
+            if (this.$route.path === this.dest) {
+              this.$store.commit("setReload", true);
 
-            return
-          }
+              return;
+            }
 
-          this.$router.push({ path: this.dest })
-        }).catch((e) => {
-          buttons.done('copy')
-          this.$showError(e)
-        })
-      }
+            this.$router.push({ path: this.dest });
+          })
+          .catch((e) => {
+            buttons.done("copy");
+            this.$showError(e);
+          });
+      };
 
       if (this.$route.path === this.dest) {
-        this.$store.commit('closeHovers')
-        action(false, true)
+        this.$store.commit("closeHovers");
+        action(false, true);
 
-        return
+        return;
       }
 
-      let dstItems = (await api.fetch(this.dest)).items
-      let conflict = upload.checkConflict(items, dstItems)
+      let dstItems = (await api.fetch(this.dest)).items;
+      let conflict = upload.checkConflict(items, dstItems);
 
-      let overwrite = false
-      let rename = false
+      let overwrite = false;
+      let rename = false;
 
       if (conflict) {
-        this.$store.commit('showHover', {
-          prompt: 'replace-rename',
+        this.$store.commit("showHover", {
+          prompt: "replace-rename",
           confirm: (event, option) => {
-            overwrite = option == 'overwrite'
-            rename = option == 'rename'
+            overwrite = option == "overwrite";
+            rename = option == "rename";
 
-            event.preventDefault()
-            this.$store.commit('closeHovers')
-            action(overwrite, rename)
-          }
-        })
+            event.preventDefault();
+            this.$store.commit("closeHovers");
+            action(overwrite, rename);
+          },
+        });
 
-        return
+        return;
       }
 
-      action(overwrite, rename)
-    }
-  }
-}
+      action(overwrite, rename);
+    },
+  },
+};
 </script>

frontend/src/components/prompts/Delete.vue

@@ -1,68 +1,80 @@
 <template>
   <div class="card floating">
     <div class="card-content">
-      <p v-if="req.kind !== 'listing'">{{ $t('prompts.deleteMessageSingle') }}</p>
-      <p v-else>{{ $t('prompts.deleteMessageMultiple', { count: selectedCount}) }}</p>
+      <p v-if="req.kind !== 'listing'">
+        {{ $t("prompts.deleteMessageSingle") }}
+      </p>
+      <p v-else>
+        {{ $t("prompts.deleteMessageMultiple", { count: selectedCount }) }}
+      </p>
     </div>
     <div class="card-action">
-      <button @click="$store.commit('closeHovers')"
+      <button
+        @click="$store.commit('closeHovers')"
         class="button button--flat button--grey"
         :aria-label="$t('buttons.cancel')"
-        :title="$t('buttons.cancel')">{{ $t('buttons.cancel') }}</button>
-      <button @click="submit"
+        :title="$t('buttons.cancel')"
+      >
+        {{ $t("buttons.cancel") }}
+      </button>
+      <button
+        @click="submit"
         class="button button--flat button--red"
         :aria-label="$t('buttons.delete')"
-        :title="$t('buttons.delete')">{{ $t('buttons.delete') }}</button>
+        :title="$t('buttons.delete')"
+      >
+        {{ $t("buttons.delete") }}
+      </button>
     </div>
   </div>
 </template>
 
 <script>
-import {mapGetters, mapMutations, mapState} from 'vuex'
-import { files as api } from '@/api'
-import buttons from '@/utils/buttons'
+import { mapGetters, mapMutations, mapState } from "vuex";
+import { files as api } from "@/api";
+import buttons from "@/utils/buttons";
 
 export default {
-  name: 'delete',
+  name: "delete",
   computed: {
-    ...mapGetters(['isListing', 'selectedCount']),
-    ...mapState(['req', 'selected'])
+    ...mapGetters(["isListing", "selectedCount"]),
+    ...mapState(["req", "selected", "showConfirm"]),
   },
   methods: {
-    ...mapMutations(['closeHovers']),
+    ...mapMutations(["closeHovers"]),
     submit: async function () {
-      buttons.loading('delete')
+      buttons.loading("delete");
 
       try {
         if (!this.isListing) {
-          await api.remove(this.$route.path)
-          buttons.success('delete')
+          await api.remove(this.$route.path);
+          buttons.success("delete");
 
-          this.$root.$emit('preview-deleted')
-          this.closeHovers()
-          return
+          this.showConfirm();
+          this.closeHovers();
+          return;
         }
 
-        this.closeHovers()
+        this.closeHovers();
 
         if (this.selectedCount === 0) {
-          return
+          return;
         }
 
-        let promises = []
+        let promises = [];
         for (let index of this.selected) {
-          promises.push(api.remove(this.req.items[index].url))
+          promises.push(api.remove(this.req.items[index].url));
         }
 
-        await Promise.all(promises)
-        buttons.success('delete')
-        this.$store.commit('setReload', true)
+        await Promise.all(promises);
+        buttons.success("delete");
+        this.$store.commit("setReload", true);
       } catch (e) {
-        buttons.done('delete')
-        this.$showError(e)
-        if (this.isListing) this.$store.commit('setReload', true)
+        buttons.done("delete");
+        this.$showError(e);
+        if (this.isListing) this.$store.commit("setReload", true);
       }
-    }
-  }
-}
+    },
+  },
+};
 </script>

frontend/src/components/prompts/Download.vue

@@ -1,49 +1,43 @@
 <template>
   <div class="card floating" id="download">
     <div class="card-title">
-      <h2>{{ $t('prompts.download') }}</h2>
+      <h2>{{ $t("prompts.download") }}</h2>
     </div>
 
     <div class="card-content">
-      <p>{{ $t('prompts.downloadMessage') }}</p>
+      <p>{{ $t("prompts.downloadMessage") }}</p>
 
-      <button class="button button--block" @click="download('zip')" v-focus>zip</button>
-      <button class="button button--block" @click="download('tar')" v-focus>tar</button>
-      <button class="button button--block" @click="download('targz')" v-focus>tar.gz</button>
-      <button class="button button--block" @click="download('tarbz2')" v-focus>tar.bz2</button>
-      <button class="button button--block" @click="download('tarxz')" v-focus>tar.xz</button>
-      <button class="button button--block" @click="download('tarlz4')" v-focus>tar.lz4</button>
-      <button class="button button--block" @click="download('tarsz')" v-focus>tar.sz</button>
+      <button
+        v-for="(ext, format) in formats"
+        :key="format"
+        class="button button--block"
+        @click="showConfirm(format)"
+        v-focus
+      >
+        {{ ext }}
+      </button>
     </div>
   </div>
 </template>
 
 <script>
-import {mapGetters, mapState} from 'vuex'
-import { files as api } from '@/api'
+import { mapState } from "vuex";
 
 export default {
-  name: 'download',
-  computed: {
-    ...mapState(['selected', 'req']),
-    ...mapGetters(['selectedCount'])
+  name: "download",
+  data: function () {
+    return {
+      formats: {
+        zip: "zip",
+        tar: "tar",
+        targz: "tar.gz",
+        tarbz2: "tar.bz2",
+        tarxz: "tar.xz",
+        tarlz4: "tar.lz4",
+        tarsz: "tar.sz",
+      },
+    };
   },
-  methods: {
-    download: function (format) {
-      if (this.selectedCount === 0) {
-        api.download(format, this.$route.path)
-      } else {
-        let files = []
-
-        for (let i of this.selected) {
-          files.push(this.req.items[i].url)
-        }
-
-        api.download(format, ...files)
-      }
-
-      this.$store.commit('closeHovers')
-    }
-  }
-}
+  computed: mapState(["showConfirm"]),
+};
 </script>

frontend/src/components/prompts/FileList.vue

@@ -1,132 +1,138 @@
 <template>
   <div>
     <ul class="file-list">
-      <li @click="itemClick"
+      <li
+        @click="itemClick"
         @touchstart="touchstart"
         @dblclick="next"
         role="button"
         tabindex="0"
         :aria-label="item.name"
         :aria-selected="selected == item.url"
-        :key="item.name" v-for="item in items"
-        :data-url="item.url">{{ item.name }}</li>
+        :key="item.name"
+        v-for="item in items"
+        :data-url="item.url"
+      >
+        {{ item.name }}
+      </li>
     </ul>
 
-    <p>{{ $t('prompts.currentlyNavigating') }} <code>{{ nav }}</code>.</p>
+    <p>
+      {{ $t("prompts.currentlyNavigating") }} <code>{{ nav }}</code
+      >.
+    </p>
   </div>
 </template>
 
 <script>
-import { mapState } from 'vuex'
-import url from '@/utils/url'
-import { files } from '@/api'
+import { mapState } from "vuex";
+import url from "@/utils/url";
+import { files } from "@/api";
 
 export default {
-  name: 'file-list',
+  name: "file-list",
   data: function () {
     return {
       items: [],
       touches: {
-        id: '',
-        count: 0
+        id: "",
+        count: 0,
       },
       selected: null,
-      current: window.location.pathname
-    }
+      current: window.location.pathname,
+    };
   },
   computed: {
-    ...mapState([ 'req', 'user' ]),
-    nav () {
-      return decodeURIComponent(this.current)
-    }
+    ...mapState(["req", "user"]),
+    nav() {
+      return decodeURIComponent(this.current);
+    },
   },
-  mounted () {
-    this.fillOptions(this.req)
+  mounted() {
+    this.fillOptions(this.req);
   },
   methods: {
-    fillOptions (req) {
+    fillOptions(req) {
       // Sets the current path and resets
       // the current items.
-      this.current = req.url
-      this.items = []
+      this.current = req.url;
+      this.items = [];
 
-      this.$emit('update:selected', this.current)
+      this.$emit("update:selected", this.current);
 
       // If the path isn't the root path,
       // show a button to navigate to the previous
       // directory.
-      if (req.url !== '/files/') {
+      if (req.url !== "/files/") {
         this.items.push({
-          name: '..',
-          url: url.removeLastDir(req.url) + '/'
-        })
+          name: "..",
+          url: url.removeLastDir(req.url) + "/",
+        });
       }
 
       // If this folder is empty, finish here.
-      if (req.items === null) return
+      if (req.items === null) return;
 
       // Otherwise we add every directory to the
       // move options.
       for (let item of req.items) {
-        if (!item.isDir) continue
+        if (!item.isDir) continue;
 
         this.items.push({
           name: item.name,
-          url: item.url
-        })
+          url: item.url,
+        });
       }
     },
     next: function (event) {
       // Retrieves the URL of the directory the user
       // just clicked in and fill the options with its
       // content.
-      let uri = event.currentTarget.dataset.url
+      let uri = event.currentTarget.dataset.url;
 
-      files.fetch(uri)
-        .then(this.fillOptions)
-        .catch(this.$showError)
+      files.fetch(uri).then(this.fillOptions).catch(this.$showError);
     },
-    touchstart (event) {
-      let url = event.currentTarget.dataset.url
+    touchstart(event) {
+      let url = event.currentTarget.dataset.url;
 
       // In 300 milliseconds, we shall reset the count.
       setTimeout(() => {
-        this.touches.count = 0
-      }, 300)
+        this.touches.count = 0;
+      }, 300);
 
       // If the element the user is touching
       // is different from the last one he touched,
       // reset the count.
       if (this.touches.id !== url) {
-        this.touches.id = url
-        this.touches.count = 1
-        return
+        this.touches.id = url;
+        this.touches.count = 1;
+        return;
       }
 
-      this.touches.count++
+      this.touches.count++;
 
       // If there is more than one touch already,
       // open the next screen.
       if (this.touches.count > 1) {
-        this.next(event)
+        this.next(event);
       }
     },
     itemClick: function (event) {
-      if (this.user.singleClick) this.next(event)
-      else this.select(event)
+      if (this.user.singleClick) this.next(event);
+      else this.select(event);
     },
     select: function (event) {
       // If the element is already selected, unselect it.
       if (this.selected === event.currentTarget.dataset.url) {
-        this.selected = null
-        this.$emit('update:selected', this.current)
-        return
+        this.selected = null;
+        this.$emit("update:selected", this.current);
+        return;
       }
 
       // Otherwise select the element.
-      this.selected = event.currentTarget.dataset.url
-      this.$emit('update:selected', this.selected)
-    }
-  }
-}
+      this.selected = event.currentTarget.dataset.url;
+      this.$emit("update:selected", this.selected);
+    },
+  },
+};
 </script>

frontend/src/components/prompts/Help.vue

@@ -1,34 +1,37 @@
 <template>
   <div class="card floating help">
     <div class="card-title">
-      <h2>{{ $t('help.help') }}</h2>
+      <h2>{{ $t("help.help") }}</h2>
     </div>
 
     <div class="card-content">
       <ul>
-        <li><strong>F1</strong> - {{ $t('help.f1') }}</li>
-        <li><strong>F2</strong> - {{ $t('help.f2') }}</li>
-        <li><strong>DEL</strong> - {{ $t('help.del') }}</li>
-        <li><strong>ESC</strong> - {{ $t('help.esc') }}</li>
-        <li><strong>CTRL + S</strong> - {{ $t('help.ctrl.s') }}</li>
-        <li><strong>CTRL + F</strong> - {{ $t('help.ctrl.f') }}</li>
-        <li><strong>CTRL + Click</strong> - {{ $t('help.ctrl.click') }}</li>
-        <li><strong>Click</strong> - {{ $t('help.click') }}</li>
-        <li><strong>Double click</strong> - {{ $t('help.doubleClick') }}</li>
+        <li><strong>F1</strong> - {{ $t("help.f1") }}</li>
+        <li><strong>F2</strong> - {{ $t("help.f2") }}</li>
+        <li><strong>DEL</strong> - {{ $t("help.del") }}</li>
+        <li><strong>ESC</strong> - {{ $t("help.esc") }}</li>
+        <li><strong>CTRL + S</strong> - {{ $t("help.ctrl.s") }}</li>
+        <li><strong>CTRL + F</strong> - {{ $t("help.ctrl.f") }}</li>
+        <li><strong>CTRL + Click</strong> - {{ $t("help.ctrl.click") }}</li>
+        <li><strong>Click</strong> - {{ $t("help.click") }}</li>
+        <li><strong>Double click</strong> - {{ $t("help.doubleClick") }}</li>
       </ul>
     </div>
 
     <div class="card-action">
-      <button type="submit"
+      <button
+        type="submit"
         @click="$store.commit('closeHovers')"
         class="button button--flat"
         :aria-label="$t('buttons.ok')"
-        :title="$t('buttons.ok')">{{ $t('buttons.ok') }}</button>
+        :title="$t('buttons.ok')"
+      >
+        {{ $t("buttons.ok") }}
+      </button>
     </div>
   </div>
 </template>
 
 <script>
-export default { name: 'help' }
+export default { name: "help" };
 </script>
-

frontend/src/components/prompts/Info.vue

@@ -1,99 +1,149 @@
 <template>
   <div class="card floating">
     <div class="card-title">
-      <h2>{{ $t('prompts.fileInfo') }}</h2>
+      <h2>{{ $t("prompts.fileInfo") }}</h2>
     </div>
 
     <div class="card-content">
-      <p v-if="selected.length > 1">{{ $t('prompts.filesSelected', { count: selected.length }) }}</p>
+      <p v-if="selected.length > 1">
+        {{ $t("prompts.filesSelected", { count: selected.length }) }}
+      </p>
 
-      <p class="break-word" v-if="selected.length < 2"><strong>{{ $t('prompts.displayName') }}</strong> {{ name }}</p>
-      <p v-if="!dir || selected.length > 1"><strong>{{ $t('prompts.size') }}:</strong> <span id="content_length"></span> {{ humanSize }}</p>
-      <p v-if="selected.length < 2"><strong>{{ $t('prompts.lastModified') }}:</strong> {{ humanTime }}</p>
+      <p class="break-word" v-if="selected.length < 2">
+        <strong>{{ $t("prompts.displayName") }}</strong> {{ name }}
+      </p>
+      <p v-if="!dir || selected.length > 1">
+        <strong>{{ $t("prompts.size") }}:</strong>
+        <span id="content_length"></span> {{ humanSize }}
+      </p>
+      <p v-if="selected.length < 2">
+        <strong>{{ $t("prompts.lastModified") }}:</strong> {{ humanTime }}
+      </p>
 
       <template v-if="dir && selected.length === 0">
-        <p><strong>{{ $t('prompts.numberFiles') }}:</strong> {{ req.numFiles }}</p>
-        <p><strong>{{ $t('prompts.numberDirs') }}:</strong> {{ req.numDirs }}</p>
+        <p>
+          <strong>{{ $t("prompts.numberFiles") }}:</strong> {{ req.numFiles }}
+        </p>
+        <p>
+          <strong>{{ $t("prompts.numberDirs") }}:</strong> {{ req.numDirs }}
+        </p>
       </template>
 
       <template v-if="!dir">
-        <p><strong>MD5: </strong><code><a @click="checksum($event, 'md5')">{{ $t('prompts.show') }}</a></code></p>
-        <p><strong>SHA1: </strong><code><a @click="checksum($event, 'sha1')">{{ $t('prompts.show') }}</a></code></p>
-        <p><strong>SHA256: </strong><code><a @click="checksum($event, 'sha256')">{{ $t('prompts.show') }}</a></code></p>
-        <p><strong>SHA512: </strong><code><a @click="checksum($event, 'sha512')">{{ $t('prompts.show') }}</a></code></p>
+        <p>
+          <strong>MD5: </strong
+          ><code
+            ><a @click="checksum($event, 'md5')">{{
+              $t("prompts.show")
+            }}</a></code
+          >
+        </p>
+        <p>
+          <strong>SHA1: </strong
+          ><code
+            ><a @click="checksum($event, 'sha1')">{{
+              $t("prompts.show")
+            }}</a></code
+          >
+        </p>
+        <p>
+          <strong>SHA256: </strong
+          ><code
+            ><a @click="checksum($event, 'sha256')">{{
+              $t("prompts.show")
+            }}</a></code
+          >
+        </p>
+        <p>
+          <strong>SHA512: </strong
+          ><code
+            ><a @click="checksum($event, 'sha512')">{{
+              $t("prompts.show")
+            }}</a></code
+          >
+        </p>
       </template>
     </div>
 
     <div class="card-action">
-      <button type="submit"
+      <button
+        type="submit"
         @click="$store.commit('closeHovers')"
         class="button button--flat"
         :aria-label="$t('buttons.ok')"
-        :title="$t('buttons.ok')">{{ $t('buttons.ok') }}</button>
+        :title="$t('buttons.ok')"
+      >
+        {{ $t("buttons.ok") }}
+      </button>
     </div>
   </div>
 </template>
 
 <script>
-import {mapState, mapGetters} from 'vuex'
-import filesize from 'filesize'
-import moment from 'moment'
-import { files as api } from '@/api'
+import { mapState, mapGetters } from "vuex";
+import filesize from "filesize";
+import moment from "moment";
+import { files as api } from "@/api";
 
 export default {
-  name: 'info',
+  name: "info",
   computed: {
-    ...mapState(['req', 'selected']),
-    ...mapGetters(['selectedCount', 'isListing']),
+    ...mapState(["req", "selected"]),
+    ...mapGetters(["selectedCount", "isListing"]),
     humanSize: function () {
       if (this.selectedCount === 0 || !this.isListing) {
-        return filesize(this.req.size)
+        return filesize(this.req.size);
       }
 
-      let sum = 0
+      let sum = 0;
 
       for (let selected of this.selected) {
-        sum += this.req.items[selected].size
+        sum += this.req.items[selected].size;
       }
 
-      return filesize(sum)
+      return filesize(sum);
     },
     humanTime: function () {
       if (this.selectedCount === 0) {
-        return moment(this.req.modified).fromNow()
+        return moment(this.req.modified).fromNow();
       }
 
-      return moment(this.req.items[this.selected[0]]).fromNow()
+      return moment(this.req.items[this.selected[0]].modified).fromNow();
     },
     name: function () {
-      return this.selectedCount === 0 ? this.req.name : this.req.items[this.selected[0]].name
+      return this.selectedCount === 0
+        ? this.req.name
+        : this.req.items[this.selected[0]].name;
     },
     dir: function () {
-      return this.selectedCount > 1 || (this.selectedCount === 0
-        ? this.req.isDir
-        : this.req.items[this.selected[0]].isDir)
-    }
+      return (
+        this.selectedCount > 1 ||
+        (this.selectedCount === 0
+          ? this.req.isDir
+          : this.req.items[this.selected[0]].isDir)
+      );
+    },
   },
   methods: {
     checksum: async function (event, algo) {
-      event.preventDefault()
+      event.preventDefault();
 
-      let link
+      let link;
 
       if (this.selectedCount) {
-        link = this.req.items[this.selected[0]].url
+        link = this.req.items[this.selected[0]].url;
       } else {
-        link = this.$route.path
+        link = this.$route.path;
       }
 
       try {
-        const hash = await api.checksum(link, algo)
+        const hash = await api.checksum(link, algo);
         // eslint-disable-next-line
         event.target.innerHTML = hash
       } catch (e) {
-        this.$showError(e)
+        this.$showError(e);
       }
-    }
-  }
-}
+    },
+  },
+};
 </script>

frontend/src/components/prompts/Move.vue

@@ -1,93 +1,104 @@
 <template>
   <div class="card floating">
     <div class="card-title">
-      <h2>{{ $t('prompts.move') }}</h2>
+      <h2>{{ $t("prompts.move") }}</h2>
     </div>
 
     <div class="card-content">
-      <file-list @update:selected="val => dest = val"></file-list>
+      <file-list @update:selected="(val) => (dest = val)"></file-list>
     </div>
 
     <div class="card-action">
-      <button class="button button--flat button--grey"
+      <button
+        class="button button--flat button--grey"
         @click="$store.commit('closeHovers')"
         :aria-label="$t('buttons.cancel')"
-        :title="$t('buttons.cancel')">{{ $t('buttons.cancel') }}</button>
-      <button class="button button--flat"
+        :title="$t('buttons.cancel')"
+      >
+        {{ $t("buttons.cancel") }}
+      </button>
+      <button
+        class="button button--flat"
         @click="move"
         :disabled="$route.path === dest"
         :aria-label="$t('buttons.move')"
-        :title="$t('buttons.move')">{{ $t('buttons.move') }}</button>
+        :title="$t('buttons.move')"
+      >
+        {{ $t("buttons.move") }}
+      </button>
     </div>
   </div>
 </template>
 
 <script>
-import { mapState } from 'vuex'
-import FileList from './FileList'
-import { files as api } from '@/api'
-import buttons from '@/utils/buttons'
-import * as upload  from '@/utils/upload'
+import { mapState } from "vuex";
+import FileList from "./FileList";
+import { files as api } from "@/api";
+import buttons from "@/utils/buttons";
+import * as upload from "@/utils/upload";
 
 export default {
-  name: 'move',
+  name: "move",
   components: { FileList },
   data: function () {
     return {
       current: window.location.pathname,
-      dest: null
-    }
+      dest: null,
+    };
   },
-  computed: mapState(['req', 'selected']),
+  computed: mapState(["req", "selected"]),
   methods: {
     move: async function (event) {
-      event.preventDefault()
-      let items = []
+      event.preventDefault();
+      let items = [];
 
       for (let item of this.selected) {
         items.push({
           from: this.req.items[item].url,
           to: this.dest + encodeURIComponent(this.req.items[item].name),
-          name: this.req.items[item].name
-        })
+          name: this.req.items[item].name,
+        });
       }
 
       let action = async (overwrite, rename) => {
-        buttons.loading('move')
+        buttons.loading("move");
 
-        await api.move(items, overwrite, rename).then(() => {
-          buttons.success('move')
-          this.$router.push({ path: this.dest })
-        }).catch((e) => {
-          buttons.done('move')
-          this.$showError(e)
-        })
-      }
+        await api
+          .move(items, overwrite, rename)
+          .then(() => {
+            buttons.success("move");
+            this.$router.push({ path: this.dest });
+          })
+          .catch((e) => {
+            buttons.done("move");
+            this.$showError(e);
+          });
+      };
 
-      let dstItems = (await api.fetch(this.dest)).items
-      let conflict = upload.checkConflict(items, dstItems)
+      let dstItems = (await api.fetch(this.dest)).items;
+      let conflict = upload.checkConflict(items, dstItems);
 
-      let overwrite = false
-      let rename = false
+      let overwrite = false;
+      let rename = false;
 
       if (conflict) {
-        this.$store.commit('showHover', {
-          prompt: 'replace-rename',
+        this.$store.commit("showHover", {
+          prompt: "replace-rename",
           confirm: (event, option) => {
-            overwrite = option == 'overwrite'
-            rename = option == 'rename'
+            overwrite = option == "overwrite";
+            rename = option == "rename";
 
-            event.preventDefault()
-            this.$store.commit('closeHovers')
-            action(overwrite, rename)
-          }
-        })
+            event.preventDefault();
+            this.$store.commit("closeHovers");
+            action(overwrite, rename);
+          },
+        });
 
-        return
+        return;
       }
 
-      action(overwrite, rename)
-    }
-  }
-}
+      action(overwrite, rename);
+    },
+  },
+};
 </script>

frontend/src/components/prompts/NewDir.vue

@@ -1,12 +1,18 @@
 <template>
   <div class="card floating">
     <div class="card-title">
-      <h2>{{ $t('prompts.newDir') }}</h2>
+      <h2>{{ $t("prompts.newDir") }}</h2>
     </div>
 
     <div class="card-content">
-      <p>{{ $t('prompts.newDirMessage') }}</p>
-      <input class="input input--block" type="text" @keyup.enter="submit" v-model.trim="name" v-focus>
+      <p>{{ $t("prompts.newDirMessage") }}</p>
+      <input
+        class="input input--block"
+        type="text"
+        @keyup.enter="submit"
+        v-model.trim="name"
+        v-focus
+      />
     </div>
 
     <div class="card-action">
@@ -15,57 +21,60 @@
         @click="$store.commit('closeHovers')"
         :aria-label="$t('buttons.cancel')"
         :title="$t('buttons.cancel')"
-      >{{ $t('buttons.cancel') }}</button>
+      >
+        {{ $t("buttons.cancel") }}
+      </button>
       <button
         class="button button--flat"
         :aria-label="$t('buttons.create')"
         :title="$t('buttons.create')"
         @click="submit"
-      >{{ $t('buttons.create') }}</button>
+      >
+        {{ $t("buttons.create") }}
+      </button>
     </div>
   </div>
 </template>
 
 <script>
-import { mapGetters } from 'vuex'
-import { files as api } from '@/api'
-import url from '@/utils/url'
+import { mapGetters } from "vuex";
+import { files as api } from "@/api";
+import url from "@/utils/url";
 
 export default {
-  name: 'new-dir',
-  data: function() {
+  name: "new-dir",
+  data: function () {
     return {
-      name: ''
+      name: "",
     };
   },
   computed: {
-    ...mapGetters([ 'isFiles', 'isListing' ])
+    ...mapGetters(["isFiles", "isListing"]),
   },
   methods: {
-    submit: async function(event) {
-      event.preventDefault()
-      if (this.new === '') return
+    submit: async function (event) {
+      event.preventDefault();
+      if (this.new === "") return;
 
       // Build the path of the new directory.
-      let uri = this.isFiles ? this.$route.path + '/' : '/'
+      let uri = this.isFiles ? this.$route.path + "/" : "/";
 
       if (!this.isListing) {
-        uri = url.removeLastDir(uri) + '/'
+        uri = url.removeLastDir(uri) + "/";
       }
 
-      uri += encodeURIComponent(this.name) + '/'
-      uri = uri.replace('//', '/')
+      uri += encodeURIComponent(this.name) + "/";
+      uri = uri.replace("//", "/");
 
       try {
-        await api.post(uri)
-        this.$router.push({ path: uri })
+        await api.post(uri);
+        this.$router.push({ path: uri });
       } catch (e) {
-        this.$showError(e)
+        this.$showError(e);
       }
 
-      this.$store.commit('closeHovers')
-    }
-  }
+      this.$store.commit("closeHovers");
+    },
+  },
 };
 </script>
-

frontend/src/components/prompts/NewFile.vue

@@ -1,12 +1,18 @@
 <template>
   <div class="card floating">
     <div class="card-title">
-      <h2>{{ $t('prompts.newFile') }}</h2>
+      <h2>{{ $t("prompts.newFile") }}</h2>
     </div>
 
     <div class="card-content">
-      <p>{{ $t('prompts.newFileMessage') }}</p>
-      <input class="input input--block" v-focus type="text" @keyup.enter="submit" v-model.trim="name">
+      <p>{{ $t("prompts.newFileMessage") }}</p>
+      <input
+        class="input input--block"
+        v-focus
+        type="text"
+        @keyup.enter="submit"
+        v-model.trim="name"
+      />
     </div>
 
     <div class="card-action">
@@ -15,57 +21,60 @@
         @click="$store.commit('closeHovers')"
         :aria-label="$t('buttons.cancel')"
         :title="$t('buttons.cancel')"
-      >{{ $t('buttons.cancel') }}</button>
+      >
+        {{ $t("buttons.cancel") }}
+      </button>
       <button
         class="button button--flat"
         @click="submit"
         :aria-label="$t('buttons.create')"
         :title="$t('buttons.create')"
-      >{{ $t('buttons.create') }}</button>
+      >
+        {{ $t("buttons.create") }}
+      </button>
     </div>
   </div>
 </template>
 
 <script>
-import { mapGetters } from 'vuex'
-import { files as api } from '@/api'
-import url from '@/utils/url'
+import { mapGetters } from "vuex";
+import { files as api } from "@/api";
+import url from "@/utils/url";
 
 export default {
-  name: 'new-file',
-  data: function() {
+  name: "new-file",
+  data: function () {
     return {
-      name: ''
+      name: "",
     };
   },
   computed: {
-    ...mapGetters([ 'isFiles', 'isListing' ])
+    ...mapGetters(["isFiles", "isListing"]),
   },
   methods: {
-    submit: async function(event) {
-      event.preventDefault()
-      if (this.new === '') return
+    submit: async function (event) {
+      event.preventDefault();
+      if (this.new === "") return;
 
       // Build the path of the new directory.
-      let uri = this.isFiles ? this.$route.path + '/' : '/'
+      let uri = this.isFiles ? this.$route.path + "/" : "/";
 
       if (!this.isListing) {
-        uri = url.removeLastDir(uri) + '/'
+        uri = url.removeLastDir(uri) + "/";
       }
 
-      uri += encodeURIComponent(this.name)
-      uri = uri.replace('//', '/')
+      uri += encodeURIComponent(this.name);
+      uri = uri.replace("//", "/");
 
       try {
-        await api.post(uri)
-        this.$router.push({ path: uri })
+        await api.post(uri);
+        this.$router.push({ path: uri });
       } catch (e) {
-        this.$showError(e)
+        this.$showError(e);
       }
 
-      this.$store.commit('closeHovers')
-    }
-  }
+      this.$store.commit("closeHovers");
+    },
+  },
 };
 </script>
-

frontend/src/components/prompts/Prompts.vue

@@ -6,25 +6,25 @@
 </template>
 
 <script>
-import Help from './Help'
-import Info from './Info'
-import Delete from './Delete'
-import Rename from './Rename'
-import Download from './Download'
-import Move from './Move'
-import Copy from './Copy'
-import NewFile from './NewFile'
-import NewDir from './NewDir'
-import Replace from './Replace'
-import ReplaceRename from './ReplaceRename'
-import Share from './Share'
-import Upload from './Upload'
-import ShareDelete from './ShareDelete'
-import { mapState } from 'vuex'
-import buttons from '@/utils/buttons'
+import Help from "./Help";
+import Info from "./Info";
+import Delete from "./Delete";
+import Rename from "./Rename";
+import Download from "./Download";
+import Move from "./Move";
+import Copy from "./Copy";
+import NewFile from "./NewFile";
+import NewDir from "./NewDir";
+import Replace from "./Replace";
+import ReplaceRename from "./ReplaceRename";
+import Share from "./Share";
+import Upload from "./Upload";
+import ShareDelete from "./ShareDelete";
+import { mapState } from "vuex";
+import buttons from "@/utils/buttons";
 
 export default {
-  name: 'prompts',
+  name: "prompts",
   components: {
     Info,
     Delete,
@@ -39,74 +39,81 @@ export default {
     Replace,
     ReplaceRename,
     Upload,
-    ShareDelete
+    ShareDelete,
   },
   data: function () {
     return {
       pluginData: {
         buttons,
-        'store': this.$store,
-        'router': this.$router
-      }
-    }
+        store: this.$store,
+        router: this.$router,
+      },
+    };
   },
-  created () {
-    window.addEventListener('keydown', (event) => {
-      if (this.show == null)
-      return
+  created() {
+    window.addEventListener("keydown", (event) => {
+      if (this.show == null) return;
 
       let prompt = this.$refs.currentComponent;
 
+      // Esc!
+      if (event.keyCode === 27) {
+        event.stopImmediatePropagation();
+        this.$store.commit("closeHovers");
+      }
+
       // Enter
       if (event.keyCode == 13) {
         switch (this.show) {
-          case 'delete':
-            prompt.submit()
+          case "delete":
+            prompt.submit();
             break;
-          case 'copy':
-            prompt.copy(event)
+          case "copy":
+            prompt.copy(event);
             break;
-          case 'move':
-            prompt.move(event)
+          case "move":
+            prompt.move(event);
             break;
-          case 'replace':
-            prompt.showConfirm(event)
+          case "replace":
+            prompt.showConfirm(event);
             break;
         }
-
       }
-    })
+    });
   },
   computed: {
-    ...mapState(['show', 'plugins']),
+    ...mapState(["show", "plugins"]),
     currentComponent: function () {
-      const matched = [
-        'info',
-        'help',
-        'delete',
-        'rename',
-        'move',
-        'copy',
-        'newFile',
-        'newDir',
-        'download',
-        'replace',
-        'replace-rename',
-        'share',
-        'upload',
-        'share-delete'
-      ].indexOf(this.show) >= 0;
+      const matched =
+        [
+          "info",
+          "help",
+          "delete",
+          "rename",
+          "move",
+          "copy",
+          "newFile",
+          "newDir",
+          "download",
+          "replace",
+          "replace-rename",
+          "share",
+          "upload",
+          "share-delete",
+        ].indexOf(this.show) >= 0;
 
-      return matched && this.show || null;
+      return (matched && this.show) || null;
     },
     showOverlay: function () {
-      return (this.show !== null && this.show !== 'search' && this.show !== 'more')
-    }
+      return (
+        this.show !== null && this.show !== "search" && this.show !== "more"
+      );
+    },
   },
   methods: {
-    resetPrompts () {
-      this.$store.commit('closeHovers')
-    }
-  }
-}
+    resetPrompts() {
+      this.$store.commit("closeHovers");
+    },
+  },
+};
 </script>

frontend/src/components/prompts/Rename.vue

@@ -1,89 +1,107 @@
 <template>
   <div class="card floating">
     <div class="card-title">
-      <h2>{{ $t('prompts.rename') }}</h2>
+      <h2>{{ $t("prompts.rename") }}</h2>
     </div>
 
     <div class="card-content">
-      <p>{{ $t('prompts.renameMessage') }} <code>{{ oldName() }}</code>:</p>
-      <input class="input input--block" v-focus type="text" @keyup.enter="submit" v-model.trim="name">
+      <p>
+        {{ $t("prompts.renameMessage") }} <code>{{ oldName() }}</code
+        >:
+      </p>
+      <input
+        class="input input--block"
+        v-focus
+        type="text"
+        @keyup.enter="submit"
+        v-model.trim="name"
+      />
     </div>
 
     <div class="card-action">
-      <button class="button button--flat button--grey"
+      <button
+        class="button button--flat button--grey"
         @click="$store.commit('closeHovers')"
         :aria-label="$t('buttons.cancel')"
-        :title="$t('buttons.cancel')">{{ $t('buttons.cancel') }}</button>
-      <button @click="submit"
+        :title="$t('buttons.cancel')"
+      >
+        {{ $t("buttons.cancel") }}
+      </button>
+      <button
+        @click="submit"
         class="button button--flat"
         type="submit"
         :aria-label="$t('buttons.rename')"
-        :title="$t('buttons.rename')">{{ $t('buttons.rename') }}</button>
+        :title="$t('buttons.rename')"
+      >
+        {{ $t("buttons.rename") }}
+      </button>
     </div>
   </div>
 </template>
 
 <script>
-import { mapState, mapGetters } from 'vuex'
-import url from '@/utils/url'
-import { files as api } from '@/api'
+import { mapState, mapGetters } from "vuex";
+import url from "@/utils/url";
+import { files as api } from "@/api";
 
 export default {
-  name: 'rename',
+  name: "rename",
   data: function () {
     return {
-      name: ''
-    }
+      name: "",
+    };
   },
-  created () {
-    this.name = this.oldName()
+  created() {
+    this.name = this.oldName();
   },
   computed: {
-    ...mapState(['req', 'selected', 'selectedCount']),
-    ...mapGetters(['isListing'])
+    ...mapState(["req", "selected", "selectedCount"]),
+    ...mapGetters(["isListing"]),
   },
   methods: {
     cancel: function () {
-      this.$store.commit('closeHovers')
+      this.$store.commit("closeHovers");
     },
     oldName: function () {
       if (!this.isListing) {
-        return this.req.name
+        return this.req.name;
       }
 
       if (this.selectedCount === 0 || this.selectedCount > 1) {
         // This shouldn't happen.
-        return
+        return;
       }
 
-      return this.req.items[this.selected[0]].name
+      return this.req.items[this.selected[0]].name;
     },
     submit: async function () {
-      let oldLink = ''
-      let newLink = ''
+      let oldLink = "";
+      let newLink = "";
 
       if (!this.isListing) {
-        oldLink = this.req.url
+        oldLink = this.req.url;
       } else {
-        oldLink = this.req.items[this.selected[0]].url
+        oldLink = this.req.items[this.selected[0]].url;
       }
 
-      newLink = url.removeLastDir(oldLink) + '/' + encodeURIComponent(this.name)
+      newLink =
+        url.removeLastDir(oldLink) + "/" + encodeURIComponent(this.name);
 
       try {
-        await api.move([{ from: oldLink, to: newLink }])
+        await api.move([{ from: oldLink, to: newLink }]);
         if (!this.isListing) {
-          this.$router.push({ path: newLink })
-          return
+          this.$router.push({ path: newLink });
+          return;
         }
 
-        this.$store.commit('setReload', true)
+        this.$store.commit("setReload", true);
       } catch (e) {
-        this.$showError(e)
+        this.$showError(e);
       }
 
-      this.$store.commit('closeHovers')
-    }
-  }
-}
+      this.$store.commit("closeHovers");
+    },
+  },
+};
 </script>

frontend/src/components/prompts/Replace.vue

@@ -1,31 +1,39 @@
 <template>
   <div class="card floating">
     <div class="card-title">
-      <h2>{{ $t('prompts.replace') }}</h2>
+      <h2>{{ $t("prompts.replace") }}</h2>
     </div>
 
     <div class="card-content">
-      <p>{{ $t('prompts.replaceMessage') }}</p>
+      <p>{{ $t("prompts.replaceMessage") }}</p>
     </div>
 
     <div class="card-action">
-      <button class="button button--flat button--grey"
+      <button
+        class="button button--flat button--grey"
         @click="$store.commit('closeHovers')"
         :aria-label="$t('buttons.cancel')"
-        :title="$t('buttons.cancel')">{{ $t('buttons.cancel') }}</button>
-      <button class="button button--flat button--red"
+        :title="$t('buttons.cancel')"
+      >
+        {{ $t("buttons.cancel") }}
+      </button>
+      <button
+        class="button button--flat button--red"
         @click="showConfirm"
         :aria-label="$t('buttons.replace')"
-        :title="$t('buttons.replace')">{{ $t('buttons.replace') }}</button>
+        :title="$t('buttons.replace')"
+      >
+        {{ $t("buttons.replace") }}
+      </button>
     </div>
   </div>
 </template>
 
 <script>
-import { mapState } from 'vuex'
+import { mapState } from "vuex";
 
 export default {
-  name: 'replace',
-  computed: mapState(['showConfirm'])
-}
+  name: "replace",
+  computed: mapState(["showConfirm"]),
+};
 </script>

frontend/src/components/prompts/ReplaceRename.vue

@@ -1,35 +1,47 @@
 <template>
   <div class="card floating">
     <div class="card-title">
-      <h2>{{ $t('prompts.replace') }}</h2>
+      <h2>{{ $t("prompts.replace") }}</h2>
     </div>
 
     <div class="card-content">
-      <p>{{ $t('prompts.replaceMessage') }}</p>
+      <p>{{ $t("prompts.replaceMessage") }}</p>
     </div>
 
     <div class="card-action">
-      <button class="button button--flat button--grey"
+      <button
+        class="button button--flat button--grey"
         @click="$store.commit('closeHovers')"
         :aria-label="$t('buttons.cancel')"
-        :title="$t('buttons.cancel')">{{ $t('buttons.cancel') }}</button>
-      <button class="button button--flat button--blue"
+        :title="$t('buttons.cancel')"
+      >
+        {{ $t("buttons.cancel") }}
+      </button>
+      <button
+        class="button button--flat button--blue"
         @click="(event) => showConfirm(event, 'rename')"
         :aria-label="$t('buttons.rename')"
-        :title="$t('buttons.rename')">{{ $t('buttons.rename') }}</button>
-      <button class="button button--flat button--red"
+        :title="$t('buttons.rename')"
+      >
+        {{ $t("buttons.rename") }}
+      </button>
+      <button
+        class="button button--flat button--red"
         @click="(event) => showConfirm(event, 'overwrite')"
         :aria-label="$t('buttons.replace')"
-        :title="$t('buttons.replace')">{{ $t('buttons.replace') }}</button>
+        :title="$t('buttons.replace')"
+      >
+        {{ $t("buttons.replace") }}
+      </button>
     </div>
   </div>
 </template>
 
 <script>
-import { mapState } from 'vuex'
+import { mapState } from "vuex";
 
 export default {
-  name: 'replace-rename',
-  computed: mapState(['showConfirm'])
-}
+  name: "replace-rename",
+  computed: mapState(["showConfirm"]),
+};
 </script>

frontend/src/components/prompts/Share.vue

@@ -1,174 +1,235 @@
 <template>
   <div class="card floating share__promt__card" id="share">
     <div class="card-title">
-      <h2>{{ $t('buttons.share') }}</h2>
+      <h2>{{ $t("buttons.share") }}</h2>
     </div>
 
-    <div class="card-content">
-      <ul>
+    <template v-if="listing">
+      <div class="card-content">
+        <table>
+          <tr>
+            <th>#</th>
+            <th>{{ $t("settings.shareDuration") }}</th>
+            <th></th>
+            <th></th>
+          </tr>
 
-        <li v-for="link in links" :key="link.hash">
-          <a :href="buildLink(link.hash)" target="_blank">
-            <template v-if="link.expire !== 0">{{ humanTime(link.expire) }}</template>
-            <template v-else>{{ $t('permanent') }}</template>
-          </a>
+          <tr v-for="link in links" :key="link.hash">
+            <td>{{ link.hash }}</td>
+            <td>
+              <template v-if="link.expire !== 0">{{
+                humanTime(link.expire)
+              }}</template>
+              <template v-else>{{ $t("permanent") }}</template>
+            </td>
+            <td class="small">
+              <button
+                class="action copy-clipboard"
+                :data-clipboard-text="buildLink(link.hash)"
+                :aria-label="$t('buttons.copyToClipboard')"
+                :title="$t('buttons.copyToClipboard')"
+              >
+                <i class="material-icons">content_paste</i>
+              </button>
+            </td>
+            <td class="small">
+              <button
+                class="action"
+                @click="deleteLink($event, link)"
+                :aria-label="$t('buttons.delete')"
+                :title="$t('buttons.delete')"
+              >
+                <i class="material-icons">delete</i>
+              </button>
+            </td>
+          </tr>
+        </table>
+      </div>
 
-          <button class="action"
-            @click="deleteLink($event, link)"
-            :aria-label="$t('buttons.delete')"
-            :title="$t('buttons.delete')"><i class="material-icons">delete</i></button>
+      <div class="card-action">
+        <button
+          class="button button--flat button--grey"
+          @click="$store.commit('closeHovers')"
+          :aria-label="$t('buttons.close')"
+          :title="$t('buttons.close')"
+        >
+          {{ $t("buttons.close") }}
+        </button>
+        <button
+          class="button button--flat button--blue"
+          @click="() => switchListing()"
+          :aria-label="$t('buttons.new')"
+          :title="$t('buttons.new')"
+        >
+          {{ $t("buttons.new") }}
+        </button>
+      </div>
+    </template>
 
-          <button class="action copy-clipboard"
-            :data-clipboard-text="buildLink(link.hash)"
-            :aria-label="$t('buttons.copyToClipboard')"
-            :title="$t('buttons.copyToClipboard')"><i class="material-icons">content_paste</i></button>
-        </li>
-
-        <li v-if="!hasPermanent">
-          <div>
-            <input type="password" :placeholder="$t('prompts.optionalPassword')" v-model="passwordPermalink">
-            <a @click="getPermalink" :aria-label="$t('buttons.permalink')">{{ $t('buttons.permalink') }}</a>
-          </div>
-        </li>
-
-        <li>
-          <input v-focus
+    <template v-else>
+      <div class="card-content">
+        <p>{{ $t("settings.shareDuration") }}</p>
+        <div class="input-group input">
+          <input
+            v-focus
             type="number"
             max="2147483647"
-            min="0"
+            min="1"
             @keyup.enter="submit"
-            v-model.trim="time">
-          <select v-model="unit" :aria-label="$t('time.unit')">
-            <option value="seconds">{{ $t('time.seconds') }}</option>
-            <option value="minutes">{{ $t('time.minutes') }}</option>
-            <option value="hours">{{ $t('time.hours') }}</option>
-            <option value="days">{{ $t('time.days') }}</option>
+            v-model.trim="time"
+          />
+          <select class="right" v-model="unit" :aria-label="$t('time.unit')">
+            <option value="seconds">{{ $t("time.seconds") }}</option>
+            <option value="minutes">{{ $t("time.minutes") }}</option>
+            <option value="hours">{{ $t("time.hours") }}</option>
+            <option value="days">{{ $t("time.days") }}</option>
           </select>
-          <input type="password" :placeholder="$t('prompts.optionalPassword')" v-model="password">
-          <button class="action"
-            @click="submit"
-            :aria-label="$t('buttons.create')"
-            :title="$t('buttons.create')"><i class="material-icons">add</i></button>
-        </li>
-      </ul>
-    </div>
+        </div>
+        <p>{{ $t("prompts.optionalPassword") }}</p>
+        <input
+          class="input input--block"
+          type="password"
+          v-model.trim="password"
+        />
+      </div>
 
-    <div class="card-action">
-      <button class="button button--flat"
-        @click="$store.commit('closeHovers')"
-        :aria-label="$t('buttons.close')"
-        :title="$t('buttons.close')">{{ $t('buttons.close') }}</button>
-    </div>
+      <div class="card-action">
+        <button
+          class="button button--flat button--grey"
+          @click="() => switchListing()"
+          :aria-label="$t('buttons.cancel')"
+          :title="$t('buttons.cancel')"
+        >
+          {{ $t("buttons.cancel") }}
+        </button>
+        <button
+          class="button button--flat button--blue"
+          @click="submit"
+          :aria-label="$t('buttons.share')"
+          :title="$t('buttons.share')"
+        >
+          {{ $t("buttons.share") }}
+        </button>
+      </div>
+    </template>
   </div>
 </template>
 
 <script>
-import { mapState, mapGetters } from 'vuex'
-import { share as api } from '@/api'
-import { baseURL } from '@/utils/constants'
-import moment from 'moment'
-import Clipboard from 'clipboard'
+import { mapState, mapGetters } from "vuex";
+import { share as api } from "@/api";
+import { baseURL } from "@/utils/constants";
+import moment from "moment";
+import Clipboard from "clipboard";
 
 export default {
-  name: 'share',
+  name: "share",
   data: function () {
     return {
-      time: '',
-      unit: 'hours',
-      hasPermanent: false,
+      time: "",
+      unit: "hours",
       links: [],
       clip: null,
-      password: '',
-      passwordPermalink: ''
-    }
+      password: "",
+      listing: true,
+    };
   },
   computed: {
-    ...mapState([ 'req', 'selected', 'selectedCount' ]),
-    ...mapGetters([ 'isListing' ]),
-    url () {
+    ...mapState(["req", "selected", "selectedCount"]),
+    ...mapGetters(["isListing"]),
+    url() {
       if (!this.isListing) {
-        return this.$route.path
+        return this.$route.path;
       }
 
       if (this.selectedCount === 0 || this.selectedCount > 1) {
         // This shouldn't happen.
-        return
+        return;
       }
 
-      return this.req.items[this.selected[0]].url
-    }
+      return this.req.items[this.selected[0]].url;
+    },
   },
-  async beforeMount () {
+  async beforeMount() {
     try {
-      const links = await api.get(this.url)
-      this.links = links
-      this.sort()
+      const links = await api.get(this.url);
+      this.links = links;
+      this.sort();
 
-      for (let link of this.links) {
-        if (link.expire === 0) {
-          this.hasPermanent = true
-          break
-        }
+      if (this.links.length == 0) {
+        this.listing = false;
       }
     } catch (e) {
-      this.$showError(e)
+      this.$showError(e);
     }
   },
-  mounted () {
-    this.clip = new Clipboard('.copy-clipboard')
-    this.clip.on('success', () => {
-      this.$showSuccess(this.$t('success.linkCopied'))
-    })
+  mounted() {
+    this.clip = new Clipboard(".copy-clipboard");
+    this.clip.on("success", () => {
+      this.$showSuccess(this.$t("success.linkCopied"));
+    });
   },
-  beforeDestroy () {
-    this.clip.destroy()
+  beforeDestroy() {
+    this.clip.destroy();
   },
   methods: {
     submit: async function () {
-      if (!this.time) return
+      let isPermanent = !this.time || this.time == 0;
 
       try {
-        const res = await api.create(this.url, this.password, this.time, this.unit)
-        this.links.push(res)
-        this.sort()
+        let res = null;
+
+        if (isPermanent) {
+          res = await api.create(this.url, this.password);
+        } else {
+          res = await api.create(this.url, this.password, this.time, this.unit);
+        }
+
+        this.links.push(res);
+        this.sort();
+
+        this.time = "";
+        this.unit = "hours";
+        this.password = "";
+
+        this.listing = true;
       } catch (e) {
-        this.$showError(e)
-      }
-    },
-    getPermalink: async function () {
-      try {
-        const res = await api.create(this.url, this.passwordPermalink)
-        this.links.push(res)
-        this.sort()
-        this.hasPermanent = true
-      } catch (e) {
-        this.$showError(e)
+        this.$showError(e);
       }
     },
     deleteLink: async function (event, link) {
-      event.preventDefault()
-       try {
-        await api.remove(link.hash)
-        if (link.expire === 0) this.hasPermanent = false
-        this.links = this.links.filter(item => item.hash !== link.hash)
+      event.preventDefault();
+      try {
+        await api.remove(link.hash);
+        this.links = this.links.filter((item) => item.hash !== link.hash);
+
+        if (this.links.length == 0) {
+          this.listing = false;
+        }
       } catch (e) {
-        this.$showError(e)
+        this.$showError(e);
       }
     },
-    humanTime (time) {
-      return moment(time * 1000).fromNow()
+    humanTime(time) {
+      return moment(time * 1000).fromNow();
     },
-    buildLink (hash) {
-      return `${window.location.origin}${baseURL}/share/${hash}`
+    buildLink(hash) {
+      return `${window.location.origin}${baseURL}/share/${hash}`;
     },
-    sort () {
+    sort() {
       this.links = this.links.sort((a, b) => {
-        if (a.expire === 0) return -1
-        if (b.expire === 0) return 1
-        return new Date(a.expire) - new Date(b.expire)
-      })
-    }
-  }
-}
-</script>
+        if (a.expire === 0) return -1;
+        if (b.expire === 0) return 1;
+        return new Date(a.expire) - new Date(b.expire);
+      });
+    },
+    switchListing() {
+      if (this.links.length == 0 && !this.listing) {
+        this.$store.commit("closeHovers");
+      }
 
+      this.listing = !this.listing;
+    },
+  },
+};
+</script>

frontend/src/components/prompts/ShareDelete.vue

@@ -1,47 +1,41 @@
 <template>
   <div class="card floating">
     <div class="card-content">
-      <p>{{ $t('prompts.deleteMessageShare', {path: hash.path}) }}</p>
+      <p>{{ $t("prompts.deleteMessageShare", { path: "" }) }}</p>
     </div>
     <div class="card-action">
-      <button @click="$store.commit('closeHovers')"
+      <button
+        @click="$store.commit('closeHovers')"
         class="button button--flat button--grey"
         :aria-label="$t('buttons.cancel')"
-        :title="$t('buttons.cancel')">{{ $t('buttons.cancel') }}</button>
-      <button @click="submit"
+        :title="$t('buttons.cancel')"
+      >
+        {{ $t("buttons.cancel") }}
+      </button>
+      <button
+        @click="submit"
         class="button button--flat button--red"
         :aria-label="$t('buttons.delete')"
-        :title="$t('buttons.delete')">{{ $t('buttons.delete') }}</button>
+        :title="$t('buttons.delete')"
+      >
+        {{ $t("buttons.delete") }}
+      </button>
     </div>
   </div>
 </template>
 
 <script>
-import {mapMutations, mapState} from 'vuex'
-import { share as api } from '@/api'
-import buttons from '@/utils/buttons'
+import { mapState } from "vuex";
 
 export default {
-  name: 'share-delete',
+  name: "share-delete",
   computed: {
-    ...mapState(['hash'])
+    ...mapState(["showConfirm"]),
   },
   methods: {
-    ...mapMutations(['closeHovers']),
-    submit: async function () {
-      buttons.loading('delete')
-
-      try {
-        await api.remove(this.hash.hash)
-        buttons.success('delete')
-
-        this.$root.$emit('share-deleted', this.hash.hash)
-        this.closeHovers()
-      } catch (e) {
-        buttons.done('delete')
-        this.$showError(e)
-      }
-    }
-  }
-}
+    submit: function () {
+      this.showConfirm();
+    },
+  },
+};
 </script>

frontend/src/components/prompts/Upload.vue

@@ -1,11 +1,11 @@
 <template>
   <div class="card floating">
     <div class="card-title">
-      <h2>{{ $t('prompts.upload') }}</h2>
+      <h2>{{ $t("prompts.upload") }}</h2>
     </div>
 
     <div class="card-content">
-      <p>{{ $t('prompts.uploadMessage') }}</p>
+      <p>{{ $t("prompts.uploadMessage") }}</p>
     </div>
 
     <div class="card-action full">
@@ -22,18 +22,17 @@
 </template>
 
 <script>
-
 export default {
-  name: 'upload',
+  name: "upload",
   methods: {
     uploadFile: function () {
-      document.getElementById('upload-input').value = ''
-      document.getElementById('upload-input').click()
+      document.getElementById("upload-input").value = "";
+      document.getElementById("upload-input").click();
     },
     uploadFolder: function () {
-      document.getElementById('upload-folder-input').value = ''
-      document.getElementById('upload-folder-input').click()
-    }
-  }
-}
+      document.getElementById("upload-folder-input").value = "";
+      document.getElementById("upload-folder-input").click();
+    },
+  },
+};
 </script>

frontend/src/components/settings/Commands.vue

@@ -1,28 +1,30 @@
 <template>
   <div>
-    <h3>{{ $t('settings.userCommands') }}</h3>
-    <p class="small">{{ $t('settings.userCommandsHelp') }} <i>git svn hg</i>.</p>
-    <input class="input input--block" type="text" v-model.trim="raw">
+    <h3>{{ $t("settings.userCommands") }}</h3>
+    <p class="small">
+      {{ $t("settings.userCommandsHelp") }} <i>git svn hg</i>.
+    </p>
+    <input class="input input--block" type="text" v-model.trim="raw" />
   </div>
 </template>
 
 <script>
 export default {
-  name: 'permissions',
-  props: ['commands'],
+  name: "permissions",
+  props: ["commands"],
   computed: {
     raw: {
-      get () {
-        return this.commands.join(' ')
+      get() {
+        return this.commands.join(" ");
       },
-      set (value) {
-        if (value !== '') {
-          this.$emit('update:commands', value.split(' '))
+      set(value) {
+        if (value !== "") {
+          this.$emit("update:commands", value.split(" "));
         } else {
-          this.$emit('update:commands', [])
+          this.$emit("update:commands", []);
         }
-      }
-    }
-  }
-}
+      },
+    },
+  },
+};
 </script>

frontend/src/components/settings/Languages.vue

@@ -1,46 +1,50 @@
 <template>
   <select v-on:change="change" :value="locale">
-    <option v-for="(language, value) in locales" :key="value" :value="value">{{ $t('languages.' + language) }}</option>
+    <option v-for="(language, value) in locales" :key="value" :value="value">
+      {{ $t("languages." + language) }}
+    </option>
   </select>
 </template>
 
 <script>
-
 export default {
-  name: 'languages',
-  props: [ 'locale' ],
+  name: "languages",
+  props: ["locale"],
   data() {
     let dataObj = {
       locales: {
-        ar: 'ar',
-        de: 'de',
-        en: 'en',
-        es: 'es',
-        fr: 'fr',
-        is: 'is',
-        it: 'it',
-        ja: 'ja',
-        ko: 'ko',
-        'nl-be': 'nlBE',
-        pl: 'pl',
-        'pt-br': 'ptBR',
-        pt: 'pt',
-        ro: 'ro',
-        ru: 'ru',
-        'sv-se': 'svSE',
-        'zh-cn': 'zhCN',
-        'zh-tw': 'zhTW'
-      }
+        ar: "ar",
+        de: "de",
+        en: "en",
+        es: "es",
+        fr: "fr",
+        is: "is",
+        it: "it",
+        ja: "ja",
+        ko: "ko",
+        "nl-be": "nlBE",
+        pl: "pl",
+        "pt-br": "ptBR",
+        pt: "pt",
+        ro: "ro",
+        ru: "ru",
+        "sv-se": "svSE",
+        "zh-cn": "zhCN",
+        "zh-tw": "zhTW",
+      },
     };
 
-    Object.defineProperty(dataObj, "locales", { configurable: false, writable: false });
+    Object.defineProperty(dataObj, "locales", {
+      configurable: false,
+      writable: false,
+    });
 
     return dataObj;
   },
   methods: {
-    change (event) {
-      this.$emit('update:locale', event.target.value)
-    }
-  }
-}
+    change(event) {
+      this.$emit("update:locale", event.target.value);
+    },
+  },
+};
 </script>

frontend/src/components/settings/Permissions.vue

@@ -1,41 +1,65 @@
 <template>
   <div>
-    <h3>{{ $t('settings.permissions') }}</h3>
-    <p class="small">{{ $t('settings.permissionsHelp') }}</p>
+    <h3>{{ $t("settings.permissions") }}</h3>
+    <p class="small">{{ $t("settings.permissionsHelp") }}</p>
 
-    <p><input type="checkbox" v-model="admin"> {{ $t('settings.administrator') }}</p>
+    <p>
+      <input type="checkbox" v-model="admin" />
+      {{ $t("settings.administrator") }}
+    </p>
 
-    <p><input type="checkbox" :disabled="admin" v-model="perm.create"> {{ $t('settings.perm.create') }}</p>
-    <p><input type="checkbox" :disabled="admin" v-model="perm.delete"> {{ $t('settings.perm.delete') }}</p>
-    <p><input type="checkbox" :disabled="admin" v-model="perm.download"> {{ $t('settings.perm.download') }}</p>
-    <p><input type="checkbox" :disabled="admin" v-model="perm.modify"> {{ $t('settings.perm.modify') }}</p>
-    <p v-if="isExecEnabled"><input type="checkbox" :disabled="admin" v-model="perm.execute"> {{ $t('settings.perm.execute') }}</p>
-    <p><input type="checkbox" :disabled="admin" v-model="perm.rename"> {{ $t('settings.perm.rename') }}</p>
-    <p><input type="checkbox" :disabled="admin" v-model="perm.share"> {{ $t('settings.perm.share') }}</p>
+    <p>
+      <input type="checkbox" :disabled="admin" v-model="perm.create" />
+      {{ $t("settings.perm.create") }}
+    </p>
+    <p>
+      <input type="checkbox" :disabled="admin" v-model="perm.delete" />
+      {{ $t("settings.perm.delete") }}
+    </p>
+    <p>
+      <input type="checkbox" :disabled="admin" v-model="perm.download" />
+      {{ $t("settings.perm.download") }}
+    </p>
+    <p>
+      <input type="checkbox" :disabled="admin" v-model="perm.modify" />
+      {{ $t("settings.perm.modify") }}
+    </p>
+    <p v-if="isExecEnabled">
+      <input type="checkbox" :disabled="admin" v-model="perm.execute" />
+      {{ $t("settings.perm.execute") }}
+    </p>
+    <p>
+      <input type="checkbox" :disabled="admin" v-model="perm.rename" />
+      {{ $t("settings.perm.rename") }}
+    </p>
+    <p>
+      <input type="checkbox" :disabled="admin" v-model="perm.share" />
+      {{ $t("settings.perm.share") }}
+    </p>
   </div>
 </template>
 
 <script>
-import { enableExec } from '@/utils/constants'
+import { enableExec } from "@/utils/constants";
 export default {
-  name: 'permissions',
-  props: ['perm'],
+  name: "permissions",
+  props: ["perm"],
   computed: {
     admin: {
-      get () {
-        return this.perm.admin
+      get() {
+        return this.perm.admin;
       },
-      set (value) {
+      set(value) {
         if (value) {
           for (const key in this.perm) {
-            this.perm[key] = true
+            this.perm[key] = true;
           }
         }
 
-        this.perm.admin = value
-      }
+        this.perm.admin = value;
+      },
     },
-    isExecEnabled: () => enableExec
-  }
-}
+    isExecEnabled: () => enableExec,
+  },
+};
 </script>

frontend/src/components/settings/Rules.vue

@@ -1,57 +1,63 @@
 <template>
   <form class="rules small">
     <div v-for="(rule, index) in rules" :key="index">
-      <input type="checkbox" v-model="rule.regex"><label>Regex</label>
-      <input type="checkbox" v-model="rule.allow"><label>Allow</label>
+      <input type="checkbox" v-model="rule.regex" /><label>Regex</label>
+      <input type="checkbox" v-model="rule.allow" /><label>Allow</label>
 
       <input
         @keypress.enter.prevent
         type="text"
         v-if="rule.regex"
         v-model="rule.regexp.raw"
-        :placeholder="$t('settings.insertRegex')" />
+        :placeholder="$t('settings.insertRegex')"
+      />
       <input
         @keypress.enter.prevent
         type="text"
         v-else
         v-model="rule.path"
-        :placeholder="$t('settings.insertPath')" />
+        :placeholder="$t('settings.insertPath')"
+      />
 
-      <button class="button button--red" @click="remove($event, index)">-</button>
+      <button class="button button--red" @click="remove($event, index)">
+        -
+      </button>
     </div>
 
     <div>
-      <button class="button" @click="create" default="false">{{ $t('buttons.new') }}</button>
+      <button class="button" @click="create" default="false">
+        {{ $t("buttons.new") }}
+      </button>
     </div>
   </form>
 </template>
 
 <script>
 export default {
-  name: 'rules-textarea',
-  props: ['rules'],
+  name: "rules-textarea",
+  props: ["rules"],
   methods: {
-    remove (event, index) {
-      event.preventDefault()
-      let rules = [ ...this.rules ]
-      rules.splice(index, 1)
-      this.$emit('update:rules', [ ...rules ])
+    remove(event, index) {
+      event.preventDefault();
+      let rules = [...this.rules];
+      rules.splice(index, 1);
+      this.$emit("update:rules", [...rules]);
     },
-    create (event) {
-      event.preventDefault()
+    create(event) {
+      event.preventDefault();
 
-      this.$emit('update:rules', [
+      this.$emit("update:rules", [
         ...this.rules,
         {
           allow: true,
-          path: '',
+          path: "",
           regex: false,
           regexp: {
-            raw: ''
-          }
-        }
-      ])
-    }
-  }
-}
+            raw: "",
+          },
+        },
+      ]);
+    },
+  },
+};
 </script>

frontend/src/components/settings/Themes.vue

@@ -1,18 +1,18 @@
 <template>
   <select v-on:change="change" :value="theme">
-    <option value="">{{ $t('settings.themes.light') }}</option>
-    <option value="dark">{{ $t('settings.themes.dark') }}</option>
+    <option value="">{{ $t("settings.themes.light") }}</option>
+    <option value="dark">{{ $t("settings.themes.dark") }}</option>
   </select>
 </template>
 
 <script>
 export default {
-  name: 'themes',
-  props: [ 'theme' ],
+  name: "themes",
+  props: ["theme"],
   methods: {
-    change (event) {
-      this.$emit('update:theme', event.target.value)
-    }
-  }
-}
-</script>
+    change(event) {
+      this.$emit("update:theme", event.target.value);
+    },
+  },
+};
+</script>

frontend/src/components/settings/UserForm.vue

@@ -1,67 +1,92 @@
 <template>
   <div>
     <p v-if="!isDefault">
-      <label for="username">{{ $t('settings.username') }}</label>
-      <input class="input input--block" type="text" v-model="user.username" id="username">
+      <label for="username">{{ $t("settings.username") }}</label>
+      <input
+        class="input input--block"
+        type="text"
+        v-model="user.username"
+        id="username"
+      />
     </p>
 
     <p v-if="!isDefault">
-      <label for="password">{{ $t('settings.password') }}</label>
-      <input class="input input--block" type="password" :placeholder="passwordPlaceholder" v-model="user.password" id="password">
+      <label for="password">{{ $t("settings.password") }}</label>
+      <input
+        class="input input--block"
+        type="password"
+        :placeholder="passwordPlaceholder"
+        v-model="user.password"
+        id="password"
+      />
     </p>
 
     <p>
-      <label for="scope">{{ $t('settings.scope') }}</label>
-      <input class="input input--block" type="text" v-model="user.scope" id="scope">
+      <label for="scope">{{ $t("settings.scope") }}</label>
+      <input
+        class="input input--block"
+        type="text"
+        v-model="user.scope"
+        id="scope"
+      />
     </p>
 
     <p>
-      <label for="locale">{{ $t('settings.language') }}</label>
-      <languages class="input input--block" id="locale" :locale.sync="user.locale"></languages>
+      <label for="locale">{{ $t("settings.language") }}</label>
+      <languages
+        class="input input--block"
+        id="locale"
+        :locale.sync="user.locale"
+      ></languages>
     </p>
 
     <p v-if="!isDefault">
-      <input type="checkbox" :disabled="user.perm.admin" v-model="user.lockPassword"> {{ $t('settings.lockPassword') }}
+      <input
+        type="checkbox"
+        :disabled="user.perm.admin"
+        v-model="user.lockPassword"
+      />
+      {{ $t("settings.lockPassword") }}
     </p>
 
     <permissions :perm.sync="user.perm" />
     <commands v-if="isExecEnabled" :commands.sync="user.commands" />
 
     <div v-if="!isDefault">
-      <h3>{{ $t('settings.rules') }}</h3>
-      <p class="small">{{ $t('settings.rulesHelp') }}</p>
+      <h3>{{ $t("settings.rules") }}</h3>
+      <p class="small">{{ $t("settings.rulesHelp") }}</p>
       <rules :rules.sync="user.rules" />
     </div>
   </div>
 </template>
 
 <script>
-import Languages from './Languages'
-import Rules from './Rules'
-import Permissions from './Permissions'
-import Commands from './Commands'
-import { enableExec } from '@/utils/constants'
+import Languages from "./Languages";
+import Rules from "./Rules";
+import Permissions from "./Permissions";
+import Commands from "./Commands";
+import { enableExec } from "@/utils/constants";
 
 export default {
-  name: 'user',
+  name: "user",
   components: {
     Permissions,
     Languages,
     Rules,
-    Commands
+    Commands,
   },
-  props: [ 'user', 'isNew', 'isDefault' ],
+  props: ["user", "isNew", "isDefault"],
   computed: {
-    passwordPlaceholder () {
-      return this.isNew ? '' : this.$t('settings.avoidChanges')
+    passwordPlaceholder() {
+      return this.isNew ? "" : this.$t("settings.avoidChanges");
     },
-    isExecEnabled: () => enableExec
+    isExecEnabled: () => enableExec,
   },
   watch: {
-    'user.perm.admin': function () {
-      if (!this.user.perm.admin) return
-      this.user.lockPassword = false
-    }
-  }
-}
+    "user.perm.admin": function () {
+      if (!this.user.perm.admin) return;
+      this.user.lockPassword = false;
+    },
+  },
+};
 </script>

frontend/src/css/_share.css

@@ -34,7 +34,7 @@
 }
 
 .share__box__info {
-  flex: 1 1 auto;
+  flex: 1 1 18em;
 }
 
 .share__box__element {
@@ -70,9 +70,4 @@
   padding: .5em;
   text-align: center;
   animation: .2s opac forwards;
-}
-
-.share__promt__card {
-  max-width: max-content !important;
-  width: auto !important;
-}
+}

frontend/src/css/base.css

@@ -83,29 +83,29 @@ main {
   width: calc(100% - 19em);
 }
 
-#breadcrumbs {
+.breadcrumbs {
   height: 3em;
   border-bottom: 1px solid rgba(0, 0, 0, 0.05);
 }
 
-#breadcrumbs span,
-#breadcrumbs {
+.breadcrumbs span,
+.breadcrumbs {
   display: flex;
   align-items: center;
   color: #6f6f6f;
 }
 
-#breadcrumbs a {
+.breadcrumbs a {
   color: inherit;
   transition: .1s ease-in;
   border-radius: .125em;
 }
 
-#breadcrumbs a:hover {
+.breadcrumbs a:hover {
   background-color: rgba(0,0,0, 0.05);
 }
 
-#breadcrumbs span a {
+.breadcrumbs span a {
   padding: .2em;
 }
 

frontend/src/css/dashboard.css

@@ -1,8 +1,29 @@
 .dashboard {
-  max-width: 600px;
   margin: 1em 0;
 }
 
+.dashboard .row {
+  display: flex;
+  margin: 0 -.5em;
+  flex-wrap: wrap;
+}
+
+.dashboard .row .column {
+  display: flex;
+  padding: 0 .5em;
+  width: 50%;
+}
+
+.dashboard .row .column .card {
+  flex-grow: 1;
+}
+
+@media(max-width: 1200px) {
+  .dashboard .row .column {
+    width: 100%;
+  }
+}
+
 a {
   color: inherit
 }
@@ -28,25 +49,56 @@ p code {
 }
 
 .dashboard #nav {
+  display: flex;
+  padding-bottom: 1em;
+  overflow: auto;
+}
+
+.dashboard #nav .wrapper {
+  display: flex;
+  flex-grow: 1;
+  border-bottom: 2px solid rgba(0, 0, 0, 0.05);
+}
+
+.dashboard #nav ul {
   list-style: none;
   display: flex;
   color: rgb(84, 110, 122);
   font-weight: 500;
-  margin: 0 0 1em;
+  padding: 0;
+  margin: 0 0 -2px 0;
   font-size: .8em;
   text-align: center;
-  justify-content: space-between;
-  padding: 0;
+  justify-content: left;
 }
 
-.dashboard #nav li {
+.dashboard #nav ul li {
+  position: relative;
+  padding: 1.5em 2em;
+  white-space: nowrap;
+  border-bottom: 2px solid transparent;
+  transition: .1s ease-in-out all;
+
+}
+
+.dashboard #nav ul li:hover {
+  background: var(--moon-grey);
+}
+
+.dashboard #nav ul li.active {
+  border-color: var(--blue);
+  color: var(--blue);
+}
+
+.dashboard #nav ul li.active::before {
   width: 100%;
-  padding: 0 0 1em;
-  border-bottom: 2px solid rgba(0, 0, 0, 0.05);
-}
-
-.dashboard #nav li.active {
-  border-color: var(--blue)
+  height: 100%;
+  position: absolute;
+  top: 0;
+  left: 0;
+  content: "";
+  background: var(--blue);
+  opacity: 0.08;
 }
 
 .dashboard #nav i {
@@ -92,7 +144,7 @@ table tr>*:last-child {
 
 .card {
   position: relative;
-  margin: .5rem 0 1rem 0;
+  margin: 0 0 1rem 0;
   background-color: #fff;
   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);
@@ -151,6 +203,7 @@ table tr>*:last-child {
 
 .card .card-content.full {
   padding-bottom: 0;
+  overflow: auto;
 }
 
 .card h2 {
@@ -226,6 +279,18 @@ table tr>*:last-child {
   opacity: 1;
 }
 
+.card#share .input-group {
+  display: flex;
+}
+
+.card#share .input-group * {
+  border: none;
+}
+
+.card#share .input-group input {
+  flex: 1;
+}
+
 .overlay {
   background-color: rgba(0, 0, 0, 0.5);
   position: fixed;

frontend/src/css/fonts.css

@@ -110,4 +110,60 @@
   unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215, U+E0FF, U+EFFD, U+F000;
 }
 
+@font-face {
+  font-family: 'Roboto';
+  font-style: normal;
+  font-weight: 700;
+  src: local('Roboto Bold'), local('Roboto-Bold'), url(../assets/fonts/roboto/bold-cyrillic-ext.woff2) format('woff2');
+  unicode-range: U+0460-052F, U+20B4, U+2DE0-2DFF, U+A640-A69F;
+}
+
+@font-face {
+  font-family: 'Roboto';
+  font-style: normal;
+  font-weight: 700;
+  src: local('Roboto Bold'), local('Roboto-Bold'), url(../assets/fonts/roboto/bold-cyrillic.woff2) format('woff2');
+  unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
+}
+
+@font-face {
+  font-family: 'Roboto';
+  font-style: normal;
+  font-weight: 700;
+  src: local('Roboto Bold'), local('Roboto-Bold'), url(../assets/fonts/roboto/bold-greek-ext.woff2) format('woff2');
+  unicode-range: U+1F00-1FFF;
+}
+
+@font-face {
+  font-family: 'Roboto';
+  font-style: normal;
+  font-weight: 700;
+  src: local('Roboto Bold'), local('Roboto-Bold'), url(../assets/fonts/roboto/bold-greek.woff2) format('woff2');
+  unicode-range: U+0370-03FF;
+}
+
+@font-face {
+  font-family: 'Roboto';
+  font-style: normal;
+  font-weight: 700;
+  src: local('Roboto Bold'), local('Roboto-Bold'), url(../assets/fonts/roboto/bold-vietnamese.woff2) format('woff2');
+  unicode-range: U+0102-0103, U+1EA0-1EF9, U+20AB;
+}
+
+@font-face {
+  font-family: 'Roboto';
+  font-style: normal;
+  font-weight: 700;
+  src: local('Roboto Bold'), local('Roboto-Bold'), url(../assets/fonts/roboto/bold-latin-ext.woff2) format('woff2');
+  unicode-range: U+0100-024F, U+1E00-1EFF, U+20A0-20AB, U+20AD-20CF, U+2C60-2C7F, U+A720-A7FF;
+}
+
+@font-face {
+  font-family: 'Roboto';
+  font-style: normal;
+  font-weight: 700;
+  src: local('Roboto Bold'), local('Roboto-Bold'), url(../assets/fonts/roboto/bold-latin.woff2) format('woff2');
+  unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2212, U+2215, U+E0FF, U+EFFD, U+F000;
+}
+
 @import "~material-design-icons/iconfont/material-icons.css";

frontend/src/css/header.css

@@ -6,9 +6,25 @@ header {
   position: fixed;
   top: 0;
   left: 0;
+  height: 4em;
   width: 100%;
   padding: 0;
   display: flex;
+  padding: 0.5em 0.5em 0.5em 1em;
+  align-items: center;
+}
+
+header > * {
+  flex: 0 0 auto;
+}
+
+header title {
+  display: block;
+  flex: 1 1 auto;
+  padding: 0 1em;
+  overflow: hidden;
+  text-overflow: ellipsis;
+  font-size: 1.2em;
 }
 
 header .overlay {
@@ -30,17 +46,6 @@ header img {
   height: 2.5em;
 }
 
-header>div:first-child>.action {
-  display: none;
-}
-
-header>div {
-  display: flex;
-  width: 100%;
-  padding: 0.5em 0.5em 0.5em 1em;
-  align-items: center;
-}
-
 header .action span {
   display: none;
 }
@@ -50,19 +55,8 @@ header>div div {
   position: relative;
 }
 
-header>div:last-child div {
-  display: flex;
-}
-
-header>div:first-child {
-  height: 4em;
-}
-
-header>div:last-child {
-  justify-content: flex-end;
-}
-
-header .search-button {
+header .search-button,
+header .menu-button {
   display: none;
 }
 

frontend/src/css/listing.css

@@ -25,6 +25,7 @@
   transition: .1s ease background, .1s ease opacity;
   align-items: center;
   cursor: pointer;
+  user-select: none;
 }
 
 #listing .item div:last-of-type {
@@ -55,6 +56,7 @@
 #listing .item img {
   width: 4em;
   height: 4em;
+  object-fit: cover;
   margin-right: 0.1em;
   vertical-align: bottom;
 }

frontend/src/css/mobile.css

@@ -70,6 +70,7 @@
     box-shadow: rgba(0, 0, 0, 0.06) 0px 1px 3px, rgba(0, 0, 0, 0.12) 0px 1px 2px;
     width: 95%;
     max-width: 20em;
+    z-index: 1;
   }
   #file-selection .action {
     border-radius: 50%;
@@ -81,6 +82,9 @@
     color: #6f6f6f;
     margin-right: auto;
   }
+  #file-selection .action span {
+    display: none;
+  }
   nav {
     top: 0;
     z-index: 99999;
@@ -95,7 +99,7 @@
     left: 0;
   }
   header .search-button,
-  header>div:first-child>.action {
+  header .menu-button {
     display: inherit;
   }
   header img {

frontend/src/css/styles.css

@@ -96,10 +96,11 @@
   color: #fff;
   border-radius: 50%;
   font-size: .75em;
-  width: 1.5em;
-  height: 1.5em;
+  width: 1.8em;
+  height: 1.8em;
   text-align: center;
-  line-height: 1.25em;
+  line-height: 1.55em;
+  font-weight: bold;
   border: 2px solid white;
 }
 
@@ -108,6 +109,7 @@
 
 #previewer {
   background-color: rgba(0, 0, 0, 0.9);
+  padding-top: 4em;
   position: fixed;
   top: 0;
   left: 0;
@@ -117,45 +119,32 @@
   overflow: hidden;
 }
 
-#previewer .bar {
-  width: 100%;
-  display: flex;
-  padding: 0.5em;
-  height: 3.7em;
-}
-
-#previewer .bar > * {
-  flex: 0 0 auto;
-}
-
-#previewer .bar .title {
-  display: block;
-  flex: 1 1 auto;
-  padding: 0 1em;
-  line-height: 2.3em;
-  overflow: hidden;
-  text-overflow: ellipsis;
-  font-size: 1.2em;
+#previewer header {
+  background: none;
   color: #fff;
 }
 
-#previewer .action i {
+#previewer header > .action i {
   color: #fff;
 }
 
-#previewer .action:hover {
+@media (min-width: 738px) {
+  #previewer header #dropdown .action i {
+    color: #fff;
+  }
+}
+
+#previewer header .action:hover {
   background-color: rgba(255, 255, 255, 0.3)
 }
 
-#previewer .action span {
+#previewer header .action span {
   display: none;
 }
 
 #previewer .preview {
-  margin: 2em auto 4em;
-  max-width: 80%;
   text-align: center;
-  height: calc(100vh - 9.7em);
+  height: calc(100vh - 4em);
 }
 
 #previewer .preview pre {
@@ -170,6 +159,10 @@
   margin: 0;
 }
 
+#previewer .preview video {
+  height: 100%;
+}
+
 #previewer .pdf {
   width: 100%;
   height: 100%;
@@ -182,8 +175,25 @@
 #previewer>button {
   margin: 0;
   position: fixed;
-  top: 50%;
+  top: calc(50% + 1.85em);
   transform: translateY(-50%);
+  background-color: rgba(80, 80, 80, .5);
+  color: white;
+  border-radius: 50%;
+  cursor: pointer;
+  border: 0;
+  margin: 0;
+  padding: 0;
+  transition: 0.2s ease all;
+}
+
+#previewer>button.hidden {
+  opacity: 0;
+  visibility: hidden;
+}
+
+#previewer>button>i {
+  padding: 0.4em;
 }
 
 #previewer>button:first-of-type {
@@ -199,6 +209,7 @@
 #editor-container {
   background-color: #fafafa;
   position: fixed;
+  padding-top: 4em;
   top: 0;
   left: 0;
   width: 100%;
@@ -206,43 +217,28 @@
   overflow: hidden;
 }
 
-#editor-container .bar {
-  width: 100%;
-  text-align: right;
-  display: flex;
-  padding: 0.5em;
-  height: 3.7em;
-  background-color: #fff;
-  border-bottom: 1px solid rgba(0, 0, 0, 0.075);
-  box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
-}
-
-#editor-container .title {
-  margin-right: auto;
-  padding: 0 1em;
-  line-height: 2.7em;
-  overflow: hidden;
-  word-break: break-word;
-}
-
 #previewer .loading {
   height: 100%;
   width: 100%;
 }
 
 #editor-container #editor {
-  height: calc(100vh - 8.2em);
+  height: calc(100vh - 8.4em);
 }
 
-#editor-container #breadcrumbs {
+#editor-container .breadcrumbs {
   height: 2.3em;
   padding: 0 1em;
 }
 
-#editor-container #breadcrumbs span {
+#editor-container .breadcrumbs span {
   font-size: 12px;
 }
 
+#editor-container .breadcrumbs i {
+  font-size: 16px;
+}
+
 /* * * * * * * * * * * * * * * *
  *            PROMPT           *
  * * * * * * * * * * * * * * * */

frontend/src/i18n/index.js

@@ -1,116 +1,116 @@
-import Vue from 'vue'
-import VueI18n from 'vue-i18n'
+import Vue from "vue";
+import VueI18n from "vue-i18n";
 
-import ar from './ar.json'
-import de from './de.json'
-import en from './en.json'
-import es from './es.json'
-import fr from './fr.json'
-import is from './is.json'
-import it from './it.json'
-import ja from './ja.json'
-import ko from './ko.json'
-import nlBE from './nl-be.json'
-import pl from './pl.json'
-import pt from './pt.json'
-import ptBR from './pt-br.json'
-import ro from './ro.json'
-import ru from './ru.json'
-import svSE from './sv-se.json'
-import zhCN from './zh-cn.json'
-import zhTW from './zh-tw.json'
+import ar from "./ar.json";
+import de from "./de.json";
+import en from "./en.json";
+import es from "./es.json";
+import fr from "./fr.json";
+import is from "./is.json";
+import it from "./it.json";
+import ja from "./ja.json";
+import ko from "./ko.json";
+import nlBE from "./nl-be.json";
+import pl from "./pl.json";
+import pt from "./pt.json";
+import ptBR from "./pt-br.json";
+import ro from "./ro.json";
+import ru from "./ru.json";
+import svSE from "./sv-se.json";
+import zhCN from "./zh-cn.json";
+import zhTW from "./zh-tw.json";
 
-Vue.use(VueI18n)
+Vue.use(VueI18n);
 
-export function detectLocale () {
-  let locale = (navigator.language || navigator.browserLangugae).toLowerCase()
+export function detectLocale() {
+  let locale = (navigator.language || navigator.browserLangugae).toLowerCase();
   switch (true) {
     case /^ar.*/i.test(locale):
-      locale = 'ar'
-      break
+      locale = "ar";
+      break;
     case /^es.*/i.test(locale):
-      locale = 'es'
-      break
+      locale = "es";
+      break;
     case /^en.*/i.test(locale):
-      locale = 'en'
-      break
+      locale = "en";
+      break;
     case /^it.*/i.test(locale):
-      locale = 'it'
-      break
+      locale = "it";
+      break;
     case /^fr.*/i.test(locale):
-      locale = 'fr'
-      break
+      locale = "fr";
+      break;
     case /^pt.*/i.test(locale):
-      locale = 'pt'
-      break
+      locale = "pt";
+      break;
     case /^pt-BR.*/i.test(locale):
-      locale = 'pt-br'
-      break
+      locale = "pt-br";
+      break;
     case /^ja.*/i.test(locale):
-      locale = 'ja'
-      break
+      locale = "ja";
+      break;
     case /^zh-CN/i.test(locale):
-      locale = 'zh-cn'
-      break
+      locale = "zh-cn";
+      break;
     case /^zh-TW/i.test(locale):
-      locale = 'zh-tw'
-      break
+      locale = "zh-tw";
+      break;
     case /^zh.*/i.test(locale):
-      locale = 'zh-cn'
-      break
+      locale = "zh-cn";
+      break;
     case /^de.*/i.test(locale):
-      locale = 'de'
-      break
+      locale = "de";
+      break;
     case /^ru.*/i.test(locale):
-      locale = 'ru'
-      break
+      locale = "ru";
+      break;
     case /^pl.*/i.test(locale):
-      locale = 'pl'
-      break
+      locale = "pl";
+      break;
     case /^ko.*/i.test(locale):
-      locale = 'ko'
-      break
+      locale = "ko";
+      break;
     default:
-      locale = 'en'
+      locale = "en";
   }
 
-  return locale
+  return locale;
 }
 
 const removeEmpty = (obj) =>
-    Object.keys(obj)
-        .filter((k) => obj[k] !== null && obj[k] !== undefined && obj[k] !== '') // Remove undef. and null and empty.string.
-        .reduce(
-            (newObj, k) =>
-                typeof obj[k] === 'object'
-                    ? Object.assign(newObj, { [k]: removeEmpty(obj[k]) }) // Recurse.
-                    : Object.assign(newObj, { [k]: obj[k] }), // Copy value.
-            {},
-        );
+  Object.keys(obj)
+    .filter((k) => obj[k] !== null && obj[k] !== undefined && obj[k] !== "") // Remove undef. and null and empty.string.
+    .reduce(
+      (newObj, k) =>
+        typeof obj[k] === "object"
+          ? Object.assign(newObj, { [k]: removeEmpty(obj[k]) }) // Recurse.
+          : Object.assign(newObj, { [k]: obj[k] }), // Copy value.
+      {}
+    );
 
 const i18n = new VueI18n({
   locale: detectLocale(),
-  fallbackLocale: 'en',
+  fallbackLocale: "en",
   messages: {
-    'ar': removeEmpty(ar),
-    'de': removeEmpty(de),
-    'en': en,
-    'es': removeEmpty(es),
-    'fr': removeEmpty(fr),
-    'is': removeEmpty(is),
-    'it': removeEmpty(it),
-    'ja': removeEmpty(ja),
-    'ko': removeEmpty(ko),
-    'nl-be': removeEmpty(nlBE),
-    'pl': removeEmpty(pl),
-    'pt-br': removeEmpty(ptBR),
-    'pt': removeEmpty(pt),
-    'ru': removeEmpty(ru),
-    'ro': removeEmpty(ro),
-    'sv-se': removeEmpty(svSE),
-    'zh-cn': removeEmpty(zhCN),
-    'zh-tw': removeEmpty(zhTW)
-  }
-})
+    ar: removeEmpty(ar),
+    de: removeEmpty(de),
+    en: en,
+    es: removeEmpty(es),
+    fr: removeEmpty(fr),
+    is: removeEmpty(is),
+    it: removeEmpty(it),
+    ja: removeEmpty(ja),
+    ko: removeEmpty(ko),
+    "nl-be": removeEmpty(nlBE),
+    pl: removeEmpty(pl),
+    "pt-br": removeEmpty(ptBR),
+    pt: removeEmpty(pt),
+    ru: removeEmpty(ru),
+    ro: removeEmpty(ro),
+    "sv-se": removeEmpty(svSE),
+    "zh-cn": removeEmpty(zhCN),
+    "zh-tw": removeEmpty(zhTW),
+  },
+});
 
-export default i18n
+export default i18n;

frontend/src/i18n/zh-cn.json

@@ -8,7 +8,7 @@
     "create": "创建",
     "delete": "删除",
     "download": "下载",
-    "hideDotfiles": "",
+    "hideDotfiles": "不显示隐藏的文件",
     "info": "信息",
     "more": "更多",
     "move": "移动",
@@ -29,6 +29,7 @@
     "selectMultiple": "选择多个",
     "share": "分享",
     "shell": "激活 shell",
+    "submit": "提交",
     "switchView": "切换显示方式",
     "toggleSidebar": "切换侧边栏",
     "update": "更新",
@@ -138,11 +139,12 @@
     "replace": "替换",
     "replaceMessage": "您尝试上传的文件中有一个与现有文件的名称存在冲突。是否替换现有的同名文件？",
     "schedule": "计划",
-    "scheduleMessage": "请选择发布这篇帖子的日期。",
+    "scheduleMessage": "请选择发布这篇帖子的日期与时间。",
     "show": "点击以显示",
     "size": "大小",
     "upload": "上传",
-    "uploadMessage": "选择上传项。"
+    "uploadMessage": "选择上传选项。",
+    "optionalPassword": "密码（选填，不填即无密码）"
   },
   "search": {
     "images": "图像",

frontend/src/main.js

@@ -1,43 +1,47 @@
-import { sync } from 'vuex-router-sync'
-import store from '@/store'
-import router from '@/router'
-import i18n from '@/i18n'
-import Vue from '@/utils/vue'
-import { recaptcha, loginPage } from '@/utils/constants'
-import { login, validateLogin } from '@/utils/auth'
-import App from '@/App'
+import { sync } from "vuex-router-sync";
+import store from "@/store";
+import router from "@/router";
+import i18n from "@/i18n";
+import Vue from "@/utils/vue";
+import { recaptcha, loginPage } from "@/utils/constants";
+import { login, validateLogin } from "@/utils/auth";
+import App from "@/App";
 
-sync(store, router)
+sync(store, router);
 
-async function start () {
-  if (loginPage) {
-    await validateLogin()
-  } else {
-    await login('', '', '')
+async function start() {
+  try {
+    if (loginPage) {
+      await validateLogin();
+    } else {
+      await login("", "", "");
+    }
+  } catch (e) {
+    console.log(e);
   }
 
   if (recaptcha) {
-    await new Promise (resolve => {
+    await new Promise((resolve) => {
       const check = () => {
-        if (typeof window.grecaptcha === 'undefined') {
-          setTimeout(check, 100)
+        if (typeof window.grecaptcha === "undefined") {
+          setTimeout(check, 100);
         } else {
-          resolve()
+          resolve();
         }
-      }
+      };
 
-      check()
-    })
+      check();
+    });
   }
 
   new Vue({
-    el: '#app',
+    el: "#app",
     store,
     router,
     i18n,
-    template: '<App/>',
-    components: { App }
-  })
+    template: "<App/>",
+    components: { App },
+  });
 }
 
-start()
+start();

frontend/src/router/index.js

@@ -1,156 +1,166 @@
-import Vue from 'vue'
-import Router from 'vue-router'
-import Login from '@/views/Login'
-import Layout from '@/views/Layout'
-import Files from '@/views/Files'
-import Share from '@/views/Share'
-import Users from '@/views/settings/Users'
-import User from '@/views/settings/User'
-import Settings from '@/views/Settings'
-import GlobalSettings from '@/views/settings/Global'
-import ProfileSettings from '@/views/settings/Profile'
-import Shares from '@/views/settings/Shares'
-import Error403 from '@/views/errors/403'
-import Error404 from '@/views/errors/404'
-import Error500 from '@/views/errors/500'
-import store from '@/store'
-import { baseURL } from '@/utils/constants'
+import Vue from "vue";
+import Router from "vue-router";
+import Login from "@/views/Login";
+import Layout from "@/views/Layout";
+import Files from "@/views/Files";
+import Share from "@/views/Share";
+import Users from "@/views/settings/Users";
+import User from "@/views/settings/User";
+import Settings from "@/views/Settings";
+import GlobalSettings from "@/views/settings/Global";
+import ProfileSettings from "@/views/settings/Profile";
+import Shares from "@/views/settings/Shares";
+import Errors from "@/views/Errors";
+import store from "@/store";
+import { baseURL } from "@/utils/constants";
 
-Vue.use(Router)
+Vue.use(Router);
 
 const router = new Router({
   base: baseURL,
-  mode: 'history',
+  mode: "history",
   routes: [
     {
-      path: '/login',
-      name: 'Login',
+      path: "/login",
+      name: "Login",
       component: Login,
       beforeEnter: (to, from, next) => {
         if (store.getters.isLogged) {
-          return next({ path: '/files' })
+          return next({ path: "/files" });
         }
 
-        document.title = 'Login'
-        next()
-      }
+        document.title = "Login";
+        next();
+      },
     },
     {
-      path: '/*',
+      path: "/*",
       component: Layout,
       children: [
         {
-          path: '/share/*',
-          name: 'Share',
-          component: Share
+          path: "/share/*",
+          name: "Share",
+          component: Share,
         },
         {
-          path: '/files/*',
-          name: 'Files',
+          path: "/files/*",
+          name: "Files",
           component: Files,
           meta: {
-            requiresAuth: true
-          }
+            requiresAuth: true,
+          },
         },
         {
-          path: '/settings',
-          name: 'Settings',
+          path: "/settings",
+          name: "Settings",
           component: Settings,
           redirect: {
-            path: '/settings/profile'
+            path: "/settings/profile",
           },
           meta: {
-            requiresAuth: true
+            requiresAuth: true,
           },
           children: [
             {
-              path: '/settings/profile',
-              name: 'Profile Settings',
-              component: ProfileSettings
+              path: "/settings/profile",
+              name: "Profile Settings",
+              component: ProfileSettings,
             },
             {
-              path: '/settings/shares',
-              name: 'Shares',
-              component: Shares
+              path: "/settings/shares",
+              name: "Shares",
+              component: Shares,
             },
             {
-              path: '/settings/global',
-              name: 'Global Settings',
+              path: "/settings/global",
+              name: "Global Settings",
               component: GlobalSettings,
               meta: {
-                requiresAdmin: true
-              }
+                requiresAdmin: true,
+              },
             },
             {
-              path: '/settings/users',
-              name: 'Users',
+              path: "/settings/users",
+              name: "Users",
               component: Users,
               meta: {
-                requiresAdmin: true
-              }
+                requiresAdmin: true,
+              },
             },
             {
-              path: '/settings/users/*',
-              name: 'User',
+              path: "/settings/users/*",
+              name: "User",
               component: User,
               meta: {
-                requiresAdmin: true
-              }
-            }
-          ]
+                requiresAdmin: true,
+              },
+            },
+          ],
         },
         {
-          path: '/403',
-          name: 'Forbidden',
-          component: Error403
+          path: "/403",
+          name: "Forbidden",
+          component: Errors,
+          props: {
+            errorCode: 403,
+            showHeader: true,
+          },
         },
         {
-          path: '/404',
-          name: 'Not Found',
-          component: Error404
+          path: "/404",
+          name: "Not Found",
+          component: Errors,
+          props: {
+            errorCode: 404,
+            showHeader: true,
+          },
         },
         {
-          path: '/500',
-          name: 'Internal Server Error',
-          component: Error500
+          path: "/500",
+          name: "Internal Server Error",
+          component: Errors,
+          props: {
+            errorCode: 500,
+            showHeader: true,
+          },
         },
         {
-          path: '/files',
+          path: "/files",
           redirect: {
-            path: '/files/'
-          }
+            path: "/files/",
+          },
         },
         {
-          path: '/*',
-          redirect: to => `/files${to.path}`
-        }
-      ]
-    }
-  ]
-})
+          path: "/*",
+          redirect: (to) => `/files${to.path}`,
+        },
+      ],
+    },
+  ],
+});
 
 router.beforeEach((to, from, next) => {
-  document.title = to.name
+  document.title = to.name;
 
-  if (to.matched.some(record => record.meta.requiresAuth)) {
+  if (to.matched.some((record) => record.meta.requiresAuth)) {
     if (!store.getters.isLogged) {
       next({
-        path: '/login',
-        query: { redirect: to.fullPath }
-      })
+        path: "/login",
+        query: { redirect: to.fullPath },
+      });
 
-      return
+      return;
     }
 
-    if (to.matched.some(record => record.meta.requiresAdmin)) {
+    if (to.matched.some((record) => record.meta.requiresAdmin)) {
       if (!store.state.user.perm.admin) {
-        next({ path: '/403' })
-        return
+        next({ path: "/403" });
+        return;
       }
     }
   }
 
-  next()
-})
+  next();
+});
 
-export default router
+export default router;

frontend/src/store/getters.js

@@ -1,19 +1,16 @@
 const getters = {
-  isLogged: state => state.user !== null,
-  isFiles: state => !state.loading && state.route.name === 'Files',
+  isLogged: (state) => state.user !== null,
+  isFiles: (state) => !state.loading && state.route.name === "Files",
   isListing: (state, getters) => getters.isFiles && state.req.isDir,
-  isEditor: (state, getters) => getters.isFiles && (state.req.type === 'text' || state.req.type === 'textImmutable'),
-  isPreview: state => state.previewMode,
-  isSharing: state =>  !state.loading && state.route.name === 'Share',
-  selectedCount: state => state.selected.length,
-  progress : state => {
+  selectedCount: (state) => state.selected.length,
+  progress: (state) => {
     if (state.upload.progress.length == 0) {
       return 0;
     }
 
-    let sum = state.upload.progress.reduce((acc, val) => acc + val)
-    return Math.ceil(sum / state.upload.size * 100);
-  }
-}
+    let sum = state.upload.progress.reduce((acc, val) => acc + val);
+    return Math.ceil((sum / state.upload.size) * 100);
+  },
+};
 
-export default getters
+export default getters;

frontend/src/store/index.js

@@ -1,20 +1,20 @@
-import Vue from 'vue'
-import Vuex from 'vuex'
-import mutations from './mutations'
-import getters from './getters'
-import upload from './modules/upload'
+import Vue from "vue";
+import Vuex from "vuex";
+import mutations from "./mutations";
+import getters from "./getters";
+import upload from "./modules/upload";
 
-Vue.use(Vuex)
+Vue.use(Vuex);
 
 const state = {
   user: null,
   req: {},
   oldReq: {},
   clipboard: {
-    key: '',
-    items: []
+    key: "",
+    items: [],
   },
-  jwt: '',
+  jwt: "",
   progress: 0,
   loading: false,
   reload: false,
@@ -22,17 +22,13 @@ const state = {
   multiple: false,
   show: null,
   showShell: false,
-  showMessage: null,
   showConfirm: null,
-  previewMode: false,
-  hash: '',
-  token: '',
-}
+};
 
 export default new Vuex.Store({
   strict: true,
   state,
   getters,
   mutations,
-  modules: { upload }
-})
+  modules: { upload },
+});

frontend/src/store/modules/upload.js

@@ -1,7 +1,7 @@
-import Vue from 'vue'
-import { files as api } from '@/api'
-import throttle from 'lodash.throttle'
-import buttons from '@/utils/buttons'
+import Vue from "vue";
+import { files as api } from "@/api";
+import throttle from "lodash.throttle";
+import buttons from "@/utils/buttons";
 
 const UPLOADS_LIMIT = 5;
 
@@ -10,93 +10,100 @@ const state = {
   size: 0,
   progress: [],
   queue: [],
-  uploads: {}
-}
+  uploads: {},
+};
 
 const mutations = {
   setProgress(state, { id, loaded }) {
-    Vue.set(state.progress, id, loaded)
+    Vue.set(state.progress, id, loaded);
   },
   reset: (state) => {
-    state.id = 0
-    state.size = 0
-    state.progress = []
+    state.id = 0;
+    state.size = 0;
+    state.progress = [];
   },
   addJob: (state, item) => {
-    state.queue.push(item)
-    state.size += item.file.size
-    state.id++
+    state.queue.push(item);
+    state.size += item.file.size;
+    state.id++;
   },
   moveJob(state) {
-    const item = state.queue[0]
-    state.queue.shift()
-    Vue.set(state.uploads, item.id, item)
+    const item = state.queue[0];
+    state.queue.shift();
+    Vue.set(state.uploads, item.id, item);
   },
   removeJob(state, id) {
-    delete state.uploads[id]
-  }
-}
+    delete state.uploads[id];
+  },
+};
 
 const beforeUnload = (event) => {
-  event.preventDefault()
-  event.returnValue = ''
-}
+  event.preventDefault();
+  event.returnValue = "";
+};
 
 const actions = {
   upload: (context, item) => {
     let uploadsCount = Object.keys(context.state.uploads).length;
 
-    let isQueueEmpty = context.state.queue.length == 0
-    let isUploadsEmpty = uploadsCount == 0
+    let isQueueEmpty = context.state.queue.length == 0;
+    let isUploadsEmpty = uploadsCount == 0;
 
     if (isQueueEmpty && isUploadsEmpty) {
-      window.addEventListener('beforeunload', beforeUnload)
-      buttons.loading('upload')
+      window.addEventListener("beforeunload", beforeUnload);
+      buttons.loading("upload");
     }
 
-    context.commit('addJob', item)
-    context.dispatch('processUploads')
+    context.commit("addJob", item);
+    context.dispatch("processUploads");
   },
   finishUpload: (context, item) => {
-    context.commit('setProgress', { id: item.id, loaded: item.file.size })
-    context.commit('removeJob', item.id)
-    context.dispatch('processUploads')
+    context.commit("setProgress", { id: item.id, loaded: item.file.size });
+    context.commit("removeJob", item.id);
+    context.dispatch("processUploads");
   },
   processUploads: async (context) => {
     let uploadsCount = Object.keys(context.state.uploads).length;
 
-    let isBellowLimit = uploadsCount < UPLOADS_LIMIT
-    let isQueueEmpty = context.state.queue.length == 0
-    let isUploadsEmpty = uploadsCount == 0
+    let isBellowLimit = uploadsCount < UPLOADS_LIMIT;
+    let isQueueEmpty = context.state.queue.length == 0;
+    let isUploadsEmpty = uploadsCount == 0;
 
-    let isFinished = isQueueEmpty && isUploadsEmpty
-    let canProcess = isBellowLimit && !isQueueEmpty
+    let isFinished = isQueueEmpty && isUploadsEmpty;
+    let canProcess = isBellowLimit && !isQueueEmpty;
 
     if (isFinished) {
-      window.removeEventListener('beforeunload', beforeUnload)
-      buttons.success('upload')
-      context.commit('reset')
-      context.commit('setReload', true, { root: true })
+      window.removeEventListener("beforeunload", beforeUnload);
+      buttons.success("upload");
+      context.commit("reset");
+      context.commit("setReload", true, { root: true });
     }
 
     if (canProcess) {
       const item = context.state.queue[0];
-      context.commit('moveJob')
+      context.commit("moveJob");
 
       if (item.file.isDir) {
-        await api.post(item.path).catch(Vue.prototype.$showError)
+        await api.post(item.path).catch(Vue.prototype.$showError);
       } else {
         let onUpload = throttle(
-          (event) => context.commit('setProgress', { id: item.id, loaded: event.loaded }),
-          100, { leading: true, trailing: false }
-        )
+          (event) =>
+            context.commit("setProgress", {
+              id: item.id,
+              loaded: event.loaded,
+            }),
+          100,
+          { leading: true, trailing: false }
+        );
 
-        await api.post(item.path, item.file, item.overwrite, onUpload).catch(Vue.prototype.$showError)
+        await api
+          .post(item.path, item.file, item.overwrite, onUpload)
+          .catch(Vue.prototype.$showError);
       }
 
-      context.dispatch('finishUpload', item)
+      context.dispatch("finishUpload", item);
     }
-  }
-}
+  },
+};
 
-export default { state, mutations, actions, namespaced: true }
+export default { state, mutations, actions, namespaced: true };

frontend/src/store/mutations.js

@@ -1,94 +1,87 @@
-import * as i18n from '@/i18n'
-import moment from 'moment'
+import * as i18n from "@/i18n";
+import moment from "moment";
 
 const mutations = {
-  closeHovers: state => {
-    state.show = null
-    state.showMessage = null
+  closeHovers: (state) => {
+    state.show = null;
+    state.showConfirm = null;
   },
   toggleShell: (state) => {
-    state.showShell = !state.showShell
+    state.showShell = !state.showShell;
   },
   showHover: (state, value) => {
-    if (typeof value !== 'object') {
-      state.show = value
-      return
+    if (typeof value !== "object") {
+      state.show = value;
+      return;
     }
 
-    state.show = value.prompt
-    state.showMessage = value.message
-    state.showConfirm = value.confirm
+    state.show = value.prompt;
+    state.showConfirm = value.confirm;
   },
-  showError: (state, value) => {
-    state.show = 'error'
-    state.showMessage = value
+  showError: (state) => {
+    state.show = "error";
   },
-  showSuccess: (state, value) => {
-    state.show = 'success'
-    state.showMessage = value
+  showSuccess: (state) => {
+    state.show = "success";
+  },
+  setLoading: (state, value) => {
+    state.loading = value;
+  },
+  setReload: (state, value) => {
+    state.reload = value;
   },
-  setLoading: (state, value) => { state.loading = value },
-  setReload: (state, value) => { state.reload = value },
   setUser: (state, value) => {
     if (value === null) {
-      state.user = null
-      return
+      state.user = null;
+      return;
     }
 
-    let locale = value.locale
+    let locale = value.locale;
 
-    if (locale === '') {
-      locale = i18n.detectLocale()
+    if (locale === "") {
+      locale = i18n.detectLocale();
     }
 
-    moment.locale(locale)
-    i18n.default.locale = locale
-    state.user = value
+    moment.locale(locale);
+    i18n.default.locale = locale;
+    state.user = value;
   },
   setJWT: (state, value) => (state.jwt = value),
-  setToken: (state, value ) => (state.token = value),
   multiple: (state, value) => (state.multiple = value),
-  addSelected: (state, value) => (state.selected.push(value)),
-  addPlugin: (state, value) => {
-    state.plugins.push(value)
-  },
+  addSelected: (state, value) => state.selected.push(value),
   removeSelected: (state, value) => {
-    let i = state.selected.indexOf(value)
-    if (i === -1) return
-    state.selected.splice(i, 1)
+    let i = state.selected.indexOf(value);
+    if (i === -1) return;
+    state.selected.splice(i, 1);
   },
   resetSelected: (state) => {
-    state.selected = []
+    state.selected = [];
   },
   updateUser: (state, value) => {
-    if (typeof value !== 'object') return
+    if (typeof value !== "object") return;
 
     for (let field in value) {
-      if (field === 'locale') {
-        moment.locale(value[field])
-        i18n.default.locale = value[field]
+      if (field === "locale") {
+        moment.locale(value[field]);
+        i18n.default.locale = value[field];
       }
 
-      state.user[field] = value[field]
+      state.user[field] = value[field];
     }
   },
   updateRequest: (state, value) => {
-    state.oldReq = state.req
-    state.req = value
+    state.oldReq = state.req;
+    state.req = value;
   },
   updateClipboard: (state, value) => {
-    state.clipboard.key = value.key
-    state.clipboard.items = value.items
-    state.clipboard.path = value.path
+    state.clipboard.key = value.key;
+    state.clipboard.items = value.items;
+    state.clipboard.path = value.path;
   },
   resetClipboard: (state) => {
-    state.clipboard.key = ''
-    state.clipboard.items = []
+    state.clipboard.key = "";
+    state.clipboard.items = [];
   },
-  setPreviewMode(state, value) {
-    state.previewMode = value
-  },
-  setHash: (state, value) => (state.hash = value),
-}
+};
 
-export default mutations
+export default mutations;

frontend/src/utils/auth.js

@@ -1,88 +1,88 @@
-import store from '@/store'
-import router from '@/router'
-import { Base64 } from 'js-base64'
-import { baseURL } from '@/utils/constants'
+import store from "@/store";
+import router from "@/router";
+import { Base64 } from "js-base64";
+import { baseURL } from "@/utils/constants";
 
-export function parseToken (token) {
-  const parts = token.split('.')
+export function parseToken(token) {
+  const parts = token.split(".");
 
   if (parts.length !== 3) {
-    throw new Error('token malformed')
+    throw new Error("token malformed");
   }
 
-  const data = JSON.parse(Base64.decode(parts[1]))
+  const data = JSON.parse(Base64.decode(parts[1]));
 
-  localStorage.setItem('jwt', token)
-  store.commit('setJWT', token)
-  store.commit('setUser', data.user)
+  localStorage.setItem("jwt", token);
+  store.commit("setJWT", token);
+  store.commit("setUser", data.user);
 }
 
-export async function validateLogin () {
+export async function validateLogin() {
   try {
-    if (localStorage.getItem('jwt')) {
-      await renew(localStorage.getItem('jwt'))
+    if (localStorage.getItem("jwt")) {
+      await renew(localStorage.getItem("jwt"));
     }
   } catch (_) {
     console.warn('Invalid JWT token in storage') // eslint-disable-line
   }
 }
 
-export async function login (username, password, recaptcha) {
-  const data = { username, password, recaptcha }
+export async function login(username, password, recaptcha) {
+  const data = { username, password, recaptcha };
 
   const res = await fetch(`${baseURL}/api/login`, {
-    method: 'POST',
+    method: "POST",
     headers: {
-      'Content-Type': 'application/json'
+      "Content-Type": "application/json",
     },
-    body: JSON.stringify(data)
-  })
+    body: JSON.stringify(data),
+  });
 
-  const body = await res.text()
+  const body = await res.text();
 
   if (res.status === 200) {
-    parseToken(body)
+    parseToken(body);
   } else {
-    throw new Error(body)
+    throw new Error(body);
   }
 }
 
-export async function renew (jwt) {
+export async function renew(jwt) {
   const res = await fetch(`${baseURL}/api/renew`, {
-    method: 'POST',
+    method: "POST",
     headers: {
-      'X-Auth': jwt,
-    }
-  })
+      "X-Auth": jwt,
+    },
+  });
 
-  const body = await res.text()
+  const body = await res.text();
 
   if (res.status === 200) {
-    parseToken(body)
+    parseToken(body);
   } else {
-    throw new Error(body)
+    throw new Error(body);
   }
 }
 
-export async function signup (username, password) {
-  const data = { username, password }
+export async function signup(username, password) {
+  const data = { username, password };
 
   const res = await fetch(`${baseURL}/api/signup`, {
-    method: 'POST',
+    method: "POST",
     headers: {
-      'Content-Type': 'application/json'
+      "Content-Type": "application/json",
     },
-    body: JSON.stringify(data)
-  })
+    body: JSON.stringify(data),
+  });
 
   if (res.status !== 200) {
-    throw new Error(res.status)
+    throw new Error(res.status);
   }
 }
 
-export function logout () {
-  store.commit('setJWT', '')
-  store.commit('setUser', null)
-  localStorage.setItem('jwt', null)
-  router.push({path: '/login'})
+export function logout() {
+  store.commit("setJWT", "");
+  store.commit("setUser", null);
+  localStorage.setItem("jwt", null);
+  router.push({ path: "/login" });
 }

frontend/src/utils/buttons.js

@@ -1,66 +1,70 @@
-function loading (button) {
-  let el = document.querySelector(`#${button}-button > i`)
+function loading(button) {
+  let el = document.querySelector(`#${button}-button > i`);
 
   if (el === undefined || el === null) {
     console.log('Error getting button ' + button) // eslint-disable-line
-    return
+    return;
   }
 
-  el.dataset.icon = el.innerHTML
-  el.style.opacity = 0
+  if (el.innerHTML == "autorenew" || el.innerHTML == "done") {
+    return;
+  }
+
+  el.dataset.icon = el.innerHTML;
+  el.style.opacity = 0;
 
   setTimeout(() => {
-    el.classList.add('spin')
-    el.innerHTML = 'autorenew'
-    el.style.opacity = 1
-  }, 100)
+    el.classList.add("spin");
+    el.innerHTML = "autorenew";
+    el.style.opacity = 1;
+  }, 100);
 }
 
-function done (button) {
-  let el = document.querySelector(`#${button}-button > i`)
+function done(button) {
+  let el = document.querySelector(`#${button}-button > i`);
 
   if (el === undefined || el === null) {
     console.log('Error getting button ' + button) // eslint-disable-line
-    return
+    return;
   }
 
-  el.style.opacity = 0
+  el.style.opacity = 0;
 
   setTimeout(() => {
-    el.classList.remove('spin')
-    el.innerHTML = el.dataset.icon
-    el.style.opacity = 1
-  }, 100)
+    el.classList.remove("spin");
+    el.innerHTML = el.dataset.icon;
+    el.style.opacity = 1;
+  }, 100);
 }
 
-function success (button) {
-  let el = document.querySelector(`#${button}-button > i`)
+function success(button) {
+  let el = document.querySelector(`#${button}-button > i`);
 
   if (el === undefined || el === null) {
     console.log('Error getting button ' + button) // eslint-disable-line
-    return
+    return;
   }
 
-  el.style.opacity = 0
+  el.style.opacity = 0;
 
   setTimeout(() => {
-    el.classList.remove('spin')
-    el.innerHTML = 'done'
-    el.style.opacity = 1
+    el.classList.remove("spin");
+    el.innerHTML = "done";
+    el.style.opacity = 1;
 
     setTimeout(() => {
-      el.style.opacity = 0
+      el.style.opacity = 0;
 
       setTimeout(() => {
-        el.innerHTML = el.dataset.icon
-        el.style.opacity = 1
-      }, 100)
-    }, 500)
-  }, 100)
+        el.innerHTML = el.dataset.icon;
+        el.style.opacity = 1;
+      }, 100);
+    }, 500);
+  }, 100);
 }
 
 export default {
   loading,
   done,
-  success
-}
+  success,
+};

frontend/src/utils/constants.js

@@ -1,19 +1,19 @@
-const name = window.FileBrowser.Name || 'File Browser'
-const disableExternal = window.FileBrowser.DisableExternal
-const baseURL = window.FileBrowser.BaseURL
-const staticURL = window.FileBrowser.StaticURL
-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 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 name = window.FileBrowser.Name || "File Browser";
+const disableExternal = window.FileBrowser.DisableExternal;
+const baseURL = window.FileBrowser.BaseURL;
+const staticURL = window.FileBrowser.StaticURL;
+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 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;
 
 export {
   name,
@@ -30,5 +30,5 @@ export {
   theme,
   enableThumbs,
   resizePreview,
-  enableExec
-}
+  enableExec,
+};