chore: add frontend

frontend/.circleci/config.yml

@@ -0,0 +1,15 @@
+version: 2
+jobs:
+  build:
+    docker:
+      - image: circleci/node
+    steps:
+      - checkout
+      - run: npm install
+      - run: npm run lint
+      - run: npm run build
+workflows:
+  version: 2
+  build:
+    jobs:
+      - build

frontend/.gitignore

@@ -0,0 +1,21 @@
+.DS_Store
+node_modules
+/dist
+
+# local env files
+.env.local
+.env.*.local
+
+# Log files
+npm-debug.log*
+yarn-debug.log*
+yarn-error.log*
+
+# Editor directories and files
+.idea
+.vscode
+*.suo
+*.ntvs*
+*.njsproj
+*.sln
+*.sw*

frontend/.tx/config

@@ -0,0 +1,10 @@
+[main]
+host = https://www.transifex.com
+lang_map = pt_BR: pt-br, zh_CN: zh-cn, zh_HK: zh-hk, zh_TW: zh-tw
+
+[file-browser.file-browser]
+file_filter = src/i18n/<lang>.json
+minimum_perc = 50
+source_file = src/i18n/en.json
+source_lang = en
+type = KEYVALUEJSON

frontend/README.md

@@ -0,0 +1,26 @@
+# File Browser Front-end
+
+[![CircleCI](https://img.shields.io/circleci/project/github/filebrowser/frontend.svg?style=flat-square)](https://circleci.com/gh/filebrowser/frontend)
+[![npm](https://img.shields.io/npm/v/filebrowser-frontend.svg?style=flat-square)]()
+[![standard-readme compliant](https://img.shields.io/badge/readme%20style-standard-brightgreen.svg?style=flat-square)](https://github.com/RichardLitt/standard-readme)
+[![Chat IRC](https://img.shields.io/badge/freenode-%23filebrowser-blue.svg?style=flat-square)](http://webchat.freenode.net/?channels=%23filebrowser)
+
+> This is an example file with default selections.
+
+## Install
+
+```
+npm install filebrowser-frontend
+```
+
+## Usage
+
+This package is not prepared to be used by other projects than [File Browser](https://github.com/filebrowser/filebrowser) itself.
+
+## Contribute
+
+Check the [community repository](https://github.com/filebrowser/community) for more information.
+
+## License
+
+[Apache 2.0](./LICENSE) File Browser Contributors

frontend/babel.config.js

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

frontend/package.json

@@ -0,0 +1,60 @@
+{
+  "name": "filebrowser-frontend",
+  "version": "2.0.0",
+  "private": true,
+  "scripts": {
+    "serve": "vue-cli-service serve",
+    "build": "vue-cli-service build",
+    "watch": "vue-cli-service build --watch",
+    "lint": "vue-cli-service lint --fix"
+  },
+  "dependencies": {
+    "ace-builds": "^1.4.4",
+    "clipboard": "^2.0.4",
+    "js-base64": "^2.5.1",
+    "lodash.clonedeep": "^4.5.0",
+    "material-design-icons": "^3.0.1",
+    "moment": "^2.24.0",
+    "normalize.css": "^8.0.1",
+    "noty": "^3.2.0-beta",
+    "qrcode.vue": "^1.6.1",
+    "vue": "^2.6.10",
+    "vue-i18n": "^8.11.2",
+    "vue-router": "^3.0.6",
+    "vuex": "^3.1.1",
+    "vuex-router-sync": "^5.0.0"
+  },
+  "devDependencies": {
+    "@vue/cli-plugin-babel": "^3.7.0",
+    "@vue/cli-plugin-eslint": "^3.7.0",
+    "@vue/cli-service": "^3.7.0",
+    "babel-eslint": "^10.0.1",
+    "eslint": "^5.16.0",
+    "eslint-plugin-vue": "^5.2.2",
+    "vue-template-compiler": "^2.6.10"
+  },
+  "eslintConfig": {
+    "root": true,
+    "env": {
+      "node": true
+    },
+    "extends": [
+      "plugin:vue/essential",
+      "eslint:recommended"
+    ],
+    "rules": {},
+    "parserOptions": {
+      "parser": "babel-eslint"
+    }
+  },
+  "postcss": {
+    "plugins": {
+      "autoprefixer": {}
+    }
+  },
+  "browserslist": [
+    "> 1%",
+    "last 2 versions",
+    "not ie <= 8"
+  ]
+}

frontend/public/img/icons/browserconfig.xml

@@ -0,0 +1,9 @@
+<?xml version="1.0" encoding="utf-8"?>
+<browserconfig>
+    <msapplication>
+        <tile>
+            <square150x150logo src="/mstile-150x150.png"/>
+            <TileColor>#455a64</TileColor>
+        </tile>
+    </msapplication>
+</browserconfig>

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

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

frontend/public/img/logo.svg

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

frontend/public/index.html

@@ -0,0 +1,111 @@
+<!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">
+
+  [{[ if .ReCaptcha -]}]
+    <script src="[{[ .ReCaptchaHost ]}]/recaptcha/api.js?render=explicit"></script>
+  [{[ end ]}]
+
+  <title>[{[ if .Name -]}][{[ .Name ]}][{[ else ]}]File Browser[{[ end ]}]</title>
+
+  <link rel="icon" type="image/png" sizes="32x32" href="/[{[ .StaticURL ]}]/img/icons/favicon-32x32.png">
+  <link rel="icon" type="image/png" sizes="16x16" href="/[{[ .StaticURL ]}]/img/icons/favicon-16x16.png">
+  <!-- Add to home screen for Android and modern mobile browsers -->
+  <link rel="manifest" href="/[{[ .StaticURL ]}]/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="/[{[ .StaticURL ]}]/img/icons/apple-touch-icon-152x152.png">
+
+  <!-- Add to home screen for Windows -->
+  <meta name="msapplication-TileImage" content="/[{[ .StaticURL ]}]/img/icons/msapplication-icon-144x144.png">
+  <meta name="msapplication-TileColor" content="#2979ff">
+
+  <!-- Inject Some Variables -->
+  <script>window.FileBrowser = JSON.parse(`[{[ .Json ]}]`)</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>
+
+  [{[ if .CSS -]}]
+    <link rel="stylesheet" href="/[{[ .StaticURL ]}]/custom.css" />
+  [{[ end ]}]
+</body>
+</html>

frontend/public/manifest.json

@@ -0,0 +1,20 @@
+{
+  "name": "File Browser",
+  "short_name": "File Browser",
+  "icons": [
+    {
+      "src": "./img/icons/android-chrome-192x192.png",
+      "sizes": "192x192",
+      "type": "image/png"
+    },
+    {
+      "src": "./static/img/icons/android-chrome-512x512.png",
+      "sizes": "512x512",
+      "type": "image/png"
+    }
+  ],
+  "start_url": "./",
+  "display": "standalone",
+  "background_color": "#ffffff",
+  "theme_color": "#455a64"
+}

frontend/src/App.vue

@@ -0,0 +1,23 @@
+<template>
+  <div>
+    <router-view></router-view>
+  </div>
+</template>
+
+<script>
+export default {
+  name: 'app',
+  mounted () {
+    const loading = document.getElementById('loading')
+    loading.classList.add('done')
+
+    setTimeout(function () {
+      loading.parentNode.removeChild(loading)
+    }, 200)
+  }
+}
+</script>
+
+<style>
+@import './css/styles.css';
+</style>

frontend/src/api/commands.js

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

frontend/src/api/files.js

@@ -0,0 +1,143 @@
+import { fetchURL, removePrefix } from './utils'
+import { baseURL } from '@/utils/constants'
+import store from '@/store'
+
+export async function fetch (url) {
+  url = removePrefix(url)
+
+  const res = await fetchURL(`/api/resources${url}`, {})
+
+  if (res.status === 200) {
+    let data = await res.json()
+    data.url = `/files${url}`
+
+    if (data.isDir) {
+      if (!data.url.endsWith('/')) data.url += '/'
+      data.items = data.items.map((item, index) => {
+        item.index = index
+        item.url = `${data.url}${encodeURIComponent(item.name)}`
+
+        if (item.isDir) {
+          item.url += '/'
+        }
+
+        return item
+      })
+    }
+
+    return data
+  } else {
+    throw new Error(res.status)
+  }
+}
+
+async function resourceAction (url, method, content) {
+  url = removePrefix(url)
+
+  let opts = { method }
+
+  if (content) {
+    opts.body = content
+  }
+
+  const res = await fetchURL(`/api/resources${url}`, opts)
+
+  if (res.status !== 200) {
+    throw new Error(res.responseText)
+  } else {
+    return res
+  }
+}
+
+export async function remove (url) {
+  return resourceAction(url, 'DELETE')
+}
+
+export async function put (url, content = '') {
+  return resourceAction(url, 'PUT', content)
+}
+
+export function download (format, ...files) {
+  let url = `${baseURL}/api/raw`
+
+  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}&`
+  }
+
+  if (format !== null) {
+    url += `algo=${format}&`
+  }
+
+  url += `auth=${store.state.jwt}`
+  window.open(url)
+}
+
+export async function post (url, content = '', overwrite = false, onupload) {
+  url = removePrefix(url)
+
+  return new Promise((resolve, reject) => {
+    let request = new XMLHttpRequest()
+    request.open('POST', `${baseURL}/api/resources${url}?override=${overwrite}`, true)
+    request.setRequestHeader('X-Auth', store.state.jwt)
+
+    if (typeof onupload === 'function') {
+      request.upload.onprogress = onupload
+    }
+
+    // Send a message to user before closing the tab during file upload
+    window.onbeforeunload = () => "Files are being uploaded."
+
+    request.onload = () => {
+      if (request.status === 200) {
+        resolve(request.responseText)
+      } else if (request.status === 409) {
+        reject(request.status)
+      } else {
+        reject(request.responseText)
+      }
+    }
+
+    request.onerror = (error) => {
+      reject(error)
+    }
+
+    request.send(content)
+    // Upload is done no more message before closing the tab 
+  }).finally(() => { window.onbeforeunload = null })
+}
+
+function moveCopy (items, copy = false) {
+  let promises = []
+
+  for (let item of items) {
+    const from = removePrefix(item.from)
+    const to = encodeURIComponent(removePrefix(item.to))
+    const url = `${from}?action=${copy ? 'copy' : 'rename'}&destination=${to}`
+    promises.push(resourceAction(url, 'PATCH'))
+  }
+
+  return Promise.all(promises)
+}
+
+export function move (items) {
+  return moveCopy(items)
+}
+
+export function copy (items) {
+  return moveCopy(items, true)
+}
+
+export async function checksum (url, algo) {
+  const data = await resourceAction(`${url}?checksum=${algo}`, 'GET')
+  return (await data.json()).checksums[algo]
+}

frontend/src/api/index.js

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

frontend/src/api/search.js

@@ -0,0 +1,8 @@
+import { fetchJSON, removePrefix } from './utils'
+
+export default async function search (url, query) {
+  url = removePrefix(url)
+  query = encodeURIComponent(query)
+
+  return fetchJSON(`/api/search${url}?query=${query}`, {})
+}

frontend/src/api/settings.js

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

frontend/src/api/share.js

@@ -0,0 +1,32 @@
+import { fetchURL, fetchJSON, removePrefix } from './utils'
+
+export async function getHash(hash) {
+  return fetchJSON(`/api/public/share/${hash}`)
+}
+
+export async function get(url) {
+  url = removePrefix(url)
+  return fetchJSON(`/api/share${url}`)
+}
+
+export async function remove(hash) {
+  const res = await fetchURL(`/api/share/${hash}`, {
+    method: 'DELETE'
+  })
+
+  if (res.status !== 200) {
+    throw new Error(res.status)
+  }
+}
+
+export async function create(url, expires = '', unit = 'hours') {
+  url = removePrefix(url)
+  url = `/api/share${url}`
+  if (expires !== '') {
+    url += `?expires=${expires}&unit=${unit}`
+  }
+
+  return fetchJSON(url, {
+    method: 'POST'
+  })
+}

frontend/src/api/users.js

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

frontend/src/api/utils.js

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

frontend/src/components/Header.vue

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

frontend/src/components/Search.vue

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

frontend/src/components/Shell.vue

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

frontend/src/components/Sidebar.vue

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

frontend/src/components/buttons/Copy.vue

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

frontend/src/components/buttons/Delete.vue

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

frontend/src/components/buttons/Download.vue

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

frontend/src/components/buttons/Info.vue

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

frontend/src/components/buttons/Move.vue

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

frontend/src/components/buttons/Rename.vue

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

frontend/src/components/buttons/Share.vue

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

frontend/src/components/buttons/Shell.vue

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

frontend/src/components/buttons/SwitchView.vue

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

frontend/src/components/buttons/Upload.vue

@@ -0,0 +1,17 @@
+<template>
+  <button @click="upload" :aria-label="$t('buttons.upload')" :title="$t('buttons.upload')" class="action" id="upload-button">
+    <i class="material-icons">file_upload</i>
+    <span>{{ $t('buttons.upload') }}</span>
+  </button>
+</template>
+
+<script>
+export default {
+  name: 'upload-button',
+  methods: {
+    upload: function () {
+      document.getElementById('upload-input').click()
+    }
+  }
+}
+</script>

frontend/src/components/files/Editor.vue

@@ -0,0 +1,75 @@
+<template>
+  <form id="editor"></form>
+</template>
+
+<script>
+import { mapState } from 'vuex'
+import { files as api } from '@/api'
+import buttons from '@/utils/buttons'
+
+import ace from 'ace-builds/src-min-noconflict/ace.js'
+import modelist from 'ace-builds/src-min-noconflict/ext-modelist.js'
+import 'ace-builds/webpack-resolver'
+
+export default {
+  name: 'editor',
+  computed: {
+    ...mapState(['req'])
+  },
+  data: function () {
+    return {
+      content: null,
+      editor: 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 = ''
+    }
+
+    this.editor = ace.edit('editor', {
+      maxLines: Infinity,
+      minLines: 20,
+      value: this.req.content,
+      showPrintMargin: false,
+      readOnly: this.req.type === 'textImmutable',
+      theme: 'ace/theme/chrome',
+      mode: modelist.getModeForPath(this.req.name).mode
+    })
+  },
+  methods: {
+    keyEvent (event) {
+      if (!event.ctrlKey && !event.metaKey) {
+        return
+      }
+
+      if (String.fromCharCode(event.which).toLowerCase() !== 's') {
+        return
+      }
+
+      event.preventDefault()
+      this.save()
+    },
+    async save () {
+      const button = 'save'
+      buttons.loading('save')
+
+      try {
+        await api.put(this.$route.path, this.editor.getValue())
+        buttons.success(button)
+      } catch (e) {
+        buttons.done(button)
+        this.$showError(e)
+      }
+    }
+  }
+}
+</script>

frontend/src/components/files/Listing.vue

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

frontend/src/components/files/ListingItem.vue

@@ -0,0 +1,169 @@
+<template>
+  <div class="item"
+  role="button"
+  tabindex="0"
+  draggable="true"
+  @dragstart="dragStart"
+  @dragover="dragOver"
+  @drop="drop"
+  @click="click"
+  @dblclick="open"
+  @touchstart="touchstart"
+  :data-dir="isDir"
+  :aria-label="name"
+  :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 { files as api } from '@/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'
+    },
+    canDrop () {
+      if (!this.isDir) return false
+
+      for (let i of this.selected) {
+        if (this.req.items[i].url === this.url) {
+          return false
+        }
+      }
+
+      return true
+    }
+  },
+  methods: {
+    ...mapMutations(['addSelected', 'removeSelected', 'resetSelected']),
+    humanSize: function () {
+      return filesize(this.size)
+    },
+    humanTime: function () {
+      return moment(this.modified).fromNow()
+    },
+    dragStart: function () {
+      if (this.selectedCount === 0) {
+        this.addSelected(this.index)
+        return
+      }
+
+      if (!this.isSelected) {
+        this.resetSelected()
+        this.addSelected(this.index)
+      }
+    },
+    dragOver: function (event) {
+      if (!this.canDrop) 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.canDrop) return
+      event.preventDefault()
+
+      if (this.selectedCount === 0) return
+
+      let items = []
+
+      for (let i of this.selected) {
+        items.push({
+          from: this.req.items[i].url,
+          to: this.url + this.req.items[i].name
+        })
+      }
+
+      api.move(items)
+        .then(() => {
+          this.$store.commit('setReload', true)
+        })
+        .catch(this.$showError)
+    },
+    click: function (event) {
+      if (this.selectedCount !== 0) event.preventDefault()
+      if (this.$store.state.selected.indexOf(this.index) !== -1) {
+        this.removeSelected(this.index)
+        return
+      }
+
+      if (event.shiftKey && this.selected.length === 1) {
+        let fi = 0
+        let la = 0
+
+        if (this.index > this.selected[0]) {
+          fi = this.selected[0] + 1
+          la = this.index
+        } else {
+          fi = this.index
+          la = this.selected[0] - 1
+        }
+
+        for (; fi <= la; fi++) {
+          this.addSelected(fi)
+        }
+
+        return
+      }
+
+      if (!event.ctrlKey && !this.$store.state.multiple) this.resetSelected()
+      this.addSelected(this.index)
+    },
+    touchstart () {
+      setTimeout(() => {
+        this.touches = 0
+      }, 300)
+
+      this.touches++
+      if (this.touches > 1) {
+        this.open()
+      }
+    },
+    open: function () {
+      this.$router.push({path: this.url})
+    }
+  }
+}
+</script>

frontend/src/components/files/Preview.vue

@@ -0,0 +1,158 @@
+<template>
+  <div id="previewer">
+    <div class="bar">
+      <button @click="back" class="action" :title="$t('files.closePreview')" :aria-label="$t('files.closePreview')" id="close">
+        <i class="material-icons">close</i>
+      </button>
+
+      <rename-button v-if="user.perm.rename"></rename-button>
+      <delete-button v-if="user.perm.delete"></delete-button>
+      <download-button v-if="user.perm.download"></download-button>
+      <info-button></info-button>
+    </div>
+
+    <button class="action" @click="prev" v-show="hasPrevious" :aria-label="$t('buttons.previous')" :title="$t('buttons.previous')">
+      <i class="material-icons">chevron_left</i>
+    </button>
+    <button class="action" @click="next" v-show="hasNext" :aria-label="$t('buttons.next')" :title="$t('buttons.next')">
+      <i class="material-icons">chevron_right</i>
+    </button>
+
+    <div class="preview">
+      <img v-if="req.type == 'image'" :src="raw">
+      <audio v-else-if="req.type == 'audio'" :src="raw" autoplay controls></audio>
+      <video v-else-if="req.type == 'video'" :src="raw" autoplay controls>
+        <track
+          kind="captions"
+          v-for="(sub, index) in subtitles"
+          :key="index"
+          :src="sub"
+          :label="'Subtitle ' + index" :default="index === 0">
+        Sorry, your browser doesn't support embedded videos,
+        but don't worry, you can <a :href="download">download it</a>
+        and watch it with your favorite video player!
+      </video>
+      <object v-else-if="req.extension == '.pdf'" class="pdf" :data="raw"></object>
+      <a v-else-if="req.type == 'blob'" :href="download">
+        <h2 class="message">{{ $t('buttons.download') }} <i class="material-icons">file_download</i></h2>
+      </a>
+    </div>
+  </div>
+</template>
+
+<script>
+import { mapState } from 'vuex'
+import url from '@/utils/url'
+import { baseURL } from '@/utils/constants'
+import { files as api } from '@/api'
+import InfoButton from '@/components/buttons/Info'
+import DeleteButton from '@/components/buttons/Delete'
+import RenameButton from '@/components/buttons/Rename'
+import DownloadButton from '@/components/buttons/Download'
+
+const mediaTypes = [
+  "image",
+  "video",
+  "audio",
+  "blob"
+]
+
+export default {
+  name: 'preview',
+  components: {
+    InfoButton,
+    DeleteButton,
+    RenameButton,
+    DownloadButton
+  },
+  data: function () {
+    return {
+      previousLink: '',
+      nextLink: '',
+      listing: null,
+      subtitles: []
+    }
+  },
+  computed: {
+    ...mapState(['req', 'user', 'oldReq', 'jwt']),
+    hasPrevious () {
+      return (this.previousLink !== '')
+    },
+    hasNext () {
+      return (this.nextLink !== '')
+    },
+    download () {
+      return `${baseURL}/api/raw${this.req.path}?auth=${this.jwt}`
+    },
+    raw () {
+      return `${this.download}&inline=true`
+    }
+  },
+  async mounted () {
+    window.addEventListener('keyup', this.key)
+
+    if (this.req.subtitles) {
+      this.subtitles = this.req.subtitles.map(sub => `${baseURL}/api/raw${sub}?auth=${this.jwt}&inline=true`)
+    }
+
+    try {
+      if (this.oldReq.items) {
+        this.updateLinks(this.oldReq.items)
+      } else {
+        const path = url.removeLastDir(this.$route.path)
+        const res = await api.fetch(path)
+        this.updateLinks(res.items)
+      }
+    } catch (e) {
+      this.$showError(e)
+    }
+  },
+  beforeDestroy () {
+    window.removeEventListener('keyup', this.key)
+  },
+  methods: {
+    back () {
+      let uri = url.removeLastDir(this.$route.path) + '/'
+      this.$router.push({ path: uri })
+    },
+    prev () {
+      this.$router.push({ path: this.previousLink })
+    },
+    next () {
+      this.$router.push({ path: this.nextLink })
+    },
+    key (event) {
+      event.preventDefault()
+
+      if (event.which === 13 || event.which === 39) { // right arrow
+        if (this.hasNext) this.next()
+      } else if (event.which === 37) { // left arrow
+        if (this.hasPrevious) this.prev()
+      }
+    },
+    updateLinks (items) {
+      for (let i = 0; i < items.length; i++) {
+        if (items[i].name !== this.req.name) {
+          continue
+        }
+
+        for (let j = i - 1; j >= 0; j--) {
+          if (mediaTypes.includes(items[j].type)) {
+            this.previousLink = items[j].url
+            break
+          }
+        }
+
+        for (let j = i + 1; j < items.length; j++) {
+          if (mediaTypes.includes(items[j].type)) {
+            this.nextLink = items[j].url
+            break
+          }
+        }
+
+        return
+      }
+    }
+  }
+}
+</script>

frontend/src/components/prompts/Copy.vue

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

frontend/src/components/prompts/Delete.vue

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

frontend/src/components/prompts/Download.vue

@@ -0,0 +1,49 @@
+<template>
+  <div class="card floating" id="download">
+    <div class="card-title">
+      <h2>{{ $t('prompts.download') }}</h2>
+    </div>
+
+    <div class="card-content">
+      <p>{{ $t('prompts.downloadMessage') }}</p>
+
+      <button class="button button--block" @click="download('zip')" v-focus>zip</button>
+      <button class="button button--block" @click="download('tar')" v-focus>tar</button>
+      <button class="button button--block" @click="download('targz')" v-focus>tar.gz</button>
+      <button class="button button--block" @click="download('tarbz2')" v-focus>tar.bz2</button>
+      <button class="button button--block" @click="download('tarxz')" v-focus>tar.xz</button>
+      <button class="button button--block" @click="download('tarlz4')" v-focus>tar.lz4</button>
+      <button class="button button--block" @click="download('tarsz')" v-focus>tar.sz</button>
+    </div>
+  </div>
+</template>
+
+<script>
+import {mapGetters, mapState} from 'vuex'
+import { files as api } from '@/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>

frontend/src/components/prompts/FileList.vue

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

frontend/src/components/prompts/Help.vue

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

frontend/src/components/prompts/Info.vue

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

frontend/src/components/prompts/Move.vue

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

frontend/src/components/prompts/NewDir.vue

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

frontend/src/components/prompts/NewFile.vue

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

frontend/src/components/prompts/Prompts.vue

@@ -0,0 +1,79 @@
+<template>
+  <div>
+    <help v-if="showHelp" ></help>
+    <download v-else-if="showDownload"></download>
+    <new-file v-else-if="showNewFile"></new-file>
+    <new-dir v-else-if="showNewDir"></new-dir>
+    <rename v-else-if="showRename"></rename>
+    <delete v-else-if="showDelete"></delete>
+    <info v-else-if="showInfo"></info>
+    <move v-else-if="showMove"></move>
+    <copy v-else-if="showCopy"></copy>
+    <replace v-else-if="showReplace"></replace>
+    <share v-else-if="show === 'share'"></share>
+    <div v-show="showOverlay" @click="resetPrompts" class="overlay"></div>
+  </div>
+</template>
+
+<script>
+import Help from './Help'
+import Info from './Info'
+import Delete from './Delete'
+import Rename from './Rename'
+import Download from './Download'
+import Move from './Move'
+import Copy from './Copy'
+import NewFile from './NewFile'
+import NewDir from './NewDir'
+import Replace from './Replace'
+import Share from './Share'
+import { mapState } from 'vuex'
+import buttons from '@/utils/buttons'
+
+export default {
+  name: 'prompts',
+  components: {
+    Info,
+    Delete,
+    Rename,
+    Download,
+    Move,
+    Copy,
+    Share,
+    NewFile,
+    NewDir,
+    Help,
+    Replace
+  },
+  data: function () {
+    return {
+      pluginData: {
+        buttons,
+        'store': this.$store,
+        'router': this.$router
+      }
+    }
+  },
+  computed: {
+    ...mapState(['show', 'plugins']),
+    showInfo: function () { return this.show === 'info' },
+    showHelp: function () { return this.show === 'help' },
+    showDelete: function () { return this.show === 'delete' },
+    showRename: function () { return this.show === 'rename' },
+    showMove: function () { return this.show === 'move' },
+    showCopy: function () { return this.show === 'copy' },
+    showNewFile: function () { return this.show === 'newFile' },
+    showNewDir: function () { return this.show === 'newDir' },
+    showDownload: function () { return this.show === 'download' },
+    showReplace: function () { return this.show === 'replace' },
+    showOverlay: function () {
+      return (this.show !== null && this.show !== 'search' && this.show !== 'more')
+    }
+  },
+  methods: {
+    resetPrompts () {
+      this.$store.commit('closeHovers')
+    }
+  }
+}
+</script>

frontend/src/components/prompts/Rename.vue

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

frontend/src/components/prompts/Replace.vue

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

frontend/src/components/prompts/Share.vue

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

frontend/src/components/settings/Commands.vue

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

frontend/src/components/settings/Languages.vue

@@ -0,0 +1,30 @@
+<template>
+  <select v-on:change="change" :value="locale">
+    <option value="ar">{{ $t('languages.ar') }}</option>
+    <option value="de">{{ $t('languages.de') }}</option>
+    <option value="en">{{ $t('languages.en') }}</option>
+    <option value="es">{{ $t('languages.es') }}</option>
+    <option value="fr">{{ $t('languages.fr') }}</option>
+    <option value="it">{{ $t('languages.it') }}</option>
+    <option value="ja">{{ $t('languages.ja') }}</option>
+    <option value="ko">{{ $t('languages.ko') }}</option>
+    <option value="pl">{{ $t('languages.pl') }}</option>
+    <option value="pt-br">{{ $t('languages.ptBR') }}</option>
+    <option value="pt">{{ $t('languages.pt') }}</option>
+    <option value="ru">{{ $t('languages.ru') }}</option>
+    <option value="zh-cn">{{ $t('languages.zhCN') }}</option>
+    <option value="zh-tw">{{ $t('languages.zhTW') }}</option>
+  </select>
+</template>
+
+<script>
+export default {
+  name: 'languages',
+  props: [ 'locale' ],
+  methods: {
+    change (event) {
+      this.$emit('update:locale', event.target.value)
+    }
+  }
+}
+</script>

frontend/src/components/settings/Permissions.vue

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

frontend/src/components/settings/Rules.vue

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

frontend/src/components/settings/UserForm.vue

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

frontend/src/css/_buttons.css

@@ -0,0 +1,55 @@
+.button {
+  outline: 0;
+  border: 0;
+  padding: .5em 1em;
+  border-radius: .1em;
+  cursor: pointer;
+  background: var(--blue);
+  color: white;
+  border: 1px solid rgba(0, 0, 0, 0.05);
+  box-shadow: 0 0 5px rgba(0, 0, 0, 0.05);
+  transition: .1s ease all;
+}
+
+.button:hover {
+  background-color: var(--dark-blue);
+}
+
+.button--block {
+  margin: 0 0 0.5em;
+  display: block;
+  width: 100%;
+}
+
+.button--red {
+  background: var(--red);
+}
+
+.button--red:hover {
+  background: var(--dark-red);
+}
+
+.button--flat {
+  color: var(--dark-blue);
+  background: transparent;
+  box-shadow: 0 0 0;
+  border: 0;
+  text-transform: uppercase;
+}
+
+.button--flat:hover {
+  background: var(--moon-grey);
+}
+
+.button--flat.button--red {
+  color: var(--dark-red);
+}
+
+.button--flat.button--grey {
+  color: #6f6f6f;
+}
+
+.button[disabled] {
+  opacity: .5;
+  cursor: not-allowed;
+}

frontend/src/css/_inputs.css

@@ -0,0 +1,35 @@
+.input {
+  border-radius: .1em;
+  padding: .5em 1em;
+  background: white;
+  border: 1px solid rgba(0, 0, 0, 0.1);
+  transition: .2s ease all;
+  color: #333;
+  margin: 0;
+}
+
+.input:hover,
+.input:focus {
+  border-color: rgba(0, 0, 0, 0.2);
+}
+
+.input--block {
+  margin-bottom: .5em;
+  display: block;
+  width: 100%;
+}
+
+.input--textarea {
+  line-height: 1.15;
+  font-family: monospace;
+  min-height: 10em;
+  resize: vertical;
+}
+
+.input--red {
+  background: #fcd0cd;
+}
+
+.input--green {
+  background: #c9f2da;
+}

frontend/src/css/_share.css

@@ -0,0 +1,29 @@
+.share__box {
+  text-align: center;
+  box-shadow: rgba(0, 0, 0, 0.06) 0px 1px 3px, rgba(0, 0, 0, 0.12) 0px 1px 2px;
+  background: #fff;
+  display: block;
+  border-radius: 0.2em;
+  width: 90%;
+  max-width: 25em;
+  margin: 6em auto;
+}
+
+.share__box__download {
+  width: 100%;
+  padding: 1em;
+  cursor: pointer;
+  background: #ffffff;
+  color: rgba(0, 0, 0, 0.5);
+  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
+}
+
+.share__box__info {
+  padding: 2em 3em;
+}
+
+.share__box__title {
+  margin-top: .2em;
+  overflow: hidden;
+  text-overflow: ellipsis;
+}

frontend/src/css/_shell.css

@@ -0,0 +1,53 @@
+.shell {
+  position: fixed;
+  bottom: 0;
+  left: 0;
+  height: 25em;
+  max-height: calc(100% - 4em);
+  background: white;
+  color: #212121;
+  z-index: 9999;
+  width: 100%;
+  font-family: monospace;
+  overflow: auto;
+  font-size: 1rem;
+  cursor: text;
+  box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
+  transition: .2s ease transform;
+}
+
+.shell__result {
+  display: flex;
+  padding: 0.5em;
+  align-items: flex-start;
+  border-top: 1px solid rgba(0, 0, 0, 0.05);
+}
+
+.shell--hidden {
+  transform: translateY(105%);
+}
+
+.shell__result--hidden {
+  opacity: 0;
+}
+
+.shell__text,
+.shell__prompt,
+.shell__prompt i {
+  font-size: inherit;
+}
+
+.shell__prompt {
+  width: 1.2rem;
+}
+
+.shell__prompt i {
+  color: var(--blue);
+}
+
+.shell__text {
+  margin: 0;
+  font-family: inherit;
+  white-space: pre-wrap;
+  width: 100%;
+}

frontend/src/css/_variables.css

@@ -0,0 +1,7 @@
+:root {
+  --blue: #2196f3;
+  --dark-blue: #1E88E5;
+  --red: #F44336;
+  --dark-red: #D32F2F;
+  --moon-grey: #f2f2f2;
+}

frontend/src/css/base.css

@@ -0,0 +1,126 @@
+body {
+  font-family: 'Roboto', sans-serif;
+  padding-top: 4em;
+  background-color: #fafafa;
+  color: #333333;
+}
+
+* {
+  box-sizing: border-box;
+}
+
+*,
+*:hover,
+*:active,
+*:focus {
+  outline: 0
+}
+
+a {
+  text-decoration: none;
+}
+
+img {
+  max-width: 100%;
+}
+
+audio,
+video {
+  width: 100%;
+}
+
+.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;
+  transition: .1s ease-in;
+  border-radius: .125em;
+}
+
+#breadcrumbs a:hover {
+  background-color: rgba(0,0,0, 0.05);
+}
+
+#breadcrumbs span a {
+  padding: .2em;
+}
+
+#progress {
+  position: fixed;
+  top: 0;
+  left: 0;
+  width: 100%;
+  height: 3px;
+  z-index: 9999999999;
+}
+
+#progress div {
+  height: 100%;
+  background-color: #40c4ff;
+  width: 0;
+  transition: .2s ease width;
+}

frontend/src/css/dashboard.css

@@ -0,0 +1,368 @@
+.dashboard {
+  max-width: 600px;
+  margin: 1em 0;
+}
+
+a {
+  color: inherit
+}
+
+.dashboard p label {
+  margin-bottom: .2em;
+  display: block;
+  font-size: .8em;
+  font-weight: 500;
+  color: rgba(0, 0, 0, 0.57);
+}
+
+li code,
+p code {
+  background: rgba(0, 0, 0, 0.05);
+  padding: .1em;
+  border-radius: .2em;
+}
+
+.small {
+  font-size: .8em;
+  line-height: 1.5;
+}
+
+.dashboard #nav {
+  list-style: none;
+  display: flex;
+  color: rgb(84, 110, 122);
+  font-weight: 500;
+  margin: 0 0 1em;
+  font-size: .8em;
+  text-align: center;
+  justify-content: space-between;
+  padding: 0;
+}
+
+.dashboard #nav li {
+  width: 100%;
+  padding: 0 0 1em;
+  border-bottom: 2px solid rgba(0, 0, 0, 0.05);
+}
+
+.dashboard #nav li.active {
+  border-color: var(--blue)
+}
+
+.dashboard #nav i {
+  font-size: 1em;
+  vertical-align: middle;
+}
+
+table {
+  border-collapse: collapse;
+  width: 100%;
+}
+
+table tr {
+  border-bottom: 1px solid #ccc;
+}
+
+table tr:last-child {
+  border: 0;
+}
+
+table th {
+  font-weight: 500;
+  color: #757575;
+  text-align: left;
+}
+
+table th,
+table td {
+  padding: .5em 0;
+}
+
+table td.small {
+  width: 1em;
+}
+
+table tr>*:first-child {
+  padding-left: 1em;
+}
+
+table tr>*:last-child {
+  padding-right: 1em;
+}
+
+.card {
+  position: relative;
+  margin: .5rem 0 1rem 0;
+  background-color: #fff;
+  border-radius: 2px;
+  box-shadow: 0 2px 2px 0 rgba(0, 0, 0, 0.14), 0 1px 5px 0 rgba(0, 0, 0, 0.12), 0 3px 1px -2px rgba(0, 0, 0, 0.2);
+}
+
+.card.floating {
+  position: fixed;
+  top: 50%;
+  left: 50%;
+  transform: translate(-50%, -50%);
+  z-index: 99999;
+  max-width: 25em;
+  width: 90%;
+  max-height: 95%;
+  z-index: 99999;
+  animation: .1s show forwards;
+}
+
+.card>*>*:first-child {
+  margin-top: 0;
+}
+
+.card>*>*:last-child {
+  margin-bottom: 0;
+}
+
+.card .card-title {
+  padding: 1.5em 1em 1em;
+  display: flex;
+}
+
+.card .card-title>*:first-child {
+  margin-right: auto;
+}
+
+.card>div {
+  padding: 1em 1em;
+}
+
+.card>div:first-child {
+  padding-top: 1.5em;
+}
+
+.card>div:last-child {
+  padding-bottom: 1.5em;
+}
+
+.card .card-title * {
+  margin: 0;
+}
+
+.card .card-action {
+  text-align: right;
+}
+
+.card .card-content.full {
+  padding-bottom: 0;
+}
+
+.card h2 {
+  font-weight: 500;
+}
+
+.card h3 {
+  color: rgba(0, 0, 0, 0.53);
+  font-size: 1em;
+  font-weight: 500;
+  margin: 2em 0 1em;
+}
+
+.card-content table {
+  margin: 0 -1em;
+  width: calc(100% + 2em);
+}
+
+.card code {
+  word-wrap: break-word;
+}
+
+.card#download {
+  max-width: 15em;
+}
+
+.card#share ul {
+  list-style: none;
+  padding: 0;
+  margin: 0;
+}
+
+.card#share ul li {
+  display: flex;
+  justify-content: space-between;
+  align-items: center;
+}
+
+.card#share ul li a {
+  color: var(--blue);
+  cursor: pointer;
+  margin-right: auto;
+}
+
+.card#share ul li .action i {
+  font-size: 1em;
+}
+
+.card#share ul li input,
+.card#share ul li select {
+  padding: .2em;
+  margin-right: .5em;
+  border: 1px solid #dadada;
+}
+
+.card#share .action.copy-clipboard::after {
+  content: 'Copied!';
+  position: absolute;
+  left: -25%;
+  width: 150%;
+  font-size: .6em;
+  text-align: center;
+  background: #44a6f5;
+  color: #fff;
+  padding: .5em .2em;
+  border-radius: .4em;
+  top: -2em;
+  transition: .1s ease opacity;
+  opacity: 0;
+}
+
+.card#share .action.copy-clipboard.active::after {
+  opacity: 1;
+}
+
+.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 - 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: var(--blue) !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;
+}
+
+.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;
+  }
+}
+
+.collapsible {
+  border-top: 1px solid rgba(0,0,0,0.1);
+}
+
+.collapsible:last-of-type {
+  border-bottom: 1px solid rgba(0,0,0,0.1);
+}
+
+.collapsible > input {
+  display: none;
+}
+
+.collapsible > label {
+  padding: 1em 0;
+  cursor: pointer;
+  border-right: 0;
+  border-left: 0;
+  display: flex;
+  justify-content: space-between;
+}
+
+.collapsible > label * {
+  margin: 0;
+  color: rgba(0,0,0,0.57);
+}
+
+.collapsible > label i {
+  transition: .2s ease transform;
+  user-select: none;
+}
+
+.collapsible .collapse {
+  max-height: 0;
+  overflow: hidden;
+  transition: .2s ease all;
+}
+
+.collapsible > input:checked ~ .collapse {
+  padding-top: 1em;
+  padding-bottom: 1em;
+  max-height: 20em;
+}
+
+.collapsible > input:checked ~ label i {
+  transform: rotate(180deg)
+}
+
+.card .collapsible {
+  width: calc(100% + 2em);
+  margin: 0 -1em;
+}
+
+.card .collapsible > label {
+  padding: 1em;
+}
+
+.card .collapsible .collapse {
+  padding: 0 1em;
+}

frontend/src/css/fonts.css

@@ -0,0 +1,113 @@
+@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;
+}
+
+@import "~material-design-icons/iconfont/material-icons.css";

frontend/src/css/header.css

@@ -0,0 +1,259 @@
+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;
+  background-color: transparent;
+  padding: 0;
+}
+
+#search #result {
+  visibility: visible;
+  max-height: none;
+  background-color: #f8f8f8;
+  text-align: left;
+  padding: 0;
+  color: rgba(0, 0, 0, 0.6);
+  height: 0;
+  transition: .1s ease height, .1s ease padding;
+  overflow-x: hidden;
+  overflow-y: auto;
+  z-index: 1;
+}
+
+#search #result>div>*:first-child {
+  margin-top: 0;
+}
+
+#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 {
+  max-width: 45em;
+  margin: 0 auto;
+}
+
+#search #result #renew {
+  width: 100%;
+  text-align: center;
+  display: none;
+  margin: 0;
+  max-width: none;
+}
+
+#search.ongoing #result #renew {
+  display: block;
+}
+
+#search.active #result i {
+  color: #ccc;
+}
+
+#search.active #result>p>i {
+  text-align: center;
+  margin: 0 auto;
+  display: table;
+}
+
+#search.active #result ul li a {
+  display: flex;
+  align-items: center;
+  padding: .3em 0;
+}
+
+#search.active #result ul li a i {
+  margin-right: .3em;
+}
+
+#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);
+}
+
+#search .boxes {
+  border: 1px solid rgba(0, 0, 0, 0.075);
+  box-shadow: 0 0 5px rgba(0, 0, 0, 0.1);
+  background: #fff;
+  margin: 1em 0;
+}
+
+#search .boxes h3 {
+  margin: 0;
+  font-weight: 500;
+  font-size: 1em;
+  color: #212121;
+  padding: .5em;
+}
+
+#search .boxes>div {
+  display: flex;
+  flex-wrap: wrap;
+  justify-content: space-between;
+  margin-right: -1em;
+  margin-bottom: -1em;
+}
+
+#search .boxes>div>div {
+  background: var(--blue);
+  color: #fff;
+  text-align: center;
+  width: 10em;
+  padding: 1em;
+  cursor: pointer;
+  margin-bottom: 1em;
+  margin-right: 1em;
+  flex-grow: 1;
+}
+
+#search .boxes p {
+  margin: 1em 0 0;
+}
+
+#search .boxes i {
+  color: #fff !important;
+  font-size: 3.5em;
+}

frontend/src/css/listing.css

@@ -0,0 +1,243 @@
+#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;
+  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: var(--blue) !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: #fafafa;
+  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;
+}
+
+@keyframes slidein {
+  from {
+    bottom: -4em;
+  }
+
+  to {
+    bottom: 0;
+  }
+}
+
+#listing #multiple-selection {
+  position: fixed;
+  bottom: -4em;
+  left: 0;
+  z-index: 99999;
+  width: 100%;
+  background-color: var(--blue);
+  height: 4em;
+  display: none;
+  padding: 0.5em 0.5em 0.5em 1em;
+  justify-content: space-between;
+  align-items: center;
+  transition: .2s ease bottom;
+}
+
+#listing #multiple-selection.active {
+  animation: slidein 0.2s forwards;
+  display: flex;
+}
+
+#listing #multiple-selection p,
+#listing #multiple-selection i {
+  color: #fff;
+}

frontend/src/css/login.css

@@ -0,0 +1,65 @@
+#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.recaptcha form {
+  min-width: 304px;
+}
+
+#login #recaptcha {
+  margin: .5em 0 0;
+}
+
+#login .wrong {
+  background: var(--red);
+  color: #fff;
+  padding: .5em;
+  text-align: center;
+  animation: .2s opac forwards;
+}
+
+@keyframes opac {
+  0% {
+    opacity: 0;
+  }
+  100% {
+    opacity: 1;
+  }
+}
+
+#login p {
+  cursor: pointer;
+  text-align: right;
+  color: var(--blue);
+  text-transform: lowercase;
+  font-weight: 500;
+  font-size: 0.9rem;
+  margin: .5rem 0;
+}

frontend/src/css/mobile.css

@@ -0,0 +1,126 @@
+@media (max-width: 1024px) {
+  nav {
+    width: 10em
+  }
+}
+
+@media (max-width: 1024px) {
+  main {
+    width: calc(100% - 13em)
+  }
+}
+
+@media (max-width: 736px) {
+  body {
+    padding-bottom: 5em;
+  }
+  #listing.list .item .size {
+    display: none;
+  }
+  #listing.list .item .name {
+    width: 60%;
+  }
+  #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: 20em;
+  }
+  #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;
+  }
+  main {
+    margin: 0 1em;
+    width: calc(100% - 2em);
+  }
+  #search {
+    display: none;
+  }
+  #search.active {
+    display: block;
+  }
+}
+
+@media (max-width: 450px) {
+  #listing.list .item .modified {
+    display: none;
+  }
+  #listing.list .item .name {
+    width: 100%;
+  }
+}

frontend/src/css/styles.css

@@ -0,0 +1,269 @@
+@import "~normalize.css/normalize.css";
+@import "~noty/lib/noty.css";
+@import "~noty/lib/themes/mint.css";
+@import "./_variables.css";
+@import "./_buttons.css";
+@import "./_inputs.css";
+@import "./_shell.css";
+@import "./_share.css";
+@import "./fonts.css";
+@import "./base.css";
+@import "./header.css";
+@import "./listing.css";
+@import "./dashboard.css";
+@import "./login.css";
+
+.link {
+  color: var(--blue);
+}
+
+/* * * * * * * * * * * * * * * *
+ *            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: none;
+  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: var(--blue);
+  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;
+  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)
+}
+
+#previewer>button {
+  margin: 0;
+  position: fixed;
+  top: 50%;
+  transform: translateY(-50%);
+}
+
+#previewer>button:first-of-type {
+  left: 0.5em;
+}
+
+#previewer>button:last-of-type {
+  right: 0.5em;
+}
+
+
+/* * * * * * * * * * * * * * * *
+ *            PROMPT           *
+ * * * * * * * * * * * * * * * */
+
+.noty_buttons {
+  text-align: right;
+  padding: 0 10px 10px !important;
+}
+
+.noty_buttons button {
+  background: rgba(0, 0, 0, 0.05);
+  border: 1px solid rgba(0,0,0,0.1);
+  box-shadow: 0 0 0 0;
+  font-size: 14px;
+}
+
+/* * * * * * * * * * * * * * * *
+ *            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);
+  }
+}
+
+/* * * * * * * * * * * * * * * *
+ *         SETTINGS RULES      *
+ * * * * * * * * * * * * * * * */
+
+.rules > div {
+  display: flex;
+  align-items: center;
+  margin: .5rem 0;
+}
+
+.rules input[type="checkbox"] {
+  margin-right: .2rem;
+}
+
+.rules input[type="text"] {
+  border: 1px solid#ddd;
+  padding: .2rem;
+}
+
+.rules label {
+  margin-right: .5rem;
+}
+
+.rules button {
+  margin-left: auto;
+}
+
+.rules button.delete {
+  padding: .2rem .5rem;
+  margin-left: .5rem;
+}
+
+@import './mobile.css';

frontend/src/i18n/ar.json

@@ -0,0 +1,236 @@
+{
+  "permanent": "دائم",
+  "buttons": {
+    "shell": "Toggle shell",
+    "cancel": "إلغاء",
+    "close": "إغلاق",
+    "copy": "نسخ",
+    "copyFile": "نسخ الملف",
+    "copyToClipboard": "نسخ الى الحافظة",
+    "create": "إنشاء",
+    "delete": "حذف",
+    "download": "تحميل",
+    "info": "معلومات",
+    "more": "المزيد",
+    "move": "نقل",
+    "moveFile": "نقل الملف",
+    "new": "جديد",
+    "next": "التالي",
+    "ok": "موافق",
+    "replace": "استبدال",
+    "previous": "السابق",
+    "rename": "إعادة تسمية",
+    "reportIssue": "إبلاغ عن مشكلة",
+    "save": "حفظ",
+    "search": "بحث",
+    "select": "تحديد",
+    "share": "مشاركة",
+    "publish": "نشر",
+    "selectMultiple": "تحديد متعدد",
+    "schedule": "جدولة",
+    "switchView": "تغيير العرض",
+    "toggleSidebar": "تبديل الشريط الجانبي",
+    "update": "تحديث",
+    "upload": "رفع",
+    "permalink": "الحصول على لنك دائم"
+  },
+  "success": {
+    "linkCopied": "تم نسخ الملف"
+  },
+  "errors": {
+    "forbidden": "You don't have permissions to access this.",
+    "internal": "لقد حدث خطأ ما.",
+    "notFound": "لا يمكن الوصول لهذا المحتوى."
+  },
+  "files": {
+    "folders": "المجلدات",
+    "files": "الملفات",
+    "body": "الصفحة",
+    "clear": "مسح",
+    "closePreview": "إغلاق العرض",
+    "home": "الصفحة الاولى",
+    "lastModified": "آخر تعديل",
+    "loading": "جاري التحميل...",
+    "lonely": "تبدو وحيدا هنا...",
+    "metadata": "بيانات تعريفية",
+    "multipleSelectionEnabled": "التحديد المتعدد مفعل",
+    "name": "الإسم",
+    "size": "الحجم",
+    "sortByName": "الترتيب بالإسم",
+    "sortBySize": "الترتيب بالحجم",
+    "sortByLastModified": "الترتيب بآخر تعديل"
+  },
+  "help": {
+    "click": "حدد الملف أو المجلد",
+    "ctrl": {
+      "click": "حدد أكثر من ملف او مجلد",
+      "f": "إبدأ البحث",
+      "s": "حمل الملف او المجلد في هذا المكان"
+    },
+    "del": "حذف البيانات المحددة",
+    "doubleClick": "فتح المجلد او الملف",
+    "esc": "مسح التحديد وإغلاق النافذة المنبثقة",
+    "f1": "هذه المعلومات",
+    "f2": "إعادة تسمية الملف",
+    "help": "مساعدة"
+  },
+  "login": {
+    "password": "كلمة المرور",
+    "passwordConfirm": "Password Confirmation",
+    "submit": "تسجيل دخول",
+    "createAnAccount": "Create an account",
+    "loginInstead": "Already have an account",
+    "passwordsDontMatch": "Passwords don't match",
+    "usernameTaken": "Username already taken",
+    "signup": "Signup",
+    "username": "إسم المستخدم",
+    "wrongCredentials": "بيانات دخول خاطئة"
+  },
+  "prompts": {
+    "copy": "نسخ",
+    "copyMessage": "رجاء حدد المكان لنسخ ملفاتك فيه:",
+    "currentlyNavigating": "يتم الإنتقال حاليا إلى:",
+    "deleteMessageMultiple": "هل تريد بالتأكيد حذف {count} ملف؟",
+    "deleteMessageSingle": "هل تريد بالتأكيد حذف هذا الملف/المجلد؟",
+    "deleteTitle": "حذف الملفات",
+    "displayName": "الإسم:",
+    "download": "تحميل الملفات",
+    "downloadMessage": "حدد إمتداد الملف المراد تحميله.",
+    "error": "لقد حدث خطأ ما",
+    "fileInfo": "معلومات الملف",
+    "filesSelected": "تم تحديد {count} ملفات.",
+    "lastModified": "آخر تعديل",
+    "move": "نقل",
+    "moveMessage": "إختر مكان جديد للملفات أو المجلدات المراد نقلها:",
+    "newDir": "مجلد جديد",
+    "newDirMessage": "رجاء أدخل اسم المجلد الجديد.",
+    "newFile": "ملف جديد",
+    "newFileMessage": "رجاء ادخل اسم الملف الجديد.",
+    "numberDirs": "عدد المجلدات",
+    "numberFiles": "عدد الملفات",
+    "replace": "إستبدال",
+    "replaceMessage": "أحد الملفات التي تحاول رفعها يتعارض مع ملف موجود بنفس الإسم. هل تريد إستبدال الملف الموجود؟\n",
+    "rename": "إعادة تسمية",
+    "renameMessage": "إدراج اسم جديد لـ",
+    "show": "عرض",
+    "size": "الحجم",
+    "schedule": "جدولة",
+    "scheduleMessage": "أختر الوقت والتاريخ لجدولة نشر هذا المقال.",
+    "newArchetype": "إنشاء منشور من المنشور الأصلي. الملف سيتم انشاءه في مجلد المحتويات."
+  },
+  "settings": {
+    "instanceName": "Instance name",
+    "brandingDirectoryPath": "Branding directory path",
+    "documentation": "documentation",
+    "branding": "Branding",
+    "disableExternalLinks": "Disable external links (except documentation)",
+    "brandingHelp": "You can costumize how your File Browser instance looks and feels by changing its name, replacing the logo, adding custom styles and even disable external links to GitHub.\nFor more information about custom branding, please check out the {0}.",
+    "admin": "Admin",
+    "administrator": "Administrator",
+    "allowCommands": "تنفيذ الأوامر",
+    "allowEdit": "تعديل، إعادة تسمية وحذف الملفات والمجلدات",
+    "allowNew": "إنشاء ملفات ومجلدات جديدة",
+    "allowPublish": "نشر مقالات وصفحات جديدة",
+    "avoidChanges": "(أتركه فارغاً إن لم ترد تغييره)",
+    "changePassword": "تغيير كلمة المرور",
+    "commandRunner": "Command runner",
+    "commandRunnerHelp": "Here you can set commands that are executed in the named events. You must write one per line. The environment variables {0} and {1} will be available, being {0} relative to {1}. For more information about this feature and the available environment variables, please read the {2}.",
+    "commandsUpdated": "تم تحديث الأوامر",
+    "customStylesheet": "ستايل مخصص",
+    "examples": "أمثلة",
+    "globalSettings": "إعدادات عامة",
+    "language": "اللغة",
+    "lockPassword": "منع المستخدم من تغيير كلمة المرور",
+    "newPassword": "كلمة المرور الجديدة",
+    "newPasswordConfirm": "تأكيد كلمة المرور",
+    "newUser": "مستخدم جديد",
+    "password": "كلمة المرور",
+    "passwordUpdated": "تم تغيير كلمة المرور",
+    "permissions": "الصلاحيات",
+    "permissionsHelp": "يمكنك تعيين المستخدم كـ \"مدير\" أو تحديد الصلاحيات بشكل منفرد.\n    إذا قمت بتحديد المستخدم كـ \"مدير\"، باقي الخيارات سيتم تحديدها تلقائياً.\n    إدارة المستخدمين تبقى صلاحية فريدة للـ \"مدير\" فقط.\n",
+    "profileSettings": "إعدادات الحساب",
+    "ruleExample1": "منع الوصول إلى الملفات التي تبدأ بنقطة مثل (.git، و .gitignore) في كل مجلد.\n",
+    "ruleExample2": "منع الوصول إلى الملف المسمى Caddyfile في نطاق الجذر.",
+    "rules": "المجموعات",
+    "rulesHelp": "يمكنك هنا تحديد مجموعة من شروط السماح والمنع لهذا المستخدم. الملفات الممنوعة لن تظهر ضمن القائمة لهذا المستخدم ولن يستطيع الوصول لها. هنا ندعم الـ regex والـ relative path لنطاق المستخدمين.\n",
+    "scope": "نطاق",
+    "settingsUpdated": "تم تعديل الإعدادات",
+    "user": "المستخدم",
+    "userCommands": "الأوامر",
+    "userCommandsHelp": "الأوامر المتاحة لهذا المستخدم مفصولة فيما بينها بمسافة. مثال:\n",
+    "userCreated": "تم إنشاء المستخدم",
+    "userDeleted": "تم حذف المستخدم",
+    "userManagement": "إدارة المستخدمين",
+    "username": "إسم المستخدم",
+    "users": "المستخدمين",
+    "globalRules": "This is a global set of allow and disallow rules. They apply to every user. You can define specific rules on each user's settings to override this ones.",
+    "allowSignup": "Allow users to signup",
+    "createUserDir": "Auto create user home dir while adding new user",
+    "insertRegex": "Insert regex expression",
+    "insertPath": "Insert the path",
+    "userUpdated": "تم تعديل المستخدم",
+    "userDefaults": "User default settings",
+    "defaultUserDescription": "This are the default settings for new users.",
+    "executeOnShell": "Execute on shell",
+    "executeOnShellDescription": "By default, File Browser executes the commands by calling their binaries directly. If you want to run them on a shell instead (such as Bash or PowerShell), you can define it here with the  required arguments and flags. If set, the command you execute will be appended as an argument. This apply to both user commands and event hooks.",
+    "perm": {
+      "create": "Create files and directories",
+      "delete": "Delete files and directories",
+      "download": "Download",
+      "modify": "Edit files",
+      "execute": "Execute commands",
+      "rename": "Rename or move files and directories",
+      "share": "Share files"
+    }
+  },
+  "sidebar": {
+    "help": "مساعدة",
+    "login": "Login",
+    "signup": "Signup",
+    "logout": "تسجيل خروج",
+    "myFiles": "ملفاتي",
+    "newFile": "ملف جديد",
+    "newFolder": "مجلد جديد",
+    "settings": "الإعدادات",
+    "siteSettings": "إعدادات الموقع",
+    "hugoNew": "هيوجو جديد",
+    "preview": "معاينة"
+  },
+  "search": {
+    "images": "الصور",
+    "music": "الموسيقى",
+    "pdf": "PDF",
+    "types": "الأنواع",
+    "video": "فيديوهات",
+    "search": "البحث...",
+    "typeToSearch": "Type to search...",
+    "pressToSearch": "Press enter to search..."
+  },
+  "languages": {
+    "ar": "العربية",
+    "en": "English",
+    "it": "Italiano",
+    "fr": "Français",
+    "pt": "Português",
+    "ptBR": "Português (Brasil)",
+    "ja": "日本語",
+    "zhCN": "中文 (简体)",
+    "zhTW": "中文 (繁體)",
+    "es": "Español",
+    "de": "Deutsch",
+    "ru": "Русский",
+    "pl": "Polski",
+    "ko": "한국어"
+  },
+  "time": {
+    "unit": "وحدة الوقت",
+    "seconds": "ثواني",
+    "minutes": "دقائق",
+    "hours": "ساعات",
+    "days": "أيام"
+  },
+  "download": {
+    "downloadFile": "Download File",
+    "downloadFolder": "Download Folder"
+  }
+}

frontend/src/i18n/de.json

@@ -0,0 +1,236 @@
+{
+  "permanent": "Permanent",
+  "buttons": {
+    "shell": "Kommandozeile ein/ausschalten",
+    "cancel": "Abbrechen",
+    "close": "Schließen",
+    "copy": "Kopieren",
+    "copyFile": "Kopiere Datei",
+    "copyToClipboard": "In Zwischenablage kopieren",
+    "create": "Neu",
+    "delete": "Löschen",
+    "download": "Downloaden",
+    "info": "Info",
+    "more": "mehr",
+    "move": "Verschieben",
+    "moveFile": "Verschiebe Datei",
+    "new": "Neu",
+    "next": "nächste",
+    "ok": "OK",
+    "replace": "Ersetzen",
+    "previous": "vorherige",
+    "rename": "umbenennen",
+    "reportIssue": "Fehler melden",
+    "save": "Speichern",
+    "search": "Suchen",
+    "select": "Auswählen",
+    "share": "Teilen",
+    "publish": "Veröffentlichen",
+    "selectMultiple": "Mehrfachauswahl",
+    "schedule": "Planung",
+    "switchView": "Ansicht wechseln",
+    "toggleSidebar": "Seitenleiste anzeigen",
+    "update": "Update",
+    "upload": "Upload",
+    "permalink": "permanenten Verweis anzeigen"
+  },
+  "success": {
+    "linkCopied": "Verweis wurde kopiert!"
+  },
+  "errors": {
+    "forbidden": "Sie haben keine Berechtigung dies abzurufen.",
+    "internal": "Etwas ist schief gelaufen.",
+    "notFound": "Dieser Ort kann nicht angezeigt werden."
+  },
+  "files": {
+    "folders": "Ordner",
+    "files": "Dateien",
+    "body": "Body",
+    "clear": "Clear",
+    "closePreview": "Vorschau schließen",
+    "home": "Home",
+    "lastModified": "zuletzt verändert",
+    "loading": "Lade...",
+    "lonely": "Hier scheint nichts zu sein...",
+    "metadata": "Metadaten",
+    "multipleSelectionEnabled": "Mehrfachauswahl ausgewählt",
+    "name": "Name",
+    "size": "Größe",
+    "sortByName": "Nach Namen sortieren",
+    "sortBySize": "Nach Größe sortieren",
+    "sortByLastModified": "Nach Änderungsdatum sortieren"
+  },
+  "help": {
+    "click": "wähle Datei oder Ordner",
+    "ctrl": {
+      "click": "markiere mehrere Dateien oder Ordner",
+      "f": "öffnet eine neue Suche",
+      "s": "speichert eine Datei oder einen Ordner am akutellen Ort"
+    },
+    "del": "löscht die ausgewählten Elemente",
+    "doubleClick": "öffnet eine Datei oder einen Ordner",
+    "esc": "Auswahl zurücksetzen und/oder Dialog schließen",
+    "f1": "diese Informationsseite",
+    "f2": "Datei umbenennen",
+    "help": "Hilfe"
+  },
+  "login": {
+    "password": "Passwort",
+    "passwordConfirm": "Passwort Bestätigung",
+    "submit": "Login",
+    "createAnAccount": "Account erstellen",
+    "loginInstead": "Account besteht bereits",
+    "passwordsDontMatch": "Passwörter stimmen nicht überein",
+    "usernameTaken": "Benutzername ist bereits vergeben",
+    "signup": "Registrieren",
+    "username": "Benutzername",
+    "wrongCredentials": "Falsche Zugangsdaten"
+  },
+  "prompts": {
+    "copy": "Kopieren",
+    "copyMessage": "Wählen Sie einen Zielort zum Kopieren:",
+    "currentlyNavigating": "Aktueller Ort:",
+    "deleteMessageMultiple": "Sind Sie sicher, dass Sie {count} Datei(en) löschen möchten?",
+    "deleteMessageSingle": "Sind Sie sicher, dass Sie diesen Ordner/diese Datei löschen möchten?",
+    "deleteTitle": "Lösche Dateien",
+    "displayName": "Display Name:",
+    "download": "Lade Dateien",
+    "downloadMessage": "Wählen Sie ein Format zum downloaden aus.",
+    "error": "Etwas ist schief gelaufen",
+    "fileInfo": "Dateiinformation",
+    "filesSelected": "{count} Dateien ausgewählt.",
+    "lastModified": "Zuletzt geändert",
+    "move": "Verschieben",
+    "moveMessage": "Wählen sie einen neuen Platz für ihre Datei(en)/Ordner:",
+    "newDir": "Neuer Ordner",
+    "newDirMessage": "Geben Sie den Namen des neuen Ordners an.",
+    "newFile": "Neue Datei",
+    "newFileMessage": "Geben Sie den Namen der neuen Datei an.",
+    "numberDirs": "Anzahl der Ordner",
+    "numberFiles": "Anzahl der Dateien",
+    "replace": "Ersetzen",
+    "replaceMessage": "Eine der Datei mit dem gleichen Namen, wie die Sie hochladen wollen,  existiert bereits. Soll die vorhandene Datei ersetzt werden ?\n",
+    "rename": "Umbenennen",
+    "renameMessage": "Fügen Sie einen Namen ein für",
+    "show": "Anzeigen",
+    "size": "Größe",
+    "schedule": "Plan",
+    "scheduleMessage": "Wählen Sie ein Datum und eine Zeit für die Veröffentlichung dieses Beitrags.",
+    "newArchetype": "Erstelle neuen Beitrag auf dem Archetyp. Ihre Datei wird im Inhalteordner erstellt."
+  },
+  "settings": {
+    "instanceName": "Instanzname",
+    "brandingDirectoryPath": "Markenverzeichnispfad",
+    "documentation": "Dokumentation",
+    "branding": "Marke",
+    "disableExternalLinks": "Externe Links deaktivieren (außer Dokumentation)",
+    "brandingHelp": "Sie können das Erscheinungsbild ihres File Browser anpassen, in dem sie den Namen ändern, das Logo austauchsen oder eigene Stile definieren und sogar externe Links zu GitHub deaktivieren.\nUm mehr Informationen zum Anpassen an ihre Marke zu bekommen, gehen sie bitte zu {0}.",
+    "admin": "Admin",
+    "administrator": "Administrator",
+    "allowCommands": "Befehle ausführen",
+    "allowEdit": "Bearbeiten, Umbenennen und Löschen von Dateien oder Ordnern",
+    "allowNew": "Erstellen neuer Dateien und Ordner",
+    "allowPublish": "Veröffentlichen von neuen Beiträgen und Seiten",
+    "avoidChanges": "(leer lassen um Änderungen zu vermeiden)",
+    "changePassword": "Ändere das Passwort",
+    "commandRunner": "Befehlseingabe",
+    "commandRunnerHelp": "Hier könne sie Befehle eintragen die bei benannten Aktionen ausgeführt werden. Sie müssen pro Zeile jeweils einen eingeben. Die Umgebungsvariable {0} und {1} sind verfügbar, wobei {0} relative zu {1} ist. Für mehr Informationen über diese Funktion und die verfügbaren Umgebungsvariablen, lesen sie bitte das {2}.",
+    "commandsUpdated": "Befehle aktualisiert!",
+    "customStylesheet": "Individuelles Stylesheet",
+    "examples": "Beispiele",
+    "globalSettings": "Globale Einstellungen",
+    "language": "Sprache",
+    "lockPassword": "Verhindere, dass der Benutzer sein Passwort ändert",
+    "newPassword": "Ihr neues Passwort.",
+    "newPasswordConfirm": "Bestätigen Sie Ihr neues Passwort",
+    "newUser": "Neuer Benutzer",
+    "password": "Passwort",
+    "passwordUpdated": "Passwort aktualisiert!",
+    "permissions": "Berechtigungen",
+    "permissionsHelp": "Sie können einem Benutzer Administratorrechte einräumen oder die Berechtigunen individuell festlegen.  Wenn Sie \"Administrator\" auswählen, werden alle anderen Rechte automatisch vergeben. Die Nutzerverwaltung kann nur durch einen Administrator erfolgen.\n",
+    "profileSettings": "Profileinstellungen",
+    "ruleExample1": "Verhindert den Zugang zu dot Dateien (dot Files, wie .git, .gitignore) in allen Ordnern\n",
+    "ruleExample2": "blockiert den Zugang auf Dateien mit dem Namen Caddyfile in der Wurzel/Basis des scopes.",
+    "rules": "Regeln",
+    "rulesHelp": "Hier können Sie erlaubte und verbotene Aktionen für einen einzelnen Benutzer festlegen. Bockierte Dateien werden nicht im Listing angezeigt und sind nicht erreichbar für den Nutzer. Wir unterstützen reguläre Ausdrücke (Regex) und Pfade die relativ zum Benutzerordner sind. \n",
+    "scope": "Scope",
+    "settingsUpdated": "Einstellungen aktualisiert!",
+    "user": "Benutzer",
+    "userCommands": "Befehle",
+    "userCommandsHelp": "Eine Liste, mit einem Leerzeichen als Trennung, mit den für diesen Nutzer verfügbaren Befehlen. Example:\n",
+    "userCreated": "Benutzer angelegt!",
+    "userDeleted": "Benutzer gelöscht!",
+    "userManagement": "Benutzerverwaltung",
+    "username": "Nutzername",
+    "users": "Nutzer",
+    "globalRules": "Das ist ein globales Set von Regeln die erlauben oder nicht erlauben. Die sind für alle Benutzer zutreffend. Es können spezielle Regeln in den Einstellungen der Benutzer definiert werden die diese übersteuern.",
+    "allowSignup": "Erlaube Benutzern sich zu registrieren",
+    "createUserDir": "Auto create user home dir while adding new user",
+    "insertRegex": "Regex Ausdruck einfügen",
+    "insertPath": "Pfad einfügen",
+    "userUpdated": "Benutzer aktualisiert!",
+    "userDefaults": "Benutzer Standard Einstellungen",
+    "defaultUserDescription": "Das sind die Standard Einstellunge für Benutzer",
+    "executeOnShell": "In shell ausführen",
+    "executeOnShellDescription": "Es ist voreingestellt das der File Brower Befehle ausführt in dem er die Befehlsdatein direkt auf ruft. Wenn sie wollen das sie auf einer Kommandozeile (wo Bash oder PowerShell) laufen, könne sie das hier definieren mit allen bennötigten Argumenten und Optionen. Wenn gesetzt, wird das Kommando das ausgeführt werden soll als Parameter angehängt. Das gilt für Benuzerkommandos sowie auch für Ereignisse.",
+    "perm": {
+      "create": "Dateien und Ordner erstellen",
+      "delete": "Dateien und Ordner löschen",
+      "download": "Download",
+      "modify": "Dateien editieren",
+      "execute": "Befehle ausführen",
+      "rename": "Umbenennen oder Verschieben von Dateien oder Ordnern",
+      "share": "Datei teilen"
+    }
+  },
+  "sidebar": {
+    "help": "Hilfe",
+    "login": "Anmelden",
+    "signup": "Registrieren",
+    "logout": "Logout",
+    "myFiles": "Meine Dateien",
+    "newFile": "Neue Datei",
+    "newFolder": "Neuer Ordner",
+    "settings": "Einstellungen",
+    "siteSettings": "Seiteneinstellungen",
+    "hugoNew": "Hugo Neu",
+    "preview": "Vorschau"
+  },
+  "search": {
+    "images": "Bilder",
+    "music": "Musik",
+    "pdf": "PDF",
+    "types": "Typen",
+    "video": "Video",
+    "search": "Suche...",
+    "typeToSearch": "Tippe um zu suchen...",
+    "pressToSearch": "Drücken sie Enter um zu suchen..."
+  },
+  "languages": {
+    "ar": "العربية",
+    "en": "English",
+    "it": "Italiano",
+    "fr": "Français",
+    "pt": "Português",
+    "ptBR": "Português (Brasil)",
+    "ja": "日本語",
+    "zhCN": "中文 (简体)",
+    "zhTW": "中文 (繁體)",
+    "es": "Español",
+    "de": "Deutsch",
+    "ru": "Русский",
+    "pl": "Polski",
+    "ko": "한국어"
+  },
+  "time": {
+    "unit": "Zeiteinheit",
+    "seconds": "Sekunden",
+    "minutes": "Minuten",
+    "hours": "Stunden",
+    "days": "Tage"
+  },
+  "download": {
+    "downloadFile": "Download Datei",
+    "downloadFolder": "Download Ordner"
+  }
+}

frontend/src/i18n/en.json

@@ -0,0 +1,236 @@
+{
+  "permanent": "Permanent",
+  "buttons": {
+    "shell": "Toggle shell",
+    "cancel": "Cancel",
+    "close": "Close",
+    "copy": "Copy",
+    "copyFile": "Copy file",
+    "copyToClipboard": "Copy to clipboard",
+    "create": "Create",
+    "delete": "Delete",
+    "download": "Download",
+    "info": "Info",
+    "more": "More",
+    "move": "Move",
+    "moveFile": "Move file",
+    "new": "New",
+    "next": "Next",
+    "ok": "OK",
+    "replace": "Replace",
+    "previous": "Previous",
+    "rename": "Rename",
+    "reportIssue": "Report Issue",
+    "save": "Save",
+    "search": "Search",
+    "select": "Select",
+    "share": "Share",
+    "publish": "Publish",
+    "selectMultiple": "Select multiple",
+    "schedule": "Schedule",
+    "switchView": "Switch view",
+    "toggleSidebar": "Toggle sidebar",
+    "update": "Update",
+    "upload": "Upload",
+    "permalink": "Get Permanent Link"
+  },
+  "success": {
+    "linkCopied": "Link copied!"
+  },
+  "errors": {
+    "forbidden": "You don't have permissions to access this.",
+    "internal": "Something really went wrong.",
+    "notFound": "This location can't be reached."
+  },
+  "files": {
+    "folders": "Folders",
+    "files": "Files",
+    "body": "Body",
+    "clear": "Clear",
+    "closePreview": "Close preview",
+    "home": "Home",
+    "lastModified": "Last modified",
+    "loading": "Loading...",
+    "lonely": "It feels lonely here...",
+    "metadata": "Metadata",
+    "multipleSelectionEnabled": "Multiple selection enabled",
+    "name": "Name",
+    "size": "Size",
+    "sortByName": "Sort by name",
+    "sortBySize": "Sort by size",
+    "sortByLastModified": "Sort by last modified"
+  },
+  "help": {
+    "click": "select file or directory",
+    "ctrl": {
+      "click": "select multiple files or directories",
+      "f": "opens search",
+      "s": "save a file or download the directory where you are"
+    },
+    "del": "delete selected items",
+    "doubleClick": "open a file or directory",
+    "esc": "clear selection and/or close the prompt",
+    "f1": "this information",
+    "f2": "rename file",
+    "help": "Help"
+  },
+  "login": {
+    "password": "Password",
+    "passwordConfirm": "Password Confirmation",
+    "submit": "Login",
+    "createAnAccount": "Create an account",
+    "loginInstead": "Already have an account",
+    "passwordsDontMatch": "Passwords don't match",
+    "usernameTaken": "Username already taken",
+    "signup": "Signup",
+    "username": "Username",
+    "wrongCredentials": "Wrong credentials"
+  },
+  "prompts": {
+    "copy": "Copy",
+    "copyMessage": "Choose the place to copy your files:",
+    "currentlyNavigating": "Currently navigating on:",
+    "deleteMessageMultiple": "Are you sure you want to delete {count} file(s)?",
+    "deleteMessageSingle": "Are you sure you want to delete this file/folder?",
+    "deleteTitle": "Delete files",
+    "displayName": "Display Name:",
+    "download": "Download files",
+    "downloadMessage": "Choose the format you want to download.",
+    "error": "Something went wrong",
+    "fileInfo": "File information",
+    "filesSelected": "{count} files selected.",
+    "lastModified": "Last Modified",
+    "move": "Move",
+    "moveMessage": "Choose new house for your file(s)/folder(s):",
+    "newDir": "New directory",
+    "newDirMessage": "Write the name of the new directory.",
+    "newFile": "New file",
+    "newFileMessage": "Write the name of the new file.",
+    "numberDirs": "Number of directories",
+    "numberFiles": "Number of files",
+    "replace": "Replace",
+    "replaceMessage": "One of the files you're trying to upload is conflicting because of its name. Do you wish to replace the existing one?\n",
+    "rename": "Rename",
+    "renameMessage": "Insert a new name for",
+    "show": "Show",
+    "size": "Size",
+    "schedule": "Schedule",
+    "scheduleMessage": "Pick a date and time to schedule the publication of this post.",
+    "newArchetype": "Create a new post based on an archetype. Your file will be created on content folder."
+  },
+  "settings": {
+    "instanceName": "Instance name",
+    "brandingDirectoryPath": "Branding directory path",
+    "documentation": "documentation",
+    "branding": "Branding",
+    "disableExternalLinks": "Disable external links (except documentation)",
+    "brandingHelp": "You can costumize how your File Browser instance looks and feels by changing its name, replacing the logo, adding custom styles and even disable external links to GitHub.\nFor more information about custom branding, please check out the {0}.",
+    "admin": "Admin",
+    "administrator": "Administrator",
+    "allowCommands": "Execute commands",
+    "allowEdit": "Edit, rename and delete files or directories",
+    "allowNew": "Create new files and directories",
+    "allowPublish": "Publish new posts and pages",
+    "avoidChanges": "(leave blank to avoid changes)",
+    "changePassword": "Change Password",
+    "commandRunner": "Command runner",
+    "commandRunnerHelp": "Here you can set commands that are executed in the named events. You must write one per line. The environment variables {0} and {1} will be available, being {0} relative to {1}. For more information about this feature and the available environment variables, please read the {2}.",
+    "commandsUpdated": "Commands updated!",
+    "customStylesheet": "Custom Stylesheet",
+    "examples": "Examples",
+    "globalSettings": "Global Settings",
+    "language": "Language",
+    "lockPassword": "Prevent the user from changing the password",
+    "newPassword": "Your new password",
+    "newPasswordConfirm": "Confirm your new password",
+    "newUser": "New User",
+    "password": "Password",
+    "passwordUpdated": "Password updated!",
+    "permissions": "Permissions",
+    "permissionsHelp": "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.\n",
+    "profileSettings": "Profile Settings",
+    "ruleExample1": "prevents the access to any dot file (such as .git, .gitignore) in every folder.\n",
+    "ruleExample2": "blocks the access to the file named Caddyfile on the root of the scope.",
+    "rules": "Rules",
+    "rulesHelp": "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 wont be accessible to the user. We support regex and paths relative to the users scope.\n",
+    "scope": "Scope",
+    "settingsUpdated": "Settings updated!",
+    "user": "User",
+    "userCommands": "Commands",
+    "userCommandsHelp": "A space separated list with the available commands for this user. Example:\n",
+    "userCreated": "User created!",
+    "userDeleted": "User deleted!",
+    "userManagement": "User Management",
+    "username": "Username",
+    "users": "Users",
+    "globalRules": "This is a global set of allow and disallow rules. They apply to every user. You can define specific rules on each user's settings to override this ones.",
+    "allowSignup": "Allow users to signup",
+    "createUserDir": "Auto create user home dir while adding new user",
+    "insertRegex": "Insert regex expression",
+    "insertPath": "Insert the path",
+    "userUpdated": "User updated!",
+    "userDefaults": "User default settings",
+    "defaultUserDescription": "This are the default settings for new users.",
+    "executeOnShell": "Execute on shell",
+    "executeOnShellDescription": "By default, File Browser executes the commands by calling their binaries directly. If you want to run them on a shell instead (such as Bash or PowerShell), you can define it here with the  required arguments and flags. If set, the command you execute will be appended as an argument. This apply to both user commands and event hooks.",
+    "perm": {
+      "create": "Create files and directories",
+      "delete": "Delete files and directories",
+      "download": "Download",
+      "modify": "Edit files",
+      "execute": "Execute commands",
+      "rename": "Rename or move files and directories",
+      "share": "Share files"
+    }
+  },
+  "sidebar": {
+    "help": "Help",
+    "login": "Login",
+    "signup": "Signup",
+    "logout": "Logout",
+    "myFiles": "My files",
+    "newFile": "New file",
+    "newFolder": "New folder",
+    "settings": "Settings",
+    "siteSettings": "Site Settings",
+    "hugoNew": "Hugo New",
+    "preview": "Preview"
+  },
+  "search": {
+    "images": "Images",
+    "music": "Music",
+    "pdf": "PDF",
+    "types": "Types",
+    "video": "Video",
+    "search": "Search...",
+    "typeToSearch": "Type to search...",
+    "pressToSearch": "Press enter to search..."
+  },
+  "languages": {
+    "ar": "العربية",
+    "en": "English",
+    "it": "Italiano",
+    "fr": "Français",
+    "pt": "Português",
+    "ptBR": "Português (Brasil)",
+    "ja": "日本語",
+    "zhCN": "中文 (简体)",
+    "zhTW": "中文 (繁體)",
+    "es": "Español",
+    "de": "Deutsch",
+    "ru": "Русский",
+    "pl": "Polski",
+    "ko": "한국어"
+  },
+  "time": {
+    "unit": "Time Unit",
+    "seconds": "Seconds",
+    "minutes": "Minutes",
+    "hours": "Hours",
+    "days": "Days"
+  },
+  "download": {
+    "downloadFile": "Download File",
+    "downloadFolder": "Download Folder"
+  }
+}

frontend/src/i18n/es.json

@@ -0,0 +1,236 @@
+{
+  "permanent": "Permanente",
+  "buttons": {
+    "shell": "Presiona Enter para buscar...",
+    "cancel": "Cancelar",
+    "close": "Cerrar",
+    "copy": "Copiar",
+    "copyFile": "Copiar archivo",
+    "copyToClipboard": "Copiar al portapapeles",
+    "create": "Crear",
+    "delete": "Borrar",
+    "download": "Descargar",
+    "info": "Info",
+    "more": "Más",
+    "move": "Mover",
+    "moveFile": "Mover archivo",
+    "new": "Nuevo",
+    "next": "Siguiente",
+    "ok": "OK",
+    "replace": "Reemplazar",
+    "previous": "Anterior",
+    "rename": "Renombrar",
+    "reportIssue": "Reportar problema",
+    "save": "Guardar",
+    "search": "Buscar",
+    "select": "Seleccionar",
+    "share": "Compartir",
+    "publish": "Publicar",
+    "selectMultiple": "Selección múltiple",
+    "schedule": "Programar",
+    "switchView": "Cambiar vista",
+    "toggleSidebar": "Mostrar/Ocultar menú",
+    "update": "Actualizar",
+    "upload": "Subir",
+    "permalink": "Link permanente"
+  },
+  "success": {
+    "linkCopied": "¡Link copiado!"
+  },
+  "errors": {
+    "forbidden": "You don't have permissions to access this.",
+    "internal": "La verdad es que algo ha ido mal.",
+    "notFound": "No se puede acceder a este lugar."
+  },
+  "files": {
+    "folders": "Carpetas",
+    "files": "Archivos",
+    "body": "Cuerpo",
+    "clear": "Limpiar",
+    "closePreview": "Cerrar vista previa",
+    "home": "Inicio",
+    "lastModified": "Última modificación",
+    "loading": "Cargando...",
+    "lonely": "Uno se siente muy sólo aquí...",
+    "metadata": "Metadatos",
+    "multipleSelectionEnabled": "Selección múltiple activada",
+    "name": "Nombre",
+    "size": "Tamaño",
+    "sortByName": "Ordenar por nombre",
+    "sortBySize": "Ordenar por tamaño",
+    "sortByLastModified": "Ordenar por última modificación"
+  },
+  "help": {
+    "click": "seleccionar archivo o carpeta",
+    "ctrl": {
+      "click": "seleccionar múltiples archivos o carpetas",
+      "f": "abre la búsqueda",
+      "s": "guarda un archivo o lo descarga a la carpeta en la que estás"
+    },
+    "del": "elimina los items seleccionados",
+    "doubleClick": "abre un archivo o carpeta",
+    "esc": "limpia la selección y/o cierra la ventana",
+    "f1": "esta información",
+    "f2": "renombrar archivo",
+    "help": "Ayuda"
+  },
+  "login": {
+    "password": "Contraseña",
+    "passwordConfirm": "Confirmación de contraseña",
+    "submit": "Iniciar sesión",
+    "createAnAccount": "Crear una cuenta",
+    "loginInstead": "Usuario ya existente",
+    "passwordsDontMatch": "Las contraseñas no coinciden",
+    "usernameTaken": "Nombre usuario no disponible",
+    "signup": "Signup",
+    "username": "Usuario",
+    "wrongCredentials": "Usuario y/o contraseña incorrectos"
+  },
+  "prompts": {
+    "copy": "Copiar",
+    "copyMessage": "Elige el lugar donde quieres copiar tus archivos:",
+    "currentlyNavigating": "Actualmente estás en:",
+    "deleteMessageMultiple": "¿Estás seguro que quieres eliminar {count} archivo(s)?",
+    "deleteMessageSingle": "¿Estás seguro que quieres eliminar este archivo/carpeta?",
+    "deleteTitle": "Borrar archivos",
+    "displayName": "Nombre:",
+    "download": "Descargar archivos",
+    "downloadMessage": "Elige el formato de descarga.",
+    "error": "Algo ha fallado",
+    "fileInfo": "Información del archivo",
+    "filesSelected": "{count} archivos seleccionados.",
+    "lastModified": "Última modificación",
+    "move": "Mover",
+    "moveMessage": "Elige una nueva casa para tus archivo(s)/carpeta(s):",
+    "newDir": "Nueva carpeta",
+    "newDirMessage": "Escribe el nombre de la nueva carpeta.",
+    "newFile": "Nuevo archivo",
+    "newFileMessage": "Escribe el nombre del nuevo archivo.",
+    "numberDirs": "Número de carpetas",
+    "numberFiles": "Número de archivos",
+    "replace": "Reemplazar",
+    "replaceMessage": "Uno de los archivos ue intentas subir está creando conflicto por su nombre. ¿Quieres cambiar el nombre del ya existente?\n",
+    "rename": "Renombrar",
+    "renameMessage": "Escribe el nuevo nombre para",
+    "show": "Mostrar",
+    "size": "Tamaño",
+    "schedule": "Programar",
+    "scheduleMessage": "Elige una hora y fecha para programar la publicación de este post.",
+    "newArchetype": "Crea un nuevo post basado en un arquetipo. Tu archivo será creado en la carpeta de contenido."
+  },
+  "settings": {
+    "instanceName": "Nombre de la instancia",
+    "brandingDirectoryPath": "Branding directory path",
+    "documentation": "documentación",
+    "branding": "Branding",
+    "disableExternalLinks": "Deshabilitar enlaces externos (excepto documentación)",
+    "brandingHelp": "You can costumize how your File Browser instance looks and feels by changing its name, replacing the logo, adding custom styles and even disable external links to GitHub.\nFor more information about custom branding, please check out the {0}.",
+    "admin": "Admin",
+    "administrator": "Administrador",
+    "allowCommands": "Ejecutar comandos",
+    "allowEdit": "Editar, renombrar y borrar archivos o carpetas",
+    "allowNew": "Crear nuevos archivos y carpetas",
+    "allowPublish": "Publicar nuevos posts y páginas",
+    "avoidChanges": "(dejar en blanco para evitar cambios)",
+    "changePassword": "Cambiar contraseña",
+    "commandRunner": "Executor de comandos",
+    "commandRunnerHelp": "Here you can set commands that are executed in the named events. You must write one per line. The environment variables {0} and {1} will be available, being {0} relative to {1}. For more information about this feature and the available environment variables, please read the {2}.",
+    "commandsUpdated": "¡Comandos actualizados!",
+    "customStylesheet": "Modificar hoja de estilos",
+    "examples": "Ejemplos",
+    "globalSettings": "Ajustes globales",
+    "language": "Idioma",
+    "lockPassword": "Evitar que el usuario cambie la contraseña",
+    "newPassword": "Tu nueva contraseña",
+    "newPasswordConfirm": "Confirma tu contraseña",
+    "newUser": "Nuevo usuario",
+    "password": "Contraseña",
+    "passwordUpdated": "¡Contraseña actualizada!",
+    "permissions": "Permisos",
+    "permissionsHelp": "Puedes nombrar al usuario como administrador o elegir los permisos individualmente. Si seleccionas \"Administrador\", todas las otras opciones serán activadas automáticamente. La administración de usuarios es un privilegio de administrador.\n",
+    "profileSettings": "Ajustes del perfil",
+    "ruleExample1": "previene el acceso a una extensión de archivo (Como .git) en cada carpeta.\n",
+    "ruleExample2": "bloquea el acceso al archivo llamado Caddyfile en la carpeta raíz.",
+    "rules": "Reglas",
+    "rulesHelp": "Aquí puedes definir un conjunto de reglas de permisos para este usuario específico. Los archivos bloqueados no se mostrarán en las listas y no serán accesibles por el usuario. Puedes utilizar regex y rutas relativas a la raíz del usuario.\n",
+    "scope": "Raíz",
+    "settingsUpdated": "¡Ajustes actualizados!",
+    "user": "Usuario",
+    "userCommands": "Comandos",
+    "userCommandsHelp": "Una lista separada por espacios con los comandos permitidos para este usuario. Ejemplo:\n",
+    "userCreated": "¡Usuario creado!",
+    "userDeleted": "¡Usuario eliminado!",
+    "userManagement": "Administración de usuarios",
+    "username": "Usuario",
+    "users": "Usuarios",
+    "globalRules": "This is a global set of allow and disallow rules. They apply to every user. You can define specific rules on each user's settings to override this ones.",
+    "allowSignup": "Permitir registro de usuarios",
+    "createUserDir": "Auto create user home dir while adding new user",
+    "insertRegex": "Introducir expresión regular",
+    "insertPath": "Introduce la ruta",
+    "userUpdated": "¡Usuario actualizado!",
+    "userDefaults": "Configuración de usuario por defecto",
+    "defaultUserDescription": "Estas son las configuraciones por defecto para nuevos usuarios.",
+    "executeOnShell": "Ejecutar en la shell",
+    "executeOnShellDescription": "By default, File Browser executes the commands by calling their binaries directly. If you want to run them on a shell instead (such as Bash or PowerShell), you can define it here with the  required arguments and flags. If set, the command you execute will be appended as an argument. This apply to both user commands and event hooks.",
+    "perm": {
+      "create": "Crear ficheros y directorios",
+      "delete": "Eliminar ficheros y directorios",
+      "download": "Descargar",
+      "modify": "Editar ficheros",
+      "execute": "Executar comandos",
+      "rename": "Renombrar o mover ficheros y directorios",
+      "share": "Compartir ficheros"
+    }
+  },
+  "sidebar": {
+    "help": "Ayuda",
+    "login": "Login",
+    "signup": "Signup",
+    "logout": "Cerrar sesión",
+    "myFiles": "Mis archivos",
+    "newFile": "Nuevo archivo",
+    "newFolder": "Nueva carpeta",
+    "settings": "Ajustes",
+    "siteSettings": "Ajustes del sitio",
+    "hugoNew": "Nuevo Hugo",
+    "preview": "Vista previa"
+  },
+  "search": {
+    "images": "Images",
+    "music": "Música",
+    "pdf": "PDF",
+    "types": "Tipos",
+    "video": "Vídeo",
+    "search": "Buscar...",
+    "typeToSearch": "Type to search...",
+    "pressToSearch": "Press enter to search..."
+  },
+  "languages": {
+    "ar": "العربية",
+    "en": "English",
+    "it": "Italiano",
+    "fr": "Français",
+    "pt": "Português",
+    "ptBR": "Português (Brasil)",
+    "ja": "日本語",
+    "zhCN": "中文 (简体)",
+    "zhTW": "中文 (繁體)",
+    "es": "Español",
+    "de": "Deutsch",
+    "ru": "Русский",
+    "pl": "Polski",
+    "ko": "한국어"
+  },
+  "time": {
+    "unit": "Unidad",
+    "seconds": "Segundos",
+    "minutes": "Minutos",
+    "hours": "Horas",
+    "days": "Días"
+  },
+  "download": {
+    "downloadFile": "Descargar fichero",
+    "downloadFolder": "Descargar directorio"
+  }
+}

frontend/src/i18n/fr.json

@@ -0,0 +1,236 @@
+{
+  "permanent": "Permanent",
+  "buttons": {
+    "shell": "Toggle shell",
+    "cancel": "Annuler",
+    "close": "Fermer",
+    "copy": "Copier",
+    "copyFile": "Copier le fichier",
+    "copyToClipboard": "Copier dans le presse-papier",
+    "create": "Créer",
+    "delete": "Supprimer",
+    "download": "Télécharger",
+    "info": "Info",
+    "more": "Plus",
+    "move": "Déplacer",
+    "moveFile": "Déplacer le fichier",
+    "new": "Nouveau",
+    "next": "Suivant",
+    "ok": "OK",
+    "replace": "Remplacer",
+    "previous": "Précédent",
+    "rename": "Renommer",
+    "reportIssue": "Rapport d'erreur",
+    "save": "Enregistrer",
+    "search": "Chercher",
+    "select": "Sélectionner",
+    "share": "Partager",
+    "publish": "Publier",
+    "selectMultiple": "Sélection multiple",
+    "schedule": "Fixer la date",
+    "switchView": "Changer le mode d'affichage",
+    "toggleSidebar": "Afficher/Masquer la barre latérale",
+    "update": "Mettre à jour",
+    "upload": "Importer",
+    "permalink": "Obtenir un lien permanent"
+  },
+  "success": {
+    "linkCopied": "Link copied!"
+  },
+  "errors": {
+    "forbidden": "You don't have permissions to access this.",
+    "internal": "Aïe ! Quelque chose s'est mal passé.",
+    "notFound": "Impossible d'accéder à cet emplacement."
+  },
+  "files": {
+    "folders": "Dossiers",
+    "files": "Fichiers",
+    "body": "Corps",
+    "clear": "Fermer",
+    "closePreview": "Fermer la prévisualisation",
+    "home": "Accueil",
+    "lastModified": "Dernière modification",
+    "loading": "Chargement...",
+    "lonely": "Il semble qu'il n'y ai rien par ici...",
+    "metadata": "Metadonnées",
+    "multipleSelectionEnabled": "Sélection multiple activée",
+    "name": "Nom",
+    "size": "Taille",
+    "sortByName": "Trier par nom",
+    "sortBySize": "Trier par taille",
+    "sortByLastModified": "Trier par date de dernière modification"
+  },
+  "help": {
+    "click": "Sélectionner un élément",
+    "ctrl": {
+      "click": "Sélectionner plusieurs éléments",
+      "f": "Ouvrir l'invité de recherche",
+      "s": "Télécharger l'élément actuel"
+    },
+    "del": "Supprimer les éléments sélectionnés",
+    "doubleClick": "Ouvrir un élément",
+    "esc": "Désélectionner et/ou fermer la boîte de dialogue",
+    "f1": "Ouvrir l'aide",
+    "f2": "Renommer le fichier",
+    "help": "Aide"
+  },
+  "login": {
+    "password": "Mot de passe",
+    "passwordConfirm": "Password Confirmation",
+    "submit": "Se connecter",
+    "createAnAccount": "Create an account",
+    "loginInstead": "Already have an account",
+    "passwordsDontMatch": "Passwords don't match",
+    "usernameTaken": "Username already taken",
+    "signup": "Signup",
+    "username": "Utilisateur",
+    "wrongCredentials": "Identifiants incorrects !"
+  },
+  "prompts": {
+    "copy": "Copier",
+    "copyMessage": "Choisissez l'emplacement où copier la sélection :",
+    "currentlyNavigating": "Dossier courant :",
+    "deleteMessageMultiple": "Etes-vous sûr de vouloir supprimer ces {count} élément(s) ?",
+    "deleteMessageSingle": "Etes-vous sûr de vouloir supprimer cet élément ?",
+    "deleteTitle": "Supprimer",
+    "displayName": "Nom :",
+    "download": "Télécharger",
+    "downloadMessage": "Choisissez le format de téléchargement :",
+    "error": "Quelque chose s'est mal passé",
+    "fileInfo": "Informations",
+    "filesSelected": "{count} éléments sélectionnés",
+    "lastModified": "Dernière modification",
+    "move": "Déplacer",
+    "moveMessage": "Choisissez l'emplacement où déplacer la sélection :",
+    "newDir": "Nouveau dossier",
+    "newDirMessage": "Nom du nouveau dossier :",
+    "newFile": "Nouveau fichier",
+    "newFileMessage": "Nom du nouveau fichier :",
+    "numberDirs": "Nombre de dossiers",
+    "numberFiles": "Nombre de fichiers",
+    "replace": "Remplacer",
+    "replaceMessage": "Un des fichiers que vous êtes en train d'importer a le même nom qu'un autre déjà présent. Voulez-vous remplacer le fichier actuel par le nouveau ?\n",
+    "rename": "Renommer",
+    "renameMessage": "Nouveau nom pour",
+    "show": "Montrer",
+    "size": "Taille",
+    "schedule": "Fixer la date",
+    "scheduleMessage": "Choisissez une date pour planifier la publication de ce post",
+    "newArchetype": "Créer un nouveau post basé sur un archétype. Votre fichier sera créé dans le dossier de contenu."
+  },
+  "settings": {
+    "instanceName": "Instance name",
+    "brandingDirectoryPath": "Branding directory path",
+    "documentation": "documentation",
+    "branding": "Branding",
+    "disableExternalLinks": "Disable external links (except documentation)",
+    "brandingHelp": "You can costumize how your File Browser instance looks and feels by changing its name, replacing the logo, adding custom styles and even disable external links to GitHub.\nFor more information about custom branding, please check out the {0}.",
+    "admin": "Admin",
+    "administrator": "Administrateur",
+    "allowCommands": "Exécuter des commandes",
+    "allowEdit": "Editer, renommer et supprimer des fichiers ou des dossiers",
+    "allowNew": "Créer de nouveaux fichiers et dossiers",
+    "allowPublish": "Publier de nouveaux posts et pages",
+    "avoidChanges": "(Laisser vide pour conserver l'actuel)",
+    "changePassword": "Modifier le mot de passe",
+    "commandRunner": "Command runner",
+    "commandRunnerHelp": "Here you can set commands that are executed in the named events. You must write one per line. The environment variables {0} and {1} will be available, being {0} relative to {1}. For more information about this feature and the available environment variables, please read the {2}.",
+    "commandsUpdated": "Commandes mises à jour !",
+    "customStylesheet": "Feuille de style personnalisée",
+    "examples": "Exemples",
+    "globalSettings": "Paramètres généraux",
+    "language": "Langue",
+    "lockPassword": "Prevent the user from changing the password",
+    "newPassword": "Votre nouveau mot de passe",
+    "newPasswordConfirm": "Confirmation du nouveau mot de passe",
+    "newUser": "Nouvel Utilisateur",
+    "password": "Mot de passe",
+    "passwordUpdated": "Mot de passe mis à jour !",
+    "permissions": "Permissions",
+    "permissionsHelp": "Vous pouvez définir l'utilisateur comme étant un administrateur ou encore choisir les permissions individuellement. Si vous sélectionnez \"Administrateur\", toutes les autres options seront automatiquement activées. La gestion des utilisateurs est un privilège que seul l'administrateur possède.\n",
+    "profileSettings": "Paramètres du profil",
+    "ruleExample1": "Bloque l'accès à tous les fichiers commençant par un point (comme par exemple .git, .gitignore) dans tous les dossiers",
+    "ruleExample2": "Bloque l'accès au fichier nommé \"Caddyfile\" à la racine du dossier utilisateur",
+    "rules": "Règles",
+    "rulesHelp": "Vous pouvez définir ici un ensemble de règles pour cet utilisateur. Les fichiers bloqués ne seront pas affichés et ne seront pas accessibles par l'utilisateur. Les expressions régulières sont supportées et les chemins d'accès sont relatifs par rapport au dossier de l'utilisateur.\n",
+    "scope": "Portée du dossier utilisateur",
+    "settingsUpdated": "Les paramètres ont été mis à jour !",
+    "user": "Utilisateur",
+    "userCommands": "Commandes",
+    "userCommandsHelp": "Une liste séparée par des espaces des commandes permises pour l'utilisateur. Exemple :",
+    "userCreated": "Utilisateur créé !",
+    "userDeleted": "Utilisateur supprimé !",
+    "userManagement": "Gestion des utilisateurs",
+    "username": "Nom d'utilisateur",
+    "users": "Utilisateurs",
+    "globalRules": "This is a global set of allow and disallow rules. They apply to every user. You can define specific rules on each user's settings to override this ones.",
+    "allowSignup": "Allow users to signup",
+    "createUserDir": "Auto create user home dir while adding new user",
+    "insertRegex": "Insert regex expression",
+    "insertPath": "Insert the path",
+    "userUpdated": "Utilisateur mis à jour !",
+    "userDefaults": "User default settings",
+    "defaultUserDescription": "This are the default settings for new users.",
+    "executeOnShell": "Execute on shell",
+    "executeOnShellDescription": "By default, File Browser executes the commands by calling their binaries directly. If you want to run them on a shell instead (such as Bash or PowerShell), you can define it here with the  required arguments and flags. If set, the command you execute will be appended as an argument. This apply to both user commands and event hooks.",
+    "perm": {
+      "create": "Create files and directories",
+      "delete": "Delete files and directories",
+      "download": "Download",
+      "modify": "Edit files",
+      "execute": "Execute commands",
+      "rename": "Rename or move files and directories",
+      "share": "Share files"
+    }
+  },
+  "sidebar": {
+    "help": "Aide",
+    "login": "Login",
+    "signup": "Signup",
+    "logout": "Se déconnecter",
+    "myFiles": "Mes fichiers",
+    "newFile": "Nouveau fichier",
+    "newFolder": "Nouveau dossier",
+    "settings": "Paramètres",
+    "siteSettings": "Paramètres du site",
+    "hugoNew": "Nouveau Hugo",
+    "preview": "Prévisualiser"
+  },
+  "search": {
+    "images": "Images",
+    "music": "Musique",
+    "pdf": "PDF",
+    "types": "Types",
+    "video": "Video",
+    "search": "Recherche en cours...",
+    "typeToSearch": "Type to search...",
+    "pressToSearch": "Press enter to search..."
+  },
+  "languages": {
+    "ar": "العربية",
+    "en": "English",
+    "it": "Italiano",
+    "fr": "Français",
+    "pt": "Português",
+    "ptBR": "Português (Brasil)",
+    "ja": "日本語",
+    "zhCN": "中文 (简体)",
+    "zhTW": "中文 (繁體)",
+    "es": "Español",
+    "de": "Deutsch",
+    "ru": "Русский",
+    "pl": "Polski",
+    "ko": "한국어"
+  },
+  "time": {
+    "unit": "Unité de temps",
+    "seconds": "Secondes",
+    "minutes": "Minutes",
+    "hours": "Heures",
+    "days": "Jours"
+  },
+  "download": {
+    "downloadFile": "Download File",
+    "downloadFolder": "Download Folder"
+  }
+}