- CHG: Updated Vue CLI to 5.0.4.

- CHG: Made required changes to make it build again.
- ADD: Added bootswatch theme to align appearance with Germinate.

Author: sebastian-raubach

.eslintrc.js

@@ -3,15 +3,17 @@ module.exports = {
   env: {
     node: true
   },
-  'extends': [
+  extends: [
     'plugin:vue/essential',
     '@vue/standard'
   ],
   rules: {
     'no-console': process.env.NODE_ENV === 'production' ? 'error' : 'off',
-    'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off'
+    'no-debugger': process.env.NODE_ENV === 'production' ? 'error' : 'off',
+    'vue/no-mutating-props': 'off',
+    'vue/multi-word-component-names': 0
   },
   parserOptions: {
-    parser: 'babel-eslint'
+    parser: '@babel/eslint-parser'
   }
 }

babel.config.js

@@ -1,8 +1,10 @@
 module.exports = {
   presets: [
-    ['@vue/app',
-      {
-        useBuiltIns: 'entry'
+    // '@vue/cli-plugin-babel/preset',
+    [
+      '@babel/preset-env', {
+        'useBuiltIns': 'usage',
+        'corejs': 3
       }
     ]
   ]

package-lock.json

@@ -3,13 +3,6 @@
   "version": "4.2.1",
   "description": "",
   "author": "Sebastian Raubach",
-  "homepage": "https://ics.hutton.ac.uk/get-germinate",
-  "copyright": "Copyright 2019 The James Hutton Institute",
-  "license": "Apache-2.0",
-  "repository": {
-    "type": "git",
-    "url": "https://github.com/germinateplatform/gatekeeper-vue.git"
-  },
   "scripts": {
     "serve": "vue-cli-service serve",
     "build": "vue-cli-service build",
@@ -20,27 +13,33 @@
     "axios": "^0.26.1",
     "bootstrap": "^4.6.1",
     "bootstrap-vue": "^2.22.0",
-    "core-js": "~2.6.5",
-    "vue": "~2.6.10",
+    "bootswatch": "^4.6.1",
+    "core-js": "^3.8.3",
+    "vue": "^2.6.14",
     "vue-flag-icon": "~1.0.6",
     "vue-i18n": "^8.27.1",
     "vue-material-design-icons": "~3.2.0",
-    "vue-router": "~3.0.6",
-    "vuex": "~3.1.1",
-    "vuex-persistedstate": "~2.5.4",
+    "vue-router": "^3.5.1",
+    "vuex": "^3.6.2",
+    "vuex-persistedstate": "^4.1.0",
     "zxcvbn": "~4.4.2"
   },
   "devDependencies": {
-    "@vue/cli-plugin-babel": "~4.5.11",
-    "@vue/cli-plugin-eslint": "~4.5.11",
-    "@vue/cli-service": "~4.5.11",
-    "@vue/eslint-config-standard": "~4.0.0",
-    "babel-eslint": "~10.0.1",
-    "eslint": "~7.19.0",
-    "eslint-plugin-vue": "~7.5.0",
-    "node-sass": "~4.14.1",
-    "sass-loader": "~7.1.0",
-    "vue-template-compiler": "~2.6.10"
+    "@babel/core": "^7.12.16",
+    "@babel/eslint-parser": "^7.12.16",
+    "@vue/cli-plugin-babel": "^5.0.4",
+    "@vue/cli-plugin-eslint": "^5.0.4",
+    "@vue/cli-service": "^5.0.4",
+    "@vue/eslint-config-standard": "^6.1.0",
+    "eslint": "^7.32.0",
+    "eslint-plugin-import": "^2.25.3",
+    "eslint-plugin-node": "^11.1.0",
+    "eslint-plugin-promise": "^5.1.0",
+    "eslint-plugin-vue": "^8.0.3",
+    "path-browserify": "^1.0.1",
+    "sass": "^1.32.7",
+    "sass-loader": "^12.0.0",
+    "vue-template-compiler": "^2.6.14"
   },
   "eslintConfig": {
     "root": true,
@@ -64,5 +63,12 @@
   "browserslist": [
     "> 1%",
     "last 2 versions"
-  ]
+  ],
+  "copyright": "Copyright 2019 The James Hutton Institute",
+  "homepage": "https://ics.hutton.ac.uk/get-germinate",
+  "license": "Apache-2.0",
+  "repository": {
+    "type": "git",
+    "url": "https://github.com/germinateplatform/gatekeeper-vue.git"
+  }
 }

package.json

@@ -7,11 +7,11 @@
       <b-navbar-nav class="ml-auto mr-2">
         <b-nav-item :to="token ? '/about' : '/gk/about'">{{ $t('navbarActionAbout') }}</b-nav-item>
         <b-nav-item-dropdown text="Lang" right>
-          <template slot="button-content"><TranslateIcon class="form-icon" /></template>
+          <template slot="button-content"><MdiIcon :path="mdiTranslate" /></template>
           <b-dropdown-item v-for="language in languages" :key="language.locale" @click="onLocaleChanged(language)"><flag :squared="false" :iso="language.flag" class="flag-icon" /> {{ language.name }}</b-dropdown-item>
         </b-nav-item-dropdown>
         <b-nav-item to="/" @click="signOut" :title="$t('navbarActionSignOut')" v-if="token">
-          <LogoutVariantIcon class="form-icon" :title="$t('navbarActionSignOut')" />
+          <MdiIcon :path="mdiLogoutVariant" />
         </b-nav-item>
       </b-navbar-nav>
     </b-navbar>
@@ -40,15 +40,18 @@
 </template>
 
 <script>
-import LogoutVariantIcon from 'vue-material-design-icons/LogoutVariant'
-import TranslateIcon from 'vue-material-design-icons/Translate'
+import MdiIcon from '@/components/MdiIcon'
 import { mapState } from 'vuex'
 import { EventBus } from './event-bus.js'
 
+import { mdiLogoutVariant, mdiTranslate } from '@mdi/js'
+
 export default {
   name: 'app',
   data: function () {
     return {
+      mdiLogoutVariant,
+      mdiTranslate,
       languages: [{
         locale: 'en_GB',
         flag: 'gb',
@@ -67,32 +70,28 @@ export default {
     ])
   },
   components: {
-    LogoutVariantIcon,
-    TranslateIcon
+    MdiIcon
   },
   methods: {
     onLocaleChanged: function (language) {
       this.$i18n.locale = language.locale
       this.$store.dispatch('ON_LOCALE_CHANGED', language.locale)
     },
     signOut: function () {
-      var vm = this
-
-      var user = {
+      const user = {
         email: this.token.username,
         password: this.token.token
       }
 
-      this.apiDeleteToken(user, function (result) {
-        console.log(result)
+      this.apiDeleteToken(user, result => {
         // If it's successful, delete token, then redirect
-        vm.$store.dispatch('ON_TOKEN_CHANGED', null)
-        vm.$router.push('/gk/login')
+        this.$store.dispatch('ON_TOKEN_CHANGED', null)
+        this.$router.push('/gk/login')
       }, {
         codes: [],
-        callback: function () {
+        callback: () => {
           // If they're wrong, remove
-          vm.$store.dispatch('ON_TOKEN_CHANGED', null)
+          this.$store.dispatch('ON_TOKEN_CHANGED', null)
         }
       })
     },
@@ -108,22 +107,60 @@ export default {
     EventBus.$off('show-loading', this.toggleLoading)
   },
   mounted: function () {
-    var vm = this
-
     EventBus.$on('show-loading', this.toggleLoading)
 
     if (this.locale) {
-      this.$i18n.locale = this.languages.map(function (l) {
-        return l.locale
-      }).filter(function (l) {
-        return vm.locale === l
-      })
+      this.$i18n.locale = this.languages.map(l => l.locale).filter(l => this.locale === l)
     }
   }
 }
 </script>
 
-<style>
+<style lang="scss">
+$font-size-base: 1rem;
+$primary: #23a1d7;
+$dark:    #36363b;
+$secondary: #bdc3c7;
+$success: #27ae60;
+$info:    #3498db;
+$warning: #f39c12;
+$danger:  #e74c3c;
+$indigo:  #6610f2;
+$purple:  #6f42c1;
+$pink:    #e83e8c;
+$red:     #dc3545;
+$orange:  #fd7e14;
+$yellow:  #ffc107;
+$green:   #28a745;
+$teal:    #20c997;
+$cyan:    #17a2b8;
+$headings-font-weight: 400;
+$badge-font-size: 85%;
+$small-font-size: 70%;
+
+$container-max-widths: (
+  sm: 540px,
+  md: 720px,
+  lg: 960px,
+  xl: 1140px,
+  xxl: 1400px
+);
+
+$grid-breakpoints: (
+  xs: 0,
+  sm: 576px,
+  md: 768px,
+  lg: 992px,
+  xl: 1200px,
+  xxl: 1500px
+);
+
+@import '~bootswatch/dist/cosmo/variables';
+@import '~bootstrap/scss/bootstrap';
+@import '~bootstrap-vue/src/index.scss';
+@import '~bootswatch/dist/cosmo/bootswatch';
+@import '@/assets/css/custom.scss';
+
 #app {
   flex: 1 0 auto;
   min-height: calc(100vh - 37px);

src/App.vue

@@ -1,6 +1,3 @@
-@import "../../../node_modules/bootstrap/scss/bootstrap.scss";
-@import "../../../node_modules/bootstrap-vue/dist/bootstrap-vue.css";
-
 body {
   font-size: .875rem;
 }

src/assets/css/custom.scss

@@ -2,11 +2,11 @@ import store from './store/store'
 
 export default {
   loggedIn () {
-    var token = store.getters.token
+    const token = store.getters.token
     return token && this.tokenStillValid()
   },
   tokenStillValid () {
-    var token = store.getters.token
+    const token = store.getters.token
     if (token) {
       return new Date().getTime() - token.createdOn <= token.lifetime
     } else {

src/auth.js

@@ -164,7 +164,7 @@ export default {
         this.$nextTick(() => this.$refs.feedbackModal.show())
       } else {
         EventBus.$emit('show-loading', true)
-        var decision = {
+        const decision = {
           requestId: this.currentRow.id,
           decision: 'REJECT',
           feedback: this.rejectionReason
@@ -188,7 +188,7 @@ export default {
     },
     onApprove: function (row) {
       EventBus.$emit('show-loading', true)
-      var decision = {
+      const decision = {
         requestId: row.id,
         decision: 'APPROVE'
       }

src/components/UserRequestTable.vue

@@ -52,10 +52,7 @@ export default {
   },
   methods: {
     show () {
-      var vm = this
-      this.$nextTick(function () {
-        vm.$refs.addDatabaseModal.show()
-      })
+      this.$nextTick(() => this.$refs.addDatabaseModal.show())
     },
     onAddDatabaseClicked: function (event) {
       event.preventDefault()
@@ -66,11 +63,10 @@ export default {
       }
 
       // Send the new database to the server
-      var vm = this
-      this.apiPostDatabase(this.database, function (result) {
-        vm.$refs.addDatabaseModal.hide()
-        vm.$emit('databases-updated')
-        vm.resetDatabase()
+      this.apiPostDatabase(this.database, result => {
+        this.$refs.addDatabaseModal.hide()
+        this.$emit('databases-updated')
+        this.resetDatabase()
         EventBus.$emit('stats-count-changed')
       })
     },

src/components/modal/AddDatabaseModal.vue

@@ -42,10 +42,7 @@ export default {
   },
   methods: {
     show () {
-      var vm = this
-      this.$nextTick(function () {
-        vm.$refs.addInstitutionModal.show()
-      })
+      this.$nextTick(() => this.$refs.addInstitutionModal.show())
     },
     onAddInstitutionClicked: function (event) {
       event.preventDefault()
@@ -56,10 +53,9 @@ export default {
       }
 
       // Send the new institution to the server
-      var vm = this
-      this.apiPostInstitution(this.institution, function (result) {
-        vm.$refs.addInstitutionModal.hide()
-        vm.$emit('institutions-updated')
+      this.apiPostInstitution(this.institution, result => {
+        this.$refs.addInstitutionModal.hide()
+        this.$emit('institutions-updated')
       })
     }
   }