Merge pull request #36450 from nextcloud/fix/clipboard-copy

Drop vue-clipboard2 in favour of native Clipboard API to fix copy to clipboard

2 files changed, 29 insertions, 21 deletions

diff --git a/apps/settings/src/components/AuthTokenSetupDialogue.vue b/apps/settings/src/components/AuthTokenSetupDialogue.vue
index 09b44a8b96c..9ae2915d467 100644
--- a/apps/settings/src/components/AuthTokenSetupDialogue.vue
+++ b/apps/settings/src/components/AuthTokenSetupDialogue.vue
@@ -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
diff --git a/apps/settings/src/main-personal-security.js b/apps/settings/src/main-personal-security.js
index 15ef27680cc..31e798d5646 100644
--- a/apps/settings/src/main-personal-security.js
+++ b/apps/settings/src/main-personal-security.js
@@ -23,7 +23,6 @@
 
 import { loadState } from '@nextcloud/initial-state'
 import Vue from 'vue'
-import VueClipboard from 'vue-clipboard2'
 import VTooltip from 'v-tooltip'
 
 import AuthTokenSection from './components/AuthTokenSection'
@@ -31,7 +30,6 @@ import AuthTokenSection from './components/AuthTokenSection'
 // eslint-disable-next-line camelcase
 __webpack_nonce__ = btoa(OC.requestToken)
 
-Vue.use(VueClipboard)
 Vue.use(VTooltip, { defaultHtml: false })
 Vue.prototype.t = t