|
@@ -55,16 +55,15 @@
|
|
|
class="monospaced"
|
|
|
readonly="readonly"
|
|
|
@focus="selectInput">
|
|
|
-
|
|
|
- <a ref="clipboardButton"
|
|
|
+ <NcButton type="tertiary"
|
|
|
:title="copyTooltipOptions"
|
|
|
:aria-label="copyTooltipOptions"
|
|
|
- v-clipboard:copy="appPassword"
|
|
|
- v-clipboard:success="onCopyPassword"
|
|
|
- v-clipboard:error="onCopyPasswordFailed"
|
|
|
- class="icon icon-clippy"
|
|
|
- @mouseover="hoveringCopyButton = true"
|
|
|
- @mouseleave="hoveringCopyButton = false" />
|
|
|
+ @click="copyPassword">
|
|
|
+ <template #icon>
|
|
|
+ <Check v-if="copied" :size="20" />
|
|
|
+ <ContentCopy v-else :size="20" />
|
|
|
+ </template>
|
|
|
+ </NcButton>
|
|
|
<NcButton @click="reset">
|
|
|
{{ t('settings', 'Done') }}
|
|
|
</NcButton>
|
|
@@ -85,14 +84,20 @@
|
|
|
import QR from '@chenfengyuan/vue-qrcode'
|
|
|
import { confirmPassword } from '@nextcloud/password-confirmation'
|
|
|
import '@nextcloud/password-confirmation/dist/style.css'
|
|
|
+import { showError } from '@nextcloud/dialogs'
|
|
|
import { getRootUrl } from '@nextcloud/router'
|
|
|
import NcButton from '@nextcloud/vue/dist/Components/NcButton'
|
|
|
|
|
|
+import Check from 'vue-material-design-icons/Check.vue'
|
|
|
+import ContentCopy from 'vue-material-design-icons/ContentCopy.vue'
|
|
|
+
|
|
|
export default {
|
|
|
name: 'AuthTokenSetupDialogue',
|
|
|
components: {
|
|
|
- QR,
|
|
|
+ Check,
|
|
|
+ ContentCopy,
|
|
|
NcButton,
|
|
|
+ QR,
|
|
|
},
|
|
|
props: {
|
|
|
add: {
|
|
@@ -107,15 +112,14 @@ export default {
|
|
|
deviceName: '',
|
|
|
appPassword: '',
|
|
|
loginName: '',
|
|
|
- passwordCopied: false,
|
|
|
+ copied: false,
|
|
|
showQR: false,
|
|
|
qrUrl: '',
|
|
|
- hoveringCopyButton: false,
|
|
|
}
|
|
|
},
|
|
|
computed: {
|
|
|
copyTooltipOptions() {
|
|
|
- if (this.passwordCopied) {
|
|
|
+ if (this.copied) {
|
|
|
return t('settings', 'Copied!')
|
|
|
}
|
|
|
return t('settings', 'Copy')
|
|
@@ -150,13 +154,19 @@ export default {
|
|
|
this.reset()
|
|
|
})
|
|
|
},
|
|
|
- onCopyPassword() {
|
|
|
- this.passwordCopied = true
|
|
|
- this.$refs.clipboardButton.blur()
|
|
|
- setTimeout(() => { this.passwordCopied = false }, 3000)
|
|
|
- },
|
|
|
- onCopyPasswordFailed() {
|
|
|
- OC.Notification.showTemporary(t('settings', 'Could not copy app password. Please copy it manually.'))
|
|
|
+ async copyPassword() {
|
|
|
+ try {
|
|
|
+ await navigator.clipboard.writeText(this.appPassword)
|
|
|
+ this.copied = true
|
|
|
+ } catch (e) {
|
|
|
+ this.copied = false
|
|
|
+ console.error(e)
|
|
|
+ showError(t('settings', 'Could not copy app password. Please copy it manually.'))
|
|
|
+ } finally {
|
|
|
+ setTimeout(() => {
|
|
|
+ this.copied = false
|
|
|
+ }, 4000)
|
|
|
+ }
|
|
|
},
|
|
|
reset() {
|
|
|
this.adding = false
|