bit4sat/web/src/UploadView.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>