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

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

apps/files_sharing/src/components/SharingEntryInternal.vue

@@ -84,7 +84,7 @@ export default {
 	methods: {
 		async copyLink() {
 			try {
-				await this.$copyText(this.internalLink)
+				await navigator.clipboard.writeText(this.internalLink)
 				showSuccess(t('files_sharing', 'Link copied'))
 				// focus and show the tooltip (note: cannot set ref on NcActionLink)
 				this.$refs.shareEntrySimple.$refs.actionsComponent.$el.focus()

apps/files_sharing/src/components/SharingEntryLink.vue

@@ -769,7 +769,7 @@ export default {
 		},
 		async copyLink() {
 			try {
-				await this.$copyText(this.shareLink)
+				await navigator.clipboard.writeText(this.shareLink)
 				showSuccess(t('files_sharing', 'Link copied'))
 				// focus and show the tooltip
 				this.$refs.copyButton.$el.focus()

apps/files_sharing/src/files_sharing_tab.js

@@ -22,7 +22,6 @@
  */
 
 import Vue from 'vue'
-import VueClipboard from 'vue-clipboard2'
 import { translate as t, translatePlural as n } from '@nextcloud/l10n'
 
 import SharingTab from './views/SharingTab.vue'
@@ -45,7 +44,6 @@ Object.assign(window.OCA.Sharing, { ShareTabSections: new TabSections() })
 
 Vue.prototype.t = t
 Vue.prototype.n = n
-Vue.use(VueClipboard)
 
 // Init Sharing tab component
 const View = Vue.extend(SharingTab)

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

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
 

package-lock.json

@@ -75,7 +75,6 @@
         "v-tooltip": "^2.1.3",
         "vue": "^2.7.14",
         "vue-click-outside": "^1.1.0",
-        "vue-clipboard2": "^0.3.3",
         "vue-cropperjs": "^4.2.0",
         "vue-infinite-loading": "^2.4.5",
         "vue-localstorage": "^0.6.2",
@@ -24174,14 +24173,6 @@
       "resolved": "https://registry.npmjs.org/vue-click-outside/-/vue-click-outside-1.1.0.tgz",
       "integrity": "sha512-pNyvAA9mRXJwPHlHJyjMb4IONSc7khS5lxGcMyE2EIKgNMAO279PWM9Hyq0d5J4FkiSRdmFLwnbjDd5UtPizHQ=="
     },
-    "node_modules/vue-clipboard2": {
-      "version": "0.3.3",
-      "resolved": "https://registry.npmjs.org/vue-clipboard2/-/vue-clipboard2-0.3.3.tgz",
-      "integrity": "sha512-aNWXIL2DKgJyY/1OOeITwAQz1fHaCIGvUFHf9h8UcoQBG5a74MkdhS/xqoYe7DNZdQmZRL+TAdIbtUs9OyVjbw==",
-      "dependencies": {
-        "clipboard": "^2.0.0"
-      }
-    },
     "node_modules/vue-color": {
       "version": "2.8.1",
       "resolved": "https://registry.npmjs.org/vue-color/-/vue-color-2.8.1.tgz",
@@ -43967,14 +43958,6 @@
       "resolved": "https://registry.npmjs.org/vue-click-outside/-/vue-click-outside-1.1.0.tgz",
       "integrity": "sha512-pNyvAA9mRXJwPHlHJyjMb4IONSc7khS5lxGcMyE2EIKgNMAO279PWM9Hyq0d5J4FkiSRdmFLwnbjDd5UtPizHQ=="
     },
-    "vue-clipboard2": {
-      "version": "0.3.3",
-      "resolved": "https://registry.npmjs.org/vue-clipboard2/-/vue-clipboard2-0.3.3.tgz",
-      "integrity": "sha512-aNWXIL2DKgJyY/1OOeITwAQz1fHaCIGvUFHf9h8UcoQBG5a74MkdhS/xqoYe7DNZdQmZRL+TAdIbtUs9OyVjbw==",
-      "requires": {
-        "clipboard": "^2.0.0"
-      }
-    },
     "vue-color": {
       "version": "2.8.1",
       "resolved": "https://registry.npmjs.org/vue-color/-/vue-color-2.8.1.tgz",

package.json

@@ -100,7 +100,6 @@
     "v-tooltip": "^2.1.3",
     "vue": "^2.7.14",
     "vue-click-outside": "^1.1.0",
-    "vue-clipboard2": "^0.3.3",
     "vue-cropperjs": "^4.2.0",
     "vue-infinite-loading": "^2.4.5",
     "vue-localstorage": "^0.6.2",