Extract QR-Button as component, fix button display

Signed-off-by: Knut Ahlers <knut@ahlers.me>
Luzifer · Sep 30, 2023 · b0ed41a · b0ed41a
1 parent dc9d6ed
commit b0ed41a
Show file tree

Hide file tree

Showing 2 changed files with 26 additions and 108 deletions.
diff --git a/src/components/display-url.vue b/src/components/display-url.vue
@@ -24,15 +24,7 @@
         >
           <i class="fas fa-clipboard" />
         </button>
-        <button
-          v-if="!$root.customize.disableQRSupport"
-          id="secret-url-qrcode"
-          ref="qrButton"
-          class="btn btn-secondary"
-          :disabled="!secretQRDataURL"
-        >
-          <i class="fas fa-qrcode" />
-        </button>
+        <app-qr-button :qr-content="secretUrl" />
       </div>
       <p v-html="$t('text-burn-hint')" />
       <p v-if="expiresAt">
@@ -43,10 +35,10 @@
   </div>
 </template>
 <script>
-import { Popover } from 'bootstrap'
-import qrcode from 'qrcode'
+import appQrButton from './qr-button.vue'
 
 export default {
+  components: { appQrButton },
   computed: {
     hasClipboard() {
       return Boolean(navigator.clipboard && navigator.clipboard.writeText)
@@ -67,7 +59,6 @@ export default {
     return {
       copyToClipboardSuccess: false,
       popover: null,
-      secretQRDataURL: '',
     }
   },
 
@@ -81,23 +72,11 @@ export default {
           }, 500)
         })
     },
-
-    generateQR() {
-      if (this.$root.customize.disableQRSupport) {
-        return
-      }
-
-      qrcode.toDataURL(this.secretUrl, { width: 200 })
-        .then(url => {
-          this.secretQRDataURL = url
-        })
-    },
   },
 
   mounted() {
     // Give the interface a moment to transistion and focus
     window.setTimeout(() => this.$refs.secretUrl.focus(), 100)
-    this.generateQR()
   },
 
   name: 'AppDisplayURL',
@@ -118,29 +97,5 @@ export default {
       type: String,
     },
   },
-
-  watch: {
-    secretQRDataURL(to) {
-      if (this.popover) {
-        this.popover.dispose()
-      }
-
-      this.popover = new Popover(this.$refs.qrButton, {
-        content: () => {
-          const img = document.createElement('img')
-          img.src = to
-          return img
-        },
-
-        html: true,
-        placement: 'left',
-        trigger: 'focus',
-      })
-    },
-
-    secretUrl() {
-      this.generateQR()
-    },
-  },
 }
 </script>
diff --git a/src/components/secret-display.vue b/src/components/secret-display.vue
@@ -23,34 +23,28 @@
             :value="secret"
             rows="4"
           />
-          <div
-            class="btn-group-vertical"
-            role="group"
-          >
-            <button
-              v-if="hasClipboard"
-              :class="{'btn': true, 'btn-primary': !copyToClipboardSuccess, 'btn-success': copyToClipboardSuccess}"
-              :disabled="!secret"
-              @click="copySecret"
+          <div class="d-flex align-items-start p-0">
+            <div
+              class="btn-group-vertical"
+              role="group"
             >
-              <i class="fas fa-fw fa-clipboard" />
-            </button>
-            <a
-              class="btn btn-secondary"
-              :href="secretContentBlobURL"
-              download
-            >
-              <i class="fas fa-fw fa-download" />
-            </a>
-            <button
-              v-if="!$root.customize.disableQRSupport"
-              id="secret-data-qrcode"
-              ref="qrButton"
-              class="btn btn-secondary"
-              :disabled="!secretContentQRDataURL"
-            >
-              <i class="fas fa-fw fa-qrcode" />
-            </button>
+              <button
+                v-if="hasClipboard"
+                :class="{'btn': true, 'btn-primary': !copyToClipboardSuccess, 'btn-success': copyToClipboardSuccess}"
+                :disabled="!secret"
+                @click="copySecret"
+              >
+                <i class="fas fa-fw fa-clipboard" />
+              </button>
+              <a
+                class="btn btn-secondary"
+                :href="secretContentBlobURL"
+                download
+              >
+                <i class="fas fa-fw fa-download" />
+              </a>
+              <app-qr-button :qr-content="secret" />
+            </div>
           </div>
         </div>
         <p v-html="$t('text-hint-burned')" />
@@ -60,10 +54,10 @@
 </template>
 <script>
 import appCrypto from '../crypto.js'
-import { Popover } from 'bootstrap'
-import qrcode from 'qrcode'
+import appQrButton from './qr-button.vue'
 
 export default {
+  components: { appQrButton },
   computed: {
     hasClipboard() {
       return Boolean(navigator.clipboard && navigator.clipboard.writeText)
@@ -76,7 +70,6 @@ export default {
       popover: null,
       secret: null,
       secretContentBlobURL: null,
-      secretContentQRDataURL: null,
     }
   },
 
@@ -152,36 +145,6 @@ export default {
         window.URL.revokeObjectURL(this.secretContentBlobURL)
       }
       this.secretContentBlobURL = window.URL.createObjectURL(new Blob([to], { type: 'text/plain' }))
-
-      if (this.$root.customize.disableQRSupport || !to) {
-        return
-      }
-
-      qrcode.toDataURL(to, { width: 200 })
-        .then(url => {
-          this.secretContentQRDataURL = url
-        })
-        .catch(() => {
-          this.secretContentQRDataURL = null
-        })
-    },
-
-    secretContentQRDataURL(to) {
-      if (this.popover) {
-        this.popover.dispose()
-      }
-
-      this.popover = new Popover(this.$refs.qrButton, {
-        content: () => {
-          const img = document.createElement('img')
-          img.src = to
-          return img
-        },
-
-        html: true,
-        placement: 'left',
-        trigger: 'focus',
-      })
     },
   },
 }