feat(files): Add clipboard copy to webdav url in files settings

Signed-off-by: John Molakvoæ <skjnldsv@protonmail.com>

Author: skjnldsv

apps/files/src/views/Settings.vue

@@ -47,7 +47,19 @@
 
 		<!-- Webdav URL-->
 		<NcAppSettingsSection id="webdav" :title="t('files', 'Webdav')">
-			<NcInputField type="text" readonly="readonly" :value="webdavUrl" />
+			<NcInputField id="webdav-url-input"
+				:show-trailing-button="true"
+				:success="webdavUrlCopied"
+				:trailing-button-label="t('files', 'Copy to clipboard')"
+				:value="webdavUrl"
+				readonly="readonly"
+				type="url"
+				@focus="$event.target.select()"
+				@trailing-button-click="copyCloudId">
+				<template #trailing-button-icon>
+					<Clipboard :size="20" />
+				</template>
+			</NcInputField>
 			<em>
 				<a :href="webdavDocs" target="_blank" rel="noreferrer noopener">
 					{{ t('files', 'Use this address to access your Files via WebDAV') }} ↗
@@ -61,15 +73,17 @@
 import NcAppSettingsDialog from '@nextcloud/vue/dist/Components/NcAppSettingsDialog.js'
 import NcAppSettingsSection from '@nextcloud/vue/dist/Components/NcAppSettingsSection.js'
 import NcCheckboxRadioSwitch from '@nextcloud/vue/dist/Components/NcCheckboxRadioSwitch.js'
+import Clipboard from 'vue-material-design-icons/Clipboard.vue'
 import NcInputField from '@nextcloud/vue/dist/Components/NcInputField'
 import Setting from '../components/Setting.vue'
 
+import { emit } from '@nextcloud/event-bus'
 import { generateRemoteUrl, generateUrl } from '@nextcloud/router'
 import { getCurrentUser } from '@nextcloud/auth'
 import { loadState } from '@nextcloud/initial-state'
-import { emit } from '@nextcloud/event-bus'
-import axios from '@nextcloud/axios'
+import { showError, showSuccess } from '@nextcloud/dialogs'
 import { translate } from '@nextcloud/l10n'
+import axios from '@nextcloud/axios'
 
 const userConfig = loadState('files', 'config', {
 	show_hidden: false,
@@ -79,6 +93,7 @@ const userConfig = loadState('files', 'config', {
 export default {
 	name: 'Settings',
 	components: {
+		Clipboard,
 		NcAppSettingsDialog,
 		NcAppSettingsSection,
 		NcCheckboxRadioSwitch,
@@ -104,6 +119,7 @@ export default {
 			// Webdav infos
 			webdavUrl: generateRemoteUrl('dav/files/' + encodeURIComponent(getCurrentUser()?.uid)),
 			webdavDocs: 'https://docs.nextcloud.com/server/stable/go.php?to=user-webdav',
+			webdavUrlCopied: false,
 		}
 	},
 
@@ -129,6 +145,23 @@ export default {
 			})
 		},
 
+		async copyCloudId() {
+			document.querySelector('input#webdav-url-input').select()
+
+			if (!navigator.clipboard) {
+				// Clipboard API not available
+				showError(t('files', 'Clipboard is not available'))
+				return
+			}
+
+			await navigator.clipboard.writeText(this.webdavUrl)
+			this.webdavUrlCopied = true
+			showSuccess(t('files', 'Webdav URL copied to clipboard'))
+			setTimeout(() => {
+				this.webdavUrlCopied = false
+			}, 5000)
+		},
+
 		t: translate,
 	},
 }