feat(ui): copy to clipboard for non-ssl hosts

fiftin · fiftin · commit 85b1d436f43d · 2025-07-21T00:00:42.000+05:00
diff --git a/web/src/components/CopyClipboardButton.vue b/web/src/components/CopyClipboardButton.vue
@@ -0,0 +1,54 @@
+<template>
+  <div>
+    <textarea
+      style="position: absolute; left: -9999px; top: -9999px;"
+      ref="copy_to_clipboard_textarea"
+    ></textarea>
+    <v-btn
+      icon
+      color="white"
+      @click="copy()"
+    >
+      <v-icon>mdi-content-copy</v-icon>
+    </v-btn>
+  </div>
+</template>
+
+<script>
+import EventBus from '@/event-bus';
+
+export default {
+  props: {
+    text: String,
+    successMessage: {
+      type: String,
+      default: 'Text copied to clipboard!'
+    },
+  },
+  methods: {
+    copy() {
+      try {
+        const el = this.$refs.copy_to_clipboard_textarea;
+        el.value = this.text;
+        el.focus();
+        el.select();
+        const successful = document.execCommand('copy');
+
+        if (!successful) {
+          throw new Error('Fallback copy failed');
+        }
+
+        EventBus.$emit('i-snackbar', {
+          color: 'success',
+          text: this.successMessage
+        });
+      } catch (e) {
+        EventBus.$emit('i-snackbar', {
+          color: 'error',
+          text: `Can't copy to clipboard: ${e.message}`
+        });
+      }
+    }
+  }
+};
+</script>
diff --git a/web/src/components/UserForm.vue b/web/src/components/UserForm.vue
@@ -191,6 +191,7 @@ 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';
 
 export default {
   components: { ChangePasswordForm, EditDialog },
@@ -249,6 +250,8 @@ export default {
   },
 
   methods: {
+    copyToClipboard,
+
     afterLoadData() {
       if (this.item.totp == null) {
         this.totpEnabled = false;
@@ -259,21 +262,6 @@ export default {
       }
     },
 
-    async copyToClipboard(text) {
-      try {
-        await window.navigator.clipboard.writeText(text);
-        EventBus.$emit('i-snackbar', {
-          color: 'success',
-          text: 'The recovery code has been copied to your clipboard.',
-        });
-      } catch (e) {
-        EventBus.$emit('i-snackbar', {
-          color: 'error',
-          text: `Can't copy the recovery code: ${e.message}`,
-        });
-      }
-    },
-
     getItemsUrl() {
       return '/api/users';
     },
diff --git a/web/src/lib/copyToClipboard.js b/web/src/lib/copyToClipboard.js
@@ -2,7 +2,29 @@ import EventBus from '@/event-bus';
 
 export default async function copyToClipboard(content, message) {
   try {
-    await window.navigator.clipboard.writeText(content);
+    const el = document.createElement('textarea');
+    el.value = this.link_url;
+    el.setAttribute('readonly', '');
+    el.style.position = 'absolute';
+    el.style.left = '-9999px';
+    document.body.appendChild(el);
+    const selected = document.getSelection().rangeCount > 0
+      ? document.getSelection().getRangeAt(0) : false;
+    el.select();
+    document.execCommand('copy');
+    document.body.removeChild(el);
+    if (selected) {
+      document.getSelection().removeAllRanges();
+      document.getSelection().addRange(selected);
+    }
+
+    const successful = document.execCommand('copy');
+    // document.body.removeChild(textArea);
+
+    if (!successful) {
+      throw new Error('Fallback copy failed');
+    }
+
     EventBus.$emit('i-snackbar', {
       color: 'success',
       text: message,
diff --git a/web/src/views/Runners.vue b/web/src/views/Runners.vue
@@ -51,14 +51,11 @@
                 style="background: gray; color: white; display: block; font-size: 14px;"
               >{{ (newRunner || {}).token }}</code>
 
-              <v-btn
+              <CopyClipboardButton
                 style="position: absolute; right: 10px; top: 2px;"
-                icon
-                color="white"
-                @click="copyToClipboard((newRunner || {}).token)"
-              >
-                <v-icon>mdi-content-copy</v-icon>
-              </v-btn>
+                :text="(newRunner || {}).token"
+              />
+
             </div>
           </div>
 
@@ -82,14 +79,10 @@
                 </v-icon>
               </v-btn>
 
-              <v-btn
+              <CopyClipboardButton
                 style="position: absolute; right: 50px; top: 2px;"
-                icon
-                color="white"
-                @click="copyToClipboard((newRunner || {}).private_key)"
-              >
-                <v-icon>mdi-content-copy</v-icon>
-              </v-btn>
+                :text="(newRunner || {}).private_key"
+              />
             </div>
           </div>
 
@@ -116,14 +109,10 @@
                      class="pa-2"
                 >{{ runnerConfigCommand }}</pre>
 
-                <v-btn
+                <CopyClipboardButton
                   style="position: absolute; right: 10px; top: 10px;"
-                  icon
-                  color="white"
-                  @click="copyToClipboard(runnerConfigCommand)"
-                >
-                  <v-icon>mdi-content-copy</v-icon>
-                </v-btn>
+                  :text="runnerConfigCommand"
+                />
               </div>
 
               <div class="mt-3">Launching the runner:</div>
@@ -148,14 +137,10 @@
                      class="pa-2"
                 >{{ runnerSetupCommand }}</pre>
 
-                <v-btn
+                <CopyClipboardButton
                   style="position: absolute; right: 10px; top: 10px;"
-                  icon
-                  color="white"
-                  @click="copyToClipboard(runnerSetupCommand)"
-                >
-                  <v-icon>mdi-content-copy</v-icon>
-                </v-btn>
+                  :text="runnerSetupCommand"
+                />
               </div>
 
               <div class="mt-3">
@@ -180,14 +165,10 @@
                      class="pa-2"
                 >{{ runnerEnvCommand }}</pre>
 
-                <v-btn
+                <CopyClipboardButton
                   style="position: absolute; right: 10px; top: 10px;"
-                  icon
-                  color="white"
-                  @click="copyToClipboard(runnerEnvCommand)"
-                >
-                  <v-icon>mdi-content-copy</v-icon>
-                </v-btn>
+                  :text="runnerEnvCommand"
+                />
               </div>
             </v-tab-item>
 
@@ -202,14 +183,10 @@
                      class="pa-2"
                 >{{ runnerDockerCommand }}</pre>
 
-                <v-btn
+                <CopyClipboardButton
                   style="position: absolute; right: 10px; top: 10px;"
-                  icon
-                  color="white"
-                  @click="copyToClipboard(runnerDockerCommand)"
-                >
-                  <v-icon>mdi-content-copy</v-icon>
-                </v-btn>
+                  :text="runnerDockerCommand"
+                />
               </div>
             </v-tab-item>
           </v-tabs-items>
@@ -385,11 +362,14 @@ 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 {
   mixins: [ItemListPageBase],
 
   components: {
+    CopyClipboardButton,
     DashboardMenu,
     RunnerForm,
     YesNoDialog,
@@ -468,6 +448,9 @@ semaphore runner start --no-config`;
   },
 
   methods: {
+
+    copyToClipboard,
+
     async clearCache(runner) {
       const projectId = this.projectId || this.getProjectIdOfItem(runner.id);
 
@@ -539,21 +522,6 @@ semaphore runner start --no-config`;
       return this.loadItems();
     },
 
-    async copyToClipboard(text) {
-      try {
-        await window.navigator.clipboard.writeText(text);
-        EventBus.$emit('i-snackbar', {
-          color: 'success',
-          text: 'The command has been copied to the clipboard.',
-        });
-      } catch (e) {
-        EventBus.$emit('i-snackbar', {
-          color: 'error',
-          text: `Can't copy the command: ${e.message}`,
-        });
-      }
-    },
-
     async setActive(runnerId, active) {
       const projectId = this.projectId || this.getProjectIdOfItem(runnerId);
 
diff --git a/web/src/views/project/template/TemplateTerraformState.vue b/web/src/views/project/template/TemplateTerraformState.vue
@@ -300,6 +300,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';
 
 export default {
   mixins: [AppsMixin],
@@ -380,6 +381,8 @@ export default {
   },
 
   methods: {
+    copyToClipboard,
+
     deleteState(id) {
       console.log(id);
     },
@@ -467,21 +470,6 @@ export default {
       await this.loadAliases();
     },
 
-    async copyToClipboard(text) {
-      try {
-        await window.navigator.clipboard.writeText(text);
-        EventBus.$emit('i-snackbar', {
-          color: 'success',
-          text: 'The command has been copied to the clipboard.',
-        });
-      } catch (e) {
-        EventBus.$emit('i-snackbar', {
-          color: 'error',
-          text: `Can't copy the command: ${e.message}`,
-        });
-      }
-    },
-
     editAlias(alias) {
       this.aliasId = alias;
       this.editDialog = true;
