From 292372729ac292f4186fe415955104cc28206047 Mon Sep 17 00:00:00 2001
From: Joris de Keijser <chinook25@gmail.com>
Date: Fri, 13 Sep 2024 10:19:47 +0200
Subject: [PATCH] feat(user): add copy to clipboard for tokens (#4210)

---
 .../src/components/account/TokenManager.vue   | 37 +++++++++++++------
 1 file changed, 26 insertions(+), 11 deletions(-)

diff --git a/apps/molgenis-components/src/components/account/TokenManager.vue b/apps/molgenis-components/src/components/account/TokenManager.vue
index af80b556fa..d73635464f 100644
--- a/apps/molgenis-components/src/components/account/TokenManager.vue
+++ b/apps/molgenis-components/src/components/account/TokenManager.vue
@@ -11,9 +11,22 @@
     </div>
     <MessageSuccess v-if="successMessage">
       {{ successMessage }}.
-      <div v-if="lastTokenValue">
-        <label><b>New token. Please copy for use</b></label>
-        <pre>{{ lastTokenValue }}</pre>
+      <div v-if="lastTokenValue" style="cursor: pointer">
+        <label>
+          <b>
+            New token. Please copy for use:
+            <Tooltip
+              value="Click to copy to clipboard"
+              placement="top"
+              @click.prevent="copyToClipboard(lastTokenValue)"
+            >
+              <i id="copy-icon" class="fa fa-clipboard" />
+            </Tooltip>
+          </b>
+        </label>
+        <pre @click.prevent="copyToClipboard(lastTokenValue)">
+          {{ lastTokenValue }}
+        </pre>
       </div>
     </MessageSuccess>
     <MessageError v-if="errorMessage">{{ errorMessage }}</MessageError>
@@ -38,16 +51,17 @@
 </template>
 
 <script lang="ts">
+import { ISetting } from "metadata-utils";
 import { defineComponent } from "vue";
 import { request } from "../../client/client.js";
 import { IError } from "../../Interfaces/IError";
-import { ISetting } from "metadata-utils";
 import ButtonAction from "../forms/ButtonAction.vue";
 import IconDanger from "../forms/IconDanger.vue";
 import InputString from "../forms/InputString.vue";
 import MessageError from "../forms/MessageError.vue";
 import MessageSuccess from "../forms/MessageSuccess.vue";
-import { ISession, IResponse } from "./Interfaces";
+import { IResponse, ISession } from "./Interfaces";
+import Tooltip from "../forms/Tooltip.vue";
 
 const query = `{_session { email, token, settings{key,value}}}`;
 const changeMutation = `mutation change($users:[UsersInput]){
@@ -67,6 +81,7 @@ export default defineComponent({
     IconDanger,
     MessageSuccess,
     MessageError,
+    Tooltip,
   },
   data() {
     return {
@@ -75,7 +90,6 @@ export default defineComponent({
       lastTokenValue: "",
       errorMessage: "",
       successMessage: "",
-      duplicateNameMessage: "",
     };
   },
   computed: {
@@ -90,13 +104,11 @@ export default defineComponent({
             .filter((value: string): boolean => value !== "")
         : [];
     },
-  },
-  watch: {
-    tokenName() {
+    duplicateNameMessage(): string {
       if (this.accessTokens.includes(this.tokenName)) {
-        this.duplicateNameMessage = "Duplicate token name";
+        return "Duplicate token name";
       } else {
-        this.duplicateNameMessage = "";
+        return "";
       }
     },
   },
@@ -153,6 +165,9 @@ export default defineComponent({
           this.errorMessage = error.message;
         });
     },
+    copyToClipboard(token: string) {
+      navigator.clipboard.writeText(token);
+    },
   },
   mounted() {
     this.fetchSession();