Enable the Vue 3 front-end

resources/js/components/QrContentDisplay.vue

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