add copy tooltip

frontend/src/components/Recipe/ContextMenu.vue

@@ -129,7 +129,7 @@ export default {
     },
     async downloadJson() {
       const recipe = await api.recipes.requestDetails(this.slug);
-      this.downloadString(JSON.stringify(recipe, "", 4), "text/json", recipe.slug+'.json');
+      this.downloadString(JSON.stringify(recipe, "", 4), "text/json", recipe.slug + ".json");
     },
     downloadString(text, fileType, fileName) {
       let blob = new Blob([text], { type: fileType });

frontend/src/components/UI/Buttons/TheCopyButton.vue

@@ -0,0 +1,68 @@
+<template>
+  <v-tooltip
+    ref="copyToolTip"
+    v-model="show"
+    color="success lighten-1"
+    right
+    :open-on-hover="false"
+    :open-on-click="true"
+    close-delay="500"
+    transition="slide-y-transition"
+  >
+    <template v-slot:activator="{ on }">
+      <v-btn
+        icon
+        color="primary"
+        @click="
+          on.click;
+          textToClipboard();
+        "
+        @blur="on.blur"
+        retain-focus-on-click
+      >
+        <v-icon>mdi-content-copy</v-icon>
+      </v-btn>
+    </template>
+    <span>
+      <v-icon left dark>
+        mdi-clipboard-check
+      </v-icon>
+      Coppied!
+    </span>
+  </v-tooltip>
+</template>
+
+<script>
+export default {
+  props: {
+    copyText: {
+      default: "Default Copy Text",
+    },
+  },
+  data() {
+    return {
+      show: false,
+    };
+  },
+
+  methods: {
+    toggleBlur() {
+      this.$refs.copyToolTip.deactivate();
+    },
+    textToClipboard() {
+      this.show = true;
+      const copyText = this.copyText;
+      navigator.clipboard.writeText(copyText).then(
+        () => console.log("Copied", copyText),
+        () => console.log("Copied Failed", copyText)
+      );
+      setTimeout(() => {
+        this.toggleBlur();
+      }, 500);
+    },
+  },
+};
+</script>
+
+<style lang="scss" scoped>
+</style>

frontend/src/pages/Admin/ManageUsers/TheSignUpTable.vue

@@ -70,11 +70,7 @@
       <v-data-table :headers="headers" :items="links" sort-by="calories">
         <template v-slot:item.token="{ item }">
           {{ `${baseURL}/sign-up/${item.token}` }}
-          <v-btn icon class="mr-1" small color="accent" @click="updateClipboard(`${baseURL}/sign-up/${item.token}`)">
+          <TheCopyButton :copy-text="`${baseURL}/sign-up/${item.token}`"/>
-            <v-icon>
-              mdi-content-copy
-            </v-icon>
-          </v-btn>
         </template>
         <template v-slot:item.admin="{ item }">
           <v-btn small :color="item.admin ? 'success' : 'error'" text>
@@ -98,11 +94,12 @@
 </template>
 
 <script>
+import TheCopyButton from "@/components/UI/Buttons/TheCopyButton";
 import ConfirmationDialog from "@/components/UI/Dialogs/ConfirmationDialog";
 import { api } from "@/api";
 import { validators } from "@/mixins/validators";
 export default {
-  components: { ConfirmationDialog },
+  components: { ConfirmationDialog, TheCopyButton },
   mixins: [validators],
   data() {
     return {