QR code on share url (#114)

* QR code on share url

* remove console

package.json

@@ -18,6 +18,7 @@
     "js-sha256": "^0.9.0",
     "portal-vue": "^2.1.7",
     "prismjs": "^1.24.1",
+    "qrcode": "^1.5.1",
     "query-builder-vue": "^1.2.0",
     "tinymotion": "^0.2.0",
     "vform": "^2.1.1",

resources/js/components/pages/forms/show/FormQrCode.vue

@@ -0,0 +1,50 @@
+<template>
+  <div>
+    <h3 class="font-semibold text-xl">QR Code</h3>
+    <p>Scan the QR code to open the form (Right click to copy the image)</p>
+    <div class="flex items-center">
+      <img v-if="QrUrl" :src="QrUrl" class="m-auto" />
+    </div>
+  </div>
+</template>
+
+<script>
+import QRCode from 'qrcode'
+export default {
+  name: 'FormQrCode',
+  props: {
+    form: { type: Object, required: true },
+    extraQueryParam: { type: String, default: '' }
+  },
+
+  data () {
+    return { 
+      QrUrl: null
+    }
+  },
+
+  computed: {
+    shareUrl () {
+      return (this.extraQueryParam) ? this.form.share_url + "?" + this.extraQueryParam : this.form.share_url + this.extraQueryParam
+    }
+  },
+
+  watch: {
+    shareUrl () {
+      this.generateQR()
+    }
+  },
+
+  mounted () {
+    this.generateQR()
+  },
+
+  methods: {
+    generateQR () {
+      QRCode.toDataURL(this.shareUrl).then(url => {
+        this.QrUrl = url
+      })
+    }
+  }
+}
+</script>

resources/js/pages/forms/show/share.vue

@@ -4,6 +4,8 @@
 
     <embed-code class="mt-6" :form="form" :extra-query-param="shareUrlForQueryParams" />
 
+    <form-qr-code class="mt-6" :form="form" :extra-query-param="shareUrlForQueryParams" />
+
     <advanced-form-url-settings :form="form" v-model="shareFormConfig" />
 
     <div class="mt-6 pt-6 border-t w-full flex">
@@ -17,6 +19,7 @@
 <script>
 import ShareLink from '../../../components/pages/forms/show/ShareLink.vue'
 import EmbedCode from '../../../components/pages/forms/show/EmbedCode.vue'
+import FormQrCode from '../../../components/pages/forms/show/FormQrCode.vue'
 import UrlFormPrefill from '../../../components/pages/forms/show/UrlFormPrefill.vue'
 import RegenerateFormLink from '../../../components/pages/forms/show/RegenerateFormLink.vue'
 import SeoMeta from '../../../mixins/seo-meta.js'
@@ -26,6 +29,7 @@ export default {
   components: {
     ShareLink,
     EmbedCode,
+    FormQrCode,
     UrlFormPrefill,
     RegenerateFormLink,
     AdvancedFormUrlSettings