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

This commit is contained in:
Knut Ahlers 2023-08-13 03:02:38 +02:00 committed by GitHub
parent d157f7c374
commit b38adf81ad
No known key found for this signature in database
GPG key ID: 4AEE18F83AFDEB23

View file

@ -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