refactor(ui): replace direct clipboard copy with CopyWarning component

ui/src/components/AuthMFA/MfaSettings.vue

@@ -100,14 +100,18 @@
                   class="mr-2"
                   data-test="download-recovery-codes-btn"
                 >Download</v-btn>
-                <v-btn
-                  @click="copyRecoveryCodes()"
-                  color="primary"
-                  tabindex="0"
-                  variant="elevated"
-                  prepend-icon="mdi-content-copy"
-                  data-test="copy-recovery-codes-btn"
-                >Copy</v-btn>
+                <CopyWarning :copied-item="'Recovery codes'">
+                  <template #default="{ copyText }">
+                    <v-btn
+                      @click="copyText(recoveryCodes.value.join('\n'))"
+                      color="primary"
+                      tabindex="0"
+                      variant="elevated"
+                      prepend-icon="mdi-content-copy"
+                      data-test="copy-recovery-codes-btn"
+                    >Copy</v-btn>
+                  </template>
+                </CopyWarning>
               </v-col>
             </v-row>
 
@@ -252,10 +256,10 @@ import { ref, computed, watch } from "vue";
 // eslint-disable-next-line import/no-extraneous-dependencies
 import QrcodeVue from "qrcode.vue";
 import axios, { AxiosError } from "axios";
-import { useClipboard } from "@vueuse/core";
 import { useStore } from "@/store";
 import handleError from "@/utils/handleError";
 import useSnackbar from "@/helpers/snackbar";
+import CopyWarning from "@/components/User/CopyWarning.vue";
 
 const store = useStore();
 const snackbar = useSnackbar();
@@ -342,14 +346,6 @@ watch(() => el.value === 2, async () => {
   }
 });
 
-const copyRecoveryCodes = () => {
-  const codesText = recoveryCodes.value.join("\n");
-  const { copy } = useClipboard();
-  copy(codesText);
-
-  snackbar.showInfo("Recovery codes copied to clipboard.");
-};
-
 const downloadRecoveryCodes = () => {
   const codesText = recoveryCodes.value.join("\n");
   const blob = new Blob([codesText], { type: "text/plain" });

ui/src/components/Connector/ConnectorList.vue

@@ -35,21 +35,25 @@
           </v-row>
         </td>
         <td class="text-center">
-          <v-chip data-test="ip-chip">
-            <v-tooltip location="bottom">
-              <template v-slot:activator="{ props }">
-                <span
-                  v-bind="props"
-                  @click='copyText(`${item.address}:${item.port}`)'
-                  @keypress='copyText(`${item.address}:${item.port}`)'
-                  class="hover-text"
-                >
-                  {{ `${item.address}:${item.port}` }}
-                </span>
-              </template>
-              <span>Copy IP</span>
-            </v-tooltip>
-          </v-chip>
+          <CopyWarning :copied-item="'Connector host'">
+            <template #default="{ copyText }">
+              <v-chip data-test="ip-chip">
+                <v-tooltip location="bottom">
+                  <template v-slot:activator="{ props }">
+                    <span
+                      v-bind="props"
+                      @click='copyText(`${item.address}:${item.port}`)'
+                      @keypress='copyText(`${item.address}:${item.port}`)'
+                      class="hover-text"
+                    >
+                      {{ `${item.address}:${item.port}` }}
+                    </span>
+                  </template>
+                  <span>Copy IP</span>
+                </v-tooltip>
+              </v-chip>
+            </template>
+          </CopyWarning>
         </td>
         <td class="text-center">
           <v-icon
@@ -137,6 +141,7 @@ import { envVariables } from "@/envVariables";
 import DataTable from "../DataTable.vue";
 import ConnectorDelete from "../Connector/ConnectorDelete.vue";
 import ConnectorEdit from "../Connector/ConnectorEdit.vue";
+import CopyWarning from "@/components/User/CopyWarning.vue";
 import hasPermission from "@/utils/permission";
 import { actions, authorizer } from "@/authorizer";
 import handleError from "@/utils/handleError";
@@ -254,13 +259,6 @@ const redirectToDetails = (uid: string) => {
   router.push({ name: "ConnectorDetails", params: { id: uid } });
 };
 
-const copyText = (value: string | undefined) => {
-  if (value) {
-    navigator.clipboard.writeText(value);
-    snackbar.showInfo("Connector host copied to clipboard.");
-  }
-};
-
 const switchConnector = async (uid: string, enable: boolean) => {
   try {
     const payload = {

ui/src/components/Containers/ContainerAdd.vue

@@ -33,18 +33,21 @@
         <p class="text-body-2 font-weight-bold mt-4">
           Run the following command on your Docker host:
         </p>
-
-        <v-text-field
-          :model-value="command()"
-          @click:append="copyCommand"
-          class="code mt-1"
-          variant="outlined"
-          append-icon="mdi-content-copy"
-          readonly
-          active
-          data-test="command-field"
-          density="compact"
-        />
+        <CopyWarning :copied-item="'Command'">
+          <template #default="{ copyText }">
+            <v-text-field
+              :model-value="command()"
+              @click:append="copyText(command())"
+              class="code mt-1"
+              variant="outlined"
+              append-icon="mdi-content-copy"
+              readonly
+              active
+              data-test="command-field"
+              density="compact"
+            />
+          </template>
+        </CopyWarning>
 
         <v-divider />
 
@@ -74,7 +77,7 @@
 <script setup lang="ts">
 import { computed, ref } from "vue";
 import { useStore } from "@/store";
-import useSnackbar from "@/helpers/snackbar";
+import CopyWarning from "@/components/User/CopyWarning.vue";
 
 const props = defineProps({
   size: {
@@ -84,7 +87,6 @@ const props = defineProps({
   },
 });
 const store = useStore();
-const snackbar = useSnackbar();
 const dialog = ref(false);
 
 const tenant = computed(() => store.getters["auth/tenant"]);
@@ -96,11 +98,6 @@ const command = () => {
   // eslint-disable-next-line vue/max-len
   return `curl -sSf ${window.location.protocol}//${hostname}${port}/install.sh | TENANT_ID=${tenant.value} SERVER_ADDRESS=${window.location.protocol}//${hostname}${port} sh -s connector`;
 };
-
-const copyCommand = () => {
-  navigator.clipboard.writeText(command());
-  snackbar.showInfo("Command copied to clipboard");
-};
 </script>
 
 <style lang="scss" scoped>

ui/src/components/Devices/DeviceAdd.vue

@@ -33,18 +33,19 @@
         <p class="text-body-2 font-weight-bold mt-4">
           Run the following command on your device:
         </p>
-
-        <v-text-field
-          :model-value="command()"
-          @click:append="copyCommand"
-          class="code mt-1"
-          variant="outlined"
-          append-icon="mdi-content-copy"
-          readonly
-          active
-          data-test="command-field"
-          density="compact"
-        />
+        <CopyWarning :copied-item="'Command'">
+          <template #default="{ copyText }">
+            <v-text-field
+              :model-value="command()"
+              @click:append="copyText(command())"
+              class="code mt-1"
+              variant="outlined"
+              append-icon="mdi-content-copy"
+              readonly
+              active
+              data-test="command-field"
+              density="compact"
+            /></template> </CopyWarning>
 
         <v-divider />
 
@@ -74,7 +75,7 @@
 <script setup lang="ts">
 import { computed, ref } from "vue";
 import { useStore } from "@/store";
-import useSnackbar from "@/helpers/snackbar";
+import CopyWarning from "@/components/User/CopyWarning.vue";
 
 const props = defineProps({
   size: {
@@ -85,7 +86,6 @@ const props = defineProps({
 });
 
 const store = useStore();
-const snackbar = useSnackbar();
 const dialog = ref(false);
 const tenant = computed(() => store.getters["auth/tenant"]);
 
@@ -96,11 +96,6 @@ const command = () => {
   // eslint-disable-next-line vue/max-len
   return `curl -sSf ${window.location.protocol}//${hostname}${port}/install.sh | TENANT_ID=${tenant.value} SERVER_ADDRESS=${window.location.protocol}//${hostname}${port} sh`;
 };
-
-const copyCommand = () => {
-  navigator.clipboard.writeText(command());
-  snackbar.showInfo("Command copied to clipboard");
-};
 </script>
 
 <style lang="scss" scoped>

ui/src/components/QuickConnection/QuickConnectionList.vue

@@ -20,7 +20,6 @@
       <v-card :key="i" data-test="device-card">
         <v-list-item
           @click="openDialog(item.uid)"
-          @keydown="copyMacro(sshidAddress(item))"
           :key="i"
           class="ma-0 pa-0 card"
           data-test="device-list-item"
@@ -37,14 +36,24 @@
               <v-chip class="bg-grey-darken-4">
                 <v-tooltip location="bottom">
                   <template v-slot:activator="{ props }">
-                    <span
-                      v-bind="props"
-                      @click.stop="copyText(sshidAddress(item))"
-                      @keypress.stop="copyText(sshidAddress(item))"
-                      class="hover-text"
-                      data-test="copy-id-button">
-                      {{ sshidAddress(item) }}
-                    </span>
+                    <CopyWarning
+                      ref="copyRef"
+                      :copied-item="'Device SSHID'"
+                      :macro="sshidAddress(item)"
+                    >
+                      <template #default="{ copyText }">
+                        <span
+                          v-bind="props"
+                          tabindex="0"
+                          class="hover-text"
+                          @click.stop="copyText(sshidAddress(item))"
+                          @keydown.enter.stop="copyText(sshidAddress(item))"
+                          data-test="copy-id-button"
+                        >
+                          {{ sshidAddress(item) }}
+                        </span>
+                      </template>
+                    </CopyWarning>
 
                   </template>
                   <span>Copy ID</span>
@@ -85,7 +94,6 @@
 </template>
 
 <script setup lang="ts">
-import { useMagicKeys } from "@vueuse/core";
 import { ref, onMounted, computed, watch } from "vue";
 import { VList } from "vuetify/components";
 import TerminalDialog from "../Terminal/TerminalDialog.vue";
@@ -96,13 +104,15 @@ import DeviceIcon from "../Devices/DeviceIcon.vue";
 import handleError from "@/utils/handleError";
 import { IDevice } from "@/interfaces/IDevice";
 import useSnackbar from "@/helpers/snackbar";
+import CopyWarning from "@/components/User/CopyWarning.vue";
 
 interface Device {
   online: boolean
 }
 
 const store = useStore();
 const snackbar = useSnackbar();
+const copyRef = ref<InstanceType<typeof CopyWarning> | null>(null);
 const loading = ref(false);
 const itemsPerPage = ref(10);
 const page = ref();
@@ -177,29 +187,6 @@ watch(itemsPerPage, async () => {
 });
 
 const sshidAddress = (item: IDevice) => `${item.namespace}.${item.name}@${window.location.hostname}`;
-
-const copyText = (value: string | undefined) => {
-  if (value) {
-    navigator.clipboard.writeText(value);
-    snackbar.showInfo("Device SSHID copied to clipboard.");
-  }
-};
-
-const copyMacro = (value: string | undefined) => {
-  let executed = false;
-
-  return useMagicKeys({
-    passive: false,
-    onEventFired(e) {
-      if (!executed && value && e.ctrlKey && e.key === "c" && e.type === "keydown") {
-        executed = true;
-        navigator.clipboard.writeText(value);
-        snackbar.showInfo("Device SSHID copied to clipboard.");
-        e.preventDefault();
-      }
-    },
-  });
-};
 </script>
 
 <style scoped>

ui/src/components/Setting/SettingNamespace.vue

@@ -89,17 +89,21 @@
             <template #append>
               <v-chip class="ml-1">
                 <v-tooltip location="top">
-                  <template v-slot:activator="{ props }">
-                    <span
-                      v-bind="props"
-                      @click="copyText(tenant)"
-                      @keypress="copyText(tenant)"
-                      class="hover-text"
-                      data-test="tenant-copy-btn"
-                    >
-                      {{ tenant }}
-                      <v-icon icon="mdi-content-copy" />
-                    </span>
+                  <template #activator="props">
+                    <CopyWarning :copied-item="'Tenant ID'">
+                      <template #default="{ copyText }">
+                        <span
+                          v-bind="props"
+                          @click="copyText(tenant)"
+                          @keypress="copyText(tenant)"
+                          class="hover-text"
+                          data-test="tenant-copy-btn"
+                        >
+                          {{ tenant }}
+                          <v-icon icon="mdi-content-copy" />
+                        </span>
+                      </template>
+                    </CopyWarning>
                   </template>
                   <span data-test="tenant-tooltip">Copy ID</span>
                 </v-tooltip>
@@ -196,6 +200,7 @@ import NamespaceEdit from "../Namespace/NamespaceEdit.vue";
 import handleError from "@/utils/handleError";
 import NamespaceLeave from "../Namespace/NamespaceLeave.vue";
 import useSnackbar from "@/helpers/snackbar";
+import CopyWarning from "@/components/User/CopyWarning.vue";
 
 const store = useStore();
 const snackbar = useSnackbar();
@@ -232,13 +237,6 @@ const cancel = (type: string) => {
   }
 };
 
-const copyText = (value: string | undefined) => {
-  if (value) {
-    navigator.clipboard.writeText(value);
-    snackbar.showInfo("Tenant ID copied to clipboard.");
-  }
-};
-
 const getNamespace = async () => {
   try {
     await store.dispatch("namespaces/get", tenant.value);