Extract QR-Button as component, fix button display

Signed-off-by: Knut Ahlers <[email protected]>
Luzifer · Sep 30, 2023 · cf25246 · cf25246
1 parent dc9d6ed
commit cf25246
Show file tree

Hide file tree

Showing 3 changed files with 99 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/qr-button.vue b/src/components/qr-button.vue
@@ -0,0 +1,73 @@
+<template>
+  <button
+    v-if="!$root.customize.disableQRSupport"
+    id="secret-url-qrcode"
+    ref="qrButton"
+    class="btn btn-secondary"
+    :disabled="!qrDataURL"
+  >
+    <i class="fas fa-qrcode" />
+  </button>
+</template>
+<script>
+import { Popover } from 'bootstrap'
+import qrcode from 'qrcode'
+
+export default {
+  data() {
+    return {
+      qrDataURL: null,
+    }
+  },
+
+  methods: {
+    generateQR() {
+      if (this.$root.customize.disableQRSupport) {
+        return
+      }
+
+      qrcode.toDataURL(this.qrContent, { width: 200 })
+        .then(url => {
+          this.qrDataURL = url
+        })
+    },
+  },
+
+  mounted() {
+    this.generateQR()
+  },
+
+  name: 'AppQRButton',
+
+  props: {
+    qrContent: {
+      required: true,
+      type: String,
+    },
+  },
+
+  watch: {
+    qrContent() {
+      this.generateQR()
+    },
+
+    qrDataURL(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',
+      })
+    },
+  },
+}
+</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',
-      })
     },
   },
 }