code refactor

src/components/mobile/InformationSheet.vue

@@ -9,9 +9,9 @@
             <div class="padding-horizontal padding-bottom">
                 <p class="no-margin-top margin-bottom-half" v-if="hint">
                     <span>{{ hint }}</span>
-                    <f7-link id="copy-to-clipboard-icon" ref="copyToClipboardIcon"
+                    <f7-link class="icon-after-text"
-                             class="icon-after-text"
                              icon-only icon-f7="doc_on_doc"
+                             @click="copyBackupCodes"
                              v-if="enableCopy"
                     ></f7-link>
                 </p>
@@ -25,11 +25,9 @@
 </template>
 
 <script setup lang="ts">
-import { useTemplateRef, watch, onMounted, onUpdated } from 'vue';
-
 import { useI18n } from '@/locales/helpers.ts';
 
-import { ClipboardHolder } from '@/lib/clipboard.ts';
+import { copyTextToClipboard } from '@/lib/ui/common.ts';
 
 const props = defineProps<{
     title?: string;
@@ -47,24 +45,9 @@ const emit = defineEmits<{
 
 const { tt } = useI18n();
 
-const iconCopyToClipboard = useTemplateRef<unknown>('copyToClipboardIcon');
+function copyBackupCodes(): void {
-
+    copyTextToClipboard(props.information);
-let clipboardHolder: ClipboardHolder | null = null;
+    emit('info:copied');
-
-function makeCopyToClipboardClickable(): void {
-    if (clipboardHolder) {
-        return;
-    }
-
-    if (iconCopyToClipboard.value) {
-        clipboardHolder = ClipboardHolder.create({
-            el: '#copy-to-clipboard-icon',
-            text: props.information,
-            successCallback: function () {
-                emit('info:copied');
-            }
-        });
-    }
 }
 
 function close(): void {
@@ -74,18 +57,4 @@ function close(): void {
 function onSheetClosed(): void {
     close();
 }
-
-onMounted(() => {
-    makeCopyToClipboardClickable();
-});
-
-onUpdated(() => {
-    makeCopyToClipboardClickable();
-});
-
-watch(() => props.information, (newValue) => {
-    if (clipboardHolder) {
-        clipboardHolder.setClipboardText(newValue);
-    }
-});
 </script>

src/lib/clipboard.ts

@@ -1,76 +0,0 @@
-import Clipboard from 'clipboard';
-
-export interface ClipboardCreateContext {
-    readonly el: string | Element;
-    readonly text: string;
-    readonly successCallback?: (e: ClipboardEvent) => void;
-    readonly errorCallback?: (e: ClipboardEvent) => void;
-}
-
-export interface ClipboardEvent {
-    readonly text: string;
-    readonly action: string;
-}
-
-export class ClipboardTextHolder {
-    private text: string;
-
-    public constructor(text: string) {
-        this.text = text;
-    }
-
-    public getText(): string {
-        return this.text;
-    }
-
-    public setText(text: string): void {
-        this.text = text;
-    }
-}
-
-export class ClipboardHolder {
-    private readonly textHolder: ClipboardTextHolder;
-    private readonly clipboard: Clipboard;
-
-    private constructor(textHolder: ClipboardTextHolder, clipboard: Clipboard) {
-        this.textHolder = textHolder;
-        this.clipboard = clipboard;
-    }
-
-    public setClipboardText(text: string): void {
-        this.textHolder.setText(text);
-    }
-
-    public destroy(): void {
-        this.clipboard.destroy();
-    }
-
-    public static create({ el, text, successCallback, errorCallback }: ClipboardCreateContext): ClipboardHolder {
-        const textHolder = new ClipboardTextHolder(text);
-        const clipboard = new Clipboard(el, {
-            text: function () {
-                return textHolder.getText();
-            }
-        });
-
-        clipboard.on('success', (e) => {
-            if (successCallback) {
-                successCallback({
-                    text: e.text,
-                    action: e.action
-                });
-            }
-        });
-
-        clipboard.on('error', (e) => {
-            if (errorCallback) {
-                errorCallback({
-                    text: e.text,
-                    action: e.action
-                });
-            }
-        });
-
-        return new ClipboardHolder(textHolder, clipboard);
-    }
-}

src/lib/ui/common.ts

@@ -1,3 +1,5 @@
+import Clipboard from 'clipboard';
+
 import { ThemeType } from '@/core/theme.ts';
 
 import { type AmountColor, PresetAmountColor } from '@/core/color.ts';
@@ -76,6 +78,12 @@ export function setExpenseAndIncomeAmountColor(expenseAmountColorType: number, i
     }
 }
 
+export function copyTextToClipboard(text: string, container?: Element | null): void {
+    Clipboard.copy(text, {
+        container: container || document.body
+    });
+}
+
 export function startDownloadFile(fileName: string, fileData: Blob): void {
     const dataObjectUrl = URL.createObjectURL(fileData);
     const dataLink = document.createElement('a');

src/views/desktop/user/settings/tabs/UserTwoFactorAuthSettingTab.vue

@@ -81,9 +81,8 @@
             <v-card v-if="currentBackupCode">
                 <template #title>
                     <span>{{ tt('Backup Code') }}</span>
-                    <v-btn id="copy-to-clipboard-icon" ref="copyToClipboardIcon"
+                    <v-btn density="compact" color="default" variant="text" size="24"
-                           density="compact" color="default" variant="text" size="24"
+                           class="ml-2" :icon="true" @click="copyBackupCodes">
-                           class="ml-2" :icon="true">
                         <v-icon :icon="mdiContentCopy" size="20" />
                         <v-tooltip activator="parent">{{ tt('Copy') }}</v-tooltip>
                     </v-btn>
@@ -105,13 +104,13 @@
 <script setup lang="ts">
 import SnackBar from '@/components/desktop/SnackBar.vue';
 
-import { ref, useTemplateRef, watch, nextTick } from 'vue';
+import { ref, useTemplateRef } from 'vue';
 
 import { useI18n } from '@/locales/helpers.ts';
 
 import { useTwoFactorAuthStore } from '@/stores/twoFactorAuth.ts';
 
-import { ClipboardHolder } from '@/lib/clipboard.ts';
+import { copyTextToClipboard } from '@/lib/ui/common.ts';
 
 import {
     mdiContentCopy
@@ -124,7 +123,6 @@ const { tt } = useI18n();
 const twoFactorAuthStore = useTwoFactorAuthStore();
 
 const snackbar = useTemplateRef<SnackBarType>('snackbar');
-const iconCopyToClipboard = useTemplateRef<unknown>('copyToClipboardIcon');
 
 const status = ref<boolean | null>(null);
 const loading = ref<boolean>(true);
@@ -138,24 +136,6 @@ const enableConfirming = ref<boolean>(false);
 const disabling = ref<boolean>(false);
 const regenerating = ref<boolean>(false);
 
-let clipboardHolder: ClipboardHolder | null = null;
-
-function makeCopyToClipboardClickable(): void {
-    if (clipboardHolder) {
-        return;
-    }
-
-    if (iconCopyToClipboard.value) {
-        clipboardHolder = ClipboardHolder.create({
-            el: '#copy-to-clipboard-icon',
-            text: currentBackupCode.value,
-            successCallback: function () {
-                snackbar.value?.showMessage('Backup codes copied');
-            }
-        });
-    }
-}
-
 function init(): void {
     loading.value = true;
 
@@ -223,10 +203,6 @@ function enableConfirm(): void {
         if (response.recoveryCodes && response.recoveryCodes.length) {
             currentBackupCode.value = response.recoveryCodes.join('\n');
         }
-
-        nextTick(() => {
-            makeCopyToClipboardClickable();
-        });
     }).catch(error => {
         enableConfirming.value = false;
 
@@ -292,10 +268,6 @@ function regenerateBackupCode(): void {
         regenerating.value = false;
 
         currentBackupCode.value = response.recoveryCodes.join('\n');
-
-        nextTick(() => {
-            makeCopyToClipboardClickable();
-        });
     }).catch(error => {
         regenerating.value = false;
 
@@ -317,11 +289,10 @@ function reset(): void {
     regenerating.value = false;
 }
 
-watch(currentBackupCode, (newValue) => {
+function copyBackupCodes(): void {
-    if (clipboardHolder) {
+    copyTextToClipboard(currentBackupCode.value);
-        clipboardHolder.setClipboardText(newValue);
+    snackbar.value?.showMessage('Backup codes copied');
-    }
+}
-});
 
 defineExpose({
     reset