diff --git a/assets/styles/app.scss b/assets/styles/app.scss index 46eb7a7..26f03e9 100644 --- a/assets/styles/app.scss +++ b/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 { diff --git a/components/Loading.vue b/components/Loading.vue new file mode 100644 index 0000000..685dc01 --- /dev/null +++ b/components/Loading.vue @@ -0,0 +1,27 @@ + + diff --git a/layouts/default.vue b/layouts/default.vue index 0075984..7545a18 100644 --- a/layouts/default.vue +++ b/layouts/default.vue @@ -6,15 +6,18 @@ + diff --git a/pages/authorize-contribution.vue b/pages/authorize-contribution.vue index e65105a..2ca93fa 100644 --- a/pages/authorize-contribution.vue +++ b/pages/authorize-contribution.vue @@ -6,7 +6,7 @@

Do you want to authorize your contribution #{{ contributionIndex }}? Please sign in.

-
+
@@ -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']), diff --git a/pages/make-contribution.vue b/pages/make-contribution.vue index 9035321..322434f 100644 --- a/pages/make-contribution.vue +++ b/pages/make-contribution.vue @@ -56,13 +56,6 @@ If you don’t trust binaries, we encorage you to follow this instruction to contribute by compiling from source code. It is very easy!

- - -
-
-
{{ status.msg }}...
-
-
@@ -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() {