Merge branch 'master-holder'

.babelrc

@@ -0,0 +1,13 @@
+{
+  "presets": [
+    ["env", { "modules": false }],
+    "stage-2"
+  ],
+  "plugins": ["transform-runtime"],
+  "env": {
+    "test": {
+      "presets": ["env", "stage-2"],
+      "plugins": [ "istanbul" ]
+    }
+  }
+}

.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

.eslintignore

@@ -0,0 +1,2 @@
+build/*.js
+config/*.js

.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
+  }
+}

.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?

.gitignore

@@ -0,0 +1,6 @@
+.DS_Store
+node_modules/
+*/dist/*
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*

.travis.yml

@@ -0,0 +1,15 @@
+language: go
+
+go:
+  - tip
+
+install:
+  - go get -u -v $(go list -f '{{join .Imports "\n"}}' ./... | sort | uniq | grep -v filemanager)
+  - go get -u -v github.com/mholt/caddy/caddyhttp
+  - go get github.com/gordonklaus/ineffassign
+
+script:
+  - sed -i 's/\_ \"github.com\/mholt\/caddy\/caddyhttp\"/\_ \"github.com\/mholt\/caddy\/caddyhttp\"\n\_ \"github.com\/hacdias\/filemanager\/caddy\/filemanager\"/g' $GOPATH/src/github.com/mholt/caddy/caddy/caddymain/run.go
+  - go build -o binary github.com/mholt/caddy/caddy
+  - go build github.com/hacdias/filemanager
+  - ineffassign .

CODE_OF_CONDUCT.md

@@ -0,0 +1,46 @@
+# Contributor Covenant Code of Conduct
+
+## 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
+
+Examples of behavior that contributes to creating a positive environment include:
+
+* Using welcoming and inclusive language
+* Being respectful of differing viewpoints and experiences
+* Gracefully accepting constructive criticism
+* Focusing on what is best for the community
+* Showing empathy towards other community members
+
+Examples of unacceptable behavior by participants include:
+
+* The use of sexualized language or imagery and unwelcome sexual attention or advances
+* Trolling, insulting/derogatory comments, and personal or political attacks
+* Public or private harassment
+* 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
+
+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
+
+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
+
+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
+
+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/

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.

README.md

@@ -0,0 +1,28 @@
+# filemanager
+
+[![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)
+
+
+## About 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
+```

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'))
+  })
+})

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)
+  }
+}

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
+  }
+}

assets/build/dev.js

@@ -0,0 +1,26 @@
+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')
+
+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'))
+  })
+})

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);
+    }
+  });
+});

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);
+        });
+      }
+  });
+})();

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
+}

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
+  })
+}

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]')
+        }
+      }
+    ]
+  }
+}

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')
+      }
+    ])
+  ]
+})

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

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>

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>

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>

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>

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>

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">
+      <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>

assets/src/components/Header.vue

@@ -0,0 +1,225 @@
+<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>
+        <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>
+          <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 {mapGetters, mapState} from 'vuex'
+import api from '@/utils/api'
+import buttons from '@/utils/buttons'
+
+export default {
+  name: 'main',
+  components: {
+    Search,
+    InfoButton,
+    DeleteButton,
+    RenameButton,
+    DownloadButton,
+    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>

assets/src/components/Listing.vue

@@ -0,0 +1,223 @@
+<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>
+  </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']),
+    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('resize', this.resizeEvent)
+    document.addEventListener('dragover', this.preventDefault)
+    document.addEventListener('drop', this.drop)
+  },
+  beforeDestroy () {
+    // Remove event listeners before destroying this page.
+    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)))
+    },
+    preventDefault (event) {
+      // Wrapper around prevent default.
+      event.preventDefault()
+    },
+    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'
+        }
+      }
+
+      document.cookie = `sort=${sort}; max-age=31536000; path=${this.$store.state.baseURL}`
+      document.cookie = `order=${order}; max-age=31536000; path=${this.$store.state.baseURL}`
+      this.$store.commit('setReload', true)
+    }
+  }
+}
+</script>

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 promises = []
+
+      for (let i of this.selected) {
+        let url = this.req.items[i].url
+        let name = this.req.items[i].name
+
+        promises.push(api.move(url, this.url + encodeURIComponent(name)))
+      }
+
+      Promise.all(promises)
+        .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>

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

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>

assets/src/components/Preview.vue

@@ -0,0 +1,68 @@
+<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>
+
+    <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 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
+  },
+  computed: mapState(['req']),
+  methods: {
+    download: function () {
+      let url = `${this.$store.state.baseURL}/api/download/`
+      url += this.req.url.slice(6)
+      url += `?token=${this.$store.state.jwt}`
+
+      return url
+    },
+    raw: function () {
+      return `${this.download()}&inline=true`
+    },
+    back: function (event) {
+      let uri = url.removeLastDir(this.$route.path) + '/'
+      this.$router.push({ path: uri })
+    },
+    allowEdit: function (event) {
+      return this.$store.state.user.allowEdit
+    }
+  }
+}
+</script>

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

assets/src/components/Search.vue

@@ -0,0 +1,179 @@
+<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"
+        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: '',
+      ongoing: false,
+      scrollable: null,
+      search: [],
+      commands: []
+    }
+  },
+  computed: {
+    ...mapState(['user', 'show']),
+    // Computed property for activeness of search.
+    active () {
+      return (this.show === 'search')
+    },
+    // 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[0]) {
+          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.ongoing = false
+            this.scrollable.scrollTop = this.scrollable.scrollHeight
+            this.$store.commit('setReload', true)
+          }
+        )
+
+        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>

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/caddy-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>

assets/src/components/User.vue

@@ -0,0 +1,246 @@
+<template>
+  <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>Costum Stylesheet</h2>
+
+    <textarea name="css"></textarea>
+
+    <p><input type="submit" value="Save"></p>
+  </form>
+</template>
+
+<script>
+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: {
+    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 = ''
+    },
+    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>

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>

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>

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) {
+        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>

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>

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>

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>

assets/src/components/buttons/SwitchView.vue

@@ -0,0 +1,31 @@
+<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)
+      document.cookie = `display=${display}; max-age=31536000; path=${this.$store.state.baseURL}`
+    },
+    icon: function () {
+      if (this.$store.state.req.display === 'mosaic') return 'view_list'
+      return 'view_module'
+    }
+  }
+}
+</script>

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>

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

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

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

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>

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>

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>

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

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>

assets/src/components/prompts/Move.vue

@@ -0,0 +1,168 @@
+<template>
+  <div class="prompt">
+    <h3>Move</h3>
+    <p>Choose new house for your file(s)/folder(s):</p>
+
+    <ul class="file-list">
+      <li @click="select"
+        @touchstart="touchstart"
+        @dblclick="next"
+        :aria-selected="moveTo == item.url"
+        :key="item.name" v-for="item in items"
+        :data-url="item.url">{{ item.name }}</li>
+    </ul>
+
+    <p>Currently navigating on: <code>{{ current }}</code>.</p>
+
+    <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 url from '@/utils/url'
+import api from '@/utils/api'
+import buttons from '@/utils/buttons'
+
+export default {
+  name: 'move',
+  data: function () {
+    return {
+      items: [],
+      touches: {
+        id: '',
+        count: 0
+      },
+      current: window.location.pathname,
+      moveTo: null
+    }
+  },
+  computed: mapState(['req', 'selected', 'baseURL']),
+  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.$rute.path))
+      .then(this.fillOptions)
+      .catch(this.showError)
+  },
+  methods: {
+    move: function (event) {
+      event.preventDefault()
+
+      // Set the destination and create the promises array.
+      let promises = []
+      let dest = (this.moveTo === null) ? this.current : this.moveTo
+      buttons.loading('move')
+
+      // Create a new promise for each file.
+      for (let item of this.selected) {
+        let from = this.req.items[item].url
+        let to = dest + '/' + encodeURIComponent(this.req.items[item].name)
+        to = to.replace('//', '/')
+
+        promises.push(api.move(from, to))
+      }
+
+      // Execute the promises.
+      Promise.all(promises)
+        .then(() => {
+          buttons.done('move')
+          this.$router.push({ path: dest })
+        })
+        .catch(error => {
+          buttons.done('move')
+          this.$store.commit('showError', error)
+        })
+    },
+    fillOptions (req) {
+      // Sets the current path and resets
+      // the current items.
+      this.current = req.url
+      this.items = []
+
+      // 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
+        })
+      }
+    },
+    showError (error) {
+      this.$store.commit('showError', error)
+    },
+    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.moveTo === event.currentTarget.dataset.url) {
+        this.moveTo = null
+        return
+      }
+
+      // Otherwise select the element.
+      this.moveTo = event.currentTarget.dataset.url
+    }
+  }
+}
+</script>

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

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

assets/src/components/prompts/Prompts.vue

@@ -0,0 +1,99 @@
+<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>
+    <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 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,
+    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' },
+    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>

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(oldLink, 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>

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>

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
+}

assets/src/css/dashboard.css

@@ -0,0 +1,121 @@
+.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 tr {
+
+}
+
+.dashboard table th {
+  font-weight: 500;
+  color: #757575;
+  text-align: left;
+}
+
+.dashboard table th,
+.dashboard table td {
+  padding: .5em 0;
+}
+
+.dashboard table td {
+
+}
+
+.dashboard table td:last-child {
+  width: 1em
+}
+
+.dashboard > *:first-child {
+  margin-top: 0;
+}
+
+.dashboard > *:last-child {
+  margin-bottom: 0;
+}
+
+form.dashboard input[type="submit"],
+.dashboard form input[type="submit"] {
+  margin-left: auto;
+  display: block;
+}
+
+.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 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;
+}

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;
+}

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';
+}

assets/src/css/header.css

@@ -0,0 +1,201 @@
+header {
+  z-index: 1000;
+  background-color: #fff;
+  border-bottom: 1px solid rgba(0, 0, 0, 0.075);
+  box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  padding: 0;
+  display: flex;
+}
+
+header .overlay {
+  width: 0;
+  height: 0;
+}
+
+header a,
+header a:hover {
+  color: inherit;
+}
+
+header>div:first-child>.action,
+header img {
+  margin-right: 1em;
+}
+
+header img {
+  height: 2.5em;
+}
+
+header>div:first-child>.action {
+  display: none;
+}
+
+header>div {
+  display: flex;
+  width: 100%;
+  padding: 0.5em 0.5em 0.5em 1em;
+  align-items: center;
+}
+
+header .action span {
+  display: none;
+}
+
+header>div div {
+  vertical-align: middle;
+  position: relative;
+}
+
+header > div:last-child div {
+  display: flex;
+}
+
+header>div:first-child {
+  height: 4em;
+}
+
+header>div:last-child {
+  justify-content: flex-end;
+}
+
+header .search-button {
+  display: none;
+}
+
+#more {
+  display: none;
+}
+
+#search {
+  position: relative;
+  height: 100%;
+  width: 100%;
+  max-width: 25em;
+}
+
+#search.active {
+  position: fixed;
+  top: 0;
+  right: 0;
+  width: 100%;
+  max-width: 100%;
+  height: 100%;
+  z-index: 9999;
+}
+
+#search #input {
+  background-color: #f5f5f5;
+  display: flex;
+  padding: 0.75em;
+  border-radius: 0.3em;
+  transition: .1s ease all;
+  align-items: center;
+  z-index: 2;
+}
+
+#search.active #input {
+  border-bottom: 1px solid rgba(0, 0, 0, 0.075);
+  box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
+  background-color: #fff;
+  height: 4em;
+}
+
+#search.active>div {
+  border-radius: 0 !important;
+}
+
+#search.active i,
+#search.active input {
+  color: #212121;
+}
+
+#search #input>.action,
+#search #input>i {
+  margin-right: 0.3em;
+  user-select: none;
+}
+
+#search input {
+  width: 100%;
+  border: 0;
+  outline: 0;
+  background-color: transparent;
+}
+
+#search #result {
+  visibility: visible;
+  max-height: none;
+  background-color: #fff;
+  text-align: left;
+  color: #ccc;
+  padding: 0;
+  height: 0;
+  transition: .1s ease height, .1s ease padding;
+  overflow-x: hidden;
+  overflow-y: auto;
+  z-index: 1;
+}
+
+#search.active #result {
+  padding: .5em;
+  height: calc(100% - 4em);
+}
+
+#search ul {
+  padding: 0;
+  margin: 0;
+  list-style: none;
+}
+
+#search li {
+  margin-bottom: .5em;
+}
+
+#search #result div {
+  white-space: pre-wrap;
+  white-space: -moz-pre-wrap;
+  white-space: -pre-wrap;
+  white-space: -o-pre-wrap;
+  word-wrap: break-word;
+}
+
+#search #result p {
+  width: 100%;
+  text-align: center;
+  display: none;
+  margin: 0;
+  max-width: none;
+}
+
+#search.ongoing #result p {
+  display: block;
+}
+
+#search.active #result i {
+  color: #ccc;
+  text-align: center;
+  margin: 0 auto;
+  display: table;
+}
+
+#search::-webkit-input-placeholder {
+  color: rgba(255, 255, 255, .5);
+}
+
+#search:-moz-placeholder {
+  opacity: 1;
+  color: rgba(255, 255, 255, .5);
+}
+
+#search::-moz-placeholder {
+  opacity: 1;
+  color: rgba(255, 255, 255, .5);
+}
+
+#search:-ms-input-placeholder {
+  color: rgba(255, 255, 255, .5);
+}

assets/src/css/listing.css

@@ -0,0 +1,237 @@
+#listing h2 {
+  margin: 0 0 0 0.5em;
+  font-size: .9em;
+  color: rgba(0, 0, 0, 0.38);
+  font-weight: 500;
+}
+
+#listing .item div:last-of-type * {
+  text-overflow: ellipsis;
+  overflow: hidden;
+}
+
+#listing>div {
+  display: flex;
+  padding: 0;
+  flex-wrap: wrap;
+  justify-content: flex-start;
+  position: relative;
+}
+
+#listing .item {
+  background-color: #fff;
+  position: relative;
+  display: flex;
+  flex-wrap: nowrap;
+  color: #6f6f6f;
+  transition: .1s ease background, .1s ease opacity;
+  align-items: center;
+  cursor: pointer;
+}
+
+#listing .item div:last-of-type {
+  text-overflow: ellipsis;
+  white-space: nowrap;
+  overflow: hidden;
+}
+
+#listing .item p {
+  margin: 0;
+}
+
+#listing .item .size,
+#listing .item .modified {
+  font-size: 0.9em;
+}
+
+#listing .item .name {
+  font-weight: bold;
+}
+
+#listing .item i {
+  font-size: 4em;
+  margin-right: 0.1em;
+  vertical-align: bottom;
+}
+
+.message {
+  text-align: center;
+  font-size: 2em;
+  margin: 1em auto;
+  display: block !important;
+  width: 95%;
+  color: rgba(0, 0, 0, 0.3);
+  font-weight: 500;
+}
+
+.message i {
+  font-size: 2.5em;
+  margin-bottom: .2em;
+  display: block;
+}
+
+#listing.mosaic {
+  padding-top: 1em;
+  margin: 0 -0.5em;
+}
+
+#listing.mosaic .item {
+  width: calc(33% - 1em);
+  margin: .5em;
+  padding: 0.5em;
+  border-radius: 0.2em;
+  box-shadow: 0 1px 3px rgba(0, 0, 0, .06), 0 1px 2px rgba(0, 0, 0, .12);
+}
+
+#listing.mosaic .item:hover {
+  box-shadow: 0 1px 3px rgba(0, 0, 0, .12), 0 1px 2px rgba(0, 0, 0, .24) !important;
+}
+
+#listing.mosaic .header {
+  display: none;
+}
+
+#listing.mosaic .item div:first-of-type {
+  width: 5em;
+}
+
+#listing.mosaic .item div:last-of-type {
+  width: calc(100% - 5vw);
+}
+
+#listing.list {
+  flex-direction: column;
+  padding-top: 3.25em;
+  width: 100%;
+  max-width: 100%;
+  margin: 0;
+}
+
+#listing.list .item {
+  width: 100%;
+  margin: 0;
+  border: 1px solid rgba(0, 0, 0, 0.1);
+  padding: 1em;
+  border-top: 0;
+}
+
+#listing.list h2 {
+  display: none;
+}
+
+#listing .item[aria-selected=true] {
+  background: #2196f3 !important;
+  color: #fff !important;
+}
+
+#listing.list .item div:first-of-type {
+  width: 3em;
+}
+
+#listing.list .item div:first-of-type i {
+  font-size: 2em;
+}
+
+#listing.list .item div:last-of-type {
+  width: calc(100% - 3em);
+  display: flex;
+  align-items: center;
+}
+
+#listing.list .item .name {
+  width: 50%;
+}
+
+#listing.list .item .size {
+  width: 25%;
+}
+
+#listing .item.header {
+  display: none !important;
+  background-color: #ccc;
+}
+
+#listing.list .header i {
+  font-size: 1.5em;
+  vertical-align: middle;
+  margin-left: .2em;
+}
+
+#listing.list .item.header {
+  display: flex !important;
+  background: #f8f8f8;
+  position: fixed;
+  width: calc(100% - 19em);
+  top: 7em;
+  right: 1em;
+  z-index: 999;
+  padding: .85em;
+  border: 0;
+  border-bottom: 1px solid rgba(0, 0, 0, 0.1);
+}
+
+#listing.list .item.header>div:first-child {
+  width: 0;
+}
+
+#listing.list .item.header .name {
+  margin-right: 3em;
+}
+
+#listing.list .header a {
+  color: inherit;
+}
+
+#listing.list .item.header>div:first-child {
+  width: 0;
+}
+
+#listing.list .name {
+  font-weight: normal;
+}
+
+#listing.list .item.header .name {
+  margin-right: 3em;
+}
+
+#listing.list .header span {
+  vertical-align: middle;
+}
+
+#listing.list .header i {
+  opacity: 0;
+  transition: .1s ease all;
+}
+
+#listing.list .header p:hover i,
+#listing.list .header .active i {
+  opacity: 1;
+}
+
+#listing.list .item.header .active {
+  font-weight: bold;
+}
+
+#listing #multiple-selection {
+  position: fixed;
+  bottom: -4em;
+  left: 0;
+  z-index: 99999;
+  width: 100%;
+  background-color: #2196f3;
+  height: 4em;
+  display: flex !important;
+  padding: 0.5em 0.5em 0.5em 1em;
+  justify-content: space-between;
+  align-items: center;
+  transition: .2s ease bottom;
+}
+
+#listing #multiple-selection.active {
+  bottom: 0;
+}
+
+#listing #multiple-selection p,
+#listing #multiple-selection i {
+  color: #fff;
+}

assets/src/css/mobile.css

@@ -0,0 +1,113 @@
+@media (max-width: 1024px) {
+  nav {
+    width: 10em
+  }
+}
+
+@media (max-width: 1024px) {
+  #listing.list .item.header,
+  main {
+    width: calc(100% - 13em)
+  }
+}
+
+@media (max-width: 736px) {
+  #more {
+    display: inherit
+  }
+  header .overlay {
+    width: 100%;
+    height: 100%;
+    background-color: rgba(0, 0, 0, 0.1);
+  }
+  #dropdown {
+    position: fixed;
+    top: 1em;
+    right: 1em;
+    display: block;
+    background-color: #fff;
+    box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
+    transform: scale(0);
+    transition: .1s ease-in-out transform;
+    transform-origin: top right;
+    z-index: 99999;
+  }
+  #dropdown > div {
+    display: block;
+  }
+  #dropdown.active {
+    transform: scale(1);
+  }
+  #dropdown .action {
+    display: flex;
+    align-items: center;
+    border-radius: 0;
+    width: 100%;
+  }
+  #dropdown .action span:not(.counter) {
+    display: inline-block;
+    padding: .4em;
+  }
+  #dropdown .counter {
+    left: 2.25em;
+  }
+  #file-selection {
+    position: fixed;
+    bottom: 1em;
+    left: 50%;
+    transform: translateX(-50%);
+    display: flex;
+    align-items: center;
+    background: #fff;
+    box-shadow: rgba(0, 0, 0, 0.06) 0px 1px 3px, rgba(0, 0, 0, 0.12) 0px 1px 2px;
+    width: 95%;
+    max-width: 16em;
+  }
+  #file-selection .action {
+    border-radius: 50%;
+    width: auto;
+  }
+  #file-selection > span {
+    display: inline-block;
+    margin-left: 1em;
+    color: #6f6f6f;
+    margin-right: auto;
+  }
+  nav {
+    top: 0;
+    z-index: 99999;
+    background: #fff;
+    height: 100%;
+    width: 16em;
+    box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
+    transition: .1s ease left;
+    left: -17em;
+  }
+  nav.active {
+    left: 0;
+  }
+  header .search-button,
+  header>div:first-child>.action {
+    display: inherit;
+  }
+  header img {
+    display: none;
+  }
+  #listing {
+    margin-bottom: 5em;
+  }
+  #listing.list .item.header,
+  main {
+    width: calc(100% - 2em);
+  }
+  main {
+    margin: 0 1em;
+    width: calc(100% - 2em);
+  }
+  #search {
+    display: none;
+  }
+  #search.active {
+    display: block;
+  }
+}

assets/src/css/prompts.css

@@ -0,0 +1,179 @@
+.prompt {
+  position: fixed;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  background: #fff;
+  border: 1px solid rgba(0, 0, 0, 0.075);
+  box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
+  padding: 2em;
+  max-width: 25em;
+  width: 90%;
+  max-height: 95%;
+  z-index: 99999;
+  animation: .1s show forwards;
+}
+
+.overlay {
+  background-color: rgba(0, 0, 0, 0.5);
+  position: fixed;
+  top: 0;
+  left: 0;
+  height: 100%;
+  width: 100%;
+  z-index: 9999;
+  animation: .1s show forwards;
+}
+
+.prompt h3 {
+  margin: 0;
+  font-weight: 500;
+  font-size: 1.5em;
+}
+
+.prompt p {
+  font-size: .9em;
+  color: rgba(0, 0, 0, 0.8);
+  margin: .5em 0 1em;
+}
+
+.prompt input:not([type="submit"]) {
+  width: 100%;
+  border: 1px solid #dadada;
+  line-height: 1;
+  padding: .3em;
+  margin: .3em 0;
+}
+
+.prompt code {
+  word-wrap: break-word;
+}
+
+.prompt div {
+  margin-top: 1em;
+  display: flex;
+  justify-content: flex-start;
+  flex-direction: row-reverse;
+}
+
+.prompt .cancel {
+  background-color: #ECEFF1;
+  color: #37474F;
+}
+
+.prompt .cancel:hover {
+  background-color: #e9eaeb;
+}
+
+.prompt.success i,
+.prompt.error i {
+  color: #F44336;
+  display: block;
+  margin: 0 auto .15em;
+  text-align: center;
+  font-size: 5em;
+}
+
+.prompt.success h3,
+.prompt.error h3 {
+  text-align: center;
+}
+
+.prompt.error button:not(.cancel) {
+  background-color: #F44336
+}
+
+.prompt.success i {
+  color: #8BC34A;
+}
+
+.prompt.success button {
+  background-color: #8BC34A;
+}
+
+
+/* * * * * * * * * * * * * * * *
+ *        PROMPT - MOVE        *
+ * * * * * * * * * * * * * * * */
+
+.file-list {
+  max-height: 50vh;
+  overflow: auto;
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  width: 100%;
+}
+
+.file-list li {
+  width: 100%;
+  user-select: none;
+  border-radius: .2em;
+  padding: .3em;
+}
+
+.file-list li[aria-selected=true] {
+  background: #2196f3 !important;
+  color: #fff !important;
+  transition: .1s ease all;
+}
+
+.file-list li:hover {
+  background-color: #e9eaeb;
+  cursor: pointer;
+}
+
+.file-list li:before {
+  content: "folder";
+  color: #6f6f6f;
+  vertical-align: middle;
+  line-height: 1.4;
+  font-family: 'Material Icons';
+  font-size: 1.75em;
+  margin-right: .25em;
+}
+
+.file-list li[aria-selected=true]:before {
+  color: white;
+}
+
+.prompt#download {
+  max-width: 15em;
+}
+
+.prompt#download button {
+  width: 100%;
+  display: block;
+  margin: 0 0 1em;
+  background-color: #ECEFF1;
+  color: #37474F;
+}
+
+.prompt#download button:last-of-type {
+  margin-bottom: 0;
+}
+
+.help {
+  max-width: 24em;
+}
+
+.help ul {
+  padding: 0;
+  margin: 1em 0;
+  list-style: none;
+}
+
+@keyframes show {
+  0% {
+    display: none;
+    opacity: 0;
+  }
+  1% {
+    display: block;
+    opacity: 0;
+  }
+  100% {
+    display: block;
+    opacity: 1;
+  }
+}

assets/src/css/styles.css

@@ -0,0 +1,201 @@
+@import "~normalize.css/normalize.css";
+@import "./fonts.css";
+@import "./base.css";
+@import "./header.css";
+@import "./prompts.css";
+@import "./listing.css";
+@import "./editor.css";
+@import "./dashboard.css";
+
+/* * * * * * * * * * * * * * * *
+ *            ACTION           *
+ * * * * * * * * * * * * * * * */
+
+.action {
+  display: inline-block;
+  cursor: pointer;
+  transition: 0.2s ease all;
+  border: 0;
+  margin: 0;
+  color: #546E7A;
+  border-radius: 50%;
+  background: transparent;
+  padding: 0;
+  box-shadow: 0 0 0 0;
+  vertical-align: middle;
+  text-align: left;
+  position: relative;
+}
+
+.action.disabled {
+  opacity: 0.2;
+  cursor: not-allowed;
+}
+
+.action i {
+  padding: 0.4em;
+  transition: .1s ease-in-out all;
+  border-radius: 50%;
+}
+
+.action:hover {
+  background-color: rgba(0, 0, 0, .1);
+}
+
+.action ul {
+  position: absolute;
+  top: 0;
+  color: #7d7d7d;
+  list-style: none;
+  margin: 0;
+  padding: 0;
+  flex-direction: column;
+  display: flex;
+}
+
+.action ul li {
+  line-height: 1;
+  padding: .7em;
+  transition: .1s ease background-color;
+}
+
+.action ul li:hover {
+  background-color: rgba(0, 0, 0, 0.04);
+}
+
+#click-overlay {
+  display: none;
+  position: fixed;
+  cursor: pointer;
+  top: 0;
+  left: 0;
+  height: 100%;
+  width: 100%;
+}
+
+#click-overlay.active {
+  display: block;
+}
+
+.action .counter {
+  display: block;
+  position: absolute;
+  bottom: 0;
+  right: 0;
+  background: #2196f3;
+  color: #fff;
+  border-radius: 50%;
+  font-size: .75em;
+  width: 1.5em;
+  height: 1.5em;
+  text-align: center;
+  line-height: 1.25em;
+  border: 2px solid white;
+}
+
+
+/* PREVIEWER */
+
+#previewer {
+  background-color: rgba(0, 0, 0, 0.9);
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 100%;
+  z-index: 9999;
+  overflow: hidden;
+}
+
+#previewer .bar {
+  width: 100%;
+  text-align: right;
+  display: flex;
+  padding: 0.5em 0.5em 0.5em 1em;
+  height: 3.7em;
+}
+
+#previewer .action:first-of-type {
+  margin-right: auto;
+}
+
+#previewer .action i {
+  color: #fff;
+}
+
+#previewer .action:hover {
+  background-color: rgba(255, 255, 255, 0.3)
+}
+
+#previewer .action span {
+  display: none;
+}
+
+#previewer .preview {
+  margin: 2em auto 4em;
+  max-width: 80%;
+  text-align: center;
+  height: calc(100vh - 9.7em);
+}
+
+#previewer .preview pre {
+  text-align: left;
+  overflow: auto;
+}
+
+#previewer .preview pre,
+#previewer .preview video,
+#previewer .preview img {
+  max-height: 100%;
+  margin: 0;
+}
+
+#previewer .pdf {
+  width: 100%;
+  height: 100%;
+}
+
+#previewer h2.message {
+  color: rgba(255, 255, 255, 0.5)
+}
+
+
+/* * * * * * * * * * * * * * * *
+ *            PROMPT           *
+ * * * * * * * * * * * * * * * */
+
+
+/* * * * * * * * * * * * * * * *
+ *            FOOTER           *
+ * * * * * * * * * * * * * * * */
+
+.credits {
+  font-size: 0.6em;
+  margin: 3em 2.5em;
+  color: #a5a5a5;
+}
+
+.credits span {
+  display: block;
+  margin: .3em 0;
+}
+
+.credits a,
+.credits a:hover {
+  color: inherit;
+  cursor: pointer;
+}
+
+
+/* * * * * * * * * * * * * * * *
+ *          ANIMATIONS         *
+ * * * * * * * * * * * * * * * */
+
+@keyframes spin {
+  100% {
+    -webkit-transform: rotate(-360deg);
+    transform: rotate(-360deg);
+  }
+}
+
+@import './mobile.css';

assets/src/main.js

@@ -0,0 +1,15 @@
+import Vue from 'vue'
+import App from './App'
+import store from './store'
+import router from './router'
+
+Vue.config.productionTip = true
+
+/* eslint-disable no-new */
+new Vue({
+  el: '#app',
+  store,
+  router,
+  template: '<App/>',
+  components: { App }
+})

assets/src/router/index.js

@@ -0,0 +1,159 @@
+import Vue from 'vue'
+import Router from 'vue-router'
+import Login from '@/components/Login'
+import Main from '@/components/Main'
+import Files from '@/components/Files'
+import Users from '@/components/Users'
+import User from '@/components/User'
+import GlobalSettings from '@/components/GlobalSettings'
+import ProfileSettings from '@/components/ProfileSettings'
+import error403 from '@/components/errors/403'
+import error404 from '@/components/errors/404'
+import error500 from '@/components/errors/500'
+import auth from '@/utils/auth.js'
+import store from '@/store'
+
+Vue.use(Router)
+
+const router = new Router({
+  base: document.querySelector('meta[name="base"]').getAttribute('content'),
+  mode: 'history',
+  routes: [
+    {
+      path: '/login',
+      name: 'Login',
+      component: Login,
+      beforeEnter: function (to, from, next) {
+        auth.loggedIn()
+        .then(() => {
+          next({ path: '/files' })
+        })
+        .catch(() => {
+          document.title = 'Login'
+          next()
+        })
+      }
+    },
+    {
+      path: '/',
+      redirect: {
+        path: '/files/'
+      }
+    },
+    {
+      path: '/*',
+      component: Main,
+      meta: {
+        requiresAuth: true
+      },
+      children: [
+        {
+          path: '/files/*',
+          name: 'Files',
+          component: Files
+        },
+        {
+          path: '/settings',
+          name: 'Settings',
+          redirect: {
+            path: '/settings/profile'
+          }
+        },
+        {
+          path: '/settings/profile',
+          name: 'Profile Settings',
+          component: ProfileSettings
+        },
+        {
+          path: '/settings/global',
+          name: 'Global Settings',
+          component: GlobalSettings,
+          meta: {
+            requiresAdmin: true
+          }
+        },
+        {
+          path: '/403',
+          name: 'Forbidden',
+          component: error403
+        },
+        {
+          path: '/404',
+          name: 'Not Found',
+          component: error404
+        },
+        {
+          path: '/500',
+          name: 'Internal Server Error',
+          component: error500
+        },
+        {
+          path: '/users',
+          name: 'Users',
+          component: Users,
+          meta: {
+            requiresAdmin: true
+          }
+        },
+        {
+          path: '/users/',
+          redirect: {
+            path: '/users'
+          }
+        },
+        {
+          path: '/users/*',
+          name: 'User',
+          component: User,
+          meta: {
+            requiresAdmin: true
+          }
+        },
+        {
+          path: '/*',
+          redirect: {
+            name: 'Files'
+          }
+        }
+      ]
+    }
+  ]
+})
+
+router.beforeEach((to, from, next) => {
+  document.title = to.name
+
+  if (to.matched.some(record => record.meta.requiresAuth)) {
+    // this route requires auth, check if logged in
+    // if not, redirect to login page.
+    auth.loggedIn()
+      .then(() => {
+        if (to.matched.some(record => record.meta.requiresAdmin)) {
+          if (store.state.user.admin) {
+            next()
+            return
+          }
+
+          next({
+            path: '/403'
+          })
+
+          return
+        }
+
+        next()
+      })
+      .catch(e => {
+        next({
+          path: '/login',
+          query: { redirect: to.fullPath }
+        })
+      })
+
+    return
+  }
+
+  next()
+})
+
+export default router

assets/src/store/getters.js

@@ -0,0 +1,5 @@
+const getters = {
+  selectedCount: state => state.selected.length
+}
+
+export default getters

assets/src/store/index.js

@@ -0,0 +1,27 @@
+import Vue from 'vue'
+import Vuex from 'vuex'
+import mutations from './mutations'
+import getters from './getters'
+
+Vue.use(Vuex)
+
+const state = {
+  user: {},
+  req: {},
+  plugins: window.plugins || [],
+  baseURL: document.querySelector('meta[name="base"]').getAttribute('content'),
+  jwt: '',
+  loading: false,
+  reload: false,
+  selected: [],
+  multiple: false,
+  show: null,
+  showMessage: null
+}
+
+export default new Vuex.Store({
+  strict: process.env.NODE_ENV !== 'production',
+  state,
+  getters,
+  mutations
+})

assets/src/store/mutations.js

@@ -0,0 +1,46 @@
+const mutations = {
+  closeHovers: state => {
+    state.show = null
+    state.showMessage = null
+  },
+  showHover: (state, value) => {
+    if (typeof value !== 'object') {
+      state.show = value
+      return
+    }
+
+    state.show = value.prompt
+    state.showMessage = value.message
+  },
+  showError: (state, value) => {
+    state.show = 'error'
+    state.showMessage = value
+  },
+  showSuccess: (state, value) => {
+    state.show = 'success'
+    state.showMessage = value
+  },
+  setLoading: (state, value) => { state.loading = value },
+  setReload: (state, value) => { state.reload = value },
+  setUser: (state, value) => (state.user = value),
+  setUserCSS: (state, value) => (state.user.css = value),
+  setJWT: (state, value) => (state.jwt = value),
+  multiple: (state, value) => (state.multiple = value),
+  addSelected: (state, value) => (state.selected.push(value)),
+  removeSelected: (state, value) => {
+    let i = state.selected.indexOf(value)
+    if (i === -1) return
+    state.selected.splice(i, 1)
+  },
+  resetSelected: (state) => {
+    state.selected = []
+  },
+  listingDisplay: (state, value) => {
+    state.req.display = value
+  },
+  updateRequest: (state, value) => {
+    state.req = value
+  }
+}
+
+export default mutations

assets/src/utils/api.js

@@ -0,0 +1,424 @@
+import store from '@/store'
+
+const ssl = (window.location.protocol === 'https:')
+
+function removePrefix (url) {
+  if (url.startsWith('/files')) {
+    return url.slice(6)
+  }
+
+  return url
+}
+
+function fetch (url) {
+  url = removePrefix(url)
+
+  return new Promise((resolve, reject) => {
+    let request = new window.XMLHttpRequest()
+    request.open('GET', `${store.state.baseURL}/api/resource${url}`, true)
+    request.setRequestHeader('Authorization', `Bearer ${store.state.jwt}`)
+
+    request.onload = () => {
+      switch (request.status) {
+        case 200:
+          resolve(JSON.parse(request.responseText))
+          break
+        default:
+          reject({
+            message: request.responseText,
+            status: request.status
+          })
+          break
+      }
+    }
+    request.onerror = (error) => reject(error)
+    request.send()
+  })
+}
+
+function rm (url) {
+  url = removePrefix(url)
+
+  return new Promise((resolve, reject) => {
+    let request = new window.XMLHttpRequest()
+    request.open('DELETE', `${store.state.baseURL}/api/resource${url}`, true)
+    request.setRequestHeader('Authorization', `Bearer ${store.state.jwt}`)
+
+    request.onload = () => {
+      if (request.status === 200) {
+        resolve(request.responseText)
+      } else {
+        reject(request.responseText)
+      }
+    }
+
+    request.onerror = (error) => reject(error)
+    request.send()
+  })
+}
+
+function post (url, content = '') {
+  url = removePrefix(url)
+
+  return new Promise((resolve, reject) => {
+    let request = new window.XMLHttpRequest()
+    request.open('POST', `${store.state.baseURL}/api/resource${url}`, true)
+    request.setRequestHeader('Authorization', `Bearer ${store.state.jwt}`)
+
+    request.onload = () => {
+      if (request.status === 200) {
+        resolve(request.responseText)
+      } else {
+        reject(request.responseText)
+      }
+    }
+
+    request.onerror = (error) => reject(error)
+    request.send(content)
+  })
+}
+
+function put (url, content = '') {
+  url = removePrefix(url)
+
+  return new Promise((resolve, reject) => {
+    let request = new window.XMLHttpRequest()
+    request.open('PUT', `${store.state.baseURL}/api/resource${url}`, true)
+    request.setRequestHeader('Authorization', `Bearer ${store.state.jwt}`)
+
+    request.onload = () => {
+      if (request.status === 200) {
+        resolve(request.responseText)
+      } else {
+        reject(request.responseText)
+      }
+    }
+
+    request.onerror = (error) => reject(error)
+    request.send(content)
+  })
+}
+
+function move (oldLink, newLink) {
+  oldLink = removePrefix(oldLink)
+  newLink = removePrefix(newLink)
+
+  return new Promise((resolve, reject) => {
+    let request = new window.XMLHttpRequest()
+    request.open('PATCH', `${store.state.baseURL}/api/resource${oldLink}`, true)
+    request.setRequestHeader('Authorization', `Bearer ${store.state.jwt}`)
+    request.setRequestHeader('Destination', newLink)
+
+    request.onload = () => {
+      if (request.status === 200) {
+        resolve(request.responseText)
+      } else {
+        reject(request.responseText)
+      }
+    }
+
+    request.onerror = (error) => reject(error)
+    request.send()
+  })
+}
+
+function checksum (url, algo) {
+  url = removePrefix(url)
+
+  return new Promise((resolve, reject) => {
+    let request = new window.XMLHttpRequest()
+    request.open('GET', `${store.state.baseURL}/api/checksum${url}?algo=${algo}`, true)
+    request.setRequestHeader('Authorization', `Bearer ${store.state.jwt}`)
+
+    request.onload = () => {
+      if (request.status === 200) {
+        resolve(request.responseText)
+      } else {
+        reject(request.responseText)
+      }
+    }
+    request.onerror = (error) => reject(error)
+    request.send()
+  })
+}
+
+function command (url, command, onmessage, onclose) {
+  let protocol = (ssl ? 'wss:' : 'ws:')
+  url = removePrefix(url)
+  url = `${protocol}//${window.location.hostname}${store.state.baseURL}/api/command${url}?token=${store.state.jwt}`
+
+  let conn = new window.WebSocket(url)
+  conn.onopen = () => conn.send(command)
+  conn.onmessage = onmessage
+  conn.onclose = onclose
+}
+
+function search (url, search, onmessage, onclose) {
+  let protocol = (ssl ? 'wss:' : 'ws:')
+  url = removePrefix(url)
+  url = `${protocol}//${window.location.hostname}${store.state.baseURL}/api/search${url}?token=${store.state.jwt}`
+
+  let conn = new window.WebSocket(url)
+  conn.onopen = () => conn.send(search)
+  conn.onmessage = onmessage
+  conn.onclose = onclose
+}
+
+function download (format, ...files) {
+  let url = `${store.state.baseURL}/api/download`
+
+  if (files.length === 1) {
+    url += removePrefix(files[0]) + '?'
+  } else {
+    let arg = ''
+
+    for (let file of files) {
+      arg += removePrefix(file) + ','
+    }
+
+    arg = arg.substring(0, arg.length - 1)
+    arg = encodeURIComponent(arg)
+    url += `/?files=${arg}&`
+  }
+
+  url += `token=${store.state.jwt}`
+
+  if (format !== null) {
+    url += `&format=${format}`
+  }
+
+  window.open(url)
+}
+
+function getUsers () {
+  return new Promise((resolve, reject) => {
+    let request = new window.XMLHttpRequest()
+    request.open('GET', `${store.state.baseURL}/api/users/`, true)
+    request.setRequestHeader('Authorization', `Bearer ${store.state.jwt}`)
+
+    request.onload = () => {
+      switch (request.status) {
+        case 200:
+          resolve(JSON.parse(request.responseText))
+          break
+        default:
+          reject(request.responseText)
+          break
+      }
+    }
+    request.onerror = (error) => reject(error)
+    request.send()
+  })
+}
+
+function getUser (id) {
+  return new Promise((resolve, reject) => {
+    let request = new window.XMLHttpRequest()
+    request.open('GET', `${store.state.baseURL}/api/users/${id}`, true)
+    request.setRequestHeader('Authorization', `Bearer ${store.state.jwt}`)
+
+    request.onload = () => {
+      switch (request.status) {
+        case 200:
+          resolve(JSON.parse(request.responseText))
+          break
+        default:
+          reject(request.responseText)
+          break
+      }
+    }
+    request.onerror = (error) => reject(error)
+    request.send()
+  })
+}
+
+function newUser (user) {
+  return new Promise((resolve, reject) => {
+    let request = new window.XMLHttpRequest()
+    request.open('POST', `${store.state.baseURL}/api/users/`, true)
+    request.setRequestHeader('Authorization', `Bearer ${store.state.jwt}`)
+
+    request.onload = () => {
+      switch (request.status) {
+        case 201:
+          resolve(request.getResponseHeader('Location'))
+          break
+        default:
+          reject(request.responseText)
+          break
+      }
+    }
+    request.onerror = (error) => reject(error)
+    request.send(JSON.stringify(user))
+  })
+}
+
+function updateUser (user) {
+  return new Promise((resolve, reject) => {
+    let request = new window.XMLHttpRequest()
+    request.open('PUT', `${store.state.baseURL}/api/users/${user.ID}`, true)
+    request.setRequestHeader('Authorization', `Bearer ${store.state.jwt}`)
+
+    request.onload = () => {
+      switch (request.status) {
+        case 200:
+          resolve(request.getResponseHeader('Location'))
+          break
+        default:
+          reject(request.responseText)
+          break
+      }
+    }
+    request.onerror = (error) => reject(error)
+    request.send(JSON.stringify(user))
+  })
+}
+
+function updatePassword (password) {
+  return new Promise((resolve, reject) => {
+    let request = new window.XMLHttpRequest()
+    request.open('PUT', `${store.state.baseURL}/api/users/change-password`, true)
+    request.setRequestHeader('Authorization', `Bearer ${store.state.jwt}`)
+
+    request.onload = () => {
+      switch (request.status) {
+        case 200:
+          resolve()
+          break
+        default:
+          reject(request.responseText)
+          break
+      }
+    }
+    request.onerror = (error) => reject(error)
+    request.send(JSON.stringify({ 'password': password }))
+  })
+}
+
+function updateCSS (css) {
+  return new Promise((resolve, reject) => {
+    let request = new window.XMLHttpRequest()
+    request.open('PUT', `${store.state.baseURL}/api/users/change-css`, true)
+    request.setRequestHeader('Authorization', `Bearer ${store.state.jwt}`)
+
+    request.onload = () => {
+      switch (request.status) {
+        case 200:
+          resolve()
+          break
+        default:
+          reject(request.responseText)
+          break
+      }
+    }
+    request.onerror = (error) => reject(error)
+    request.send(JSON.stringify({ 'css': css }))
+  })
+}
+
+function getCommands () {
+  return new Promise((resolve, reject) => {
+    let request = new window.XMLHttpRequest()
+    request.open('GET', `${store.state.baseURL}/api/commands/`, true)
+    request.setRequestHeader('Authorization', `Bearer ${store.state.jwt}`)
+
+    request.onload = () => {
+      switch (request.status) {
+        case 200:
+          resolve(JSON.parse(request.responseText))
+          break
+        default:
+          reject(request.responseText)
+          break
+      }
+    }
+    request.onerror = (error) => reject(error)
+    request.send()
+  })
+}
+
+function updateCommands (commands) {
+  return new Promise((resolve, reject) => {
+    let request = new window.XMLHttpRequest()
+    request.open('PUT', `${store.state.baseURL}/api/commands/`, true)
+    request.setRequestHeader('Authorization', `Bearer ${store.state.jwt}`)
+
+    request.onload = () => {
+      switch (request.status) {
+        case 200:
+          resolve()
+          break
+        default:
+          reject(request.responseText)
+          break
+      }
+    }
+    request.onerror = (error) => reject(error)
+    request.send(JSON.stringify(commands))
+  })
+}
+
+function getPlugins () {
+  return new Promise((resolve, reject) => {
+    let request = new window.XMLHttpRequest()
+    request.open('GET', `${store.state.baseURL}/api/plugins/`, true)
+    request.setRequestHeader('Authorization', `Bearer ${store.state.jwt}`)
+
+    request.onload = () => {
+      switch (request.status) {
+        case 200:
+          resolve(JSON.parse(request.responseText))
+          break
+        default:
+          reject(request.responseText)
+          break
+      }
+    }
+    request.onerror = (error) => reject(error)
+    request.send()
+  })
+}
+
+function updatePlugins (data) {
+  return new Promise((resolve, reject) => {
+    let request = new window.XMLHttpRequest()
+    request.open('PUT', `${store.state.baseURL}/api/plugins/`, true)
+    request.setRequestHeader('Authorization', `Bearer ${store.state.jwt}`)
+
+    request.onload = () => {
+      switch (request.status) {
+        case 200:
+          resolve()
+          break
+        default:
+          reject(request.responseText)
+          break
+      }
+    }
+    request.onerror = (error) => reject(error)
+    request.send(JSON.stringify(data))
+  })
+}
+
+export default {
+  delete: rm,
+  fetch,
+  checksum,
+  move,
+  put,
+  post,
+  command,
+  search,
+  download,
+  getUser,
+  newUser,
+  updateUser,
+  getUsers,
+  updatePassword,
+  updateCSS,
+  getCommands,
+  updateCommands,
+  removePrefix,
+  getPlugins,
+  updatePlugins
+}

assets/src/utils/auth.js

@@ -0,0 +1,60 @@
+import cookie from './cookie'
+import store from '@/store'
+import router from '@/router'
+
+function parseToken (token) {
+  document.cookie = `auth=${token}; max-age=86400; path=${store.state.baseURL}`
+  let res = token.split('.')
+  let user = JSON.parse(window.atob(res[1]))
+  store.commit('setJWT', token)
+  store.commit('setUser', user)
+}
+
+function loggedIn () {
+  return new Promise((resolve, reject) => {
+    let request = new window.XMLHttpRequest()
+    request.open('GET', `${store.state.baseURL}/api/auth/renew`, true)
+    request.setRequestHeader('Authorization', `Bearer ${cookie('auth')}`)
+
+    request.onload = () => {
+      if (request.status === 200) {
+        parseToken(request.responseText)
+        resolve()
+      } else {
+        reject()
+      }
+    }
+    request.onerror = () => reject()
+    request.send()
+  })
+}
+
+function login (user, password) {
+  let data = {username: user, password: password}
+  return new Promise((resolve, reject) => {
+    let request = new window.XMLHttpRequest()
+    request.open('POST', `${store.state.baseURL}/api/auth/get`, true)
+
+    request.onload = () => {
+      if (request.status === 200) {
+        parseToken(request.responseText)
+        resolve()
+      } else {
+        reject(request.responseText)
+      }
+    }
+    request.onerror = () => reject()
+    request.send(JSON.stringify(data))
+  })
+}
+
+function logout () {
+  document.cookie = `auth='nothing'; max-age=0; path=${store.state.baseURL}`
+  router.push({path: '/login'})
+}
+
+export default {
+  loggedIn: loggedIn,
+  login: login,
+  logout: logout
+}

assets/src/utils/buttons.js

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

assets/src/utils/codemirror.js

@@ -0,0 +1,60 @@
+// Most of the code from this file comes from:
+// https://github.com/codemirror/CodeMirror/blob/master/addon/mode/loadmode.js
+import * as CodeMirror from 'codemirror'
+import store from '@/store'
+
+// Make CodeMirror available globally so the modes' can register themselves.
+window.CodeMirror = CodeMirror
+CodeMirror.modeURL = store.state.baseURL + '/static/js/codemirror/mode/%N/%N.js'
+
+var loading = {}
+
+function splitCallback (cont, n) {
+  var countDown = n
+  return function () {
+    if (--countDown === 0) cont()
+  }
+}
+
+function ensureDeps (mode, cont) {
+  var deps = CodeMirror.modes[mode].dependencies
+  if (!deps) return cont()
+  var missing = []
+  for (var i = 0; i < deps.length; ++i) {
+    if (!CodeMirror.modes.hasOwnProperty(deps[i])) missing.push(deps[i])
+  }
+  if (!missing.length) return cont()
+  var split = splitCallback(cont, missing.length)
+  for (i = 0; i < missing.length; ++i) CodeMirror.requireMode(missing[i], split)
+}
+
+CodeMirror.requireMode = function (mode, cont) {
+  if (typeof mode !== 'string') mode = mode.name
+  if (CodeMirror.modes.hasOwnProperty(mode)) return ensureDeps(mode, cont)
+  if (loading.hasOwnProperty(mode)) return loading[mode].push(cont)
+
+  var file = CodeMirror.modeURL.replace(/%N/g, mode)
+
+  var script = document.createElement('script')
+  script.src = file
+  var others = document.getElementsByTagName('script')[0]
+  var list = loading[mode] = [cont]
+
+  CodeMirror.on(script, 'load', function () {
+    ensureDeps(mode, function () {
+      for (var i = 0; i < list.length; ++i) list[i]()
+    })
+  })
+
+  others.parentNode.insertBefore(script, others)
+}
+
+CodeMirror.autoLoadMode = function (instance, mode) {
+  if (CodeMirror.modes.hasOwnProperty(mode)) return
+
+  CodeMirror.requireMode(mode, function () {
+    instance.setOption('mode', mode)
+  })
+}
+
+export default CodeMirror

assets/src/utils/cookie.js

@@ -0,0 +1,4 @@
+export default function (name) {
+  let re = new RegExp('(?:(?:^|.*;\\s*)' + name + '\\s*\\=\\s*([^;]*).*$)|^.*$')
+  return document.cookie.replace(re, '$1')
+}

assets/src/utils/css.js

@@ -0,0 +1,28 @@
+export default function getRule (rules) {
+  for (let i = 0; i < rules.length; i++) {
+    rules[i] = rules[i].toLowerCase()
+  }
+
+  let result = null
+  let find = Array.prototype.find
+
+  find.call(document.styleSheets, styleSheet => {
+    result = find.call(styleSheet.cssRules, cssRule => {
+      let found = false
+
+      if (cssRule instanceof window.CSSStyleRule) {
+        for (let i = 0; i < rules.length; i++) {
+          if (cssRule.selectorText.toLowerCase() === rules[i]) {
+            found = true
+          }
+        }
+      }
+
+      return found
+    })
+
+    return result != null
+  })
+
+  return result
+}

assets/src/utils/url.js

@@ -0,0 +1,12 @@
+function removeLastDir (url) {
+  var arr = url.split('/')
+  if (arr.pop() === '') {
+    arr.pop()
+  }
+
+  return arr.join('/')
+}
+
+export default {
+  removeLastDir: removeLastDir
+}