Add button with loading spinner component

2020-08-04 11:31:32 +02:00 · 2020-08-04 11:31:32 +02:00 · bb50fc75a0
parent 6360f1950a
commit bb50fc75a0
6 changed files with 76 additions and 31 deletions
--- a/client/package-lock.json
+++ b/client/package-lock.json
@ -11673,7 +11673,8 @@
            "ansi-regex": {
              "version": "2.1.1",
              "bundled": true,
-              "dev": true
+              "dev": true,
+              "optional": true
            },
            "aproba": {
              "version": "1.2.0",
@ -11716,7 +11717,8 @@
            "code-point-at": {
              "version": "1.1.0",
              "bundled": true,
-              "dev": true
+              "dev": true,
+              "optional": true
            },
            "concat-map": {
              "version": "0.0.1",
@ -11727,7 +11729,8 @@
            "console-control-strings": {
              "version": "1.1.0",
              "bundled": true,
-              "dev": true
+              "dev": true,
+              "optional": true
            },
            "core-util-is": {
              "version": "1.0.2",
@ -11844,7 +11847,8 @@
            "inherits": {
              "version": "2.0.3",
              "bundled": true,
-              "dev": true
+              "dev": true,
+              "optional": true
            },
            "ini": {
              "version": "1.3.5",
@ -11856,6 +11860,7 @@
              "version": "1.0.0",
              "bundled": true,
              "dev": true,
+              "optional": true,
              "requires": {
                "number-is-nan": "^1.0.0"
              }
@ -11878,12 +11883,14 @@
            "minimist": {
              "version": "0.0.8",
              "bundled": true,
-              "dev": true
+              "dev": true,
+              "optional": true
            },
            "minipass": {
              "version": "2.3.5",
              "bundled": true,
              "dev": true,
+              "optional": true,
              "requires": {
                "safe-buffer": "^5.1.2",
                "yallist": "^3.0.0"
@ -11902,6 +11909,7 @@
              "version": "0.5.1",
              "bundled": true,
              "dev": true,
+              "optional": true,
              "requires": {
                "minimist": "0.0.8"
              }
@ -11982,7 +11990,8 @@
            "number-is-nan": {
              "version": "1.0.1",
              "bundled": true,
-              "dev": true
+              "dev": true,
+              "optional": true
            },
            "object-assign": {
              "version": "4.1.1",
@ -11994,6 +12003,7 @@
              "version": "1.4.0",
              "bundled": true,
              "dev": true,
+              "optional": true,
              "requires": {
                "wrappy": "1"
              }
@ -12079,7 +12089,8 @@
            "safe-buffer": {
              "version": "5.1.2",
              "bundled": true,
-              "dev": true
+              "dev": true,
+              "optional": true
            },
            "safer-buffer": {
              "version": "2.1.2",
@ -12115,6 +12126,7 @@
              "version": "1.0.2",
              "bundled": true,
              "dev": true,
+              "optional": true,
              "requires": {
                "code-point-at": "^1.0.0",
                "is-fullwidth-code-point": "^1.0.0",
@ -12134,6 +12146,7 @@
              "version": "3.0.1",
              "bundled": true,
              "dev": true,
+              "optional": true,
              "requires": {
                "ansi-regex": "^2.0.0"
              }
@ -12177,12 +12190,14 @@
            "wrappy": {
              "version": "1.0.2",
              "bundled": true,
-              "dev": true
+              "dev": true,
+              "optional": true
            },
            "yallist": {
              "version": "3.0.3",
              "bundled": true,
-              "dev": true
+              "dev": true,
+              "optional": true
            }
          }
        },
--- a/client/src/components/LoadingButton.vue
+++ b/client/src/components/LoadingButton.vue
@ -1,5 +1,7 @@
 <template>
-  <button class="loading-button button button--primary button--big">
+  <button
+    :disabled="loading"
+    class="loading-button button button--primary button--big">
    <template v-if="!loading">{{ label }}</template>
    <loading-icon
      class="loading-button__icon"
@ -41,6 +43,7 @@
      height: 14px;
      margin: 0 auto;
      @include spin;
+      fill: $color-brand;
    }
  }
 </style>
--- a/client/src/pages/hello.vue
+++ b/client/src/pages/hello.vue
@ -32,14 +32,12 @@
        >{{ errors.first('email') }}</small>
      </div>
      <div class="actions">
-        <button
-          class="button button--primary button--big actions__submit"
-          data-cy="hello-button">Los geht's
-        </button>
        <loading-button
          :loading="loading"
-          label="Los geht's"/>
-        {{ loading }}
+          label="Los geht's"
+          class="actions__submit"
+          data-cy="hello-button"
+        />
      </div>
    </form>
  </div>
--- a/client/src/pages/license-activation.vue
+++ b/client/src/pages/license-activation.vue
@ -39,9 +39,12 @@
          >{{ error }}</small>
        </div>
        <div class="actions">
-          <button
-            class="button button--primary button--big actions__submit"
-            data-cy="coupon-button">Coupon abschicken</button>
+          <loading-button
+            :loading="loading"
+            class="actions__submit"
+            data-cy="coupon-button"
+            label="Coupon abschicken"
+          />
        </div>
      </form>
    </section>
@ -64,9 +67,11 @@
 import me from '@/mixins/me';
 import REDEEM_COUPON from '@/graphql/gql/mutations/redeemCoupon.gql';
 import ME_QUERY from '@/graphql/gql/meQuery.gql';
+import LoadingButton from '@/components/LoadingButton';

 export default {
  mixins: [me],
+  components: {LoadingButton},

  data() {
    return {
@ -78,7 +83,8 @@ export default {
        email: ''
      },
      teacherEditionUrl: `${process.env.HEP_URL}/myskillbox-lehrpersonen`,
-      studentEditionUrl: `${process.env.HEP_URL}/myskillbox-fur-lernende`
+      studentEditionUrl: `${process.env.HEP_URL}/myskillbox-fur-lernende`,
+      loading: false
    };
  },
  methods: {
@ -87,6 +93,7 @@ export default {
        this.submitted = true;
        let that = this;
        if (result) {
+          this.loading = true;
          this.$apollo.mutate({
            mutation: REDEEM_COUPON,
            variables: {
@ -101,6 +108,7 @@ export default {
              }
            ) {
              if (coupon.success) {
+                that.loading = false;
                that.couponErrors = [];
                that.$apollo.query({
                    query: ME_QUERY,
@ -109,11 +117,15 @@ export default {
              }
            }
          }).catch(({message}) => {
+            this.loading = false;
            if (message.indexOf('invalid_coupon') > -1) {
              that.couponErrors = ['Der angegebene Coupon-Code ist ungültig.'];
            } else {
              that.couponErrors = ['Es ist ein Fehler aufgetreten. Bitte versuchen Sie es nochmals oder kontaktieren Sie den Administrator.'];
            }
+          })
+          .finally(() => {
+            this.loading = false;
          });
        }
      });
--- a/client/src/pages/login.vue
+++ b/client/src/pages/login.vue
@ -36,11 +36,15 @@
        >{{ error }}</small>
      </div>
      <div class="actions">
-        <button
-          class="button button--primary button--big actions__submit"
-          data-cy="login-button">Anmelden</button>
+        <loading-button
+          :loading="loading"
+          class="actions__submit"
+          data-cy="login-button"
+          label="Anmelden"
+        />
        <router-link
          :to="{name: 'hello'}"
+          tag="button"
          class="button button--big actions__submit back-button">Abbrechen
        </router-link>
        <router-link
@ -56,15 +60,17 @@
  import HELLO_EMAIL from '@/graphql/gql/local/helloEmail.gql';
  import LOGIN_MUTATION from '@/graphql/gql/mutations/login.gql';
  import {login} from '@/hep-client/index';
+  import LoadingButton from '@/components/LoadingButton';

  export default {
-    components: {},
+    components: {LoadingButton},

    data() {
      return {
        password: '',
        passwordErrors: [],
-        submitted: false
+        submitted: false,
+        loading: false
      };
    },

@ -73,8 +79,10 @@
        this.$validator.validate().then(result => {
          this.submitted = true;
          if (result) {
+            this.loading = true;
            login(this.helloEmail.email, this.password)
              .then((response) => {
+                this.loading = false;
                if (response.status === 200) {
                  this.mySkillboxLogin(response.data);
                } else {
@ -82,6 +90,7 @@
                }
              })
              .catch((error) => {
+                this.loading = false;
                if (error.response.data.message && error.response.data.message === 'Sie haben sich nicht korrekt eingeloggt oder Ihr Konto ist vor\u00fcbergehend deaktiviert.') {
                  this.passwordErrors = ['Die von Ihnen eingegebene E-Mail-Adresse und das Passwort passen nicht zusammen.'];
                } else {
@ -175,13 +184,12 @@
      display: inline-block;
      margin-left: auto;
      line-height: 19px;;
-      display: inline-block;
      padding: $small-spacing;
    }
  }

  .back-button {
-    font-size: 1rem;
+    //font-size: 1rem;
    line-height: normal;
    margin-left: $medium-spacing;
  }
--- a/client/src/pages/registration.vue
+++ b/client/src/pages/registration.vue
@ -249,9 +249,12 @@
          v-if="registrationError">{{ registrationError }}</small>
      </div>
      <div class="actions">
-        <button
-          class="button button--primary button--big actions__submit"
-          data-cy="register-button">Konto erstellen</button>
+        <loading-button
+          :loading="loading"
+          class="actions__submit"
+          label="Konto erstellen"
+          data-cy="register-button"
+        />
      </div>
    </form>
  </div>
@ -262,6 +265,7 @@
 import {register} from '../hep-client/index';
 import HELLO_EMAIL from '@/graphql/gql/local/helloEmail.gql';
 import Checkbox from '@/components/Checkbox';
+import LoadingButton from '@/components/LoadingButton';

 function initialData() {
  return {
@ -290,13 +294,15 @@ function initialData() {

 export default {
  components: {
+    LoadingButton,
    Checkbox
  },

  data() {
    return Object.assign(
      {
-        helloEmail: ''
+        helloEmail: '',
+        loading: false,
      },
      initialData()
    );
@ -307,6 +313,7 @@ export default {
      this.$validator.validate().then(result => {
        this.submitted = true;
        if (result) {
+          this.loading = true;
          const registrationData = {
            customer: {
              prefix: this.prefix,
@ -331,11 +338,13 @@ export default {
          };

          register(registrationData).then((response) => {
+            this.loading = false;
            if (response.data.id && response.data.id > 0) {
              this.$router.push({name: 'checkEmail'});
            }
          })
          .catch((error) => {
+            this.loading = false;
            console.warn(error);
            if (error.response.data.message) {
              switch (error.response.data.message) {