From 6360f1950aef7cf46254e2a3da3d07f3f12e5a8b Mon Sep 17 00:00:00 2001
From: Ramon Wenger <ramon.wenger@iterativ.ch>
Date: Tue, 4 Aug 2020 10:33:49 +0200
Subject: [PATCH] Add loading button component

---
 client/src/components/LoadingButton.vue       |  46 +++++++
 .../assignment/SubmissionInput.vue            |  11 +-
 client/src/pages/hello.vue                    | 122 ++++++++++--------
 client/src/styles/_animations.scss            |   9 ++
 client/src/styles/_helpers.scss               |   4 +
 client/src/styles/_reset.scss                 |   2 +-
 client/src/styles/_typography.scss            |   3 +-
 client/src/styles/main.scss                   |   2 +-
 8 files changed, 133 insertions(+), 66 deletions(-)
 create mode 100644 client/src/components/LoadingButton.vue
 create mode 100644 client/src/styles/_animations.scss
 create mode 100644 client/src/styles/_helpers.scss

diff --git a/client/src/components/LoadingButton.vue b/client/src/components/LoadingButton.vue
new file mode 100644
index 00000000..d5b5b410
--- /dev/null
+++ b/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>
diff --git a/client/src/components/content-blocks/assignment/SubmissionInput.vue b/client/src/components/content-blocks/assignment/SubmissionInput.vue
index 0242ea85..b6c3dde4 100644
--- a/client/src/components/content-blocks/assignment/SubmissionInput.vue
+++ b/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>
diff --git a/client/src/pages/hello.vue b/client/src/pages/hello.vue
index ce909e3f..dde0572d 100644
--- a/client/src/pages/hello.vue
+++ b/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 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: {},
-
-  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.';
-          });
-        }
-      });
+  export default {
+    components: {
+      LoadingButton
     },
-    resetForm() {
-      this.email = '';
-      this.submitted = false;
-      this.$validator.reset();
+
+    data() {
+      return {
+        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/_mixins.scss";
+  @import "@/styles/_variables.scss";
+  @import "@/styles/_mixins.scss";
 
-.text-link {
-  font-family: $sans-serif-font-family;
-  color: $color-brand;
-}
-
-.actions {
-  &__reset {
-    display: inline-block;
-    margin-left: $large-spacing;
+  .text-link {
+    font-family: $sans-serif-font-family;
+    color: $color-brand;
+  }
+
+  .actions {
+    &__reset {
+      display: inline-block;
+      margin-left: $large-spacing;
+    }
   }
-}
 
 </style>
diff --git a/client/src/styles/_animations.scss b/client/src/styles/_animations.scss
new file mode 100644
index 00000000..b9eb653b
--- /dev/null
+++ b/client/src/styles/_animations.scss
@@ -0,0 +1,9 @@
+@keyframes spin {
+  100% {
+    transform: rotate(360deg);
+  }
+}
+
+@mixin spin {
+  animation: spin 2.5s linear infinite;
+}
diff --git a/client/src/styles/_helpers.scss b/client/src/styles/_helpers.scss
new file mode 100644
index 00000000..b0c0e144
--- /dev/null
+++ b/client/src/styles/_helpers.scss
@@ -0,0 +1,4 @@
+@import 'functions';
+@import 'variables';
+@import 'mixins';
+@import 'animations';
diff --git a/client/src/styles/_reset.scss b/client/src/styles/_reset.scss
index 3cfbcb9b..4f1fd7fb 100644
--- a/client/src/styles/_reset.scss
+++ b/client/src/styles/_reset.scss
@@ -30,7 +30,7 @@ footer, header, hgroup, menu, nav, section {
 }
 
 body {
-  line-height: 1;
+  line-height: normal;
 }
 
 ol, ul {
diff --git a/client/src/styles/_typography.scss b/client/src/styles/_typography.scss
index d30f94b4..c9be50cd 100644
--- a/client/src/styles/_typography.scss
+++ b/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 {
diff --git a/client/src/styles/main.scss b/client/src/styles/main.scss
index 00be993e..4b0a1d49 100644
--- a/client/src/styles/main.scss
+++ b/client/src/styles/main.scss
@@ -5,7 +5,7 @@
  */
 @import "reset";
 @import "typography";
-@import "variables";
+@import "helpers";
 @import "default-layout";
 @import "buttons";
 @import "forms";