Update node modules to build with node 18

.drone.yml

@@ -9,7 +9,7 @@ platform:
 
 steps:
 - name: frontend
-  image: node:14-alpine3.15
+  image: node:18-alpine3.15
   commands:
   - apk --no-cache add python2 build-base tar
   - yarn config set network-timeout 100000
@@ -216,7 +216,7 @@ platform:
 
 steps:
 - name: frontend
-  image: node:14-alpine3.15
+  image: node:18-alpine3.15
   commands:
   - apk --no-cache add python2 build-base
   - yarn config set network-timeout 100000
@@ -378,7 +378,7 @@ platform:
 
 steps:
 - name: frontend
-  image: node:14-alpine3.15
+  image: node:18-alpine3.15
   commands:
   - apk --no-cache add python2 build-base
   - yarn config set network-timeout 100000

ui/package.json

@@ -9,35 +9,37 @@
     "i18n:report": "vue-cli-service i18n:report --src './src/**/*.?(js|vue)' --locales './src/locales/**/*.json'"
   },
   "dependencies": {
-    "axios": "^0.26.0",
-    "bootstrap": "^4.5.3",
-    "bootstrap-vue": "^2.18.1",
-    "vue": "^2.6.14",
-    "vue-i18n": "^8.22.1",
-    "vue-router": "^3.4.8",
-    "vuex": "^3.5.1"
+    "axios": "^0.27.0",
+    "bootstrap": "^4.6.2",
+    "bootstrap-vue": "^2.22.0",
+    "sass": "^1.54.0",
+    "vue": "^2.7.8",
+    "vue-i18n": "^8.27.2",
+    "vue-router": "^3.5.4",
+    "vuex": "^3.6.2"
   },
   "devDependencies": {
+    "@babel/eslint-parser": "^7.18.9",
     "@intlify/vue-i18n-loader": "^3.3.0",
-    "@vue/cli-plugin-eslint": "^4.5.17",
-    "@vue/cli-plugin-router": "^4.5.17",
-    "@vue/cli-plugin-vuex": "^4.5.17",
-    "@vue/cli-service": "^4.5.17",
-    "@vue/eslint-config-standard": "^6.1.0",
-    "babel-eslint": "^10.0.1",
-    "eslint": "^7.32.0",
-    "eslint-plugin-import": "^2.25.4",
+    "@vue/cli-plugin-eslint": "^5.0.8",
+    "@vue/cli-plugin-router": "^5.0.8",
+    "@vue/cli-plugin-vuex": "^5.0.8",
+    "@vue/cli-service": "^5.0.8",
+    "@vue/eslint-config-standard": "^7.0.0",
+    "eslint": "^8.0.1",
+    "eslint-config-standard": "^17.0.0",
+    "eslint-plugin-import": "^2.25.2",
+    "eslint-plugin-n": "^15.0.0",
     "eslint-plugin-node": "^11.1.0",
     "eslint-plugin-promise": "^6.0.0",
     "eslint-plugin-standard": "^5.0.0",
-    "eslint-plugin-vue": "^7.20.0",
-    "lint-staged": "^12.3.7",
-    "node-sass": "^5.0.0",
-    "register-service-worker": "^1.7.1",
-    "sass-loader": "^10.0.5",
+    "eslint-plugin-vue": "^9.3.0",
+    "lint-staged": "^13.0.3",
+    "register-service-worker": "^1.7.2",
+    "sass-loader": "^13.0.2",
     "vue-cli-plugin-i18n": "^2.3.1",
-    "vue-template-compiler": "^2.6.14",
-    "workbox-webpack-plugin": "^6.5.2"
+    "vue-template-compiler": "^2.7.8",
+    "workbox-webpack-plugin": "^6.5.3"
   },
   "eslintConfig": {
     "root": true,
@@ -46,11 +48,11 @@
     },
     "extends": [
       "plugin:vue/recommended",
-      "@vue/standard"
+      "standard"
+    ],
+    "plugins": [
+      "vue"
     ],
-    "parserOptions": {
-      "parser": "babel-eslint"
-    },
     "rules": {
       "vue/html-closing-bracket-newline": "off",
       "vue/max-attributes-per-line": "off"
@@ -63,7 +65,8 @@
   },
   "browserslist": [
     "> 1%",
-    "last 2 versions"
+    "last 2 versions",
+    "not dead"
   ],
   "gitHooks": {
     "pre-commit": "lint-staged"

ui/src/App.vue

@@ -33,7 +33,7 @@
 
 <template>
   <div id="app">
-    <Header />
+    <h-header />
 
     <router-view class="flex-grow-1" />
 
@@ -75,7 +75,7 @@ import { mapGetters } from 'vuex'
 
 export default {
   components: {
-    Header: () => import('@/components/Header')
+    hHeader: () => import('@/components/hHeader')
   },
 
   data: function () {

ui/src/app.scss

@@ -79,7 +79,7 @@ footer {
     font-family: 'Montserrat';
     font-style: normal;
     font-weight: 400;
-    src: local('Montserrat Regular'), local('Montserrat-Regular'), url(/fonts/Montserrat.woff2) format('woff2');
+    src: local('Montserrat Regular'), local('Montserrat-Regular'), url(../public/fonts/Montserrat.woff2) format('woff2');
     unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+2000-206F, U+2074, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD;
     font-display: swap;
 }
@@ -87,8 +87,8 @@ footer {
 @font-face {
   font-family: 'Fantasque Sans Mono';
   src: local('Fantasque Sans Mono Bold'),
-       url('/fonts/FantasqueSansMono-Bold.woff2') format('woff2'),
-       url('/fonts/FantasqueSansMono-Bold.woff') format('woff');
+       url('../public/fonts/FantasqueSansMono-Bold.woff2') format('woff2'),
+       url('../public/fonts/FantasqueSansMono-Bold.woff') format('woff');
   font-weight: 700;
   font-style: normal;
   font-display: swap;
@@ -96,8 +96,8 @@ footer {
 @font-face {
   font-family: 'Fantasque Sans Mono';
   src: local('Fantasque Sans Mono BoldItalic'),
-       url('/fonts/FantasqueSansMono-BoldItalic.woff2') format('woff2'),
-       url('/fonts/FantasqueSansMono-BoldItalic.woff') format('woff');
+       url('../public/fonts/FantasqueSansMono-BoldItalic.woff2') format('woff2'),
+       url('../public/fonts/FantasqueSansMono-BoldItalic.woff') format('woff');
   font-weight: 700;
   font-style: italic;
   font-display: swap;
@@ -105,8 +105,8 @@ footer {
 @font-face {
   font-family: 'Fantasque Sans Mono';
   src: local('Fantasque Sans Mono Italic'),
-       url('/fonts/FantasqueSansMono-Italic.woff2') format('woff2'),
-       url('/fonts/FantasqueSansMono-Italic.woff') format('woff');
+       url('../public/fonts/FantasqueSansMono-Italic.woff2') format('woff2'),
+       url('../public/fonts/FantasqueSansMono-Italic.woff') format('woff');
   font-weight: 400;
   font-style: italic;
   font-display: swap;
@@ -115,8 +115,8 @@ footer {
   font-family: 'Fantasque Sans Mono';
   src: local('Fantasque Sans Mono'),
        local('Fantasque Sans Mono Regular'),
-       url('/fonts/FantasqueSansMono-Regular.woff2') format('woff2'),
-       url('/fonts/FantasqueSansMono-Regular.woff') format('woff');
+       url('../public/fonts/FantasqueSansMono-Regular.woff2') format('woff2'),
+       url('../public/fonts/FantasqueSansMono-Regular.woff') format('woff');
   font-weight: 400;
   font-style: normal;
   font-display: swap;

ui/src/components/ZoneList.vue

@@ -37,7 +37,7 @@
       <b-spinner variant="primary" :label="$t('common.spinning')" class="my-2 mr-3" /> <i18n :path="loadingStr" />
     </div>
     <slot v-else-if="domains.length === 0" name="no-domain" />
-    <div v-else v-for="(domains, group) in groups" :key="group" :class="Object.keys(groups).length != 1?'border-top':''" style="margin-top: 1.4em">
+    <div v-for="(gdomains, group) in groups" v-else :key="group" :class="Object.keys(groups).length != 1?'border-top':''" style="margin-top: 1.4em">
       <div v-if="Object.keys(groups).length != 1" class="text-center" style="height: 1em">
         <h3 class="d-inline-block px-1" style="background: white; position: relative; top: -.65em">
           <i18n v-if="group === 'undefined'" path="domaingroups.no-group" />
@@ -45,7 +45,7 @@
         </h3>
       </div>
       <h-list
-        :items="domains"
+        :items="gdomains"
         :button="button"
         @click="$emit('click', $event)"
       >

ui/src/components/hList.vue

@@ -40,8 +40,8 @@
       <slot name="empty" />
     </b-list-group-item>
     <b-list-group-item
-      v-else
       v-for="(item, index) in items"
+      v-else
       :key="index"
       :active="isActive(item)"
       :button="button"

ui/src/main.js

@@ -88,7 +88,7 @@ import {
   ToastPlugin
 } from 'bootstrap-vue'
 
-import HLogo from '@/components/logo.vue'
+import HLogo from '@/components/hLogo.vue'
 
 import './registerServiceWorker.js'
 

ui/src/mixins/addDomainToProvider.js

@@ -45,7 +45,7 @@ export default {
       axios
         .post('/api/domains', {
           id_provider: provider._id,
-          domain: domain
+          domain
         })
         .then(
           (response) => {

ui/src/router/index.js

@@ -40,28 +40,28 @@ const routes = [
     path: '/',
     name: 'home',
     component: function () {
-      return import(/* webpackChunkName: "Index" */ '@/views/Index.vue')
+      return import(/* webpackChunkName: "Index" */ '@/views/hIndex.vue')
     }
   },
   {
     path: '/fr/',
     name: 'home-fr',
     component: function () {
-      return import(/* webpackChunkName: "Index" */ '@/views/Index.vue')
+      return import(/* webpackChunkName: "Index" */ '@/views/hIndex.vue')
     }
   },
   {
     path: '/en/',
     name: 'home-en',
     component: function () {
-      return import(/* webpackChunkName: "Index" */ '@/views/Index.vue')
+      return import(/* webpackChunkName: "Index" */ '@/views/hIndex.vue')
     }
   },
   {
     path: '/login',
     name: 'login',
     component: function () {
-      return import(/* webpackChunkName: "login" */ '../views/login.vue')
+      return import(/* webpackChunkName: "login" */ '../views/hLogin.vue')
     },
     meta: {
       guest: true
@@ -71,7 +71,7 @@ const routes = [
     path: '/join',
     name: 'signup',
     component: function () {
-      return import(/* webpackChunkName: "signup" */ '../views/signup.vue')
+      return import(/* webpackChunkName: "signup" */ '../views/hSignup.vue')
     },
     meta: {
       guest: true
@@ -81,7 +81,7 @@ const routes = [
     path: '/email-validation',
     name: 'email-validation',
     component: function () {
-      return import(/* webpackChunkName: "signup" */ '../views/email-validation.vue')
+      return import(/* webpackChunkName: "signup" */ '../views/hEmailValidation.vue')
     },
     meta: {
       guest: true
@@ -91,7 +91,7 @@ const routes = [
     path: '/forgotten-password',
     name: 'forgotten-password',
     component: function () {
-      return import(/* webpackChunkName: "forgotten-password" */ '../views/forgotten-password.vue')
+      return import(/* webpackChunkName: "forgotten-password" */ '../views/hForgottenPassword.vue')
     },
     meta: {
       guest: true
@@ -101,7 +101,7 @@ const routes = [
     path: '/onboarding',
     name: 'onboarding',
     component: function () {
-      return import(/* webpackChunkName: "home" */ '../views/onboarding.vue')
+      return import(/* webpackChunkName: "home" */ '../views/hOnboarding.vue')
     },
     meta: {
       requiresAuth: true
@@ -111,7 +111,7 @@ const routes = [
     path: '/me',
     name: 'me',
     component: function () {
-      return import(/* webpackChunkName: "me" */ '../views/me.vue')
+      return import(/* webpackChunkName: "me" */ '../views/hMe.vue')
     },
     meta: {
       requiresAuth: true
@@ -121,7 +121,7 @@ const routes = [
     path: '/domains',
     name: 'domains',
     component: function () {
-      return import(/* webpackChunkName: "home" */ '../views/home.vue')
+      return import(/* webpackChunkName: "home" */ '../views/hHome.vue')
     },
     meta: {
       requiresAuth: true
@@ -131,7 +131,7 @@ const routes = [
     path: '/domains/:domain',
     name: 'domain-abstract',
     component: function () {
-      return import(/* webpackChunkName: "domain" */ '../views/domain.vue')
+      return import(/* webpackChunkName: "domain" */ '../views/hDomain.vue')
     },
     meta: {
       requiresAuth: true
@@ -141,7 +141,7 @@ const routes = [
     path: '/domains/:domain/new',
     name: 'domain-new',
     component: function () {
-      return import(/* webpackChunkName: "domain" */ '../views/domain-new.vue')
+      return import(/* webpackChunkName: "domain" */ '../views/hDomainNew.vue')
     },
     meta: {
       requiresAuth: true
@@ -151,7 +151,7 @@ const routes = [
     path: '/providers',
     name: 'provider-list',
     component: function () {
-      return import(/* webpackChunkName: "provider" */ '../views/provider-list.vue')
+      return import(/* webpackChunkName: "provider" */ '../views/hProviderList.vue')
     },
     meta: {
       requiresAuth: true
@@ -160,14 +160,14 @@ const routes = [
   {
     path: '/providers/new',
     component: function () {
-      return import(/* webpackChunkName: "provider-new" */ '../views/provider-new.vue')
+      return import(/* webpackChunkName: "provider-new" */ '../views/hProviderNew.vue')
     },
     children: [
       {
         path: '',
         name: 'provider-new-choice',
         component: function () {
-          return import(/* webpackChunkName: "provider-new" */ '../views/provider-new-choice.vue')
+          return import(/* webpackChunkName: "provider-new" */ '../views/hProviderNewChoice.vue')
         },
         meta: {
           requiresAuth: true
@@ -177,7 +177,7 @@ const routes = [
         path: ':provider/:state',
         name: 'provider-new-state',
         component: function () {
-          return import(/* webpackChunkName: "provider-new" */ '../views/provider-new-state.vue')
+          return import(/* webpackChunkName: "provider-new" */ '../views/hProviderNewState.vue')
         },
         meta: {
           requiresAuth: true
@@ -189,7 +189,7 @@ const routes = [
     path: '/providers/:provider',
     name: 'provider-update',
     component: function () {
-      return import(/* webpackChunkName: "provider" */ '../views/provider.vue')
+      return import(/* webpackChunkName: "provider" */ '../views/hProvider.vue')
     },
     meta: {
       requiresAuth: true
@@ -199,7 +199,7 @@ const routes = [
     path: '/providers/:provider/domains',
     name: 'provider-update-domains',
     component: function () {
-      return import(/* webpackChunkName: "home" */ '../views/home.vue')
+      return import(/* webpackChunkName: "home" */ '../views/hHome.vue')
     },
     meta: {
       requiresAuth: true
@@ -209,35 +209,35 @@ const routes = [
     path: '/tools/client',
     name: 'tools-client',
     component: function () {
-      return import(/* webpackChunkName: "tools-client" */ '../views/tools-client.vue')
+      return import(/* webpackChunkName: "tools-client" */ '../views/hToolsClient.vue')
     }
   },
   {
     path: '/tools/client/:domain',
     name: 'tools-client-domain',
     component: function () {
-      return import(/* webpackChunkName: "tools-client" */ '../views/tools-client.vue')
+      return import(/* webpackChunkName: "tools-client" */ '../views/hToolsClient.vue')
     }
   },
   {
     path: '/resolver',
     name: 'tools-resolver',
     component: function () {
-      return import(/* webpackChunkName: "tools-client" */ '../views/tools-client.vue')
+      return import(/* webpackChunkName: "tools-client" */ '../views/hToolsClient.vue')
     }
   },
   {
     path: '/resolver/:domain',
     name: 'tools-resolver-domain',
     component: function () {
-      return import(/* webpackChunkName: "tools-client" */ '../views/tools-client.vue')
+      return import(/* webpackChunkName: "tools-client" */ '../views/hToolsClient.vue')
     }
   },
   {
     path: '*',
     name: 'non-found',
     component: function () {
-      return import(/* webpackChunkName: "not-found" */ '../views/404.vue')
+      return import(/* webpackChunkName: "not-found" */ '../views/hNotFound.vue')
     }
   }
 ]

ui/src/views/hIndex.vue

@@ -37,8 +37,8 @@
 
 <script>
 import { mapGetters } from 'vuex'
-import Home from '@/views/home'
-import Loading from '@/views/loading'
+import Home from '@/views/hHome'
+import Loading from '@/views/hLoading'
 
 export default {
   computed: {

ui/src/views/hOnboarding.vue

@@ -66,7 +66,7 @@
             </template>
           </i18n>
         </p>
-        <provider-list v-if="!noProvider" emit-new-if-empty no-label @new-provider="noProvider = true" @provider-selected="selectExistingProvider" style="max-height: 20rem; overflow-y: auto" />
+        <provider-list v-if="!noProvider" emit-new-if-empty no-label style="max-height: 20rem; overflow-y: auto" @new-provider="noProvider = true" @provider-selected="selectExistingProvider" />
         <h-new-provider-selector v-else @provider-selected="selectNewProvider" />
       </b-card>
     </b-card-group>