add loading to authorize page

-disable fields if successful on the authorize page

assets/styles/app.scss

@@ -189,8 +189,6 @@
 
   fieldset[disabled] {
     .box {
-      opacity: .5;
-      cursor: not-allowed;
       background-color: $primary-invert;
       border-color: #393939;
 
@@ -602,6 +600,15 @@ fieldset {
     margin-left: auto;
     margin-right: auto;
   }
+
+  &[disabled] {
+    opacity: .5;
+    cursor: not-allowed;
+
+    label {
+      cursor: inherit;
+    }
+  }
 }
 
 .form {

components/Loading.vue

@@ -0,0 +1,27 @@
+<template>
+  <b-loading :active.sync="loading">
+    <div class="loading-container">
+      <div class="loading-tornado"></div>
+      <div class="loading-message">{{ message }}...</div>
+    </div>
+  </b-loading>
+</template>
+<script>
+export default {
+  data() {
+    return {
+      loading: false,
+      message: 'Loading'
+    }
+  },
+  created() {
+    this.$root.$on('enableLoading', (msg = 'Loading') => {
+      this.loading = true
+      this.message = msg
+    })
+    this.$root.$on('disableLoading', () => {
+      this.loading = false
+    })
+  }
+}
+</script>

layouts/default.vue

@@ -6,15 +6,18 @@
         <nuxt />
       </div>
     </section>
+    <Loading />
   </div>
 </template>
 
 <script>
 import Navbar from '@/components/Navbar'
+import Loading from '@/components/Loading'
 
 export default {
   components: {
-    Navbar
+    Navbar,
+    Loading
   }
 }
 </script>

pages/authorize-contribution.vue

@@ -6,7 +6,7 @@
     <h2 class="subtitle">
       Do you want to authorize your contribution #{{ contributionIndex }}? Please sign in.
     </h2>
-    <fieldset class="authorize">
+    <fieldset :disabled="hideSaveBtn" class="authorize">
       <Form />
     </fieldset>
     <div class="buttons is-centered">
@@ -60,6 +60,7 @@ export default {
     ...mapGetters('user', ['isLoggedIn', 'hasErrorName'])
   },
   async mounted() {
+    this.$root.$emit('enableLoading')
     await this.getUserData()
     this.token = this.$route.query.token
     if (!this.token) {
@@ -68,6 +69,9 @@ export default {
       // TODO try to load contribution data. May be it's already authorized
       // also set `contributionIndex`
     }
+    setTimeout(() => {
+      this.$root.$emit('disableLoading')
+    }, 800)
   },
   methods: {
     ...mapActions('user', ['getUserData', 'makeTweet']),

pages/make-contribution.vue

@@ -56,13 +56,6 @@
       If you don’t trust binaries, we encorage you to follow this <a href="">instruction</a> to
       contribute by compiling from source code. It is very easy!
     </p>
-
-    <b-loading :active.sync="loading">
-      <div class="loading-container">
-        <div class="loading-tornado"></div>
-        <div :class="status.type" class="loading-message">{{ status.msg }}...</div>
-      </div>
-    </b-loading>
   </div>
 </template>
 
@@ -84,8 +77,7 @@ export default {
       status: {
         type: '',
         msg: ''
-      },
-      loading: false
+      }
     }
   },
   computed: {
@@ -131,12 +123,10 @@ export default {
     }
   },
   async mounted() {
-    this.loading = true
-    this.status.msg = 'Loading'
-    this.status.type = ''
+    this.$root.$emit('enableLoading')
     await this.getUserData()
     setTimeout(() => {
-      this.loading = false
+      this.$root.$emit('disableLoading')
     }, 800)
   },
   methods: {
@@ -144,20 +134,20 @@ export default {
     async makeContribution({ retry = 0 } = {}) {
       try {
         this.isContributeBtnSnown = true
-        this.loading = true
-        this.status.msg = 'Downloading last contribution'
+        this.status.msg = ''
         this.status.type = ''
+        this.$root.$emit('enableLoading', 'Downloading last contribution')
         let data = await fetch('api/challenge')
         data = new Uint8Array(await data.arrayBuffer())
 
-        this.status.msg = 'Generating random contribution'
+        this.$root.$emit('enableLoading', 'Generating random contribution')
         await timeout(100) // allow UI to update before freezing in wasm
         console.log('Source params', data)
         const contribute = await this.$contribute()
         const result = contribute(data)
         console.log('Updated params', result)
 
-        this.status.msg = 'Uploading and verifying your contribution'
+        this.$root.$emit('enableLoading', 'Uploading and verifying your contribution')
         console.log('this.user.name', this.userName, this.userHandle, this.userCompany)
         const formData = new FormData()
         formData.append('response', new Blob([result], { type: 'application/octet-stream' }))
@@ -197,7 +187,7 @@ export default {
         this.status.type = 'is-danger'
         this.isContributeBtnSnown = false
       } finally {
-        this.loading = false
+        this.$root.$emit('disableLoading')
       }
     },
     onAnonymousHandler() {