You cannot select more than 25 topics
Topics must start with a letter or number, can include dashes ('-') and can be up to 35 characters long.
142 lines
3.6 KiB
Vue
142 lines
3.6 KiB
Vue
<template>
|
|
<div id="upload-view" class="flex flex-column items-center justify-center">
|
|
<p v-show="!paid && !expired" class="dn f6 mb4 mid-gray">To avoid spam you are asked to make a one-time payment equivalent to the
|
|
fee you ask for your link</p>
|
|
|
|
<pay v-show="!paid" :objectId="uploadId" :invoice="invoice"></pay>
|
|
<div class="hr"></div>
|
|
|
|
<form id="accepted" class="flex flex-column mt5 w-100" v-if="accepted" >
|
|
<label for="adminToken" class="f7 db mb2">
|
|
<span class="normal b orange">Your admin token:</span>
|
|
</label>
|
|
|
|
<input class="input-reset f6 b ba b--black-20 pa2 mb2 db w-100 mid-gray" @click="selectCopy" id="adminToken" type="text" v-model="adminToken">
|
|
|
|
|
|
<label for="downloadLink" class="f7 db mb2 mt3">
|
|
<span class="normal b blue">Download link:</span>
|
|
</label>
|
|
<input class="input-reset f6 b ba b--black-20 pa2 mb2 db w-100 mid-gray" @click="selectCopy" id="downloadLink" type="text" v-model="downloadLink">
|
|
|
|
</form>
|
|
|
|
</div>
|
|
</template>
|
|
|
|
<script charset="utf-8">
|
|
import { mapState, mapGetters } from 'vuex'
|
|
|
|
import Upload from './Upload.vue';
|
|
import Pay from './Pay.vue';
|
|
|
|
import GetWorker from './workerInterface.js';
|
|
import Api from './api.js';
|
|
|
|
const Worker = GetWorker('main');
|
|
|
|
|
|
export default {
|
|
name: 'UploadView',
|
|
data() {
|
|
return {
|
|
accepted: false,
|
|
adminToken: "",
|
|
downloadId: "",
|
|
}
|
|
},
|
|
props: ['uploadId'],
|
|
created (){
|
|
let self = this;
|
|
this.worker = Worker;
|
|
|
|
|
|
// First check the status to get the invoice
|
|
Api.checkUploadStatus(this.uploadId)
|
|
.then((res)=>{
|
|
|
|
return res.json()
|
|
.then((data)=>{
|
|
this.$store.commit('setInvoice', data.invoice)
|
|
|
|
// Set upload metadata
|
|
this.$store.commit('setUpStatus', data.status)
|
|
|
|
return data
|
|
})
|
|
})
|
|
.catch((err)=>{
|
|
console.error(err)
|
|
})
|
|
.then((data)=>{
|
|
|
|
// if payment required, poll for invoice paid
|
|
if (data.status.pay_status === 'waiting') {
|
|
Api.pollUploadStatus(self.uploadId)
|
|
.then((res)=>{ return res.json() })
|
|
.then((data)=>{
|
|
|
|
|
|
console.log(data)
|
|
self.$store.commit('setInvoice', data.invoice)
|
|
self.$store.commit('setUpStatus', data.status)
|
|
|
|
// if paid we get the admin/dl link
|
|
if (data.status.pay_status == 'paid' ){
|
|
self.accepted = true;
|
|
|
|
({ admin_token: self.adminToken,
|
|
download_id: self.downloadId } = data);
|
|
}
|
|
})
|
|
}
|
|
})
|
|
|
|
|
|
},
|
|
methods:{
|
|
selectCopy(ev){
|
|
ev.target.select()
|
|
document.execCommand('copy');
|
|
}
|
|
},
|
|
computed: {
|
|
...mapState({
|
|
status: state => state.upload.status,
|
|
invoice: state => state.base.invoice,
|
|
}),
|
|
...mapGetters([
|
|
'paid',
|
|
'expired',
|
|
]),
|
|
downloadLink(){
|
|
let loc = window.location;
|
|
return loc.host + '/d/' + this.downloadId
|
|
},
|
|
},
|
|
components: {
|
|
Upload,
|
|
Pay,
|
|
}
|
|
}
|
|
</script>
|
|
|
|
<style>
|
|
#upload-view{
|
|
min-width: var(--qrcode-width);
|
|
}
|
|
|
|
#accepted input:focus {
|
|
background: #fffceb;
|
|
}
|
|
|
|
input#adminToken::selection {
|
|
color: #ff6300;
|
|
}
|
|
|
|
input#downloadLink::selection {
|
|
color: #357Edd;;
|
|
}
|
|
|
|
</style>
|