add copy-did-to-clipboard on contact list

project.task.yaml

@@ -14,7 +14,6 @@ tasks:
 - 01 show my VCs - most interesting, or via search
 - 04 allow user to download & prove chains of VCs, mine + ones I can see about me from others
 
-- on gives feed - link to project
 - show feed of offers, new projects, etc -- maybe limited to my search area
 
 - update Veramo library

src/views/ContactsView.vue

@@ -109,7 +109,21 @@
               <fa icon="pen" class="fa-fw" />
             </button>
           </h2>
-          <div class="text-sm truncate">{{ contact.did }}</div>
+          <div class="text-sm truncate">
+            {{ contact.did }}
+            <button
+              @click="
+                libsUtil.doCopyTwoSecRedo(
+                  contact.did,
+                  () => (showDidCopy = !showDidCopy),
+                )
+              "
+              class="ml-2 mr-2"
+            >
+              <fa icon="copy" class="text-slate-400 fa-fw"></fa>
+            </button>
+            <span v-show="showDidCopy">Copied DID</span>
+          </div>
           <div class="text-sm truncate" v-if="contact.publicKeyBase64">
             Public Key (base 64): {{ contact.publicKeyBase64 }}
           </div>
@@ -257,9 +271,10 @@
 import { AxiosError } from "axios";
 import * as didJwt from "did-jwt";
 import * as R from "ramda";
+import { IIdentifier } from "@veramo/core";
+import { Component, Vue } from "vue-facing-decorator";
 
 import { NotificationIface } from "@/constants/app";
-import { IIdentifier } from "@veramo/core";
 import { accountsDB, db } from "@/db/index";
 import { Contact } from "@/db/tables/contacts";
 import { MASTER_SETTINGS_KEY, Settings } from "@/db/tables/settings";
@@ -275,11 +290,10 @@ import {
   RegisterVerifiableCredential,
   SERVICE_ID,
 } from "@/libs/endorserServer";
-import { Component, Vue } from "vue-facing-decorator";
+import * as libsUtil from "@/libs/util";
 import QuickNav from "@/components/QuickNav.vue";
 import EntityIcon from "@/components/EntityIcon.vue";
 import { Account } from "@/db/tables/accounts";
-import { ONBOARD_MESSAGE } from "@/libs/util";
 
 // eslint-disable-next-line @typescript-eslint/no-var-requires
 const Buffer = require("buffer/").Buffer;
@@ -312,10 +326,13 @@ export default class ContactsView extends Vue {
   hourDescriptionInput = "";
   hourInput = "0";
   isRegistered = false;
+  showDidCopy = false;
   showGiveNumbers = false;
   showGiveTotals = true;
   showGiveConfirmed = true;
 
+  libsUtil = libsUtil;
+
   async created() {
     await db.open();
     const settings = (await db.settings.get(MASTER_SETTINGS_KEY)) as Settings;
@@ -483,7 +500,7 @@ export default class ContactsView extends Vue {
         group: "alert",
         type: "info",
         title: "Onboard Someone",
-        text: ONBOARD_MESSAGE,
+        text: libsUtil.ONBOARD_MESSAGE,
       },
       -1,
     );