<template>
    <div class="modal modal-otp is-active">
        <div class="modal-background"></div>
        <div class="modal-content">
            <p class="has-text-centered m-5">
                <img :src="qrcode" class="has-background-light" :alt="$t('commons.image_of_qrcode_to_scan')">
            </p>
        </div>
        <div class="fullscreen-footer">
            <!-- Close button -->
            <button id="btnClose" class="button is-rounded" :class="{'is-dark' : $root.showDarkMode}" @click.stop="$router.push({name: 'accounts', params: {initialEditMode: true}});">
                {{ $t('commons.close') }}
            </button>
        </div>
    </div>
</template>

<script>

    export default {
        data() {
            return {
                qrcode: null,
            }
        },

        mounted: function() {

            this.getQRcode()
        },

        methods: {

            /**
             * Get a QR code image resource from backend
             */
            async getQRcode () {

                const { data } = await this.axios.get('/api/v1/twofaccounts/' + this.$route.params.twofaccountId + '/qrcode')
                this.qrcode = data.qrcode
                
            },


        }
    }

</script>