[#110] Add interaction buttons for displayed secret (#111)

Luzifer · Aug 13, 2023 · b38adf8 · b38adf8
1 parent d157f7c
commit b38adf8
Showing 1 changed file with 72 additions and 6 deletions.
diff --git a/src/app.vue b/src/app.vue
@@ -236,14 +236,57 @@
             </template>
             <template v-else>
               <b-form-group>
-                <b-form-textarea
-                  max-rows="25"
-                  readonly
-                  rows="5"
-                  :value="secret"
-                />
+                <b-input-group>
+                  <b-form-textarea
+                    max-rows="25"
+                    readonly
+                    rows="4"
+                    :value="secret"
+                  />
+                  <b-input-group-text class="d-flex align-items-start p-0">
+                    <b-button-group vertical>
+                      <b-button
+                        v-if="hasClipboard"
+                        :disabled="!secretUrl"
+                        :variant="copyToClipboardSuccess ? 'success' : 'primary'"
+                        title="Copy Secret to Clipboard"
+                        @click="copySecret"
+                      >
+                        <i class="fas fa-fw fa-clipboard" />
+                      </b-button>
+                      <b-button
+                        :href="`data:text/plain;charset=UTF-8,${secret}`"
+                        download
+                        title="Download Secret as Text File"
+                      >
+                        <i class="fas fa-fw fa-download" />
+                      </b-button>
+                      <b-button
+                        v-if="!customize.disableQRSupport && secretContentQRDataURL"
+                        id="secret-data-qrcode"
+                        variant="secondary"
+                        title="Display Content as QR-Code"
+                      >
+                        <i class="fas fa-fw fa-qrcode" />
+                      </b-button>
+                    </b-button-group>
+                  </b-input-group-text>
+                </b-input-group>
               </b-form-group>
               <p v-html="$t('text-hint-burned')" />
+
+              <b-popover
+                v-id="!customize.disableQRSupport"
+                target="secret-data-qrcode"
+                triggers="focus"
+                placement="leftbottom"
+              >
+                <b-img
+                  height="200"
+                  :src="secretContentQRDataURL"
+                  width="200"
+                />
+              </b-popover>
             </template>
           </b-card>
         </b-col>
@@ -311,6 +354,7 @@ export default {
       secretExpiry: null,
       secretId: '',
       secretQRDataURL: '',
+      secretContentQRDataURL: '',
       securePassword: '',
       selectedExpiry: null,
       showError: false,
@@ -335,6 +379,16 @@ export default {
         })
     },
 
+    copySecret() {
+      navigator.clipboard.writeText(this.secret)
+        .then(() => {
+          this.copyToClipboardSuccess = true
+          window.setTimeout(() => {
+            this.copyToClipboardSuccess = false
+          }, 500)
+        })
+    },
+
     copySecretUrl() {
       navigator.clipboard.writeText(this.secretUrl)
         .then(() => {
@@ -503,6 +557,18 @@ export default {
       window.setTheme(to ? 'dark' : 'light')
     },
 
+    secret(to) {
+      if (this.customize.disableQRSupport || !to) {
+        return
+      }
+
+      qrcode.toDataURL(to, { width: 200 })
+        .then(url => {
+          this.secretContentQRDataURL = url
+        })
+        .catch(() => this.secretContentQRDataURL = null)
+    },
+
     secretUrl(to) {
       if (this.customize.disableQRSupport) {
         return