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/_helpers.scss";
-  @import "@/styles/_mixins.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,66 +47,75 @@
 
 <script>
 
-import {emailExists} from '../hep-client/index';
+  import {emailExists} from '../hep-client/index';
-import HELLO_EMAIL_MUTATION from '@/graphql/gql/local/mutations/helloEmail.gql';
+  import HELLO_EMAIL_MUTATION from '@/graphql/gql/local/mutations/helloEmail.gql';
+  import LoadingButton from '@/components/LoadingButton';
 
-export default {
+  export default {
-  components: {},
+    components: {
-
+      LoadingButton
-  data() {
-    return {
-      email: '',
-      submitted: false
-    };
-  },
-
-  methods: {
-    validateBeforeSubmit() {
-      this.$validator.validate().then(result => {
-        this.submitted = true;
-        if (result) {
-          emailExists(this.email).then((response) => {
-            let redirectRouteName = 'login';
-
-            if (response.data) {
-              redirectRouteName = 'registration';
-            }
-            this.$apollo.mutate({
-              mutation: HELLO_EMAIL_MUTATION,
-              variables: {
-                helloEmail: this.email
-              }
-            }).then(() => this.$router.push({name: redirectRouteName, query: this.$route.query}));
-          })
-          .catch(() => {
-            this.registrationError = 'Es ist ein Fehler aufgetreten. Bitte versuchen Sie es nochmals.';
-          });
-        }
-      });
     },
-    resetForm() {
+
-      this.email = '';
+    data() {
-      this.submitted = false;
+      return {
-      this.$validator.reset();
+        email: '',
+        submitted: false,
+        loading: false
+      };
+    },
+
+    methods: {
+      validateBeforeSubmit() {
+        this.$validator.validate().then(result => {
+          this.submitted = true;
+          if (result) {
+            this.loading = true;
+            emailExists(this.email).then((response) => {
+              let redirectRouteName = 'login';
+
+              if (response.data) {
+                redirectRouteName = 'registration';
+              }
+              this.$apollo.mutate({
+                mutation: HELLO_EMAIL_MUTATION,
+                variables: {
+                  helloEmail: this.email
+                }
+              }).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.';
+              });
+          }
+        });
+      },
+      resetForm() {
+        this.email = '';
+        this.submitted = false;
+        this.$validator.reset();
+      }
     }
-  }
+  };
-};
 </script>
 
 <style scoped lang="scss">
-@import "@/styles/_variables.scss";
+  @import "@/styles/_variables.scss";
-@import "@/styles/_mixins.scss";
+  @import "@/styles/_mixins.scss";
 
-.text-link {
+  .text-link {
-  font-family: $sans-serif-font-family;
+    font-family: $sans-serif-font-family;
-  color: $color-brand;
+    color: $color-brand;
-}
+  }
-
+
-.actions {
+  .actions {
-  &__reset {
+    &__reset {
-    display: inline-block;
+      display: inline-block;
-    margin-left: $large-spacing;
+      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";