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

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

diff --git a/apps/federatedfilesharing/src/components/PersonalSettings.vue b/apps/federatedfilesharing/src/components/PersonalSettings.vue
index 190b55f99f3589c9e0ea7ed24050ea8b871b7ec6..fbabbaa09c726755f08cdc30f1f63707e32f9e30 100644 (file)
--- a/apps/federatedfilesharing/src/components/PersonalSettings.vue
+++ b/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
                },
        },