Set up the QRcode view

resources/js_vue3/services/twofaccountService.js

@@ -54,5 +54,9 @@ export default {
     export(ids, config = {}) {
         return apiClient.delete('/twofaccounts/export?ids=' + ids, { ...config })
     },
+
+    getQrcode(id, config = {}) {
+        return apiClient.get('/twofaccounts/' + id + '/qrcode', { ...config })
+    }
     
 }

resources/js_vue3/views/twofaccounts/QRcode.vue

@@ -0,0 +1,42 @@
+<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>