GH-206 Cleanup frontend source code (Resolve #206)

dzikoysk · Aug 13, 2020 · bfb6fa0 · bfb6fa0
1 parent c44bdc5
commit bfb6fa0
Show file tree

Hide file tree

Showing 23 changed files with 528 additions and 372 deletions.
diff --git a/reposilite-backend/src/main/resources/frontend/index.html b/reposilite-backend/src/main/resources/frontend/index.html
@@ -1,3 +1,9 @@
-<!DOCTYPE html><html lang=en><head><meta charset=utf-8><meta http-equiv=X-UA-Compatible content="IE=edge"><meta name=viewport content="width=device-width,initial-scale=1"><title>Reposilite</title><link rel=icon href="data:;base64,iVBORw0KGgo="><link href="https://fonts.googleapis.com/css2?family=Manrope:wght@300;500&display=swap" rel=stylesheet><script src=https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.0/js/all.min.js></script><script>window.REPOSILITE_BASE_PATH = '{{REPOSILITE.BASE_PATH}}'
-      window.REPOSILITE_VUE_BASE_PATH = '{{REPOSILITE.VUE_BASE_PATH}}'
-      window.REPOSILITE_MESSAGE = '{{REPOSILITE.MESSAGE}}'</script><link href={{REPOSILITE.VUE_BASE_PATH}}/js/app.js rel=preload as=script></head><body><noscript><strong>We're sorry but reposilite-frontend doesn't work properly without JavaScript enabled. Please enable it to continue.</strong></noscript><div id=app></div><script src={{REPOSILITE.VUE_BASE_PATH}}/js/app.js></script></body></html>
+<!DOCTYPE html><html lang=en><head><meta charset=utf-8><meta http-equiv=X-UA-Compatible content="IE=edge"><meta name=viewport content="width=device-width,initial-scale=1"><title>{{REPOSILITE.TITLE}}</title><meta name=description content={{REPOSILITE.DESCRIPTION}}><meta name=twitter:card content=summary><meta name=twitter:title content={{REPOSILITE.TITLE}}><meta name=twitter:description content={{REPOSILITE.DESCRIPTION}}><meta property=og:title content={{REPOSILITE.TITLE}}><meta property=og:site_name content={{REPOSILITE.TITLE}}><meta property=og:type content=website><meta property=og:description content={{REPOSILITE.DESCRIPTION}}><link rel=icon href="data:;base64,iVBORw0KGgo="><link href="https://fonts.googleapis.com/css2?family=Manrope:wght@300;500&display=swap" rel=stylesheet><script src=https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.0/js/all.min.js></script><script>// don't assign placeholders to window
+      if (!'{{REPOSILITE.BASE_PATH}}'.includes('REPOSILITE.BASE_PATH')) {
+        window.REPOSILITE_BASE_PATH = '{{REPOSILITE.BASE_PATH}}'
+        window.REPOSILITE_VUE_BASE_PATH = '{{REPOSILITE.VUE_BASE_PATH}}'
+        window.REPOSILITE_TITLE = '{{REPOSILITE.TITLE}}'
+        window.REPOSILITE_DESCRIPTION = '{{REPOSILITE.DESCRIPTION}}'
+        window.REPOSILITE_ACCENT_COLOR = '{{REPOSILITE.ACCENT_COLOR}}'
+        window.REPOSILITE_MESSAGE = '{{REPOSILITE.MESSAGE}}'
+      }</script><link href={{REPOSILITE.VUE_BASE_PATH}}/js/app.js rel=preload as=script></head><body><noscript><strong>We're sorry but reposilite-frontend doesn't work properly without JavaScript enabled. Please enable it to continue.</strong></noscript><div id=app></div><script src={{REPOSILITE.VUE_BASE_PATH}}/js/app.js></script></body></html>
diff --git a/reposilite-backend/src/main/resources/frontend/js/app.js b/reposilite-backend/src/main/resources/frontend/js/app.js
diff --git a/reposilite-frontend/.eslintrc.js b/reposilite-frontend/.eslintrc.js
@@ -23,6 +23,9 @@ module.exports = {
     'plugin:vue/essential',
     '@vue/standard'
   ],
+  plugins: [
+    'pug'
+  ],
   parserOptions: {
     parser: 'babel-eslint'
   },

diff --git a/reposilite-frontend/package.json b/reposilite-frontend/package.json
@@ -14,6 +14,7 @@
     "axios": "^0.19.2",
     "core-js": "^3.6.5",
     "downloadjs": "^1.4.7",
+    "mime-types": "^2.1.27",
     "pretty-bytes": "^5.3.0",
     "tailwindcss": "^1.4.6",
     "vue": "^2.6.11",
@@ -37,6 +38,7 @@
     "eslint-plugin-import": "^2.20.2",
     "eslint-plugin-node": "^11.1.0",
     "eslint-plugin-promise": "^4.2.1",
+    "eslint-plugin-pug": "^1.2.2",
     "eslint-plugin-standard": "^4.0.1",
     "eslint-plugin-vue": "^6.2.2",
     "html-webpack-inline-source-plugin": "^0.0.10",
@@ -54,20 +56,6 @@
     "webpack-cli": "^3.3.11",
     "webpack-dev-server": "^3.11.0"
   },
-  "eslintConfig": {
-    "root": true,
-    "env": {
-      "node": true
-    },
-    "extends": [
-      "plugin:vue/essential",
-      "eslint:recommended"
-    ],
-    "parserOptions": {
-      "parser": "babel-eslint"
-    },
-    "rules": {}
-  },
   "browserslist": [
     "> 1%",
     "last 2 versions",

diff --git a/reposilite-frontend/public/index.html b/reposilite-frontend/public/index.html
@@ -20,14 +20,32 @@
     <meta charset="utf-8">
     <meta http-equiv="X-UA-Compatible" content="IE=edge">
     <meta name="viewport" content="width=device-width,initial-scale=1.0">
-    <title>Reposilite</title>
+    <!-- Reposilite Description -->
+    <title>{{REPOSILITE.TITLE}}</title>
+    <meta name="description" content="{{REPOSILITE.DESCRIPTION}}">
+    <!-- Twitter -->
+    <meta name="twitter:card" content="summary">
+    <meta name="twitter:title" content="{{REPOSILITE.TITLE}}">
+    <meta name="twitter:description" content="{{REPOSILITE.DESCRIPTION}}">
+    <!-- OpenGraph -->
+    <meta property="og:title" content="{{REPOSILITE.TITLE}}">
+    <meta property="og:site_name" content="{{REPOSILITE.TITLE}}">
+    <meta property="og:type" content="website">
+    <meta property="og:description" content="{{REPOSILITE.DESCRIPTION}}">
+    <!-- Assets -->
     <link rel="icon" href="data:;base64,iVBORw0KGgo=">
     <link href="https://fonts.googleapis.com/css2?family=Manrope:wght@300;500&display=swap" rel="stylesheet">
     <script src="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.13.0/js/all.min.js"></script>
     <script>
-      window.REPOSILITE_BASE_PATH = '{{REPOSILITE.BASE_PATH}}'
-      window.REPOSILITE_VUE_BASE_PATH = '{{REPOSILITE.VUE_BASE_PATH}}'
-      window.REPOSILITE_MESSAGE = '{{REPOSILITE.MESSAGE}}'
+      // don't assign placeholders to window
+      if (!'{{REPOSILITE.BASE_PATH}}'.includes('REPOSILITE.BASE_PATH')) {
+        window.REPOSILITE_BASE_PATH = '{{REPOSILITE.BASE_PATH}}'
+        window.REPOSILITE_VUE_BASE_PATH = '{{REPOSILITE.VUE_BASE_PATH}}'
+        window.REPOSILITE_TITLE = '{{REPOSILITE.TITLE}}'
+        window.REPOSILITE_DESCRIPTION = '{{REPOSILITE.DESCRIPTION}}'
+        window.REPOSILITE_ACCENT_COLOR = '{{REPOSILITE.ACCENT_COLOR}}'
+        window.REPOSILITE_MESSAGE = '{{REPOSILITE.MESSAGE}}'
+      }
     </script>
   </head>
   <body>

diff --git a/reposilite-frontend/src/App.vue b/reposilite-frontend/src/App.vue
@@ -19,12 +19,27 @@
 </template>
 
 <script>
+import Vue from 'vue'
+
 export default {
   name: 'App',
+  data () {
+    return {
+      reposilite: Vue.prototype.$reposilite
+    }
+  },
+  metaInfo () {
+    return {
+      title: this.reposilite.title
+    }
+  },
   mounted () {
-    console.log('REPOSILITE_BASE_PATH: ' + window.REPOSILITE_BASE_PATH)
-    console.log('REPOSILITE_VUE_BASE_PATH: ' + window.REPOSILITE_VUE_BASE_PATH)
-    console.log('REPOSILITE_MESSAGE: ' + window.REPOSILITE_MESSAGE)
+    console.log('REPOSILITE_MESSAGE: ' + this.reposilite.message)
+    console.log('REPOSILITE_BASE_PATH: ' + this.reposilite.basePath)
+    console.log('REPOSILITE_VUE_BASE_PATH: ' + this.reposilite.vueBasePath)
+    console.log('REPOSILITE_TITLE: ' + this.reposilite.title)
+    console.log('REPOSILITE_DESCRIPTION: ' + this.reposilite.description)
+    console.log('REPOSILITE_ACCENT_COLOR: ' + this.reposilite.accentColor)
   }
 }
 </script>
diff --git a/reposilite-frontend/src/components/Wave.vue b/reposilite-frontend/src/components/Wave.vue
@@ -15,31 +15,33 @@
   -->
 
 <template lang="pug">
-    svg.w-full.h-264.lg_h-168(viewBox="0 0 1080 640" preserveAspectRatio="none")
-        path(
-            :fill="this.accentColor"
-            fill-opacity="1"
-            d=" \
-                M 0,260 \
-                C 640,330 650,0 1080,170 \
-                L 1440 0 \
-                L 0,0 \
-                Z \
-        ")
-        path(
-            fill="#212121"
-            fill-opacity="1"
-            d=" \
-                M 0,230 \
-                C 620,310 650,50 1080,150 \
-                L 1440 0 \
-                L 0,0 \
-                Z \
-        ")
+  svg.w-full.h-264.lg_h-168(viewBox="0 0 1080 640" preserveAspectRatio="none")
+    path(
+      :fill="this.accentColor"
+      fill-opacity="1"
+      d=" \
+        M 0,260 \
+        C 640,330 650,0 1080,170 \
+        L 1440 0 \
+        L 0,0 \
+        Z \
+    ")
+    path(
+      fill="#212121"
+      fill-opacity="1"
+      d=" \
+        M 0,230 \
+        C 620,310 650,50 1080,150 \
+        L 1440 0 \
+        L 0,0 \
+        Z \
+    ")
 </template>
 
 <script>
 export default {
-  props: ['accentColor']
+  props: {
+    accentColor: String
+  }
 }
 </script>
diff --git a/reposilite-frontend/src/components/browser/FileBrowser.vue b/reposilite-frontend/src/components/browser/FileBrowser.vue
@@ -0,0 +1,83 @@
+<template lang="pug">
+  .browser
+    .flex.justify-between.py-4
+      h1.text-xl
+        | Index of
+        span.ml-2
+          span(v-for="(element, idx) in splitQualifier()")
+            router-link(:to="pathFragmentUri(idx)") {{ element }}
+            span /
+        router-link(v-if="!isDashboard()" :to="'/dashboard' + this.qualifier")
+          span.ml-3(:style="'color: ' + configuration.accentColor")
+            i.fas.fa-feather-alt
+      router-link(v-if="!isRoot()" :to='prefix + parentPath()') ← Back
+    FileEntry(
+      v-if="hasFiles()"
+      v-for="file in response.files"
+      :key="file.name"
+      :prefix="prefix"
+      :file="file"
+      :auth="auth")
+    h1(v-if="isEmpty()") Empty directory
+    h1(v-if="!hasFiles()").font-bold {{ response.message }}
+    notifications(group="index" position="center top")
+</template>
+
+<script>
+import Vue from 'vue'
+import FileEntry from './FileEntry'
+
+export default {
+  props: {
+    qualifier: String,
+    prefix: String,
+    auth: Object
+  },
+  data () {
+    return {
+      configuration: Vue.prototype.$reposilite,
+      response: []
+    }
+  },
+  components: {
+    FileEntry
+  },
+  watch: {
+    $route: {
+      immediate: true,
+      handler: function () {
+        this.qualifier = this.getQualifier()
+
+        this.api(this.qualifier, this.auth)
+          .then(response => (this.response = response.data))
+          .catch(err => {
+            this.$notify({
+              group: 'index',
+              type: 'error',
+              title: err.response.data.message
+            })
+          })
+      }
+    }
+  },
+  methods: {
+    pathFragmentUri (index) {
+      return this.splitQualifier()
+        .slice(0, index + 1)
+        .join('/')
+    },
+    hasFiles () {
+      return this.response.files !== undefined
+    },
+    isEmpty () {
+      return this.hasFiles() && this.response.files.length === 0
+    },
+    isDashboard () {
+      return this.prefix === '/dashboard'
+    },
+    isRoot () {
+      return this.qualifier === undefined || this.qualifier.length < 2
+    }
+  }
+}
+</script>
diff --git a/...ite-frontend/src/components/FileEntry.vue → ...tend/src/components/browser/FileEntry.vue b/...ite-frontend/src/components/FileEntry.vue → ...tend/src/components/browser/FileEntry.vue
@@ -15,19 +15,24 @@
   -->
 
 <template lang="pug">
-    .file-preview.w-full
-        a(v-if="file.type === 'file'" v-on:click="download" target="_blank" ).cursor-pointer
-            FileEntryContent(:file="file")
-        router-link(v-else :to="uri()")
-            FileEntryContent(:file="file")
+  .file-preview.w-full
+    a(v-if="file.type === 'file'" v-on:click="handleDownload" target="_blank" ).cursor-pointer
+      FileEntryContent(:file="file")
+    router-link(v-else :to="fileUri()")
+      FileEntryContent(:file="file")
 </template>
 
 <script>
-import download from 'downloadjs'
 import FileEntryContent from './FileEntryContent'
+import download from 'downloadjs'
+import mime from 'mime-types'
 
 export default {
-  props: ['prefix', 'auth', 'file'],
+  props: {
+    prefix: String,
+    auth: Object,
+    file: Object
+  },
   components: {
     FileEntryContent
   },
@@ -38,21 +43,28 @@ export default {
     this.qualifier = this.getQualifier()
   },
   methods: {
-    download () {
-      const fileUrl = this.normalize(this.url() + this.qualifier.substring(1)) + this.file.name
-
-      this.$http.get(fileUrl, {
-        responseType: 'blob',
-        auth: {
-          username: this.auth.alias,
-          password: this.auth.token
-        }
-      }).then(response => {
-        const content = response.headers['content-type']
-        download(response.data, this.file.name, content)
-      }).catch(err => console.log(err))
+    handleDownload () {
+      this.$http
+        .get(this.fileUrl(), {
+          responseType: 'blob',
+          headers: {
+            'Content-Type': mime.lookup(this.file.name)
+          },
+          auth: {
+            username: this.auth.alias,
+            password: this.auth.token
+          }
+        })
+        .then(response => {
+          const content = response.headers['content-type']
+          download(response.data, this.file.name, content)
+        })
+        .catch(err => console.log(err))
+    },
+    fileUrl () {
+      return this.baseUrl() + this.qualifier.substring(1) + this.file.name
     },
-    uri () {
+    fileUri () {
       return this.prefix + this.qualifier + this.file.name
     }
   }

diff --git a/...ntend/src/components/FileEntryContent.vue → ...c/components/browser/FileEntryContent.vue b/...ntend/src/components/FileEntryContent.vue → ...c/components/browser/FileEntryContent.vue
@@ -15,14 +15,14 @@
   -->
 
 <template lang="pug">
-    .py-2.px-6.border.flex
-        .pr-5
-            i(v-if="file.type === 'directory'").fas.fa-folder
-            i(v-if="file.type === 'file'").fas.fa-file
-        .flex.justify-between.w-full
-            h1(v-if="file.type === 'file'") {{ file.name }}
-            h1(v-else).font-bold {{ file.name }}
-            p(v-if="file.type === 'file'") {{ fileSize }}
+  .py-2.px-6.border.flex
+    .pr-5
+      i(v-if="file.type === 'directory'").fas.fa-folder
+      i(v-if="file.type === 'file'").fas.fa-file
+    .flex.justify-between.w-full
+      h1(v-if="file.type === 'file'") {{ file.name }}
+      h1(v-else).font-bold {{ file.name }}
+      p(v-if="file.type === 'file'") {{ fileSize }}
 </template>
 
 <script>