From c6b743a9b8da1f8a38318957383e9818b36d120f Mon Sep 17 00:00:00 2001
From: Gabriel Pastori <58153955+gabrielpastori1@users.noreply.github.com>
Date: Tue, 19 Dec 2023 23:48:54 -0300
Subject: [PATCH] expand copy compatibility

---
 src/components/instance/InstanceHeader.vue | 28 ++++++++++++++++++++--
 src/helpers/copyToClipboard.js             |  1 +
 2 files changed, 27 insertions(+), 2 deletions(-)

diff --git a/src/components/instance/InstanceHeader.vue b/src/components/instance/InstanceHeader.vue
index ccec06a..8ba0446 100644
--- a/src/components/instance/InstanceHeader.vue
+++ b/src/components/instance/InstanceHeader.vue
@@ -31,7 +31,24 @@
           @click="copyApikey"
         >
           <v-icon start size="small">mdi-key</v-icon>
-          {{ (instance.instance?.apikey || "").slice(0, 10) }}...
+          {{
+            (instance.instance?.apikey || "").slice(
+              0,
+              apikeyReveled ? undefined : 7
+            )
+          }}{{ apikeyReveled ? "" : "..." }}
+          <v-btn
+            icon
+            @click.stop="toggleReveled"
+            density="comfortable"
+            class="ml-1"
+            variant="text"
+            size="x-small"
+          >
+            <v-icon size="small">
+              {{ apikeyReveled ? "mdi-eye-off" : "mdi-eye" }}
+            </v-icon>
+          </v-btn>
           <v-icon end size="small">
             {{ copied ? "mdi-check" : "mdi-content-copy" }}
           </v-icon>
@@ -95,6 +112,7 @@ export default {
     restart: { loading: false, success: false },
     reload: false,
     copied: false,
+    apikeyReveled: false,
     statusMapper: statusMapper,
     AppStore: useAppStore(),
   }),
@@ -153,11 +171,17 @@ export default {
         this.disconnect.loading = false;
       }
     },
+    toggleReveled() {
+      this.apikeyReveled = !this.apikeyReveled;
+    },
   },
   computed: {
     owner() {
       if (!this.instance?.instance?.owner)
-        return this.$t(`status.${this.instance.instance.status}`) || this.$t("unknown");
+        return (
+          this.$t(`status.${this.instance.instance.status}`) ||
+          this.$t("unknown")
+        );
 
       return (this.instance?.instance?.owner || "").split("@")[0];
     },
diff --git a/src/helpers/copyToClipboard.js b/src/helpers/copyToClipboard.js
index c577eaf..92c9f81 100644
--- a/src/helpers/copyToClipboard.js
+++ b/src/helpers/copyToClipboard.js
@@ -9,6 +9,7 @@ export default (value) => {
     el.style.left = "-9999px";
     document.body.appendChild(el);
     el.select();
+    el.setSelectionRange(0, 99999);
     document.execCommand("copy");
     document.body.removeChild(el);
   }