Merge pull request #257 from gradido/243-vue-loader-component

243 vue loader component - varante 2

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/Pages/Login.vue

@@ -67,7 +67,7 @@
                   </b-alert>
 
                   <!-- <b-form-checkbox v-model="model.rememberMe">{{ $t('site.login.remember')}}</b-form-checkbox> -->
-                  <div class="text-center">
+                  <div class="text-center" ref="submitButton">
                     <base-button type="secondary" native-type="submit" class="my-4">
                       {{ $t('site.login.signin') }}
                     </base-button>
@@ -110,6 +110,9 @@ export default {
   },
   methods: {
     async onSubmit() {
+      let loader = this.$loading.show({
+        container: this.$refs.submitButton,
+      })
       const result = await loginAPI.login(this.model.email, this.model.password)
       if (result.success) {
         this.$store.dispatch('login', {
@@ -117,11 +120,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
     },
   },

frontend/yarn.lock

@@ -13348,6 +13348,11 @@ vue-loader@^15.7.0:
     vue-hot-reload-api "^2.3.0"
     vue-style-loader "^4.1.0"
 
+vue-loading-overlay@^3.4.2:
+  version "3.4.2"
+  resolved "https://registry.yarnpkg.com/vue-loading-overlay/-/vue-loading-overlay-3.4.2.tgz#34792a83218df1d35dff50121ce9fac2114f1c38"
+  integrity sha512-xcB+NPjl76eA0uggm707x3ZFgrNosZXpynHipyS3K+rrK1NztOV49R1LY+/4ij5W1KYANp7eRI2EIHrxCpmWAw==
+
 vue-moment@^4.1.0:
   version "4.1.0"
   resolved "https://registry.yarnpkg.com/vue-moment/-/vue-moment-4.1.0.tgz#092a8ff723a96c6f85a0a8e23ad30f0bf320f3b0"