75 lines
2.3 KiB
Vue
75 lines
2.3 KiB
Vue
<template>
|
|
<div class="has-text-centered">
|
|
<div class="title is-size-1">Hello, Anonymous</div>
|
|
<div class="buttons is-centered">
|
|
<b-button
|
|
:disable="isContributeBtnDisabled"
|
|
@click="makeContribution"
|
|
type="is-primary"
|
|
outlined
|
|
>Make the contribution</b-button
|
|
>
|
|
<b-button type="is-primary" outlined>Sign In</b-button>
|
|
</div>
|
|
{{ status }}
|
|
</div>
|
|
</template>
|
|
|
|
<script>
|
|
/* eslint-disable no-console */
|
|
|
|
const timeout = (ms) => new Promise((resolve) => setTimeout(resolve, ms))
|
|
|
|
export default {
|
|
data() {
|
|
return {
|
|
isContributeBtnDisabled: false,
|
|
status: ''
|
|
}
|
|
},
|
|
methods: {
|
|
async makeContribution({ retry = 0 } = {}) {
|
|
try {
|
|
this.isContributeBtnDisabled = true
|
|
|
|
this.status = 'Downloading last contribution'
|
|
let data = await fetch('api/challenge')
|
|
data = new Uint8Array(await data.arrayBuffer())
|
|
|
|
this.status = '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 = 'Uploading and verifying your contribution'
|
|
const formData = new FormData()
|
|
formData.append('response', new Blob([result], { type: 'application/octet-stream' }))
|
|
formData.append('name', 'William') // TODO put real name here
|
|
formData.append('company', 'Microsoft')
|
|
const resp = await fetch('api/response', {
|
|
method: 'POST',
|
|
body: formData
|
|
})
|
|
|
|
if (resp.ok) {
|
|
this.status = 'Your contribution is verified and recorded. THX BYE.'
|
|
} else if (resp.status === 422) {
|
|
if (retry < 3) {
|
|
console.log(`Looks like someone else uploaded contribution ahead of us, retrying`)
|
|
await this.makeContribution({ retry: retry++ })
|
|
} else {
|
|
this.status = `Failed to upload your contribution after ${retry} attempts`
|
|
}
|
|
} else {
|
|
this.status = 'Error uploading your contribution'
|
|
}
|
|
} finally {
|
|
this.isContributeBtnDisabled = false
|
|
}
|
|
}
|
|
}
|
|
}
|
|
</script>
|