refactor(federatedfilessharing): Make copy logic more resilient and use Typescript

Signed-off-by: Ferdinand Thiessen <opensource@fthiessen.de>

apps/federatedfilesharing/src/components/PersonalSettings.vue

@@ -70,15 +70,13 @@
 	</NcSettingsSection>
 </template>
 
-<script>
-import { showError, showSuccess } from '@nextcloud/dialogs'
+<script lang="ts">
+import { showSuccess } from '@nextcloud/dialogs'
 import { loadState } from '@nextcloud/initial-state'
 import { t } from '@nextcloud/l10n'
 import { imagePath } from '@nextcloud/router'
 import NcSettingsSection from '@nextcloud/vue/dist/Components/NcSettingsSection.js'
 import NcButton from '@nextcloud/vue/dist/Components/NcButton.js'
-import Mastodon from 'vue-material-design-icons/Mastodon.vue'
-import Facebook from 'vue-material-design-icons/Facebook.vue'
 import Web from 'vue-material-design-icons/Web.vue'
 import Clipboard from 'vue-material-design-icons/ContentCopy.vue'
 
@@ -87,14 +85,15 @@ export default {
 	components: {
 		NcButton,
 		NcSettingsSection,
-		Mastodon,
-		Facebook,
 		Web,
 		Clipboard,
 	},
 	setup() {
 		return {
 			t,
+
+			cloudId: loadState<string>('federatedfilesharing', 'cloudId'),
+			reference: loadState<string>('federatedfilesharing', 'reference'),
 			urlFacebookIcon: imagePath('core', 'facebook'),
 			urlMastodonIcon: imagePath('core', 'mastodon'),
 			urlXIcon: imagePath('core', 'x'),
@@ -105,8 +104,6 @@ export default {
 			color: loadState('federatedfilesharing', 'color'),
 			textColor: loadState('federatedfilesharing', 'textColor'),
 			logoPath: loadState('federatedfilesharing', 'logoPath'),
-			reference: loadState('federatedfilesharing', 'reference'),
-			cloudId: loadState('federatedfilesharing', 'cloudId'),
 			docUrlFederated: loadState('federatedfilesharing', 'docUrlFederated'),
 			showHtml: false,
 			isCopied: false,
@@ -148,18 +145,18 @@ export default {
 		},
 	},
 	methods: {
-		async copyCloudId() {
-			if (!navigator.clipboard) {
-				// Clipboard API not available
-				showError(t('federatedfilesharing', 'Clipboard is not available'))
-				return
+		async copyCloudId(): Promise<void> {
+			try {
+				await navigator.clipboard.writeText(this.cloudId)
+				showSuccess(t('federatedfilesharing', 'Cloud ID copied to the clipboard'))
+			} catch (e) {
+				// no secure context or really old browser - need a fallback
+				window.prompt(t('federatedfilesharing', 'Clipboard not available. Please copy the cloud ID manually.'), this.reference)
 			}
-			await navigator.clipboard.writeText(this.cloudId)
 			this.isCopied = true
-			showSuccess(t('federatedfilesharing', 'Copied!'))
-			this.$refs.clipboard.$el.focus()
 		},
-		goTo(url) {
+
+		goTo(url: string): void {
 			window.location.href = url
 		},
 	},