503 changed files with 10489 additions and 145688 deletions
--- a/.babelrc
+++ b/.babelrc
@ -0,0 +1,13 @@
 {
  "presets": [
    ["env", { "modules": false }],
    "stage-2"
  ],
  "plugins": ["transform-runtime"],
  "env": {
    "test": {
      "presets": ["env", "stage-2"],
      "plugins": [ "istanbul" ]
    }
  }
 }
--- a/.dockerignore
+++ b/.dockerignore
@ -1,7 +1,4 @@
-.venv
+assets/
-dist
+testdata/
-.idea
+caddy/
-frontend/node_modules
+.github/
 frontend/dist
 filebrowser.db
 docs/index.md
--- a/.editorconfig
+++ b/.editorconfig
@ -0,0 +1,14 @@
 root = true
 [*]
 charset = utf-8
 indent_style = space
 indent_size = 2
 end_of_line = lf
 insert_final_newline = true
 trim_trailing_whitespace = true
 # 4 space indentation
 [*.go]
 indent_style = tab
 indent_size = 4
--- a/.eslintignore
+++ b/.eslintignore
@ -0,0 +1,2 @@
 build/*.js
 config/*.js
--- a/.eslintrc.js
+++ b/.eslintrc.js
@ -0,0 +1,27 @@
 // http://eslint.org/docs/user-guide/configuring
 module.exports = {
  root: true,
  parser: 'babel-eslint',
  parserOptions: {
    sourceType: 'module'
  },
  env: {
    browser: true,
  },
  // https://github.com/feross/standard/blob/master/RULES.md#javascript-standard-style
  extends: 'standard',
  // required to lint *.vue files
  plugins: [
    'html'
  ],
  // add your custom rules here
  'rules': {
    // allow paren-less arrow functions
    'arrow-parens': 0,
    // allow async-await
    'generator-star-spacing': 0,
    // allow debugger during development
    'no-debugger': process.env.NODE_ENV === 'production' ? 2 : 0
  }
 }
--- a/.github/CODEOWNERS
+++ b/.github/CODEOWNERS
@ -1 +0,0 @@
 * @filebrowser/maintainers
--- a/.github/ISSUE_TEMPLATE.md
+++ b/.github/ISSUE_TEMPLATE.md
@ -0,0 +1,24 @@
 ### Instructions (remove before submitting):
 1. Are you asking for help with using Caddy or File Manager? Please use our forum instead: https://forum.caddyserver.com.
 2. If you are filing a bug report, please answer the following questions.
 3. If your issue is not a bug report, you do not need to use this template.
 4. If not using with Caddy, ignore questions 1 and 2.
 ### 1. Have you downloaded File Manager from caddyserver.com? If yes, when have you done that? If no, and you are running a custom build, which is the revision of File Manager's repository?
 ### 2. What is your entire Caddyfile?
 ```text
 (Put Caddyfile here)
 ```
 ### 3. What are you trying to do?
 ### 4. What did you expect to see?
 ### 5. What did you see instead (give full error messages and/or log)?
 ### 6. How can someone who is starting from scratch reproduce this behaviour as minimally as possible?
--- a/.github/ISSUE_TEMPLATE/bug_report.yml
+++ b/.github/ISSUE_TEMPLATE/bug_report.yml
@ -1,53 +0,0 @@
 name: Bug Report
 description: Report a bug in FileBrowser.
 labels: [bug, 'waiting: triage']
 body:
  - type: checkboxes
    attributes:
      label: Checklist
      description: Please verify that you've followed these steps
      options:
        - label: This is a bug report, not a question.
          required: true
        - label: I have searched on the [issue tracker](https://github.com/filebrowser/filebrowser/issues?q=is%3Aissue) for my bug.
          required: true
        - label: I am running the latest [FileBrowser version](https://github.com/filebrowser/filebrowser/releases) or have an issue updating.
          required: true
  - type: textarea
    id: version
    attributes:
      label: Version
      render: Text
      description: |
        Enter the version of FileBrowser you are using.
    validations:
      required: true
  - type: textarea
    attributes:
      label: Description
      description: |
        A clear and concise description of what the issue is about. What are you trying to do?
    validations:
      required: true
  - type: textarea
    attributes:
      label: What did you expect to happen?
    validations:
      required: true
  - type: textarea
    attributes:
      label: What actually happened?
    validations:
      required: true
  - type: textarea
    attributes:
      label: Reproduction Steps
      description: |
        Tell us how to reproduce this issue. How can someone who is starting from scratch reproduce this behavior as minimally as possible?
    validations:
      required: true
  - type: textarea
    attributes:
      label: Files
      description: |
        A list of relevant files for this issue. Large files can be uploaded one-by-one or in a tarball/zipfile.
--- a/.github/ISSUE_TEMPLATE/config.yml
+++ b/.github/ISSUE_TEMPLATE/config.yml
@ -1,5 +0,0 @@
 blank_issues_enabled: false
 contact_links:
  - name: GitHub Discussions
    url: https://github.com/filebrowser/filebrowser/discussions
    about: Please ask questions and discuss features here.
--- a/.github/PULL_REQUEST_TEMPLATE.md
+++ b/.github/PULL_REQUEST_TEMPLATE.md
@ -1,16 +0,0 @@
 ## Description
 <!-- Please explain the changes you made here. -->
 ## Additional Information
 <!-- If it is a relatively large or complex change, please add more information to explain what you did, how you did it, if you considered any alternatives, etc. -->
 ## Checklist
 Before submitting your PR, please indicate which issues 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/).
 - [ ] I am aware the project is currently in maintenance-only mode. See [README](https://github.com/filebrowser/community/blob/master/README.md)
 - [ ] I am aware that translations MUST be made through [Transifex](https://app.transifex.com/file-browser/file-browser/) and that this PR is NOT a translation update
 - [ ] I am making a PR against the `master` branch.
 - [ ] I am sure File Browser can be successfully built. See [builds](https://github.com/filebrowser/community/blob/master/builds.md) and [development](https://github.com/filebrowser/community/blob/master/development.md).
--- a/.github/workflows/ci.yaml
+++ b/.github/workflows/ci.yaml
@ -1,115 +0,0 @@
 name: Continuous Integration
 on:
  push:
    branches:
      - "master"
    tags:
      - "v*"
  pull_request:
 jobs:
  lint-frontend:
    name: Lint Frontend
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v6
      - uses: pnpm/action-setup@v4
        with:
          package_json_file: "frontend/package.json"
      - uses: actions/setup-node@v6
        with:
          node-version: "24.x"
          cache: "pnpm"
          cache-dependency-path: "frontend/pnpm-lock.yaml"
      - working-directory: frontend
        run: |
          pnpm install --frozen-lockfile
          pnpm run lint
  lint-backend:
    name: Lint Backend
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v6
      - uses: actions/setup-go@v6
        with:
          go-version: "1.25.x"
      - uses: golangci/golangci-lint-action@v9
        with:
          version: "latest"
  test:
    name: Test
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v6
      - uses: actions/setup-go@v6
        with:
          go-version: "1.25.x"
      - run: go test --race ./...
  build:
    name: Build
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v6
        with:
          fetch-depth: 0
      - uses: actions/setup-go@v6
        with:
          go-version: '1.25'
      - uses: pnpm/action-setup@v4
        with:
          package_json_file: "frontend/package.json"
      - uses: actions/setup-node@v6
        with:
          node-version: "24.x"
          cache: "pnpm"
          cache-dependency-path: "frontend/pnpm-lock.yaml"
      - name: Install Task
        uses: go-task/setup-task@v1
      - run: task build
  release:
    name: Release
    needs: ["lint-frontend", "lint-backend", "test", "build"]
    if: github.event_name == 'push' && startsWith(github.ref, 'refs/tags/v')
    runs-on: ubuntu-latest
    steps:
      - uses: actions/checkout@v6
        with:
          fetch-depth: 0
      - uses: actions/setup-go@v6
        with:
          go-version: '1.25'
      - uses: pnpm/action-setup@v4
        with:
          package_json_file: "frontend/package.json"
      - uses: actions/setup-node@v6
        with:
          node-version: "24.x"
          cache: "pnpm"
          cache-dependency-path: "frontend/pnpm-lock.yaml"
      - name: Set up QEMU
        uses: docker/setup-qemu-action@v3
      - name: Set up Docker Buildx
        uses: docker/setup-buildx-action@v3
      - name: Install Task
        uses: go-task/setup-task@v1
      - run: task build:frontend
      - name: Login to Docker Hub
        uses: docker/login-action@v3
        with:
          username: ${{ secrets.DOCKERHUB_USERNAME }}
          password: ${{ secrets.DOCKERHUB_TOKEN }}
      - name: Run GoReleaser
        uses: goreleaser/goreleaser-action@v6
        with:
          version: latest
          args: release --clean
        env:
          GITHUB_TOKEN: ${{ secrets.GH_PAT }}
--- a/.github/workflows/docs.yml
+++ b/.github/workflows/docs.yml
@ -1,52 +0,0 @@
 name: Docs
 on:
  pull_request:
    paths:
      - 'www'
      - '*.md'
  push:
    branches:
      - master
 jobs:
  build:
    name: Build Docs
    if: github.event_name == 'pull_request'
    runs-on: ubuntu-latest
    steps:
      - name: Checkout
        uses: actions/checkout@v6
      - name: Set up Docker Buildx
        uses: docker/setup-buildx-action@v3
      - name: Install Task
        uses: go-task/setup-task@v1
      - name: Build site
        run: task docs
  build-and-release:
    if: github.event_name == 'push' && github.ref == 'refs/heads/master'
    name: Build and Release Docs
    permissions:
      pages: write
      id-token: write
    environment:
      name: github-pages
      url: ${{ steps.deployment.outputs.page_url }}
    runs-on: ubuntu-latest
    timeout-minutes: 5
    steps:
      - name: Checkout
        uses: actions/checkout@v6
      - name: Set up Docker Buildx
        uses: docker/setup-buildx-action@v3
      - name: Install Task
        uses: go-task/setup-task@v1
      - name: Build site
        run: task docs
      - name: Upload static files as artifact
        uses: actions/upload-pages-artifact@v4
        with:
          path: www/public
      - name: Deploy to GitHub Pages
        uses: actions/deploy-pages@v4
--- a/.github/workflows/lint-pr.yaml
+++ b/.github/workflows/lint-pr.yaml
@ -1,46 +0,0 @@
 name: "Lint PR"
 on:
  pull_request_target:
    types:
      - opened
      - reopened
      - edited
      - synchronize
 permissions:
  pull-requests: write
 jobs:
  main:
    name: Validate Title
    runs-on: ubuntu-latest
    steps:
      - uses: amannn/action-semantic-pull-request@v6
        id: lint_pr_title
        env:
          GITHUB_TOKEN: ${{ secrets.GITHUB_TOKEN }}
      - uses: marocchino/sticky-pull-request-comment@v2
        # When the previous steps fails, the workflow would stop. By adding this
        # condition you can continue the execution with the populated error message.
        if: always() && (steps.lint_pr_title.outputs.error_message != null)
        with:
          header: pr-title-lint-error
          message: |
            Hey there and thank you for opening this pull request! 👋🏼
            We require pull request titles to follow the [Conventional Commits specification](https://www.conventionalcommits.org/en/v1.0.0/) and it looks like your proposed title needs to be adjusted.
            Details:
            ```
            ${{ steps.lint_pr_title.outputs.error_message }}
            ```
      # Delete a previous comment when the issue has been resolved
      - if: ${{ steps.lint_pr_title.outputs.error_message == null }}
        uses: marocchino/sticky-pull-request-comment@v2
        with:
          header: pr-title-lint-error
          delete: true
--- a/.gitignore
+++ b/.gitignore
@ -1,39 +1,8 @@
 *.db
 *.bak
 _old
 rice-box.go
 .idea/
 /filebrowser
 /filebrowser.exe
 /dist
 .venv
 .DS_Store
-node_modules
+node_modules/
-
+*/dist/*
-# local env files
+*.db
-.env.local
+*.db.lock
 .env.*.local
 # Log files
 npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
 # Editor directories and files
 .idea
 .vscode
 *.suo
 *.ntvs*
 *.njsproj
 *.sln
 *.sw*
 bin/
 build/
 # Vue distributable files
 /frontend/dist/*
 !/frontend/dist/.gitkeep
 default.nix
 Dockerfile.dev
--- a/.golangci.yml
+++ b/.golangci.yml
@ -1,14 +0,0 @@
 version: "2"
 linters:
  default: standard
  enable:
    - gocritic
    - govet
    - revive
  exclusions:
    presets:
      - std-error-handling
      - comments
    paths:
      - frontend/
--- a/.goreleaser.yml
+++ b/.goreleaser.yml
@ -1,197 +0,0 @@
 version: 2
 project_name: filebrowser
 env:
  - GO111MODULE=on
 builds:
  - env:
      - CGO_ENABLED=0
    ldflags:
      - -s -w -X github.com/filebrowser/filebrowser/v2/version.Version={{ .Version }} -X github.com/filebrowser/filebrowser/v2/version.CommitSHA={{ .ShortCommit }}
    main: main.go
    binary: filebrowser
    goos:
      - darwin
      - linux
      - windows
      - freebsd
    goarch:
      - amd64
      - "386"
      - arm
      - arm64
      - riscv64
    goarm:
      - "5"
      - "6"
      - "7"
    ignore:
      - goos: darwin
        goarch: "386"
      - goos: freebsd
        goarch: arm
 archives:
  - name_template: "{{.Os}}-{{.Arch}}{{if .Arm}}v{{.Arm}}{{end}}-{{ .ProjectName }}"
    formats: ["tar.gz"]
    format_overrides:
      - goos: windows
        formats: ["zip"]
 dockers:
  # Alpine docker images
  - dockerfile: Dockerfile
    use: buildx
    build_flag_templates:
      - "--pull"
      - "--label=org.opencontainers.image.created={{.Date}}"
      - "--label=org.opencontainers.image.name={{.ProjectName}}"
      - "--label=org.opencontainers.image.revision={{.FullCommit}}"
      - "--label=org.opencontainers.image.version={{.Version}}"
      - "--label=org.opencontainers.image.source={{.GitURL}}"
      - "--platform=linux/amd64"
    goos: linux
    goarch: amd64
    image_templates:
      - "filebrowser/filebrowser:{{ .Tag }}-amd64"
      - "filebrowser/filebrowser:v{{ .Major }}-amd64"
    extra_files:
      - docker
  - dockerfile: Dockerfile
    use: buildx
    build_flag_templates:
      - "--pull"
      - "--label=org.opencontainers.image.created={{.Date}}"
      - "--label=org.opencontainers.image.name={{.ProjectName}}"
      - "--label=org.opencontainers.image.revision={{.FullCommit}}"
      - "--label=org.opencontainers.image.version={{.Version}}"
      - "--label=org.opencontainers.image.source={{.GitURL}}"
      - "--platform=linux/arm64"
    goos: linux
    goarch: arm64
    image_templates:
      - "filebrowser/filebrowser:{{ .Tag }}-arm64"
      - "filebrowser/filebrowser:v{{ .Major }}-arm64"
    extra_files:
      - docker
  - dockerfile: Dockerfile
    use: buildx
    build_flag_templates:
      - "--pull"
      - "--label=org.opencontainers.image.created={{.Date}}"
      - "--label=org.opencontainers.image.name={{.ProjectName}}"
      - "--label=org.opencontainers.image.revision={{.FullCommit}}"
      - "--label=org.opencontainers.image.version={{.Version}}"
      - "--label=org.opencontainers.image.source={{.GitURL}}"
      - "--platform=linux/arm/v6"
    goos: linux
    goarch: arm
    goarm: "6"
    image_templates:
      - "filebrowser/filebrowser:{{ .Tag }}-armv6"
      - "filebrowser/filebrowser:v{{ .Major }}-armv6"
    extra_files:
      - docker
  - dockerfile: Dockerfile
    use: buildx
    build_flag_templates:
      - "--pull"
      - "--label=org.opencontainers.image.created={{.Date}}"
      - "--label=org.opencontainers.image.name={{.ProjectName}}"
      - "--label=org.opencontainers.image.revision={{.FullCommit}}"
      - "--label=org.opencontainers.image.version={{.Version}}"
      - "--label=org.opencontainers.image.source={{.GitURL}}"
      - "--platform=linux/arm/v7"
    goos: linux
    goarch: arm
    goarm: "7"
    image_templates:
      - "filebrowser/filebrowser:{{ .Tag }}-armv7"
      - "filebrowser/filebrowser:v{{ .Major }}-armv7"
    extra_files:
      - docker
  ## s6-overlay docker images
  - dockerfile: Dockerfile.s6
    use: buildx
    build_flag_templates:
      - "--pull"
      - "--label=org.opencontainers.image.created={{.Date}}"
      - "--label=org.opencontainers.image.name={{.ProjectName}}"
      - "--label=org.opencontainers.image.revision={{.FullCommit}}"
      - "--label=org.opencontainers.image.version={{.Version}}"
      - "--label=org.opencontainers.image.source={{.GitURL}}"
      - "--platform=linux/amd64"
    goos: linux
    goarch: amd64
    image_templates:
      - "filebrowser/filebrowser:{{ .Tag }}-amd64-s6"
      - "filebrowser/filebrowser:v{{ .Major }}-amd64-s6"
    extra_files:
      - docker
  - dockerfile: Dockerfile.s6
    use: buildx
    build_flag_templates:
      - "--pull"
      - "--label=org.opencontainers.image.created={{.Date}}"
      - "--label=org.opencontainers.image.name={{.ProjectName}}"
      - "--label=org.opencontainers.image.revision={{.FullCommit}}"
      - "--label=org.opencontainers.image.version={{.Version}}"
      - "--label=org.opencontainers.image.source={{.GitURL}}"
      - "--platform=linux/arm64"
    goos: linux
    goarch: arm64
    image_templates:
      - "filebrowser/filebrowser:{{ .Tag }}-arm64-s6"
      - "filebrowser/filebrowser:v{{ .Major }}-arm64-s6"
    extra_files:
      - docker
 docker_manifests:
  - name_template: "filebrowser/filebrowser:latest"
    image_templates:
      - "filebrowser/filebrowser:{{ .Tag }}-amd64"
      - "filebrowser/filebrowser:{{ .Tag }}-arm64"
      - "filebrowser/filebrowser:{{ .Tag }}-armv7"
  - name_template: "filebrowser/filebrowser:{{ .Tag }}"
    image_templates:
      - "filebrowser/filebrowser:{{ .Tag }}-amd64"
      - "filebrowser/filebrowser:{{ .Tag }}-arm64"
      - "filebrowser/filebrowser:{{ .Tag }}-armv7"
  - name_template: "filebrowser/filebrowser:v{{ .Major }}"
    image_templates:
      - "filebrowser/filebrowser:v{{ .Major }}-amd64"
      - "filebrowser/filebrowser:v{{ .Major }}-arm64"
      - "filebrowser/filebrowser:v{{ .Major }}-armv7"
  ## s6 image manifests
  - name_template: "filebrowser/filebrowser:s6"
    image_templates:
      - "filebrowser/filebrowser:{{ .Tag }}-amd64-s6"
      - "filebrowser/filebrowser:{{ .Tag }}-arm64-s6"
  - name_template: "filebrowser/filebrowser:{{ .Tag }}-s6"
    image_templates:
      - "filebrowser/filebrowser:{{ .Tag }}-amd64-s6"
      - "filebrowser/filebrowser:{{ .Tag }}-arm64-s6"
  - name_template: "filebrowser/filebrowser:v{{ .Major }}-s6"
    image_templates:
      - "filebrowser/filebrowser:v{{ .Major }}-amd64-s6"
      - "filebrowser/filebrowser:v{{ .Major }}-arm64-s6"
 homebrew_casks:
  - name: filebrowser
    repository:
      owner: filebrowser
      name: homebrew-tap
    commit_author:
      name: FileBrowser Robot
      email: robot@filebrowser.org
    homepage: https://github.com/filebrowser/filebrowser
    description: File Browser is a create-your-own-cloud-kind of software where you can install it on a server, direct it to a path and then access your files through a nice web interface
    hooks:
      post:
        install: |
          if system_command("/usr/bin/xattr", args: ["-h"]).exit_status == 0
            system_command "/usr/bin/xattr", args: ["-dr", "com.apple.quarantine", "#{staged_path}/filebrowser"]
          end
--- a/.travis.yml
+++ b/.travis.yml
@ -0,0 +1,35 @@
 language: go
 go:
  - tip
 env:
  - "PATH=/home/travis/gopath/bin:$PATH"
 install:
  - go get ./...
  - go get github.com/mitchellh/gox
  # Install gometalinter and certain linters
  - go get github.com/alecthomas/gometalinter
  - go get github.com/client9/misspell/cmd/misspell
  - go get github.com/gordonklaus/ineffassign
  - go get golang.org/x/tools/cmd/goimports
  - go get github.com/tsenart/deadcode
 script:
  - gometalinter --disable-all -E vet -E gofmt -E misspell -E ineffassign -E goimports -E deadcode --exclude="rice-box.go" --tests ./...
  - go test ./... -timeout 30s
 before_deploy:
  - cd cmd/filemanager
  - mkdir dist
  - gox -output "dist/{{.OS}}-{{.Arch}}-{{.Dir}}"
 deploy:
  provider: releases
  api_key: $GITHUB_TOKEN
  file_glob: true
  file: dist/*
  skip_cleanup: true
  on:
    tags: true
--- a/.versionrc
+++ b/.versionrc
@ -1,14 +0,0 @@
 {
  "types": [
    { "type": "feat", "section": "Features" },
    { "type": "fix", "section": "Bug Fixes" },
    { "type": "perf", "section": "Performance improvements" },
    { "type": "revert", "section": "Reverts" },
    { "type": "refactor", "section": "Refactorings" },
    { "type": "build", "section": "Build" },
    { "type": "ci", "hidden": true },
    { "type": "test", "hidden": true },
    { "type": "chore", "hidden": true },
    { "type": "docs", "hidden": true }
  ]
 }
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
--- a/CODE_OF_CONDUCT.md
+++ b/CODE_OF_CONDUCT.md
@ -1,12 +1,10 @@
-# Code of Conduct
+# Contributor Covenant Code of Conduct
-## Contributor Covenant Code of Conduct
+## Our Pledge
 ### Our Pledge
 In the interest of fostering an open and welcoming environment, we as contributors and maintainers pledge to making participation in our project and our community a harassment-free experience for everyone, regardless of age, body size, disability, ethnicity, gender identity and expression, level of experience, nationality, personal appearance, race, religion, or sexual identity and orientation.
-### Our Standards
+## Our Standards
 Examples of behavior that contributes to creating a positive environment include:
@ -24,23 +22,25 @@ Examples of unacceptable behavior by participants include:
 * Publishing others' private information, such as a physical or electronic address, without explicit permission
 * Other conduct which could reasonably be considered inappropriate in a professional setting
-### Our Responsibilities
+## Our Responsibilities
 Project maintainers are responsible for clarifying the standards of acceptable behavior and are expected to take appropriate and fair corrective action in response to any instances of unacceptable behavior.
 Project maintainers have the right and responsibility to remove, edit, or reject comments, commits, code, wiki edits, issues, and other contributions that are not aligned to this Code of Conduct, or to ban temporarily or permanently any contributor for other behaviors that they deem inappropriate, threatening, offensive, or harmful.
-### Scope
+## Scope
 This Code of Conduct applies both within project spaces and in public spaces when an individual is representing the project or its community. Examples of representing a project or community include using an official project e-mail address, posting via an official social media account, or acting as an appointed representative at an online or offline event. Representation of a project may be further defined and clarified by project maintainers.
-### Enforcement
+## Enforcement
 Instances of abusive, harassing, or otherwise unacceptable behavior may be reported by contacting the project team at hacdias@gmail.com. The project team will review and investigate all complaints, and will respond in a way that it deems appropriate to the circumstances. The project team is obligated to maintain confidentiality with regard to the reporter of an incident. Further details of specific enforcement policies may be posted separately.
 Project maintainers who do not follow or enforce the Code of Conduct in good faith may face temporary or permanent repercussions as determined by other members of the project's leadership.
-### Attribution
+## Attribution
-This Code of Conduct is adapted from the [Contributor Covenant](http://contributor-covenant.org), version 1.4, available at [https://contributor-covenant.org/version/1/4](https://contributor-covenant.org/version/1/4).
+This Code of Conduct is adapted from the [Contributor Covenant][homepage], version 1.4, available at [http://contributor-covenant.org/version/1/4][version]
 [homepage]: http://contributor-covenant.org
 [version]: http://contributor-covenant.org/version/1/4/
--- a/CONTRIBUTING.md
+++ b/CONTRIBUTING.md
@ -1,128 +0,0 @@
 # Contributing
 If you're interested in contributing to this project, this is the best place to start. Before contributing to this project, please take a bit of time to read our [Code of Conduct](code-of-conduct.md). Also, note that this project is open-source and licensed under [Apache License 2.0](LICENSE).
 ## Project Structure
 The backend side of the application is written in [Go](https://golang.org/), while the frontend (located on a subdirectory of the same name) is written in [Vue.js](https://vuejs.org/). Due to the tight coupling required by some features, basic knowledge of both Go and Vue.js is recommended.
 * Learn Go: [https://github.com/golang/go/wiki/Learn](https://github.com/golang/go/wiki/Learn)
 * Learn Vue.js: [https://vuejs.org/guide/introduction.html](https://vuejs.org/guide/introduction.html)
 We encourage you to use git to manage your fork. To clone the main repository, just run:
 ```bash
 git clone https://github.com/filebrowser/filebrowser
 ```
 We use [Taskfile](https://taskfile.dev/) to manage the different processes (building, releasing, etc) automatically.
 ## Build
 You can fully build the project in order to produce a binary by running:
 ```bash
 task build
 ```
 ## Development
 For development, there are a few things to have in mind.
 ### Frontend
 We use [Node.js](https://nodejs.org/en/) on the frontend to manage the build process. Prepare the frontend environment:
 ```bash
 # From the root of the repo, go to frontend/
 cd frontend
 # Install the dependencies
 pnpm install
 ```
 If you just want to develop the backend, you can create a static build of the frontend:
 ```bash
 pnpm run build
 ```
 If you want to develop the frontend, start a development server which watches for changes:
 ```bash
 pnpm run dev
 ```
 Please note that you need to access File Browser's interface through the development server of the frontend.
 ### Backend
 First prepare the backend environment by downloading all required dependencies:
 ```bash
 go mod download
 ```
 You can now build or run File Browser as any other Go project:
 ```bash
 # Build
 go build
 # Run
 go run .
 ```
 ## Documentation
 We rely on Docker to abstract all the dependencies required for building the documentation.
 To build the documentation to `www/public`:
 ```bash
 task docs
 ```
 To start a local server on port `8000` to view the built documentation:
 ```bash
 task docs:serve
 ```
 ## Release
 To make a release, just run:
 ```bash
 task release
 ```
 ## Translations
 Translations are managed on Transifex, which is an online website where everyone can contribute and translate strings for our project. It automatically syncs with the main language file \(in English\) and,, for you to contribute, you just need to:
 1. Go to our Transifex web page: [app.transifex.com/file-browser/file-browser](https://app.transifex.com/file-browser/file-browser/)
 2. Click on **Join the project** and pick your language. We'll accept you as soon as possible. If you're language is not on the list, please request it via the interface.
 Translations are automatically pushed to GitHub via an integration.
 ## Authentication Provider
 To build a new authentication provider, you need to implement the [Auther interface](https://github.com/filebrowser/filebrowser/blob/master/auth/auth.go), whose method will be called on the login page after the user has submitted their login data.
 ```go
 // Auther is the authentication interface.
 type Auther interface {
    // Auth is called to authenticate a request.
    Auth(r *http.Request, s *users.Storage, root string) (*users.User, error)
 }
 ```
 After implementing the interface you should:
 1. Add it to [`auth` directory](https://github.com/filebrowser/filebrowser/blob/master/auth).
 2. Add it to the [configuration parser](https://github.com/filebrowser/filebrowser/blob/master/cmd/config.go) for the CLI.
 3. Add it to the [`authBackend.Get`](https://github.com/filebrowser/filebrowser/blob/master/storage/bolt/auth.go).
 If you need to add more flags, please update the function `addConfigFlags`.
--- a/Docker.json
+++ b/Docker.json
@ -0,0 +1,10 @@
 {
  "port": 80,
  "address": "",
  "database": "/etc/database.db",
  "scope": "/srv",
  "allowCommands": true,
  "allowEdit": true,
  "allowNew": true,
  "commands": []
 }
--- a/53
+++ b/53
@ -1,46 +1,21 @@
-## Multistage build: First stage fetches dependencies
+FROM golang:alpine
 FROM alpine:3.23 AS fetcher
-# install and copy ca-certificates, mailcap, and tini-static; download JSON.sh
+COPY . /go/src/github.com/hacdias/filemanager
 RUN apk update && \
    apk --no-cache add ca-certificates mailcap tini-static && \
    wget -O /JSON.sh https://raw.githubusercontent.com/dominictarr/JSON.sh/0d5e5c77365f63809bf6e77ef44a1f34b0e05840/JSON.sh
-## Second stage: Use lightweight BusyBox image for final runtime environment
+WORKDIR /go/src/github.com/hacdias/filemanager
-FROM busybox:1.37.0-musl
+RUN apk add --no-cache git
 RUN go get ./...
-# Define non-root user UID and GID
+WORKDIR /go/src/github.com/hacdias/filemanager/cmd/filemanager
-ENV UID=1000
+RUN go install
 ENV GID=1000
-# Create user group and user
+FROM alpine:latest
-RUN addgroup -g $GID user && \
+COPY --from=0 /go/bin/filemanager /usr/local/bin/filemanager
    adduser -D -u $UID -G user user
 # Copy binary, scripts, and configurations into image with proper ownership
 COPY --chown=user:user filebrowser /bin/filebrowser
 COPY --chown=user:user docker/common/ /
 COPY --chown=user:user docker/alpine/ /
 COPY --chown=user:user --from=fetcher /sbin/tini-static /bin/tini
 COPY --from=fetcher /JSON.sh /JSON.sh
 COPY --from=fetcher /etc/ca-certificates.conf /etc/ca-certificates.conf
 COPY --from=fetcher /etc/ca-certificates /etc/ca-certificates
 COPY --from=fetcher /etc/mime.types /etc/mime.types
 COPY --from=fetcher /etc/ssl /etc/ssl
 # Create data directories, set ownership, and ensure healthcheck script is executable
 RUN mkdir -p /config /database /srv && \
    chown -R user:user /config /database /srv \
    && chmod +x /healthcheck.sh
 # Define healthcheck script
 HEALTHCHECK --start-period=2s --interval=5s --timeout=3s CMD /healthcheck.sh
 # Set the user, volumes and exposed ports
 USER user
 VOLUME /srv /config /database
 VOLUME /srv
 EXPOSE 80
-ENTRYPOINT [ "tini", "--", "/init.sh" ]
+COPY Docker.json /etc/config.json
 ENTRYPOINT ["/usr/local/bin/filemanager"]
 CMD ["--config", "/etc/config.json"]
--- a/Dockerfile.s6
+++ b/Dockerfile.s6
@ -1,24 +0,0 @@
 FROM ghcr.io/linuxserver/baseimage-alpine:3.23
 RUN apk update && \
  apk --no-cache add ca-certificates mailcap jq libcap
 # Make user and create necessary directories
 RUN mkdir -p /config /database /srv && \
  chown -R abc:abc /config /database /srv
 # Copy files and set permissions
 COPY filebrowser /bin/filebrowser
 COPY docker/common/ /
 COPY docker/s6/ /
 RUN chown -R abc:abc /bin/filebrowser /defaults healthcheck.sh && \
  setcap 'cap_net_bind_service=+ep' /bin/filebrowser
 # Define healthcheck script
 HEALTHCHECK --start-period=2s --interval=5s --timeout=3s CMD /healthcheck.sh
 # Set the volumes and exposed ports
 VOLUME /srv /config /database
 EXPOSE 80
--- a/202
+++ b/202
@ -1,202 +0,0 @@
                                 Apache License
                           Version 2.0, January 2004
                        http://www.apache.org/licenses/
   TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION
   1. Definitions.
      "License" shall mean the terms and conditions for use, reproduction,
      and distribution as defined by Sections 1 through 9 of this document.
      "Licensor" shall mean the copyright owner or entity authorized by
      the copyright owner that is granting the License.
      "Legal Entity" shall mean the union of the acting entity and all
      other entities that control, are controlled by, or are under common
      control with that entity. For the purposes of this definition,
      "control" means (i) the power, direct or indirect, to cause the
      direction or management of such entity, whether by contract or
      otherwise, or (ii) ownership of fifty percent (50%) or more of the
      outstanding shares, or (iii) beneficial ownership of such entity.
      "You" (or "Your") shall mean an individual or Legal Entity
      exercising permissions granted by this License.
      "Source" form shall mean the preferred form for making modifications,
      including but not limited to software source code, documentation
      source, and configuration files.
      "Object" form shall mean any form resulting from mechanical
      transformation or translation of a Source form, including but
      not limited to compiled object code, generated documentation,
      and conversions to other media types.
      "Work" shall mean the work of authorship, whether in Source or
      Object form, made available under the License, as indicated by a
      copyright notice that is included in or attached to the work
      (an example is provided in the Appendix below).
      "Derivative Works" shall mean any work, whether in Source or Object
      form, that is based on (or derived from) the Work and for which the
      editorial revisions, annotations, elaborations, or other modifications
      represent, as a whole, an original work of authorship. For the purposes
      of this License, Derivative Works shall not include works that remain
      separable from, or merely link (or bind by name) to the interfaces of,
      the Work and Derivative Works thereof.
      "Contribution" shall mean any work of authorship, including
      the original version of the Work and any modifications or additions
      to that Work or Derivative Works thereof, that is intentionally
      submitted to Licensor for inclusion in the Work by the copyright owner
      or by an individual or Legal Entity authorized to submit on behalf of
      the copyright owner. For the purposes of this definition, "submitted"
      means any form of electronic, verbal, or written communication sent
      to the Licensor or its representatives, including but not limited to
      communication on electronic mailing lists, source code control systems,
      and issue tracking systems that are managed by, or on behalf of, the
      Licensor for the purpose of discussing and improving the Work, but
      excluding communication that is conspicuously marked or otherwise
      designated in writing by the copyright owner as "Not a Contribution."
      "Contributor" shall mean Licensor and any individual or Legal Entity
      on behalf of whom a Contribution has been received by Licensor and
      subsequently incorporated within the Work.
   2. Grant of Copyright License. Subject to the terms and conditions of
      this License, each Contributor hereby grants to You a perpetual,
      worldwide, non-exclusive, no-charge, royalty-free, irrevocable
      copyright license to reproduce, prepare Derivative Works of,
      publicly display, publicly perform, sublicense, and distribute the
      Work and such Derivative Works in Source or Object form.
   3. Grant of Patent License. Subject to the terms and conditions of
      this License, each Contributor hereby grants to You a perpetual,
      worldwide, non-exclusive, no-charge, royalty-free, irrevocable
      (except as stated in this section) patent license to make, have made,
      use, offer to sell, sell, import, and otherwise transfer the Work,
      where such license applies only to those patent claims licensable
      by such Contributor that are necessarily infringed by their
      Contribution(s) alone or by combination of their Contribution(s)
      with the Work to which such Contribution(s) was submitted. If You
      institute patent litigation against any entity (including a
      cross-claim or counterclaim in a lawsuit) alleging that the Work
      or a Contribution incorporated within the Work constitutes direct
      or contributory patent infringement, then any patent licenses
      granted to You under this License for that Work shall terminate
      as of the date such litigation is filed.
   4. Redistribution. You may reproduce and distribute copies of the
      Work or Derivative Works thereof in any medium, with or without
      modifications, and in Source or Object form, provided that You
      meet the following conditions:
      (a) You must give any other recipients of the Work or
          Derivative Works a copy of this License; and
      (b) You must cause any modified files to carry prominent notices
          stating that You changed the files; and
      (c) You must retain, in the Source form of any Derivative Works
          that You distribute, all copyright, patent, trademark, and
          attribution notices from the Source form of the Work,
          excluding those notices that do not pertain to any part of
          the Derivative Works; and
      (d) If the Work includes a "NOTICE" text file as part of its
          distribution, then any Derivative Works that You distribute must
          include a readable copy of the attribution notices contained
          within such NOTICE file, excluding those notices that do not
          pertain to any part of the Derivative Works, in at least one
          of the following places: within a NOTICE text file distributed
          as part of the Derivative Works; within the Source form or
          documentation, if provided along with the Derivative Works; or,
          within a display generated by the Derivative Works, if and
          wherever such third-party notices normally appear. The contents
          of the NOTICE file are for informational purposes only and
          do not modify the License. You may add Your own attribution
          notices within Derivative Works that You distribute, alongside
          or as an addendum to the NOTICE text from the Work, provided
          that such additional attribution notices cannot be construed
          as modifying the License.
      You may add Your own copyright statement to Your modifications and
      may provide additional or different license terms and conditions
      for use, reproduction, or distribution of Your modifications, or
      for any such Derivative Works as a whole, provided Your use,
      reproduction, and distribution of the Work otherwise complies with
      the conditions stated in this License.
   5. Submission of Contributions. Unless You explicitly state otherwise,
      any Contribution intentionally submitted for inclusion in the Work
      by You to the Licensor shall be under the terms and conditions of
      this License, without any additional terms or conditions.
      Notwithstanding the above, nothing herein shall supersede or modify
      the terms of any separate license agreement you may have executed
      with Licensor regarding such Contributions.
   6. Trademarks. This License does not grant permission to use the trade
      names, trademarks, service marks, or product names of the Licensor,
      except as required for reasonable and customary use in describing the
      origin of the Work and reproducing the content of the NOTICE file.
   7. Disclaimer of Warranty. Unless required by applicable law or
      agreed to in writing, Licensor provides the Work (and each
      Contributor provides its Contributions) on an "AS IS" BASIS,
      WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or
      implied, including, without limitation, any warranties or conditions
      of TITLE, NON-INFRINGEMENT, MERCHANTABILITY, or FITNESS FOR A
      PARTICULAR PURPOSE. You are solely responsible for determining the
      appropriateness of using or redistributing the Work and assume any
      risks associated with Your exercise of permissions under this License.
   8. Limitation of Liability. In no event and under no legal theory,
      whether in tort (including negligence), contract, or otherwise,
      unless required by applicable law (such as deliberate and grossly
      negligent acts) or agreed to in writing, shall any Contributor be
      liable to You for damages, including any direct, indirect, special,
      incidental, or consequential damages of any character arising as a
      result of this License or out of the use or inability to use the
      Work (including but not limited to damages for loss of goodwill,
      work stoppage, computer failure or malfunction, or any and all
      other commercial damages or losses), even if such Contributor
      has been advised of the possibility of such damages.
   9. Accepting Warranty or Additional Liability. While redistributing
      the Work or Derivative Works thereof, You may choose to offer,
      and charge a fee for, acceptance of support, warranty, indemnity,
      or other liability obligations and/or rights consistent with this
      License. However, in accepting such obligations, You may act only
      on Your own behalf and on Your sole responsibility, not on behalf
      of any other Contributor, and only if You agree to indemnify,
      defend, and hold each Contributor harmless for any liability
      incurred by, or claims asserted against, such Contributor by reason
      of your accepting any such warranty or additional liability.
   END OF TERMS AND CONDITIONS
   APPENDIX: How to apply the Apache License to your work.
      To apply the Apache License to your work, attach the following
      boilerplate notice, with the fields enclosed by brackets "[]"
      replaced with your own identifying information. (Don't include
      the brackets!)  The text should be enclosed in the appropriate
      comment syntax for the file format. We also recommend that a
      file or class name and description of purpose be included on the
      same "printed page" as the copyright notice for easier
      identification within third-party archives.
   Copyright 2018 File Browser Contributors
   Licensed under the Apache License, Version 2.0 (the "License");
   you may not use this file except in compliance with the License.
   You may obtain a copy of the License at
       http://www.apache.org/licenses/LICENSE-2.0
   Unless required by applicable law or agreed to in writing, software
   distributed under the License is distributed on an "AS IS" BASIS,
   WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
   See the License for the specific language governing permissions and
   limitations under the License.
--- a/LICENSE.md
+++ b/LICENSE.md
@ -0,0 +1,201 @@
 Apache License
 Version 2.0, January 2004
 http://www.apache.org/licenses/
 TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION
 1. Definitions.
 "License" shall mean the terms and conditions for use, reproduction,
 and distribution as defined by Sections 1 through 9 of this document.
 "Licensor" shall mean the copyright owner or entity authorized by
 the copyright owner that is granting the License.
 "Legal Entity" shall mean the union of the acting entity and all
 other entities that control, are controlled by, or are under common
 control with that entity. For the purposes of this definition,
 "control" means (i) the power, direct or indirect, to cause the
 direction or management of such entity, whether by contract or
 otherwise, or (ii) ownership of fifty percent (50%) or more of the
 outstanding shares, or (iii) beneficial ownership of such entity.
 "You" (or "Your") shall mean an individual or Legal Entity
 exercising permissions granted by this License.
 "Source" form shall mean the preferred form for making modifications,
 including but not limited to software source code, documentation
 source, and configuration files.
 "Object" form shall mean any form resulting from mechanical
 transformation or translation of a Source form, including but
 not limited to compiled object code, generated documentation,
 and conversions to other media types.
 "Work" shall mean the work of authorship, whether in Source or
 Object form, made available under the License, as indicated by a
 copyright notice that is included in or attached to the work
 (an example is provided in the Appendix below).
 "Derivative Works" shall mean any work, whether in Source or Object
 form, that is based on (or derived from) the Work and for which the
 editorial revisions, annotations, elaborations, or other modifications
 represent, as a whole, an original work of authorship. For the purposes
 of this License, Derivative Works shall not include works that remain
 separable from, or merely link (or bind by name) to the interfaces of,
 the Work and Derivative Works thereof.
 "Contribution" shall mean any work of authorship, including
 the original version of the Work and any modifications or additions
 to that Work or Derivative Works thereof, that is intentionally
 submitted to Licensor for inclusion in the Work by the copyright owner
 or by an individual or Legal Entity authorized to submit on behalf of
 the copyright owner. For the purposes of this definition, "submitted"
 means any form of electronic, verbal, or written communication sent
 to the Licensor or its representatives, including but not limited to
 communication on electronic mailing lists, source code control systems,
 and issue tracking systems that are managed by, or on behalf of, the
 Licensor for the purpose of discussing and improving the Work, but
 excluding communication that is conspicuously marked or otherwise
 designated in writing by the copyright owner as "Not a Contribution."
 "Contributor" shall mean Licensor and any individual or Legal Entity
 on behalf of whom a Contribution has been received by Licensor and
 subsequently incorporated within the Work.
 2. Grant of Copyright License. Subject to the terms and conditions of
 this License, each Contributor hereby grants to You a perpetual,
 worldwide, non-exclusive, no-charge, royalty-free, irrevocable
 copyright license to reproduce, prepare Derivative Works of,
 publicly display, publicly perform, sublicense, and distribute the
 Work and such Derivative Works in Source or Object form.
 3. Grant of Patent License. Subject to the terms and conditions of
 this License, each Contributor hereby grants to You a perpetual,
 worldwide, non-exclusive, no-charge, royalty-free, irrevocable
 (except as stated in this section) patent license to make, have made,
 use, offer to sell, sell, import, and otherwise transfer the Work,
 where such license applies only to those patent claims licensable
 by such Contributor that are necessarily infringed by their
 Contribution(s) alone or by combination of their Contribution(s)
 with the Work to which such Contribution(s) was submitted. If You
 institute patent litigation against any entity (including a
 cross-claim or counterclaim in a lawsuit) alleging that the Work
 or a Contribution incorporated within the Work constitutes direct
 or contributory patent infringement, then any patent licenses
 granted to You under this License for that Work shall terminate
 as of the date such litigation is filed.
 4. Redistribution. You may reproduce and distribute copies of the
 Work or Derivative Works thereof in any medium, with or without
 modifications, and in Source or Object form, provided that You
 meet the following conditions:
 (a) You must give any other recipients of the Work or
 Derivative Works a copy of this License; and
 (b) You must cause any modified files to carry prominent notices
 stating that You changed the files; and
 (c) You must retain, in the Source form of any Derivative Works
 that You distribute, all copyright, patent, trademark, and
 attribution notices from the Source form of the Work,
 excluding those notices that do not pertain to any part of
 the Derivative Works; and
 (d) If the Work includes a "NOTICE" text file as part of its
 distribution, then any Derivative Works that You distribute must
 include a readable copy of the attribution notices contained
 within such NOTICE file, excluding those notices that do not
 pertain to any part of the Derivative Works, in at least one
 of the following places: within a NOTICE text file distributed
 as part of the Derivative Works; within the Source form or
 documentation, if provided along with the Derivative Works; or,
 within a display generated by the Derivative Works, if and
 wherever such third-party notices normally appear. The contents
 of the NOTICE file are for informational purposes only and
 do not modify the License. You may add Your own attribution
 notices within Derivative Works that You distribute, alongside
 or as an addendum to the NOTICE text from the Work, provided
 that such additional attribution notices cannot be construed
 as modifying the License.
 You may add Your own copyright statement to Your modifications and
 may provide additional or different license terms and conditions
 for use, reproduction, or distribution of Your modifications, or
 for any such Derivative Works as a whole, provided Your use,
 reproduction, and distribution of the Work otherwise complies with
 the conditions stated in this License.
 5. Submission of Contributions. Unless You explicitly state otherwise,
 any Contribution intentionally submitted for inclusion in the Work
 by You to the Licensor shall be under the terms and conditions of
 this License, without any additional terms or conditions.
 Notwithstanding the above, nothing herein shall supersede or modify
 the terms of any separate license agreement you may have executed
 with Licensor regarding such Contributions.
 6. Trademarks. This License does not grant permission to use the trade
 names, trademarks, service marks, or product names of the Licensor,
 except as required for reasonable and customary use in describing the
 origin of the Work and reproducing the content of the NOTICE file.
 7. Disclaimer of Warranty. Unless required by applicable law or
 agreed to in writing, Licensor provides the Work (and each
 Contributor provides its Contributions) on an "AS IS" BASIS,
 WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or
 implied, including, without limitation, any warranties or conditions
 of TITLE, NON-INFRINGEMENT, MERCHANTABILITY, or FITNESS FOR A
 PARTICULAR PURPOSE. You are solely responsible for determining the
 appropriateness of using or redistributing the Work and assume any
 risks associated with Your exercise of permissions under this License.
 8. Limitation of Liability. In no event and under no legal theory,
 whether in tort (including negligence), contract, or otherwise,
 unless required by applicable law (such as deliberate and grossly
 negligent acts) or agreed to in writing, shall any Contributor be
 liable to You for damages, including any direct, indirect, special,
 incidental, or consequential damages of any character arising as a
 result of this License or out of the use or inability to use the
 Work (including but not limited to damages for loss of goodwill,
 work stoppage, computer failure or malfunction, or any and all
 other commercial damages or losses), even if such Contributor
 has been advised of the possibility of such damages.
 9. Accepting Warranty or Additional Liability. While redistributing
 the Work or Derivative Works thereof, You may choose to offer,
 and charge a fee for, acceptance of support, warranty, indemnity,
 or other liability obligations and/or rights consistent with this
 License. However, in accepting such obligations, You may act only
 on Your own behalf and on Your sole responsibility, not on behalf
 of any other Contributor, and only if You agree to indemnify,
 defend, and hold each Contributor harmless for any liability
 incurred by, or claims asserted against, such Contributor by reason
 of your accepting any such warranty or additional liability.
 END OF TERMS AND CONDITIONS
 APPENDIX: How to apply the Apache License to your work.
 To apply the Apache License to your work, attach the following
 boilerplate notice, with the fields enclosed by brackets "{}"
 replaced with your own identifying information. (Don't include
 the brackets!)  The text should be enclosed in the appropriate
 comment syntax for the file format. We also recommend that a
 file or class name and description of purpose be included on the
 same "printed page" as the copyright notice for easier
 identification within third-party archives.
 Copyright {yyyy} {name of copyright owner}
 Licensed under the Apache License, Version 2.0 (the "License");
 you may not use this file except in compliance with the License.
 You may obtain a copy of the License at
 http://www.apache.org/licenses/LICENSE-2.0
 Unless required by applicable law or agreed to in writing, software
 distributed under the License is distributed on an "AS IS" BASIS,
 WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
 See the License for the specific language governing permissions and
 limitations under the License.
--- a/README.md
+++ b/README.md
@ -1,30 +1,149 @@
-<p align="center">
+![Preview](https://user-images.githubusercontent.com/5447088/28537288-39be4288-70a2-11e7-8ce9-0813d59f46b7.gif)
  <img src="https://raw.githubusercontent.com/filebrowser/filebrowser/master/branding/banner.png" width="550"/>
 </p>
-[![Build](https://github.com/filebrowser/filebrowser/actions/workflows/ci.yaml/badge.svg)](https://github.com/filebrowser/filebrowser/actions/workflows/ci.yaml)
+# filemanager
 [![Go Report Card](https://goreportcard.com/badge/github.com/filebrowser/filebrowser/v2)](https://goreportcard.com/report/github.com/filebrowser/filebrowser/v2)
 [![Version](https://img.shields.io/github/release/filebrowser/filebrowser.svg)](https://github.com/filebrowser/filebrowser/releases/latest)
-File Browser provides a file managing interface within a specified directory and it can be used to upload, delete, preview and edit your files. It is a **create-your-own-cloud**-kind of software where you can just install it on your server, direct it to a path and access your files through a nice web interface.
+[![Build](https://img.shields.io/travis/hacdias/filemanager.svg?style=flat-square)](https://travis-ci.org/hacdias/filemanager)
 [![Go Report Card](https://goreportcard.com/badge/github.com/hacdias/filemanager?style=flat-square)](https://goreportcard.com/report/hacdias/filemanager)
 [![Documentation](https://img.shields.io/badge/godoc-reference-blue.svg?style=flat-square)](http://godoc.org/github.com/hacdias/filemanager)
-## Documentation
+filemanager provides a file managing interface within a specified directory and it can be used to upload, delete, preview, rename and edit your files. It allows the creation of multiple users and each user can have its own directory. It can be used as a standalone app or as a middleware.
-Documentation on how to install, configure, and contribute to this project is hosted at [filebrowser.org](https://filebrowser.org).
+# Table of contents
-## Project Status
+ [Getting started](#getting-started)
  - [Caddy](#caddy)
  - [Standalone](#standalone)
 + [Features](#features)
  - [Users](#users)
  - [Search](#search)
 + [Contributing](#contributing)
 + [Donate](#donate)
-This project is a finished product which fulfills its goal: be a single binary web File Browser which can be run by anyone anywhere. That means that File Browser is currently on **maintenance-only** mode. Therefore, please note the following:
+# Getting started
- It can take a while until someone gets back to you. Please be patient.
+This is a library that can be used on your own applications as a middleware (see the [documentation](http://godoc.org/github.com/hacdias/filemanager)), as a plugin to Caddy web server or as a standalone app.
 - [Issues](https://github.com/filebrowser/filebrowser/issues) are meant to track bugs. Unrelated issues will be converted into [discussions](https://github.com/filebrowser/filebrowser/discussions).
 - No new features will be implemented by maintainers. Pull requests for new features will be reviewed on a case by case basis.
 - The priority is triaging issues, addressing security issues and reviewing pull requests meant to solve bugs.
-## Contributing
+Once you have everything deployed, the default credentials to login to the filemanager are:
-Contributions are always welcome. To start contributing to this project, read our [guidelines](CONTRIBUTING.md) first.
+**Username:** `admin`
 **Password:** `admin`
-## License
+## Caddy
-[Apache License 2.0](LICENSE) © File Browser Contributors
+The easiest way to get started is using this with Caddy web server. You just need to download Caddy from its [official website](https://caddyserver.com/download) with `http.filemanager` plugin enabled. For more information about the plugin itself, please refer to its [documentation](https://caddyserver.com/docs/http.filemanager).
 ## Standalone
 You can use filemanager as a standalone executable. You just need to download it from the [releases page](https://github.com/hacdias/filemanager/releases), where you can find multiple releases.
 You can either use flags or a JSON configuration file, which should have the following appearance:
 ```json
 {
  "port": 80,
  "address": "127.0.0.1",
  "database": "/path/to/database.db",
  "scope": "/path/to/my/files",
  "allowCommands": true,
  "allowEdit": true,
  "allowNew": true,
  "commands": [
    "git",
    "svn"
  ]
 }
 ```
 The `scope`, `allowCommands`, `allowEdit`, `allowNew` and `commands` options are the defaults for new users. To set a configuration file, you will need to pass the path with a flag, like this: `filemanager --config=/path/to/config.json`.
 Otherwise, you may not want to use a configuration file, which can be done using the following flags:
 ```
 -address string
      Address to listen to (default is all of them)
 -allow-commands
      Default allow commands option (default true)
 -allow-edit
      Default allow edit option (default true)
 -allow-new
      Default allow new option (default true)
 -commands string
      Space separated commands available for new users (default "git svn hg")
 -database string
      Database path (default "./filemanager.db")
 -port string
      HTTP Port (default is random)
 -scope string
      Default scope for new users (default ".")
 ```
 ## Docker
 (TODO)
 # Features
 Easy login system.
 ![Login Page](https://user-images.githubusercontent.com/5447088/28432382-975493dc-6d7f-11e7-9190-23f8037159dc.jpg)
 Listings of your files, available in two styles: mosaic and list. You can delete, move, rename, upload and create new files, as well as directories. Single files can be downloaded directly, and multiple files as *.zip*, *.tar*, *.tar.gz*, *.tar.bz2* or *.tar.xz*.
 ![Mosaic Listing](https://user-images.githubusercontent.com/5447088/28432384-9771bb4c-6d7f-11e7-8564-3a9bd6a3ce3a.jpg)
 File Manager editor is powered by [Codemirror](https://codemirror.net/) and if you're working with markdown files with metadata, both parts will be separated from each other so you can focus on the content.
 ![Markdown Editor](https://user-images.githubusercontent.com/5447088/28432383-9756fdac-6d7f-11e7-8e58-fec49470d15f.jpg)
 On the settings page, a regular user can set its own custom CSS to personalize the experience and change its password. For admins, they can manage the permissions of each user, set commands which can be executed when certain events are triggered (such as before saving and after saving) and change plugin's settings.
 ![Settings](https://user-images.githubusercontent.com/5447088/28432385-9776ec66-6d7f-11e7-90a5-891bacd4d02f.jpg)
 We also allow the users to search in the directories and execute commands if allowed.
 ## Users
 We support multiple users and each user can have its own scope and custom stylesheet. The administrator is able to choose which permissions should be given to the users, as well as the commands they can execute. Each user also have a set of rules, in which he can be prevented or allowed to access some directories (regular expressions included!).
 ![Users](https://user-images.githubusercontent.com/5447088/28432386-977f388a-6d7f-11e7-9006-87d16f05f1f8.jpg)
 ## Search
 FileManager allows you to search through your files and it has some options. By default, your search will be something like this:
 ```
 this are keywords
 ```
 If you search for that it will look at every file that contains "this", "are" or "keywords" on their name. If you want to search for an exact term, you should surround your search by double quotes:
 ```
 "this is the name"
 ```
 That will search for any file that contains "this is the name" on its name. It won't search for each separated term this time.
 By default, every search will be case sensitive. Although, you can make a case insensitive search by adding `case:insensitive` to the search terms, like this:
 ```
 this are keywords case:insensitive
 ```
 # Contributing
 If you want to contribute or want to build the code from source, you will need to have the most recent version of Go and, if you want to change the static assets (JS, CSS, ...), Node.js installed on your computer. To start developing, you just need to do the following:
 1. `go get github.com/hacdias/filemanager`
 2. `cd $GOPATH/src/github.com/hacdias/filemanager`
 3. `npm install`
 4. `npm start dev` - regenerates the static assets automatically
 5. `go install gihthub.com/hacdias/filemanager/cmd/filemanager`
 6. Execute `$GOPATH/bin/filemanager`
 The steps 3 and 4 are only required **if you want to develop the front-end**. Otherwise, you can ignore them. Before pulling, if you made any change on assets folder, you must run the `build.sh` script on the root of this repository.
 If you are using this as a Caddy plugin, you should use its [official instructions for plugins](https://github.com/mholt/caddy/wiki/Extending-Caddy#2-plug-in-your-plugin) and import `github.com/hacdias/filemanager/caddy/filemanager`.
 # Donate
 Enjoying this project? You can [donate to its creator](https://henriquedias.com/donate/). He will appreciate.
--- a/SECURITY.md
+++ b/SECURITY.md
@ -1,26 +0,0 @@
 # Security Policy
 ## Supported Versions
 Use this section to tell people about which versions of your project are
 currently being supported with security updates.
 | Version | Supported          |
 | ------- | ------------------ |
 | 2.x     | :white_check_mark: |
 | < 2.0   | :x:                |
 ## Reporting a Vulnerability
 Vulnerabilities with critical impact should be reported on the [Security](https://github.com/filebrowser/filebrowser/security) page of this repository, which is a private way of communicating vulnerabilities to maintainers. This project is in maintenance-only mode and it can take a while until someone gets back to you.
 If it is not a critical vulnerability, please open an issue and we will categorize it as a security issue. By giving visibility, we can get more help from the community at fixing such issues.
 When reporting an issue, where possible, please provide at least:
 * The commit version the issue was identified at
 * A proof of concept (plaintext; no binaries)
 * Steps to reproduce
 * Your recommended remediation(s), if any.
 The File Browser team is a volunteer-only effort, and may reach back out for clarification.
--- a/Taskfile.yml
+++ b/Taskfile.yml
@ -1,83 +0,0 @@
 version: '3'
 vars:
  SITE_DOCKER_FLAGS: >-
    -v ./www:/docs
    -v ./LICENSE:/docs/docs/LICENSE
    -v ./SECURITY.md:/docs/docs/security.md
    -v ./CHANGELOG.md:/docs/docs/changelog.md
    -v ./CODE-OF-CONDUCT.md:/docs/docs/code-of-conduct.md
    -v ./CONTRIBUTING.md:/docs/docs/contributing.md
 tasks:
  build:frontend:
    desc: Build frontend assets
    dir: frontend
    cmds:
      - pnpm install --frozen-lockfile
      - pnpm run build
  build:backend:
    desc: Build backend binary
    cmds:
      - go build -ldflags='-s -w -X "github.com/filebrowser/filebrowser/v2/version.Version={{.VERSION}}" -X "github.com/filebrowser/filebrowser/v2/version.CommitSHA={{.GIT_COMMIT}}"' -o filebrowser .
    vars:
      GIT_COMMIT:
        sh: git log -n 1 --format=%h
      VERSION:
        sh: git describe --tags --abbrev=0 --match=v* | cut -c 2-
  build:
    desc: Build both frontend and backend
    cmds:
      - task: build:frontend
      - task: build:backend
  release:make:
    internal: true
    prompt: Do you wish to proceed?
    cmds:
      - pnpm dlx commit-and-tag-version -s
  release:dry-run:
    internal: true
    cmds:
      - pnpm dlx commit-and-tag-version --dry-run --skip
  release:
    desc: Create a new release
    cmds:
      - task: docs:cli:generate
      - git add www/docs/cli
      - |
        if [[ `git status www/docs/cli --porcelain` ]]; then
          git commit -m 'chore(docs): update CLI documentation'
        fi
      - task: release:dry-run
      - task: release:make
  docs:cli:generate:
    cmds:
      - rm -rf www/docs/cli
      - mkdir -p www/docs/cli
      - go run . docs
    generates:
      - www/docs/cli
  docs:docker:generate:
    internal: true
    cmds: 
      - docker build -f www/Dockerfile --progress=plain -t filebrowser.site www
  docs:
    desc: Generate documentation
    cmds:
      - rm -rf www/public
      - task: docs:docker:generate
      - docker run --rm {{.SITE_DOCKER_FLAGS}} filebrowser.site build -d "public"
  docs:serve:
    desc: Serve documentation
    cmds:
      - task: docs:docker:generate
      - docker run --rm -it -p 8000:8000 {{.SITE_DOCKER_FLAGS}} filebrowser.site
--- a/assets/build/build.js
+++ b/assets/build/build.js
@ -0,0 +1,31 @@
 require('./check-versions')()
 process.env.NODE_ENV = 'production'
 var ora = require('ora')
 var rm = require('rimraf')
 var path = require('path')
 var chalk = require('chalk')
 var webpack = require('webpack')
 var config = require('./config')
 var webpackConfig = require('./webpack.prod.conf')
 var spinner = ora('building for production...')
 spinner.start()
 rm(path.join(config.assetsRoot, config.assetsSubDirectory), err => {
  if (err) throw err
  webpack(webpackConfig, function (err, stats) {
    spinner.stop()
    if (err) throw err
    process.stdout.write(stats.toString({
      colors: true,
      modules: false,
      children: false,
      chunks: false,
      chunkModules: false
    }) + '\n\n')
    console.log(chalk.cyan('  Build complete.\n'))
  })
 })
--- a/assets/build/check-versions.js
+++ b/assets/build/check-versions.js
@ -0,0 +1,48 @@
 var chalk = require('chalk')
 var semver = require('semver')
 var packageConfig = require('../../package.json')
 var shell = require('shelljs')
 function exec (cmd) {
  return require('child_process').execSync(cmd).toString().trim()
 }
 var versionRequirements = [
  {
    name: 'node',
    currentVersion: semver.clean(process.version),
    versionRequirement: packageConfig.engines.node
  }
 ]
 if (shell.which('npm')) {
  versionRequirements.push({
    name: 'npm',
    currentVersion: exec('npm --version'),
    versionRequirement: packageConfig.engines.npm
  })
 }
 module.exports = function () {
  var warnings = []
  for (var i = 0; i < versionRequirements.length; i++) {
    var mod = versionRequirements[i]
    if (!semver.satisfies(mod.currentVersion, mod.versionRequirement)) {
      warnings.push(mod.name + ': ' +
        chalk.red(mod.currentVersion) + ' should be ' +
        chalk.green(mod.versionRequirement)
      )
    }
  }
  if (warnings.length) {
    console.log('')
    console.log(chalk.yellow('To use this template, you must update following to modules:'))
    console.log()
    for (var i = 0; i < warnings.length; i++) {
      var warning = warnings[i]
      console.log('  ' + warning)
    }
    console.log()
    process.exit(1)
  }
 }
--- a/assets/build/config.js
+++ b/assets/build/config.js
@ -0,0 +1,26 @@
 // see http://vuejs-templates.github.io/webpack for documentation.
 var path = require('path')
 module.exports = {
  index: path.resolve(__dirname, '../dist/index.html'),
  assetsRoot: path.resolve(__dirname, '../dist'),
  assetsSubDirectory: 'static',
  assetsPublicPath: '{{ .BaseURL }}/',
  build: {
    env: {
      NODE_ENV: '"production"'
    },
    productionSourceMap: true,
    // Run the build command with an extra argument to
    // View the bundle analyzer report after build finishes:
    // `npm run build --report`
    // Set to `true` or `false` to always turn it on or off
    bundleAnalyzerReport: process.env.npm_config_report
  },
  dev: {
    env: {
      NODE_ENV: '"development"'
    },
    produceSourceMap: true
  }
 }
--- a/assets/build/dev.js
+++ b/assets/build/dev.js
@ -0,0 +1,35 @@
 require('./check-versions')()
 process.env.NODE_ENV = 'development'
 var rm = require('rimraf')
 var path = require('path')
 var chalk = require('chalk')
 var webpack = require('webpack')
 var config = require('./config')
 var webpackConfig = require('./webpack.dev.conf')
 var fs = require('fs')
 if (fs.existsSync('./rice-box.go')) {
  fs.unlinkSync('./rice-box.go')
 }
 if (fs.existsSync('./caddy/hugo/rice-box.go')) {
  fs.unlinkSync('./caddy/hugo/rice-box.go')
 }
 rm(path.join(config.assetsRoot, config.assetsSubDirectory), err => {
  if (err) throw err
  webpack(webpackConfig, function (err, stats) {
    if (err) throw err
    process.stdout.write(stats.toString({
      colors: true,
      modules: false,
      children: false,
      chunks: false,
      chunkModules: false
    }) + '\n\n')
    console.log(chalk.cyan('  Build complete.\n'))
  })
 })
--- a/assets/build/service-worker-dev.js
+++ b/assets/build/service-worker-dev.js
@ -0,0 +1,17 @@
 // This service worker file is effectively a 'no-op' that will reset any
 // previous service worker registered for the same host:port combination.
 // In the production build, this file is replaced with an actual service worker
 // file that will precache your site's local assets.
 // See https://github.com/facebookincubator/create-react-app/issues/2272#issuecomment-302832432
 self.addEventListener('install', () => self.skipWaiting());
 self.addEventListener('activate', () => {
  self.clients.matchAll({ type: 'window' }).then(windowClients => {
    for (let windowClient of windowClients) {
      // Force open pages to refresh, so that they have a chance to load the
      // fresh navigation response from the local dev server.
      windowClient.navigate(windowClient.url);
    }
  });
 });
--- a/assets/build/service-worker-prod.js
+++ b/assets/build/service-worker-prod.js
@ -0,0 +1,55 @@
 (function() {
  'use strict';
  // Check to make sure service workers are supported in the current browser,
  // and that the current page is accessed from a secure origin. Using a
  // service worker from an insecure origin will trigger JS console errors.
  const isLocalhost = Boolean(window.location.hostname === 'localhost' ||
      // [::1] is the IPv6 localhost address.
      window.location.hostname === '[::1]' ||
      // 127.0.0.1/8 is considered localhost for IPv4.
      window.location.hostname.match(
        /^127(?:\.(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)){3}$/
      )
    );
  window.addEventListener('load', function() {
      if ('serviceWorker' in navigator &&
          (window.location.protocol === 'https:' || isLocalhost)) {
        navigator.serviceWorker.register('{{ .BaseURL }}/sw.js')
        .then(function(registration) {
          // updatefound is fired if service-worker.js changes.
          registration.onupdatefound = function() {
            // updatefound is also fired the very first time the SW is installed,
            // and there's no need to prompt for a reload at that point.
            // So check here to see if the page is already controlled,
            // i.e. whether there's an existing service worker.
            if (navigator.serviceWorker.controller) {
              // The updatefound event implies that registration.installing is set
              const installingWorker = registration.installing;
              installingWorker.onstatechange = function() {
                switch (installingWorker.state) {
                  case 'installed':
                    // At this point, the old content will have been purged and the
                    // fresh content will have been added to the cache.
                    // It's the perfect time to display a "New content is
                    // available; please refresh." message in the page's interface.
                    break;
                  case 'redundant':
                    throw new Error('The installing ' +
                                    'service worker became redundant.');
                  default:
                    // Ignore
                }
              };
            }
          };
        }).catch(function(e) {
          console.error('Error during service worker registration:', e);
        });
      }
  });
 })();
--- a/assets/build/utils.js
+++ b/assets/build/utils.js
@ -0,0 +1,70 @@
 var path = require('path')
 var config = require('./config')
 var ExtractTextPlugin = require('extract-text-webpack-plugin')
 exports.assetsPath = function (_path) {
  var assetsSubDirectory = config.assetsSubDirectory
  return path.posix.join(assetsSubDirectory, _path)
 }
 exports.cssLoaders = function (options) {
  options = options || {}
  var cssLoader = {
    loader: 'css-loader',
    options: {
      minimize: process.env.NODE_ENV === 'production',
      sourceMap: options.sourceMap
    }
  }
  // generate loader string to be used with extract text plugin
  function generateLoaders (loader, loaderOptions) {
    var loaders = [cssLoader]
    if (loader) {
      loaders.push({
        loader: loader + '-loader',
        options: Object.assign({}, loaderOptions, {
          sourceMap: options.sourceMap
        })
      })
    }
    // Extract CSS when that option is specified
    // (which is the case during production build)
    if (options.extract) {
      return ExtractTextPlugin.extract({
        use: loaders,
        fallback: 'vue-style-loader'
      })
    } else {
      return ['vue-style-loader'].concat(loaders)
    }
  }
  // https://vue-loader.vuejs.org/en/configurations/extract-css.html
  return {
    css: generateLoaders(),
    postcss: generateLoaders(),
    less: generateLoaders('less'),
    sass: generateLoaders('sass', { indentedSyntax: true }),
    scss: generateLoaders('sass'),
    stylus: generateLoaders('stylus'),
    styl: generateLoaders('stylus')
  }
 }
 // Generate loaders for standalone style files (outside of .vue)
 exports.styleLoaders = function (options) {
  var output = []
  var loaders = exports.cssLoaders(options)
  for (var extension in loaders) {
    var loader = loaders[extension]
    output.push({
      test: new RegExp('\\.' + extension + '$'),
      use: loader
    })
  }
  return output
 }
--- a/assets/build/vue-loader.conf.js
+++ b/assets/build/vue-loader.conf.js
@ -0,0 +1,12 @@
 var utils = require('./utils')
 var config = require('./config')
 var isProduction = process.env.NODE_ENV === 'production'
 module.exports = {
  loaders: utils.cssLoaders({
    sourceMap: isProduction
      ? config.build.productionSourceMap
      : config.dev.produceSourceMap,
    extract: isProduction
  })
 }
--- a/assets/build/webpack.base.conf.js
+++ b/assets/build/webpack.base.conf.js
@ -0,0 +1,65 @@
 var path = require('path')
 var utils = require('./utils')
 var config = require('./config')
 var vueLoaderConfig = require('./vue-loader.conf')
 function resolve (dir) {
  return path.join(__dirname, '..', dir)
 }
 module.exports = {
  entry: {
    app: './assets/src/main.js'
  },
  output: {
    path: config.assetsRoot,
    filename: '[name].js',
    publicPath: config.assetsPublicPath
  },
  resolve: {
    extensions: ['.js', '.vue', '.json'],
    alias: {
      'vue$': 'vue/dist/vue.esm.js',
      '@': resolve('src')
    }
  },
  module: {
    rules: [
      {
        test: /\.(js|vue)$/,
        loader: 'eslint-loader',
        enforce: 'pre',
        include: [resolve('src'), resolve('test')],
        options: {
          formatter: require('eslint-friendly-formatter')
        }
      },
      {
        test: /\.vue$/,
        loader: 'vue-loader',
        options: vueLoaderConfig
      },
      {
        test: /\.js$/,
        loader: 'babel-loader',
        include: [resolve('src'), resolve('test')]
      },
      {
        test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
        loader: 'url-loader',
        options: {
          limit: 10000,
          name: utils.assetsPath('img/[name].[hash:7].[ext]')
        }
      },
      {
        test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
        loader: 'url-loader',
        options: {
          // limit: 10000,
          name: utils.assetsPath('fonts/[name].[hash:7].[ext]')
        }
      }
    ]
  }
 }
--- a/assets/build/webpack.dev.conf.js
+++ b/assets/build/webpack.dev.conf.js
@ -0,0 +1,81 @@
 var fs = require('fs')
 var path = require('path')
 var utils = require('./utils')
 var webpack = require('webpack')
 var config = require('./config')
 var merge = require('webpack-merge')
 var baseWebpackConfig = require('./webpack.base.conf')
 var HtmlWebpackPlugin = require('html-webpack-plugin')
 var ExtractTextPlugin = require('extract-text-webpack-plugin')
 var FriendlyErrorsPlugin = require('friendly-errors-webpack-plugin')
 var CopyWebpackPlugin = require('copy-webpack-plugin')
 module.exports = merge(baseWebpackConfig, {
  watch: true,
  module: {
    rules: utils.styleLoaders({
      sourceMap: config.dev.produceSourceMap,
      extract: true
    })
  },
  devtool: '#cheap-module-eval-source-map',
  output: {
    path: config.assetsRoot,
    filename: utils.assetsPath('js/[name].[chunkhash].js'),
    chunkFilename: utils.assetsPath('js/[id].[chunkhash].js')
  },
  plugins: [
    new webpack.NoEmitOnErrorsPlugin(),
    new FriendlyErrorsPlugin(),
    new webpack.DefinePlugin({
      'process.env': config.dev.env
    }),
    // extract css into its own file
    new ExtractTextPlugin({
      filename: utils.assetsPath('css/[name].[contenthash].css')
    }),
    // generate dist index.html with correct asset hash for caching.
    // you can customize output by editing /index.html
    // see https://github.com/ampedandwired/html-webpack-plugin
    new HtmlWebpackPlugin({
      filename: config.index,
      template: 'assets/index.html',
      inject: true,
      // necessary to consistently work with multiple chunks via CommonsChunkPlugin
      chunksSortMode: 'dependency',
      serviceWorkerLoader: `<script>${fs.readFileSync(path.join(__dirname,
        './service-worker-dev.js'), 'utf-8')}</script>`
    }),
    // split vendor js into its own file
    new webpack.optimize.CommonsChunkPlugin({
      name: 'vendor',
      minChunks: function (module, count) {
        // any required modules inside node_modules are extracted to vendor
        return (
          module.resource &&
          /\.js$/.test(module.resource) &&
          module.resource.indexOf(
            path.join(__dirname, '../../node_modules')
          ) === 0
        )
      }
    }),
    // extract webpack runtime and module manifest to its own file in order to
    // prevent vendor hash from being updated whenever app bundle is updated
    new webpack.optimize.CommonsChunkPlugin({
      name: 'manifest',
      chunks: ['vendor']
    }),
    new CopyWebpackPlugin([
      {
        from: path.resolve(__dirname, '../static'),
        to: config.assetsSubDirectory,
        ignore: ['.*']
      },
      {
        from: path.resolve(__dirname, '../../node_modules/codemirror/mode/*/*'),
        to: path.join(config.assetsSubDirectory, 'js/codemirror/mode/[name]/[name].js')
      }
    ])
  ]
 })
--- a/assets/build/webpack.prod.conf.js
+++ b/assets/build/webpack.prod.conf.js
@ -0,0 +1,127 @@
 var fs = require('fs')
 var path = require('path')
 var utils = require('./utils')
 var webpack = require('webpack')
 var config = require('./config')
 var merge = require('webpack-merge')
 var baseWebpackConfig = require('./webpack.base.conf')
 var CopyWebpackPlugin = require('copy-webpack-plugin')
 var HtmlWebpackPlugin = require('html-webpack-plugin')
 var ExtractTextPlugin = require('extract-text-webpack-plugin')
 var OptimizeCSSPlugin = require('optimize-css-assets-webpack-plugin')
 var SWPrecacheWebpackPlugin = require('sw-precache-webpack-plugin')
 var UglifyJS = require('uglify-js')
 var env = config.build.env
 var webpackConfig = merge(baseWebpackConfig, {
  module: {
    rules: utils.styleLoaders({
      sourceMap: config.build.productionSourceMap,
      extract: true
    })
  },
  devtool: config.build.productionSourceMap ? '#source-map' : false,
  output: {
    path: config.assetsRoot,
    filename: utils.assetsPath('js/[name].[chunkhash].js'),
    chunkFilename: utils.assetsPath('js/[id].[chunkhash].js')
  },
  plugins: [
    new CopyWebpackPlugin([
      {
        from: path.resolve(__dirname, '../static'),
        to: config.assetsSubDirectory,
        ignore: ['.*']
      },
      {
        from: path.resolve(__dirname, '../../node_modules/codemirror/mode/*/*'),
        to: path.join(config.assetsSubDirectory, 'js/codemirror/mode/[name]/[name].js'),
        transform: function (source, path) {
          let result = UglifyJS.minify(source.toString('utf8'))
          if (result.error !== undefined) {
            return source
          }
          return result.code
        }
      }
    ]),
    // http://vuejs.github.io/vue-loader/en/workflow/production.html
    new webpack.DefinePlugin({
      'process.env': env
    }),
    new webpack.optimize.UglifyJsPlugin({
      compress: {
        warnings: false
      },
      sourceMap: true
    }),
    // extract css into its own file
    new ExtractTextPlugin({
      filename: utils.assetsPath('css/[name].[contenthash].css')
    }),
    // Compress extracted CSS. We are using this plugin so that possible
    // duplicated CSS from different components can be deduped.
    new OptimizeCSSPlugin({
      cssProcessorOptions: {
        safe: true
      }
    }),
    // generate dist index.html with correct asset hash for caching.
    // you can customize output by editing /index.html
    // see https://github.com/ampedandwired/html-webpack-plugin
    new HtmlWebpackPlugin({
      filename: config.index,
      template: 'assets/index.html',
      inject: true,
      minify: {
        removeComments: true,
        collapseWhitespace: true,
        removeAttributeQuotes: true,
        minifyCSS: true
        // more options:
        // https://github.com/kangax/html-minifier#options-quick-reference
      },
      // necessary to consistently work with multiple chunks via CommonsChunkPlugin
      chunksSortMode: 'dependency',
      serviceWorkerLoader: `<script>${fs.readFileSync(path.join(__dirname,
        './service-worker-prod.js'), 'utf-8')}</script>`
    }),
    // split vendor js into its own file
    new webpack.optimize.CommonsChunkPlugin({
      name: 'vendor',
      minChunks: function (module, count) {
        // any required modules inside node_modules are extracted to vendor
        return (
          module.resource &&
          /\.js$/.test(module.resource) &&
          module.resource.indexOf(
            path.join(__dirname, '../../node_modules')
          ) === 0
        )
      }
    }),
    // extract webpack runtime and module manifest to its own file in order to
    // prevent vendor hash from being updated whenever app bundle is updated
    new webpack.optimize.CommonsChunkPlugin({
      name: 'manifest',
      chunks: ['vendor']
    }),
    // service worker caching
    new SWPrecacheWebpackPlugin({
      cacheId: 'File Manager',
      filename: 'sw.js',
      replacePrefix: '{{ .BaseURL }}/',
      staticFileGlobs: ['dist/**/*.{js,html,css}'],
      minify: true,
      stripPrefix: 'dist/'
    })
  ]
 })
 if (config.build.bundleAnalyzerReport) {
  var BundleAnalyzerPlugin = require('webpack-bundle-analyzer').BundleAnalyzerPlugin
  webpackConfig.plugins.push(new BundleAnalyzerPlugin())
 }
 module.exports = webpackConfig
--- a/assets/index.html
+++ b/assets/index.html
@ -0,0 +1,108 @@
 <!DOCTYPE html>
 <html lang="en">
 <head>
  <meta charset="utf-8">
  <meta http-equiv="X-UA-Compatible" content="IE=edge">
  <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
  <meta name="base" content="{{ .BaseURL }}">
  <title>File Manager</title>
  <link rel="icon" type="image/png" sizes="32x32" href="{{ .BaseURL }}/static/img/icons/favicon-32x32.png">
  <link rel="icon" type="image/png" sizes="16x16" href="{{ .BaseURL }}/static/img/icons/favicon-16x16.png">
  <!--[if IE]><link rel="shortcut icon" href="/static/img/icons/favicon.ico"><![endif]-->
  <!-- Add to home screen for Android and modern mobile browsers -->
  <link rel="manifest" href="{{ .BaseURL }}/static/manifest.json">
  <meta name="theme-color" content="#2979ff">
  <!-- Add to home screen for Safari on iOS -->
  <meta name="apple-mobile-web-app-capable" content="yes">
  <meta name="apple-mobile-web-app-status-bar-style" content="black">
  <meta name="apple-mobile-web-app-title" content="assets">
  <link rel="apple-touch-icon" href="{{ .BaseURL }}/static/img/icons/apple-touch-icon-152x152.png">
  <!-- Add to home screen for Windows -->
  <meta name="msapplication-TileImage" content="{{ .BaseURL }}/static/img/icons/msapplication-icon-144x144.png">
  <meta name="msapplication-TileColor" content="#2979ff">
  <% for (var chunk of webpack.chunks) {
    for (var file of chunk.files) {
      if (file.match(/\.(js|css)$/)) { %>
      <link rel="<%= chunk.initial?'preload':'prefetch' %>" href="{{ .BaseURL }}/<%= file %>" as="<%= file.match(/\.css$/)?'style':'script' %>"><% }}} %>
  <!-- Plugins info -->
  <script>{{ range $index, $plugin := .Plugins }}{{ JS $plugin.JavaScript }}{{ end}}</script>
  <style>
  #loading {
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    background: #fff;
    z-index: 9999;
    transition: .1s ease opacity;
    -webkit-transition: .1s ease opacity;
  }
  #loading.done {
    opacity: 0;
  }
  .spinner {
    width: 70px;
    text-align: center;
    position: fixed;
    top: 50%;
    left: 50%;
    -webkit-transform: translate(-50%, -50%);
            transform: translate(-50%, -50%);
  }
  .spinner > div {
    width: 18px;
    height: 18px;
    background-color: #333;
    border-radius: 100%;
    display: inline-block;
    -webkit-animation: sk-bouncedelay 1.4s infinite ease-in-out both;
    animation: sk-bouncedelay 1.4s infinite ease-in-out both;
  }
  .spinner .bounce1 {
    -webkit-animation-delay: -0.32s;
    animation-delay: -0.32s;
  }
  .spinner .bounce2 {
    -webkit-animation-delay: -0.16s;
    animation-delay: -0.16s;
  }
  @-webkit-keyframes sk-bouncedelay {
    0%, 80%, 100% { -webkit-transform: scale(0) }
    40% { -webkit-transform: scale(1.0) }
  }
  @keyframes sk-bouncedelay {
    0%, 80%, 100% {
      -webkit-transform: scale(0);
      transform: scale(0);
    } 40% {
      -webkit-transform: scale(1.0);
      transform: scale(1.0);
    }
  }
  </style>
 </head>
 <body>
  <div id="app"></div>
  <div id="loading">
    <div class="spinner">
      <div class="bounce1"></div>
      <div class="bounce2"></div>
      <div class="bounce3"></div>
    </div>
  </div>
  <%= htmlWebpackPlugin.options.serviceWorkerLoader %>
 </body>
 </html>
--- a/assets/src/App.vue
+++ b/assets/src/App.vue
@ -0,0 +1,22 @@
 <template>
  <router-view></router-view>
 </template>
 <script>
 export default {
  name: 'app',
  mounted: function () {
    // Remove loading animation.
    let loading = document.getElementById('loading')
    loading.classList.add('done')
    setTimeout(function () {
      loading.parentNode.removeChild(loading)
    }, 200)
  }
 }
 </script>
 <style>
@import './css/styles.css';
 </style>
--- a/assets/src/assets/fonts/material/icons.woff2
+++ b/assets/src/assets/fonts/material/icons.woff2
--- a/frontend/src/assets/fonts/roboto/medium-cyrillic-ext.woff2
+++ b/frontend/src/assets/fonts/roboto/medium-cyrillic-ext.woff2
--- a/frontend/src/assets/fonts/roboto/medium-cyrillic.woff2
+++ b/frontend/src/assets/fonts/roboto/medium-cyrillic.woff2
--- a/frontend/src/assets/fonts/roboto/medium-greek-ext.woff2
+++ b/frontend/src/assets/fonts/roboto/medium-greek-ext.woff2
--- a/frontend/src/assets/fonts/roboto/medium-greek.woff2
+++ b/frontend/src/assets/fonts/roboto/medium-greek.woff2
--- a/frontend/src/assets/fonts/roboto/medium-latin-ext.woff2
+++ b/frontend/src/assets/fonts/roboto/medium-latin-ext.woff2
--- a/frontend/src/assets/fonts/roboto/medium-latin.woff2
+++ b/frontend/src/assets/fonts/roboto/medium-latin.woff2
--- a/frontend/src/assets/fonts/roboto/medium-vietnamese.woff2
+++ b/frontend/src/assets/fonts/roboto/medium-vietnamese.woff2
--- a/frontend/src/assets/fonts/roboto/normal-cyrillic-ext.woff2
+++ b/frontend/src/assets/fonts/roboto/normal-cyrillic-ext.woff2
--- a/frontend/src/assets/fonts/roboto/normal-cyrillic.woff2
+++ b/frontend/src/assets/fonts/roboto/normal-cyrillic.woff2
--- a/frontend/src/assets/fonts/roboto/normal-greek-ext.woff2
+++ b/frontend/src/assets/fonts/roboto/normal-greek-ext.woff2
--- a/frontend/src/assets/fonts/roboto/normal-greek.woff2
+++ b/frontend/src/assets/fonts/roboto/normal-greek.woff2
--- a/frontend/src/assets/fonts/roboto/normal-latin-ext.woff2
+++ b/frontend/src/assets/fonts/roboto/normal-latin-ext.woff2
--- a/frontend/src/assets/fonts/roboto/normal-latin.woff2
+++ b/frontend/src/assets/fonts/roboto/normal-latin.woff2
--- a/frontend/src/assets/fonts/roboto/normal-vietnamese.woff2
+++ b/frontend/src/assets/fonts/roboto/normal-vietnamese.woff2
--- a/assets/src/assets/logo.svg
+++ b/assets/src/assets/logo.svg
@ -0,0 +1,5 @@
 <svg id="content" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 144 144">
    <circle cx="72" cy="72" r="72" fill="#2979ff"/>
    <circle cx="72" cy="72" r="48" fill="#40c4ff"/>
    <circle cx="72" cy="72" r="24" fill="#fff"/>
 </svg>
--- a/assets/src/components/Editor.vue
+++ b/assets/src/components/Editor.vue
@ -0,0 +1,129 @@
 <template>
    <form id="editor" :class="req.language">
        <div v-if="hasMetadata" id="metadata">
          <h2>Metadata</h2>
        </div>
        <h2 v-if="hasMetadata">Body</h2>
    </form>
 </template>
 <script>
 import { mapState } from 'vuex'
 import CodeMirror from '@/utils/codemirror'
 import api from '@/utils/api'
 import buttons from '@/utils/buttons'
 export default {
  name: 'editor',
  computed: {
    ...mapState(['req']),
    hasMetadata: function () {
      return (this.req.metadata !== undefined && this.req.metadata !== null)
    }
  },
  data: function () {
    return {
      metadata: null,
      metalang: null,
      content: null
    }
  },
  created () {
    window.addEventListener('keydown', this.keyEvent)
    document.getElementById('save-button').addEventListener('click', this.save)
  },
  beforeDestroy () {
    window.removeEventListener('keydown', this.keyEvent)
    document.getElementById('save-button').removeEventListener('click', this.save)
  },
  mounted: function () {
    if (this.req.content === undefined || this.req.content === null) {
      this.req.content = ''
    }
    // Set up the main content editor.
    this.content = CodeMirror(document.getElementById('editor'), {
      value: this.req.content,
      lineNumbers: (this.req.language !== 'markdown'),
      viewportMargin: 500,
      autofocus: true,
      mode: this.req.language,
      theme: (this.req.language === 'markdown') ? 'markdown' : 'ttcn',
      lineWrapping: (this.req.language === 'markdown')
    })
    CodeMirror.autoLoadMode(this.content, this.req.language)
    // Prevent of going on if there is no metadata.
    if (!this.hasMetadata) {
      return
    }
    this.parseMetadata()
    // Set up metadata editor.
    this.metadata = CodeMirror(document.getElementById('metadata'), {
      value: this.req.metadata,
      viewportMargin: Infinity,
      lineWrapping: true,
      theme: 'markdown',
      mode: this.metalang
    })
    CodeMirror.autoLoadMode(this.metadata, this.metalang)
  },
  methods: {
    // Saves the content when the user presses CTRL-S.
    keyEvent (event) {
      if (!event.ctrlKey && !event.metaKey) {
        return
      }
      if (String.fromCharCode(event.which).toLowerCase() !== 's') {
        return
      }
      event.preventDefault()
      this.save()
    },
    // Parses the metadata and gets the language in which
    // it is written.
    parseMetadata () {
      if (this.req.metadata.startsWith('{')) {
        this.metalang = 'json'
      }
      if (this.req.metadata.startsWith('---')) {
        this.metalang = 'yaml'
      }
      if (this.req.metadata.startsWith('+++')) {
        this.metalang = 'toml'
      }
    },
    // Saves the file.
    save () {
      buttons.loading('save')
      let content = this.content.getValue()
      if (this.hasMetadata) {
        content = this.metadata.getValue() + '\n\n' + content
      }
      api.put(this.$route.path, content)
        .then(() => {
          buttons.done('save')
        })
        .catch(error => {
          buttons.done('save')
          this.$store.commit('showError', error)
        })
    }
  }
 }
 </script>
 <style>
 </style>
--- a/assets/src/components/Files.vue
+++ b/assets/src/components/Files.vue
@ -0,0 +1,233 @@
 <template>
  <div>
    <div id="breadcrumbs">
      <router-link to="/files/">
        <i class="material-icons">home</i>
      </router-link>
      <span v-for="link in breadcrumbs" :key="link.name">
        <span class="chevron"><i class="material-icons">keyboard_arrow_right</i></span>
        <router-link :to="link.url">{{ link.name }}</router-link>
      </span>
    </div>
    <div v-if="error">
      <not-found v-if="error === 404"></not-found>
      <forbidden v-else-if="error === 403"></forbidden>
      <internal-error v-else></internal-error>
    </div>
    <editor v-else-if="isEditor"></editor>
    <listing :class="{ multiple }" v-else-if="isListing"></listing>
    <preview v-else-if="isPreview"></preview>
    <div v-else>
      <h2 class="message">
        <span>Loading...</span>
      </h2>
    </div>
  </div>
 </template>
 <script>
 import Forbidden from './errors/403'
 import NotFound from './errors/404'
 import InternalError from './errors/500'
 import Preview from './Preview'
 import Listing from './Listing'
 import Editor from './Editor'
 import api from '@/utils/api'
 import { mapGetters, mapState, mapMutations } from 'vuex'
 export default {
  name: 'files',
  components: {
    Forbidden,
    NotFound,
    InternalError,
    Preview,
    Listing,
    Editor
  },
  computed: {
    ...mapGetters([
      'selectedCount'
    ]),
    ...mapState([
      'req',
      'user',
      'reload',
      'multiple',
      'loading'
    ]),
    isListing () {
      return this.req.kind === 'listing' && !this.loading
    },
    isPreview () {
      return this.req.kind === 'preview' && !this.loading
    },
    isEditor () {
      return this.req.kind === 'editor' && !this.loading
    },
    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++) {
        if (i === 0) {
          breadcrumbs.push({ name: decodeURIComponent(parts[i]), url: '/' + parts[i] + '/' })
        } else {
          breadcrumbs.push({ name: decodeURIComponent(parts[i]), url: breadcrumbs[i - 1].url + parts[i] + '/' })
        }
      }
      breadcrumbs.shift()
      if (breadcrumbs.length > 3) {
        while (breadcrumbs.length !== 4) {
          breadcrumbs.shift()
        }
        breadcrumbs[0].name = '...'
      }
      return breadcrumbs
    }
  },
  data: function () {
    return {
      error: null
    }
  },
  created () {
    this.fetchData()
  },
  watch: {
    '$route': 'fetchData',
    'reload': function () {
      this.fetchData()
    }
  },
  mounted () {
    window.addEventListener('keydown', this.keyEvent)
    window.addEventListener('scroll', event => {
      if (this.req.kind !== 'listing' || this.$store.state.req.display === 'mosaic') return
      let top = 112 - window.scrollY
      if (top < 64) {
        top = 64
      }
      document.querySelector('#listing.list .item.header').style.top = top + 'px'
    })
  },
  beforeDestroy () {
    window.removeEventListener('keydown', this.keyEvent)
  },
  methods: {
    ...mapMutations([ 'setLoading' ]),
    fetchData () {
      // Reset view information.
      this.$store.commit('setReload', false)
      this.$store.commit('resetSelected')
      this.$store.commit('multiple', false)
      this.$store.commit('closeHovers')
      // Set loading to true and reset the error.
      this.setLoading(true)
      this.error = null
      let url = this.$route.path
      if (url === '') url = '/'
      if (url[0] !== '/') url = '/' + url
      api.fetch(url)
      .then((req) => {
        if (!url.endsWith('/') && req.url.endsWith('/')) {
          window.history.replaceState(window.history.state, document.title, window.location.pathname + '/')
        }
        this.$store.commit('updateRequest', req)
        document.title = req.name
        this.setLoading(false)
      })
      .catch(error => {
        this.setLoading(false)
        if (typeof error === 'object') {
          this.error = error.status
          return
        }
        this.error = error
      })
    },
    keyEvent (event) {
      // Esc!
      if (event.keyCode === 27) {
        this.$store.commit('closeHovers')
        // If we're on a listing, unselect all
        // files and folders.
        if (this.req.kind === 'listing') {
          this.$store.commit('resetSelected')
        }
      }
      // Del!
      if (event.keyCode === 46) {
        if (this.req.kind === 'editor' ||
          this.$route.name !== 'Files' ||
          this.loading ||
          !this.user.allowEdit ||
          (this.req.kind === 'listing' && this.selectedCount === 0)) return
        this.$store.commit('showHover', 'delete')
      }
      // F1!
      if (event.keyCode === 112) {
        event.preventDefault()
        this.$store.commit('showHover', 'help')
      }
      // F2!
      if (event.keyCode === 113) {
        if (this.req.kind === 'editor' ||
          this.$route.name !== 'Files' ||
          this.loading ||
          !this.user.allowEdit ||
          (this.req.kind === 'listing' && this.selectedCount === 0) ||
          (this.req.kind === 'listing' && this.selectedCount > 1)) return
        this.$store.commit('showHover', 'rename')
      }
      // CTRL + S
      if (event.ctrlKey || event.metaKey) {
        if (String.fromCharCode(event.which).toLowerCase() === 's') {
          event.preventDefault()
          if (this.req.kind !== 'editor') {
            document.getElementById('download-button').click()
            return
          }
        }
      }
    },
    openSidebar () {
      this.$store.commit('showHover', 'sidebar')
    },
    openSearch () {
      this.$store.commit('showHover', 'search')
    }
  }
 }
 </script>
--- a/assets/src/components/GlobalSettings.vue
+++ b/assets/src/components/GlobalSettings.vue
@ -0,0 +1,179 @@
 <template>
  <div class="dashboard">
    <h1>Global Settings</h1>
    <ul>
      <li><router-link to="/settings/profile">Go to Profile Settings</router-link></li>
      <li><router-link to="/users">Go to User Management</router-link></li>
    </ul>
    <form @submit="savePlugin" v-if="plugins.length > 0">
      <template v-for="plugin in plugins">
        <h2>{{ capitalize(plugin.name) }}</h2>
        <p v-for="field in plugin.fields" :key="field.name">
          <label v-if="field.type !== 'checkbox'">{{ field.name }}</label>
          <input v-if="field.type === 'text'" type="text" v-model.trim="field.value">
          <input v-else-if="field.type === 'checkbox'" type="checkbox" v-model.trim="field.value">
          <template v-if="field.type === 'checkbox'">{{ capitalize(field.name, 'caps') }}</template>
        </p>
      </template>
      <p><input type="submit" value="Save"></p>
    </form>
    <form @submit="saveCommands">
      <h2>Commands</h2>
      <p class="small">Here you can set commands that are executed in the named events. You write one command
        per line. If the event is related to files, such as before and after saving, the environment variable
        <code>file</code> will be available with the path of the file.</p>
      <template v-for="command in commands">
        <h3>{{ capitalize(command.name) }}</h3>
        <textarea v-model.trim="command.value"></textarea>
      </template>
      <p><input type="submit" value="Save"></p>
    </form>
  </div>
 </template>
 <script>
 import { mapState, mapMutations } from 'vuex'
 import api from '@/utils/api'
 export default {
  name: 'settings',
  data: function () {
    return {
      commands: [],
      plugins: []
    }
  },
  computed: {
    ...mapState([ 'user' ])
  },
  created () {
    api.getCommands()
      .then(commands => {
        for (let key in commands) {
          this.commands.push({
            name: key,
            value: commands[key].join('\n')
          })
        }
      })
      .catch(error => { this.showError(error) })
    api.getPlugins()
      .then(plugins => {
        console.log(plugins)
        let plugin = {}
        for (let key in plugins) {
          plugin.name = key
          plugin.fields = []
          for (let field in plugins[key]) {
            let value = plugins[key][field]
            if (Array.isArray(value)) {
              plugin.fields.push({
                name: field,
                type: 'text',
                original: 'array',
                value: value.join(' ')
              })
              continue
            }
            switch (typeof value) {
              case 'boolean':
                plugin.fields.push({
                  name: field,
                  type: 'checkbox',
                  original: 'boolean',
                  value: value
                })
                break
              default:
                plugin.fields.push({
                  name: field,
                  type: 'text',
                  original: 'text',
                  value: value
                })
            }
          }
          this.plugins.push(plugin)
        }
      })
      .catch(error => { this.showError(error) })
  },
  methods: {
    ...mapMutations([ 'showSuccess', 'showError' ]),
    capitalize (name, where = '_') {
      if (where === 'caps') where = /(?=[A-Z])/
      let splitted = name.split(where)
      name = ''
      for (let i = 0; i < splitted.length; i++) {
        name += splitted[i].charAt(0).toUpperCase() + splitted[i].slice(1) + ' '
      }
      return name.slice(0, -1)
    },
    saveCommands (event) {
      event.preventDefault()
      let commands = {}
      for (let command of this.commands) {
        let value = command.value.split('\n')
        if (value.length === 1 && value[0] === '') {
          value = []
        }
        commands[command.name] = value
      }
      api.updateCommands(commands)
        .then(() => { this.showSuccess('Commands updated!') })
        .catch(error => { this.showError(error) })
    },
    savePlugin (event) {
      event.preventDefault()
      let plugins = {}
      for (let plugin of this.plugins) {
        let p = {}
        for (let field of plugin.fields) {
          p[field.name] = field.value
          if (field.original === 'array') {
            let val = field.value.split(' ')
            if (val[0] === '') {
              val.shift()
            }
            p[field.name] = val
          }
        }
        plugins[plugin.name] = p
      }
      console.log(plugins)
      api.updatePlugins(plugins)
        .then(() => { this.showSuccess('Plugins settings updated!') })
        .catch(error => { this.showError(error) })
    }
  }
 }
 </script>
--- a/assets/src/components/Header.vue
+++ b/assets/src/components/Header.vue
@ -0,0 +1,229 @@
 <template>
  <header>
    <div>
      <button @click="openSidebar" aria-label="Toggle sidebar" title="Toggle sidebar" class="action">
        <i class="material-icons">menu</i>
      </button>
      <img src="../assets/logo.svg" alt="File Manager">
      <search></search>
    </div>
    <div>
      <button @click="openSearch" aria-label="Search" title="Search" class="search-button action">
        <i class="material-icons">search</i>
      </button>
      <button v-show="showSaveButton" aria-label="Save" class="action" id="save-button">
        <i class="material-icons" title="Save">save</i>
      </button>
      <div v-for="plugin in plugins" :key="plugin.name">
        <button class="action"
          v-for="action in plugin.header.visible"
          v-if="action.if(pluginData, $route)"
          @click="action.click($event, pluginData, $route)"
          :aria-label="action.name"
          :id="action.id"
          :title="action.name"
          :key="action.name">
          <i class="material-icons">{{ action.icon }}</i>
          <span>{{ action.name }}</span>
        </button>
      </div>
      <button @click="openMore" id="more" aria-label="More" title="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 && req.kind === 'listing'">
        <span v-if="selectedCount > 0">{{ selectedCount }} selected</span>
        <rename-button v-show="showRenameButton"></rename-button>
        <copy-button v-show="showMoveButton"></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">
          <rename-button v-show="showRenameButton"></rename-button>
          <copy-button v-show="showMoveButton"></copy-button>
          <move-button v-show="showMoveButton"></move-button>
          <delete-button v-show="showDeleteButton"></delete-button>
        </div>
        <div v-for="plugin in plugins" :key="plugin.name">
          <button class="action"
            v-for="action in plugin.header.hidden"
            v-if="action.if(pluginData, $route)"
            @click="action.click($event, pluginData, $route)"
            :id="action.id"
            :aria-label="action.name"
            :title="action.name"
            :key="action.name">
            <i class="material-icons">{{ action.icon }}</i>
            <span>{{ action.name }}</span>
          </button>
        </div>
        <switch-button v-show="showSwitchButton"></switch-button>
        <download-button v-show="showCommonButton"></download-button>
        <upload-button v-show="showUpload"></upload-button>
        <info-button v-show="showCommonButton"></info-button>
        <button v-show="showSelectButton" @click="openSelect" aria-label="Select multiple" class="action">
          <i class="material-icons">check_circle</i>
          <span>Select</span>
        </button>
      </div>
      <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 {mapGetters, mapState} from 'vuex'
 import api from '@/utils/api'
 import buttons from '@/utils/buttons'
 export default {
  name: 'main',
  components: {
    Search,
    InfoButton,
    DeleteButton,
    RenameButton,
    DownloadButton,
    CopyButton,
    UploadButton,
    SwitchButton,
    MoveButton
  },
  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'
    ]),
    ...mapState([
      'req',
      'user',
      'loading',
      'reload',
      'multiple',
      'plugins'
    ]),
    isMobile () {
      return this.width <= 736
    },
    isListing () {
      return this.req.kind === 'listing'
    },
    showSelectButton () {
      return this.req.kind === 'listing' && !this.loading && this.$route.name === 'Files'
    },
    showSaveButton () {
      return (this.req.kind === 'editor' && !this.loading)
    },
    showSwitchButton () {
      return this.req.kind === 'listing' && this.$route.name === 'Files' && !this.loading
    },
    showCommonButton () {
      return !(this.$route.name !== 'Files' || this.loading)
    },
    showUpload () {
      if (this.$route.name !== 'Files' || this.loading) return false
      if (this.req.kind === 'editor') return false
      return this.user.allowNew
    },
    showDeleteButton () {
      if (this.$route.name !== 'Files' || this.loading) return false
      if (this.req.kind === 'listing') {
        if (this.selectedCount === 0) {
          return false
        }
        return this.user.allowEdit
      }
      return this.user.allowEdit
    },
    showRenameButton () {
      if (this.$route.name !== 'Files' || this.loading) return false
      if (this.req.kind === 'listing') {
        if (this.selectedCount === 1) {
          return this.user.allowEdit
        }
        return false
      }
      return this.user.allowEdit
    },
    showMoveButton () {
      if (this.$route.name !== 'Files' || this.loading) return false
      if (this.req.kind !== 'listing') {
        return false
      }
      if (this.selectedCount > 0) {
        return this.user.allowEdit
      }
      return false
    },
    showMore () {
      if (this.$route.name !== 'Files' || this.loading) return false
      return (this.$store.state.show === 'more')
    },
    showOverlay () {
      return (this.$store.state.show === 'more')
    }
  },
  methods: {
    openSidebar () {
      this.$store.commit('showHover', 'sidebar')
    },
    openMore () {
      this.$store.commit('showHover', 'more')
    },
    openSearch () {
      this.$store.commit('showHover', 'search')
    },
    openSelect () {
      this.$store.commit('multiple', true)
      this.resetPrompts()
    },
    resetPrompts () {
      this.$store.commit('closeHovers')
    }
  }
 }
 </script>
--- a/assets/src/components/Listing.vue
+++ b/assets/src/components/Listing.vue
@ -0,0 +1,292 @@
 <template>
  <div v-if="(req.numDirs + req.numFiles) == 0">
    <h2 class="message">
      <i class="material-icons">sentiment_dissatisfied</i>
      <span>It feels lonely here...</span>
    </h2>
    <input style="display:none" type="file" id="upload-input" @change="uploadInput($event)" value="Upload" multiple>
  </div>
  <div v-else id="listing"
    :class="req.display"
    @drop="drop"
    @dragenter="dragEnter"
    @dragend="dragEnd">
    <div>
      <div class="item header">
        <div></div>
        <div>
          <p :class="{ active: nameSorted }" class="name" @click="sort('name')">
            <span>Name</span>
            <i class="material-icons">{{ nameIcon }}</i>
          </p>
          <p :class="{ active: !nameSorted }" class="size" @click="sort('size')">
            <span>Size</span>
            <i class="material-icons">{{ sizeIcon }}</i>
          </p>
          <p class="modified">Last modified</p>
        </div>
      </div>
    </div>
    <h2 v-if="req.numDirs > 0">Folders</h2>
    <div v-if="req.numDirs > 0">
      <item v-for="(item, index) in req.items"
        v-if="item.isDir"
        :key="base64(item.name)"
        v-bind:index="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">Files</h2>
    <div v-if="req.numFiles > 0">
      <item v-for="(item, index) in req.items"
        v-if="!item.isDir"
        :key="base64(item.name)"
        v-bind:index="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)" value="Upload" multiple>
    <div v-show="$store.state.multiple" :class="{ active: $store.state.multiple }" id="multiple-selection">
    <p>Multiple selection enabled</p>
      <div @click="$store.commit('multiple', false)" tabindex="0" role="button" title="Clear" aria-label="Clear" class="action">
        <i class="material-icons" title="Clear">clear</i>
      </div>
    </div>
  </div>
 </template>
 <script>
 import {mapState} from 'vuex'
 import Item from './ListingItem'
 import css from '@/utils/css'
 import api from '@/utils/api'
 import buttons from '@/utils/buttons'
 export default {
  name: 'listing',
  components: { Item },
  computed: {
    ...mapState(['req', 'selected']),
    nameSorted () {
      return (this.req.sort === 'name')
    },
    ascOrdered () {
      return (this.req.order === 'asc')
    },
    nameIcon () {
      if (this.nameSorted && !this.ascOrdered) {
        return 'arrow_upward'
      }
      return 'arrow_downward'
    },
    sizeIcon () {
      if (!this.nameSorted && 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)
    document.addEventListener('dragover', this.preventDefault)
    document.addEventListener('drop', this.drop)
  },
  beforeDestroy () {
    // Remove event listeners before destroying this page.
    window.removeEventListener('keydown', this.keyEvent)
    window.removeEventListener('resize', this.resizeEvent)
    document.removeEventListener('dragover', this.preventDefault)
    document.removeEventListener('drop', this.drop)
  },
  methods: {
    base64: function (name) {
      return window.btoa(unescape(encodeURIComponent(name)))
    },
    keyEvent (event) {
      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
      }
    },
    preventDefault (event) {
      // Wrapper around prevent default.
      event.preventDefault()
    },
    copyCut (event, key) {
      event.preventDefault()
      let items = []
      for (let i of this.selected) {
        items.push({
          from: this.req.items[i].url,
          name: encodeURIComponent(this.req.items[i].name)
        })
      }
      this.$store.commit('updateClipboard', {
        key: key,
        items: items
      })
    },
    paste (event) {
      event.preventDefault()
      let items = []
      for (let item of this.$store.state.clipboard.items) {
        items.push({
          from: item.from,
          to: this.$route.path + item.name
        })
      }
      if (this.$store.state.clipboard.key === 'x') {
        api.move(items).then(() => {
          this.$store.commit('setReload', true)
        }).catch(error => {
          this.$store.commit('showError', error)
        })
        return
      }
      api.copy(items).then(() => {
        this.$store.commit('setReload', true)
      }).catch(error => {
        this.$store.commit('showError', error)
      })
    },
    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)`
    },
    dragEnter: function (event) {
      // 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
      })
    },
    dragEnd: function (event) {
      this.resetOpacity()
    },
    drop: function (event) {
      event.preventDefault()
      let dt = event.dataTransfer
      let files = dt.files
      let el = event.target
      for (let i = 0; i < 5; i++) {
        if (el !== null && !el.classList.contains('item')) {
          el = el.parentElement
        }
      }
      if (files.length > 0) {
        if (el !== null && el.classList.contains('item') && el.dataset.dir === 'true') {
          this.handleFiles(files, el.querySelector('.name').innerHTML + '/')
          return
        }
        this.handleFiles(files, '')
      } else {
        this.resetOpacity()
      }
    },
    uploadInput: function (event) {
      this.handleFiles(event.currentTarget.files, '')
    },
    resetOpacity: function () {
      let items = document.getElementsByClassName('item')
      Array.from(items).forEach(file => {
        file.style.opacity = 1
      })
    },
    handleFiles: function (files, base) {
      this.resetOpacity()
      buttons.loading('upload')
      let promises = []
      for (let file of files) {
        promises.push(api.post(this.$route.path + base + file.name, file))
      }
      Promise.all(promises)
        .then(() => {
          buttons.done('upload')
          this.$store.commit('setReload', true)
        })
        .catch(error => {
          buttons.done('upload')
          this.$store.commit('showError', error)
        })
      return false
    },
    sort (sort) {
      let order = 'desc'
      if (sort === 'name') {
        if (this.nameIcon === 'arrow_upward') {
          order = 'asc'
        }
      } else {
        if (this.sizeIcon === 'arrow_upward') {
          order = 'asc'
        }
      }
      let path = this.$store.state.baseURL
      if (path === '') path = '/'
      document.cookie = `sort=${sort}; max-age=31536000; path=${path}`
      document.cookie = `order=${order}; max-age=31536000; path=${path}`
      this.$store.commit('setReload', true)
    }
  }
 }
 </script>
--- a/assets/src/components/ListingItem.vue
+++ b/assets/src/components/ListingItem.vue
@ -0,0 +1,139 @@
 <template>
  <div class="item"
  draggable="true"
  @dragstart="dragStart"
  @dragover="dragOver"
  @drop="drop"
  @click="click"
  @dblclick="open"
  @touchstart="touchstart"
  :aria-selected="isSelected">
    <div>
      <i class="material-icons">{{ icon }}</i>
    </div>
    <div>
      <p class="name">{{ name }}</p>
      <p v-if="isDir" class="size" data-order="-1">&mdash;</p>
      <p v-else class="size" :data-order="humanSize()">{{ humanSize() }}</p>
      <p class="modified">
        <time :datetime="modified">{{ humanTime() }}</time>
      </p>
    </div>
  </div>
 </template>
 <script>
 import { mapMutations, mapGetters, mapState } from 'vuex'
 import filesize from 'filesize'
 import moment from 'moment'
 import api from '@/utils/api'
 export default {
  name: 'item',
  data: function () {
    return {
      touches: 0
    }
  },
  props: ['name', 'isDir', 'url', 'type', 'size', 'modified', 'index'],
  computed: {
    ...mapState(['selected', 'req']),
    ...mapGetters(['selectedCount']),
    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'
    }
  },
  methods: {
    ...mapMutations(['addSelected', 'removeSelected', 'resetSelected']),
    humanSize: function () {
      return filesize(this.size)
    },
    humanTime: function () {
      return moment(this.modified).fromNow()
    },
    dragStart: function (event) {
      if (this.selectedCount === 0) {
        this.addSelected(this.index)
        return
      }
      if (!this.isSelected) {
        this.resetSelected()
        this.addSelected(this.index)
      }
    },
    dragOver: function (event) {
      if (!this.isDir) return
      event.preventDefault()
      let el = event.target
      for (let i = 0; i < 5; i++) {
        if (!el.classList.contains('item')) {
          el = el.parentElement
        }
      }
      el.style.opacity = 1
    },
    drop: function (event) {
      if (!this.isDir) return
      event.preventDefault()
      if (this.selectedCount === 0) return
      let items = []
      for (let i of this.selected) {
        items.push({
          from: this.req.items[i].url,
          to: this.url + encodeURIComponent(this.req.items[i].name)
        })
      }
      api.move(items)
        .then(() => {
          this.$store.commit('setReload', true)
        })
        .catch(error => {
          this.$store.commit('showError', error)
        })
    },
    click: function (event) {
      if (this.selectedCount !== 0) event.preventDefault()
      if (this.$store.state.selected.indexOf(this.index) === -1) {
        if (!event.ctrlKey && !this.$store.state.multiple) this.resetSelected()
        this.addSelected(this.index)
      } else {
        this.removeSelected(this.index)
      }
      return false
    },
    touchstart (event) {
      setTimeout(() => {
        this.touches = 0
      }, 300)
      this.touches++
      if (this.touches > 1) {
        this.open()
      }
    },
    open: function (event) {
      this.$router.push({path: this.url})
    }
  }
 }
 </script>
--- a/assets/src/components/Login.vue
+++ b/assets/src/components/Login.vue
@ -0,0 +1,118 @@
 <template>
  <div id="login">
    <form @submit="submit">
      <img src="../assets/logo.svg" alt="File Manager">
      <h1>File Manager</h1>
      <div v-if="wrong" class="wrong">Wrong credentials</div>
      <input type="text" v-model="username" placeholder="Username">
      <input type="password" v-model="password" placeholder="Password">
      <input type="submit" value="Login">
    </form>
  </div>
 </template>
 <script>
 import auth from '@/utils/auth'
 export default {
  name: 'login',
  data: function () {
    return {
      wrong: false,
      username: '',
      password: ''
    }
  },
  methods: {
    submit: function (event) {
      event.preventDefault()
      event.stopPropagation()
      let redirect = this.$route.query.redirect
      if (redirect === '' || redirect === undefined || redirect === null) {
        redirect = '/files/'
      }
      auth.login(this.username, this.password)
        .then(() => {
          this.$router.push({ path: redirect })
        })
        .catch(() => {
          this.wrong = true
        })
    }
  }
 }
 </script>
 <style>
 #login {
  background: #fff;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
 }
 #login img {
  width: 4em;
  height: 4em;
  margin: 0 auto;
  display: block;
 }
 #login h1 {
  text-align: center;
  font-size: 2.5em;
  margin: .4em 0 .67em;
 }
 #login form {
  position: fixed;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  max-width: 16em;
  width: 90%;
 }
 #login input {
  width: 100%;
  width: 100%;
  margin: .5em 0 0;
 }
 #login .wrong {
  background: #F44336;
  color: #fff;
  padding: .5em;
  text-align: center;
  animation: .2s opac forwards;
 }
@keyframes opac {
  0% {
    opacity: 0;
  }
  100% {
    opacity: 1;
  }
 }
 #login input[type="text"],
 #login input[type="password"] {
  padding: .5em 1em;
  border: 1px solid #e9e9e9;
  transition: .2s ease border;
  color: #333;
 }
 #login input[type="text"]:focus,
 #login input[type="password"]:focus,
 #login input[type="text"]:hover,
 #login input[type="password"]:hover {
  border-color: #9f9f9f;
 }
 </style>
--- a/assets/src/components/Main.vue
+++ b/assets/src/components/Main.vue
@ -0,0 +1,53 @@
 <template>
  <div>
    <site-header></site-header>
    <sidebar></sidebar>
    <main>
      <router-view v-on:css-updated="updateCSS"></router-view>
    </main>
    <prompts></prompts>
  </div>
 </template>
 <script>
 import Search from './Search'
 import Sidebar from './Sidebar'
 import Prompts from './prompts/Prompts'
 import SiteHeader from './Header'
 export default {
  name: 'main',
  components: {
    Search,
    Sidebar,
    SiteHeader,
    Prompts
  },
  watch: {
    '$route': function () {
      this.$store.commit('resetSelected')
      this.$store.commit('multiple', false)
      if (this.$store.state.show !== 'success') this.$store.commit('closeHovers')
    }
  },
  mounted () {
    this.updateCSS()
  },
  methods: {
    updateCSS () {
      let css = this.$store.state.user.css
      let style = document.querySelector('style[title="user-css"]')
      if (style !== undefined && style !== null) {
        style.parentElement.removeChild(style)
      }
      style = document.createElement('style')
      style.title = 'user-css'
      style.type = 'text/css'
      style.appendChild(document.createTextNode(css))
      document.head.appendChild(style)
    }
  }
 }
 </script>
--- a/assets/src/components/Preview.vue
+++ b/assets/src/components/Preview.vue
@ -0,0 +1,135 @@
 <template>
  <div id="previewer">
    <div class="bar">
      <button @click="back" class="action" aria-label="Close Preview" id="close">
        <i class="material-icons">close</i>
      </button>
      <rename-button v-if="allowEdit()"></rename-button>
      <delete-button v-if="allowEdit()"></delete-button>
      <download-button></download-button>
      <info-button></info-button>
    </div>
    <button class="action" @click="prev" v-show="hasPrevious"><i class="material-icons">chevron_left</i></button>
    <button class="action" @click="next" v-show="hasNext"><i class="material-icons">chevron_right</i></button>
    <div class="preview">
      <img v-if="req.type == 'image'" :src="raw()">
      <audio v-else-if="req.type == 'audio'" :src="raw()" controls></audio>
      <video v-else-if="req.type == 'video'" :src="raw()" controls>
        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 == '.pdf'" class="pdf" :data="raw()"></object>
      <a v-else-if="req.type == 'blob'" :href="download()">
        <h2 class="message">Download <i class="material-icons">file_download</i></h2>
      </a>
      <pre v-else >{{ req.content }}</pre>
    </div>
  </div>
 </template>
 <script>
 import { mapState } from 'vuex'
 import url from '@/utils/url'
 import api from '@/utils/api'
 import InfoButton from './buttons/Info'
 import DeleteButton from './buttons/Delete'
 import RenameButton from './buttons/Rename'
 import DownloadButton from './buttons/Download'
 export default {
  name: 'preview',
  components: {
    InfoButton,
    DeleteButton,
    RenameButton,
    DownloadButton
  },
  data: function () {
    return {
      previousLink: '',
      nextLink: '',
      listing: null
    }
  },
  computed: {
    ...mapState(['req', 'oldReq']),
    hasPrevious () {
      return (this.previousLink !== '')
    },
    hasNext () {
      return (this.nextLink !== '')
    }
  },
  mounted () {
    window.addEventListener('keyup', this.key)
    api.fetch(url.removeLastDir(this.$route.path))
      .then(req => {
        this.listing = req
        this.updateLinks()
      })
      .catch(error => { console.log(error) })
  },
  beforeDestroy () {
    window.removeEventListener('keyup', this.key)
  },
  methods: {
    download () {
      let url = `${this.$store.state.baseURL}/api/download`
      url += this.req.url.slice(6)
      return url
    },
    raw () {
      return `${this.download()}?&inline=true`
    },
    back (event) {
      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) {
      event.preventDefault()
      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()
      }
    },
    updateLinks () {
      let pos = null
      for (let i = 0; i < this.listing.items.length; i++) {
        if (this.listing.items[i].name === this.req.name) {
          pos = i
          break
        }
      }
      if (pos === null) {
        return
      }
      if (pos !== 0) {
        this.previousLink = this.listing.items[pos - 1].url
      }
      if (pos !== this.listing.items.length - 1) {
        this.nextLink = this.listing.items[pos + 1].url
      }
    },
    allowEdit (event) {
      return this.$store.state.user.allowEdit
    }
  }
 }
 </script>
--- a/assets/src/components/ProfileSettings.vue
+++ b/assets/src/components/ProfileSettings.vue
@ -0,0 +1,82 @@
 <template>
  <div class="dashboard">
    <h1>Profile Settings</h1>
    <ul v-if="user.admin">
      <li><router-link to="/settings/global">Go to Global Settings</router-link></li>
    </ul>
    <form @submit="changePassword">
      <h2>Change Password</h2>
      <p><input :class="passwordClass" type="password" placeholder="Your new password" v-model="password" name="password"></p>
      <p><input :class="passwordClass" type="password" placeholder="Confirm your new password" v-model="passwordConf" name="password"></p>
      <p><input type="submit" value="Change Password"></p>
    </form>
    <form @submit="updateCSS">
      <h2>Custom Stylesheet</h2>
      <textarea v-model="css" name="css"></textarea>
      <p><input type="submit" value="Update"></p>
    </form>
  </div>
 </template>
 <script>
 import { mapState, mapMutations } from 'vuex'
 import api from '@/utils/api'
 export default {
  name: 'settings',
  data: function () {
    return {
      password: '',
      passwordConf: '',
      css: ''
    }
  },
  computed: {
    ...mapState([ 'user' ]),
    passwordClass () {
      if (this.password === '' && this.passwordConf === '') {
        return ''
      }
      if (this.password === this.passwordConf) {
        return 'green'
      }
      return 'red'
    }
  },
  created () {
    this.css = this.user.css
  },
  methods: {
    ...mapMutations([ 'showSuccess' ]),
    changePassword (event) {
      event.preventDefault()
      if (this.password !== this.passwordConf) {
        return
      }
      api.updatePassword(this.password).then(() => {
        this.showSuccess('Password updated!')
      }).catch(e => {
        this.$store.commit('showError', e)
      })
    },
    updateCSS (event) {
      event.preventDefault()
      api.updateCSS(this.css).then(() => {
        this.$store.commit('setUserCSS', this.css)
        this.$emit('css-updated')
        this.showSuccess('Styles updated!')
      }).catch(e => {
        this.$store.commit('showError', e)
      })
    }
  }
 }
 </script>
--- a/assets/src/components/Search.vue
+++ b/assets/src/components/Search.vue
@ -0,0 +1,201 @@
 <template>
  <div id="search" @click="open" v-bind:class="{ active , ongoing }">
    <div id="input">
      <button v-if="active" class="action" @click="close">
        <i class="material-icons">arrow_back</i>
      </button>
      <i v-else class="material-icons">search</i>
      <input type="text"
        @keyup="keyup"
        @keyup.enter="submit"
        ref="input"
        :autofocus="active"
        v-model.trim="value"
        aria-label="Write here to search"
        :placeholder="placeholder">
    </div>
    <div id="result">
      <div>
        <span v-if="search.length === 0 && commands.length === 0">{{ text }}</span>
        <ul v-else-if="search.length > 0">
          <li v-for="s in search">
            <router-link @click.native="close" :to="'./' + s">./{{ s }}</router-link>
          </li>
        </ul>
        <ul v-else-if="commands.length > 0">
          <li v-for="c in commands">{{ c }}</li>
        </ul>
      </div>
      <p><i class="material-icons spin">autorenew</i></p>
    </div>
  </div>
 </template>
 <script>
 import { mapState } from 'vuex'
 import url from '@/utils/url'
 import api from '@/utils/api'
 export default {
  name: 'search',
  data: function () {
    return {
      value: '',
      active: false,
      ongoing: false,
      scrollable: null,
      search: [],
      commands: [],
      reload: false
    }
  },
  watch: {
    show (val, old) {
      this.active = (val === 'search')
      // If the hover was search and now it's something else
      // we should blur the input.
      if (old === 'search' && val !== 'search') {
        if (this.reload) {
          this.$store.commit('setReload', true)
        }
        this.$refs.input.blur()
      }
      // If we are starting to show the search box, we should
      // focus the input.
      if (val === 'search') {
        this.reload = false
        this.$refs.input.focus()
      }
    }
  },
  computed: {
    ...mapState(['user', 'show']),
    // Placeholder value.
    placeholder: function () {
      if (this.user.allowCommands && this.user.commands.length > 0) {
        return 'Search or execute a command...'
      }
      return 'Search...'
    },
    // The text that is shown on the results' box while
    // there is no search result or command output to show.
    text: function () {
      if (this.ongoing) {
        return ''
      }
      if (this.value.length === 0) {
        if (this.user.allowCommands && this.user.commands.length > 0) {
          return `Search or use one of your supported commands: ${this.user.commands.join(', ')}.`
        }
        return 'Type and press enter to search.'
      }
      if (!this.supported() || !this.user.allowCommands) {
        return 'Press enter to search.'
      } else {
        return 'Press enter to execute.'
      }
    }
  },
  mounted: function () {
    // Gets the result div which will be scrollable.
    this.scrollable = document.querySelector('#search #result')
    // Adds the keydown event on window for the ESC key, so
    // when it's pressed, it closes the search window.
    window.addEventListener('keydown', (event) => {
      if (event.keyCode === 27) {
        this.$store.commit('closeHovers')
      }
    })
  },
  methods: {
    // Sets the search to active.
    open: function (event) {
      this.$store.commit('showHover', 'search')
    },
    // Closes the search and prevents the event
    // of propagating so it doesn't trigger the
    // click event on #search.
    close: function (event) {
      event.stopPropagation()
      event.preventDefault()
      this.$store.commit('closeHovers')
    },
    // Checks if the current input is a supported command.
    supported: function () {
      let pieces = this.value.split(' ')
      for (let i = 0; i < this.user.commands.length; i++) {
        if (pieces[0] === this.user.commands[i]) {
          return true
        }
      }
      return false
    },
    // When the user presses a key, if it is ESC
    // then it will close the search box. Otherwise,
    // it will set the search box to active and clean
    // the search results, as well as commands'.
    keyup: function (event) {
      if (event.keyCode === 27) {
        this.close(event)
        return
      }
      this.search.length = 0
      this.commands.length = 0
    },
    // Submits the input to the server and sets ongoing to true.
    submit: function (event) {
      this.ongoing = true
      let path = this.$route.path
      if (this.$store.state.req.kind !== 'listing') {
        path = url.removeLastDir(path) + '/'
      }
      // In case of being a command.
      if (this.supported() && this.user.allowCommands) {
        api.command(path, this.value,
          (event) => {
            this.commands.push(event.data)
            this.scrollable.scrollTop = this.scrollable.scrollHeight
          },
          (event) => {
            this.reload = true
            this.ongoing = false
            this.scrollable.scrollTop = this.scrollable.scrollHeight
          }
        )
        return
      }
      // In case of being a search.
      api.search(path, this.value,
        (event) => {
          let url = event.data
          if (url[0] === '/') url = url.substring(1)
          this.search.push(url)
          this.scrollable.scrollTop = this.scrollable.scrollHeight
        },
        (event) => {
          this.ongoing = false
          this.scrollable.scrollTop = this.scrollable.scrollHeight
        }
      )
    }
  }
 }
 </script>
--- a/assets/src/components/Sidebar.vue
+++ b/assets/src/components/Sidebar.vue
@ -0,0 +1,78 @@
 <template>
  <nav :class="{active}">
    <router-link class="action" to="/files/" aria-label="My Files" title="My Files">
      <i class="material-icons">folder</i>
      <span>My Files</span>
    </router-link>
    <div v-if="user.allowNew">
      <button @click="$store.commit('showHover', 'newDir')" aria-label="New directory" title="New directory" class="action">
        <i class="material-icons">create_new_folder</i>
        <span>New folder</span>
      </button>
      <button @click="$store.commit('showHover', 'newFile')" aria-label="New file" title="New file" class="action">
        <i class="material-icons">note_add</i>
        <span>New file</span>
      </button>
    </div>
    <div v-for="plugin in plugins" :key="plugin.name">
      <button v-for="action in plugin.sidebar" @click="action.click($event, pluginData, $route)" :aria-label="action.name" :title="action.name" :key="action.name" class="action">
        <i class="material-icons">{{ action.icon }}</i>
        <span>{{ action.name }}</span>
      </button>
    </div>
    <div>
      <router-link class="action" to="/settings" aria-label="Settings" title="Settings">
        <i class="material-icons">settings_applications</i>
        <span>Settings</span>
      </router-link>
      <button @click="logout" class="action" id="logout" aria-label="Log out" title="Logout">
        <i class="material-icons">exit_to_app</i>
        <span>Logout</span>
      </button>
    </div>
    <p class="credits">
      <span>Served with <a rel="noopener noreferrer" href="https://github.com/hacdias/filemanager">File Manager</a>.</span>
      <span v-for="plugin in plugins" :key="plugin.name" v-html="plugin.credits"><br></span>
      <span><a @click="help">Help</a></span>
    </p>
  </nav>
 </template>
 <script>
 import {mapState} from 'vuex'
 import auth from '@/utils/auth'
 import buttons from '@/utils/buttons'
 import api from '@/utils/api'
 export default {
  name: 'sidebar',
  data: function () {
    return {
      pluginData: {
        api,
        buttons,
        'store': this.$store,
        'router': this.$router
      }
    }
  },
  computed: {
    ...mapState(['user', 'plugins']),
    active () {
      return this.$store.state.show === 'sidebar'
    }
  },
  methods: {
    help: function () {
      this.$store.commit('showHover', 'help')
    },
    logout: auth.logout
  }
 }
 </script>
--- a/assets/src/components/User.vue
+++ b/assets/src/components/User.vue
@ -0,0 +1,275 @@
 <template>
  <div>
    <form @submit="save" class="dashboard">
      <h1 v-if="id === 0">New User</h1>
      <h1 v-else>User {{ username }}</h1>
      <p><label for="username">Username</label><input type="text" v-model="username" id="username"></p>
      <p><label for="password">Password</label><input type="password" :placeholder="passwordPlaceholder" v-model="password" id="password"></p>
      <p><label for="scope">Scope</label><input type="text" v-model="filesystem" id="scope"></p>
      <h2>Permissions</h2>
      <p class="small">You can set the user to be an administrator or choose the permissions individually.
        If you select "Administrator", all of the other options will be automatically checked.
        The management of users remains a privilege of an administrator.</p>
      <p><input type="checkbox" v-model="admin"> Administrator</p>
      <p><input type="checkbox" :disabled="admin" v-model="allowNew"> Create new files and directories</p>
      <p><input type="checkbox" :disabled="admin" v-model="allowEdit"> Edit, rename and delete files or directories.</p>
      <p><input type="checkbox" :disabled="admin" v-model="allowCommands"> Execute commands</p>
      <p v-for="(value, key) in permissions" :key="key">
        <input type="checkbox" :disabled="admin" v-model="permissions[key]"> {{ capitalize(key) }}
      </p>
      <h3>Commands</h3>
      <p class="small">A space separated list with the available commands for this user. Example: <i>git svn hg</i>.</p>
      <input type="text" v-model.trim="commands">
      <h2>Rules</h2>
      <p class="small">Here you can define a set of allow and disallow rules for this specific user. The blocked files won't
        show up in the listings and they won't be accessible to the user. We support regex and paths relative to
        the user's scope.</p>
      <p class="small">Each rule goes in one different line and must start with the keyword <code>allow</code> or <code>disallow</code>.
        Then you should write <code>regex</code> if you are using a regular expression and then the expression or the path.</p>
      <p class="small"><strong>Examples</strong></p>
      <ul class="small">
        <li><code>disallow regex \\/\\..+</code> - prevents the access to any dot file (such as .git, .gitignore) in every folder.</li>
        <li><code>disallow /Caddyfile</code> - blocks the access to the file named <i>Caddyfile</i> on the root of the scope</li>
      </ul>
      <textarea v-model.trim="rules"></textarea>
      <h2>Custom Stylesheet</h2>
      <textarea name="css"></textarea>
      <p>
        <button v-if="id !== 0" @click.prevent="deletePrompt" type="button" class="delete">Delete</button>
        <input type="submit" value="Save">
      </p>
    </form>
    <div v-if="$store.state.show === 'deleteUser'" class="prompt">
      <h3>Delete User</h3>
      <p>Are you sure you want to delete this user?</p>
      <div>
        <button @click="deleteUser" autofocus>Delete</button>
        <button @click="closeHovers" class="cancel">Cancel</button>
      </div>
    </div>
  </div>
 </template>
 <script>
 import { mapMutations } from 'vuex'
 import api from '@/utils/api'
 export default {
  name: 'user',
  data: () => {
    return {
      id: 0,
      admin: false,
      allowNew: false,
      allowEdit: false,
      allowCommands: false,
      permissions: {},
      password: '',
      username: '',
      filesystem: '',
      rules: '',
      css: '',
      commands: ''
    }
  },
  computed: {
    passwordPlaceholder () {
      if (this.$route.path === '/users/new') return ''
      return '(leave blank to avoid changes)'
    }
  },
  created () {
    this.fetchData()
  },
  watch: {
    '$route': 'fetchData',
    admin: function () {
      if (!this.admin) return
      this.allowCommands = true
      this.allowEdit = true
      this.allowNew = true
      for (let key in this.permissions) {
        this.permissions[key] = true
      }
    }
  },
  methods: {
    ...mapMutations(['closeHovers']),
    fetchData () {
      let user = this.$route.params[0]
      if (this.$route.path === '/users/new') {
        user = 'base'
      }
      api.getUser(user).then(user => {
        this.id = user.ID
        this.admin = user.admin
        this.allowCommands = user.allowCommands
        this.allowNew = user.allowNew
        this.allowEdit = user.allowEdit
        this.filesystem = user.filesystem
        this.username = user.username
        this.commands = user.commands.join(' ')
        this.css = user.css
        this.permissions = user.permissions
        for (let rule of user.rules) {
          if (rule.allow) {
            this.rules += 'allow '
          } else {
            this.rules += 'disallow '
          }
          if (rule.regex) {
            this.rules += 'regex ' + rule.regexp.raw
          } else {
            this.rules += rule.path
          }
          this.rules += '\n'
        }
        this.rules = this.rules.trim()
      }).catch(() => {
        this.$router.push({ path: '/users/new' })
      })
    },
    capitalize (name) {
      let splitted = name.split(/(?=[A-Z])/)
      name = ''
      for (let i = 0; i < splitted.length; i++) {
        name += splitted[i].charAt(0).toUpperCase() + splitted[i].slice(1) + ' '
      }
      return name.slice(0, -1)
    },
    reset () {
      this.id = 0
      this.admin = false
      this.allowNew = false
      this.allowEdit = false
      this.permissins = {}
      this.allowCommands = false
      this.password = ''
      this.username = ''
      this.filesystem = ''
      this.rules = ''
      this.css = ''
      this.commands = ''
    },
    deletePrompt (event) {
      this.$store.commit('showHover', 'deleteUser')
    },
    deleteUser (event) {
      event.preventDefault()
      api.deleteUser(this.id).then(location => {
        this.$router.push({ path: '/users' })
        this.$store.commit('showSuccess', 'User deleted!')
      }).catch(e => {
        this.$store.commit('showError', e)
      })
    },
    save (event) {
      event.preventDefault()
      let user = this.parseForm()
      if (this.$route.path === '/users/new') {
        api.newUser(user).then(location => {
          this.$router.push({ path: location })
          this.$store.commit('showSuccess', 'User created!')
        }).catch(e => {
          this.$store.commit('showError', e)
        })
        return
      }
      api.updateUser(user).then(location => {
        this.$store.commit('showSuccess', 'User updated!')
      }).catch(e => {
        this.$store.commit('showError', e)
      })
    },
    parseForm () {
      let user = {
        ID: this.id,
        username: this.username,
        password: this.password,
        filesystem: this.filesystem,
        admin: this.admin,
        allowCommands: this.allowCommands,
        allowNew: this.allowNew,
        allowEdit: this.allowEdit,
        permissions: this.permissions,
        css: this.css,
        commands: this.commands.split(' '),
        rules: []
      }
      let rules = this.rules.split('\n')
      for (let rawRule of rules) {
        let rule = {
          allow: true,
          path: '',
          regex: false,
          regexp: {
            raw: ''
          }
        }
        rawRule = rawRule.split(' ')
        // Skip a malformed rule
        if (rawRule.length < 2) {
          continue
        }
        // Skip a malformed rule
        if (rawRule[0] !== 'allow' && rawRule[0] !== 'disallow') {
          continue
        }
        rule.allow = (rawRule[0] === 'allow')
        rawRule.shift()
        if (rawRule[0] === 'regex') {
          rule.regex = true
          rawRule.shift()
          rule.regexp.raw = rawRule.join(' ')
        } else {
          rule.path = rawRule.join(' ')
        }
        user.rules.push(rule)
      }
      return user
    }
  }
 }
 </script>
 <style>
 </style>
--- a/assets/src/components/Users.vue
+++ b/assets/src/components/Users.vue
@ -0,0 +1,42 @@
 <template>
  <div class="dashboard">
    <h1>Users <router-link to="/users/new"><button>New</button></router-link></h1>
    <table>
      <tr>
        <th>Username</th>
        <th>Admin</th>
        <th>Scope</th>
        <th></th>
      </tr>
      <tr v-for="user in users">
        <td>{{ user.username }}</td>
        <td><i v-if="user.admin" class="material-icons">done</i><i v-else class="material-icons">close</i></td>
        <td>{{ user.filesystem }}</td>
        <td><router-link :to="'/users/' + user.ID"><i class="material-icons">mode_edit</i></router-link></td>
      </tr>
    </table>
  </div>
 </template>
 <script>
 import api from '@/utils/api'
 export default {
  name: 'users',
  data: function () {
    return {
      users: []
    }
  },
  created () {
    api.getUsers().then(users => {
      this.users = users
    }).catch(error => {
      this.$store.commit('showError', error)
    })
  }
 }
 </script>
--- a/assets/src/components/buttons/Copy.vue
+++ b/assets/src/components/buttons/Copy.vue
@ -0,0 +1,17 @@
 <template>
  <button @click="show" aria-label="Copy" title="Copy" class="action" id="copy-button">
    <i class="material-icons">content_copy</i>
    <span>Copy file</span>
  </button>
 </template>
 <script>
 export default {
  name: 'copy-button',
  methods: {
    show: function (event) {
      this.$store.commit('showHover', 'copy')
    }
  }
 }
 </script>
--- a/assets/src/components/buttons/Delete.vue
+++ b/assets/src/components/buttons/Delete.vue
@ -0,0 +1,17 @@
 <template>
  <button @click="show" aria-label="Delete"  title="Delete" class="action" id="delete-button">
    <i class="material-icons">delete</i>
    <span>Delete</span>
  </button>
 </template>
 <script>
 export default {
  name: 'delete-button',
  methods: {
    show: function (event) {
      this.$store.commit('showHover', 'delete')
    }
  }
 }
 </script>
--- a/assets/src/components/buttons/Download.vue
+++ b/assets/src/components/buttons/Download.vue
@ -0,0 +1,39 @@
 <template>
  <button @click="download" aria-label="Download" title="Download" id="download-button" class="action">
    <i class="material-icons">file_download</i>
    <span>Download</span>
    <span v-if="selectedCount > 0" class="counter">{{ selectedCount }}</span>
  </button>
 </template>
 <script>
 import {mapGetters, mapState} from 'vuex'
 import api from '@/utils/api'
 export default {
  name: 'download-button',
  computed: {
    ...mapState(['req', 'selected']),
    ...mapGetters(['selectedCount'])
  },
  methods: {
    download: function (event) {
      // If we are not on a listing, download the current file.
      if (this.req.kind !== 'listing') {
        api.download(null, this.$route.path)
        return
      }
      // If we are on a listing and there is one element selected,
      // download it.
      if (this.selectedCount === 1 && !this.req.items[this.selected[0]].isDir) {
        api.download(null, this.req.items[this.selected[0]].url)
        return
      }
      // Otherwise show the prompt to choose the formt of the download.
      this.$store.commit('showHover', 'download')
    }
  }
 }
 </script>
--- a/assets/src/components/buttons/Info.vue
+++ b/assets/src/components/buttons/Info.vue
@ -0,0 +1,17 @@
 <template>
  <button title="Info" aria-label="Info" class="action" @click="show">
    <i class="material-icons">info</i>
    <span>Info</span>
  </button>
 </template>
 <script>
 export default {
  name: 'info-button',
  methods: {
    show: function (event) {
      this.$store.commit('showHover', 'info')
    }
  }
 }
 </script>
--- a/assets/src/components/buttons/Move.vue
+++ b/assets/src/components/buttons/Move.vue
@ -0,0 +1,17 @@
 <template>
  <button @click="show" aria-label="Move" title="Move" class="action" id="move-button">
    <i class="material-icons">forward</i>
    <span>Move file</span>
  </button>
 </template>
 <script>
 export default {
  name: 'move-button',
  methods: {
    show: function (event) {
      this.$store.commit('showHover', 'move')
    }
  }
 }
 </script>
--- a/assets/src/components/buttons/Rename.vue
+++ b/assets/src/components/buttons/Rename.vue
@ -0,0 +1,17 @@
 <template>
  <button @click="show" aria-label="Rename" title="Rename" class="action" id="rename-button">
    <i class="material-icons">mode_edit</i>
    <span>Rename</span>
  </button>
 </template>
 <script>
 export default {
  name: 'rename-button',
  methods: {
    show: function (event) {
      this.$store.commit('showHover', 'rename')
    }
  }
 }
 </script>
--- a/assets/src/components/buttons/SwitchView.vue
+++ b/assets/src/components/buttons/SwitchView.vue
@ -0,0 +1,33 @@
 <template>
  <button @click="change" aria-label="Switch View" title="Switch View" class="action" id="switch-view-button">
    <i class="material-icons">{{ icon() }}</i>
    <span>Switch view</span>
  </button>
 </template>
 <script>
 export default {
  name: 'switch-button',
  methods: {
    change: function (event) {
      // If we are on mobile we should close the dropdown.
      this.$store.commit('closeHovers')
      let display = 'mosaic'
      if (this.$store.state.req.display === 'mosaic') {
        display = 'list'
      }
      this.$store.commit('listingDisplay', display)
      let path = this.$store.state.baseURL
      if (path === '') path = '/'
      document.cookie = `display=${display}; max-age=31536000; path=${path}`
    },
    icon: function () {
      if (this.$store.state.req.display === 'mosaic') return 'view_list'
      return 'view_module'
    }
  }
 }
 </script>
--- a/assets/src/components/buttons/Upload.vue
+++ b/assets/src/components/buttons/Upload.vue
@ -0,0 +1,17 @@
 <template>
  <button @click="upload" aria-label="Upload" title="Upload" class="action" id="upload-button">
    <i class="material-icons">file_upload</i>
    <span>Upload</span>
  </button>
 </template>
 <script>
 export default {
  name: 'upload-button',
  methods: {
    upload: function (event) {
      document.getElementById('upload-input').click()
    }
  }
 }
 </script>
--- a/assets/src/components/errors/403.vue
+++ b/assets/src/components/errors/403.vue
@ -0,0 +1,13 @@
 <template>
  <div>
    <h2 class="message">
      <i class="material-icons">error</i>
      <span>You're not welcome here.</span>
    </h2>
  </div>
 </template>
 <script>
 export default {name: 'forbidden'}
 </script>
--- a/assets/src/components/errors/404.vue
+++ b/assets/src/components/errors/404.vue
@ -0,0 +1,13 @@
 <template>
  <div>
    <h2 class="message">
      <i class="material-icons">gps_off</i>
      <span>This location can't be reached.</span>
    </h2>
  </div>
 </template>
 <script>
 export default {name: 'not-found'}
 </script>
--- a/assets/src/components/errors/500.vue
+++ b/assets/src/components/errors/500.vue
@ -0,0 +1,13 @@
 <template>
  <div>
    <h2 class="message">
      <i class="material-icons">error_outline</i>
      <span>Something really went wrong.</span>
    </h2>
  </div>
 </template>
 <script>
 export default {name: 'internal-error'}
 </script>
--- a/assets/src/components/prompts/Copy.vue
+++ b/assets/src/components/prompts/Copy.vue
@ -0,0 +1,58 @@
 <template>
  <div class="prompt">
    <h3>Copy</h3>
    <p>Choose the place to copy your files:</p>
    <file-list @update:selected="val => dest = val"></file-list>
    <div>
      <button class="ok" @click="copy">Copy</button>
      <button class="cancel" @click="$store.commit('closeHovers')">Cancel</button>
    </div>
  </div>
 </template>
 <script>
 import { mapState } from 'vuex'
 import FileList from './FileList'
 import api from '@/utils/api'
 import buttons from '@/utils/buttons'
 export default {
  name: 'copy',
  components: { FileList },
  data: function () {
    return {
      current: window.location.pathname,
      dest: null
    }
  },
  computed: mapState(['req', 'selected']),
  methods: {
    copy: function (event) {
      event.preventDefault()
      buttons.loading('copy')
      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)
        })
      }
      // Execute the promises.
      api.copy(items)
        .then(() => {
          buttons.done('copy')
          this.$router.push({ path: this.dest })
        })
        .catch(error => {
          buttons.done('copy')
          this.$store.commit('showError', error)
        })
    }
  }
 }
 </script>
--- a/assets/src/components/prompts/Delete.vue
+++ b/assets/src/components/prompts/Delete.vue
@ -0,0 +1,73 @@
 <template>
  <div class="prompt">
    <h3>Delete files</h3>
    <p v-show="req.kind !== 'listing'">Are you sure you want to delete this file/folder?</p>
    <p v-show="req.kind === 'listing'">Are you sure you want to delete {{ selectedCount }} file(s)?</p>
    <div>
      <button @click="submit" autofocus>Delete</button>
      <button @click="closeHovers" class="cancel">Cancel</button>
    </div>
  </div>
 </template>
 <script>
 import {mapGetters, mapMutations, mapState} from 'vuex'
 import api from '@/utils/api'
 import url from '@/utils/url'
 import buttons from '@/utils/buttons'
 export default {
  name: 'delete',
  computed: {
    ...mapGetters(['selectedCount']),
    ...mapState(['req', 'selected'])
  },
  methods: {
    ...mapMutations(['closeHovers']),
    submit: function (event) {
      this.closeHovers()
      buttons.loading('delete')
      // If we are not on a listing, delete the current
      // opened file.
      if (this.req.kind !== 'listing') {
        api.delete(this.$route.path)
          .then(() => {
            buttons.done('delete')
            this.$router.push({ path: url.removeLastDir(this.$route.path) + '/' })
          })
          .catch(error => {
            buttons.done('delete')
            this.$store.commit('showError', error)
          })
        return
      }
      if (this.selectedCount === 0) {
        // This shouldn't happen...
        return
      }
      // Create the promises array and fill it with
      // the delete request for every selected file.
      let promises = []
      for (let index of this.selected) {
        promises.push(api.delete(this.req.items[index].url))
      }
      Promise.all(promises)
        .then(() => {
          buttons.done('delete')
          this.$store.commit('setReload', true)
        })
        .catch(error => {
          buttons.done('delete')
          this.$store.commit('setReload', true)
          this.$store.commit('showError', error)
        })
    }
  }
 }
 </script>
--- a/assets/src/components/prompts/Download.vue
+++ b/assets/src/components/prompts/Download.vue
@ -0,0 +1,41 @@
 <template>
  <div class="prompt" id="download">
    <h3>Download files</h3>
    <p>Choose the format you want to download.</p>
    <button @click="download('zip')" autofocus>zip</button>
    <button @click="download('tar')" autofocus>tar</button>
    <button @click="download('targz')" autofocus>tar.gz</button>
    <button @click="download('tarbz2')" autofocus>tar.bz2</button>
    <button @click="download('tarxz')" autofocus>tar.xz</button>
  </div>
 </template>
 <script>
 import {mapGetters, mapState} from 'vuex'
 import api from '@/utils/api'
 export default {
  name: 'download',
  computed: {
    ...mapState(['selected', 'req']),
    ...mapGetters(['selectedCount'])
  },
  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')
    }
  }
 }
 </script>
--- a/assets/src/components/prompts/Error.vue
+++ b/assets/src/components/prompts/Error.vue
@ -0,0 +1,25 @@
 <template>
  <div class="prompt error">
    <i class="material-icons">error_outline</i>
    <h3>Something went wrong</h3>
    <pre>{{ $store.state.showMessage }}</pre>
    <div>
      <button @click="close" autofocus>Close</button>
      <button @click="reportIssue" class="cancel">Report Issue</button>
    </div>
  </div>
 </template>
 <script>
 export default {
  name: 'error',
  methods: {
    reportIssue () {
      window.open('https://github.com/hacdias/filemanager/issues/new')
    },
    close () {
      this.$store.commit('closeHovers')
    }
  }
 }
 </script>
--- a/assets/src/components/prompts/FileList.vue
+++ b/assets/src/components/prompts/FileList.vue
@ -0,0 +1,137 @@
 <template>
  <div>
    <ul class="file-list">
      <li @click="select"
        @touchstart="touchstart"
        @dblclick="next"
        :aria-selected="selected == item.url"
        :key="item.name" v-for="item in items"
        :data-url="item.url">{{ item.name }}</li>
    </ul>
    <p>Currently navigating on: <code>{{ nav }}</code>.</p>
  </div>
 </template>
 <script>
 import { mapState } from 'vuex'
 import url from '@/utils/url'
 import api from '@/utils/api'
 export default {
  name: 'file-list',
  data: function () {
    return {
      items: [],
      touches: {
        id: '',
        count: 0
      },
      selected: null,
      current: window.location.pathname
    }
  },
  computed: {
    ...mapState(['req']),
    nav () {
      return decodeURIComponent(this.current)
    }
  },
  mounted () {
    // If we're showing this on a listing,
    // we can use the current request object
    // to fill the move options.
    if (this.req.kind === 'listing') {
      this.fillOptions(this.req)
      return
    }
    // Otherwise, we must be on a preview or editor
    // so we fetch the data from the previous directory.
    api.fetch(url.removeLastDir(this.$route.path))
      .then(this.fillOptions)
      .catch(this.showError)
  },
  methods: {
    fillOptions (req) {
      // Sets the current path and resets
      // the current items.
      this.current = req.url
      this.items = []
      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/') {
        this.items.push({
          name: '..',
          url: url.removeLastDir(req.url) + '/'
        })
      }
      // If this folder is empty, finish here.
      if (req.items === null) return
      // Otherwise we add every directory to the
      // move options.
      for (let item of req.items) {
        if (!item.isDir) continue
        this.items.push({
          name: item.name,
          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
      api.fetch(uri)
        .then(this.fillOptions)
        .catch(this.showError)
    },
    touchstart (event) {
      let url = event.currentTarget.dataset.url
      // In 300 milliseconds, we shall reset the count.
      setTimeout(() => {
        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.count++
      // If there is more than one touch already,
      // open the next screen.
      if (this.touches.count > 1) {
        this.next(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
      }
      // Otherwise select the element.
      this.selected = event.currentTarget.dataset.url
      this.$emit('update:selected', this.selected)
    }
  }
 }
 </script>
--- a/assets/src/components/prompts/Help.vue
+++ b/assets/src/components/prompts/Help.vue
@ -0,0 +1,31 @@
 <template>
  <div class="prompt help">
    <h3>Help</h3>
    <ul>
      <li><strong>F1</strong> - this information</li>
      <li><strong>F2</strong> - rename file</li>
      <li><strong>DEL</strong> - delete selected items</li>
      <li><strong>ESC</strong> - clear selection and/or close the prompt</li>
      <li><strong>CTRL + S</strong> - save a file or download the directory where you are</li>
      <li><strong>CTRL + Click</strong> - select multiple files or directories</li>
      <li><strong>Double click</strong> - open a file or directory</li>
      <li><strong>Click</strong> - select file or directory</li>
    </ul>
    <p>Not available yet</p>
    <ul>
      <li><strong>Alt + Click</strong> - select a group of files</li>
    </ul>
    <div>
      <button type="submit" @click="$store.commit('closeHovers')" class="ok">OK</button>
    </div>
  </div>
 </template>
 <script>
 export default {name: 'help'}
 </script>
--- a/assets/src/components/prompts/Info.vue
+++ b/assets/src/components/prompts/Info.vue
@ -0,0 +1,114 @@
 <template>
  <div class="prompt">
    <h3>File Information</h3>
    <p v-show="selected.length > 1">{{ selected.length }} files selected.</p>
    <p v-show="selected.length < 2"><strong>Display Name:</strong> {{ name() }}</p>
    <p><strong>Size:</strong> <span id="content_length"></span>{{ humanSize() }}</p>
    <p v-show="selected.length < 2"><strong>Last Modified:</strong> {{ humanTime() }}</p>
    <section v-show="dir() && selected.length === 0">
      <p><strong>Number of files:</strong> {{ req.numFiles }}</p>
      <p><strong>Number of directories:</strong> {{ req.numDirs }}</p>
    </section>
    <section v-show="!dir()">
      <p><strong>MD5:</strong> <code><a @click="checksum($event, 'md5')">show</a></code></p>
      <p><strong>SHA1:</strong> <code><a @click="checksum($event, 'sha1')">show</a></code></p>
      <p><strong>SHA256:</strong> <code><a @click="checksum($event, 'sha256')">show</a></code></p>
      <p><strong>SHA512:</strong> <code><a @click="checksum($event, 'sha512')">show</a></code></p>
    </section>
    <div>
      <button type="submit" @click="$store.commit('closeHovers')" class="ok">OK</button>
    </div>
  </div>
 </template>
 <script>
 import {mapState, mapGetters} from 'vuex'
 import filesize from 'filesize'
 import moment from 'moment'
 import api from '@/utils/api'
 export default {
  name: 'info',
  computed: {
    ...mapState(['req', 'selected']),
    ...mapGetters(['selectedCount'])
  },
  methods: {
    humanSize: function () {
      // If there are no files selected or this is not a listing
      // show the human file size of the current request.
      if (this.selectedCount === 0 || this.req.kind !== 'listing') {
        return filesize(this.req.size)
      }
      // Otherwise, sum the sizes of each selected file and returns
      // its human form.
      var sum = 0
      for (let i = 0; i < this.selectedCount; i++) {
        sum += this.req.items[this.selected[i]].size
      }
      return filesize(sum)
    },
    humanTime: function () {
      // If there are no selected files, return the current request
      // modified time.
      if (this.selectedCount === 0) {
        return moment(this.req.modified).fromNow()
      }
      // Otherwise return the modified time of the first item
      // that is selected since this should not appear when
      // there is more than one file selected.
      return moment(this.req.items[this.selected[0]]).fromNow()
    },
    name: function () {
      // Return the name of the current opened file if there
      // are no selected files.
      if (this.selectedCount === 0) {
        return this.req.name
      }
      // Otherwise, just return the name of the selected file.
      // This field won't show when there is more than one
      // file selected.
      return this.req.items[this.selected[0]].name
    },
    dir: function () {
      if (this.selectedCount > 1) {
        // Don't show when multiple selected.
        return true
      }
      if (this.selectedCount === 0) {
        return this.req.isDir
      }
      return this.req.items[this.selected[0]].isDir
    },
    checksum: function (event, hash) {
      // Gets the checksum of the current selected or
      // opened file. Doesn't work for directories.
      event.preventDefault()
      let link
      if (this.selectedCount) {
        link = this.req.items[this.selected[0]].url
      } else {
        link = this.$route.path
      }
      api.checksum(link, hash)
        .then((hash) => { event.target.innerHTML = hash })
        .catch(error => { this.$store.commit('showError', error) })
    }
  }
 }
 </script>
--- a/assets/src/components/prompts/Move.vue
+++ b/assets/src/components/prompts/Move.vue
@ -0,0 +1,60 @@
 <template>
  <div class="prompt">
    <h3>Move</h3>
    <p>Choose new house for your file(s)/folder(s):</p>
    <file-list @update:selected="val => dest = val"></file-list>
    <div>
      <button class="ok" @click="move">Move</button>
      <button class="cancel" @click="$store.commit('closeHovers')">Cancel</button>
    </div>
  </div>
 </template>
 <script>
 import { mapState } from 'vuex'
 import FileList from './FileList'
 import api from '@/utils/api'
 import buttons from '@/utils/buttons'
 export default {
  name: 'move',
  components: { FileList },
  data: function () {
    return {
      current: window.location.pathname,
      dest: null
    }
  },
  computed: mapState(['req', 'selected']),
  methods: {
    move: function (event) {
      event.preventDefault()
      buttons.loading('move')
      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)
        })
      }
      // Execute the promises.
      api.move(items)
        .then(() => {
          buttons.done('move')
          this.$router.push({ path: this.dest })
        })
        .catch(error => {
          buttons.done('move')
          this.$store.commit('showError', error)
        })
      event.preventDefault()
    }
  }
 }
 </script>
--- a/assets/src/components/prompts/NewDir.vue
+++ b/assets/src/components/prompts/NewDir.vue
@ -0,0 +1,48 @@
 <template>
  <div class="prompt">
    <h3>New directory</h3>
    <p>Write the name of the new directory.</p>
    <input autofocus type="text" @keyup.enter="submit" v-model.trim="name">
    <div>
      <button class="ok" @click="submit">Create</button>
      <button class="cancel" @click="$store.commit('closeHovers')">Cancel</button>
    </div>
  </div>
 </template>
 <script>
 import url from '@/utils/url'
 import api from '@/utils/api'
 export default {
  name: 'new-dir',
  data: function () {
    return {
      name: ''
    }
  },
  methods: {
    submit: function (event) {
      event.preventDefault()
      if (this.new === '') return
      // Build the path of the new directory.
      let uri = this.$route.path
      if (this.$store.state.req.kind !== 'listing') {
        uri = url.removeLastDir(uri) + '/'
      }
      uri += this.name + '/'
      uri = uri.replace('//', '/')
      api.post(uri)
        .then(() => { this.$router.push({ path: uri }) })
        .catch(error => { this.$store.commit('showError', error) })
      // Close the prompt
      this.$store.commit('closeHovers')
    }
  }
 }
 </script>
--- a/assets/src/components/prompts/NewFile.vue
+++ b/assets/src/components/prompts/NewFile.vue
@ -0,0 +1,49 @@
 <template>
  <div class="prompt">
    <h3>New file</h3>
    <p>Write the name of the new file.</p>
    <input autofocus type="text" @keyup.enter="submit" v-model.trim="name">
    <div>
      <button class="ok" @click="submit">Create</button>
      <button class="cancel" @click="$store.commit('closeHovers')">Cancel</button>
    </div>
  </div>
 </template>
 <script>
 import url from '@/utils/url'
 import api from '@/utils/api'
 export default {
  name: 'new-file',
  data: function () {
    return {
      name: ''
    }
  },
  methods: {
    submit: function (event) {
      event.preventDefault()
      if (this.new === '') return
      // Build the path of the new file.
      let uri = this.$route.path
      if (this.$store.state.req.kind !== 'listing') {
        uri = url.removeLastDir(uri) + '/'
      }
      uri += this.name
      uri = uri.replace('//', '/')
      // Create the new file.
      api.post(uri)
        .then(() => { this.$router.push({ path: uri }) })
        .catch(error => { this.$store.commit('showError', error) })
      // Close the prompt.
      this.$store.commit('closeHovers')
    }
  }
 }
 </script>
--- a/assets/src/components/prompts/Prompts.vue
+++ b/assets/src/components/prompts/Prompts.vue
@ -0,0 +1,103 @@
 <template>
  <div>
    <help v-if="showHelp" ></help>
    <download v-else-if="showDownload"></download>
    <new-file v-else-if="showNewFile"></new-file>
    <new-dir v-else-if="showNewDir"></new-dir>
    <rename v-else-if="showRename"></rename>
    <delete v-else-if="showDelete"></delete>
    <info v-else-if="showInfo"></info>
    <move v-else-if="showMove"></move>
    <copy v-else-if="showCopy"></copy>
    <error v-else-if="showError"></error>
    <success v-else-if="showSuccess"></success>
    <template v-for="plugin in plugins">
      <form class="prompt"
        v-for="prompt in plugin.prompts"
        :key="prompt.name"
        v-if="show === prompt.name"
        @submit="prompt.submit($event, pluginData, $route)">
        <h3>{{ prompt.title }}</h3>
        <p>{{ prompt.description }}</p>
        <input v-for="input in prompt.inputs"
          :key="input.name"
          :type="input.type"
          :name="input.name"
          :placeholder="input.placeholder">
        <div>
          <input type="submit" class="ok" :value="prompt.ok">
          <button class="cancel" @click.prevent="$store.commit('closeHovers')">Cancel</button>
        </div>
      </form>
    </template>
    <div v-show="showOverlay" @click="resetPrompts" class="overlay"></div>
  </div>
 </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 Error from './Error'
 import Success from './Success'
 import NewFile from './NewFile'
 import NewDir from './NewDir'
 import { mapState } from 'vuex'
 import buttons from '@/utils/buttons'
 import api from '@/utils/api'
 export default {
  name: 'prompts',
  components: {
    Info,
    Delete,
    Rename,
    Error,
    Download,
    Success,
    Move,
    Copy,
    NewFile,
    NewDir,
    Help
  },
  data: function () {
    return {
      pluginData: {
        api,
        buttons,
        'store': this.$store,
        'router': this.$router
      }
    }
  },
  computed: {
    ...mapState(['show', 'plugins']),
    showError: function () { return this.show === 'error' },
    showSuccess: function () { return this.show === 'success' },
    showInfo: function () { return this.show === 'info' },
    showHelp: function () { return this.show === 'help' },
    showDelete: function () { return this.show === 'delete' },
    showRename: function () { return this.show === 'rename' },
    showMove: function () { return this.show === 'move' },
    showCopy: function () { return this.show === 'copy' },
    showNewFile: function () { return this.show === 'newFile' },
    showNewDir: function () { return this.show === 'newDir' },
    showDownload: function () { return this.show === 'download' },
    showOverlay: function () {
      return (this.show !== null && this.show !== 'search' && this.show !== 'more')
    }
  },
  methods: {
    resetPrompts () {
      this.$store.commit('closeHovers')
    }
  }
 }
 </script>
--- a/assets/src/components/prompts/Rename.vue
+++ b/assets/src/components/prompts/Rename.vue
@ -0,0 +1,71 @@
 <template>
  <div class="prompt">
    <h3>Rename</h3>
    <p>Insert a new name for <code>{{ oldName() }}</code>:</p>
    <input autofocus type="text" @keyup.enter="submit" v-model.trim="name">
    <div>
      <button @click="submit" type="submit">Rename</button>
      <button @click="cancel" class="cancel">Cancel</button>
    </div>
  </div>
 </template>
 <script>
 import { mapState } from 'vuex'
 import url from '@/utils/url'
 import api from '@/utils/api'
 export default {
  name: 'rename',
  data: function () {
    return {
      name: ''
    }
  },
  computed: mapState(['req', 'selected', 'selectedCount']),
  methods: {
    cancel: function (event) {
      this.$store.commit('closeHovers')
    },
    oldName: function () {
      // Get the current name of the file we are editing.
      if (this.req.kind !== 'listing') {
        return this.req.name
      }
      if (this.selectedCount === 0 || this.selectedCount > 1) {
        // This shouldn't happen.
        return
      }
      return this.req.items[this.selected[0]].name
    },
    submit: function (event) {
      let oldLink = ''
      let newLink = ''
      if (this.req.kind !== 'listing') {
        oldLink = this.req.url
      } else {
        oldLink = this.req.items[this.selected[0]].url
      }
      this.name = encodeURIComponent(this.name)
      newLink = url.removeLastDir(oldLink) + '/' + this.name
      api.move([{ from: oldLink, to: newLink }])
        .then(() => {
          if (this.req.kind !== 'listing') {
            this.$router.push({ path: newLink })
            return
          }
          this.$store.commit('setReload', true)
        }).catch(error => {
          this.$store.commit('showError', error)
        })
      this.$store.commit('closeHovers')
    }
  }
 }
 </script>
--- a/assets/src/components/prompts/Success.vue
+++ b/assets/src/components/prompts/Success.vue
@ -0,0 +1,20 @@
 <template>
  <div class="prompt success">
    <i class="material-icons">done</i>
    <h3>{{ $store.state.showMessage }}</h3>
    <div>
      <button @click="close" autofocus>OK</button>
    </div>
  </div>
 </template>
 <script>
 export default {
  name: 'success',
  methods: {
    close () {
      this.$store.commit('closeHovers')
    }
  }
 }
 </script>
--- a/assets/src/css/base.css
+++ b/assets/src/css/base.css
@ -0,0 +1,137 @@
 body {
  font-family: 'Roboto', sans-serif;
  padding-top: 4em;
  background-color: #f8f8f8;
  user-select: none;
  color: #212121;
 }
 * {
  box-sizing: border-box;
 }
 *,
 *:hover,
 *:active,
 *:focus {
  outline: 0
 }
 a {
  text-decoration: none;
 }
 img {
  max-width: 100%;
 }
 audio,
 video {
  width: 100%;
 }
 pre {
  padding: 1em;
  border: 1px solid #e6e6e6;
  border-radius: 0.5em;
  background-color: #f5f5f5;
  white-space: pre-wrap;
  white-space: -moz-pre-wrap;
  white-space: -pre-wrap;
  white-space: -o-pre-wrap;
  word-wrap: break-word;
 }
 input,
 button {
  outline: 0 !important;
 }
 input[type="submit"],
 button {
  border: 0;
  padding: .5em 1em;
  margin-left: .5em;
  border-radius: .1em;
  cursor: pointer;
  background: #2196f3;
  color: #fff;
  border: 1px solid rgba(0, 0, 0, 0.05);
  box-shadow: 0 0 5px rgba(0, 0, 0, 0.05);
  transition: .1s ease all;
 }
 input[type="submit"]:hover,
 button:hover {
  background-color: #1E88E5;
 }
 .mobile-only {
  display: none !important;
 }
 .container {
  width: 95%;
  max-width: 960px;
  margin: 1em auto 0;
 }
 i.spin {
  animation: 1s spin linear infinite;
 }
 #app {
  transition: .2s ease padding;
 }
 #app.multiple {
  padding-bottom: 4em;
 }
 nav {
  width: 16em;
  position: fixed;
  top: 4em;
  left: 0;
 }
 nav .action {
  width: 100%;
  display: block;
  border-radius: 0;
  font-size: 1.1em;
  padding: .5em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
 }
 nav>div {
  border-top: 1px solid rgba(0, 0, 0, 0.05);
 }
 nav .action>* {
  vertical-align: middle;
 }
 main {
  min-height: 1em;
  margin: 0 1em 1em auto;
  width: calc(100% - 19em);
 }
 #breadcrumbs {
  height: 3em;
  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
 }
 #breadcrumbs span,
 #breadcrumbs {
  display: flex;
  align-items: center;
  color: #6f6f6f;
 }
 #breadcrumbs a {
  color: inherit
 }
--- a/assets/src/css/dashboard.css
+++ b/assets/src/css/dashboard.css
@ -0,0 +1,120 @@
 .dashboard {
  max-width: 600px;
  box-shadow: rgba(0, 0, 0, 0.06) 0px 1px 3px, rgba(0, 0, 0, 0.12) 0px 1px 2px;
  border-radius: .5em;
  background: #fff;
  padding: 1em;
  margin: 1em 0;
 }
 .dashboard a {
  color: inherit
 }
 .dashboard h1 button {
  font-size: 0.5em;
  float: right;
 }
 .dashboard table {
  width: 100%;
 }
 .dashboard table th {
  font-weight: 500;
  color: #757575;
  text-align: left;
 }
 .dashboard table th,
 .dashboard table td {
  padding: .5em 0;
 }
 .dashboard table td:last-child {
  width: 1em
 }
 .dashboard > *:first-child {
  margin-top: 0;
 }
 .dashboard form > p:last-child,
 form.dashboard > p:last-child {
  text-align: right
 }
 .dashboard > *:last-child {
  margin-bottom: 0;
 }
 .dashboard textarea,
 .dashboard input[type="text"],
 .dashboard input[type="password"] {
  padding: 0;
  line-height: 1.7;
  display: block;
  border: 0;
  border-bottom: 1px solid #dddddd;
  transition: .2s ease border;
  width: 100%;
 }
 .dashboard #username,
 .dashboard #password,
 .dashboard #scope {
  max-width: 18em;
 }
 .dashboard textarea:focus,
 .dashboard textarea:hover,
 .dashboard input[type="text"]:focus,
 .dashboard input[type="password"]:focus,
 .dashboard input[type="text"]:hover,
 .dashboard input[type="password"]:hover {
  border-color: #2979ff;
 }
 .dashboard input.red {
  border-color: red;
 }
 .dashboard input.green {
  border-color: green;
 }
 .dashboard button.delete {
  background: #F44336;
 }
 .dashboard button.delete:hover {
  background: #D32F2F;
 }
 .dashboard textarea {
  line-height: 1.15;
  padding: .5em;
  border: 1px solid #ddd;
  font-family: monospace;
  min-height: 10em;
  resize: vertical;
 }
 .dashboard p label {
  margin-bottom: .2em;
  display: block;
  font-size: .8em;
  font-weight: bold;
 }
 li code,
 p code {
  background: rgba(0, 0, 0, 0.05);
  padding: .1em;
  border-radius: .2em;
 }
 .small {
  font-size: .8em;
  line-height: 1.5;
 }
--- a/assets/src/css/editor.css
+++ b/assets/src/css/editor.css
@ -0,0 +1,184 @@
@import "~codemirror/lib/codemirror.css";
@import "~codemirror/theme/ttcn.css";
 #editor {
  max-width: 800px;
  margin: 0 auto;
 }
 #editor .CodeMirror {
  box-shadow: rgba(0, 0, 0, 0.06) 0px 1px 3px, rgba(0, 0, 0, 0.12) 0px 1px 2px;
  margin: 2em 0;
  border-radius: .5em;
 }
 #editor h2 {
  color: rgba(0, 0, 0, 0.3);
  font-weight: 500;
 }
 .CodeMirror {
  height: auto;
 }
 .markdown .CodeMirror {
  padding: .75em;
 }
 .cm-s-markdown .CodeMirror-gutter {
  border-right: 1px solid #eff3f5;
  padding-right: 5px;
  margin-right: 15px;
  min-width: 2.5em;
  padding-bottom: 30px;
 }
 .cm-s-markdown .CodeMirror-cursor {
  border-right: 2px solid #667880;
 }
 .cm-s-markdown .CodeMirror-lines {
  margin: 0;
 }
 .cm-s-markdown {
  color: #3D494E;
 }
 .cm-s-markdown span.cm-header {
  color: #3D494E;
  font-weight: bold;
 }
 .cm-s-markdown span.cm-variable-2 {
  color: #3D494E;
 }
 .cm-s-markdown span.cm-meta {
  color: #516066;
 }
 .cm-s-markdown span.cm-hr {
  color: #516066;
 }
 .cm-s-markdown span.cm-comment {
  color: #868f93;
 }
 .cm-s-markdown span.cm-qualifier {
  color: #868f93;
 }
 .cm-s-markdown span.cm-number {
  color: #197987;
 }
 .cm-s-markdown span.cm-variable {
  color: #197987;
 }
 .cm-s-markdown span.cm-builtin {
  color: #197987;
 }
 .cm-s-markdown span.cm-link {
  color: #197987;
  text-decoration: underline;
 }
 .cm-s-markdown span.cm-tag {
  color: #197987;
 }
 .cm-s-markdown span.cm-string {
  color: #48abb9;
 }
 .cm-s-markdown span.cm-string-2 {
  color: #48abb9;
 }
 .cm-s-markdown span.cm-quote {
  color: #48abb9;
 }
 .cm-s-markdown span.cm-atom {
  color: #48abb9;
 }
 .cm-s-markdown span.cm-property {
  color: #82a367;
 }
 .cm-s-markdown span.cm-operator {
  color: #82a367;
 }
 .cm-s-markdown span.cm-variable-3 {
  color: #82a367;
 }
 .cm-s-markdown span.cm-attribute {
  color: #90bb74;
 }
 .cm-s-markdown span.cm-def {
  color: #90bb74;
 }
 .cm-s-markdown span.cm-keyword {
  color: #ec6c45;
 }
 .cm-s-markdown span.cm-bracket {
  color: #ec6c45;
 }
 .cm-s-markdown span.cm-error {
  color: #e45346;
 }
 .cm-s-markdown span.cm-em {
  font-style: italic;
 }
 .cm-s-markdown span.cm-strong {
  font-weight: bold;
 }
 .cm-s-markdown .cm-header-1 {
  font-size: 200%;
  line-height: 200%;
 }
 .cm-s-markdown .cm-header-2 {
  font-size: 160%;
  line-height: 160%;
 }
 .cm-s-markdown .cm-header-3 {
  font-size: 125%;
  line-height: 125%;
 }
 .cm-s-markdown .cm-header-4 {
  font-size: 110%;
  line-height: 110%;
 }
 .cm-s-markdown .cm-comment {
  background: rgba(0, 0, 0, .05);
  border-radius: 2px;
 }
 .cm-s-markdown .cm-link {
  color: #7f8c8d;
 }
 .cm-s-markdown .cm-url {
  color: #aab2b3;
 }
 .cm-s-markdown .cm-strikethrough {
  text-decoration: line-through;
 }
--- a/assets/src/css/fonts.css
+++ b/assets/src/css/fonts.css
@ -0,0 +1,137 @@
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 400;
  src: local('Roboto'), local('Roboto-Regular'), url(../assets/fonts/roboto/normal-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: 400;
  src: local('Roboto'), local('Roboto-Regular'), url(../assets/fonts/roboto/normal-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: 400;
  src: local('Roboto'), local('Roboto-Regular'), url(../assets/fonts/roboto/normal-greek-ext.woff2) format('woff2');
  unicode-range: U+1F00-1FFF;
 }
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 400;
  src: local('Roboto'), local('Roboto-Regular'), url(../assets/fonts/roboto/normal-greek.woff2) format('woff2');
  unicode-range: U+0370-03FF;
 }
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 400;
  src: local('Roboto'), local('Roboto-Regular'), url(../assets/fonts/roboto/normal-vietnamese.woff2) format('woff2');
  unicode-range: U+0102-0103, U+1EA0-1EF9, U+20AB;
 }
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 400;
  src: local('Roboto'), local('Roboto-Regular'), url(../assets/fonts/roboto/normal-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: 400;
  src: local('Roboto'), local('Roboto-Regular'), url(../assets/fonts/roboto/normal-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;
 }
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 500;
  src: local('Roboto Medium'), local('Roboto-Medium'), url(../assets/fonts/roboto/medium-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: 500;
  src: local('Roboto Medium'), local('Roboto-Medium'), url(../assets/fonts/roboto/medium-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: 500;
  src: local('Roboto Medium'), local('Roboto-Medium'), url(../assets/fonts/roboto/medium-greek-ext.woff2) format('woff2');
  unicode-range: U+1F00-1FFF;
 }
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 500;
  src: local('Roboto Medium'), local('Roboto-Medium'), url(../assets/fonts/roboto/medium-greek.woff2) format('woff2');
  unicode-range: U+0370-03FF;
 }
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 500;
  src: local('Roboto Medium'), local('Roboto-Medium'), url(../assets/fonts/roboto/medium-vietnamese.woff2) format('woff2');
  unicode-range: U+0102-0103, U+1EA0-1EF9, U+20AB;
 }
@font-face {
  font-family: 'Roboto';
  font-style: normal;
  font-weight: 500;
  src: local('Roboto Medium'), local('Roboto-Medium'), url(../assets/fonts/roboto/medium-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: 500;
  src: local('Roboto Medium'), local('Roboto-Medium'), url(../assets/fonts/roboto/medium-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;
 }
@font-face {
  font-family: 'Material Icons';
  font-style: normal;
  font-weight: 400;
  src: local('Material Icons'), local('MaterialIcons-Regular'), url(../assets/fonts/material/icons.woff2) format('woff2');
 }
 .prompt .file-list ul li:before,
 .material-icons {
  font-family: 'Material Icons';
  font-weight: normal;
  font-style: normal;
  font-size: 24px;
  line-height: 1;
  letter-spacing: normal;
  text-transform: none;
  display: inline-block;
  white-space: nowrap;
  word-wrap: normal;
  direction: ltr;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  -moz-osx-font-smoothing: grayscale;
  font-feature-settings: 'liga';
 }
--- a/Show More
+++ b/Show More