Add loading button component

client/src/components/LoadingButton.vue

@@ -0,0 +1,46 @@
+<template>
+  <button class="loading-button button button--primary button--big">
+    <template v-if="!loading">{{ label }}</template>
+    <loading-icon
+      class="loading-button__icon"
+      v-else/>
+  </button>
+</template>
+
+<script>
+  import LoadingIcon from '@/components/icons/LoadingIcon';
+
+  export default {
+    props: {
+      loading: {
+        type: Boolean,
+        default: false
+      },
+      label: {
+        type: String,
+        default: ''
+      }
+    },
+    components: {
+      LoadingIcon
+    }
+  };
+</script>
+
+<style scoped lang="scss">
+  @import "@/styles/_helpers.scss";
+
+  .loading-button {
+    height: 52px;
+    min-width: 100px;
+    display: inline-flex;
+    justify-content: center;
+
+    &__icon {
+      width: 14px;
+      height: 14px;
+      margin: 0 auto;
+      @include spin;
+    }
+  }
+</style>

client/src/components/content-blocks/assignment/SubmissionInput.vue

@@ -44,8 +44,7 @@
 </script>
 
 <style scoped lang="scss">
-  @import "@/styles/_variables.scss";
-  @import "@/styles/_mixins.scss";
+  @import "@/styles/_helpers.scss";
 
   .submission-form {
     display: flex;
@@ -75,14 +74,8 @@
       fill: $color-silver-dark;
     }
 
-    @keyframes spin {
-      100% {
-        transform: rotate(360deg);
-      }
-    }
-
     &__saving-icon {
-      animation: spin 2.5s linear infinite;
+      @include spin;
     }
   }
 </style>

client/src/pages/hello.vue

@@ -34,7 +34,12 @@
       <div class="actions">
         <button
           class="button button--primary button--big actions__submit"
-          data-cy="hello-button">Los geht's</button>
+          data-cy="hello-button">Los geht's
+        </button>
+        <loading-button
+          :loading="loading"
+          label="Los geht's"/>
+        {{ loading }}
       </div>
     </form>
   </div>
@@ -42,16 +47,20 @@
 
 <script>
 
-import {emailExists} from '../hep-client/index';
-import HELLO_EMAIL_MUTATION from '@/graphql/gql/local/mutations/helloEmail.gql';
+  import {emailExists} from '../hep-client/index';
+  import HELLO_EMAIL_MUTATION from '@/graphql/gql/local/mutations/helloEmail.gql';
+  import LoadingButton from '@/components/LoadingButton';
 
-export default {
-  components: {},
+  export default {
+    components: {
+      LoadingButton
+    },
 
     data() {
       return {
         email: '',
-      submitted: false
+        submitted: false,
+        loading: false
       };
     },
 
@@ -60,6 +69,7 @@ export default {
         this.$validator.validate().then(result => {
           this.submitted = true;
           if (result) {
+            this.loading = true;
             emailExists(this.email).then((response) => {
               let redirectRouteName = 'login';
 
@@ -71,9 +81,13 @@ export default {
                 variables: {
                   helloEmail: this.email
                 }
-            }).then(() => this.$router.push({name: redirectRouteName, query: this.$route.query}));
+              }).then(() => {
+                this.$router.push({name: redirectRouteName, query: this.$route.query});
+                this.loading = false;
+              });
             })
               .catch(() => {
+                this.loading = false;
                 this.registrationError = 'Es ist ein Fehler aufgetreten. Bitte versuchen Sie es nochmals.';
               });
           }
@@ -85,23 +99,23 @@ export default {
         this.$validator.reset();
       }
     }
-};
+  };
 </script>
 
 <style scoped lang="scss">
-@import "@/styles/_variables.scss";
-@import "@/styles/_mixins.scss";
+  @import "@/styles/_variables.scss";
+  @import "@/styles/_mixins.scss";
 
-.text-link {
+  .text-link {
     font-family: $sans-serif-font-family;
     color: $color-brand;
-}
+  }
 
-.actions {
+  .actions {
     &__reset {
       display: inline-block;
       margin-left: $large-spacing;
     }
-}
+  }
 
 </style>

client/src/styles/_animations.scss

@@ -0,0 +1,9 @@
+@keyframes spin {
+  100% {
+    transform: rotate(360deg);
+  }
+}
+
+@mixin spin {
+  animation: spin 2.5s linear infinite;
+}

client/src/styles/_helpers.scss

@@ -0,0 +1,4 @@
+@import 'functions';
+@import 'variables';
+@import 'mixins';
+@import 'animations';

client/src/styles/_reset.scss

@@ -30,7 +30,7 @@ footer, header, hgroup, menu, nav, section {
 }
 
 body {
-  line-height: 1;
+  line-height: normal;
 }
 
 ol, ul {

client/src/styles/_typography.scss

@@ -26,6 +26,7 @@ p {
 
 a {
   font-size: toRem(18px);
+  box-sizing: border-box;
 }
 
 h1 {
@@ -63,7 +64,7 @@ h5 {
 input, textarea, select, button {
   font-family: $sans-serif-font-family;
   font-weight: $font-weight-regular;
-
+  box-sizing: border-box;
 }
 
 .small-emph {

client/src/styles/main.scss

@@ -5,7 +5,7 @@
  */
 @import "reset";
 @import "typography";
-@import "variables";
+@import "helpers";
 @import "default-layout";
 @import "buttons";
 @import "forms";