loading spinner on login

frontend/package.json

@@ -69,6 +69,7 @@
     "vue-good-table": "^2.21.3",
     "vue-i18n": "^8.22.4",
     "vue-jest": "^3.0.7",
+    "vue-loading-overlay": "^3.4.2",
     "vue-moment": "^4.1.0",
     "vue-qrcode": "^0.3.5",
     "vue-qrcode-reader": "^2.3.16",

frontend/src/plugins/dashboard-plugin.js

@@ -37,6 +37,10 @@ import 'vue-good-table/dist/vue-good-table.css'
 
 import VueMoment from 'vue-moment'
 
+import Loading from 'vue-loading-overlay'
+// import the styles
+import 'vue-loading-overlay/dist/vue-loading.css'
+
 Object.keys(rules).forEach((rule) => {
   extend(rule, {
     ...rules[rule], // copies rule configuration
@@ -56,6 +60,7 @@ export default {
     Vue.use(VueQrcodeReader)
     Vue.use(VueQrcode)
     Vue.use(VueFlatPickr)
+    Vue.use(Loading)
     configure({
       classes: {
         valid: 'is-valid',

frontend/src/views/Layout/AuthLayout_gdd.vue

@@ -1,5 +1,6 @@
 <template>
   <div class="main-content">
+    <loading :active.sync="isLoading" :is-full-page="fullPage"></loading>
     <template>
       <div class="main-content">
         <router-view></router-view>
@@ -9,9 +10,24 @@
   </div>
 </template>
 <script>
+// Import component
+import Loading from 'vue-loading-overlay'
+// Import stylesheet
+import 'vue-loading-overlay/dist/vue-loading.css'
+
 import ContentFooter from './ContentFooter.vue'
+
 export default {
+  data() {
+    return {
+      fullPage: true,
+    }
+  },
+  props: {
+    isLoading: { type: Boolean, default: false },
+  },
   components: {
+    Loading,
     ContentFooter,
   },
 }

frontend/src/views/Pages/Login.vue

@@ -110,6 +110,7 @@ export default {
   },
   methods: {
     async onSubmit() {
+      let loader = this.$loading.show()
       const result = await loginAPI.login(this.model.email, this.model.password)
       if (result.success) {
         this.$store.dispatch('login', {
@@ -117,11 +118,14 @@ export default {
           email: this.model.email,
         })
         this.$router.push('/overview')
+        loader.hide()
       } else {
+        loader.hide()
         this.loginfail = true
       }
     },
     closeAlert() {
+      loader.hide()
       this.loginfail = false
     },
   },