Version 1.4.2

Former-commit-id: 6dab389efe4eed59f8f39d76e60130ccc74a13ea [formerly 8e106da6d1e25e04a26654435bb180793cc87c3d] [formerly cf02028f5fb706a296a8320fa1d54f222d02f78f [formerly 02f6bb81ccf9c39ea7b1174aa79bd9d2881e0245]]
Former-commit-id: b903fc7a2bf4fdad3a8c89a67b34d99fb3273c35 [formerly 6ea119c7468502d2244108600f0389eb05b502a3]
Former-commit-id: 96de8cafcd6c1ce94f05854a9fb2e9aa3d99eafb

.babelrc

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

.dockerignore

@@ -1,4 +1,4 @@
-assets/
+assets/
-testdata/
+testdata/
-caddy/
+caddy/
-.github/
+.github/

.editorconfig

@@ -1,14 +1,14 @@
-root = true
+root = true
-
+
-[*]
+[*]
-charset = utf-8
+charset = utf-8
-indent_style = space
+indent_style = space
-indent_size = 2
+indent_size = 2
-end_of_line = lf
+end_of_line = lf
-insert_final_newline = true
+insert_final_newline = true
-trim_trailing_whitespace = true
+trim_trailing_whitespace = true
-
+
-# 4 space indentation
+# 4 space indentation
-[*.go]
+[*.go]
-indent_style = tab
+indent_style = tab
 indent_size = 4

.eslintignore

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

.eslintrc.js

@@ -1,27 +1,27 @@
-// http://eslint.org/docs/user-guide/configuring
+// http://eslint.org/docs/user-guide/configuring
-
+
-module.exports = {
+module.exports = {
-  root: true,
+  root: true,
-  parser: 'babel-eslint',
+  parser: 'babel-eslint',
-  parserOptions: {
+  parserOptions: {
-    sourceType: 'module'
+    sourceType: 'module'
-  },
+  },
-  env: {
+  env: {
-    browser: true,
+    browser: true,
-  },
+  },
-  // https://github.com/feross/standard/blob/master/RULES.md#javascript-standard-style
+  // https://github.com/feross/standard/blob/master/RULES.md#javascript-standard-style
-  extends: 'standard',
+  extends: 'standard',
-  // required to lint *.vue files
+  // required to lint *.vue files
-  plugins: [
+  plugins: [
-    'html'
+    'html'
-  ],
+  ],
-  // add your custom rules here
+  // add your custom rules here
-  'rules': {
+  'rules': {
-    // allow paren-less arrow functions
+    // allow paren-less arrow functions
-    'arrow-parens': 0,
+    'arrow-parens': 0,
-    // allow async-await
+    // allow async-await
-    'generator-star-spacing': 0,
+    'generator-star-spacing': 0,
-    // allow debugger during development
+    // allow debugger during development
-    'no-debugger': process.env.NODE_ENV === 'production' ? 2 : 0
+    'no-debugger': process.env.NODE_ENV === 'production' ? 2 : 0
-  }
+  }
-}
+}

.github/ISSUE_TEMPLATE.md

@@ -1,24 +1,24 @@
-### Instructions (remove before submitting):
+### Instructions (remove before submitting):
-
+
-1. Are you asking for help with using Caddy or File Manager? Please use our forum instead: https://forum.caddyserver.com.
+1. Are you asking for help with using Caddy or File Manager? Please use our forum instead: https://forum.caddyserver.com.
-2. If you are filing a bug report, please answer the following questions.
+2. If you are filing a bug report, please answer the following questions.
-3. If your issue is not a bug report, you do not need to use this template.
+3. If your issue is not a bug report, you do not need to use this template.
-4. If not using with Caddy, ignore questions 1 and 2.
+4. If not using with Caddy, ignore questions 1 and 2.
-
+
-### 1. Have you downloaded File Manager from caddyserver.com? If yes, when have you done that? If no, and you are running a custom build, which is the revision of File Manager's repository?
+### 1. Have you downloaded File Manager from caddyserver.com? If yes, when have you done that? If no, and you are running a custom build, which is the revision of File Manager's repository?
-
+
-### 2. What is your entire Caddyfile?
+### 2. What is your entire Caddyfile?
-```text
+```text
-(Put Caddyfile here)
+(Put Caddyfile here)
-```
+```
-
+
-### 3. What are you trying to do?
+### 3. What are you trying to do?
-
+
-
+
-### 4. What did you expect to see?
+### 4. What did you expect to see?
-
+
-
+
-### 5. What did you see instead (give full error messages and/or log)?
+### 5. What did you see instead (give full error messages and/or log)?
-
+
-
+
-### 6. How can someone who is starting from scratch reproduce this behaviour as minimally as possible?
+### 6. How can someone who is starting from scratch reproduce this behaviour as minimally as possible?

.gitignore

@@ -6,3 +6,7 @@ node_modules/
 npm-debug.log*
 yarn-debug.log*
 yarn-error.log*
+.idea
+.vscode
+package-lock.json
+yarn.lock

.goreleaser.yml

@@ -1,29 +1,37 @@
-build:
+build:
-  main: cmd/filemanager/main.go
+  main: cmd/filemanager/main.go
-  binary: filemanager
+  binary: filemanager
-  goos:
+  goos:
-    - darwin
+    - darwin
-    - linux
+    - linux
-    - windows
+    - windows
-    - freebsd
+    - freebsd
-    - netbsd
+    - netbsd
-    - openbsd
+    - openbsd
-  goarch:
+    - dragonfly
-    - amd64
+    - solaris
-    - 386
+  goarch:
-    - arm
+    - amd64
-    - arm64
+    - 386
-  ignore:
+    - arm
-    - goos: openbsd
+    - arm64
-      goarch: arm
+    - mips
-      goarm: 6
+    - mips64
-    - goos: freebsd
+    - mipsle
-      goarch: arm
+    - mips64le
-      goarm: 6
+  ignore:
-
+    - goos: openbsd
-archive:
+      goarch: arm
-  name_template: "{{.Os}}-{{.Arch}}-{{ .ProjectName }}"
+      goarm: 6
-  format: tar.gz
+    - goos: freebsd
-  format_overrides:
+      goarch: arm
-    - goos: windows
+      goarm: 6
-      format: zip
+    - goos: linux
+      goarch: arm64
+
+archive:
+  name_template: "{{.Os}}-{{.Arch}}-{{ .ProjectName }}"
+  format: tar.gz
+  format_overrides:
+    - goos: windows
+      format: zip

.travis.yml

@@ -1,6 +1,6 @@
 language: go
 
-go: 1.8.3
+go: 1.x
 
 env:
   - "PATH=/home/travis/gopath/bin:$PATH"
@@ -15,7 +15,7 @@ install:
   - go get github.com/tsenart/deadcode
 
 script:
-  - gometalinter --disable-all -E vet -E gofmt -E misspell -E ineffassign -E goimports -E deadcode --exclude="rice-box.go" --tests ./...
+  - gometalinter --disable-all -E gofmt -E misspell -E ineffassign -E goimports -E deadcode --exclude="rice-box.go" --tests ./...
   - go test ./... -timeout 30s
 
 after_success:

CODE_OF_CONDUCT.md

@@ -1,46 +1,46 @@
-# Contributor Covenant Code of Conduct
+# Contributor Covenant Code of Conduct
-
+
-## Our Pledge
+## Our Pledge
-
+
-In the interest of fostering an open and welcoming environment, we as contributors and maintainers pledge to making participation in our project and our community a harassment-free experience for everyone, regardless of age, body size, disability, ethnicity, gender identity and expression, level of experience, nationality, personal appearance, race, religion, or sexual identity and orientation.
+In the interest of fostering an open and welcoming environment, we as contributors and maintainers pledge to making participation in our project and our community a harassment-free experience for everyone, regardless of age, body size, disability, ethnicity, gender identity and expression, level of experience, nationality, personal appearance, race, religion, or sexual identity and orientation.
-
+
-## Our Standards
+## Our Standards
-
+
-Examples of behavior that contributes to creating a positive environment include:
+Examples of behavior that contributes to creating a positive environment include:
-
+
-* Using welcoming and inclusive language
+* Using welcoming and inclusive language
-* Being respectful of differing viewpoints and experiences
+* Being respectful of differing viewpoints and experiences
-* Gracefully accepting constructive criticism
+* Gracefully accepting constructive criticism
-* Focusing on what is best for the community
+* Focusing on what is best for the community
-* Showing empathy towards other community members
+* Showing empathy towards other community members
-
+
-Examples of unacceptable behavior by participants include:
+Examples of unacceptable behavior by participants include:
-
+
-* The use of sexualized language or imagery and unwelcome sexual attention or advances
+* The use of sexualized language or imagery and unwelcome sexual attention or advances
-* Trolling, insulting/derogatory comments, and personal or political attacks
+* Trolling, insulting/derogatory comments, and personal or political attacks
-* Public or private harassment
+* Public or private harassment
-* Publishing others' private information, such as a physical or electronic address, without explicit permission
+* Publishing others' private information, such as a physical or electronic address, without explicit permission
-* Other conduct which could reasonably be considered inappropriate in a professional setting
+* Other conduct which could reasonably be considered inappropriate in a professional setting
-
+
-## Our Responsibilities
+## Our Responsibilities
-
+
-Project maintainers are responsible for clarifying the standards of acceptable behavior and are expected to take appropriate and fair corrective action in response to any instances of unacceptable behavior.
+Project maintainers are responsible for clarifying the standards of acceptable behavior and are expected to take appropriate and fair corrective action in response to any instances of unacceptable behavior.
-
+
-Project maintainers have the right and responsibility to remove, edit, or reject comments, commits, code, wiki edits, issues, and other contributions that are not aligned to this Code of Conduct, or to ban temporarily or permanently any contributor for other behaviors that they deem inappropriate, threatening, offensive, or harmful.
+Project maintainers have the right and responsibility to remove, edit, or reject comments, commits, code, wiki edits, issues, and other contributions that are not aligned to this Code of Conduct, or to ban temporarily or permanently any contributor for other behaviors that they deem inappropriate, threatening, offensive, or harmful.
-
+
-## Scope
+## Scope
-
+
-This Code of Conduct applies both within project spaces and in public spaces when an individual is representing the project or its community. Examples of representing a project or community include using an official project e-mail address, posting via an official social media account, or acting as an appointed representative at an online or offline event. Representation of a project may be further defined and clarified by project maintainers.
+This Code of Conduct applies both within project spaces and in public spaces when an individual is representing the project or its community. Examples of representing a project or community include using an official project e-mail address, posting via an official social media account, or acting as an appointed representative at an online or offline event. Representation of a project may be further defined and clarified by project maintainers.
-
+
-## Enforcement
+## Enforcement
-
+
-Instances of abusive, harassing, or otherwise unacceptable behavior may be reported by contacting the project team at hacdias@gmail.com. The project team will review and investigate all complaints, and will respond in a way that it deems appropriate to the circumstances. The project team is obligated to maintain confidentiality with regard to the reporter of an incident. Further details of specific enforcement policies may be posted separately.
+Instances of abusive, harassing, or otherwise unacceptable behavior may be reported by contacting the project team at hacdias@gmail.com. The project team will review and investigate all complaints, and will respond in a way that it deems appropriate to the circumstances. The project team is obligated to maintain confidentiality with regard to the reporter of an incident. Further details of specific enforcement policies may be posted separately.
-
+
-Project maintainers who do not follow or enforce the Code of Conduct in good faith may face temporary or permanent repercussions as determined by other members of the project's leadership.
+Project maintainers who do not follow or enforce the Code of Conduct in good faith may face temporary or permanent repercussions as determined by other members of the project's leadership.
-
+
-## Attribution
+## Attribution
-
+
-This Code of Conduct is adapted from the [Contributor Covenant][homepage], version 1.4, available at [http://contributor-covenant.org/version/1/4][version]
+This Code of Conduct is adapted from the [Contributor Covenant][homepage], version 1.4, available at [http://contributor-covenant.org/version/1/4][version]
-
+
-[homepage]: http://contributor-covenant.org
+[homepage]: http://contributor-covenant.org
-[version]: http://contributor-covenant.org/version/1/4/
+[version]: http://contributor-covenant.org/version/1/4/

CONTRIBUTING.md

@@ -1,14 +1,14 @@
-# Contributing
+# Contributing
-
+
-If you want to contribute or want to build the code from source, you will need to have the most recent version of Go and, if you want to change the static assets (JS, CSS, ...), Node.js installed on your computer. To start developing, you just need to do the following:
+If you want to contribute or want to build the code from source, you will need to have the most recent version of Go and, if you want to change the static assets (JS, CSS, ...), Node.js installed on your computer. To start developing, you just need to do the following:
-
+
-1. `go get github.com/hacdias/filemanager`
+1. `go get github.com/hacdias/filemanager/cmd/filemanager`
-2. `cd $GOPATH/src/github.com/hacdias/filemanager`
+2. `cd $GOPATH/src/github.com/hacdias/filemanager`
-3. `npm install`
+3. `npm install`
-4. `npm run dev` - regenerates the static assets automatically
+4. `npm run dev` - regenerates the static assets automatically
-5. `go install github.com/hacdias/filemanager/cmd/filemanager`
+5. `go install github.com/hacdias/filemanager/cmd/filemanager`
-6. Execute `$GOPATH/bin/filemanager`
+6. Execute `$GOPATH/bin/filemanager`
-
+
-The steps 3 and 4 are only required **if you want to develop the front-end**. Otherwise, you can ignore them. Before pulling, if you made any change on assets folder, you must run the `build.sh` script on the root of this repository.
+The steps 3 and 4 are only required **if you want to develop the front-end**. Otherwise, you can ignore them. Before pulling, if you made any change on assets folder, you must run the `build.sh` script on the root of this repository.
-
+
-If you are using this as a Caddy plugin, you should use its [official instructions for plugins](https://github.com/mholt/caddy/wiki/Extending-Caddy#2-plug-in-your-plugin) and import `github.com/hacdias/filemanager/caddy/filemanager`.
+If you are using this as a Caddy plugin, you should use its [official instructions for plugins](https://github.com/mholt/caddy/wiki/Extending-Caddy#2-plug-in-your-plugin) and import `github.com/hacdias/filemanager/caddy/filemanager`.

Docker.json

@@ -1,7 +1,7 @@
 {
   "port": 80,
   "address": "",
-  "database": "/etc/database.db",
+  "database": "/database.db",
   "scope": "/srv",
   "allowCommands": true,
   "allowEdit": true,

Dockerfile

@@ -1,22 +1,23 @@
-FROM golang:alpine
+FROM golang:alpine
-
+
-COPY . /go/src/github.com/hacdias/filemanager
+COPY . /go/src/github.com/hacdias/filemanager
-
+
-WORKDIR /go/src/github.com/hacdias/filemanager
+WORKDIR /go/src/github.com/hacdias/filemanager
-RUN apk add --no-cache git
+RUN apk add --no-cache git
-RUN go get ./...
+RUN go get ./...
-
+
-WORKDIR /go/src/github.com/hacdias/filemanager/cmd/filemanager
+WORKDIR /go/src/github.com/hacdias/filemanager/cmd/filemanager
-RUN go build -ldflags "-X main.version=$(git tag -l --points-at HEAD)"
+RUN CGO_ENABLED=0 go build -a
-RUN mv filemanager /go/bin/filemanager
+RUN mv filemanager /go/bin/filemanager
-
+
-FROM alpine:latest
+FROM scratch
-COPY --from=0 /go/bin/filemanager /usr/local/bin/filemanager
+COPY --from=0 /go/bin/filemanager /filemanager
-
+
-VOLUME /srv
+VOLUME /tmp
-EXPOSE 80
+VOLUME /srv
-
+EXPOSE 80
-COPY Docker.json /etc/config.json
+
-
+COPY Docker.json /config.json
-ENTRYPOINT ["/usr/local/bin/filemanager"]
+
-CMD ["--config", "/etc/config.json"]
+ENTRYPOINT ["/filemanager"]
+CMD ["--config", "/config.json"]

LICENSE.md

@@ -1,201 +1,201 @@
-Apache License
+Apache License
-Version 2.0, January 2004
+Version 2.0, January 2004
-http://www.apache.org/licenses/
+http://www.apache.org/licenses/
-
+
-TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION
+TERMS AND CONDITIONS FOR USE, REPRODUCTION, AND DISTRIBUTION
-
+
-1. Definitions.
+1. Definitions.
-
+
-"License" shall mean the terms and conditions for use, reproduction,
+"License" shall mean the terms and conditions for use, reproduction,
-and distribution as defined by Sections 1 through 9 of this document.
+and distribution as defined by Sections 1 through 9 of this document.
-
+
-"Licensor" shall mean the copyright owner or entity authorized by
+"Licensor" shall mean the copyright owner or entity authorized by
-the copyright owner that is granting the License.
+the copyright owner that is granting the License.
-
+
-"Legal Entity" shall mean the union of the acting entity and all
+"Legal Entity" shall mean the union of the acting entity and all
-other entities that control, are controlled by, or are under common
+other entities that control, are controlled by, or are under common
-control with that entity. For the purposes of this definition,
+control with that entity. For the purposes of this definition,
-"control" means (i) the power, direct or indirect, to cause the
+"control" means (i) the power, direct or indirect, to cause the
-direction or management of such entity, whether by contract or
+direction or management of such entity, whether by contract or
-otherwise, or (ii) ownership of fifty percent (50%) or more of the
+otherwise, or (ii) ownership of fifty percent (50%) or more of the
-outstanding shares, or (iii) beneficial ownership of such entity.
+outstanding shares, or (iii) beneficial ownership of such entity.
-
+
-"You" (or "Your") shall mean an individual or Legal Entity
+"You" (or "Your") shall mean an individual or Legal Entity
-exercising permissions granted by this License.
+exercising permissions granted by this License.
-
+
-"Source" form shall mean the preferred form for making modifications,
+"Source" form shall mean the preferred form for making modifications,
-including but not limited to software source code, documentation
+including but not limited to software source code, documentation
-source, and configuration files.
+source, and configuration files.
-
+
-"Object" form shall mean any form resulting from mechanical
+"Object" form shall mean any form resulting from mechanical
-transformation or translation of a Source form, including but
+transformation or translation of a Source form, including but
-not limited to compiled object code, generated documentation,
+not limited to compiled object code, generated documentation,
-and conversions to other media types.
+and conversions to other media types.
-
+
-"Work" shall mean the work of authorship, whether in Source or
+"Work" shall mean the work of authorship, whether in Source or
-Object form, made available under the License, as indicated by a
+Object form, made available under the License, as indicated by a
-copyright notice that is included in or attached to the work
+copyright notice that is included in or attached to the work
-(an example is provided in the Appendix below).
+(an example is provided in the Appendix below).
-
+
-"Derivative Works" shall mean any work, whether in Source or Object
+"Derivative Works" shall mean any work, whether in Source or Object
-form, that is based on (or derived from) the Work and for which the
+form, that is based on (or derived from) the Work and for which the
-editorial revisions, annotations, elaborations, or other modifications
+editorial revisions, annotations, elaborations, or other modifications
-represent, as a whole, an original work of authorship. For the purposes
+represent, as a whole, an original work of authorship. For the purposes
-of this License, Derivative Works shall not include works that remain
+of this License, Derivative Works shall not include works that remain
-separable from, or merely link (or bind by name) to the interfaces of,
+separable from, or merely link (or bind by name) to the interfaces of,
-the Work and Derivative Works thereof.
+the Work and Derivative Works thereof.
-
+
-"Contribution" shall mean any work of authorship, including
+"Contribution" shall mean any work of authorship, including
-the original version of the Work and any modifications or additions
+the original version of the Work and any modifications or additions
-to that Work or Derivative Works thereof, that is intentionally
+to that Work or Derivative Works thereof, that is intentionally
-submitted to Licensor for inclusion in the Work by the copyright owner
+submitted to Licensor for inclusion in the Work by the copyright owner
-or by an individual or Legal Entity authorized to submit on behalf of
+or by an individual or Legal Entity authorized to submit on behalf of
-the copyright owner. For the purposes of this definition, "submitted"
+the copyright owner. For the purposes of this definition, "submitted"
-means any form of electronic, verbal, or written communication sent
+means any form of electronic, verbal, or written communication sent
-to the Licensor or its representatives, including but not limited to
+to the Licensor or its representatives, including but not limited to
-communication on electronic mailing lists, source code control systems,
+communication on electronic mailing lists, source code control systems,
-and issue tracking systems that are managed by, or on behalf of, the
+and issue tracking systems that are managed by, or on behalf of, the
-Licensor for the purpose of discussing and improving the Work, but
+Licensor for the purpose of discussing and improving the Work, but
-excluding communication that is conspicuously marked or otherwise
+excluding communication that is conspicuously marked or otherwise
-designated in writing by the copyright owner as "Not a Contribution."
+designated in writing by the copyright owner as "Not a Contribution."
-
+
-"Contributor" shall mean Licensor and any individual or Legal Entity
+"Contributor" shall mean Licensor and any individual or Legal Entity
-on behalf of whom a Contribution has been received by Licensor and
+on behalf of whom a Contribution has been received by Licensor and
-subsequently incorporated within the Work.
+subsequently incorporated within the Work.
-
+
-2. Grant of Copyright License. Subject to the terms and conditions of
+2. Grant of Copyright License. Subject to the terms and conditions of
-this License, each Contributor hereby grants to You a perpetual,
+this License, each Contributor hereby grants to You a perpetual,
-worldwide, non-exclusive, no-charge, royalty-free, irrevocable
+worldwide, non-exclusive, no-charge, royalty-free, irrevocable
-copyright license to reproduce, prepare Derivative Works of,
+copyright license to reproduce, prepare Derivative Works of,
-publicly display, publicly perform, sublicense, and distribute the
+publicly display, publicly perform, sublicense, and distribute the
-Work and such Derivative Works in Source or Object form.
+Work and such Derivative Works in Source or Object form.
-
+
-3. Grant of Patent License. Subject to the terms and conditions of
+3. Grant of Patent License. Subject to the terms and conditions of
-this License, each Contributor hereby grants to You a perpetual,
+this License, each Contributor hereby grants to You a perpetual,
-worldwide, non-exclusive, no-charge, royalty-free, irrevocable
+worldwide, non-exclusive, no-charge, royalty-free, irrevocable
-(except as stated in this section) patent license to make, have made,
+(except as stated in this section) patent license to make, have made,
-use, offer to sell, sell, import, and otherwise transfer the Work,
+use, offer to sell, sell, import, and otherwise transfer the Work,
-where such license applies only to those patent claims licensable
+where such license applies only to those patent claims licensable
-by such Contributor that are necessarily infringed by their
+by such Contributor that are necessarily infringed by their
-Contribution(s) alone or by combination of their Contribution(s)
+Contribution(s) alone or by combination of their Contribution(s)
-with the Work to which such Contribution(s) was submitted. If You
+with the Work to which such Contribution(s) was submitted. If You
-institute patent litigation against any entity (including a
+institute patent litigation against any entity (including a
-cross-claim or counterclaim in a lawsuit) alleging that the Work
+cross-claim or counterclaim in a lawsuit) alleging that the Work
-or a Contribution incorporated within the Work constitutes direct
+or a Contribution incorporated within the Work constitutes direct
-or contributory patent infringement, then any patent licenses
+or contributory patent infringement, then any patent licenses
-granted to You under this License for that Work shall terminate
+granted to You under this License for that Work shall terminate
-as of the date such litigation is filed.
+as of the date such litigation is filed.
-
+
-4. Redistribution. You may reproduce and distribute copies of the
+4. Redistribution. You may reproduce and distribute copies of the
-Work or Derivative Works thereof in any medium, with or without
+Work or Derivative Works thereof in any medium, with or without
-modifications, and in Source or Object form, provided that You
+modifications, and in Source or Object form, provided that You
-meet the following conditions:
+meet the following conditions:
-
+
-(a) You must give any other recipients of the Work or
+(a) You must give any other recipients of the Work or
-Derivative Works a copy of this License; and
+Derivative Works a copy of this License; and
-
+
-(b) You must cause any modified files to carry prominent notices
+(b) You must cause any modified files to carry prominent notices
-stating that You changed the files; and
+stating that You changed the files; and
-
+
-(c) You must retain, in the Source form of any Derivative Works
+(c) You must retain, in the Source form of any Derivative Works
-that You distribute, all copyright, patent, trademark, and
+that You distribute, all copyright, patent, trademark, and
-attribution notices from the Source form of the Work,
+attribution notices from the Source form of the Work,
-excluding those notices that do not pertain to any part of
+excluding those notices that do not pertain to any part of
-the Derivative Works; and
+the Derivative Works; and
-
+
-(d) If the Work includes a "NOTICE" text file as part of its
+(d) If the Work includes a "NOTICE" text file as part of its
-distribution, then any Derivative Works that You distribute must
+distribution, then any Derivative Works that You distribute must
-include a readable copy of the attribution notices contained
+include a readable copy of the attribution notices contained
-within such NOTICE file, excluding those notices that do not
+within such NOTICE file, excluding those notices that do not
-pertain to any part of the Derivative Works, in at least one
+pertain to any part of the Derivative Works, in at least one
-of the following places: within a NOTICE text file distributed
+of the following places: within a NOTICE text file distributed
-as part of the Derivative Works; within the Source form or
+as part of the Derivative Works; within the Source form or
-documentation, if provided along with the Derivative Works; or,
+documentation, if provided along with the Derivative Works; or,
-within a display generated by the Derivative Works, if and
+within a display generated by the Derivative Works, if and
-wherever such third-party notices normally appear. The contents
+wherever such third-party notices normally appear. The contents
-of the NOTICE file are for informational purposes only and
+of the NOTICE file are for informational purposes only and
-do not modify the License. You may add Your own attribution
+do not modify the License. You may add Your own attribution
-notices within Derivative Works that You distribute, alongside
+notices within Derivative Works that You distribute, alongside
-or as an addendum to the NOTICE text from the Work, provided
+or as an addendum to the NOTICE text from the Work, provided
-that such additional attribution notices cannot be construed
+that such additional attribution notices cannot be construed
-as modifying the License.
+as modifying the License.
-
+
-You may add Your own copyright statement to Your modifications and
+You may add Your own copyright statement to Your modifications and
-may provide additional or different license terms and conditions
+may provide additional or different license terms and conditions
-for use, reproduction, or distribution of Your modifications, or
+for use, reproduction, or distribution of Your modifications, or
-for any such Derivative Works as a whole, provided Your use,
+for any such Derivative Works as a whole, provided Your use,
-reproduction, and distribution of the Work otherwise complies with
+reproduction, and distribution of the Work otherwise complies with
-the conditions stated in this License.
+the conditions stated in this License.
-
+
-5. Submission of Contributions. Unless You explicitly state otherwise,
+5. Submission of Contributions. Unless You explicitly state otherwise,
-any Contribution intentionally submitted for inclusion in the Work
+any Contribution intentionally submitted for inclusion in the Work
-by You to the Licensor shall be under the terms and conditions of
+by You to the Licensor shall be under the terms and conditions of
-this License, without any additional terms or conditions.
+this License, without any additional terms or conditions.
-Notwithstanding the above, nothing herein shall supersede or modify
+Notwithstanding the above, nothing herein shall supersede or modify
-the terms of any separate license agreement you may have executed
+the terms of any separate license agreement you may have executed
-with Licensor regarding such Contributions.
+with Licensor regarding such Contributions.
-
+
-6. Trademarks. This License does not grant permission to use the trade
+6. Trademarks. This License does not grant permission to use the trade
-names, trademarks, service marks, or product names of the Licensor,
+names, trademarks, service marks, or product names of the Licensor,
-except as required for reasonable and customary use in describing the
+except as required for reasonable and customary use in describing the
-origin of the Work and reproducing the content of the NOTICE file.
+origin of the Work and reproducing the content of the NOTICE file.
-
+
-7. Disclaimer of Warranty. Unless required by applicable law or
+7. Disclaimer of Warranty. Unless required by applicable law or
-agreed to in writing, Licensor provides the Work (and each
+agreed to in writing, Licensor provides the Work (and each
-Contributor provides its Contributions) on an "AS IS" BASIS,
+Contributor provides its Contributions) on an "AS IS" BASIS,
-WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or
-implied, including, without limitation, any warranties or conditions
+implied, including, without limitation, any warranties or conditions
-of TITLE, NON-INFRINGEMENT, MERCHANTABILITY, or FITNESS FOR A
+of TITLE, NON-INFRINGEMENT, MERCHANTABILITY, or FITNESS FOR A
-PARTICULAR PURPOSE. You are solely responsible for determining the
+PARTICULAR PURPOSE. You are solely responsible for determining the
-appropriateness of using or redistributing the Work and assume any
+appropriateness of using or redistributing the Work and assume any
-risks associated with Your exercise of permissions under this License.
+risks associated with Your exercise of permissions under this License.
-
+
-8. Limitation of Liability. In no event and under no legal theory,
+8. Limitation of Liability. In no event and under no legal theory,
-whether in tort (including negligence), contract, or otherwise,
+whether in tort (including negligence), contract, or otherwise,
-unless required by applicable law (such as deliberate and grossly
+unless required by applicable law (such as deliberate and grossly
-negligent acts) or agreed to in writing, shall any Contributor be
+negligent acts) or agreed to in writing, shall any Contributor be
-liable to You for damages, including any direct, indirect, special,
+liable to You for damages, including any direct, indirect, special,
-incidental, or consequential damages of any character arising as a
+incidental, or consequential damages of any character arising as a
-result of this License or out of the use or inability to use the
+result of this License or out of the use or inability to use the
-Work (including but not limited to damages for loss of goodwill,
+Work (including but not limited to damages for loss of goodwill,
-work stoppage, computer failure or malfunction, or any and all
+work stoppage, computer failure or malfunction, or any and all
-other commercial damages or losses), even if such Contributor
+other commercial damages or losses), even if such Contributor
-has been advised of the possibility of such damages.
+has been advised of the possibility of such damages.
-
+
-9. Accepting Warranty or Additional Liability. While redistributing
+9. Accepting Warranty or Additional Liability. While redistributing
-the Work or Derivative Works thereof, You may choose to offer,
+the Work or Derivative Works thereof, You may choose to offer,
-and charge a fee for, acceptance of support, warranty, indemnity,
+and charge a fee for, acceptance of support, warranty, indemnity,
-or other liability obligations and/or rights consistent with this
+or other liability obligations and/or rights consistent with this
-License. However, in accepting such obligations, You may act only
+License. However, in accepting such obligations, You may act only
-on Your own behalf and on Your sole responsibility, not on behalf
+on Your own behalf and on Your sole responsibility, not on behalf
-of any other Contributor, and only if You agree to indemnify,
+of any other Contributor, and only if You agree to indemnify,
-defend, and hold each Contributor harmless for any liability
+defend, and hold each Contributor harmless for any liability
-incurred by, or claims asserted against, such Contributor by reason
+incurred by, or claims asserted against, such Contributor by reason
-of your accepting any such warranty or additional liability.
+of your accepting any such warranty or additional liability.
-
+
-END OF TERMS AND CONDITIONS
+END OF TERMS AND CONDITIONS
-
+
-APPENDIX: How to apply the Apache License to your work.
+APPENDIX: How to apply the Apache License to your work.
-
+
-To apply the Apache License to your work, attach the following
+To apply the Apache License to your work, attach the following
-boilerplate notice, with the fields enclosed by brackets "{}"
+boilerplate notice, with the fields enclosed by brackets "{}"
-replaced with your own identifying information. (Don't include
+replaced with your own identifying information. (Don't include
-the brackets!)  The text should be enclosed in the appropriate
+the brackets!)  The text should be enclosed in the appropriate
-comment syntax for the file format. We also recommend that a
+comment syntax for the file format. We also recommend that a
-file or class name and description of purpose be included on the
+file or class name and description of purpose be included on the
-same "printed page" as the copyright notice for easier
+same "printed page" as the copyright notice for easier
-identification within third-party archives.
+identification within third-party archives.
-
+
-Copyright {yyyy} {name of copyright owner}
+Copyright {yyyy} {name of copyright owner}
-
+
-Licensed under the Apache License, Version 2.0 (the "License");
+Licensed under the Apache License, Version 2.0 (the "License");
-you may not use this file except in compliance with the License.
+you may not use this file except in compliance with the License.
-You may obtain a copy of the License at
+You may obtain a copy of the License at
-
+
-http://www.apache.org/licenses/LICENSE-2.0
+http://www.apache.org/licenses/LICENSE-2.0
-
+
-Unless required by applicable law or agreed to in writing, software
+Unless required by applicable law or agreed to in writing, software
-distributed under the License is distributed on an "AS IS" BASIS,
+distributed under the License is distributed on an "AS IS" BASIS,
-WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
-See the License for the specific language governing permissions and
+See the License for the specific language governing permissions and
-limitations under the License.
+limitations under the License.

README.md

@@ -1,78 +1,79 @@
-![Preview](https://user-images.githubusercontent.com/5447088/28537288-39be4288-70a2-11e7-8ce9-0813d59f46b7.gif)
+![Preview](https://user-images.githubusercontent.com/5447088/28537288-39be4288-70a2-11e7-8ce9-0813d59f46b7.gif)
-
+
-# filemanager
+# filemanager
-
+
-[![Build](https://img.shields.io/travis/hacdias/filemanager.svg?style=flat-square)](https://travis-ci.org/hacdias/filemanager)
+[![Build](https://img.shields.io/travis/hacdias/filemanager.svg?style=flat-square)](https://travis-ci.org/hacdias/filemanager)
-[![Go Report Card](https://goreportcard.com/badge/github.com/hacdias/filemanager?style=flat-square)](https://goreportcard.com/report/hacdias/filemanager)
+[![Go Report Card](https://goreportcard.com/badge/github.com/hacdias/filemanager?style=flat-square)](https://goreportcard.com/report/hacdias/filemanager)
-[![Documentation](https://img.shields.io/badge/godoc-reference-blue.svg?style=flat-square)](http://godoc.org/github.com/hacdias/filemanager)
+[![Documentation](https://img.shields.io/badge/godoc-reference-blue.svg?style=flat-square)](http://godoc.org/github.com/hacdias/filemanager)
-
+[![Version](https://img.shields.io/github/release/hacdias/filemanager.svg?style=flat-square)](https://github.com/hacdias/filemanager/releases/latest)
-filemanager provides a file managing interface within a specified directory and it can be used to upload, delete, preview, rename and edit your files. It allows the creation of multiple users and each user can have its own directory. It can be used as a standalone app or as a middleware.
+
-
+filemanager provides a file managing interface within a specified directory and it can be used to upload, delete, preview, rename and edit your files. It allows the creation of multiple users and each user can have its own directory. It can be used as a standalone app or as a middleware.
-# Table of contents
+
-
+# Table of contents
-+ [Getting started](#getting-started)
+
-+ [Features](#features)
++ [Getting started](#getting-started)
-  - [Users](#users)
++ [Features](#features)
-  - [Search](#search)
+  - [Users](#users)
-+ [Contributing](#contributing)
+  - [Search](#search)
-+ [Donate](#donate)
++ [Contributing](#contributing)
-
++ [Donate](#donate)
-# Getting started
+
-
+# Getting started
-You can find the Getting Started guide on the [documentation](https://henriquedias.com/filemanager/quick-start/).
+
-
+You can find the Getting Started guide on the [documentation](https://henriquedias.com/filemanager/quick-start/).
-# Features
+
-
+# Features
-Easy login system.
+
-
+Easy login system.
-![Login Page](https://user-images.githubusercontent.com/5447088/28432382-975493dc-6d7f-11e7-9190-23f8037159dc.jpg)
+
-
+![Login Page](https://user-images.githubusercontent.com/5447088/28432382-975493dc-6d7f-11e7-9190-23f8037159dc.jpg)
-Listings of your files, available in two styles: mosaic and list. You can delete, move, rename, upload and create new files, as well as directories. Single files can be downloaded directly, and multiple files as *.zip*, *.tar*, *.tar.gz*, *.tar.bz2* or *.tar.xz*.
+
-
+Listings of your files, available in two styles: mosaic and list. You can delete, move, rename, upload and create new files, as well as directories. Single files can be downloaded directly, and multiple files as *.zip*, *.tar*, *.tar.gz*, *.tar.bz2* or *.tar.xz*.
-![Mosaic Listing](https://user-images.githubusercontent.com/5447088/28432384-9771bb4c-6d7f-11e7-8564-3a9bd6a3ce3a.jpg)
+
-
+![Mosaic Listing](https://user-images.githubusercontent.com/5447088/28432384-9771bb4c-6d7f-11e7-8564-3a9bd6a3ce3a.jpg)
-File Manager editor is powered by [Codemirror](https://codemirror.net/) and if you're working with markdown files with metadata, both parts will be separated from each other so you can focus on the content.
+
-
+File Manager editor is powered by [Codemirror](https://codemirror.net/) and if you're working with markdown files with metadata, both parts will be separated from each other so you can focus on the content.
-![Markdown Editor](https://user-images.githubusercontent.com/5447088/28432383-9756fdac-6d7f-11e7-8e58-fec49470d15f.jpg)
+
-
+![Markdown Editor](https://user-images.githubusercontent.com/5447088/28432383-9756fdac-6d7f-11e7-8e58-fec49470d15f.jpg)
-On the settings page, a regular user can set its own custom CSS to personalize the experience and change its password. For admins, they can manage the permissions of each user, set commands which can be executed when certain events are triggered (such as before saving and after saving) and change plugin's settings.
+
-
+On the settings page, a regular user can set its own custom CSS to personalize the experience and change its password. For admins, they can manage the permissions of each user, set commands which can be executed when certain events are triggered (such as before saving and after saving) and change plugin's settings.
-![Settings](https://user-images.githubusercontent.com/5447088/28432385-9776ec66-6d7f-11e7-90a5-891bacd4d02f.jpg)
+
-
+![Settings](https://user-images.githubusercontent.com/5447088/28432385-9776ec66-6d7f-11e7-90a5-891bacd4d02f.jpg)
-We also allow the users to search in the directories and execute commands if allowed.
+
-
+We also allow the users to search in the directories and execute commands if allowed.
-## Users
+
-
+## Users
-We support multiple users and each user can have its own scope and custom stylesheet. The administrator is able to choose which permissions should be given to the users, as well as the commands they can execute. Each user also have a set of rules, in which he can be prevented or allowed to access some directories (regular expressions included!).
+
-
+We support multiple users and each user can have its own scope and custom stylesheet. The administrator is able to choose which permissions should be given to the users, as well as the commands they can execute. Each user also have a set of rules, in which he can be prevented or allowed to access some directories (regular expressions included!).
-![Users](https://user-images.githubusercontent.com/5447088/28432386-977f388a-6d7f-11e7-9006-87d16f05f1f8.jpg)
+
-
+![Users](https://user-images.githubusercontent.com/5447088/28432386-977f388a-6d7f-11e7-9006-87d16f05f1f8.jpg)
-## Search
+
-
+## Search
-FileManager allows you to search through your files and it has some options. By default, your search will be something like this:
+
-
+FileManager allows you to search through your files and it has some options. By default, your search will be something like this:
-```
+
-this are keywords
+```
-```
+this are keywords
-
+```
-If you search for that it will look at every file that contains "this", "are" or "keywords" on their name. If you want to search for an exact term, you should surround your search by double quotes:
+
-
+If you search for that it will look at every file that contains "this", "are" or "keywords" on their name. If you want to search for an exact term, you should surround your search by double quotes:
-```
+
-"this is the name"
+```
-```
+"this is the name"
-
+```
-That will search for any file that contains "this is the name" on its name. It won't search for each separated term this time.
+
-
+That will search for any file that contains "this is the name" on its name. It won't search for each separated term this time.
-By default, every search will be case sensitive. Although, you can make a case insensitive search by adding `case:insensitive` to the search terms, like this:
+
-
+By default, every search will be case sensitive. Although, you can make a case insensitive search by adding `case:insensitive` to the search terms, like this:
-```
+
-this are keywords case:insensitive
+```
-```
+this are keywords case:insensitive
-
+```
-# Contributing
+
-
+# Contributing
-The contributing guidelines can be found [here](https://github.com/hacdias/filemanager/blob/master/CONTRIBUTING.md).
+
-
+The contributing guidelines can be found [here](https://github.com/hacdias/filemanager/blob/master/CONTRIBUTING.md).
-# Donate
+
-
+# Donate
-Enjoying this project? You can [donate to its creator](https://henriquedias.com/donate/). He will appreciate.
+
+Enjoying this project? You can [donate to its creator](https://henriquedias.com/donate/). He will appreciate.

assets/build/build.js

@@ -1,31 +1,31 @@
-require('./check-versions')()
+require('./check-versions')()
-
+
-process.env.NODE_ENV = 'production'
+process.env.NODE_ENV = 'production'
-
+
-var ora = require('ora')
+var ora = require('ora')
-var rm = require('rimraf')
+var rm = require('rimraf')
-var path = require('path')
+var path = require('path')
-var chalk = require('chalk')
+var chalk = require('chalk')
-var webpack = require('webpack')
+var webpack = require('webpack')
-var config = require('./config')
+var config = require('./config')
-var webpackConfig = require('./webpack.prod.conf')
+var webpackConfig = require('./webpack.prod.conf')
-
+
-var spinner = ora('building for production...')
+var spinner = ora('building for production...')
-spinner.start()
+spinner.start()
-
+
-rm(path.join(config.assetsRoot, config.assetsSubDirectory), err => {
+rm(path.join(config.assetsRoot, config.assetsSubDirectory), err => {
-  if (err) throw err
+  if (err) throw err
-  webpack(webpackConfig, function (err, stats) {
+  webpack(webpackConfig, function (err, stats) {
-    spinner.stop()
+    spinner.stop()
-    if (err) throw err
+    if (err) throw err
-    process.stdout.write(stats.toString({
+    process.stdout.write(stats.toString({
-      colors: true,
+      colors: true,
-      modules: false,
+      modules: false,
-      children: false,
+      children: false,
-      chunks: false,
+      chunks: false,
-      chunkModules: false
+      chunkModules: false
-    }) + '\n\n')
+    }) + '\n\n')
-
+
-    console.log(chalk.cyan('  Build complete.\n'))
+    console.log(chalk.cyan('  Build complete.\n'))
-  })
+  })
-})
+})

assets/build/check-versions.js

@@ -1,48 +1,48 @@
-var chalk = require('chalk')
+var chalk = require('chalk')
-var semver = require('semver')
+var semver = require('semver')
-var packageConfig = require('../../package.json')
+var packageConfig = require('../../package.json')
-var shell = require('shelljs')
+var shell = require('shelljs')
-function exec (cmd) {
+function exec (cmd) {
-  return require('child_process').execSync(cmd).toString().trim()
+  return require('child_process').execSync(cmd).toString().trim()
-}
+}
-
+
-var versionRequirements = [
+var versionRequirements = [
-  {
+  {
-    name: 'node',
+    name: 'node',
-    currentVersion: semver.clean(process.version),
+    currentVersion: semver.clean(process.version),
-    versionRequirement: packageConfig.engines.node
+    versionRequirement: packageConfig.engines.node
-  }
+  }
-]
+]
-
+
-if (shell.which('npm')) {
+if (shell.which('npm')) {
-  versionRequirements.push({
+  versionRequirements.push({
-    name: 'npm',
+    name: 'npm',
-    currentVersion: exec('npm --version'),
+    currentVersion: exec('npm --version'),
-    versionRequirement: packageConfig.engines.npm
+    versionRequirement: packageConfig.engines.npm
-  })
+  })
-}
+}
-
+
-module.exports = function () {
+module.exports = function () {
-  var warnings = []
+  var warnings = []
-  for (var i = 0; i < versionRequirements.length; i++) {
+  for (var i = 0; i < versionRequirements.length; i++) {
-    var mod = versionRequirements[i]
+    var mod = versionRequirements[i]
-    if (!semver.satisfies(mod.currentVersion, mod.versionRequirement)) {
+    if (!semver.satisfies(mod.currentVersion, mod.versionRequirement)) {
-      warnings.push(mod.name + ': ' +
+      warnings.push(mod.name + ': ' +
-        chalk.red(mod.currentVersion) + ' should be ' +
+        chalk.red(mod.currentVersion) + ' should be ' +
-        chalk.green(mod.versionRequirement)
+        chalk.green(mod.versionRequirement)
-      )
+      )
-    }
+    }
-  }
+  }
-
+
-  if (warnings.length) {
+  if (warnings.length) {
-    console.log('')
+    console.log('')
-    console.log(chalk.yellow('To use this template, you must update following to modules:'))
+    console.log(chalk.yellow('To use this template, you must update following to modules:'))
-    console.log()
+    console.log()
-    for (var i = 0; i < warnings.length; i++) {
+    for (var i = 0; i < warnings.length; i++) {
-      var warning = warnings[i]
+      var warning = warnings[i]
-      console.log('  ' + warning)
+      console.log('  ' + warning)
-    }
+    }
-    console.log()
+    console.log()
-    process.exit(1)
+    process.exit(1)
-  }
+  }
-}
+}

assets/build/config.js

@@ -1,26 +1,26 @@
-// see http://vuejs-templates.github.io/webpack for documentation.
+// see http://vuejs-templates.github.io/webpack for documentation.
-var path = require('path')
+var path = require('path')
-
+
-module.exports = {
+module.exports = {
-  index: path.resolve(__dirname, '../dist/index.html'),
+  index: path.resolve(__dirname, '../dist/index.html'),
-  assetsRoot: path.resolve(__dirname, '../dist'),
+  assetsRoot: path.resolve(__dirname, '../dist'),
-  assetsSubDirectory: 'static',
+  assetsSubDirectory: 'static',
-  assetsPublicPath: '{{ .BaseURL }}/',
+  assetsPublicPath: '{{ .BaseURL }}/',
-  build: {
+  build: {
-    env: {
+    env: {
-      NODE_ENV: '"production"'
+      NODE_ENV: '"production"'
-    },
+    },
-    productionSourceMap: true,
+    productionSourceMap: true,
-    // Run the build command with an extra argument to
+    // Run the build command with an extra argument to
-    // View the bundle analyzer report after build finishes:
+    // View the bundle analyzer report after build finishes:
-    // `npm run build --report`
+    // `npm run build --report`
-    // Set to `true` or `false` to always turn it on or off
+    // Set to `true` or `false` to always turn it on or off
-    bundleAnalyzerReport: process.env.npm_config_report
+    bundleAnalyzerReport: process.env.npm_config_report
-  },
+  },
-  dev: {
+  dev: {
-    env: {
+    env: {
-      NODE_ENV: '"development"'
+      NODE_ENV: '"development"'
-    },
+    },
-    produceSourceMap: true
+    produceSourceMap: true
-  }
+  }
-}
+}

assets/build/service-worker-dev.js

@@ -1,17 +1,17 @@
-// This service worker file is effectively a 'no-op' that will reset any
+// This service worker file is effectively a 'no-op' that will reset any
-// previous service worker registered for the same host:port combination.
+// previous service worker registered for the same host:port combination.
-// In the production build, this file is replaced with an actual service worker
+// In the production build, this file is replaced with an actual service worker
-// file that will precache your site's local assets.
+// file that will precache your site's local assets.
-// See https://github.com/facebookincubator/create-react-app/issues/2272#issuecomment-302832432
+// See https://github.com/facebookincubator/create-react-app/issues/2272#issuecomment-302832432
-
+
-self.addEventListener('install', () => self.skipWaiting());
+self.addEventListener('install', () => self.skipWaiting());
-
+
-self.addEventListener('activate', () => {
+self.addEventListener('activate', () => {
-  self.clients.matchAll({ type: 'window' }).then(windowClients => {
+  self.clients.matchAll({ type: 'window' }).then(windowClients => {
-    for (let windowClient of windowClients) {
+    for (let windowClient of windowClients) {
-      // Force open pages to refresh, so that they have a chance to load the
+      // Force open pages to refresh, so that they have a chance to load the
-      // fresh navigation response from the local dev server.
+      // fresh navigation response from the local dev server.
-      windowClient.navigate(windowClient.url);
+      windowClient.navigate(windowClient.url);
-    }
+    }
-  });
+  });
 });

assets/build/service-worker-prod.js

@@ -1,55 +1,55 @@
-(function() {
+(function() {
-  'use strict';
+  'use strict';
-
+
-  // Check to make sure service workers are supported in the current browser,
+  // Check to make sure service workers are supported in the current browser,
-  // and that the current page is accessed from a secure origin. Using a
+  // and that the current page is accessed from a secure origin. Using a
-  // service worker from an insecure origin will trigger JS console errors.
+  // service worker from an insecure origin will trigger JS console errors.
-  const isLocalhost = Boolean(window.location.hostname === 'localhost' ||
+  const isLocalhost = Boolean(window.location.hostname === 'localhost' ||
-      // [::1] is the IPv6 localhost address.
+      // [::1] is the IPv6 localhost address.
-      window.location.hostname === '[::1]' ||
+      window.location.hostname === '[::1]' ||
-      // 127.0.0.1/8 is considered localhost for IPv4.
+      // 127.0.0.1/8 is considered localhost for IPv4.
-      window.location.hostname.match(
+      window.location.hostname.match(
-        /^127(?:\.(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)){3}$/
+        /^127(?:\.(?:25[0-5]|2[0-4][0-9]|[01]?[0-9][0-9]?)){3}$/
-      )
+      )
-    );
+    );
-
+
-  window.addEventListener('load', function() {
+  window.addEventListener('load', function() {
-      if ('serviceWorker' in navigator &&
+      if ('serviceWorker' in navigator &&
-          (window.location.protocol === 'https:' || isLocalhost)) {
+          (window.location.protocol === 'https:' || isLocalhost)) {
-        navigator.serviceWorker.register('{{ .BaseURL }}/sw.js')
+        navigator.serviceWorker.register('{{ .BaseURL }}/sw.js')
-        .then(function(registration) {
+        .then(function(registration) {
-          // updatefound is fired if service-worker.js changes.
+          // updatefound is fired if service-worker.js changes.
-          registration.onupdatefound = function() {
+          registration.onupdatefound = function() {
-            // updatefound is also fired the very first time the SW is installed,
+            // updatefound is also fired the very first time the SW is installed,
-            // and there's no need to prompt for a reload at that point.
+            // and there's no need to prompt for a reload at that point.
-            // So check here to see if the page is already controlled,
+            // So check here to see if the page is already controlled,
-            // i.e. whether there's an existing service worker.
+            // i.e. whether there's an existing service worker.
-            if (navigator.serviceWorker.controller) {
+            if (navigator.serviceWorker.controller) {
-              // The updatefound event implies that registration.installing is set
+              // The updatefound event implies that registration.installing is set
-              const installingWorker = registration.installing;
+              const installingWorker = registration.installing;
-
+
-              installingWorker.onstatechange = function() {
+              installingWorker.onstatechange = function() {
-                switch (installingWorker.state) {
+                switch (installingWorker.state) {
-                  case 'installed':
+                  case 'installed':
-                    // At this point, the old content will have been purged and the
+                    // At this point, the old content will have been purged and the
-                    // fresh content will have been added to the cache.
+                    // fresh content will have been added to the cache.
-                    // It's the perfect time to display a "New content is
+                    // It's the perfect time to display a "New content is
-                    // available; please refresh." message in the page's interface.
+                    // available; please refresh." message in the page's interface.
-                    break;
+                    break;
-
+
-                  case 'redundant':
+                  case 'redundant':
-                    throw new Error('The installing ' +
+                    throw new Error('The installing ' +
-                                    'service worker became redundant.');
+                                    'service worker became redundant.');
-
+
-                  default:
+                  default:
-                    // Ignore
+                    // Ignore
-                }
+                }
-              };
+              };
-            }
+            }
-          };
+          };
-        }).catch(function(e) {
+        }).catch(function(e) {
-          console.error('Error during service worker registration:', e);
+          console.error('Error during service worker registration:', e);
-        });
+        });
-      }
+      }
-  });
+  });
-})();
+})();

assets/build/utils.js

@@ -1,70 +1,70 @@
-var path = require('path')
+var path = require('path')
-var config = require('./config')
+var config = require('./config')
-var ExtractTextPlugin = require('extract-text-webpack-plugin')
+var ExtractTextPlugin = require('extract-text-webpack-plugin')
-
+
-exports.assetsPath = function (_path) {
+exports.assetsPath = function (_path) {
-  var assetsSubDirectory = config.assetsSubDirectory
+  var assetsSubDirectory = config.assetsSubDirectory
-
+
-  return path.posix.join(assetsSubDirectory, _path)
+  return path.posix.join(assetsSubDirectory, _path)
-}
+}
-
+
-exports.cssLoaders = function (options) {
+exports.cssLoaders = function (options) {
-  options = options || {}
+  options = options || {}
-
+
-  var cssLoader = {
+  var cssLoader = {
-    loader: 'css-loader',
+    loader: 'css-loader',
-    options: {
+    options: {
-      minimize: process.env.NODE_ENV === 'production',
+      minimize: process.env.NODE_ENV === 'production',
-      sourceMap: options.sourceMap
+      sourceMap: options.sourceMap
-    }
+    }
-  }
+  }
-
+
-  // generate loader string to be used with extract text plugin
+  // generate loader string to be used with extract text plugin
-  function generateLoaders (loader, loaderOptions) {
+  function generateLoaders (loader, loaderOptions) {
-    var loaders = [cssLoader]
+    var loaders = [cssLoader]
-    if (loader) {
+    if (loader) {
-      loaders.push({
+      loaders.push({
-        loader: loader + '-loader',
+        loader: loader + '-loader',
-        options: Object.assign({}, loaderOptions, {
+        options: Object.assign({}, loaderOptions, {
-          sourceMap: options.sourceMap
+          sourceMap: options.sourceMap
-        })
+        })
-      })
+      })
-    }
+    }
-
+
-    // Extract CSS when that option is specified
+    // Extract CSS when that option is specified
-    // (which is the case during production build)
+    // (which is the case during production build)
-    if (options.extract) {
+    if (options.extract) {
-      return ExtractTextPlugin.extract({
+      return ExtractTextPlugin.extract({
-        use: loaders,
+        use: loaders,
-        fallback: 'vue-style-loader'
+        fallback: 'vue-style-loader'
-      })
+      })
-    } else {
+    } else {
-      return ['vue-style-loader'].concat(loaders)
+      return ['vue-style-loader'].concat(loaders)
-    }
+    }
-  }
+  }
-
+
-  // https://vue-loader.vuejs.org/en/configurations/extract-css.html
+  // https://vue-loader.vuejs.org/en/configurations/extract-css.html
-  return {
+  return {
-    css: generateLoaders(),
+    css: generateLoaders(),
-    postcss: generateLoaders(),
+    postcss: generateLoaders(),
-    less: generateLoaders('less'),
+    less: generateLoaders('less'),
-    sass: generateLoaders('sass', { indentedSyntax: true }),
+    sass: generateLoaders('sass', { indentedSyntax: true }),
-    scss: generateLoaders('sass'),
+    scss: generateLoaders('sass'),
-    stylus: generateLoaders('stylus'),
+    stylus: generateLoaders('stylus'),
-    styl: generateLoaders('stylus')
+    styl: generateLoaders('stylus')
-  }
+  }
-}
+}
-
+
-// Generate loaders for standalone style files (outside of .vue)
+// Generate loaders for standalone style files (outside of .vue)
-exports.styleLoaders = function (options) {
+exports.styleLoaders = function (options) {
-  var output = []
+  var output = []
-  var loaders = exports.cssLoaders(options)
+  var loaders = exports.cssLoaders(options)
-  for (var extension in loaders) {
+  for (var extension in loaders) {
-    var loader = loaders[extension]
+    var loader = loaders[extension]
-    output.push({
+    output.push({
-      test: new RegExp('\\.' + extension + '$'),
+      test: new RegExp('\\.' + extension + '$'),
-      use: loader
+      use: loader
-    })
+    })
-  }
+  }
-  return output
+  return output
-}
+}

assets/build/vue-loader.conf.js

@@ -1,12 +1,12 @@
-var utils = require('./utils')
+var utils = require('./utils')
-var config = require('./config')
+var config = require('./config')
-var isProduction = process.env.NODE_ENV === 'production'
+var isProduction = process.env.NODE_ENV === 'production'
-
+
-module.exports = {
+module.exports = {
-  loaders: utils.cssLoaders({
+  loaders: utils.cssLoaders({
-    sourceMap: isProduction
+    sourceMap: isProduction
-      ? config.build.productionSourceMap
+      ? config.build.productionSourceMap
-      : config.dev.produceSourceMap,
+      : config.dev.produceSourceMap,
-    extract: isProduction
+    extract: isProduction
-  })
+  })
-}
+}

assets/build/webpack.base.conf.js

@@ -1,69 +1,69 @@
-var path = require('path')
+var path = require('path')
-var utils = require('./utils')
+var utils = require('./utils')
-var config = require('./config')
+var config = require('./config')
-var vueLoaderConfig = require('./vue-loader.conf')
+var vueLoaderConfig = require('./vue-loader.conf')
-
+
-function resolve (dir) {
+function resolve (dir) {
-  return path.join(__dirname, '..', dir)
+  return path.join(__dirname, '..', dir)
-}
+}
-
+
-module.exports = {
+module.exports = {
-  entry: {
+  entry: {
-    app: './assets/src/main.js'
+    app: './assets/src/main.js'
-  },
+  },
-  output: {
+  output: {
-    path: config.assetsRoot,
+    path: config.assetsRoot,
-    filename: '[name].js',
+    filename: '[name].js',
-    publicPath: config.assetsPublicPath
+    publicPath: config.assetsPublicPath
-  },
+  },
-  resolve: {
+  resolve: {
-    extensions: ['.js', '.vue', '.json'],
+    extensions: ['.js', '.vue', '.json'],
-    alias: {
+    alias: {
-      'vue$': 'vue/dist/vue.esm.js',
+      'vue$': 'vue/dist/vue.esm.js',
-      '@': resolve('src')
+      '@': resolve('src')
-    }
+    }
-  },
+  },
-  module: {
+  module: {
-    rules: [
+    rules: [
-      {
+      {
-        test: /\.(yml|yaml)$/,
+        test: /\.(yml|yaml)$/,
-        loader: 'yml-loader'
+        loader: 'yml-loader'
-      },
+      },
-      {
+      {
-        test: /\.(js|vue)$/,
+        test: /\.(js|vue)$/,
-        loader: 'eslint-loader',
+        loader: 'eslint-loader',
-        enforce: 'pre',
+        enforce: 'pre',
-        include: [resolve('src'), resolve('test')],
+        include: [resolve('src'), resolve('test')],
-        options: {
+        options: {
-          formatter: require('eslint-friendly-formatter')
+          formatter: require('eslint-friendly-formatter')
-        }
+        }
-      },
+      },
-      {
+      {
-        test: /\.vue$/,
+        test: /\.vue$/,
-        loader: 'vue-loader',
+        loader: 'vue-loader',
-        options: vueLoaderConfig
+        options: vueLoaderConfig
-      },
+      },
-      {
+      {
-        test: /\.js$/,
+        test: /\.js$/,
-        loader: 'babel-loader',
+        loader: 'babel-loader',
-        include: [resolve('src'), resolve('test')]
+        include: [resolve('src'), resolve('test')]
-      },
+      },
-      {
+      {
-        test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
+        test: /\.(png|jpe?g|gif|svg)(\?.*)?$/,
-        loader: 'url-loader',
+        loader: 'url-loader',
-        options: {
+        options: {
-          limit: 10000,
+          limit: 10000,
-          name: utils.assetsPath('img/[name].[hash:7].[ext]')
+          name: utils.assetsPath('img/[name].[hash:7].[ext]')
-        }
+        }
-      },
+      },
-      {
+      {
-        test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
+        test: /\.(woff2?|eot|ttf|otf)(\?.*)?$/,
-        loader: 'url-loader',
+        loader: 'url-loader',
-        options: {
+        options: {
-          // limit: 10000,
+          // limit: 10000,
-          name: utils.assetsPath('fonts/[name].[hash:7].[ext]')
+          name: utils.assetsPath('fonts/[name].[hash:7].[ext]')
-        }
+        }
-      }
+      }
-    ]
+    ]
-  }
+  }
-}
+}

assets/build/webpack.dev.conf.js

@@ -1,81 +1,81 @@
-var fs = require('fs')
+var fs = require('fs')
-var path = require('path')
+var path = require('path')
-var utils = require('./utils')
+var utils = require('./utils')
-var webpack = require('webpack')
+var webpack = require('webpack')
-var config = require('./config')
+var config = require('./config')
-var merge = require('webpack-merge')
+var merge = require('webpack-merge')
-var baseWebpackConfig = require('./webpack.base.conf')
+var baseWebpackConfig = require('./webpack.base.conf')
-var HtmlWebpackPlugin = require('html-webpack-plugin')
+var HtmlWebpackPlugin = require('html-webpack-plugin')
-var ExtractTextPlugin = require('extract-text-webpack-plugin')
+var ExtractTextPlugin = require('extract-text-webpack-plugin')
-var FriendlyErrorsPlugin = require('friendly-errors-webpack-plugin')
+var FriendlyErrorsPlugin = require('friendly-errors-webpack-plugin')
-var CopyWebpackPlugin = require('copy-webpack-plugin')
+var CopyWebpackPlugin = require('copy-webpack-plugin')
-
+
-module.exports = merge(baseWebpackConfig, {
+module.exports = merge(baseWebpackConfig, {
-  watch: true,
+  watch: true,
-  module: {
+  module: {
-    rules: utils.styleLoaders({
+    rules: utils.styleLoaders({
-      sourceMap: config.dev.produceSourceMap,
+      sourceMap: config.dev.produceSourceMap,
-      extract: true
+      extract: true
-    })
+    })
-  },
+  },
-  devtool: '#cheap-module-eval-source-map',
+  devtool: '#cheap-module-eval-source-map',
-  output: {
+  output: {
-    path: config.assetsRoot,
+    path: config.assetsRoot,
-    filename: utils.assetsPath('js/[name].[chunkhash].js'),
+    filename: utils.assetsPath('js/[name].[chunkhash].js'),
-    chunkFilename: utils.assetsPath('js/[id].[chunkhash].js')
+    chunkFilename: utils.assetsPath('js/[id].[chunkhash].js')
-  },
+  },
-  plugins: [
+  plugins: [
-    new webpack.NoEmitOnErrorsPlugin(),
+    new webpack.NoEmitOnErrorsPlugin(),
-    new FriendlyErrorsPlugin(),
+    new FriendlyErrorsPlugin(),
-    new webpack.DefinePlugin({
+    new webpack.DefinePlugin({
-      'process.env': config.dev.env
+      'process.env': config.dev.env
-    }),
+    }),
-    // extract css into its own file
+    // extract css into its own file
-    new ExtractTextPlugin({
+    new ExtractTextPlugin({
-      filename: utils.assetsPath('css/[name].[contenthash].css')
+      filename: utils.assetsPath('css/[name].[contenthash].css')
-    }),
+    }),
-    // generate dist index.html with correct asset hash for caching.
+    // generate dist index.html with correct asset hash for caching.
-    // you can customize output by editing /index.html
+    // you can customize output by editing /index.html
-    // see https://github.com/ampedandwired/html-webpack-plugin
+    // see https://github.com/ampedandwired/html-webpack-plugin
-    new HtmlWebpackPlugin({
+    new HtmlWebpackPlugin({
-      filename: config.index,
+      filename: config.index,
-      template: 'assets/index.html',
+      template: 'assets/index.html',
-      inject: true,
+      inject: true,
-      // necessary to consistently work with multiple chunks via CommonsChunkPlugin
+      // necessary to consistently work with multiple chunks via CommonsChunkPlugin
-      chunksSortMode: 'dependency',
+      chunksSortMode: 'dependency',
-      serviceWorkerLoader: `<script>${fs.readFileSync(path.join(__dirname,
+      serviceWorkerLoader: `<script>${fs.readFileSync(path.join(__dirname,
-        './service-worker-dev.js'), 'utf-8')}</script>`
+        './service-worker-dev.js'), 'utf-8')}</script>`
-    }),
+    }),
-    // split vendor js into its own file
+    // split vendor js into its own file
-    new webpack.optimize.CommonsChunkPlugin({
+    new webpack.optimize.CommonsChunkPlugin({
-      name: 'vendor',
+      name: 'vendor',
-      minChunks: function (module, count) {
+      minChunks: function (module, count) {
-        // any required modules inside node_modules are extracted to vendor
+        // any required modules inside node_modules are extracted to vendor
-        return (
+        return (
-          module.resource &&
+          module.resource &&
-          /\.js$/.test(module.resource) &&
+          /\.js$/.test(module.resource) &&
-          module.resource.indexOf(
+          module.resource.indexOf(
-            path.join(__dirname, '../../node_modules')
+            path.join(__dirname, '../../node_modules')
-          ) === 0
+          ) === 0
-        )
+        )
-      }
+      }
-    }),
+    }),
-    // extract webpack runtime and module manifest to its own file in order to
+    // extract webpack runtime and module manifest to its own file in order to
-    // prevent vendor hash from being updated whenever app bundle is updated
+    // prevent vendor hash from being updated whenever app bundle is updated
-    new webpack.optimize.CommonsChunkPlugin({
+    new webpack.optimize.CommonsChunkPlugin({
-      name: 'manifest',
+      name: 'manifest',
-      chunks: ['vendor']
+      chunks: ['vendor']
-    }),
+    }),
-    new CopyWebpackPlugin([
+    new CopyWebpackPlugin([
-      {
+      {
-        from: path.resolve(__dirname, '../static'),
+        from: path.resolve(__dirname, '../static'),
-        to: config.assetsSubDirectory,
+        to: config.assetsSubDirectory,
-        ignore: ['.*']
+        ignore: ['.*']
-      },
+      },
-      {
+      {
-        from: path.resolve(__dirname, '../../node_modules/codemirror/mode/*/*'),
+        from: path.resolve(__dirname, '../../node_modules/codemirror/mode/*/*'),
-        to: path.join(config.assetsSubDirectory, 'js/codemirror/mode/[name]/[name].js')
+        to: path.join(config.assetsSubDirectory, 'js/codemirror/mode/[name]/[name].js')
-      }
+      }
-    ])
+    ])
-  ]
+  ]
-})
+})

assets/index.html

@@ -6,6 +6,9 @@
   <meta name="viewport" content="width=device-width, initial-scale=1, user-scalable=no">
   <meta name="base" content="{{ .BaseURL }}">
   <meta name="staticgen" content="{{ .StaticGen }}">
+  <meta name="noauth" content="{{ .NoAuth }}">
+  <meta name="version" content="{{ .Version }}">
+  <meta name="recaptcha" content="{{ .ReCaptchaKey }}">
   <title>File Manager</title>
   <link rel="icon" type="image/png" sizes="32x32" href="{{ .BaseURL }}/static/img/icons/favicon-32x32.png">
   <link rel="icon" type="image/png" sizes="16x16" href="{{ .BaseURL }}/static/img/icons/favicon-16x16.png">
@@ -22,7 +25,14 @@
   <!-- Add to home screen for Windows -->
   <meta name="msapplication-TileImage" content="{{ .BaseURL }}/static/img/icons/msapplication-icon-144x144.png">
   <meta name="msapplication-TileColor" content="#2979ff">
-  <% for (var chunk of webpack.compilation.chunks) {
+
+  <script>CSS = "{{ .CSS }}"</script>
+
+  {{ if .ReCaptcha -}}
+    <script src='https://www.google.com/recaptcha/api.js?render=explicit'></script>
+  {{ end }}
+
+  <% for (var chunk of webpack.chunks) {
     for (var file of chunk.files) {
       if (file.match(/\.(js|css)$/)) { %>
       <link rel="preload" href="{{ .BaseURL }}/<%= file %>" as="<%= file.match(/\.css$/)?'style':'script' %>"><% }}} %>

assets/src/App.vue

@@ -1,18 +1,74 @@
 <template>
-  <router-view></router-view>
+  <router-view :dependencies="loaded" @update:css="updateCSS" @clean:css="cleanCSS"></router-view>
 </template>
 
 <script>
+import { mapState } from 'vuex'
+
 export default {
   name: 'app',
-  mounted: function () {
+  computed: mapState(['recaptcha']),
-    // Remove loading animation.
+  data () {
-    let loading = document.getElementById('loading')
+    return {
-    loading.classList.add('done')
+      loaded: false
+    }
+  },
+  mounted () {
+    if (this.recaptcha.length === 0) {
+      this.unload()
+      return
+    }
 
-    setTimeout(function () {
+    let check = () => {
-      loading.parentNode.removeChild(loading)
+      if (typeof window.grecaptcha === 'undefined') {
-    }, 200)
+        setTimeout(check, 100)
+        return
+      }
+
+      this.unload()
+    }
+
+    check()
+  },
+  methods: {
+    unload () {
+      this.loaded = true
+      // Remove loading animation.
+      let loading = document.getElementById('loading')
+      loading.classList.add('done')
+
+      setTimeout(function () {
+        loading.parentNode.removeChild(loading)
+      }, 200)
+
+      this.updateCSS()
+    },
+    updateCSS (global = false) {
+      let css = this.$store.state.css
+
+      if (typeof this.$store.state.user.css === 'string' && !global) {
+        css += '\n' + this.$store.state.user.css
+      }
+
+      this.removeCSS()
+
+      let style = document.createElement('style')
+      style.title = 'custom-css'
+      style.type = 'text/css'
+      style.appendChild(document.createTextNode(css))
+      document.head.appendChild(style)
+    },
+    removeCSS () {
+      let style = document.querySelector('style[title="custom-css"]')
+      if (style === undefined || style === null) {
+        return
+      }
+
+      style.parentElement.removeChild(style)
+    },
+    cleanCSS () {
+      this.updateCSS(true)
+    }
   }
 }
 </script>

assets/src/assets/logo.svg

@@ -1,5 +1,5 @@
-<svg id="content" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 144 144">
+<svg id="content" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 144 144">
-    <circle cx="72" cy="72" r="72" fill="#2979ff"/>
+    <circle cx="72" cy="72" r="72" fill="#2979ff"/>
-    <circle cx="72" cy="72" r="48" fill="#40c4ff"/>
+    <circle cx="72" cy="72" r="48" fill="#40c4ff"/>
-    <circle cx="72" cy="72" r="24" fill="#fff"/>
+    <circle cx="72" cy="72" r="24" fill="#fff"/>
 </svg>

assets/src/components/Languages.vue

@@ -1,21 +1,23 @@
-<template>
+<template>
-  <select v-on:change="change" :value="selected">
+  <select v-on:change="change" :value="selected">
-    <option value="en">{{ $t('languages.en') }}</option>
+    <option value="en">{{ $t('languages.en') }}</option>
-    <option value="pt">{{ $t('languages.pt') }}</option>
+    <option value="fr">{{ $t('languages.fr') }}</option>
-    <option value="ja">{{ $t('languages.ja') }}</option>
+    <option value="pt">{{ $t('languages.pt') }}</option>
-    <option value="zh-cn">{{ $t('languages.zhCN') }}</option>
+    <option value="ja">{{ $t('languages.ja') }}</option>
-    <option value="zh-tw">{{ $t('languages.zhTW') }}</option>
+    <option value="zh-cn">{{ $t('languages.zhCN') }}</option>
-  </select>
+    <option value="zh-tw">{{ $t('languages.zhTW') }}</option>
-</template>
+    <option value="es">{{ $t('languages.es') }}</option>
-
+  </select>
-<script>
+</template>
-export default {
+
-  name: 'languages',
+<script>
-  props: [ 'selected' ],
+export default {
-  methods: {
+  name: 'languages',
-    change (event) {
+  props: [ 'selected' ],
-      this.$emit('update:selected', event.target.value)
+  methods: {
-    }
+    change (event) {
-  }
+      this.$emit('update:selected', event.target.value)
-}
+    }
-</script>
+  }
+}
+</script>

assets/src/components/Search.vue

@@ -1,265 +1,265 @@
-<template>
+<template>
-  <div id="search" @click="open" v-bind:class="{ active , ongoing }">
+  <div id="search" @click="open" v-bind:class="{ active , ongoing }">
-    <div id="input">
+    <div id="input">
-      <button v-if="active" class="action" @click="close" :aria-label="$t('buttons.close')" :title="$t('buttons.close')">
+      <button v-if="active" class="action" @click="close" :aria-label="$t('buttons.close')" :title="$t('buttons.close')">
-        <i class="material-icons">arrow_back</i>
+        <i class="material-icons">arrow_back</i>
-      </button>
+      </button>
-      <i v-else class="material-icons">search</i>
+      <i v-else class="material-icons">search</i>
-      <input type="text"
+      <input type="text"
-        @keyup="keyup"
+        @keyup="keyup"
-        @keyup.enter="submit"
+        @keyup.enter="submit"
-        ref="input"
+        ref="input"
-        :autofocus="active"
+        :autofocus="active"
-        v-model.trim="value"
+        v-model.trim="value"
-        :aria-label="$t('search.writeToSearch')"
+        :aria-label="$t('search.writeToSearch')"
-        :placeholder="placeholder">
+        :placeholder="placeholder">
-    </div>
+    </div>
-
+
-    <div id="result">
+    <div id="result">
-      <div>
+      <div>
-        <template v-if="search.length === 0 && commands.length === 0">
+        <template v-if="search.length === 0 && commands.length === 0">
-          <p>{{ text }}</p>
+          <p>{{ text }}</p>
-
+
-          <template v-if="value.length === 0">
+          <template v-if="value.length === 0">
-            <div class="boxes">
+            <div class="boxes">
-              <h3>{{ $t('search.types') }}</h3>
+              <h3>{{ $t('search.types') }}</h3>
-              <div>
+              <div>
-                <div tabindex="0"
+                <div tabindex="0"
-                  role="button"
+                  role="button"
-                  @click="init('type:image')"
+                  @click="init('type:image')"
-                  :aria-label="$t('search.images')">
+                  :aria-label="$t('search.images')">
-                  <i class="material-icons">insert_photo</i>
+                  <i class="material-icons">insert_photo</i>
-                  <p>{{ $t('search.images') }}</p>
+                  <p>{{ $t('search.images') }}</p>
-                </div>
+                </div>
-
+
-                <div tabindex="0"
+                <div tabindex="0"
-                  role="button"
+                  role="button"
-                  @click="init('type:audio')"
+                  @click="init('type:audio')"
-                  :aria-label="$t('search.music')">
+                  :aria-label="$t('search.music')">
-                  <i class="material-icons">volume_up</i>
+                  <i class="material-icons">volume_up</i>
-                  <p>{{ $t('search.music') }}</p>
+                  <p>{{ $t('search.music') }}</p>
-                </div>
+                </div>
-
+
-                <div tabindex="0"
+                <div tabindex="0"
-                  role="button"
+                  role="button"
-                  @click="init('type:video')"
+                  @click="init('type:video')"
-                  :aria-label="$t('search.video')">
+                  :aria-label="$t('search.video')">
-                  <i class="material-icons">movie</i>
+                  <i class="material-icons">movie</i>
-                  <p>{{ $t('search.video') }}</p>
+                  <p>{{ $t('search.video') }}</p>
-                </div>
+                </div>
-
+
-                <div tabindex="0"
+                <div tabindex="0"
-                  role="button"
+                  role="button"
-                  @click="init('type:pdf')"
+                  @click="init('type:pdf')"
-                  :aria-label="$t('search.pdf')">
+                  :aria-label="$t('search.pdf')">
-                  <i class="material-icons">picture_as_pdf</i>
+                  <i class="material-icons">picture_as_pdf</i>
-                  <p>{{ $t('search.pdf') }}</p>
+                  <p>{{ $t('search.pdf') }}</p>
-                </div>
+                </div>
-              </div>
+              </div>
-            </div>
+            </div>
-          </template>
+          </template>
-
+
-        </template>
+        </template>
-        <ul v-else-if="search.length > 0">
+        <ul v-else-if="search.length > 0">
-          <li v-for="s in search">
+          <li v-for="s in search">
-            <router-link @click.native="close" :to="'./' + s.path">
+            <router-link @click.native="close" :to="'./' + s.path">
-              <i v-if="s.dir" class="material-icons">folder</i>
+              <i v-if="s.dir" class="material-icons">folder</i>
-              <i v-else class="material-icons">insert_drive_file</i>
+              <i v-else class="material-icons">insert_drive_file</i>
-              <span>./{{ s.path }}</span>
+              <span>./{{ s.path }}</span>
-            </router-link>
+            </router-link>
-          </li>
+          </li>
-        </ul>
+        </ul>
-
+
-        <pre v-else-if="commands.length > 0">
+        <pre v-else-if="commands.length > 0">
-          <template v-for="c in commands">{{ c }}</template>
+          <template v-for="c in commands">{{ c }}</template>
-        </pre>
+        </pre>
-      </div>
+      </div>
-      <p id="renew"><i class="material-icons spin">autorenew</i></p>
+      <p id="renew"><i class="material-icons spin">autorenew</i></p>
-    </div>
+    </div>
-  </div>
+  </div>
-</template>
+</template>
-
+
-<script>
+<script>
-import { mapState } from 'vuex'
+import { mapState } from 'vuex'
-import url from '@/utils/url'
+import url from '@/utils/url'
-import * as api from '@/utils/api'
+import * as api from '@/utils/api'
-
+
-export default {
+export default {
-  name: 'search',
+  name: 'search',
-  data: function () {
+  data: function () {
-    return {
+    return {
-      value: '',
+      value: '',
-      active: false,
+      active: false,
-      ongoing: false,
+      ongoing: false,
-      scrollable: null,
+      scrollable: null,
-      search: [],
+      search: [],
-      commands: [],
+      commands: [],
-      reload: false
+      reload: false
-    }
+    }
-  },
+  },
-  watch: {
+  watch: {
-    show (val, old) {
+    show (val, old) {
-      this.active = (val === 'search')
+      this.active = (val === 'search')
-
+
-      // If the hover was search and now it's something else
+      // If the hover was search and now it's something else
-      // we should blur the input.
+      // we should blur the input.
-      if (old === 'search' && val !== 'search') {
+      if (old === 'search' && val !== 'search') {
-        if (this.reload) {
+        if (this.reload) {
-          this.$store.commit('setReload', true)
+          this.$store.commit('setReload', true)
-        }
+        }
-
+
-        document.body.style.overflow = 'auto'
+        document.body.style.overflow = 'auto'
-        this.reset()
+        this.reset()
-        this.$refs.input.blur()
+        this.$refs.input.blur()
-      }
+      }
-
+
-      // If we are starting to show the search box, we should
+      // If we are starting to show the search box, we should
-      // focus the input.
+      // focus the input.
-      if (val === 'search') {
+      if (val === 'search') {
-        this.reload = false
+        this.reload = false
-        this.$refs.input.focus()
+        this.$refs.input.focus()
-        document.body.style.overflow = 'hidden'
+        document.body.style.overflow = 'hidden'
-      }
+      }
-    }
+    }
-  },
+  },
-  computed: {
+  computed: {
-    ...mapState(['user', 'show']),
+    ...mapState(['user', 'show']),
-    // Placeholder value.
+    // Placeholder value.
-    placeholder: function () {
+    placeholder: function () {
-      if (this.user.allowCommands && this.user.commands.length > 0) {
+      if (this.user.allowCommands && this.user.commands.length > 0) {
-        return this.$t('search.searchOrCommand')
+        return this.$t('search.searchOrCommand')
-      }
+      }
-
+
-      return this.$t('search.search')
+      return this.$t('search.search')
-    },
+    },
-    // The text that is shown on the results' box while
+    // The text that is shown on the results' box while
-    // there is no search result or command output to show.
+    // there is no search result or command output to show.
-    text: function () {
+    text: function () {
-      if (this.ongoing) {
+      if (this.ongoing) {
-        return ''
+        return ''
-      }
+      }
-
+
-      if (this.value.length === 0) {
+      if (this.value.length === 0) {
-        if (this.user.allowCommands && this.user.commands.length > 0) {
+        if (this.user.allowCommands && this.user.commands.length > 0) {
-          return `${this.$t('search.searchOrSupportedCommand')} ${this.user.commands.join(', ')}.`
+          return `${this.$t('search.searchOrSupportedCommand')} ${this.user.commands.join(', ')}.`
-        }
+        }
-
+
-        this.$t('search.type')
+        this.$t('search.type')
-      }
+      }
-
+
-      if (!this.supported() || !this.user.allowCommands) {
+      if (!this.supported() || !this.user.allowCommands) {
-        return this.$t('search.pressToSearch')
+        return this.$t('search.pressToSearch')
-      } else {
+      } else {
-        return this.$t('search.pressToExecute')
+        return this.$t('search.pressToExecute')
-      }
+      }
-    }
+    }
-  },
+  },
-  mounted: function () {
+  mounted: function () {
-    // Gets the result div which will be scrollable.
+    // Gets the result div which will be scrollable.
-    this.scrollable = document.querySelector('#search #result')
+    this.scrollable = document.querySelector('#search #result')
-
+
-    // Adds the keydown event on window for the ESC key, so
+    // Adds the keydown event on window for the ESC key, so
-    // when it's pressed, it closes the search window.
+    // when it's pressed, it closes the search window.
-    window.addEventListener('keydown', (event) => {
+    window.addEventListener('keydown', (event) => {
-      if (event.keyCode === 27) {
+      if (event.keyCode === 27) {
-        this.$store.commit('closeHovers')
+        this.$store.commit('closeHovers')
-      }
+      }
-    })
+    })
-  },
+  },
-  methods: {
+  methods: {
-    // Sets the search to active.
+    // Sets the search to active.
-    open (event) {
+    open (event) {
-      this.$store.commit('showHover', 'search')
+      this.$store.commit('showHover', 'search')
-    },
+    },
-    // Closes the search and prevents the event
+    // Closes the search and prevents the event
-    // of propagating so it doesn't trigger the
+    // of propagating so it doesn't trigger the
-    // click event on #search.
+    // click event on #search.
-    close (event) {
+    close (event) {
-      event.stopPropagation()
+      event.stopPropagation()
-      event.preventDefault()
+      event.preventDefault()
-      this.$store.commit('closeHovers')
+      this.$store.commit('closeHovers')
-    },
+    },
-    // Checks if the current input is a supported command.
+    // Checks if the current input is a supported command.
-    supported () {
+    supported () {
-      let pieces = this.value.split(' ')
+      let pieces = this.value.split(' ')
-
+
-      for (let i = 0; i < this.user.commands.length; i++) {
+      for (let i = 0; i < this.user.commands.length; i++) {
-        if (pieces[0] === this.user.commands[i]) {
+        if (pieces[0] === this.user.commands[i]) {
-          return true
+          return true
-        }
+        }
-      }
+      }
-
+
-      return false
+      return false
-    },
+    },
-    // Initializes the search with a default value.
+    // Initializes the search with a default value.
-    init (string) {
+    init (string) {
-      this.value = string + ' '
+      this.value = string + ' '
-      this.$refs.input.focus()
+      this.$refs.input.focus()
-    },
+    },
-    // Resets the search box value.
+    // Resets the search box value.
-    reset () {
+    reset () {
-      this.value = ''
+      this.value = ''
-      this.active = false
+      this.active = false
-      this.ongoing = false
+      this.ongoing = false
-      this.search = []
+      this.search = []
-      this.commands = []
+      this.commands = []
-    },
+    },
-    // When the user presses a key, if it is ESC
+    // When the user presses a key, if it is ESC
-    // then it will close the search box. Otherwise,
+    // then it will close the search box. Otherwise,
-    // it will set the search box to active and clean
+    // it will set the search box to active and clean
-    // the search results, as well as commands'.
+    // the search results, as well as commands'.
-    keyup (event) {
+    keyup (event) {
-      if (event.keyCode === 27) {
+      if (event.keyCode === 27) {
-        this.close(event)
+        this.close(event)
-        return
+        return
-      }
+      }
-
+
-      this.search.length = 0
+      this.search.length = 0
-      this.commands.length = 0
+      this.commands.length = 0
-    },
+    },
-    // Submits the input to the server and sets ongoing to true.
+    // Submits the input to the server and sets ongoing to true.
-    submit (event) {
+    submit (event) {
-      this.ongoing = true
+      this.ongoing = true
-
+
-      let path = this.$route.path
+      let path = this.$route.path
-      if (this.$store.state.req.kind !== 'listing') {
+      if (this.$store.state.req.kind !== 'listing') {
-        path = url.removeLastDir(path) + '/'
+        path = url.removeLastDir(path) + '/'
-      }
+      }
-
+
-      // In case of being a command.
+      // In case of being a command.
-      if (this.supported() && this.user.allowCommands) {
+      if (this.supported() && this.user.allowCommands) {
-        api.command(path, this.value,
+        api.command(path, this.value,
-          (event) => {
+          (event) => {
-            this.commands.push(event.data)
+            this.commands.push(event.data)
-            this.scrollable.scrollTop = this.scrollable.scrollHeight
+            this.scrollable.scrollTop = this.scrollable.scrollHeight
-          },
+          },
-          (event) => {
+          (event) => {
-            this.reload = true
+            this.reload = true
-            this.ongoing = false
+            this.ongoing = false
-            this.scrollable.scrollTop = this.scrollable.scrollHeight
+            this.scrollable.scrollTop = this.scrollable.scrollHeight
-          }
+          }
-        )
+        )
-
+
-        return
+        return
-      }
+      }
-
+
-      // In case of being a search.
+      // In case of being a search.
-      api.search(path, this.value,
+      api.search(path, this.value,
-        (event) => {
+        (event) => {
-          let response = JSON.parse(event.data)
+          let response = JSON.parse(event.data)
-          if (response.path[0] === '/') {
+          if (response.path[0] === '/') {
-            response.path = response.path.substring(1)
+            response.path = response.path.substring(1)
-          }
+          }
-
+
-          this.search.push(response)
+          this.search.push(response)
-          this.scrollable.scrollTop = this.scrollable.scrollHeight
+          this.scrollable.scrollTop = this.scrollable.scrollHeight
-        },
+        },
-        (event) => {
+        (event) => {
-          this.ongoing = false
+          this.ongoing = false
-          this.scrollable.scrollTop = this.scrollable.scrollHeight
+          this.scrollable.scrollTop = this.scrollable.scrollHeight
-        }
+        }
-      )
+      )
-    }
+    }
-  }
+  }
-}
+}
-</script>
+</script>

assets/src/components/Sidebar.vue

@@ -46,7 +46,7 @@
       </button>
     </div>
 
-    <div v-if="!$store.state.user.noAuth">
+    <div v-if="!$store.state.noAuth">
       <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>
@@ -59,7 +59,7 @@
     </div>
 
     <p class="credits">
-      <span>{{ $t('sidebar.servedWith') }} <a rel="noopener noreferrer" href="https://github.com/hacdias/filemanager">File Manager</a>.</span>
+      <span><a rel="noopener noreferrer" href="https://github.com/hacdias/filemanager">File Manager</a> v{{ version }}</span>
       <span><a @click="help">{{ $t('sidebar.help') }}</a></span>
     </p>
   </nav>
@@ -72,7 +72,7 @@ import auth from '@/utils/auth'
 export default {
   name: 'sidebar',
   computed: {
-    ...mapState(['user', 'staticGen']),
+    ...mapState(['user', 'staticGen', 'version']),
     active () {
       return this.$store.state.show === 'sidebar'
     }

assets/src/components/buttons/Copy.vue

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

assets/src/components/buttons/Delete.vue

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

assets/src/components/buttons/Download.vue

@@ -1,39 +1,39 @@
-<template>
+<template>
-  <button @click="download" :aria-label="$t('buttons.download')" :title="$t('buttons.download')" id="download-button" class="action">
+  <button @click="download" :aria-label="$t('buttons.download')" :title="$t('buttons.download')" id="download-button" class="action">
-    <i class="material-icons">file_download</i>
+    <i class="material-icons">file_download</i>
-    <span>{{ $t('buttons.download') }}</span>
+    <span>{{ $t('buttons.download') }}</span>
-    <span v-if="selectedCount > 0" class="counter">{{ selectedCount }}</span>
+    <span v-if="selectedCount > 0" class="counter">{{ selectedCount }}</span>
-  </button>
+  </button>
-</template>
+</template>
-
+
-<script>
+<script>
-import {mapGetters, mapState} from 'vuex'
+import {mapGetters, mapState} from 'vuex'
-import * as api from '@/utils/api'
+import * as api from '@/utils/api'
-
+
-export default {
+export default {
-  name: 'download-button',
+  name: 'download-button',
-  computed: {
+  computed: {
-    ...mapState(['req', 'selected']),
+    ...mapState(['req', 'selected']),
-    ...mapGetters(['selectedCount'])
+    ...mapGetters(['selectedCount'])
-  },
+  },
-  methods: {
+  methods: {
-    download: function (event) {
+    download: function (event) {
-      // If we are not on a listing, download the current file.
+      // If we are not on a listing, download the current file.
-      if (this.req.kind !== 'listing') {
+      if (this.req.kind !== 'listing') {
-        api.download(null, this.$route.path)
+        api.download(null, this.$route.path)
-        return
+        return
-      }
+      }
-
+
-      // If we are on a listing and there is one element selected,
+      // If we are on a listing and there is one element selected,
-      // download it.
+      // download it.
-      if (this.selectedCount === 1 && !this.req.items[this.selected[0]].isDir) {
+      if (this.selectedCount === 1 && !this.req.items[this.selected[0]].isDir) {
-        api.download(null, this.req.items[this.selected[0]].url)
+        api.download(null, this.req.items[this.selected[0]].url)
-        return
+        return
-      }
+      }
-
+
-      // Otherwise show the prompt to choose the formt of the download.
+      // Otherwise show the prompt to choose the formt of the download.
-      this.$store.commit('showHover', 'download')
+      this.$store.commit('showHover', 'download')
-    }
+    }
-  }
+  }
-}
+}
-</script>
+</script>

assets/src/components/buttons/Info.vue

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

assets/src/components/buttons/Move.vue

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

assets/src/components/buttons/Rename.vue

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

assets/src/components/buttons/Schedule.vue

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

assets/src/components/buttons/SwitchView.vue

@@ -1,32 +1,35 @@
 <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>
+    <i class="material-icons">{{ icon }}</i>
     <span>{{ $t('buttons.switchView') }}</span>
   </button>
 </template>
 
 <script>
+import { mapState, mapMutations } from 'vuex'
+import { updateUser } from '@/utils/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']),
     change: function (event) {
       // If we are on mobile we should close the dropdown.
       this.$store.commit('closeHovers')
 
-      let display = 'mosaic'
+      let user = {...this.user}
+      user.viewMode = (this.icon === 'view_list') ? 'list' : 'mosaic'
 
-      if (this.$store.state.req.display === 'mosaic') {
+      updateUser(user, 'partial').then(() => {
-        display = 'list'
+        this.updateUser({ viewMode: user.viewMode })
-      }
+      }).catch(this.$showError)
-
-      this.$store.commit('listingDisplay', display)
-      let path = this.$store.state.baseURL
-      if (path === '') path = '/'
-      document.cookie = `display=${display}; max-age=31536000; path=${path}`
-    },
-    icon: function () {
-      if (this.$store.state.req.display === 'mosaic') return 'view_list'
-      return 'view_module'
     }
   }
 }

assets/src/components/buttons/Upload.vue

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

assets/src/components/files/Editor.vue

@@ -134,7 +134,7 @@ export default {
         })
         .catch(error => {
           buttons.done(button)
-          this.$store.commit('showError', error)
+          this.$showError(error)
           this.$store.commit('setSchedule', '')
         })
     }

assets/src/components/files/Listing.vue

@@ -7,7 +7,7 @@
     <input style="display:none" type="file" id="upload-input" @change="uploadInput($event)" multiple>
   </div>
   <div v-else id="listing"
-    :class="req.display"
+    :class="user.viewMode"
     @dragenter="dragEnter"
     @dragend="dragEnd">
     <div>
@@ -98,7 +98,7 @@ export default {
   name: 'listing',
   components: { Item },
   computed: {
-    ...mapState(['req', 'selected']),
+    ...mapState(['req', 'selected', 'user']),
     nameSorted () {
       return (this.req.sort === 'name')
     },
@@ -196,6 +196,10 @@ export default {
       })
     },
     paste (event) {
+      if (event.target.tagName.toLowerCase() === 'input') {
+        return
+      }
+
       event.preventDefault()
 
       let items = []
@@ -210,17 +214,13 @@ export default {
       if (this.$store.state.clipboard.key === 'x') {
         api.move(items).then(() => {
           this.$store.commit('setReload', true)
-        }).catch(error => {
+        }).catch(this.$showError)
-          this.$store.commit('showError', error)
-        })
         return
       }
 
       api.copy(items).then(() => {
         this.$store.commit('setReload', true)
-      }).catch(error => {
+      }).catch(this.$showError)
-        this.$store.commit('showError', error)
-      })
     },
     resizeEvent () {
       // Update the columns size based on the window width.
@@ -267,7 +267,7 @@ export default {
           .then(req => {
             this.checkConflict(files, req.items, base)
           })
-          .catch(error => { console.log(error) })
+          .catch(this.$showError)
 
         return
       }
@@ -318,19 +318,37 @@ export default {
     handleFiles (files, base, overwrite = false) {
       buttons.loading('upload')
       let promises = []
+      let progress = new Array(files.length).fill(0)
 
-      for (let file of files) {
+      let onupload = (id) => (event) => {
-        promises.push(api.post(this.$route.path + base + file.name, file, overwrite))
+        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(() => {
-          buttons.success('upload')
+          finish()
           this.$store.commit('setReload', true)
         })
         .catch(error => {
-          buttons.done('upload')
+          finish()
-          this.$store.commit('showError', error)
+          this.$showError(error)
         })
 
       return false

assets/src/components/files/ListingItem.vue

@@ -109,21 +109,36 @@ export default {
         .then(() => {
           this.$store.commit('setReload', true)
         })
-        .catch(error => {
+        .catch(this.$showError)
-          this.$store.commit('showError', error)
-        })
     },
     click: function (event) {
       if (this.selectedCount !== 0) event.preventDefault()
-      if (this.$store.state.selected.indexOf(this.index) === -1) {
+      if (this.$store.state.selected.indexOf(this.index) !== -1) {
-        if (!event.ctrlKey && !this.$store.state.multiple) this.resetSelected()
-
-        this.addSelected(this.index)
-      } else {
         this.removeSelected(this.index)
+        return
       }
 
-      return false
+      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 (event) {
       setTimeout(() => {

assets/src/components/files/Preview.vue

@@ -20,8 +20,8 @@
 
     <div class="preview">
       <img v-if="req.type == 'image'" :src="raw()">
-      <audio v-else-if="req.type == 'audio'" :src="raw()" controls></audio>
+      <audio v-else-if="req.type == 'audio'" :src="raw()" autoplay controls></audio>
-      <video v-else-if="req.type == 'video'" :src="raw()" controls>
+      <video v-else-if="req.type == 'video'" :src="raw()" autoplay controls>
         Sorry, your browser doesn't support embedded videos,
         but don't worry, you can <a :href="download()">download it</a>
         and watch it with your favorite video player!
@@ -75,7 +75,7 @@ export default {
         this.listing = req
         this.updateLinks()
       })
-      .catch(error => { console.log(error) })
+      .catch(this.$showError)
   },
   beforeDestroy () {
     window.removeEventListener('keyup', this.key)

assets/src/components/prompts/Copy.vue

@@ -1,19 +1,24 @@
 <template>
-  <div class="prompt">
+  <div class="card floating">
-    <h3>{{ $t('prompts.copy') }}</h3>
+    <div class="card-title">
-    <p>{{ $t('prompts.copyMessage') }}</p>
+      <h2>{{ $t('prompts.copy') }}</h2>
+    </div>
 
-    <file-list @update:selected="val => dest = val"></file-list>
+    <div class="card-content">
+      <p>{{ $t('prompts.copyMessage') }}</p>
+      <file-list @update:selected="val => dest = val"></file-list>
+    </div>
 
-    <div>
+    <div class="card-action">
-      <button class="ok"
+      <button class="cancel flat"
-        @click="copy"
-        :aria-label="$t('buttons.copy')"
-        :title="$t('buttons.copy')">{{ $t('buttons.copy') }}</button>
-      <button class="cancel"
         @click="$store.commit('closeHovers')"
         :aria-label="$t('buttons.cancel')"
         :title="$t('buttons.cancel')">{{ $t('buttons.cancel') }}</button>
+      <button class="flat"
+        @click="copy"
+        :disabled="$route.path === dest"
+        :aria-label="$t('buttons.copy')"
+        :title="$t('buttons.copy')">{{ $t('buttons.copy') }}</button>
     </div>
   </div>
 </template>
@@ -56,7 +61,7 @@ export default {
         })
         .catch(error => {
           buttons.done('copy')
-          this.$store.commit('showError', error)
+          this.$showError(error)
         })
     }
   }

assets/src/components/prompts/Delete.vue

@@ -1,16 +1,18 @@
 <template>
-  <div class="prompt">
+  <div class="card floating">
-    <h3>{{ $t('prompts.deleteTitle') }}</h3>
+    <div class="card-content">
-    <p v-show="req.kind !== 'listing'">{{ $t('prompts.deleteMessageSingle') }}</p>
+      <p v-if="req.kind !== 'listing'">{{ $t('prompts.deleteMessageSingle') }}</p>
-    <p v-show="req.kind === 'listing'">{{ $t('prompts.deleteMessageMultiple', { count: selectedCount}) }}</p>
+      <p v-else>{{ $t('prompts.deleteMessageMultiple', { count: selectedCount}) }}</p>
-    <div>
+    </div>
-      <button @click="submit"
+    <div class="card-action">
-        :aria-label="$t('buttons.delete')"
+      <button @click="$store.commit('closeHovers')"
-        :title="$t('buttons.delete')">{{ $t('buttons.delete') }}</button>
+        class="flat cancel"
-      <button class="cancel"
-        @click="$store.commit('closeHovers')"
         :aria-label="$t('buttons.cancel')"
         :title="$t('buttons.cancel')">{{ $t('buttons.cancel') }}</button>
+      <button @click="submit"
+        class="flat"
+        :aria-label="$t('buttons.delete')"
+        :title="$t('buttons.delete')">{{ $t('buttons.delete') }}</button>
     </div>
   </div>
 </template>
@@ -43,7 +45,7 @@ export default {
           })
           .catch(error => {
             buttons.done('delete')
-            this.$store.commit('showError', error)
+            this.$showError(error)
           })
 
         return
@@ -70,7 +72,7 @@ export default {
         .catch(error => {
           buttons.done('delete')
           this.$store.commit('setReload', true)
-          this.$store.commit('showError', error)
+          this.$showError(error)
         })
     }
   }

assets/src/components/prompts/Download.vue

@@ -1,13 +1,18 @@
 <template>
-  <div class="prompt" id="download">
+  <div class="card floating" id="download">
-    <h3>{{ $t('prompts.download') }}</h3>
+    <div class="card-title">
-    <p>{{ $t('prompts.downloadMessage') }}</p>
+      <h2>{{ $t('prompts.download') }}</h2>
+    </div>
 
-    <button @click="download('zip')" autofocus>zip</button>
+    <div class="card-content">
-    <button @click="download('tar')" autofocus>tar</button>
+      <p>{{ $t('prompts.downloadMessage') }}</p>
-    <button @click="download('targz')" autofocus>tar.gz</button>
+
-    <button @click="download('tarbz2')" autofocus>tar.bz2</button>
+      <button class="block cancel" @click="download('zip')" autofocus>zip</button>
-    <button @click="download('tarxz')" autofocus>tar.xz</button>
+      <button class="block cancel" @click="download('tar')" autofocus>tar</button>
+      <button class="block cancel" @click="download('targz')" autofocus>tar.gz</button>
+      <button class="block cancel" @click="download('tarbz2')" autofocus>tar.bz2</button>
+      <button class="block cancel" @click="download('tarxz')" autofocus>tar.xz</button>
+    </div>
   </div>
 </template>
 

assets/src/components/prompts/Error.vue

@@ -1,31 +0,0 @@
-<template>
-  <div class="prompt error">
-    <i class="material-icons">error_outline</i>
-    <h3>{{ $t('prompts.error') }}</h3>
-    <pre>{{ $store.state.showMessage }}</pre>
-    <div>
-      <button @click="close"
-        autofocus
-        :aria-label="$t('buttons.close')"
-        :title="$t('buttons.close')">{{ $t('buttons.close') }}</button>
-      <button @click="reportIssue"
-        class="cancel"
-        :aria-label="$t('buttons.reportIssue')"
-        :title="$t('buttons.reportIssue')">{{ $t('buttons.reportIssue') }}</button>
-    </div>
-  </div>
-</template>
-
-<script>
-export default {
-  name: 'error',
-  methods: {
-    reportIssue () {
-      window.open('https://github.com/hacdias/filemanager/issues/new')
-    },
-    close () {
-      this.$store.commit('closeHovers')
-    }
-  }
-}
-</script>

assets/src/components/prompts/FileList.vue

@@ -53,7 +53,7 @@ export default {
     // so we fetch the data from the previous directory.
     api.fetch(url.removeLastDir(this.$route.path))
       .then(this.fillOptions)
-      .catch(this.showError)
+      .catch(this.$showError)
   },
   methods: {
     fillOptions (req) {
@@ -96,7 +96,7 @@ export default {
 
       api.fetch(uri)
         .then(this.fillOptions)
-        .catch(this.showError)
+        .catch(this.$showError)
     },
     touchstart (event) {
       let url = event.currentTarget.dataset.url

assets/src/components/prompts/Help.vue

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

assets/src/components/prompts/Info.vue

@@ -1,29 +1,33 @@
 <template>
-  <div class="prompt">
+  <div class="card floating">
-    <h3>{{ $t('prompts.fileInfo') }}</h3>
+    <div class="card-title">
+      <h2>{{ $t('prompts.fileInfo') }}</h2>
+    </div>
 
-    <p v-show="selected.length > 1">{{ $t('prompts.filesSelected', { count: selected.length }) }}</p>
+    <div class="card-content">
+      <p v-if="selected.length > 1">{{ $t('prompts.filesSelected', { count: selected.length }) }}</p>
 
-    <p v-show="selected.length < 2"><strong>{{ $t('prompts.displayName') }}</strong> {{ name() }}</p>
+      <p v-if="selected.length < 2"><strong>{{ $t('prompts.displayName') }}</strong> {{ name() }}</p>
-    <p><strong>{{ $t('prompts.size') }}:</strong> <span id="content_length"></span>{{ humanSize() }}</p>
+      <p><strong>{{ $t('prompts.size') }}:</strong> <span id="content_length"></span>{{ humanSize() }}</p>
-    <p v-show="selected.length < 2"><strong>{{ $t('prompts.lastModified') }}:</strong> {{ humanTime() }}</p>
+      <p v-if="selected.length < 2"><strong>{{ $t('prompts.lastModified') }}:</strong> {{ humanTime() }}</p>
 
-    <section v-show="dir() && selected.length === 0">
+      <template v-if="dir() && selected.length === 0">
-      <p><strong>{{ $t('prompts.numberFiles') }}:</strong> {{ req.numFiles }}</p>
+        <p><strong>{{ $t('prompts.numberFiles') }}:</strong> {{ req.numFiles }}</p>
-      <p><strong>{{ $t('prompts.numberDirs') }}:</strong> {{ req.numDirs }}</p>
+        <p><strong>{{ $t('prompts.numberDirs') }}:</strong> {{ req.numDirs }}</p>
-    </section>
+      </template>
 
-    <section v-show="!dir()">
+      <template v-if="!dir()">
-      <p><strong>MD5:</strong> <code><a @click="checksum($event, 'md5')">{{ $t('prompts.show') }}</a></code></p>
+        <p><strong>MD5:</strong> <code><a @click="checksum($event, 'md5')">{{ $t('prompts.show') }}</a></code></p>
-      <p><strong>SHA1:</strong> <code><a @click="checksum($event, 'sha1')">{{ $t('prompts.show') }}</a></code></p>
+        <p><strong>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>SHA256:</strong> <code><a @click="checksum($event, 'sha256')">{{ $t('prompts.show') }}</a></code></p>
-      <p><strong>SHA512:</strong> <code><a @click="checksum($event, 'sha512')">{{ $t('prompts.show') }}</a></code></p>
+        <p><strong>SHA512:</strong> <code><a @click="checksum($event, 'sha512')">{{ $t('prompts.show') }}</a></code></p>
-    </section>
+      </template>
+    </div>
 
-    <div>
+    <div class="card-action">
       <button type="submit"
         @click="$store.commit('closeHovers')"
-        class="ok"
+        class="flat"
         :aria-label="$t('buttons.ok')"
         :title="$t('buttons.ok')">{{ $t('buttons.ok') }}</button>
     </div>
@@ -111,7 +115,7 @@ export default {
 
       api.checksum(link, hash)
         .then((hash) => { event.target.innerHTML = hash })
-        .catch(error => { this.$store.commit('showError', error) })
+        .catch(this.$showError)
     }
   }
 }

assets/src/components/prompts/Move.vue

@@ -1,19 +1,23 @@
 <template>
-  <div class="prompt">
+  <div class="card floating">
-    <h3>{{ $t('prompts.move') }}</h3>
+    <div class="card-title">
-    <p>{{ $t('prompts.moveMessage') }}</p>
+      <h2>{{ $t('prompts.move') }}</h2>
+    </div>
 
-    <file-list @update:selected="val => dest = val"></file-list>
+    <div class="card-content">
+      <file-list @update:selected="val => dest = val"></file-list>
+    </div>
 
-    <div>
+    <div class="card-action">
-      <button class="ok"
+      <button class="flat cancel"
-        @click="move"
-        :aria-label="$t('buttons.move')"
-        :title="$t('buttons.move')">{{ $t('buttons.move') }}</button>
-      <button class="cancel"
         @click="$store.commit('closeHovers')"
         :aria-label="$t('buttons.cancel')"
         :title="$t('buttons.cancel')">{{ $t('buttons.cancel') }}</button>
+      <button class="flat"
+        @click="move"
+        :disabled="$route.path === dest"
+        :aria-label="$t('buttons.move')"
+        :title="$t('buttons.move')">{{ $t('buttons.move') }}</button>
     </div>
   </div>
 </template>
@@ -56,7 +60,7 @@ export default {
         })
         .catch(error => {
           buttons.done('move')
-          this.$store.commit('showError', error)
+          this.$showError(error)
         })
 
       event.preventDefault()

assets/src/components/prompts/NewArchetype.vue

@@ -1,18 +1,24 @@
 <template>
-  <div class="prompt">
+  <div class="card floating">
-    <h3>{{ $t('prompts.newFile') }}</h3>
+    <div class="card-title">
-    <p>{{ $t('prompts.newArchetype') }}</p>
+      <h2>{{ $t('prompts.newFile') }}</h2>
-    <input autofocus type="text" @keyup.enter="submit" v-model.trim="name">
+    </div>
-    <input type="text" @keyup.enter="submit" v-model.trim="archetype">
+
-    <div>
+    <div class="card-content">
-      <button class="ok"
+      <p>{{ $t('prompts.newArchetype') }}</p>
-        @click="submit"
+      <input autofocus type="text" @keyup.enter="submit" v-model.trim="name">
-        :aria-label="$t('buttons.create')"
+      <input type="text" @keyup.enter="submit" v-model.trim="archetype">
-        :title="$t('buttons.create')">{{ $t('buttons.create') }}</button>
+    </div>
-      <button class="cancel"
+
+    <div class="card-action">
+      <button class="flat cancel"
         @click="$store.commit('closeHovers')"
         :aria-label="$t('buttons.cancel')"
         :title="$t('buttons.cancel')">{{ $t('buttons.cancel') }}</button>
+      <button class="flat"
+        @click="submit"
+        :aria-label="$t('buttons.create')"
+        :title="$t('buttons.create')">{{ $t('buttons.create') }}</button>
     </div>
   </div>
 </template>
@@ -37,17 +43,19 @@ export default {
         .then((url) => {
           this.$router.push({ path: url })
         })
-        .catch(error => {
+        .catch(this.$showError)
-          this.$store.commit('showError', error)
-        })
     },
     new (url, type) {
       url = removePrefix(url)
 
+      if (!url.endsWith('.md') && !url.endsWith('.markdown')) {
+        url += '.markdown'
+      }
+
       return new Promise((resolve, reject) => {
         let request = new window.XMLHttpRequest()
         request.open('POST', `${this.$store.state.baseURL}/api/resource${url}`, true)
-        request.setRequestHeader('Authorization', `Bearer ${this.$store.state.jwt}`)
+        if (!this.$store.state.noAuth) request.setRequestHeader('Authorization', `Bearer ${this.$store.state.jwt}`)
         request.setRequestHeader('Archetype', encodeURIComponent(type))
 
         request.onload = () => {

assets/src/components/prompts/NewDir.vue

@@ -1,17 +1,23 @@
 <template>
-  <div class="prompt">
+  <div class="card floating">
-    <h3>{{ $t('prompts.newDir') }}</h3>
+    <div class="card-title">
-    <p>{{ $t('prompts.newDirMessage') }}</p>
+      <h2>{{ $t('prompts.newDir') }}</h2>
-    <input autofocus type="text" @keyup.enter="submit" v-model.trim="name">
+    </div>
-    <div>
+
-      <button class="ok"
+    <div class="card-content">
-        :aria-label="$t('buttons.create')"
+      <p>{{ $t('prompts.newDirMessage') }}</p>
-        :title="$t('buttons.create')"
+      <input autofocus type="text" @keyup.enter="submit" v-model.trim="name">
-        @click="submit">{{ $t('buttons.create') }}</button>
+    </div>
-      <button class="cancel"
+
+    <div class="card-action">
+      <button class="cancel flat"
         @click="$store.commit('closeHovers')"
         :aria-label="$t('buttons.cancel')"
         :title="$t('buttons.cancel')">{{ $t('buttons.cancel') }}</button>
+      <button class="flat"
+        :aria-label="$t('buttons.create')"
+        :title="$t('buttons.create')"
+        @click="submit">{{ $t('buttons.create') }}</button>
     </div>
   </div>
 </template>
@@ -43,7 +49,7 @@ export default {
 
       api.post(uri)
         .then(() => { this.$router.push({ path: uri }) })
-        .catch(error => { this.$store.commit('showError', error) })
+        .catch(this.$showError)
 
       // Close the prompt
       this.$store.commit('closeHovers')

assets/src/components/prompts/NewFile.vue

@@ -1,17 +1,23 @@
 <template>
-  <div class="prompt">
+  <div class="card floating">
-    <h3>{{ $t('prompts.newFile') }}</h3>
+    <div class="card-title">
-    <p>{{ $t('prompts.newFileMessage') }}</p>
+      <h2>{{ $t('prompts.newFile') }}</h2>
-    <input autofocus type="text" @keyup.enter="submit" v-model.trim="name">
+    </div>
-    <div>
+
-      <button class="ok"
+    <div class="card-content">
-        @click="submit"
+      <p>{{ $t('prompts.newFileMessage') }}</p>
-        :aria-label="$t('buttons.create')"
+      <input autofocus type="text" @keyup.enter="submit" v-model.trim="name">
-        :title="$t('buttons.create')">{{ $t('buttons.create') }}</button>
+    </div>
-      <button class="cancel"
+
+    <div class="card-action">
+      <button class="cancel flat"
         @click="$store.commit('closeHovers')"
         :aria-label="$t('buttons.cancel')"
         :title="$t('buttons.cancel')">{{ $t('buttons.cancel') }}</button>
+      <button class="flat"
+        @click="submit"
+        :aria-label="$t('buttons.create')"
+        :title="$t('buttons.create')">{{ $t('buttons.create') }}</button>
     </div>
   </div>
 </template>
@@ -44,7 +50,7 @@ export default {
       // Create the new file.
       api.post(uri)
         .then(() => { this.$router.push({ path: uri }) })
-        .catch(error => { this.$store.commit('showError', error) })
+        .catch(this.$showError)
 
       // Close the prompt.
       this.$store.commit('closeHovers')

assets/src/components/prompts/Prompts.vue

@@ -9,8 +9,6 @@
     <info v-else-if="showInfo"></info>
     <move v-else-if="showMove"></move>
     <copy v-else-if="showCopy"></copy>
-    <error v-else-if="showError"></error>
-    <success v-else-if="showSuccess"></success>
     <replace v-else-if="showReplace"></replace>
     <schedule v-else-if="show === 'schedule'"></schedule>
     <new-archetype v-else-if="show === 'new-archetype'"></new-archetype>
@@ -27,8 +25,6 @@ import Rename from './Rename'
 import Download from './Download'
 import Move from './Move'
 import Copy from './Copy'
-import Error from './Error'
-import Success from './Success'
 import NewFile from './NewFile'
 import NewDir from './NewDir'
 import NewArchetype from './NewArchetype'
@@ -47,9 +43,7 @@ export default {
     NewArchetype,
     Schedule,
     Rename,
-    Error,
     Download,
-    Success,
     Move,
     Copy,
     Share,
@@ -70,8 +64,6 @@ export default {
   },
   computed: {
     ...mapState(['show', 'plugins']),
-    showError: function () { return this.show === 'error' },
-    showSuccess: function () { return this.show === 'success' },
     showInfo: function () { return this.show === 'info' },
     showHelp: function () { return this.show === 'help' },
     showDelete: function () { return this.show === 'delete' },

assets/src/components/prompts/Rename.vue

@@ -1,78 +1,84 @@
-<template>
+<template>
-  <div class="prompt">
+  <div class="card floating">
-    <h3>{{ $t('prompts.rename') }}</h3>
+    <div class="card-title">
-    <p>{{ $t('prompts.renameMessage') }} <code>{{ oldName() }}</code>:</p>
+      <h2>{{ $t('prompts.rename') }}</h2>
-
+    </div>
-    <input autofocus type="text" @keyup.enter="submit" v-model.trim="name">
+
-    <div>
+    <div class="card-content">
-      <button @click="submit"
+      <p>{{ $t('prompts.renameMessage') }} <code>{{ oldName() }}</code>:</p>
-        type="submit"
+      <input autofocus type="text" @keyup.enter="submit" v-model.trim="name">
-        :aria-label="$t('buttons.rename')"
+    </div>
-        :title="$t('buttons.rename')">{{ $t('buttons.rename') }}</button>
+
-      <button class="cancel"
+    <div class="card-action">
-        @click="$store.commit('closeHovers')"
+      <button class="cancel flat"
-        :aria-label="$t('buttons.cancel')"
+        @click="$store.commit('closeHovers')"
-        :title="$t('buttons.cancel')">{{ $t('buttons.cancel') }}</button>
+        :aria-label="$t('buttons.cancel')"
-    </div>
+        :title="$t('buttons.cancel')">{{ $t('buttons.cancel') }}</button>
-  </div>
+      <button @click="submit"
-</template>
+        class="flat"
-
+        type="submit"
-<script>
+        :aria-label="$t('buttons.rename')"
-import { mapState } from 'vuex'
+        :title="$t('buttons.rename')">{{ $t('buttons.rename') }}</button>
-import url from '@/utils/url'
+    </div>
-import * as api from '@/utils/api'
+  </div>
-
+</template>
-export default {
+
-  name: 'rename',
+<script>
-  data: function () {
+import { mapState } from 'vuex'
-    return {
+import url from '@/utils/url'
-      name: ''
+import * as api from '@/utils/api'
-    }
+
-  },
+export default {
-  computed: mapState(['req', 'selected', 'selectedCount']),
+  name: 'rename',
-  methods: {
+  data: function () {
-    cancel: function (event) {
+    return {
-      this.$store.commit('closeHovers')
+      name: ''
-    },
+    }
-    oldName: function () {
+  },
-      // Get the current name of the file we are editing.
+  computed: mapState(['req', 'selected', 'selectedCount']),
-      if (this.req.kind !== 'listing') {
+  methods: {
-        return this.req.name
+    cancel: function (event) {
-      }
+      this.$store.commit('closeHovers')
-
+    },
-      if (this.selectedCount === 0 || this.selectedCount > 1) {
+    oldName: function () {
-        // This shouldn't happen.
+      // Get the current name of the file we are editing.
-        return
+      if (this.req.kind !== 'listing') {
-      }
+        return this.req.name
-
+      }
-      return this.req.items[this.selected[0]].name
+
-    },
+      if (this.selectedCount === 0 || this.selectedCount > 1) {
-    submit: function (event) {
+        // This shouldn't happen.
-      let oldLink = ''
+        return
-      let newLink = ''
+      }
-
+
-      if (this.req.kind !== 'listing') {
+      return this.req.items[this.selected[0]].name
-        oldLink = this.req.url
+    },
-      } else {
+    submit: function (event) {
-        oldLink = this.req.items[this.selected[0]].url
+      let oldLink = ''
-      }
+      let newLink = ''
-
+
-      this.name = encodeURIComponent(this.name)
+      if (this.req.kind !== 'listing') {
-      newLink = url.removeLastDir(oldLink) + '/' + this.name
+        oldLink = this.req.url
-
+      } else {
-      api.move([{ from: oldLink, to: newLink }])
+        oldLink = this.req.items[this.selected[0]].url
-        .then(() => {
+      }
-          if (this.req.kind !== 'listing') {
+
-            this.$router.push({ path: newLink })
+      this.name = encodeURIComponent(this.name)
-            return
+      newLink = url.removeLastDir(oldLink) + '/' + this.name
-          }
+
-          this.$store.commit('setReload', true)
+      api.move([{ from: oldLink, to: newLink }])
-        }).catch(error => {
+        .then(() => {
-          this.$store.commit('showError', error)
+          if (this.req.kind !== 'listing') {
-        })
+            this.$router.push({ path: newLink })
-
+            return
-      this.$store.commit('closeHovers')
+          }
-    }
+          this.$store.commit('setReload', true)
-  }
+        }).catch(error => {
-}
+          this.$showError(error)
-</script>
+        })
+
+      this.$store.commit('closeHovers')
+    }
+  }
+}
+</script>

assets/src/components/prompts/Replace.vue

@@ -1,17 +1,22 @@
 <template>
-  <div class="prompt">
+  <div class="card floating">
-    <h3>{{ $t('prompts.replace') }}</h3>
+    <div class="card-title">
-    <p>{{ $t('prompts.replaceMessage') }}</p>
+      <h2>{{ $t('prompts.replace') }}</h2>
+    </div>
 
-    <div>
+    <div class="card-content">
-      <button class="ok"
+      <p>{{ $t('prompts.replaceMessage') }}</p>
-        @click="showConfirm"
+    </div>
-        :aria-label="$t('buttons.replace')"
+
-        :title="$t('buttons.replace')">{{ $t('buttons.replace') }}</button>
+    <div class="card-action">
-      <button class="cancel"
+      <button class="flat cancel"
         @click="$store.commit('closeHovers')"
         :aria-label="$t('buttons.cancel')"
         :title="$t('buttons.cancel')">{{ $t('buttons.cancel') }}</button>
+      <button class="flat"
+        @click="showConfirm"
+        :aria-label="$t('buttons.replace')"
+        :title="$t('buttons.replace')">{{ $t('buttons.replace') }}</button>
     </div>
   </div>
 </template>

assets/src/components/prompts/Schedule.vue

@@ -1,17 +1,23 @@
 <template>
-  <div class="prompt">
+  <div class="card floating">
-    <h3>{{ $t('prompts.schedule') }}</h3>
+    <div class="card-title">
-    <p>{{ $t('prompts.scheduleMessage') }}</p>
+      <h2>{{ $t('prompts.schedule') }}</h2>
-    <input autofocus type="datetime-local" v-model="date">
+    </div>
-    <div>
+
-      <button class="ok"
+    <div class="card-content">
-        @click="submit"
+      <p>{{ $t('prompts.scheduleMessage') }}</p>
-        :aria-label="$t('buttons.schedule')"
+      <input autofocus type="datetime-local" v-model="date">
-        :title="$t('buttons.schedule')">{{ $t('buttons.schedule') }}</button>
+    </div>
-      <button class="cancel"
+
+    <div class="card-action">
+      <button class="cancel flat"
         @click="close"
         :aria-label="$t('buttons.cancel')"
         :title="$t('buttons.cancel')">{{ $t('buttons.cancel') }}</button>
+      <button class="falt"
+        @click="submit"
+        :aria-label="$t('buttons.schedule')"
+        :title="$t('buttons.schedule')">{{ $t('buttons.schedule') }}</button>
     </div>
   </div>
 </template>

assets/src/components/prompts/Share.vue

@@ -1,51 +1,55 @@
 <template>
-  <div class="prompt" id="share">
+  <div class="card floating" id="share">
-    <h3>{{ $t('buttons.share') }}</h3>
+    <div class="card-title">
-    <p></p>
+      <h2>{{ $t('buttons.share') }}</h2>
-    <ul>
+    </div>
-      <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">
+    <div class="card-content">
-        <a :href="buildLink(link.hash)" target="_blank">
+      <ul>
-          <template v-if="link.expires">{{ humanTime(link.expireDate) }}</template>
+        <li v-if="!hasPermanent">
-          <template v-else>{{ $t('permanent') }}</template>
+          <a @click="getPermalink" :aria-label="$t('buttons.permalink')">{{ $t('buttons.permalink') }}</a>
-        </a>
+        </li>
 
-        <button class="action"
+        <li v-for="link in links" :key="link.hash">
-          @click="deleteLink($event, link)"
+          <a :href="buildLink(link.hash)" target="_blank">
-          :aria-label="$t('buttons.delete')"
+            <template v-if="link.expires">{{ humanTime(link.expireDate) }}</template>
-          :title="$t('buttons.delete')"><i class="material-icons">delete</i></button>
+            <template v-else>{{ $t('permanent') }}</template>
+          </a>
 
-        <button class="action copy"
+          <button class="action"
-          :data-clipboard-text="buildLink(link.hash)"
+            @click="deleteLink($event, link)"
-          :aria-label="$t('buttons.copyToClipboard')"
+            :aria-label="$t('buttons.delete')"
-          :title="$t('buttons.copyToClipboard')"><i class="material-icons">content_paste</i></button>
+            :title="$t('buttons.delete')"><i class="material-icons">delete</i></button>
-      </li>
 
-      <li>
+          <button class="action copy-clipboard"
-        <input autofocus
+            :data-clipboard-text="buildLink(link.hash)"
-          type="number"
+            :aria-label="$t('buttons.copyToClipboard')"
-          max="2147483647"
+            :title="$t('buttons.copyToClipboard')"><i class="material-icons">content_paste</i></button>
-          min="0"
+        </li>
-          @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>
+        <li>
-      <button class="cancel"
+          <input autofocus
+            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="flat"
         @click="$store.commit('closeHovers')"
         :aria-label="$t('buttons.close')"
         :title="$t('buttons.close')">{{ $t('buttons.close') }}</button>
@@ -54,7 +58,7 @@
 </template>
 
 <script>
-import { mapState, mapMutations } from 'vuex'
+import { mapState } from 'vuex'
 import { getShare, deleteShare, share } from '@/utils/api'
 import moment from 'moment'
 import Clipboard from 'clipboard'
@@ -101,20 +105,25 @@ export default {
       })
       .catch(error => {
         if (error === 404) return
-        this.showError(error)
+        this.$showError(error)
       })
   },
   mounted () {
-    this.clip = new Clipboard('.copy')
+    this.clip = new Clipboard('.copy-clipboard')
+    this.clip.on('success', (e) => {
+      this.$showSuccess(this.$t('success.linkCopied'))
+    })
+  },
+  beforeDestroy () {
+    this.clip.destroy()
   },
   methods: {
-    ...mapMutations([ 'showError' ]),
     submit: function (event) {
       if (!this.time) return
 
       share(this.url, this.time, this.unit)
         .then(result => { this.links.push(result); this.sort() })
-        .catch(error => { this.showError(error) })
+        .catch(this.$showError)
     },
     getPermalink (event) {
       share(this.url)
@@ -123,7 +132,7 @@ export default {
           this.sort()
           this.hasPermanent = true
         })
-        .catch(error => { this.showError(error) })
+        .catch(this.$showError)
     },
     deleteLink (event, link) {
       event.preventDefault()
@@ -132,7 +141,7 @@ export default {
           if (!link.expires) this.hasPermanent = false
           this.links = this.links.filter(item => item.hash !== link.hash)
         })
-        .catch(error => { this.showError(error) })
+        .catch(this.$showError)
     },
     humanTime (time) {
       return moment(time).fromNow()

assets/src/components/prompts/Success.vue

@@ -1,23 +0,0 @@
-<template>
-  <div class="prompt success">
-    <i class="material-icons">done</i>
-    <h3>{{ $store.state.showMessage }}</h3>
-    <div>
-      <button @click="close"
-        :aria-label="$t('buttons.ok')"
-        :title="$t('buttons.ok')"
-        autofocus>{{ $t('buttons.ok') }}</button>
-    </div>
-  </div>
-</template>
-
-<script>
-export default {
-  name: 'success',
-  methods: {
-    close () {
-      this.$store.commit('closeHovers')
-    }
-  }
-}
-</script>

assets/src/css/base.css

@@ -1,9 +1,8 @@
 body {
   font-family: 'Roboto', sans-serif;
   padding-top: 4em;
-  background-color: #f8f8f8;
+  background-color: #fafafa;
-  user-select: none;
+  color: #333333;
-  color: #212121;
 }
 
 * {
@@ -66,6 +65,58 @@ button:hover {
   background-color: #1E88E5;
 }
 
+input[type="submit"].block,
+button.block {
+  display: block;
+  width: 100%;
+  margin: 0 0 1em;
+}
+
+button.delete {
+  background: #F44336;
+}
+
+button.delete:hover {
+  background: #D32F2F;
+}
+
+button.cancel {
+  background-color: #ECEFF1;
+  color: #37474F;
+}
+
+button.cancel:hover {
+  background-color: #e9eaeb;
+}
+
+button.flat,
+input[type="submit"].flat {
+  color: #1E88E5;
+  background: transparent;
+  box-shadow: 0 0 0;
+  border: 0;
+  margin-left: 0;
+  text-transform: uppercase;
+}
+
+button.flat:hover,
+input[type="submit"].flat:hover {
+  background: rgba(0,0,0,0.05)
+}
+
+button.flat.delete {
+  color: #F44336;
+}
+
+button.flat.cancel {
+  color: #ccc;
+}
+
+button.flat[disabled] {
+  color: #ccc;
+  cursor: not-allowed;
+}
+
 .mobile-only {
   display: none !important;
 }
@@ -145,3 +196,19 @@ main {
 #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;
+}

assets/src/css/dashboard.css

@@ -1,64 +1,34 @@
 .dashboard {
   max-width: 600px;
-  box-shadow: rgba(0, 0, 0, 0.06) 0px 1px 3px, rgba(0, 0, 0, 0.12) 0px 1px 2px;
-  border-radius: .5em;
-  background: #fff;
-  padding: 1em;
   margin: 1em 0;
 }
 
-.dashboard a {
+a {
   color: inherit
 }
 
-.dashboard h1 button {
+select,
-  font-size: 0.5em;
+textarea,
-  float: right;
+input[type="text"],
-}
+input[type="password"] {
-
+  padding: 0.5em 0;
-.dashboard table {
+  line-height: 1;
-  width: 100%;
-}
-
-.dashboard table th {
-  font-weight: 500;
-  color: #757575;
-  text-align: left;
-}
-
-.dashboard table th,
-.dashboard table td {
-  padding: .5em 0;
-}
-
-.dashboard table td:last-child {
-  width: 1em
-}
-
-.dashboard > h1:first-of-type {
-  margin-top: 0;
-}
-
-.dashboard form > p:last-child,
-form.dashboard > p:last-child {
-  text-align: right
-}
-
-.dashboard > *:last-child {
-  margin-bottom: 0;
-}
-
-.dashboard select,
-.dashboard textarea,
-.dashboard input[type="text"],
-.dashboard input[type="password"] {
-  padding: 0;
-  line-height: 1.7;
   display: block;
   border: 0;
   border-bottom: 1px solid #dddddd;
   transition: .2s ease border;
   width: 100%;
+  background: transparent;
+}
+
+textarea {
+  line-height: 1.15;
+  padding: .5em;
+  border: 1px solid #ddd;
+  font-family: monospace;
+  min-height: 10em;
+  resize: none;
+  border-radius: 2px;
 }
 
 .dashboard #locale,
@@ -69,49 +39,32 @@ form.dashboard > p:last-child {
 }
 
 .dashboard #locale {
-  border: 1px solid #dddddd;
   margin-top: .5em;
 }
 
-.dashboard textarea:focus,
+textarea:focus,
-.dashboard textarea:hover,
+textarea:hover,
-.dashboard input[type="text"]:focus,
+input[type="text"]:focus,
-.dashboard input[type="password"]:focus,
+input[type="password"]:focus,
-.dashboard input[type="text"]:hover,
+input[type="text"]:hover,
-.dashboard input[type="password"]:hover {
+input[type="password"]:hover {
   border-color: #2979ff;
 }
 
-.dashboard input.red {
+input.red {
   border-color: red;
 }
 
-.dashboard input.green {
+input.green {
   border-color: green;
 }
 
-.dashboard button.delete {
-  background: #F44336;
-}
-
-.dashboard button.delete:hover {
-  background: #D32F2F;
-}
-
-.dashboard textarea {
-  line-height: 1.15;
-  padding: .5em;
-  border: 1px solid #ddd;
-  font-family: monospace;
-  min-height: 10em;
-  resize: vertical;
-}
-
 .dashboard p label {
   margin-bottom: .2em;
   display: block;
   font-size: .8em;
-  font-weight: bold;
+  font-weight: 500;
+  color: rgba(0, 0, 0, 0.57);
 }
 
 li code,
@@ -131,21 +84,337 @@ p code {
   display: flex;
   color: rgb(84, 110, 122);
   font-weight: 500;
-  padding: 0 0 1em;
   margin: 0 0 1em;
   font-size: .8em;
-  border-bottom: 1px solid rgba(0, 0, 0, 0.05);
+  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:last-child {
+.dashboard #nav li.active {
-  text-align: right
+  border-color: #2196f3
 }
 
 .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: #2196F3;
+  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: #2196f3 !important;
+  color: #fff !important;
+  transition: .1s ease all;
+}
+
+.file-list li:hover {
+  background-color: #e9eaeb;
+  cursor: pointer;
+}
+
+.file-list li:before {
+  content: "folder";
+  color: #6f6f6f;
+  vertical-align: middle;
+  line-height: 1.4;
+  font-family: 'Material Icons';
+  font-size: 1.75em;
+  margin-right: .25em;
+}
+
+.file-list li[aria-selected=true]:before {
+  color: white;
+}
+
+.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;
+}

assets/src/css/editor.css

@@ -1,184 +1,184 @@
-@import "~codemirror/lib/codemirror.css";
+@import "~codemirror/lib/codemirror.css";
-@import "~codemirror/theme/ttcn.css";
+@import "~codemirror/theme/ttcn.css";
-#editor {
+#editor {
-  max-width: 800px;
+  max-width: 800px;
-  margin: 0 auto;
+  margin: 0 auto;
-}
+}
-
+
-#editor .CodeMirror {
+#editor .CodeMirror {
-  box-shadow: rgba(0, 0, 0, 0.06) 0px 1px 3px, rgba(0, 0, 0, 0.12) 0px 1px 2px;
+  box-shadow: rgba(0, 0, 0, 0.06) 0px 1px 3px, rgba(0, 0, 0, 0.12) 0px 1px 2px;
-  margin: 2em 0;
+  margin: 2em 0;
-  border-radius: .5em;
+  border-radius: .5em;
-}
+}
-
+
-#editor h2 {
+#editor h2 {
-  color: rgba(0, 0, 0, 0.3);
+  color: rgba(0, 0, 0, 0.3);
-  font-weight: 500;
+  font-weight: 500;
-}
+}
-
+
-.CodeMirror {
+.CodeMirror {
-  height: auto;
+  height: auto;
-}
+}
-
+
-.markdown .CodeMirror {
+.markdown .CodeMirror {
-  padding: .75em;
+  padding: .75em;
-}
+}
-
+
-.cm-s-markdown .CodeMirror-gutter {
+.cm-s-markdown .CodeMirror-gutter {
-  border-right: 1px solid #eff3f5;
+  border-right: 1px solid #eff3f5;
-  padding-right: 5px;
+  padding-right: 5px;
-  margin-right: 15px;
+  margin-right: 15px;
-  min-width: 2.5em;
+  min-width: 2.5em;
-  padding-bottom: 30px;
+  padding-bottom: 30px;
-}
+}
-
+
-.cm-s-markdown .CodeMirror-cursor {
+.cm-s-markdown .CodeMirror-cursor {
-  border-right: 2px solid #667880;
+  border-right: 2px solid #667880;
-}
+}
-
+
-.cm-s-markdown .CodeMirror-lines {
+.cm-s-markdown .CodeMirror-lines {
-  margin: 0;
+  margin: 0;
-}
+}
-
+
-.cm-s-markdown {
+.cm-s-markdown {
-  color: #3D494E;
+  color: #3D494E;
-}
+}
-
+
-.cm-s-markdown span.cm-header {
+.cm-s-markdown span.cm-header {
-  color: #3D494E;
+  color: #3D494E;
-  font-weight: bold;
+  font-weight: bold;
-}
+}
-
+
-.cm-s-markdown span.cm-variable-2 {
+.cm-s-markdown span.cm-variable-2 {
-  color: #3D494E;
+  color: #3D494E;
-}
+}
-
+
-.cm-s-markdown span.cm-meta {
+.cm-s-markdown span.cm-meta {
-  color: #516066;
+  color: #516066;
-}
+}
-
+
-.cm-s-markdown span.cm-hr {
+.cm-s-markdown span.cm-hr {
-  color: #516066;
+  color: #516066;
-}
+}
-
+
-.cm-s-markdown span.cm-comment {
+.cm-s-markdown span.cm-comment {
-  color: #868f93;
+  color: #868f93;
-}
+}
-
+
-.cm-s-markdown span.cm-qualifier {
+.cm-s-markdown span.cm-qualifier {
-  color: #868f93;
+  color: #868f93;
-}
+}
-
+
-.cm-s-markdown span.cm-number {
+.cm-s-markdown span.cm-number {
-  color: #197987;
+  color: #197987;
-}
+}
-
+
-.cm-s-markdown span.cm-variable {
+.cm-s-markdown span.cm-variable {
-  color: #197987;
+  color: #197987;
-}
+}
-
+
-.cm-s-markdown span.cm-builtin {
+.cm-s-markdown span.cm-builtin {
-  color: #197987;
+  color: #197987;
-}
+}
-
+
-.cm-s-markdown span.cm-link {
+.cm-s-markdown span.cm-link {
-  color: #197987;
+  color: #197987;
-  text-decoration: underline;
+  text-decoration: underline;
-}
+}
-
+
-.cm-s-markdown span.cm-tag {
+.cm-s-markdown span.cm-tag {
-  color: #197987;
+  color: #197987;
-}
+}
-
+
-.cm-s-markdown span.cm-string {
+.cm-s-markdown span.cm-string {
-  color: #48abb9;
+  color: #48abb9;
-}
+}
-
+
-.cm-s-markdown span.cm-string-2 {
+.cm-s-markdown span.cm-string-2 {
-  color: #48abb9;
+  color: #48abb9;
-}
+}
-
+
-.cm-s-markdown span.cm-quote {
+.cm-s-markdown span.cm-quote {
-  color: #48abb9;
+  color: #48abb9;
-}
+}
-
+
-.cm-s-markdown span.cm-atom {
+.cm-s-markdown span.cm-atom {
-  color: #48abb9;
+  color: #48abb9;
-}
+}
-
+
-.cm-s-markdown span.cm-property {
+.cm-s-markdown span.cm-property {
-  color: #82a367;
+  color: #82a367;
-}
+}
-
+
-.cm-s-markdown span.cm-operator {
+.cm-s-markdown span.cm-operator {
-  color: #82a367;
+  color: #82a367;
-}
+}
-
+
-.cm-s-markdown span.cm-variable-3 {
+.cm-s-markdown span.cm-variable-3 {
-  color: #82a367;
+  color: #82a367;
-}
+}
-
+
-.cm-s-markdown span.cm-attribute {
+.cm-s-markdown span.cm-attribute {
-  color: #90bb74;
+  color: #90bb74;
-}
+}
-
+
-.cm-s-markdown span.cm-def {
+.cm-s-markdown span.cm-def {
-  color: #90bb74;
+  color: #90bb74;
-}
+}
-
+
-.cm-s-markdown span.cm-keyword {
+.cm-s-markdown span.cm-keyword {
-  color: #ec6c45;
+  color: #ec6c45;
-}
+}
-
+
-.cm-s-markdown span.cm-bracket {
+.cm-s-markdown span.cm-bracket {
-  color: #ec6c45;
+  color: #ec6c45;
-}
+}
-
+
-.cm-s-markdown span.cm-error {
+.cm-s-markdown span.cm-error {
-  color: #e45346;
+  color: #e45346;
-}
+}
-
+
-.cm-s-markdown span.cm-em {
+.cm-s-markdown span.cm-em {
-  font-style: italic;
+  font-style: italic;
-}
+}
-
+
-.cm-s-markdown span.cm-strong {
+.cm-s-markdown span.cm-strong {
-  font-weight: bold;
+  font-weight: bold;
-}
+}
-
+
-.cm-s-markdown .cm-header-1 {
+.cm-s-markdown .cm-header-1 {
-  font-size: 200%;
+  font-size: 200%;
-  line-height: 200%;
+  line-height: 200%;
-}
+}
-
+
-.cm-s-markdown .cm-header-2 {
+.cm-s-markdown .cm-header-2 {
-  font-size: 160%;
+  font-size: 160%;
-  line-height: 160%;
+  line-height: 160%;
-}
+}
-
+
-.cm-s-markdown .cm-header-3 {
+.cm-s-markdown .cm-header-3 {
-  font-size: 125%;
+  font-size: 125%;
-  line-height: 125%;
+  line-height: 125%;
-}
+}
-
+
-.cm-s-markdown .cm-header-4 {
+.cm-s-markdown .cm-header-4 {
-  font-size: 110%;
+  font-size: 110%;
-  line-height: 110%;
+  line-height: 110%;
-}
+}
-
+
-.cm-s-markdown .cm-comment {
+.cm-s-markdown .cm-comment {
-  background: rgba(0, 0, 0, .05);
+  background: rgba(0, 0, 0, .05);
-  border-radius: 2px;
+  border-radius: 2px;
-}
+}
-
+
-.cm-s-markdown .cm-link {
+.cm-s-markdown .cm-link {
-  color: #7f8c8d;
+  color: #7f8c8d;
-}
+}
-
+
-.cm-s-markdown .cm-url {
+.cm-s-markdown .cm-url {
-  color: #aab2b3;
+  color: #aab2b3;
-}
+}
-
+
-.cm-s-markdown .cm-strikethrough {
+.cm-s-markdown .cm-strikethrough {
-  text-decoration: line-through;
+  text-decoration: line-through;
-}
+}

assets/src/css/fonts.css

@@ -1,137 +1,137 @@
-@font-face {
+@font-face {
-  font-family: 'Roboto';
+  font-family: 'Roboto';
-  font-style: normal;
+  font-style: normal;
-  font-weight: 400;
+  font-weight: 400;
-  src: local('Roboto'), local('Roboto-Regular'), url(../assets/fonts/roboto/normal-cyrillic-ext.woff2) format('woff2');
+  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;
+  unicode-range: U+0460-052F, U+20B4, U+2DE0-2DFF, U+A640-A69F;
-}
+}
-
+
-@font-face {
+@font-face {
-  font-family: 'Roboto';
+  font-family: 'Roboto';
-  font-style: normal;
+  font-style: normal;
-  font-weight: 400;
+  font-weight: 400;
-  src: local('Roboto'), local('Roboto-Regular'), url(../assets/fonts/roboto/normal-cyrillic.woff2) format('woff2');
+  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;
+  unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
-}
+}
-
+
-@font-face {
+@font-face {
-  font-family: 'Roboto';
+  font-family: 'Roboto';
-  font-style: normal;
+  font-style: normal;
-  font-weight: 400;
+  font-weight: 400;
-  src: local('Roboto'), local('Roboto-Regular'), url(../assets/fonts/roboto/normal-greek-ext.woff2) format('woff2');
+  src: local('Roboto'), local('Roboto-Regular'), url(../assets/fonts/roboto/normal-greek-ext.woff2) format('woff2');
-  unicode-range: U+1F00-1FFF;
+  unicode-range: U+1F00-1FFF;
-}
+}
-
+
-@font-face {
+@font-face {
-  font-family: 'Roboto';
+  font-family: 'Roboto';
-  font-style: normal;
+  font-style: normal;
-  font-weight: 400;
+  font-weight: 400;
-  src: local('Roboto'), local('Roboto-Regular'), url(../assets/fonts/roboto/normal-greek.woff2) format('woff2');
+  src: local('Roboto'), local('Roboto-Regular'), url(../assets/fonts/roboto/normal-greek.woff2) format('woff2');
-  unicode-range: U+0370-03FF;
+  unicode-range: U+0370-03FF;
-}
+}
-
+
-@font-face {
+@font-face {
-  font-family: 'Roboto';
+  font-family: 'Roboto';
-  font-style: normal;
+  font-style: normal;
-  font-weight: 400;
+  font-weight: 400;
-  src: local('Roboto'), local('Roboto-Regular'), url(../assets/fonts/roboto/normal-vietnamese.woff2) format('woff2');
+  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;
+  unicode-range: U+0102-0103, U+1EA0-1EF9, U+20AB;
-}
+}
-
+
-@font-face {
+@font-face {
-  font-family: 'Roboto';
+  font-family: 'Roboto';
-  font-style: normal;
+  font-style: normal;
-  font-weight: 400;
+  font-weight: 400;
-  src: local('Roboto'), local('Roboto-Regular'), url(../assets/fonts/roboto/normal-latin-ext.woff2) format('woff2');
+  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;
+  unicode-range: U+0100-024F, U+1E00-1EFF, U+20A0-20AB, U+20AD-20CF, U+2C60-2C7F, U+A720-A7FF;
-}
+}
-
+
-@font-face {
+@font-face {
-  font-family: 'Roboto';
+  font-family: 'Roboto';
-  font-style: normal;
+  font-style: normal;
-  font-weight: 400;
+  font-weight: 400;
-  src: local('Roboto'), local('Roboto-Regular'), url(../assets/fonts/roboto/normal-latin.woff2) format('woff2');
+  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;
+  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-face {
-  font-family: 'Roboto';
+  font-family: 'Roboto';
-  font-style: normal;
+  font-style: normal;
-  font-weight: 500;
+  font-weight: 500;
-  src: local('Roboto Medium'), local('Roboto-Medium'), url(../assets/fonts/roboto/medium-cyrillic-ext.woff2) format('woff2');
+  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;
+  unicode-range: U+0460-052F, U+20B4, U+2DE0-2DFF, U+A640-A69F;
-}
+}
-
+
-@font-face {
+@font-face {
-  font-family: 'Roboto';
+  font-family: 'Roboto';
-  font-style: normal;
+  font-style: normal;
-  font-weight: 500;
+  font-weight: 500;
-  src: local('Roboto Medium'), local('Roboto-Medium'), url(../assets/fonts/roboto/medium-cyrillic.woff2) format('woff2');
+  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;
+  unicode-range: U+0400-045F, U+0490-0491, U+04B0-04B1, U+2116;
-}
+}
-
+
-@font-face {
+@font-face {
-  font-family: 'Roboto';
+  font-family: 'Roboto';
-  font-style: normal;
+  font-style: normal;
-  font-weight: 500;
+  font-weight: 500;
-  src: local('Roboto Medium'), local('Roboto-Medium'), url(../assets/fonts/roboto/medium-greek-ext.woff2) format('woff2');
+  src: local('Roboto Medium'), local('Roboto-Medium'), url(../assets/fonts/roboto/medium-greek-ext.woff2) format('woff2');
-  unicode-range: U+1F00-1FFF;
+  unicode-range: U+1F00-1FFF;
-}
+}
-
+
-@font-face {
+@font-face {
-  font-family: 'Roboto';
+  font-family: 'Roboto';
-  font-style: normal;
+  font-style: normal;
-  font-weight: 500;
+  font-weight: 500;
-  src: local('Roboto Medium'), local('Roboto-Medium'), url(../assets/fonts/roboto/medium-greek.woff2) format('woff2');
+  src: local('Roboto Medium'), local('Roboto-Medium'), url(../assets/fonts/roboto/medium-greek.woff2) format('woff2');
-  unicode-range: U+0370-03FF;
+  unicode-range: U+0370-03FF;
-}
+}
-
+
-@font-face {
+@font-face {
-  font-family: 'Roboto';
+  font-family: 'Roboto';
-  font-style: normal;
+  font-style: normal;
-  font-weight: 500;
+  font-weight: 500;
-  src: local('Roboto Medium'), local('Roboto-Medium'), url(../assets/fonts/roboto/medium-vietnamese.woff2) format('woff2');
+  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;
+  unicode-range: U+0102-0103, U+1EA0-1EF9, U+20AB;
-}
+}
-
+
-@font-face {
+@font-face {
-  font-family: 'Roboto';
+  font-family: 'Roboto';
-  font-style: normal;
+  font-style: normal;
-  font-weight: 500;
+  font-weight: 500;
-  src: local('Roboto Medium'), local('Roboto-Medium'), url(../assets/fonts/roboto/medium-latin-ext.woff2) format('woff2');
+  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;
+  unicode-range: U+0100-024F, U+1E00-1EFF, U+20A0-20AB, U+20AD-20CF, U+2C60-2C7F, U+A720-A7FF;
-}
+}
-
+
-@font-face {
+@font-face {
-  font-family: 'Roboto';
+  font-family: 'Roboto';
-  font-style: normal;
+  font-style: normal;
-  font-weight: 500;
+  font-weight: 500;
-  src: local('Roboto Medium'), local('Roboto-Medium'), url(../assets/fonts/roboto/medium-latin.woff2) format('woff2');
+  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;
+  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-face {
-  font-family: 'Material Icons';
+  font-family: 'Material Icons';
-  font-style: normal;
+  font-style: normal;
-  font-weight: 400;
+  font-weight: 400;
-  src: local('Material Icons'), local('MaterialIcons-Regular'), url(../assets/fonts/material/icons.woff2) format('woff2');
+  src: local('Material Icons'), local('MaterialIcons-Regular'), url(../assets/fonts/material/icons.woff2) format('woff2');
-}
+}
-
+
-.prompt .file-list ul li:before,
+.prompt .file-list ul li:before,
-.material-icons {
+.material-icons {
-  font-family: 'Material Icons';
+  font-family: 'Material Icons';
-  font-weight: normal;
+  font-weight: normal;
-  font-style: normal;
+  font-style: normal;
-  font-size: 24px;
+  font-size: 24px;
-  line-height: 1;
+  line-height: 1;
-  letter-spacing: normal;
+  letter-spacing: normal;
-  text-transform: none;
+  text-transform: none;
-  display: inline-block;
+  display: inline-block;
-  white-space: nowrap;
+  white-space: nowrap;
-  word-wrap: normal;
+  word-wrap: normal;
-  direction: ltr;
+  direction: ltr;
-  -webkit-font-smoothing: antialiased;
+  -webkit-font-smoothing: antialiased;
-  text-rendering: optimizeLegibility;
+  text-rendering: optimizeLegibility;
-  -moz-osx-font-smoothing: grayscale;
+  -moz-osx-font-smoothing: grayscale;
-  font-feature-settings: 'liga';
+  font-feature-settings: 'liga';
-}
+}

assets/src/css/header.css

@@ -122,8 +122,9 @@ header .search-button {
 #search input {
   width: 100%;
   border: 0;
-  outline: 0;
   background-color: transparent;
+  line-height: 0;
+  padding: 0;
 }
 
 #search #result {

assets/src/css/listing.css

@@ -159,7 +159,7 @@
 
 #listing.list .item.header {
   display: flex !important;
-  background: #f8f8f8;
+  background: #fafafa;
   position: fixed;
   width: calc(100% - 19em);
   top: 7em;

assets/src/css/login.css

@@ -29,6 +29,14 @@
   width: 90%;
 }
 
+#login.recaptcha form {
+  min-width: 304px;
+}
+
+#login #recaptcha {
+  margin: .5em 0 0;
+}
+
 #login input {
   width: 100%;
   width: 100%;

assets/src/css/mobile.css

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

assets/src/css/prompts.css

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

assets/src/css/styles.css

@@ -1,8 +1,8 @@
 @import "~normalize.css/normalize.css";
+@import "~noty/lib/noty.css";
 @import "./fonts.css";
 @import "./base.css";
 @import "./header.css";
-@import "./prompts.css";
 @import "./listing.css";
 @import "./editor.css";
 @import "./dashboard.css";
@@ -180,6 +180,17 @@
  *            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           *

assets/src/i18n/en.yaml

@@ -26,11 +26,13 @@ buttons:
   publish: Publish
   selectMultiple: Select multiple
   schedule: Schedule
-  switchView: Swicth view
+  switchView: Switch view
   toggleSidebar: Toggle sidebar
   update: Update
   upload: Upload
   permalink: Get Permanent Link
+success:
+  linkCopied: Link copied!
 errors:
   forbidden: You're not welcome here.
   internal: Something really went wrong.
@@ -115,13 +117,14 @@ settings:
   commandsHelp: >
     Here you can set commands that are executed in the named events. You
     write one command per line. If the event is related to files, such as before and
-    after saving, the environment variable "file" will be available with the path
+    after saving, the environment variable "FILE" will be available with the path
     of the file.
   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
@@ -165,7 +168,6 @@ sidebar:
   myFiles: My files
   newFile: New file
   newFolder: New folder
-  servedWith: Served with
   settings: Settings
   siteSettings: Site Settings
   hugoNew: Hugo New
@@ -185,10 +187,12 @@ search:
   writeToSearch: Write here to search
 languages:
   en: English
+  fr: Français
   pt: Português
   ja: 日本語
   zhCN: 中文 (简体)
   zhTW: 中文 (繁體)
+  es: Español
 time:
   unit: Time Unit
   seconds: Seconds

assets/src/i18n/es.yaml

@@ -0,0 +1,202 @@
+permanent: Permanente
+buttons:
+  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: No eres bienvenido aquí.
+  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
+  submit: Iniciar sesión
+  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?
+  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:
+  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
+  commands: Comandos
+  commandsHelp: >
+    Aquí puedes crear comandos que serán ejecutados en los eventos. Debes
+    escribir un comando por linea. Si el evento está relacionado con archivos, como
+    por ejemplo, antes y después de guardar, la variable de entorno "FILE" estará 
+    disponible en la ruta del archivo.
+  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.
+  profileSettings: Ajustes del perfil
+  ruleExample1: >
+      previene el acceso a una extensión de archivo (Como .git) en
+      cada carpeta.
+  ruleExample2: bloquea el acceso al archivo llamado Caddyfile en la carpeta raíz.
+  rules: Reglas
+  rulesHelp1: >
+      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.
+  rulesHelp2: >
+      Cada regla va en una línea diferente, y debe comenzar con la palabra clave
+      {0} or {1}. Entonces, debes escribir {2} si estás usando una expresión regular (REGEX) y
+      luego la expresión o la ruta.
+  scope: Raíz
+  settingsUpdated: ¡Ajustes actualizados!
+  user: Usuario
+  userCommands: Comandos
+  userCommandsHelp: >
+      Una lista separada por espacios con los comandos permitidos para este usuario.
+      Ejemplo:
+  userCreated: ¡Usuario creado!
+  userDeleted: ¡Usuario eliminado!
+  userManagement: Administración de usuarios
+  username: Usuario
+  users: Usuarios
+  userUpdated: ¡Usuario actualizado!
+sidebar:
+  help: Ayuda
+  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
+  pressToExecute: Presiona enter para ejecutar.
+  pressToSearch: Presiona enter para buscar.
+  search: Buscar...
+  searchOrCommand: Buscar o ejecutar un comando...
+  searchOrSupportedCommand: 'Buscar o ejecutar uno de los comandos soportados:'
+  type: Escribe y presiona enter para buscar.
+  types: Tipos
+  video: Vídeo
+  writeToSearch: Escribe aquí para buscar
+languages:
+  en: English
+  fr: Français
+  pt: Português
+  es: Español
+  ja: 日本語
+  zhCN: 中文 (简体)
+  zhTW: 中文 (繁體)
+
+time:
+  unit: Unidad
+  seconds: Segundos
+  minutes: Minutos
+  hours: Horas
+  days: Días

assets/src/i18n/fr.yaml

@@ -0,0 +1,194 @@
+permanent: Permanent
+buttons:
+  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
+errors:
+  forbidden: Vous n'êtes pas autorisé à être ici.
+  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
+  submit: Se connecter
+  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 ?
+  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:
+  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
+  commands: Commandes
+  commandsHelp: >
+    Ici vous pouvez définir des commandes qui seront exécutées lors de l'évènement correspondant.
+    Vous devez indiquer une commande par ligne. Si l'évènement est en rapport avec des fichiers,
+    par exemple avant et après enregistrement, la variable d'environement "FILE" sera disponible
+    et contiendra le chemin d'accès vers le fichier.
+  commandsUpdated: Commandes mises à jour !
+  customStylesheet: Feuille de style personnalisée
+  examples: Exemples
+  globalSettings: Paramètres généraux
+  language: Langue
+  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.
+  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
+  rulesHelp1: >
+    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.
+  rulesHelp2: >
+    Chaque règle est définie sur une ligne différente et doit commencer par le mot clé {0} ou {1}.
+    Vous devez ensuite ajouter {2} si vous utilisez une expression régulière puis l'expression en question ou bien seulement le chemin d'accès.
+  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
+  userUpdated: Utilisateur mis à jour !
+sidebar:
+  help: Aide
+  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
+  pressToExecute: Appuyez sur Entrée pour exécuter
+  pressToSearch: Appuyez sur Entrée pour lancer la recherche
+  search: Recherche en cours...
+  searchOrCommand: Rechercher ou exécuter une commande...
+  searchOrSupportedCommand: 'Lancez une recherche ou exécutez une commande parmis les suivantes :'
+  type: Tapez votre recherche et appuyez sur Entrée
+  types: Types
+  video: Video
+  writeToSearch: Ecrivez ici pour lancer une recherche
+languages:
+  en: English
+  fr: Français
+  pt: Português
+  ja: 日本語
+  zhCN: 中文 (简体)
+  zhTW: 中文 (繁體)
+  es: Español
+time:
+  unit: Unité de temps
+  seconds: Secondes
+  minutes: Minutes
+  hours: Heures
+  days: Jours

assets/src/i18n/index.js

@@ -1,22 +1,60 @@
 import Vue from 'vue'
 import VueI18n from 'vue-i18n'
 import en from './en.yaml'
+import fr from './fr.yaml'
 import pt from './pt.yaml'
 import ja from './ja.yaml'
 import zhCN from './zh-cn.yaml'
 import zhTW from './zh-tw.yaml'
+import es from './es.yaml'
 
 Vue.use(VueI18n)
 
+export function detectLocale () {
+  let locale = (navigator.language || navigator.browserLangugae).toLowerCase()
+  switch (true) {
+    case /^en.*/i.test(locale):
+      locale = 'en'
+      break
+    case /^fr.*/i.test(locale):
+      locale = 'fr'
+      break
+    case /^pt.*/i.test(locale):
+      locale = 'pt'
+      break
+    case /^ja.*/i.test(locale):
+      locale = 'ja'
+      break
+    case /^zh-CN/i.test(locale):
+      locale = 'zh-cn'
+      break
+    case /^zh-TW/i.test(locale):
+      locale = 'zh-tw'
+      break
+    case /^zh.*/i.test(locale):
+      locale = 'zh-cn'
+      break
+    case /^es.*/i.test(locale):
+      locale = 'es'
+      break
+    default:
+      locale = 'en'
+  }
+
+  return locale
+}
+
 const i18n = new VueI18n({
-  locale: 'en',
+  locale: detectLocale(),
   fallbackLocale: 'en',
   messages: {
     'en': en,
+    'fr': fr,
     'pt': pt,
     'ja': ja,
     'zh-cn': zhCN,
-    'zh-tw': zhTW
+    'zh-tw': zhTW,
+    'es': es
   }
 })
 

assets/src/i18n/ja.yaml

@@ -1,197 +1,201 @@
-permanent: 永久
+permanent: 永久
-buttons:
+buttons:
-  cancel: キャンセル
+  cancel: キャンセル
-  close: 閉じる
+  close: 閉じる
-  copy: コピー
+  copy: コピー
-  copyFile: ファイルをコピー
+  copyFile: ファイルをコピー
-  copyToClipboard: クリップボードにコピー
+  copyToClipboard: クリップボードにコピー
-  create: 作成
+  create: 作成
-  delete: 削除
+  delete: 削除
-  download: ダウンロード
+  download: ダウンロード
-  info: 情報
+  info: 情報
-  more: More
+  more: More
-  move: 移動
+  move: 移動
-  moveFile: ファイルを移動
+  moveFile: ファイルを移動
-  new: 新規
+  new: 新規
-  next: 次
+  next: 次
-  ok: OK
+  ok: OK
-  replace: 置き換える
+  replace: 置き換える
-  previous: 前
+  previous: 前
-  rename: 名前を変更
+  rename: 名前を変更
-  reportIssue: 問題を報告
+  reportIssue: 問題を報告
-  save: 保存
+  save: 保存
-  search: 検索
+  search: 検索
-  select: 選択
+  select: 選択
-  share: シェア
+  share: シェア
-  publish: 発表
+  publish: 発表
-  selectMultiple: 複数選択
+  selectMultiple: 複数選択
-  schedule: スケジュール
+  schedule: スケジュール
-  switchView: 表示を切り替わる
+  switchView: 表示を切り替わる
-  toggleSidebar: サイドバーを表示する
+  toggleSidebar: サイドバーを表示する
-  update: 更新
+  update: 更新
-  upload: アップロード
+  upload: アップロード
-  permalink: 固定リンク
+  permalink: 固定リンク
-errors:
+success:
-  forbidden: アクセスが拒否されました。
+  linkCopied: リンクがコピーされました！
-  internal: 内部エラーが発生しました。
+errors:
-  notFound: リソースが見つからなりませんでした。
+  forbidden: アクセスが拒否されました。
-files:
+  internal: 内部エラーが発生しました。
-  folders: フォルダ
+  notFound: リソースが見つからなりませんでした。
-  files: ファイル
+files:
-  body: 本文
+  folders: フォルダ
-  clear: クリアー
+  files: ファイル
-  closePreview: プレビューを閉じる
+  body: 本文
-  home: ホーム
+  clear: クリアー
-  lastModified: 最終変更
+  closePreview: プレビューを閉じる
-  loading: ローディング...
+  home: ホーム
-  lonely: ここには何もない...
+  lastModified: 最終変更
-  metadata: メタデータ
+  loading: ローディング...
-  multipleSelectionEnabled: 複数選択有効
+  lonely: ここには何もない...
-  name: 名前
+  metadata: メタデータ
-  size: サイズ
+  multipleSelectionEnabled: 複数選択有効
-  sortByName: 名前によるソート
+  name: 名前
-  sortBySize: サイズによるソート
+  size: サイズ
-  sortByLastModified: 最終変更日付によるソート
+  sortByName: 名前によるソート
-help:
+  sortBySize: サイズによるソート
-  click: ファイルやディレクトリを選択
+  sortByLastModified: 最終変更日付によるソート
-  ctrl:
+help:
-    click: 複数のファイルやディレクトリを選択
+  click: ファイルやディレクトリを選択
-    f: 検索を有効にする
+  ctrl:
-    s: ファイルを保存またはカレントディレクトリをダウンロード
+    click: 複数のファイルやディレクトリを選択
-  del: 選択した項目を削除
+    f: 検索を有効にする
-  doubleClick: ファイルやディレクトリをオープン
+    s: ファイルを保存またはカレントディレクトリをダウンロード
-  esc: 選択をクリアーまたはプロンプトを閉じる
+  del: 選択した項目を削除
-  f1: このヘルプを表示
+  doubleClick: ファイルやディレクトリをオープン
-  f2: ファイルの名前を変更
+  esc: 選択をクリアーまたはプロンプトを閉じる
-  help: ヘルプ
+  f1: このヘルプを表示
-login:
+  f2: ファイルの名前を変更
-  password: パスワード
+  help: ヘルプ
-  submit: ログイン
+login:
-  username: ユーザ名
+  password: パスワード
-  wrongCredentials: ユーザ名またはパスワードが間違っています。
+  submit: ログイン
-prompts:
+  username: ユーザ名
-  copy: コピー
+  wrongCredentials: ユーザ名またはパスワードが間違っています。
-  copyMessage: コピーの目標ディレクトリを選択してください：
+prompts:
-  currentlyNavigating: 現在閲覧しているディレクトリ：
+  copy: コピー
-  deleteMessageMultiple: '{count} つのファイルを本当に削除してよろしいですか。'
+  copyMessage: コピーの目標ディレクトリを選択してください：
-  deleteMessageSingle: このファイル/フォルダを本当に削除してよろしいですか。
+  currentlyNavigating: 現在閲覧しているディレクトリ：
-  deleteTitle: ファイルを削除
+  deleteMessageMultiple: '{count} つのファイルを本当に削除してよろしいですか。'
-  displayName: 名前：
+  deleteMessageSingle: このファイル/フォルダを本当に削除してよろしいですか。
-  download: ファイルをダウンロード
+  deleteTitle: ファイルを削除
-  downloadMessage: 圧縮形式を選択してください。
+  displayName: 名前：
-  error: あるエラーが発生しました。
+  download: ファイルをダウンロード
-  fileInfo: ファイル情報
+  downloadMessage: 圧縮形式を選択してください。
-  filesSelected: '{count} つのファイルは選択されました。'
+  error: あるエラーが発生しました。
-  lastModified: 最終変更
+  fileInfo: ファイル情報
-  move: 移動
+  filesSelected: '{count} つのファイルは選択されました。'
-  moveMessage: 移動の目標ディレクトリを選択してください：
+  lastModified: 最終変更
-  newDir: 新しいディレクトリを作成
+  move: 移動
-  newDirMessage: 新しいディレクトリの名前を入力してください。
+  moveMessage: 移動の目標ディレクトリを選択してください：
-  newFile: 新しいファイルを作成
+  newDir: 新しいディレクトリを作成
-  newFileMessage: 新しいファイルの名前を入力してください。
+  newDirMessage: 新しいディレクトリの名前を入力してください。
-  numberDirs: ディレクトリ個数
+  newFile: 新しいファイルを作成
-  numberFiles: ファイル個数
+  newFileMessage: 新しいファイルの名前を入力してください。
-  replace: 置き換える
+  numberDirs: ディレクトリ個数
-  replaceMessage: >
+  numberFiles: ファイル個数
-    アップロードするファイルの中でかち合う名前が一つあります。
+  replace: 置き換える
-    既存のファイルを置き換えりませんか。
+  replaceMessage: >
-  rename: 名前を変更
+    アップロードするファイルの中でかち合う名前が一つあります。
-  renameMessage: 名前を変更しようファイルは：
+    既存のファイルを置き換えりませんか。
-  show: 表示
+  rename: 名前を変更
-  size: サイズ
+  renameMessage: 名前を変更しようファイルは：
-  schedule: スケジュール
+  show: 表示
-  scheduleMessage: このポストの発表日付をスケジュールしてください。
+  size: サイズ
-  newArchetype: ある元型に基づいて新しいポストを作成します。ファイルは  コンテンツフォルダに作成されます。
+  schedule: スケジュール
-settings:
+  scheduleMessage: このポストの発表日付をスケジュールしてください。
-  admin: 管理者
+  newArchetype: ある元型に基づいて新しいポストを作成します。ファイルは  コンテンツフォルダに作成されます。
-  administrator: 管理者
+settings:
-  allowCommands: コマンドの実行
+  admin: 管理者
-  allowEdit: ファイルやディレクトリの編集、名前変更と削除
+  administrator: 管理者
-  allowNew: ファイルとディレクトリの作成
+  allowCommands: コマンドの実行
-  allowPublish: ポストとぺーじの発表
+  allowEdit: ファイルやディレクトリの編集、名前変更と削除
-  avoidChanges: "(変更を避けるために空白にしてください)"
+  allowNew: ファイルとディレクトリの作成
-  changePassword: パスワードを変更
+  allowPublish: ポストとぺーじの発表
-  commands: コマンド
+  avoidChanges: "(変更を避けるために空白にしてください)"
-  commandsHelp: "\
+  changePassword: パスワードを変更
-    ここで、名前付きイベントに実行するコマンドを設定することができます。\
+  commands: コマンド
-    一行にコマンド一つを入力してください。\
+  commandsHelp: "\
-    イベントはファイルに関連する場合、例えばファイル保存の前にまたは後で、\
+    ここで、名前付きイベントに実行するコマンドを設定することができます。\
-    環境変数 file はファイルのパスに割り当てられます。"
+    一行にコマンド一つを入力してください。\
-  commandsUpdated: コマンドは更新されました！
+    イベントはファイルに関連する場合、例えばファイル保存の前にまたは後で、\
-  customStylesheet: カスタムスタイルシ ート
+    環境変数 FILE はファイルのパスに割り当てられます。"
-  examples: 例
+  commandsUpdated: コマンドは更新されました！
-  globalSettings: グローバル設定
+  customStylesheet: カスタムスタイルシ ート
-  language: 言語
+  examples: 例
-  newPassword: 新しいパスワード
+  globalSettings: グローバル設定
-  newPasswordConfirm: 新しいパスワードを確認します
+  language: 言語
-  newUser: 新しいユーザー
+  lockPassword: 新しいパスワードを変更に禁止
-  password: パスワード
+  newPassword: 新しいパスワード
-  passwordUpdated: パスワードは更新されました！
+  newPasswordConfirm: 新しいパスワードを確認します
-  permissions: 権限
+  newUser: 新しいユーザー
-  permissionsHelp: "\
+  password: パスワード
-    あなたはユーザーを管理者に設定し、または権限を個々に設定しできます。\
+  passwordUpdated: パスワードは更新されました！
-    \"管理者\"を選択する場合、その他のすべての選択肢は自動的に設定されます。\
+  permissions: 権限
-    ユーザーの管理は管理者の権限として保留されました。"
+  permissionsHelp: "\
-  profileSettings: プロファイル設定
+    あなたはユーザーを管理者に設定し、または権限を個々に設定しできます。\
-  ruleExample1: "\
+    \"管理者\"を選択する場合、その他のすべての選択肢は自動的に設定されます。\
-    各フォルダに名前はドットで始まるファイル（例えば、.git、.gitignore）\
+    ユーザーの管理は管理者の権限として保留されました。"
-    へのアクセスを制限します。"
+  profileSettings: プロファイル設定
-  ruleExample2: 範囲のルートパスに名前は Caddyfile のファイルへのアクセスを制限します。
+  ruleExample1: "\
-  rules: 規則
+    各フォルダに名前はドットで始まるファイル（例えば、.git、.gitignore）\
-  rulesHelp1: "\
+    へのアクセスを制限します。"
-    ここに、あなたはこのユーザーの許可または拒否規則を設定できます。\
+  ruleExample2: 範囲のルートパスに名前は Caddyfile のファイルへのアクセスを制限します。
-    ブロックされたファイルはリストに表示されません、それではアクセスも制限されます。\
+  rules: 規則
-    正規表現(regex)のサポートと範囲に相対のパスが提供されています。"
+  rulesHelp1: "\
-  rulesHelp2: "\
+    ここに、あなたはこのユーザーの許可または拒否規則を設定できます。\
-    一行に規則一つを入力してください、\
+    ブロックされたファイルはリストに表示されません、それではアクセスも制限されます。\
-    その間に規則はキーワード {0} や {1} で始める必要があります。\
+    正規表現(regex)のサポートと範囲に相対のパスが提供されています。"
-    そして正規表現を使う場合、{2} と入力し、表現やパスを入力してください。"
+  rulesHelp2: "\
-  scope: 範囲
+    一行に規則一つを入力してください、\
-  settingsUpdated: 設定は更新されました！
+    その間に規則はキーワード {0} や {1} で始める必要があります。\
-  user: ユーザー
+    そして正規表現を使う場合、{2} と入力し、表現やパスを入力してください。"
-  userCommands: ユーザーのコマンド
+  scope: 範囲
-  userCommandsHelp: "\
+  settingsUpdated: 設定は更新されました！
-    空白区切りの有効のコマンドのリストを指定してください。\
+  user: ユーザー
-    例："
+  userCommands: ユーザーのコマンド
-  userCreated: ユーザーは作成されました！
+  userCommandsHelp: "\
-  userDeleted: ユーザーは削除されました！
+    空白区切りの有効のコマンドのリストを指定してください。\
-  userManagement: ユーザー管理
+    例："
-  username: ユーザー名
+  userCreated: ユーザーは作成されました！
-  users: ユーザー
+  userDeleted: ユーザーは削除されました！
-  userUpdated: ユーザーは更新されました！
+  userManagement: ユーザー管理
-sidebar:
+  username: ユーザー名
-  help: ヘルプ
+  users: ユーザー
-  logout: ログアウト
+  userUpdated: ユーザーは更新されました！
-  myFiles: 私のファイル
+sidebar:
-  newFile: 新しいファイルを作成
+  help: ヘルプ
-  newFolder: 新しいフォルダを作成
+  logout: ログアウト
-  servedWith: サービス提供者
+  myFiles: 私のファイル
-  settings: 設定
+  newFile: 新しいファイルを作成
-  siteSettings: サイト設定
+  newFolder: 新しいフォルダを作成
-  hugoNew: Hugo New
+  settings: 設定
-  preview: プレビュー
+  siteSettings: サイト設定
-search:
+  hugoNew: Hugo New
-  images: 画像
+  preview: プレビュー
-  music: 音楽
+search:
-  pdf: PDF
+  images: 画像
-  pressToExecute: Enter を押して実行します。
+  music: 音楽
-  pressToSearch: Enter を押して検索します。
+  pdf: PDF
-  search: 検索...
+  pressToExecute: Enter を押して実行します。
-  searchOrCommand: コマンドを検索または実行します。
+  pressToSearch: Enter を押して検索します。
-  searchOrSupportedCommand: サポートしているコマンドを検索または実行します：
+  search: 検索...
-  type: キーワードを入力し、Enter を押して検索します。
+  searchOrCommand: コマンドを検索または実行します。
-  types: 種類
+  searchOrSupportedCommand: サポートしているコマンドを検索または実行します：
-  video: ビデオ
+  type: キーワードを入力し、Enter を押して検索します。
-  writeToSearch: ここにキーワードを入力してください
+  types: 種類
-languages:
+  video: ビデオ
-  en: English
+  writeToSearch: ここにキーワードを入力してください
-  pt: Português
+languages:
-  ja: 日本語
+  en: English
-  zhCN: 中文 (简体)
+  fr: Français
-  zhTW: 中文 (繁體)
+  pt: Português
-time:
+  ja: 日本語
-  unit: 時間単位
+  zhCN: 中文 (简体)
-  seconds: 秒
+  zhTW: 中文 (繁體)
-  minutes: 分
+  es: Español
-  hours: 時間
+time:
-  days: 日
+  unit: 時間単位
+  seconds: 秒
+  minutes: 分
+  hours: 時間
+  days: 日

assets/src/i18n/pt.yaml

@@ -31,6 +31,8 @@ buttons:
   update: Atualizar
   upload: Enviar
   permalink: Obter link permanente
+success:
+  linkCopied: Link copiado!
 errors:
   forbidden: Tu não és bem-vindo aqui.
   internal: Algo correu bastante mal.
@@ -66,10 +68,12 @@ help:
   help: Ajuda
 languages:
   en: English
+  fr: Français
   pt: Português
   ja: 日本語
   zhCN: 中文 (简体)
   zhTW: 中文 (繁體)
+  es: Español
 login:
   password: Palavra-passe
   submit: Login
@@ -136,12 +140,13 @@ settings:
     Pode definir um conjunto de comandos a executar em determiandos eventos.
     Deve escrever um comando por linha. Se o evento estiver relacionado com ficheiros,
     como antes e depois de guardar, irá existir uma variável de ambiente denominada
-    "file" com o caminho do ficheiro.
+    "FILE" com o caminho do ficheiro.
   commandsUpdated: Comandos atualizados!
   customStylesheet: Estilos Personalizados
   examples: Exemplos
   globalSettings: Configurações Globais
   language: Linguagem
+  lockPassword: Não permitir que o utilizador altere a palavra-passe
   newPassword: Nova palavra-passe
   newPasswordConfirm: Confirme a nova palavra-passe
   newUser: Novo Utilizador
@@ -189,7 +194,6 @@ sidebar:
   newFile: Novo ficheiro
   newFolder: Nova pasta
   preview: Pré-visualizar
-  servedWith: Servido com
   settings: Configurações
   siteSettings: Configurações do Site
 time:

assets/src/i18n/zh-cn.yaml

@@ -1,195 +1,199 @@
-permanent: 永久
+permanent: 永久
-buttons:
+buttons:
-  cancel: 取消
+  cancel: 取消
-  close: 关闭
+  close: 关闭
-  copy: 复制
+  copy: 复制
-  copyFile: 复制文件
+  copyFile: 复制文件
-  copyToClipboard: 复制到剪贴板
+  copyToClipboard: 复制到剪贴板
-  create: 创建
+  create: 创建
-  delete: 删除
+  delete: 删除
-  download: 下载
+  download: 下载
-  info: 信息
+  info: 信息
-  more: 更多
+  more: 更多
-  move: 移动
+  move: 移动
-  moveFile: 移动文件
+  moveFile: 移动文件
-  new: 新
+  new: 新
-  next: 下一个
+  next: 下一个
-  ok: 确定
+  ok: 确定
-  replace: 替换
+  replace: 替换
-  previous: 上一个
+  previous: 上一个
-  rename: 重命名
+  rename: 重命名
-  reportIssue: 报告问题
+  reportIssue: 报告问题
-  save: 保存
+  save: 保存
-  search: 搜索
+  search: 搜索
-  select: 选择
+  select: 选择
-  share: 分享
+  share: 分享
-  publish: 发布
+  publish: 发布
-  selectMultiple: 选择多个
+  selectMultiple: 选择多个
-  schedule: 计划
+  schedule: 计划
-  switchView: 切换显示方式
+  switchView: 切换显示方式
-  toggleSidebar: 切换侧边栏
+  toggleSidebar: 切换侧边栏
-  update: 更新
+  update: 更新
-  upload: 上传
+  upload: 上传
-  permalink: 获取永久链接
+  permalink: 获取永久链接
-errors:
+success:
-  forbidden: 你被禁止访问。
+  linkCopied: 链接已复制！
-  internal: 内部出现麻烦了。
+errors:
-  notFound: 找不到文件。
+  forbidden: 你被禁止访问。
-files:
+  internal: 内部出现麻烦了。
-  folders: 文件夹
+  notFound: 找不到文件。
-  files: 文件
+files:
-  body: Body
+  folders: 文件夹
-  clear: 清空
+  files: 文件
-  closePreview: 关闭预览
+  body: Body
-  home: 主页
+  clear: 清空
-  lastModified: 最后修改
+  closePreview: 关闭预览
-  loading: 加载中...
+  home: 主页
-  lonely: 这里没有任何文件...
+  lastModified: 最后修改
-  metadata: 元数据
+  loading: 加载中...
-  multipleSelectionEnabled: 多选模式已开启
+  lonely: 这里没有任何文件...
-  name: 名称
+  metadata: 元数据
-  size: 大小
+  multipleSelectionEnabled: 多选模式已开启
-  sortByName: 按名称排序
+  name: 名称
-  sortBySize: 按大小排序
+  size: 大小
-  sortByLastModified: 按最后修改时间排序
+  sortByName: 按名称排序
-help:
+  sortBySize: 按大小排序
-  click: 选择文件或目录
+  sortByLastModified: 按最后修改时间排序
-  ctrl:
+help:
-    click: 选择多个文件或目录
+  click: 选择文件或目录
-    f: 打开搜索框
+  ctrl:
-    s: 保存文件或下载当前文件夹
+    click: 选择多个文件或目录
-  del: 删除所选的文件/文件夹
+    f: 打开搜索框
-  doubleClick: 打开文件/文件夹
+    s: 保存文件或下载当前文件夹
-  esc: 清除已选项或关闭提示信息
+  del: 删除所选的文件/文件夹
-  f1: 显示该帮助信息
+  doubleClick: 打开文件/文件夹
-  f2: 重命名文件/文件夹
+  esc: 清除已选项或关闭提示信息
-  help: 帮助
+  f1: 显示该帮助信息
-login:
+  f2: 重命名文件/文件夹
-  password: 密码
+  help: 帮助
-  submit: 登录
+login:
-  username: 用户名
+  password: 密码
-  wrongCredentials: 用户名或密码错误
+  submit: 登录
-prompts:
+  username: 用户名
-  copy: 复制
+  wrongCredentials: 用户名或密码错误
-  copyMessage: 请选择欲复制至的目录：
+prompts:
-  currentlyNavigating: 当前目录：
+  copy: 复制
-  deleteMessageMultiple: 你确定要删除这 {count} 个文件吗?
+  copyMessage: 请选择欲复制至的目录：
-  deleteMessageSingle: 你确定要删除这个文件/文件夹吗?
+  currentlyNavigating: 当前目录：
-  deleteTitle: 删除文件
+  deleteMessageMultiple: 你确定要删除这 {count} 个文件吗?
-  displayName: 名称：
+  deleteMessageSingle: 你确定要删除这个文件/文件夹吗?
-  download: 下载文件
+  deleteTitle: 删除文件
-  downloadMessage: 请选择要下载的压缩格式。
+  displayName: 名称：
-  error: 出了一点问题...
+  download: 下载文件
-  fileInfo: 文件信息
+  downloadMessage: 请选择要下载的压缩格式。
-  filesSelected: 已选择 {count} 个文件。
+  error: 出了一点问题...
-  lastModified: 最后修改
+  fileInfo: 文件信息
-  move: 移动
+  filesSelected: 已选择 {count} 个文件。
-  moveMessage: 请选择欲移动至的目录：
+  lastModified: 最后修改
-  newDir: 新建目录
+  move: 移动
-  newDirMessage: 请输入新目录的名称。
+  moveMessage: 请选择欲移动至的目录：
-  newFile: 新建文件
+  newDir: 新建目录
-  newFileMessage: 请输入新文件的名称。
+  newDirMessage: 请输入新目录的名称。
-  numberDirs: 目录数
+  newFile: 新建文件
-  numberFiles: 文件数
+  newFileMessage: 请输入新文件的名称。
-  replace: 替换
+  numberDirs: 目录数
-  replaceMessage: "\
+  numberFiles: 文件数
-    您尝试上传的文件中有一个与现有文件的名称存在冲突。\
+  replace: 替换
-    是否替换现有的同名文件？"
+  replaceMessage: "\
-  rename: 重命名
+    您尝试上传的文件中有一个与现有文件的名称存在冲突。\
-  renameMessage: 请输入新名称，旧名称为：
+    是否替换现有的同名文件？"
-  show: 揭示
+  rename: 重命名
-  size: 大小
+  renameMessage: 请输入新名称，旧名称为：
-  schedule: 计划
+  show: 揭示
-  scheduleMessage: 请选择发布这篇帖子的日期。
+  size: 大小
-  newArchetype: 创建一个基于原型的新帖子。您的文件将会创建在内容文件夹中。
+  schedule: 计划
-settings:
+  scheduleMessage: 请选择发布这篇帖子的日期。
-  admin: 管理员
+  newArchetype: 创建一个基于原型的新帖子。您的文件将会创建在内容文件夹中。
-  administrator: 管理员
+settings:
-  allowCommands: 执行命令(Linux 代码)
+  admin: 管理员
-  allowEdit: 编辑、重命名或删除文件/目录
+  administrator: 管理员
-  allowNew: 创建新文件和目录
+  allowCommands: 执行命令(Linux 代码)
-  allowPublish: 发布新的帖子与页面
+  allowEdit: 编辑、重命名或删除文件/目录
-  avoidChanges: '(留空以避免更改)'
+  allowNew: 创建新文件和目录
-  changePassword: 更改密码
+  allowPublish: 发布新的帖子与页面
-  commands: 命令(linux 代码)
+  avoidChanges: '(留空以避免更改)'
-  commandsHelp: "\
+  changePassword: 更改密码
-    在这里，您可以设置在指定事件下执行的命令，一行一条。\
+  commands: 命令(linux 代码)
-    若事件与文件相关，如“在保存文件前”，\
+  commandsHelp: "\
-    则文件的路径会被赋值给环境变量 \"file\"。"
+    在这里，您可以设置在指定事件下执行的命令，一行一条。\
-  commandsUpdated: 命令已更新！
+    若事件与文件相关，如“在保存文件前”，\
-  customStylesheet: 自定义样式表
+    则文件的路径会被赋值给环境变量 \"FILE\"。"
-  examples: 例子
+  commandsUpdated: 命令已更新！
-  globalSettings: 全局设置
+  customStylesheet: 自定义样式表
-  language: 语言
+  examples: 例子
-  newPassword: 您的新密码
+  globalSettings: 全局设置
-  newPasswordConfirm: 重输一遍新密码
+  language: 语言
-  newUser: 新建用户
+  lockPassword: 禁止用户修改密码
-  password: 密码
+  newPassword: 您的新密码
-  passwordUpdated: 密码已更新！
+  newPasswordConfirm: 重输一遍新密码
-  permissions: 权限
+  newUser: 新建用户
-  permissionsHelp: "\
+  password: 密码
-    您可以将该用户设置为管理员，也可以单独选择各项权限。\
+  passwordUpdated: 密码已更新！
-    如果选择了“管理员”，则其他的选项会被自动勾上，\
+  permissions: 权限
-    同时该用户可以管理其他用户。"
+  permissionsHelp: "\
-  profileSettings: 配置文件设置
+    您可以将该用户设置为管理员，也可以单独选择各项权限。\
-  ruleExample1: "\
+    如果选择了“管理员”，则其他的选项会被自动勾上，\
-    阻止用户访问所有文件夹下任何以 . 开头的文件\
+    同时该用户可以管理其他用户。"
-    (隐藏文件, 例如: .git, .gitignore)。"
+  profileSettings: 配置文件设置
-  ruleExample2: 阻止用户访问其目录范围的根目录下名为 Caddyfile 的文件。
+  ruleExample1: "\
-  rules: 规则
+    阻止用户访问所有文件夹下任何以 . 开头的文件\
-  rulesHelp1: "\
+    (隐藏文件, 例如: .git, .gitignore)。"
-    您可以为该用户制定一组黑名单或白名单式的规则，\
+  ruleExample2: 阻止用户访问其目录范围的根目录下名为 Caddyfile 的文件。
-    被屏蔽的文件将不会显示在列表中，用户也无权限访问,\
+  rules: 规则
-    支持相对于目录范围的路径。"
+  rulesHelp1: "\
-  rulesHelp2: "\
+    您可以为该用户制定一组黑名单或白名单式的规则，\
-    每行一条规则，且必须以关键词 {0} 或 {1} 开头。\
+    被屏蔽的文件将不会显示在列表中，用户也无权限访问,\
-    如要使用正则表达式，请在加上 {2} 之后再附上表达式或路径。"
+    支持相对于目录范围的路径。"
-  scope: 目录范围
+  rulesHelp2: "\
-  settingsUpdated: 设置已更新！
+    每行一条规则，且必须以关键词 {0} 或 {1} 开头。\
-  user: 用户
+    如要使用正则表达式，请在加上 {2} 之后再附上表达式或路径。"
-  userCommands: 用户命令(Linux 代码)
+  scope: 目录范围
-  userCommandsHelp: "\
+  settingsUpdated: 设置已更新！
-    指定该用户可以执行的命令(Linux 代码)，用空格分隔。\
+  user: 用户
-    例如："
+  userCommands: 用户命令(Linux 代码)
-  userCreated: 用户已创建！
+  userCommandsHelp: "\
-  userDeleted: 用户已删除！
+    指定该用户可以执行的命令(Linux 代码)，用空格分隔。\
-  userManagement: 用户管理
+    例如："
-  username: 用户名
+  userCreated: 用户已创建！
-  users: 用户
+  userDeleted: 用户已删除！
-  userUpdated: 用户已更新！
+  userManagement: 用户管理
-sidebar:
+  username: 用户名
-  help: 帮助
+  users: 用户
-  logout: 登出
+  userUpdated: 用户已更新！
-  myFiles: 我的文件
+sidebar:
-  newFile: 新建文件
+  help: 帮助
-  newFolder: 新建文件夹
+  logout: 登出
-  servedWith: '服务提供者:'
+  myFiles: 我的文件
-  settings: 设置
+  newFile: 新建文件
-  siteSettings: 网站设置
+  newFolder: 新建文件夹
-  hugoNew: Hugo New
+  settings: 设置
-  preview: 预览
+  siteSettings: 网站设置
-search:
+  hugoNew: Hugo New
-  images: 图像
+  preview: 预览
-  music: 音乐
+search:
-  pdf: PDF
+  images: 图像
-  pressToExecute: 按回车键执行。
+  music: 音乐
-  pressToSearch: 按回车键搜索。
+  pdf: PDF
-  search: 搜索...
+  pressToExecute: 按回车键执行。
-  searchOrCommand: 搜索或者执行命令(Linux 代码)...
+  pressToSearch: 按回车键搜索。
-  searchOrSupportedCommand: 搜索或使用您可以使用的命令(一次只能执行一个命令)：
+  search: 搜索...
-  type: 键入并按回车键进行搜索。
+  searchOrCommand: 搜索或者执行命令(Linux 代码)...
-  types: 类型
+  searchOrSupportedCommand: 搜索或使用您可以使用的命令(一次只能执行一个命令)：
-  video: 视频
+  type: 键入并按回车键进行搜索。
-  writeToSearch: 请输入要搜索的内容
+  types: 类型
-languages:
+  video: 视频
-  en: English
+  writeToSearch: 请输入要搜索的内容
-  pt: Português
+languages:
-  ja: 日本語
+  en: English
-  zhCN: 中文 (简体)
+  fr: Français
-  zhTW: 中文 (繁體)
+  pt: Português
-time:
+  ja: 日本語
-  unit: 时间单位
+  zhCN: 中文 (简体)
-  seconds: 秒
+  zhTW: 中文 (繁體)
-  minutes: 分钟
+  es: Español
-  hours: 小时
+time:
-  days: 天
+  unit: 时间单位
+  seconds: 秒
+  minutes: 分钟
+  hours: 小时
+  days: 天

assets/src/i18n/zh-tw.yaml

@@ -4,7 +4,7 @@ buttons:
   close: 關閉
   copy: 複製
   copyFile: 複製檔案
-  copyToClipboard: 複製到剪貼板
+  copyToClipboard: 複製到剪貼簿
   create: 建立
   delete: 刪除
   download: 下載
@@ -31,8 +31,10 @@ buttons:
   update: 更新
   upload: 上傳
   permalink: 獲取永久連結
+success:
+  linkCopied: 連結已複製！
 errors:
-  forbidden: 你被禁止訪問。
+  forbidden: 你被禁止存取。
   internal: 內部出現麻煩了。
   notFound: 找不到檔案。
 files:
@@ -45,7 +47,7 @@ files:
   lastModified: 最後修改
   loading: 讀取中...
   lonely: 這裡沒有任何檔案...
-  metadata: 中繼資料
+  metadata: 詮釋資料
   multipleSelectionEnabled: 多選模式已開啟
   name: 名稱
   size: 大小
@@ -100,70 +102,70 @@ prompts:
   show: 顯示
   size: 大小
   schedule: 計畫
-  scheduleMessage: 請選擇發佈這篇帖子的日期。
+  scheduleMessage: 請選擇發佈這篇貼文的日期。
-  newArchetype: 建立一個基於原型的新帖子。您的檔案將會建立在內容資料夾中。
+  newArchetype: 建立一個基於原型的新貼文。您的檔案將會建立在內容資料夾中。
 settings:
   admin: 管理員
   administrator: 管理員
   allowCommands: 執行命令
   allowEdit: 編輯、重命名或刪除檔案/目錄
   allowNew: 創建新檔案和目錄
-  allowPublish: 發佈新的帖子與頁面
+  allowPublish: 發佈新的貼文與頁面
   avoidChanges: '(留空以避免更改)'
   changePassword: 更改密碼
   commands: 命令
   commandsHelp: "\
     在這裡，您可以設定在指定事件下執行的命令，一行一條。\
     若事件與檔案相關，如“在保存檔案前”，\
-    則檔案的路徑會被賦值給環境變數 \"file\"。"
+    則檔案的路徑會被賦值給環境變數 \"FILE\"。"
   commandsUpdated: 命令已更新！
   customStylesheet: 自定義樣式表
-  examples: 例子
+  examples: 範例
   globalSettings: 全域設定
   language: 語言
+  lockPassword: 禁止使用者修改密碼
   newPassword: 您的新密碼
   newPasswordConfirm: 重輸一遍新密碼
-  newUser: 建立用戶
+  newUser: 建立使用者
   password: 密碼
   passwordUpdated: 密碼已更新！
   permissions: 權限
   permissionsHelp: "\
-    您可以將該用戶設置為管理員，也可以單獨選擇各項權限。\
+    您可以將該使用者設置為管理員，也可以單獨選擇各項權限。\
     如果選擇了“管理員”，則其他的選項會被自動勾上，\
-    同時該用戶可以管理其他用戶。"
+    同時該使用者可以管理其他使用者。"
   profileSettings: 設定檔設定
   ruleExample1: "\
-    封鎖用戶訪問所有資料夾下任何以 . 開頭的檔案\
+    封鎖使用者存取所有資料夾下任何以 . 開頭的檔案\
     (隱藏文件, 例如: .git, .gitignore)。"
-  ruleExample2: 封鎖用戶訪問其目錄範圍的根目錄下名為 Caddyfile 的檔案。
+  ruleExample2: 封鎖使用者存取其目錄範圍的根目錄下名為 Caddyfile 的檔案。
   rules: 規則
   rulesHelp1: "\
-    您可以為該用戶製定一組黑名單或白名單式的規則，\
+    您可以為該使用者製定一組黑名單或白名單式的規則，\
-    被屏蔽的檔案將不會顯示在清單中，用戶也無權限訪問,\
+    被屏蔽的檔案將不會顯示在清單中，使用者也無權限存取,\
     支持相對於目錄範圍的路徑。"
   rulesHelp2: "\
     每行一條規則，且必須以關鍵字 {0} 或 {1} 開頭。\
     如要使用規則運算式，請在加上 {2} 之後再附上運算式或路徑。"
   scope: 目錄範圍
   settingsUpdated: 設定已更新！
-  user: 用戶
+  user: 使用者
-  userCommands: 用戶命令
+  userCommands: 使用者命令
   userCommandsHelp: "\
-    指定該用戶可以執行的命令，用空格分隔。\
+    指定該使用者可以執行的命令，用空格分隔。\
     例如："
-  userCreated: 用戶已建立！
+  userCreated: 使用者已建立！
-  userDeleted: 用戶已刪除！
+  userDeleted: 使用者已刪除！
-  userManagement: 用戶管理
+  userManagement: 使用者管理
-  username: 用戶名
+  username: 使用者名稱
-  users: 用戶
+  users: 使用者
-  userUpdated: 用戶已更新！
+  userUpdated: 使用者已更新！
 sidebar:
   help: 幫助
   logout: 登出
   myFiles: 我的檔案
   newFile: 建立檔案
   newFolder: 建立資料夾
-  servedWith: '服務提供者:'
   settings: 設定
   siteSettings: 網站設定
   hugoNew: Hugo New
@@ -183,12 +185,15 @@ search:
   writeToSearch: 請輸入要搜尋的內容
 languages:
   en: English
+  fr: Français
   pt: Português
   ja: 日本語
   zhCN: 中文 (简体)
+  zhTW: 中文 (繁體)
+  es: Español
 time:
   unit: 時間單位
   seconds: 秒
   minutes: 分鐘
   hours: 小時
-  days: 天
+  days: 天

assets/src/main.js

@@ -3,9 +3,46 @@ import App from './App'
 import store from './store'
 import router from './router'
 import i18n from './i18n'
+import Noty from 'noty'
 
 Vue.config.productionTip = true
 
+const notyDefault = {
+  type: 'info',
+  layout: 'bottomRight',
+  timeout: 1000,
+  progressBar: true
+}
+
+Vue.prototype.$noty = function (opts) {
+  new Noty(Object.assign({}, notyDefault, opts)).show()
+}
+
+Vue.prototype.$showSuccess = function (message) {
+  new Noty(Object.assign({}, notyDefault, {
+    text: message,
+    type: 'success'
+  })).show()
+}
+
+Vue.prototype.$showError = function (error) {
+  let n = new Noty(Object.assign({}, notyDefault, {
+    text: error,
+    type: 'error',
+    timeout: null,
+    buttons: [
+      Noty.button(i18n.t('buttons.reportIssue'), '', function () {
+        window.open('https://github.com/hacdias/filemanager/issues/new')
+      }),
+      Noty.button(i18n.t('buttons.close'), '', function () {
+        n.close()
+      })
+    ]
+  }))
+
+  n.show()
+}
+
 /* eslint-disable no-new */
 new Vue({
   el: '#app',

assets/src/router/index.js

@@ -3,14 +3,15 @@ import Router from 'vue-router'
 import Login from '@/views/Login'
 import Layout from '@/views/Layout'
 import Files from '@/views/Files'
-import Users from '@/views/Users'
+import Users from '@/views/settings/Users'
-import User from '@/views/User'
+import User from '@/views/settings/User'
-import GlobalSettings from '@/views/GlobalSettings'
+import Settings from '@/views/Settings'
-import ProfileSettings from '@/views/ProfileSettings'
+import GlobalSettings from '@/views/settings/Global'
+import ProfileSettings from '@/views/settings/Profile'
 import Error403 from '@/views/errors/403'
 import Error404 from '@/views/errors/404'
 import Error500 from '@/views/errors/500'
-import auth from '@/utils/auth.js'
+import auth from '@/utils/auth'
 import store from '@/store'
 
 Vue.use(Router)
@@ -49,22 +50,44 @@ const router = new Router({
         {
           path: '/settings',
           name: 'Settings',
+          component: Settings,
           redirect: {
             path: '/settings/profile'
-          }
+          },
-        },
-        {
-          path: '/settings/profile',
-          name: 'Profile Settings',
-          component: ProfileSettings
-        },
-        {
-          path: '/settings/global',
-          name: 'Global Settings',
-          component: GlobalSettings,
           meta: {
-            requiresAdmin: true
+            disableOnNoAuth: true
-          }
+          },
+          children: [
+            {
+              path: '/settings/profile',
+              name: 'Profile Settings',
+              component: ProfileSettings
+            },
+            {
+              path: '/settings/global',
+              name: 'Global Settings',
+              component: GlobalSettings,
+              meta: {
+                requiresAdmin: true
+              }
+            },
+            {
+              path: '/settings/users',
+              name: 'Users',
+              component: Users,
+              meta: {
+                requiresAdmin: true
+              }
+            },
+            {
+              path: '/settings/users/*',
+              name: 'User',
+              component: User,
+              meta: {
+                requiresAdmin: true
+              }
+            }
+          ]
         },
         {
           path: '/403',
@@ -81,22 +104,6 @@ const router = new Router({
           name: 'Internal Server Error',
           component: Error500
         },
-        {
-          path: '/users',
-          name: 'Users',
-          component: Users,
-          meta: {
-            requiresAdmin: true
-          }
-        },
-        {
-          path: '/users/*',
-          name: 'User',
-          component: User,
-          meta: {
-            requiresAdmin: true
-          }
-        },
         {
           path: '/files',
           redirect: {
@@ -123,16 +130,17 @@ router.beforeEach((to, from, next) => {
     auth.loggedIn()
       .then(() => {
         if (to.matched.some(record => record.meta.requiresAdmin)) {
-          if (store.state.user.admin) {
+          if (!store.state.user.admin) {
-            next()
+            next({ path: '/403' })
             return
           }
+        }
 
-          next({
+        if (to.matched.some(record => record.meta.disableOnNoAuth)) {
-            path: '/403'
+          if (store.state.noAuth) {
-          })
+            next({ path: '/403' })
-
+            return
-          return
+          }
         }
 
         next()

assets/src/store/index.js

@@ -12,9 +12,18 @@ const state = {
     key: '',
     items: []
   },
+  css: (() => {
+    let css = window.CSS
+    window.CSS = null
+    return css
+  })(),
+  recaptcha: document.querySelector('meta[name="recaptcha"]').getAttribute('content'),
   staticGen: document.querySelector('meta[name="staticgen"]').getAttribute('content'),
   baseURL: document.querySelector('meta[name="base"]').getAttribute('content'),
+  noAuth: (document.querySelector('meta[name="noauth"]').getAttribute('content') === 'true'),
+  version: document.querySelector('meta[name="version"]').getAttribute('content'),
   jwt: '',
+  progress: 0,
   schedule: '',
   loading: false,
   reload: false,

assets/src/store/mutations.js

@@ -1,4 +1,4 @@
-import i18n from '@/i18n'
+import * as i18n from '@/i18n'
 import moment from 'moment'
 
 const mutations = {
@@ -27,10 +27,17 @@ const mutations = {
   setLoading: (state, value) => { state.loading = value },
   setReload: (state, value) => { state.reload = value },
   setUser: (state, value) => {
-    moment.locale(value.locale)
+    let locale = value.locale
-    i18n.locale = value.locale
+
+    if (locale === '') {
+      locale = i18n.detectLocale()
+    }
+
+    moment.locale(locale)
+    i18n.default.locale = locale
     state.user = value
   },
+  setCSS: (state, value) => (state.css = value),
   setJWT: (state, value) => (state.jwt = value),
   multiple: (state, value) => (state.multiple = value),
   addSelected: (state, value) => (state.selected.push(value)),
@@ -45,8 +52,12 @@ const mutations = {
   resetSelected: (state) => {
     state.selected = []
   },
-  listingDisplay: (state, value) => {
+  updateUser: (state, value) => {
-    state.req.display = value
+    if (typeof value !== 'object') return
+
+    for (let field in value) {
+      state.user[field] = value[field]
+    }
   },
   updateRequest: (state, value) => {
     state.req = value
@@ -61,6 +72,9 @@ const mutations = {
   },
   setSchedule: (state, value) => {
     state.schedule = value
+  },
+  setProgress: (state, value) => {
+    state.progress = value
   }
 }
 

assets/src/utils/api.js

@@ -18,7 +18,7 @@ export function fetch (url) {
   return new Promise((resolve, reject) => {
     let request = new window.XMLHttpRequest()
     request.open('GET', `${store.state.baseURL}/api/resource${url}`, true)
-    request.setRequestHeader('Authorization', `Bearer ${store.state.jwt}`)
+    if (!store.state.noAuth) request.setRequestHeader('Authorization', `Bearer ${store.state.jwt}`)
 
     request.onload = () => {
       switch (request.status) {
@@ -41,7 +41,7 @@ export function remove (url) {
   return new Promise((resolve, reject) => {
     let request = new window.XMLHttpRequest()
     request.open('DELETE', `${store.state.baseURL}/api/resource${url}`, true)
-    request.setRequestHeader('Authorization', `Bearer ${store.state.jwt}`)
+    if (!store.state.noAuth) request.setRequestHeader('Authorization', `Bearer ${store.state.jwt}`)
 
     request.onload = () => {
       if (request.status === 200) {
@@ -56,13 +56,17 @@ export function remove (url) {
   })
 }
 
-export function post (url, content = '', overwrite = false) {
+export function post (url, content = '', overwrite = false, onupload) {
   url = removePrefix(url)
 
   return new Promise((resolve, reject) => {
     let request = new window.XMLHttpRequest()
     request.open('POST', `${store.state.baseURL}/api/resource${url}`, true)
-    request.setRequestHeader('Authorization', `Bearer ${store.state.jwt}`)
+    if (!store.state.noAuth) request.setRequestHeader('Authorization', `Bearer ${store.state.jwt}`)
+
+    if (typeof onupload === 'function') {
+      request.upload.onprogress = onupload
+    }
 
     if (overwrite) {
       request.setRequestHeader('Action', `override`)
@@ -91,7 +95,7 @@ export function put (url, content = '', publish = false, date = '') {
   return new Promise((resolve, reject) => {
     let request = new window.XMLHttpRequest()
     request.open('PUT', `${store.state.baseURL}/api/resource${url}`, true)
-    request.setRequestHeader('Authorization', `Bearer ${store.state.jwt}`)
+    if (!store.state.noAuth) request.setRequestHeader('Authorization', `Bearer ${store.state.jwt}`)
     request.setRequestHeader('Publish', publish)
 
     if (date !== '') {
@@ -121,7 +125,7 @@ function moveCopy (items, copy = false) {
     promises.push(new Promise((resolve, reject) => {
       let request = new window.XMLHttpRequest()
       request.open('PATCH', `${store.state.baseURL}/api/resource${from}`, true)
-      request.setRequestHeader('Authorization', `Bearer ${store.state.jwt}`)
+      if (!store.state.noAuth) request.setRequestHeader('Authorization', `Bearer ${store.state.jwt}`)
       request.setRequestHeader('Destination', to)
 
       if (copy) {
@@ -158,7 +162,7 @@ export function checksum (url, algo) {
   return new Promise((resolve, reject) => {
     let request = new window.XMLHttpRequest()
     request.open('GET', `${store.state.baseURL}/api/checksum${url}?algo=${algo}`, true)
-    request.setRequestHeader('Authorization', `Bearer ${store.state.jwt}`)
+    if (!store.state.noAuth) request.setRequestHeader('Authorization', `Bearer ${store.state.jwt}`)
 
     request.onload = () => {
       if (request.status === 200) {
@@ -222,7 +226,7 @@ export function getSettings () {
   return new Promise((resolve, reject) => {
     let request = new window.XMLHttpRequest()
     request.open('GET', `${store.state.baseURL}/api/settings/`, true)
-    request.setRequestHeader('Authorization', `Bearer ${store.state.jwt}`)
+    if (!store.state.noAuth) request.setRequestHeader('Authorization', `Bearer ${store.state.jwt}`)
 
     request.onload = () => {
       switch (request.status) {
@@ -251,7 +255,7 @@ export function updateSettings (param, which) {
 
     let request = new window.XMLHttpRequest()
     request.open('PUT', `${store.state.baseURL}/api/settings/`, true)
-    request.setRequestHeader('Authorization', `Bearer ${store.state.jwt}`)
+    if (!store.state.noAuth) request.setRequestHeader('Authorization', `Bearer ${store.state.jwt}`)
 
     request.onload = () => {
       switch (request.status) {
@@ -274,7 +278,7 @@ export function getUsers () {
   return new Promise((resolve, reject) => {
     let request = new window.XMLHttpRequest()
     request.open('GET', `${store.state.baseURL}/api/users/`, true)
-    request.setRequestHeader('Authorization', `Bearer ${store.state.jwt}`)
+    if (!store.state.noAuth) request.setRequestHeader('Authorization', `Bearer ${store.state.jwt}`)
 
     request.onload = () => {
       switch (request.status) {
@@ -295,7 +299,7 @@ export function getUser (id) {
   return new Promise((resolve, reject) => {
     let request = new window.XMLHttpRequest()
     request.open('GET', `${store.state.baseURL}/api/users/${id}`, true)
-    request.setRequestHeader('Authorization', `Bearer ${store.state.jwt}`)
+    if (!store.state.noAuth) request.setRequestHeader('Authorization', `Bearer ${store.state.jwt}`)
 
     request.onload = () => {
       switch (request.status) {
@@ -316,7 +320,7 @@ export function newUser (user) {
   return new Promise((resolve, reject) => {
     let request = new window.XMLHttpRequest()
     request.open('POST', `${store.state.baseURL}/api/users/`, true)
-    request.setRequestHeader('Authorization', `Bearer ${store.state.jwt}`)
+    if (!store.state.noAuth) request.setRequestHeader('Authorization', `Bearer ${store.state.jwt}`)
 
     request.onload = () => {
       switch (request.status) {
@@ -341,7 +345,7 @@ export function updateUser (user, which) {
   return new Promise((resolve, reject) => {
     let request = new window.XMLHttpRequest()
     request.open('PUT', `${store.state.baseURL}/api/users/${user.ID}`, true)
-    request.setRequestHeader('Authorization', `Bearer ${store.state.jwt}`)
+    if (!store.state.noAuth) request.setRequestHeader('Authorization', `Bearer ${store.state.jwt}`)
 
     request.onload = () => {
       switch (request.status) {
@@ -366,7 +370,7 @@ export function deleteUser (id) {
   return new Promise((resolve, reject) => {
     let request = new window.XMLHttpRequest()
     request.open('DELETE', `${store.state.baseURL}/api/users/${id}`, true)
-    request.setRequestHeader('Authorization', `Bearer ${store.state.jwt}`)
+    if (!store.state.noAuth) request.setRequestHeader('Authorization', `Bearer ${store.state.jwt}`)
 
     request.onload = () => {
       switch (request.status) {
@@ -391,7 +395,7 @@ export function getShare (url) {
   return new Promise((resolve, reject) => {
     let request = new window.XMLHttpRequest()
     request.open('GET', `${store.state.baseURL}/api/share${url}`, true)
-    request.setRequestHeader('Authorization', `Bearer ${store.state.jwt}`)
+    if (!store.state.noAuth) request.setRequestHeader('Authorization', `Bearer ${store.state.jwt}`)
 
     request.onload = () => {
       if (request.status === 200) {
@@ -410,7 +414,7 @@ export function deleteShare (hash) {
   return new Promise((resolve, reject) => {
     let request = new window.XMLHttpRequest()
     request.open('DELETE', `${store.state.baseURL}/api/share/${hash}`, true)
-    request.setRequestHeader('Authorization', `Bearer ${store.state.jwt}`)
+    if (!store.state.noAuth) request.setRequestHeader('Authorization', `Bearer ${store.state.jwt}`)
 
     request.onload = () => {
       if (request.status === 200) {
@@ -435,7 +439,7 @@ export function share (url, expires = '', unit = 'hours') {
   return new Promise((resolve, reject) => {
     let request = new window.XMLHttpRequest()
     request.open('POST', url, true)
-    request.setRequestHeader('Authorization', `Bearer ${store.state.jwt}`)
+    if (!store.state.noAuth) request.setRequestHeader('Authorization', `Bearer ${store.state.jwt}`)
 
     request.onload = () => {
       if (request.status === 200) {

assets/src/utils/auth.js

@@ -1,13 +1,18 @@
 import cookie from './cookie'
 import store from '@/store'
 import router from '@/router'
+import { Base64 } from 'js-base64'
 
 function parseToken (token) {
   let path = store.state.baseURL
   if (path === '') path = '/'
   document.cookie = `auth=${token}; max-age=86400; path=${path}`
   let res = token.split('.')
-  let user = JSON.parse(window.atob(res[1]))
+  let user = JSON.parse(Base64.decode(res[1]))
+  if (!user.commands) {
+    user.commands = []
+  }
+
   store.commit('setJWT', token)
   store.commit('setUser', user)
 }
@@ -16,7 +21,7 @@ function loggedIn () {
   return new Promise((resolve, reject) => {
     let request = new window.XMLHttpRequest()
     request.open('GET', `${store.state.baseURL}/api/auth/renew`, true)
-    request.setRequestHeader('Authorization', `Bearer ${cookie('auth')}`)
+    if (!store.state.noAuth) request.setRequestHeader('Authorization', `Bearer ${cookie('auth')}`)
 
     request.onload = () => {
       if (request.status === 200) {
@@ -31,8 +36,8 @@ function loggedIn () {
   })
 }
 
-function login (user, password) {
+function login (user, password, captcha) {
-  let data = {username: user, password: password}
+  let data = {username: user, password: password, recaptcha: captcha}
   return new Promise((resolve, reject) => {
     let request = new window.XMLHttpRequest()
     request.open('POST', `${store.state.baseURL}/api/auth/get`, true)

assets/src/utils/codemirror.js

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

assets/src/utils/cookie.js

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

assets/src/utils/css.js

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

assets/src/utils/url.js

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

assets/src/views/Files.vue

@@ -210,7 +210,7 @@ export default {
       }
     },
     scroll (event) {
-      if (this.req.kind !== 'listing' || this.$store.state.req.display === 'mosaic') return
+      if (this.req.kind !== 'listing' || this.$store.state.user.viewMode === 'mosaic') return
 
       let top = 112 - window.scrollY
 

assets/src/views/GlobalSettings.vue

@@ -1,162 +0,0 @@
-<template>
-  <div class="dashboard">
-    <ul id="nav">
-      <li>
-        <router-link to="/settings/profile">
-          <i class="material-icons">keyboard_arrow_left</i> {{ $t('settings.profileSettings') }}
-        </router-link>
-      </li>
-      <li>
-        <router-link to="/users">
-          {{ $t('settings.userManagement') }} <i class="material-icons">keyboard_arrow_right</i>
-        </router-link>
-      </li>
-    </ul>
-
-    <h1>{{ $t('settings.globalSettings') }}</h1>
-
-    <form @submit="saveStaticGen" v-if="$store.state.staticGen.length > 0">
-      <h2>{{ capitalize($store.state.staticGen) }}</h2>
-
-      <p v-for="field in staticGen" :key="field.variable">
-        <label v-if="field.type !== 'checkbox'">{{ field.name }}</label>
-        <input v-if="field.type === 'text'" type="text" v-model.trim="field.value">
-        <input v-else-if="field.type === 'checkbox'" type="checkbox" v-model.trim="field.value">
-        <template v-if="field.type === 'checkbox'">{{ capitalize(field.name, 'caps') }}</template>
-      </p>
-
-      <p><input type="submit" value="Save"></p>
-    </form>
-
-    <form @submit="saveCommands">
-      <h2>{{ $t('settings.commands') }}</h2>
-
-      <p class="small">{{ $t('settings.commandsHelp') }}</p>
-
-      <template v-for="command in commands">
-        <h3>{{ capitalize(command.name) }}</h3>
-        <textarea v-model.trim="command.value"></textarea>
-      </template>
-
-      <p><input type="submit" value="Save"></p>
-    </form>
-
-  </div>
-</template>
-
-<script>
-import { mapState, mapMutations } from 'vuex'
-import { getSettings, updateSettings } from '@/utils/api'
-
-export default {
-  name: 'settings',
-  data: function () {
-    return {
-      commands: [],
-      staticGen: []
-    }
-  },
-  computed: {
-    ...mapState([ 'user' ])
-  },
-  created () {
-    getSettings()
-      .then(settings => {
-        if (this.$store.state.staticGen.length > 0) {
-          this.parseStaticGen(settings.staticGen)
-        }
-
-        for (let key in settings.commands) {
-          this.commands.push({
-            name: key,
-            value: settings.commands[key].join('\n')
-          })
-        }
-      })
-      .catch(error => { this.showError(error) })
-  },
-  methods: {
-    ...mapMutations([ 'showSuccess', 'showError' ]),
-    capitalize (name, where = '_') {
-      if (where === 'caps') where = /(?=[A-Z])/
-      let splitted = name.split(where)
-      name = ''
-
-      for (let i = 0; i < splitted.length; i++) {
-        name += splitted[i].charAt(0).toUpperCase() + splitted[i].slice(1) + ' '
-      }
-
-      return name.slice(0, -1)
-    },
-    saveCommands (event) {
-      event.preventDefault()
-
-      let commands = {}
-
-      for (let command of this.commands) {
-        let value = command.value.split('\n')
-        if (value.length === 1 && value[0] === '') {
-          value = []
-        }
-
-        commands[command.name] = value
-      }
-
-      updateSettings(commands, 'commands')
-        .then(() => { this.showSuccess(this.$t('settings.commandsUpdated')) })
-        .catch(error => { this.showError(error) })
-    },
-    saveStaticGen (event) {
-      event.preventDefault()
-      let staticGen = {}
-
-      for (let field of this.staticGen) {
-        staticGen[field.variable] = field.value
-
-        if (field.original === 'array') {
-          let val = field.value.split(' ')
-          if (val[0] === '') {
-            val.shift()
-          }
-
-          staticGen[field.variable] = val
-        }
-      }
-
-      updateSettings(staticGen, 'staticGen')
-        .then(() => { this.showSuccess(this.$t('settings.settingsUpdated')) })
-        .catch(error => { this.showError(error) })
-    },
-    parseStaticGen (staticgen) {
-      for (let option of staticgen) {
-        let value = option.value
-
-        let field = {
-          name: option.name,
-          variable: option.variable,
-          type: 'text',
-          original: 'text',
-          value: value
-        }
-
-        if (Array.isArray(value)) {
-          field.original = 'array'
-          field.value = value.join(' ')
-
-          this.staticGen.push(field)
-          continue
-        }
-
-        switch (typeof value) {
-          case 'boolean':
-            field.type = 'checkbox'
-            field.original = 'boolean'
-            break
-        }
-
-        this.staticGen.push(field)
-      }
-    }
-  }
-}
-</script>

assets/src/views/Layout.vue

@@ -1,9 +1,12 @@
 <template>
   <div>
+    <div id="progress">
+      <div v-bind:style="{ width: $store.state.progress + '%' }"></div>
+    </div>
     <site-header></site-header>
     <sidebar></sidebar>
     <main>
-      <router-view v-on:css-updated="updateCSS"></router-view>
+      <router-view @css="$emit('update:css')"></router-view>
     </main>
     <prompts></prompts>
   </div>
@@ -31,23 +34,10 @@ export default {
     }
   },
   mounted () {
-    this.updateCSS()
+    this.$emit('update:css')
   },
-  methods: {
+  beforeDestroy () {
-    updateCSS () {
+    this.$emit('clean:css')
-      let css = this.$store.state.user.css
-
-      let style = document.querySelector('style[title="user-css"]')
-      if (style !== undefined && style !== null) {
-        style.parentElement.removeChild(style)
-      }
-
-      style = document.createElement('style')
-      style.title = 'user-css'
-      style.type = 'text/css'
-      style.appendChild(document.createTextNode(css))
-      document.head.appendChild(style)
-    }
   }
 }
 </script>

assets/src/views/Login.vue

@@ -1,11 +1,12 @@
 <template>
-  <div id="login">
+  <div id="login" :class="{ recaptcha: recaptcha.length > 0 }">
     <form @submit="submit">
       <img src="../assets/logo.svg" alt="File Manager">
       <h1>File Manager</h1>
       <div v-if="wrong" class="wrong">{{ $t("login.wrongCredentials") }}</div>
       <input type="text" v-model="username" :placeholder="$t('login.username')">
       <input type="password" v-model="password" :placeholder="$t('login.password')">
+      <div v-if="recaptcha.length" id="recaptcha"></div>
       <input type="submit" :value="$t('login.submit')">
     </form>
   </div>
@@ -13,9 +14,12 @@
 
 <script>
 import auth from '@/utils/auth'
+import { mapState } from 'vuex'
 
 export default {
   name: 'login',
+  props: ['dependencies'],
+  computed: mapState(['recaptcha']),
   data: function () {
     return {
       wrong: false,
@@ -23,8 +27,23 @@ export default {
       password: ''
     }
   },
+  mounted () {
+    if (this.dependencies) this.setup()
+  },
+  watch: {
+    dependencies: function (val) {
+      if (val) this.setup()
+    }
+  },
   methods: {
-    submit: function (event) {
+    setup () {
+      if (this.recaptcha.length === 0) return
+
+      window.grecaptcha.render('recaptcha', {
+        sitekey: this.recaptcha
+      })
+    },
+    submit (event) {
       event.preventDefault()
       event.stopPropagation()
 
@@ -33,7 +52,17 @@ export default {
         redirect = '/files/'
       }
 
-      auth.login(this.username, this.password)
+      let captcha = ''
+      if (this.recaptcha.length > 0) {
+        captcha = window.grecaptcha.getResponse()
+
+        if (captcha === '') {
+          this.wrong = true
+          return
+        }
+      }
+
+      auth.login(this.username, this.password, captcha)
         .then(() => { this.$router.push({ path: redirect }) })
         .catch(() => { this.wrong = true })
     }

assets/src/views/ProfileSettings.vue

@@ -1,103 +0,0 @@
-<template>
-  <div class="dashboard">
-    <ul id="nav" v-if="user.admin">
-      <li>
-        <router-link to="/settings/global">
-          {{ $t('settings.globalSettings') }} <i class="material-icons">keyboard_arrow_right</i>
-        </router-link>
-      </li>
-    </ul>
-
-    <h1>{{ $t('settings.profileSettings') }}</h1>
-
-    <form @submit="updateSettings">
-      <h3>{{ $t('settings.language') }}</h3>
-      <p><languages id="locale" :selected.sync="locale"></languages></p>
-      <h3>{{ $t('settings.customStylesheet') }}</h3>
-      <textarea v-model="css" name="css"></textarea>
-      <p><input type="submit" :value="$t('buttons.update')"></p>
-    </form>
-
-    <form @submit="updatePassword">
-      <h3>{{ $t('settings.changePassword') }}</h3>
-      <p><input :class="passwordClass" type="password" :placeholder="$t('settings.newPassword')" v-model="password" name="password"></p>
-      <p><input :class="passwordClass" type="password" :placeholder="$t('settings.newPasswordConfirm')" v-model="passwordConf" name="password"></p>
-      <p><input type="submit" :value="$t('buttons.update')"></p>
-    </form>
-  </div>
-</template>
-
-<script>
-import { mapState, mapMutations } from 'vuex'
-import { updateUser } from '@/utils/api'
-import Languages from '@/components/Languages'
-
-export default {
-  name: 'settings',
-  components: {
-    Languages
-  },
-  data: function () {
-    return {
-      password: '',
-      passwordConf: '',
-      css: '',
-      locale: ''
-    }
-  },
-  computed: {
-    ...mapState([ 'user' ]),
-    passwordClass () {
-      if (this.password === '' && this.passwordConf === '') {
-        return ''
-      }
-
-      if (this.password === this.passwordConf) {
-        return 'green'
-      }
-
-      return 'red'
-    }
-  },
-  created () {
-    this.css = this.user.css
-    this.locale = this.user.locale
-  },
-  methods: {
-    ...mapMutations([ 'showSuccess' ]),
-    updatePassword (event) {
-      event.preventDefault()
-
-      if (this.password !== this.passwordConf) {
-        return
-      }
-
-      let user = {
-        ID: this.$store.state.user.ID,
-        password: this.password
-      }
-
-      updateUser(user, 'password').then(location => {
-        this.showSuccess(this.$t('settings.passwordUpdated'))
-      }).catch(e => {
-        this.$store.commit('showError', e)
-      })
-    },
-    updateSettings (event) {
-      event.preventDefault()
-
-      let user = {...this.$store.state.user}
-      user.css = this.css
-      user.locale = this.locale
-
-      updateUser(user, 'partial').then(location => {
-        this.$store.commit('setUser', user)
-        this.$emit('css-updated')
-        this.showSuccess(this.$t('settings.settingsUpdated'))
-      }).catch(e => {
-        this.$store.commit('showError', e)
-      })
-    }
-  }
-}
-</script>

assets/src/views/Settings.vue

@@ -0,0 +1,20 @@
+<template>
+  <div class="dashboard">
+    <ul id="nav" v-if="user.admin">
+      <li :class="{ active: $route.path === '/settings/profile' }"><router-link to="/settings/profile">{{ $t('settings.profileSettings') }}</router-link></li>
+      <li :class="{ active: $route.path === '/settings/global' }"><router-link to="/settings/global">{{ $t('settings.globalSettings') }}</router-link></li>
+      <li :class="{ active: $route.path === '/settings/users' }"><router-link to="/settings/users">{{ $t('settings.userManagement') }}</router-link></li>
+    </ul>
+
+    <router-view @css="$emit('css')"></router-view>
+  </div>
+</template>
+
+<script>
+import { mapState } from 'vuex'
+
+export default {
+  name: 'settings',
+  computed: mapState([ 'user' ])
+}
+</script>

assets/src/views/User.vue

@@ -1,296 +0,0 @@
-<template>
-  <div>
-    <form @submit="save" class="dashboard">
-      <ul id="nav">
-        <li>
-          <router-link to="/users">
-            <i class="material-icons">keyboard_arrow_left</i> {{ $t('settings.userManagement') }}
-          </router-link>
-        </li>
-        <li></li>
-      </ul>
-
-      <h1 v-if="id === 0">{{ $t('settings.newUser') }}</h1>
-      <h1 v-else>{{ $t('settings.user') }} {{ username }}</h1>
-
-      <p><label for="username">{{ $t('settings.username') }}</label><input type="text" v-model="username" id="username"></p>
-      <p><label for="password">{{ $t('settings.password') }}</label><input type="password" :placeholder="passwordPlaceholder" v-model="password" id="password"></p>
-      <p><label for="scope">{{ $t('settings.scope') }}</label><input type="text" v-model="filesystem" id="scope"></p>
-      <p>
-        <label for="locale">{{ $t('settings.language') }}</label>
-        <languages id="locale" :selected.sync="locale"></languages>
-      </p>
-
-      <h2>{{ $t('settings.permissions') }}</h2>
-      <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="allowNew"> {{ $t('settings.allowNew') }}</p>
-      <p><input type="checkbox" :disabled="admin" v-model="allowEdit"> {{ $t('settings.allowEdit') }}</p>
-      <p><input type="checkbox" :disabled="admin" v-model="allowCommands"> {{ $t('settings.allowCommands') }}</p>
-      <p v-show="$store.state.staticGen.length"><input type="checkbox" :disabled="admin" v-model="allowPublish"> {{ $t('settings.allowPublish') }}</p>
-
-      <h3>{{ $t('settings.userCommands') }}</h3>
-      <p class="small">{{ $t('settings.userCommandsHelp') }} <i>git svn hg</i>.</p>
-      <input type="text" v-model.trim="commands">
-
-      <h2>{{ $t('settings.rules') }}</h2>
-
-      <p class="small">{{ $t('settings.rulesHelp1') }}</p>
-
-      <i18n path="settings.rulesHelp2" tag="p" class="small">
-        <code>allow</code><code>disallow</code><code>regex</code>
-      </i18n>
-
-      <p class="small"><strong>{{ $t('settings.examples') }}</strong></p>
-
-      <ul class="small">
-        <li><code>disallow regex \\/\\..+</code> - {{ $t('settings.ruleExample1') }}</li>
-        <li><code>disallow /Caddyfile</code> - {{ $t('settings.ruleExample2') }}</li>
-      </ul>
-
-      <textarea v-model.trim="rules"></textarea>
-
-      <h2>{{ $t('settings.customStylesheet') }}</h2>
-
-      <textarea name="css"></textarea>
-
-      <p>
-        <button v-if="id !== 0" @click.prevent="deletePrompt" type="button" class="delete" :aria-label="$t('buttons.delete')" :title="$t('buttons.delete')">{{ $t('buttons.delete') }}</button>
-        <input type="submit" :value="$t('buttons.save')">
-      </p>
-    </form>
-
-    <div v-if="$store.state.show === 'deleteUser'" class="prompt">
-      <h3>Delete User</h3>
-      <p>Are you sure you want to delete this user?</p>
-      <div>
-        <button @click="deleteUser" autofocus>{{ $t('buttons.delete') }}</button>
-        <button class="cancel"
-          @click="closeHovers"
-          :aria-label="$t('buttons.cancel')"
-          :title="$t('buttons.cancel')">
-          {{ $t('buttons.cancel') }}
-        </button>
-      </div>
-    </div>
-  </div>
-</template>
-
-<script>
-import { mapMutations } from 'vuex'
-import { getUser, newUser, updateUser, deleteUser } from '@/utils/api'
-import Languages from '@/components/Languages'
-
-export default {
-  name: 'user',
-  components: { Languages },
-  data: () => {
-    return {
-      id: 0,
-      admin: false,
-      allowNew: false,
-      allowEdit: false,
-      allowCommands: false,
-      allowPublish: false,
-      permissions: {},
-      password: '',
-      username: '',
-      filesystem: '',
-      rules: '',
-      locale: '',
-      css: '',
-      commands: ''
-    }
-  },
-  computed: {
-    passwordPlaceholder () {
-      if (this.$route.path === '/users/new') return ''
-      return this.$t('settings.avoidChanges')
-    }
-  },
-  created () {
-    this.fetchData()
-  },
-  watch: {
-    '$route': 'fetchData',
-    admin: function () {
-      if (!this.admin) return
-      this.allowCommands = true
-      this.allowEdit = true
-      this.allowNew = true
-      this.allowPublish = true
-      for (let key in this.permissions) {
-        this.permissions[key] = true
-      }
-    }
-  },
-  methods: {
-    ...mapMutations(['closeHovers']),
-    fetchData () {
-      let user = this.$route.params[0]
-
-      if (this.$route.path === '/users/new') {
-        user = 'base'
-      }
-
-      getUser(user).then(user => {
-        this.id = user.ID
-        this.admin = user.admin
-        this.allowCommands = user.allowCommands
-        this.allowNew = user.allowNew
-        this.allowEdit = user.allowEdit
-        this.allowPublish = user.allowPublish
-        this.filesystem = user.filesystem
-        this.username = user.username
-        this.commands = user.commands.join(' ')
-        this.css = user.css
-        this.permissions = user.permissions
-        this.locale = user.locale
-
-        for (let rule of user.rules) {
-          if (rule.allow) {
-            this.rules += 'allow '
-          } else {
-            this.rules += 'disallow '
-          }
-
-          if (rule.regex) {
-            this.rules += 'regex ' + rule.regexp.raw
-          } else {
-            this.rules += rule.path
-          }
-
-          this.rules += '\n'
-        }
-
-        this.rules = this.rules.trim()
-      }).catch(() => {
-        this.$router.push({ path: '/users/new' })
-      })
-    },
-    capitalize (name) {
-      let splitted = name.split(/(?=[A-Z])/)
-      name = ''
-
-      for (let i = 0; i < splitted.length; i++) {
-        name += splitted[i].charAt(0).toUpperCase() + splitted[i].slice(1) + ' '
-      }
-
-      return name.slice(0, -1)
-    },
-    reset () {
-      this.id = 0
-      this.admin = false
-      this.allowNew = false
-      this.allowEdit = false
-      this.allowPublish = false
-      this.permissins = {}
-      this.allowCommands = false
-      this.password = ''
-      this.username = ''
-      this.filesystem = ''
-      this.rules = ''
-      this.locale = ''
-      this.css = ''
-      this.commands = ''
-    },
-    deletePrompt (event) {
-      this.$store.commit('showHover', 'deleteUser')
-    },
-    deleteUser (event) {
-      event.preventDefault()
-
-      deleteUser(this.id).then(location => {
-        this.$router.push({ path: '/users' })
-        this.$store.commit('showSuccess', this.$t('settings.userDeleted'))
-      }).catch(e => {
-        this.$store.commit('showError', e)
-      })
-    },
-    save (event) {
-      event.preventDefault()
-      let user = this.parseForm()
-
-      if (this.$route.path === '/users/new') {
-        newUser(user).then(location => {
-          this.$router.push({ path: location })
-          this.$store.commit('showSuccess', this.$t('settings.userCreated'))
-        }).catch(e => {
-          this.$store.commit('showError', e)
-        })
-
-        return
-      }
-
-      updateUser(user).then(location => {
-        if (user.ID === this.$store.state.user.ID) {
-          this.$store.commit('setUser', user)
-        }
-
-        this.$store.commit('showSuccess', this.$t('settings.userUpdated'))
-      }).catch(e => {
-        this.$store.commit('showError', e)
-      })
-    },
-    parseForm () {
-      let user = {
-        ID: this.id,
-        username: this.username,
-        password: this.password,
-        filesystem: this.filesystem,
-        admin: this.admin,
-        allowCommands: this.allowCommands,
-        allowNew: this.allowNew,
-        allowEdit: this.allowEdit,
-        allowPublish: this.allowPublish,
-        permissions: this.permissions,
-        css: this.css,
-        locale: this.locale,
-        commands: this.commands.split(' '),
-        rules: []
-      }
-
-      let rules = this.rules.split('\n')
-
-      for (let rawRule of rules) {
-        let rule = {
-          allow: true,
-          path: '',
-          regex: false,
-          regexp: {
-            raw: ''
-          }
-        }
-
-        rawRule = rawRule.split(' ')
-
-        // Skip a malformed rule
-        if (rawRule.length < 2) {
-          continue
-        }
-
-        // Skip a malformed rule
-        if (rawRule[0] !== 'allow' && rawRule[0] !== 'disallow') {
-          continue
-        }
-
-        rule.allow = (rawRule[0] === 'allow')
-        rawRule.shift()
-
-        if (rawRule[0] === 'regex') {
-          rule.regex = true
-          rawRule.shift()
-          rule.regexp.raw = rawRule.join(' ')
-        } else {
-          rule.path = rawRule.join(' ')
-        }
-
-        user.rules.push(rule)
-      }
-
-      return user
-    }
-  }
-}
-</script>

assets/src/views/Users.vue

@@ -1,51 +0,0 @@
-<template>
-  <div class="dashboard">
-    <ul id="nav">
-      <li>
-        <router-link to="/settings/global">
-          <i class="material-icons">keyboard_arrow_left</i> {{ $t('settings.globalSettings') }}
-        </router-link>
-      </li>
-      <li></li>
-    </ul>
-
-    <h1>{{ $t('settings.users') }} <router-link to="/users/new"><button>{{ $t('buttons.new') }}</button></router-link></h1>
-
-    <table>
-      <tr>
-        <th>{{ $t('settings.username') }}</th>
-        <th>{{ $t('settings.admin') }}</th>
-        <th>{{ $t('settings.scope') }}</th>
-        <th></th>
-      </tr>
-
-      <tr v-for="user in users">
-        <td>{{ user.username }}</td>
-        <td><i v-if="user.admin" class="material-icons">done</i><i v-else class="material-icons">close</i></td>
-        <td>{{ user.filesystem }}</td>
-        <td><router-link :to="'/users/' + user.ID"><i class="material-icons">mode_edit</i></router-link></td>
-      </tr>
-
-    </table>
-  </div>
-</template>
-
-<script>
-import * as api from '@/utils/api'
-
-export default {
-  name: 'users',
-  data: function () {
-    return {
-      users: []
-    }
-  },
-  created () {
-    api.getUsers().then(users => {
-      this.users = users
-    }).catch(error => {
-      this.$store.commit('showError', error)
-    })
-  }
-}
-</script>

assets/src/views/errors/403.vue

@@ -1,13 +1,13 @@
-<template>
+<template>
-  <div>
+  <div>
-    <h2 class="message">
+    <h2 class="message">
-      <i class="material-icons">error</i>
+      <i class="material-icons">error</i>
-      <span>{{ $t('errors.forbidden') }}</span>
+      <span>{{ $t('errors.forbidden') }}</span>
-    </h2>
+    </h2>
-  </div>
+  </div>
-</template>
+</template>
-
+
-<script>
+<script>
-export default {name: 'forbidden'}
+export default {name: 'forbidden'}
-</script>
+</script>
-
+

assets/src/views/errors/404.vue

@@ -1,13 +1,13 @@
-<template>
+<template>
-  <div>
+  <div>
-    <h2 class="message">
+    <h2 class="message">
-      <i class="material-icons">gps_off</i>
+      <i class="material-icons">gps_off</i>
-      <span>{{ $t('errors.notFound') }}</span>
+      <span>{{ $t('errors.notFound') }}</span>
-    </h2>
+    </h2>
-  </div>
+  </div>
-</template>
+</template>
-
+
-<script>
+<script>
-export default {name: 'not-found'}
+export default {name: 'not-found'}
-</script>
+</script>
-
+

assets/src/views/errors/500.vue

@@ -1,13 +1,13 @@
-<template>
+<template>
-  <div>
+  <div>
-    <h2 class="message">
+    <h2 class="message">
-      <i class="material-icons">error_outline</i>
+      <i class="material-icons">error_outline</i>
-      <span>{{ $t('errors.internal') }}</span>
+      <span>{{ $t('errors.internal') }}</span>
-    </h2>
+    </h2>
-  </div>
+  </div>
-</template>
+</template>
-
+
-<script>
+<script>
-export default {name: 'internal-error'}
+export default {name: 'internal-error'}
-</script>
+</script>
-
+

assets/src/views/settings/Global.vue

@@ -0,0 +1,187 @@
+<template>
+  <div class="dashboard">
+    <form class="card" v-if="staticGen.length" @submit.prevent="saveStaticGen">
+      <div class="card-title">
+        <h2>{{ capitalize($store.state.staticGen) }}</h2>
+      </div>
+
+      <div class="card-content">
+        <p v-for="field in staticGen" :key="field.variable">
+          <label v-if="field.type !== 'checkbox'">{{ field.name }}</label>
+          <input v-if="field.type === 'text'" type="text" v-model.trim="field.value">
+          <input v-else-if="field.type === 'checkbox'" type="checkbox" v-model.trim="field.value">
+          <template v-if="field.type === 'checkbox'">{{ capitalize(field.name, 'caps') }}</template>
+        </p>
+      </div>
+
+      <div class="card-action">
+        <input class="flat" type="submit" :value="$t('buttons.update')">
+      </div>
+    </form>
+
+    <form class="card" @submit.prevent="saveCSS">
+      <div class="card-title">
+        <h2>{{ $t('settings.customStylesheet') }}</h2>
+      </div>
+
+      <div class="card-content">
+        <textarea v-model="css"></textarea>
+      </div>
+
+      <div class="card-action">
+        <input class="flat" type="submit" :value="$t('buttons.update')">
+      </div>
+    </form>
+
+    <form class="card" @submit.prevent="saveCommands">
+      <div class="card-title">
+        <h2>{{ $t('settings.commands') }}</h2>
+      </div>
+
+      <div class="card-content">
+        <p class="small">{{ $t('settings.commandsHelp') }}</p>
+
+        <div v-for="command in commands" :key="command.name" class="collapsible">
+          <input :id="command.name" type="checkbox">
+          <label :for="command.name">
+            <p>{{ capitalize(command.name) }}</p>
+            <i class="material-icons">arrow_drop_down</i>
+          </label>
+          <div class="collapse">
+            <textarea v-model.trim="command.value"></textarea>
+          </div>
+        </div>
+      </div>
+
+      <div class="card-action">
+        <input class="flat" type="submit" :value="$t('buttons.update')">
+      </div>
+    </form>
+
+  </div>
+</template>
+
+<script>
+import { mapState } from 'vuex'
+import { getSettings, updateSettings } from '@/utils/api'
+
+export default {
+  name: 'settings',
+  data: function () {
+    return {
+      commands: [],
+      staticGen: [],
+      css: ''
+    }
+  },
+  computed: {
+    ...mapState([ 'user' ])
+  },
+  created () {
+    getSettings()
+      .then(settings => {
+        if (this.$store.state.staticGen.length > 0) {
+          this.parseStaticGen(settings.staticGen)
+        }
+
+        for (let key in settings.commands) {
+          this.commands.push({
+            name: key,
+            value: settings.commands[key].join('\n')
+          })
+        }
+
+        this.css = settings.css
+      })
+      .catch(this.$showError)
+  },
+  methods: {
+    capitalize (name, where = '_') {
+      if (where === 'caps') where = /(?=[A-Z])/
+      let splitted = name.split(where)
+      name = ''
+
+      for (let i = 0; i < splitted.length; i++) {
+        name += splitted[i].charAt(0).toUpperCase() + splitted[i].slice(1) + ' '
+      }
+
+      return name.slice(0, -1)
+    },
+    saveCommands (event) {
+      let commands = {}
+
+      for (let command of this.commands) {
+        let value = command.value.split('\n')
+        if (value.length === 1 && value[0] === '') {
+          value = []
+        }
+
+        commands[command.name] = value
+      }
+
+      updateSettings(commands, 'commands')
+        .then(() => { this.$showSuccess(this.$t('settings.commandsUpdated')) })
+        .catch(this.$showError)
+    },
+    saveCSS (event) {
+      updateSettings(this.css, 'css')
+        .then(() => {
+          this.$showSuccess(this.$t('settings.settingsUpdated'))
+          this.$store.commit('setCSS', this.css)
+          this.$emit('css')
+        })
+        .catch(this.$showError)
+    },
+    saveStaticGen (event) {
+      let staticGen = {}
+
+      for (let field of this.staticGen) {
+        staticGen[field.variable] = field.value
+
+        if (field.original === 'array') {
+          let val = field.value.split(' ')
+          if (val[0] === '') {
+            val.shift()
+          }
+
+          staticGen[field.variable] = val
+        }
+      }
+
+      updateSettings(staticGen, 'staticGen')
+        .then(() => { this.$showSuccess(this.$t('settings.settingsUpdated')) })
+        .catch(this.$showError)
+    },
+    parseStaticGen (staticgen) {
+      for (let option of staticgen) {
+        let value = option.value
+
+        let field = {
+          name: option.name,
+          variable: option.variable,
+          type: 'text',
+          original: 'text',
+          value: value
+        }
+
+        if (Array.isArray(value)) {
+          field.original = 'array'
+          field.value = value.join(' ')
+
+          this.staticGen.push(field)
+          continue
+        }
+
+        switch (typeof value) {
+          case 'boolean':
+            field.type = 'checkbox'
+            field.original = 'boolean'
+            break
+        }
+
+        this.staticGen.push(field)
+      }
+    }
+  }
+}
+</script>