2FAuth/resources/js/components/QrContentDisplay.vue
2024-04-16 11:02:38 +02:00

67 lines
2.0 KiB
Vue

<script setup>
const { copy } = useClipboard({ legacy: true })
import { useNotifyStore } from '@/stores/notify'
const notify = useNotifyStore()
const props = defineProps({
qrContent: String,
})
/**
* Checks if a string is an url
*
* @param {string} str
*/
function isUrl(str) {
var strRegex = /^(?:http(s)?:\/\/)?[\w.-]+(?:\.[\w\.-]+)+[\w\-\._~:/?#[\]@!\$&'\(\)\*\+,;=.]+$/
var re = new RegExp(strRegex)
return re.test(str)
}
/**
* Opens an uri in a new browser window
*
* @param {string} uri
*/
function openInBrowser(uri) {
const a = document.createElement('a')
a.setAttribute('href', uri)
a.dispatchEvent(new MouseEvent("click", { 'view': window, 'bubbles': true, 'cancelable': true }))
}
/**
* Copies to clipboard and notify
*
* @param {*} data
*/
function copyToClipboard(data) {
copy(data)
notify.success({ text: trans('commons.copied_to_clipboard') })
}
</script>
<template>
<div class="too-bad"></div>
<div class="block">
{{ $t('errors.data_of_qrcode_is_not_valid_URI') }}
</div>
<div class="block mb-6 light-or-darker">{{ qrContent ? qrContent : '[' + trans('commons.nothing') + ']' }}</div>
<!-- Copy to clipboard -->
<div class="block has-text-link" v-if="qrContent">
<button class="button is-link is-outlined is-rounded" @click.stop="copyToClipboard(qrContent)">
{{ $t('commons.copy_to_clipboard') }}
</button>
</div>
<!-- Open in browser -->
<div class="block has-text-link" v-if="isUrl(qrContent)" @click="openInBrowser(qrContent)">
<button class="button is-link is-outlined is-rounded">
<span>{{ $t('commons.open_in_browser') }}</span>
<span class="icon is-small">
<FontAwesomeIcon :icon="['fas', 'external-link-alt']" />
</span>
</button>
</div>
</template>