mirror of
https://github.com/Bubka/2FAuth.git
synced 2024-12-11 17:50:39 +01:00
42 lines
1.4 KiB
Vue
42 lines
1.4 KiB
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>
|