Update dependencies

app/.babelrc

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

app/package.json

@@ -5,32 +5,34 @@
   "author": "Christoph Wiechert <wio@psitrax.de>",
   "private": true,
   "scripts": {
-    "dev": "cross-env NODE_ENV=development webpack-dev-server --inline --hot --host 0.0.0.0",
-    "build": "cross-env NODE_ENV=production webpack --progress --hide-modules"
+    "dev": "cross-env NODE_ENV=development webpack-dev-server",
+    "build": "cross-env NODE_ENV=production webpack --progress --hide-modules",
+    "analyze": "cross-env ANALYZE=true npm run build"
   },
   "dependencies": {
     "babel-polyfill": "^6.26.0",
     "crypto-js": "^3.1.9-1",
-    "drag-drop": "^2.13.2",
-    "tus-js-client": "^1.4.5",
-    "uuid": "^3.1.0",
-    "vue": "^2.5.8",
-    "vue-awesome": "^2.3.4",
+    "drag-drop": "^4.2.0",
+    "tus-js-client": "^1.5.2",
+    "uuid": "^3.3.2",
+    "vue": "^2.5.21",
+    "vue-awesome": "^3.2.0",
     "vuex": "^3.0.1"
   },
   "devDependencies": {
-    "babel-core": "^6.26.0",
-    "babel-loader": "^7.1.2",
-    "babel-plugin-transform-runtime": "^6.23.0",
-    "babel-preset-env": "^1.6.1",
-    "babel-preset-stage-2": "^6.24.1",
-    "cross-env": "^5.1.1",
-    "css-loader": "^0.28.7",
-    "file-loader": "^1.1.5",
-    "pug": "^2.0.0-rc.4",
-    "vue-loader": "^13.5.0",
-    "vue-template-compiler": "^2.5.8",
-    "webpack": "^3.8.1",
-    "webpack-dev-server": "^2.9.4"
+    "@babel/core": "^7.2.0",
+    "@babel/preset-env": "^7.2.0",
+    "babel-loader": "^8.0.4",
+    "cross-env": "^5.2.0",
+    "css-loader": "^2.0.0",
+    "file-loader": "^2.0.0",
+    "pug": "^2.0.3",
+    "pug-plain-loader": "^1.0.0",
+    "vue-loader": "^15.4.2",
+    "vue-template-compiler": "^2.5.21",
+    "webpack": "^4.27.1",
+    "webpack-bundle-analyzer": "^3.0.3",
+    "webpack-cli": "^3.1.2",
+    "webpack-dev-server": "^3.1.10"
   }
 }

app/src/Admin.vue

@@ -1,7 +1,7 @@
 <template lang="pug">
   .download-app
     a.btn.btn-sm.btn-info.btn-new-session(@click='login()', title='Refresh', v-if="loggedIn")
-      icon(name="refresh")
+      icon(name="sync-alt")
 
     .alert.alert-danger(v-show="error")
       strong
@@ -15,7 +15,7 @@
         strong Access denied!
       |
       button.btn.btn-primary(type="submit", :disabled="!password")
-        icon.fa-fw(name="sign-in")
+        icon.fa-fw(name="sign-in-alt")
         |  login
 
     div(v-if="loggedIn")
@@ -63,8 +63,8 @@
 
 <script>
   import 'vue-awesome/icons/exclamation-triangle';
-  import 'vue-awesome/icons/refresh';
-  import 'vue-awesome/icons/sign-in';
+  import 'vue-awesome/icons/sync-alt';
+  import 'vue-awesome/icons/sign-in-alt';
   import 'vue-awesome/icons/key';
 
 

app/src/Download.vue

@@ -1,7 +1,7 @@
 <template lang="pug">
   .download-app
     a.btn.btn-sm.btn-info.btn-new-session(@click='newSession()', title='New Upload')
-      icon.fa-fw(name="cloud-upload")
+      icon.fa-fw(name="cloud-upload-alt")
       span.hidden-xs  new upload
     .alert.alert-danger(v-show="error")
       strong
@@ -61,7 +61,7 @@
   import Clipboard from './common/Clipboard.vue';
   import PreviewModal from './Download/PreviewModal.vue';
 
-  import 'vue-awesome/icons/cloud-upload';
+  import 'vue-awesome/icons/cloud-upload-alt';
   import 'vue-awesome/icons/exclamation-triangle';
   import 'vue-awesome/icons/copy';
   import 'vue-awesome/icons/check';
@@ -123,7 +123,7 @@
         aEl.style.display = 'none';
         document.body.appendChild(aEl);
         aEl.click();
-        aEl.remove();
+        document.body.removeChild(aEl);
         file.downloaded = true;
       },
 

app/src/Download/PreviewModal.vue

@@ -11,7 +11,7 @@
           a.btn.btn-sm.btn-default(title="next", @click="next", v-show="currentIndex < files.length-1")
             icon(name="arrow-right")
           a.btn.btn-sm.btn-default(title="toggle line wrap", @click="lineWrap = !lineWrap", :class="{active:lineWrap}", v-show="current.previewType === 'text'")
-            icon(name="rotate-left", flip="vertical")
+            icon(name="undo-alt", flip="vertical")
     div(slot="body")
       div(v-if="current.previewType === 'image'", style="text-align:center")
         img(:src="current.url", style="max-width: 100%; height:auto")
@@ -26,7 +26,7 @@
   import Modal from '../common/Modal.vue';
   import 'vue-awesome/icons/arrow-left';
   import 'vue-awesome/icons/arrow-right';
-  import 'vue-awesome/icons/rotate-left';
+  import 'vue-awesome/icons/undo-alt';
 
   export default {
     components: { Modal },

app/src/Upload.vue

@@ -1,7 +1,7 @@
 <template lang="pug">
   .upload-app#uploadApp
     a.btn.btn-sm.btn-info.btn-new-session(@click='newSession()', title='New Upload')
-      icon.fa-fw(name="cloud-upload")
+      icon.fa-fw(name="cloud-upload-alt")
       span.hidden-xs  new upload
     .alert.alert-danger(v-show="error")
       strong
@@ -43,12 +43,12 @@
 
 <script type="text/babel">
   "use strict";
-  import {mapState, mapGetters} from 'vuex';
+  import { mapState, mapGetters } from 'vuex';
 
   import Settings from './Upload/Settings.vue';
   import Files from './Upload/Files.vue';
   import Clipboard from './common/Clipboard.vue'
-  import 'vue-awesome/icons/cloud-upload';
+  import 'vue-awesome/icons/cloud-upload-alt';
   import 'vue-awesome/icons/upload';
   import 'vue-awesome/icons/check';
   import 'vue-awesome/icons/spinner';
@@ -68,7 +68,7 @@
       ...mapState(['error', 'disabled', 'state']),
       ...mapState('upload', ['sid', 'files']),
       ...mapGetters('upload', ['percentUploaded', 'shareUrl']),
-      mailLnk: function(){
+      mailLnk: function() {
         return this.$store.state.config
           && this.$store.state.config.mailTemplate
           && this.$store.state.config.mailTemplate.replace('%%URL%%', this.shareUrl);
@@ -77,9 +77,9 @@
 
     watch: {
       state: function(val) {
-        if(val === 'uploaded' || val === 'uploadError') {
+        if (val === 'uploaded' || val === 'uploadError') {
           const el = document.getElementById('uploadApp');
-          if(!el || !el.scrollIntoView) return;
+          if (!el || !el.scrollIntoView) return;
           el.scrollIntoView(true);
         }
       }
@@ -87,14 +87,10 @@
 
     methods: {
       newSession() {
-        if(!confirm('Create a new upload session?')) return;
+        if (!confirm('Create a new upload session?')) return;
         document.location.reload();
       }
     }
 
   }
 </script>
-
-<style>
-
-</style>

app/src/common/FileIcon.vue

@@ -7,12 +7,12 @@
 
 
 <script type="text/babel">
-  import 'vue-awesome/icons/file-image-o';
-  import 'vue-awesome/icons/file-text-o';
-  import 'vue-awesome/icons/file-video-o';
-  import 'vue-awesome/icons/file-audio-o';
-  import 'vue-awesome/icons/file-archive-o';
-  import 'vue-awesome/icons/file-o';
+  import 'vue-awesome/icons/regular/file-image';
+  import 'vue-awesome/icons/regular/file-alt';
+  import 'vue-awesome/icons/regular/file-video';
+  import 'vue-awesome/icons/regular/file-audio';
+  import 'vue-awesome/icons/regular/file-archive';
+  import 'vue-awesome/icons/regular/file';
 
   export default {
     props: ['file'],
@@ -20,14 +20,14 @@
     computed: {
       iconClass() {
         const type = this.file.type || this.file.metadata && this.file.metadata.type;
-        if(!type) return 'file-o';
-        if(type.startsWith('image')) return 'file-image-o';
-        if(type.startsWith('text')) return 'file-text-o';
-        if(type.startsWith('video')) return 'file-video-o';
-        if(type.startsWith('audio')) return 'file-audio-o';
-        if(type === 'application/pdf') return 'file-pdf-o';
-        if(type.startsWith('application')) return 'file-archive-o';
-        return 'file-o';
+        if(!type) return 'regular/file';
+        if(type.startsWith('image')) return 'regular/file-image';
+        if(type.startsWith('text')) return 'regular/file-alt';
+        if(type.startsWith('video')) return 'regular/file-video';
+        if(type.startsWith('audio')) return 'regular/file-audio';
+        if(type === 'application/pdf') return 'regular/file-pdf';
+        if(type.startsWith('application')) return 'regular/file-archive';
+        return 'regular/file';
       },
       isImageBlob() {
         if(!URL && !webkitURL) return false;

app/src/upload.js

@@ -1,9 +1,11 @@
-if(!String.prototype.startsWith) {
-  String.prototype.startsWith = function(searchString, position) {
-    position = position || 0;
-    return this.indexOf(searchString, position) === position;
-  };
-}
+// import "babel-polyfill";
+
+// if(!String.prototype.startsWith) {
+//   String.prototype.startsWith = function(searchString, position) {
+//     position = position || 0;
+//     return this.indexOf(searchString, position) === position;
+//   };
+// }
 
 import Vue from 'vue';
 import Upload from './Upload.vue';

app/webpack.config.js

@@ -1,5 +1,7 @@
 const path = require('path');
 const webpack = require('webpack');
+const BundleAnalyzerPlugin = require("webpack-bundle-analyzer").BundleAnalyzerPlugin;
+const { VueLoaderPlugin } = require('vue-loader');
 const execSync = require('child_process').execSync;
 
 let commitShaId;
@@ -8,7 +10,10 @@ try {
   commitShaId = '#'+execSync('git rev-parse HEAD').toString().substr(0,10);
 } catch (e) {}
 
+const mode = process.env.NODE_ENV || 'development';
+
 module.exports = {
+  mode,
   entry: {
     upload: './src/upload.js',
     download: './src/download.js',
@@ -19,29 +24,54 @@ module.exports = {
     publicPath: '/app/',
     filename: '[name].js'
   },
-  plugins: [
-    new webpack.optimize.CommonsChunkPlugin({
-      filename: "common.js",
-      name: "common"
-    }),
-    new webpack.DefinePlugin({
-      'process.env.NODE_ENV': JSON.stringify(process.env.NODE_ENV !== 'development' ? 'production' : 'development'),
-      PSITRANSFER_VERSION: JSON.stringify(process.env.PSITRANSFER_VERSION || commitShaId || 'dev')
-    }),
-  ],
+  optimization: {
+    splitChunks: {
+      chunks: 'all',
+      name: 'common'
+    }
+  },
+  // devtool: 'source-map',
+  devtool: 'none',
   module: {
     rules: [
       {
         test: /\.vue$/,
         loader: 'vue-loader',
-        options: {
-          loaders: {}
-        }
       },
       {
         test: /\.js$/,
-        loader: 'babel-loader',
-        exclude: /node_modules/
+        exclude: /node_modules\/(?!(vue-awesome|)\/).*/,
+        use: {
+          loader: 'babel-loader',
+          options: {
+            presets: [['@babel/preset-env', {
+              modules: false,
+              "useBuiltIns": "usage",
+              "targets": ["last 2 version", "ie 11", "not dead"]
+            }]],
+          }
+        }
+      },
+      {
+        test: /\.pug$/,
+        oneOf: [
+          // this applies to `<template lang="pug">` in Vue components
+          {
+            resourceQuery: /^\?vue/,
+            use: ['pug-plain-loader']
+          },
+          // this applies to pug imports inside JavaScript
+          {
+            use: ['raw-loader', 'pug-plain-loader']
+          }
+        ]
+      },
+      {
+        test: /\.css$/,
+        use: [
+          'vue-style-loader',
+          'css-loader',
+        ]
       },
       {
         test: /\.(png|jpg|gif|svg)$/,
@@ -54,13 +84,21 @@ module.exports = {
   },
   resolve: {
     alias: {
-      'vue$': process.env.NODE_ENV !== 'development' ? 'vue/dist/vue.runtime.min.js' : 'vue/dist/vue.runtime.js'
+      'vue$': mode !== 'development' ? 'vue/dist/vue.runtime.min.js' : 'vue/dist/vue.runtime.js'
     }
   },
+  plugins: [
+    new VueLoaderPlugin(),
+    new webpack.DefinePlugin({
+      'process.env.NODE_ENV': JSON.stringify(mode),
+      PSITRANSFER_VERSION: JSON.stringify(process.env.PSITRANSFER_VERSION || commitShaId || 'dev')
+    }),
+  ],
   devServer: {
     historyApiFallback: true,
-    noInfo: true,
+    noInfo: false,
     disableHostCheck: true,
+    host: '0.0.0.0',
     proxy: [
       // Proxy requests to BE in DEV mode
       // https://webpack.github.io/docs/webpack-dev-server.html#proxy
@@ -73,24 +111,8 @@ module.exports = {
   performance: {
     hints: false
   },
-  devtool: '#eval-source-map'
 };
 
-if (process.env.NODE_ENV !== 'development') {
-  module.exports.devtool = '#source-map';
-  let commit;
-
-  // http://vue-loader.vuejs.org/en/workflow/production.html
-  module.exports.plugins = [
-    ...module.exports.plugins,
-    new webpack.optimize.UglifyJsPlugin({
-      sourceMap: true,
-      compress: {
-        warnings: false
-      }
-    }),
-    new webpack.LoaderOptionsPlugin({
-      minimize: true
-    })
-  ];
+if(process.env.ANALYZE) {
+  module.exports.plugins.push(new BundleAnalyzerPlugin());
 }