refactor(ui): remove copyToClipborad function usage

Author: fiftin

web/src/components/CopyClipboardButton.vue

@@ -1,17 +1,19 @@
 <template>
-  <div>
+  <span>
+    <!-- eslint-disable-next-line vuejs-accessibility/form-control-has-label -->
     <textarea
       style="position: absolute; left: -9999px; top: -9999px;"
       ref="copy_to_clipboard_textarea"
     ></textarea>
+
     <v-btn
       icon
-      color="white"
       @click="copy()"
+      :large="large"
     >
       <v-icon>mdi-content-copy</v-icon>
     </v-btn>
-  </div>
+  </span>
 </template>
 
 <script>
@@ -22,8 +24,10 @@ export default {
     text: String,
     successMessage: {
       type: String,
-      default: 'Text copied to clipboard!'
+      default: 'Text copied to clipboard!',
     },
+    large: Boolean,
+    color: String,
   },
   methods: {
     copy() {
@@ -40,15 +44,15 @@ export default {
 
         EventBus.$emit('i-snackbar', {
           color: 'success',
-          text: this.successMessage
+          text: this.successMessage,
         });
       } catch (e) {
         EventBus.$emit('i-snackbar', {
           color: 'error',
-          text: `Can't copy to clipboard: ${e.message}`
+          text: `Can't copy to clipboard: ${e.message}`,
         });
       }
-    }
-  }
+    },
+  },
 };
 </script>

web/src/components/UserForm.vue

@@ -169,15 +169,13 @@
               >
                 {{ item.totp.recovery_code }}
               </code>
-              <v-btn
+
+              <CopyClipboardButton
                 style="position: absolute; right: -4px; top: -12px;"
-                icon
+                :text="item.totp.recovery_code"
                 large
                 color="white"
-                @click="copyToClipboard(item.totp.recovery_code)"
-              >
-                <v-icon>mdi-content-copy</v-icon>
-              </v-btn>
+              />
             </div>
           </div>
         </div>
@@ -188,13 +186,12 @@
 <script>
 import ItemFormBase from '@/components/ItemFormBase';
 import axios from 'axios';
-import EventBus from '@/event-bus';
 import EditDialog from '@/components/EditDialog.vue';
 import ChangePasswordForm from '@/components/ChangePasswordForm.vue';
-import copyToClipboard from '@/lib/copyToClipboard';
+import CopyClipboardButton from '@/components/CopyClipboardButton.vue';
 
 export default {
-  components: { ChangePasswordForm, EditDialog },
+  components: { CopyClipboardButton, ChangePasswordForm, EditDialog },
   props: {
     isAdmin: Boolean,
     authMethods: Object,
@@ -250,7 +247,6 @@ export default {
   },
 
   methods: {
-    copyToClipboard,
 
     afterLoadData() {
       if (this.item.totp == null) {

web/src/views/Runners.vue

@@ -362,7 +362,6 @@ import RunnerForm from '@/components/RunnerForm.vue';
 import axios from 'axios';
 import DashboardMenu from '@/components/DashboardMenu.vue';
 import delay from '@/lib/delay';
-import copyToClipboard from '@/lib/copyToClipboard';
 import CopyClipboardButton from '@/components/CopyClipboardButton.vue';
 
 export default {
@@ -449,8 +448,6 @@ semaphore runner start --no-config`;
 
   methods: {
 
-    copyToClipboard,
-
     async clearCache(runner) {
       const projectId = this.projectId || this.getProjectIdOfItem(runner.id);
 

web/src/views/Tokens.vue

@@ -43,13 +43,11 @@
           <v-icon>mdi-eye</v-icon>
         </v-btn>
 
-        <v-btn
-          icon
+        <CopyClipboardButton
           v-if="item.token_id"
-          @click="copyToClipboard(item.token_id)"
-        >
-          <v-icon>mdi-content-copy</v-icon>
-        </v-btn>
+          :text="item.token_id"
+          success-message="The token has been copied to the clipboard."
+        />
 
       </template>
 
@@ -86,11 +84,13 @@
 import EventBus from '@/event-bus';
 import ItemListPageBase from '@/components/ItemListPageBase';
 import axios from 'axios';
+import CopyClipboardButton from '@/components/CopyClipboardButton.vue';
 
 export default {
   mixins: [ItemListPageBase],
 
   components: {
+    CopyClipboardButton,
   },
 
   props: {
@@ -173,21 +173,6 @@ export default {
     getEventName() {
       return 'i-token';
     },
-
-    async copyToClipboard(text) {
-      try {
-        await window.navigator.clipboard.writeText(text);
-        EventBus.$emit('i-snackbar', {
-          color: 'success',
-          text: 'The token has been copied to the clipboard.',
-        });
-      } catch (e) {
-        EventBus.$emit('i-snackbar', {
-          color: 'error',
-          text: `Can't copy the token: ${e.message}`,
-        });
-      }
-    },
   },
 };
 </script>

web/src/views/project/IntegrationExtractor.vue

@@ -1,10 +1,10 @@
 <template xmlns:v-slot="http://www.w3.org/1999/XSL/Transform">
   <div v-if="integration != null">
-    <IntegrationExtractorCrumb :integration="integration"/>
+    <IntegrationExtractorCrumb :integration="integration" />
 
     <div class="px-4 pt-3 pb-2">
       <v-switch
-         class="mt-0"
+        class="mt-0"
         v-model="integration.searchable"
         :label="$t('globalAlias')"
         @change="updateIntegration()"
@@ -22,11 +22,12 @@
 
       <div v-else v-for="alias of (aliases || [])" :key="alias.id">
         <code class="mr-2">{{ alias.url }}</code>
-        <v-btn icon
-               @click="copyToClipboard(
-                 alias.url, 'The alias URL  has been copied to the clipboard.')">
-          <v-icon>mdi-content-copy</v-icon>
-        </v-btn>
+
+        <CopyClipboardButton
+          :text="alias.url"
+          success-message="The alias URL  has been copied to the clipboard."
+        />
+
         <v-btn icon @click="deleteAlias(alias.id)">
           <v-icon>mdi-delete</v-icon>
         </v-btn>
@@ -45,21 +46,23 @@
 
     <IntegrationMatcher class="mb-6" v-if="integration.searchable" />
 
-    <IntegrationExtractValue/>
+    <IntegrationExtractValue />
 
   </div>
 </template>
 <script>
 import IntegrationsBase from '@/views/project/IntegrationsBase';
-import copyToClipboard from '@/lib/copyToClipboard';
 import axios from 'axios';
+import CopyClipboardButton from '@/components/CopyClipboardButton.vue';
 import IntegrationExtractValue from './IntegrationExtractValue.vue';
 import IntegrationMatcher from './IntegrationMatcher.vue';
 import IntegrationExtractorCrumb from './IntegrationExtractorCrumb.vue';
 
 export default {
   mixins: [IntegrationsBase],
-  components: { IntegrationMatcher, IntegrationExtractValue, IntegrationExtractorCrumb },
+  components: {
+    CopyClipboardButton, IntegrationMatcher, IntegrationExtractValue, IntegrationExtractorCrumb,
+  },
   props: {
     projectId: Number,
   },
@@ -79,7 +82,6 @@ export default {
   },
 
   methods: {
-    copyToClipboard,
     allowActions() {
       return true;
     },

web/src/views/project/Integrations.vue

@@ -52,15 +52,16 @@
 
       <div v-else v-for="alias of (aliases || [])" :key="alias.id">
         <code class="mr-2">{{ alias.url }}</code>
-        <v-btn icon
-               @click="copyToClipboard(alias.url, $t('aliasUrlCopied'))">
-          <v-icon>mdi-content-copy</v-icon>
-        </v-btn>
+
+        <CopyClipboardButton
+          :text="alias.url"
+          :success-message="$t('aliasUrlCopied')"
+        />
+
         <v-btn icon @click="deleteAlias(alias.id)">
           <v-icon>mdi-delete</v-icon>
         </v-btn>
       </div>
-
       <v-btn color="primary" @click="addAlias()" :disabled="aliases == null">
         {{ aliases == null ? $t('LoadAlias') : $t('AddAlias') }}
       </v-btn>
@@ -85,7 +86,7 @@
         <router-link
           :to="`/project/${projectId}/templates/${item.template_id}`"
         >
-          {{ (templates.find((t) => t.id === item.template_id) || {name: '—'}).name }}
+          {{ (templates.find((t) => t.id === item.template_id) || { name: '—' }).name }}
         </router-link>
       </template>
       <template v-slot:item.actions="{ item }">
@@ -109,11 +110,11 @@ import { USER_PERMISSIONS } from '@/lib/constants';
 import ItemListPageBase from '@/components/ItemListPageBase';
 import IntegrationForm from '@/components/IntegrationForm.vue';
 import IntegrationsBase from '@/views/project/IntegrationsBase';
-import copyToClipboard from '@/lib/copyToClipboard';
+import CopyClipboardButton from '@/components/CopyClipboardButton.vue';
 
 export default {
   mixins: [ItemListPageBase, IntegrationsBase],
-  components: { IntegrationForm },
+  components: { IntegrationForm, CopyClipboardButton },
   data() {
     return {
       templates: null,
@@ -129,7 +130,6 @@ export default {
   },
 
   methods: {
-    copyToClipboard,
     allowActions() {
       return this.can(USER_PERMISSIONS.updateProject);
     },

web/src/views/project/template/TemplateTerraformState.vue

@@ -203,12 +203,10 @@
 
       <div v-else v-for="alias of (aliases || [])" :key="alias.id">
         <code class="mr-2">{{ alias.url }}</code>
-        <v-btn
-          icon
-          @click="copyToClipboard(alias.url, $t('aliasUrlCopied'))"
-        >
-          <v-icon>mdi-content-copy</v-icon>
-        </v-btn>
+        <CopyClipboardButton
+          :text="alias.url"
+          :success-message="$t('aliasUrlCopied')"
+        />
         <v-btn icon @click="editAlias(alias.id)">
           <v-icon>mdi-pencil</v-icon>
         </v-btn>
@@ -289,7 +287,6 @@
 <script>
 
 import axios from 'axios';
-import EventBus from '@/event-bus';
 import TerraformInventoryForm from '@/components/TerraformInventoryForm.vue';
 import EditDialog from '@/components/EditDialog.vue';
 import { APP_INVENTORY_TITLE } from '@/lib/constants';
@@ -300,7 +297,7 @@ import TerraformAliasForm from '@/components/TerraformAliasForm.vue';
 import TaskStatus from '@/components/TaskStatus.vue';
 import TaskLink from '@/components/TaskLink.vue';
 import TerraformStateView from '@/components/TerraformStateView.vue';
-import copyToClipboard from '@/lib/copyToClipboard';
+import CopyClipboardButton from '@/components/CopyClipboardButton.vue';
 
 export default {
   mixins: [AppsMixin],
@@ -311,6 +308,7 @@ export default {
   },
 
   components: {
+    CopyClipboardButton,
     TerraformStateView,
     TaskLink,
     TaskStatus,
@@ -381,7 +379,6 @@ export default {
   },
 
   methods: {
-    copyToClipboard,
 
     deleteState(id) {
       console.log(id);