trusted-setup-server/pages/authorize-contribution.vue

143 lines
3.9 KiB
Vue
Raw Normal View History

2020-02-06 17:16:38 +01:00
<template>
<div class="ceremony">
<h1 class="title is-size-1 is-size-2-mobile is-spaced">
2020-02-08 19:47:21 +01:00
Hello, <span>@{{ handle }}</span>
2020-02-06 17:16:38 +01:00
</h1>
<h2 class="subtitle">
2020-02-29 12:22:45 +01:00
{{ title }}
2020-02-06 17:16:38 +01:00
</h2>
<fieldset :disabled="hideSaveBtn" class="authorize">
2020-02-06 17:16:38 +01:00
<Form />
</fieldset>
<div class="buttons is-centered">
2020-02-08 19:47:21 +01:00
<b-button
v-if="isLoggedIn && !hideSaveBtn"
@click="authorize"
:disabled="hasErrorName.invalid"
type="is-primary"
outlined
>
2020-02-06 17:16:38 +01:00
Save information
</b-button>
2020-02-08 19:47:21 +01:00
</div>
<div v-show="status.type !== ''" class="status">
2020-02-08 19:47:21 +01:00
<div :class="status.type" class="status-message">{{ status.msg }}</div>
<div v-show="status.type === 'is-success'" class="status-message is-success">
2020-04-29 21:26:36 +02:00
Now you can post your attestation to Twitter.
<div class="buttons is-centered">
<b-button @click="makeTweet" type="is-primary" tag="a" target="_blank" outlined>
Post attestation
</b-button>
</div>
</div>
2020-02-06 17:16:38 +01:00
</div>
</div>
</template>
<script>
2020-02-08 19:47:21 +01:00
import { mapGetters, mapActions, mapState } from 'vuex'
2020-02-06 17:16:38 +01:00
import Form from '@/components/Form'
export default {
components: {
Form
},
2020-02-07 10:21:53 +01:00
data() {
return {
2020-02-08 19:47:21 +01:00
token: null,
status: {
type: '',
msg: ''
},
hideSaveBtn: false
2020-02-07 10:21:53 +01:00
}
},
2020-02-06 17:16:38 +01:00
computed: {
2020-02-29 15:38:13 +01:00
...mapState('user', ['name', 'handle', 'company', 'contributionIndex']),
2020-02-29 12:22:45 +01:00
...mapGetters('user', ['isLoggedIn', 'hasErrorName']),
title() {
if (this.status.type === 'is-danger' || !this.contributionIndex) {
return null
}
if (!this.isLoggedIn) {
2020-04-29 21:26:36 +02:00
return `Would you like to provide identity for your contribution #${this.contributionIndex}?`
2020-02-29 12:22:45 +01:00
} else {
2020-04-29 21:26:36 +02:00
return `Please, specify your name and project.`
2020-02-29 12:22:45 +01:00
}
}
2020-02-06 17:16:38 +01:00
},
async mounted() {
this.$root.$emit('enableLoading')
2020-02-06 17:16:38 +01:00
await this.getUserData()
2020-02-08 19:47:21 +01:00
this.token = this.$route.query.token
if (!this.token) {
window.location.replace(window.location.origin)
} else {
await this.getContributionIndex()
2020-02-08 19:47:21 +01:00
}
setTimeout(() => {
this.$root.$emit('disableLoading')
}, 800)
2020-02-06 17:16:38 +01:00
},
methods: {
2020-02-08 19:47:21 +01:00
...mapActions('user', ['getUserData', 'makeTweet']),
async authorize() {
const body = {
token: this.token,
name: this.name,
company: this.company
}
try {
const response = await fetch('/api/authorize_contribution', {
method: 'POST',
headers: {
Accept: 'application/json',
'Content-Type': 'application/json'
},
body: JSON.stringify(body)
})
if (response.ok) {
2020-04-29 21:26:36 +02:00
this.status.msg = `Your contribution has been updated.`
2020-02-08 19:47:21 +01:00
this.status.type = 'is-success'
this.hideSaveBtn = true
} else {
const error = await response.text()
this.status.msg = error
this.status.type = 'is-danger'
}
} catch (e) {
this.status.msg = 'Something went wrong. Please contact support'
this.status.type = 'is-danger'
}
2020-02-11 10:53:41 +01:00
},
async getContributionIndex() {
2020-02-11 10:53:41 +01:00
const body = {
token: this.token
}
try {
const response = await fetch('/api/get_contribution_index', {
2020-02-11 10:53:41 +01:00
method: 'POST',
headers: {
Accept: 'application/json',
'Content-Type': 'application/json'
},
body: JSON.stringify(body)
})
if (response.ok) {
const { id } = await response.json()
2020-02-29 15:38:13 +01:00
this.$store.commit('user/SET_CONTRIBUTION_INDEX', id)
2020-02-11 10:53:41 +01:00
} else {
const error = await response.text()
this.status.msg = error
this.status.type = 'is-danger'
this.hideSaveBtn = true
}
} catch (e) {
this.status.msg = 'Something went wrong. Please contact support'
this.status.type = 'is-danger'
}
2020-02-08 19:47:21 +01:00
}
2020-02-06 17:16:38 +01:00
}
}
</script>