add qrcode for share links

Signed-off-by: Felix Beichler <[email protected]> resolve first comments Signed-off-by: Felix Beichler <[email protected]> move modal into tab vue Signed-off-by: Felix Beichler <[email protected]> remove spaces (again) Signed-off-by: Felix Beichler <[email protected]> refactor qr-variables to single object on this. Signed-off-by: Felix Beichler <[email protected]> resolve comments Signed-off-by: Felix Beichler <[email protected]> remove url label Signed-off-by: Felix Beichler <[email protected]> resolve comments Signed-off-by: Felix Beichler <[email protected]> parameterize alt text Signed-off-by: Felix Beichler <[email protected]> fix order of iconqr import Signed-off-by: Felix Beichler <[email protected]> change nc modal to dialog Signed-off-by: Felix Beichler <[email protected]> resolve Share {formTitle} Signed-off-by: Felix Beichler <[email protected]> separate qr dialog to component Signed-off-by: Felix Beichler <[email protected]> resolve comments Signed-off-by: Felix Beichler <[email protected]>
nextcloud · May 19, 2024 · 5137239 · 5137239
1 parent 2c7f4a8
commit 5137239
Show file tree

Hide file tree

Showing 4 changed files with 235 additions and 23 deletions.
diff --git a/package-lock.json b/package-lock.json
diff --git a/package.json b/package.json
@@ -40,6 +40,7 @@
     "markdown-it": "^14.1.0",
     "p-debounce": "^4.0.0",
     "p-queue": "^8.0.1",
+    "qrcode": "^1.5.3",
     "v-click-outside": "^3.2.0",
     "vue": "^2.7.16",
     "vue-material-design-icons": "^5.3.0",

diff --git a/src/components/QRDialog.vue b/src/components/QRDialog.vue
@@ -0,0 +1,61 @@
+<template>
+	<div class="qrDialog__content">
+		<h2>{{ title }}</h2>
+		<div>
+			<img :src="uri"
+				:title="text"
+				:alt="t('forms', 'QR code representation of {text}', { text: text })">
+		</div>
+	</div>
+</template>
+
+<script>
+
+import QRCode from 'qrcode'
+
+export default {
+	name: 'QRDialog',
+
+	props: {
+		title: {
+			type: String,
+			default: '',
+		},
+		text: {
+			type: String,
+			default: '',
+		},
+	},
+
+	data() {
+		return {
+			uri: {
+				type: String,
+				default: '',
+			},
+		}
+	},
+
+	created() {
+		this.generateQr()
+	},
+
+	methods: {
+		async generateQr() {
+			try {
+				this.uri = await QRCode.toDataURL(this.text)
+			} catch (err) {
+				console.error(err)
+			}
+		},
+	},
+}
+
+</script>
+
+<style lang="scss">
+.qrDialog__content {
+    margin-bottom: 50px;
+    text-align: center;
+}
+</style>