mirror of
https://github.com/Bubka/2FAuth.git
synced 2024-11-29 19:53:11 +01:00
70 lines
2.1 KiB
Vue
70 lines
2.1 KiB
Vue
|
<script setup>
|
||
|
|
const { copy } = useClipboard({ legacy: true })
|
||
|
|
import { useNotifyStore } from '@/stores/notify'
|
||
|
|
import { UseColorMode } from '@vueuse/components'
|
||
|
|
|
||
|
|
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>
|
||
|
|
<UseColorMode v-slot="{ mode }">
|
||
|
|
<div class="block mb-6" :class="mode == 'dark' ? 'has-text-light':'has-text-grey-dark'">{{ qrContent ? qrContent : '[' + trans('commons.nothing') + ']' }}</div>
|
||
|
|
</UseColorMode>
|
||
|
|
<!-- 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>
|