2FAuth/resources/js_vue3/views/twofaccounts/QRcode.vue

<script setup>
    import twofaccountService from '@/services/twofaccountService'
    import Spinner from '@/components/Spinner.vue'
    import { UseColorMode } from '@vueuse/components'

    const router = useRouter()
    const route = useRoute()
    const qrcode = ref()

    onBeforeMount(() => {
        getQRcode()
    })

    /**
     * Get a QR code image resource from backend
     */
    async function getQRcode () {
        const { data } = await twofaccountService.getQrcode(route.params.twofaccountId)
        qrcode.value = data.qrcode
    }

</script>

<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 v-if="qrcode" :src="qrcode" class="has-background-light" :alt="$t('commons.image_of_qrcode_to_scan')">
                <Spinner :isVisible="!qrcode" :type="'raw'" class="is-size-1" />
            </p>
        </div>
        <div class="fullscreen-footer">
            <!-- Close button -->
            <UseColorMode v-slot="{ mode }">
                <button id="btnClose" class="button is-rounded" :class="{'is-dark' : mode == 'dark'}" @click.stop="router.push({ name: 'accounts' });">
                    {{ $t('commons.close') }}
                </button>
            </UseColorMode>
        </div>
    </div>
</template>