From fb49e55e34c5d8573ebe672029a9454c3d051004 Mon Sep 17 00:00:00 2001
From: Bubka <858858+Bubka@users.noreply.github.com>
Date: Fri, 27 Oct 2023 16:09:59 +0200
Subject: [PATCH] Set up the QRcode view

---
 .../js_vue3/services/twofaccountService.js    |  4 ++
 .../js_vue3/views/twofaccounts/QRcode.vue     | 42 +++++++++++++++++++
 2 files changed, 46 insertions(+)
 create mode 100644 resources/js_vue3/views/twofaccounts/QRcode.vue

diff --git a/resources/js_vue3/services/twofaccountService.js b/resources/js_vue3/services/twofaccountService.js
index 48a729e0..aacdd61a 100644
--- a/resources/js_vue3/services/twofaccountService.js
+++ b/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 })
+    }
     
 }
\ No newline at end of file
diff --git a/resources/js_vue3/views/twofaccounts/QRcode.vue b/resources/js_vue3/views/twofaccounts/QRcode.vue
new file mode 100644
index 00000000..ad762eeb
--- /dev/null
+++ b/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>
\ No newline at end of file