From a0911bb0fd6ba48cee0a0d5efabf8098d4f77230 Mon Sep 17 00:00:00 2001
From: Trent Larson <trent@trentlarson.com>
Date: Sun, 21 Jan 2024 15:50:39 -0700
Subject: [PATCH] add copy-paste icon next to non-anonymous, non-hidden DIDs on
 details page

---
 project.task.yaml             |  5 ++-
 src/libs/util.ts              |  2 +-
 src/views/ClaimView.vue       | 63 +++++++++++++++++++++++++++--------
 src/views/ProjectViewView.vue |  2 +-
 4 files changed, 54 insertions(+), 18 deletions(-)

diff --git a/project.task.yaml b/project.task.yaml
index 727fabd..78810b3 100644
--- a/project.task.yaml
+++ b/project.task.yaml
@@ -1,9 +1,8 @@
 
 tasks:
 
-- .5 give list of visible IDs on the claim detail page
-  - instead of text, make links to share the data with contacts and ask for help
-- Add TimeSafari as a shareable app https://developer.mozilla.org/en-US/docs/Web/Manifest/share_target
+- add share button for sending a message to confirmers when we can't see the claim
+- add TimeSafari as a shareable app https://developer.mozilla.org/en-US/docs/Web/Manifest/share_target
 - make a shortcut for BVC
 - choose an agent via a contact chooser (not just copy-paste a DID)
 - .5 find out why clicking quickly back-and-forth onto the "my project" page often shows error "You need an identifier to load your projects." (easier to reproduce on desktop?)
diff --git a/src/libs/util.ts b/src/libs/util.ts
index d117463..14b1e75 100644
--- a/src/libs/util.ts
+++ b/src/libs/util.ts
@@ -55,7 +55,7 @@ export const doCopyTwoSecRedo = (text: string, fn: () => void) => {
  * @returns true if the user can confirm the claim
  * @param veriClaim is expected to have fields: claim, claimType, and issuer
  */
-export const giveRecordTheUserCanConfirm = (
+export const isGiveRecordTheUserCanConfirm = (
   veriClaim: GenericServerRecord,
   activeDid: string,
   confirmerIdList: string[] = [],
diff --git a/src/views/ClaimView.vue b/src/views/ClaimView.vue
index 1b9f24d..9ba7b48 100644
--- a/src/views/ClaimView.vue
+++ b/src/views/ClaimView.vue
@@ -125,7 +125,7 @@
       <button
         class="col-span-1 bg-blue-600 text-white px-4 py-2 rounded-md"
         v-if="
-          libsUtil.giveRecordTheUserCanConfirm(
+          libsUtil.isGiveRecordTheUserCanConfirm(
             veriClaim,
             activeDid,
             confirmerIdList,
@@ -179,12 +179,24 @@
             <li
               v-for="confirmerId in confirmerIdList"
               :key="confirmerId"
-              class="list-disc"
+              class="list-disc ml-4"
             >
               <div class="flex gap-4">
                 <div class="grow overflow-hidden">
                   <div class="text-sm">
-                    {{ confirmerId }}
+                    {{ didInfo(confirmerId) }}
+                    <span v-if="!serverUtil.isEmptyOrHiddenDid(confirmerId)">
+                      <button
+                        @click="
+                          copyToClipboard(
+                            'The DID of ' + confirmerId,
+                            confirmerId,
+                          )
+                        "
+                      >
+                        <fa icon="copy" class="text-slate-400 fa-fw" />
+                      </button>
+                    </span>
                   </div>
                 </div>
               </div>
@@ -193,12 +205,14 @@
         </div>
 
         <!--
-         Never need to show the following message.
+         Never need to show this message:
+         "Nobody that you know can see someone who has confirmed this claim."
+
          If there is nobody in the confirmerIdList then we'll show the combined "nobody" message.
          If there is somebody in the confirmerIdList then that's all they need to show.
          -->
-        <!-- Nobody that you know can see someone who has confirmed this claim. -->
 
+        <!-- Now show anyone linked to confirmers. -->
         <div v-if="confsVisibleToIdList.length > 0">
           The following people can connect you with people who have issued or
           confirmed this claim.
@@ -206,12 +220,24 @@
             <li
               v-for="confsVisibleTo in confsVisibleToIdList"
               :key="confsVisibleTo"
-              class="list-disc"
+              class="list-disc ml-4"
             >
               <div class="flex gap-4">
                 <div class="grow overflow-hidden">
                   <div class="text-sm">
-                    {{ confsVisibleTo }}
+                    {{ didInfo(confsVisibleTo) }}
+                    <span v-if="!serverUtil.isEmptyOrHiddenDid(confsVisibleTo)">
+                      <button
+                        @click="
+                          copyToClipboard(
+                            'The DID of ' + confsVisibleTo,
+                            confsVisibleTo,
+                          )
+                        "
+                      >
+                        <fa icon="copy" class="text-slate-400 fa-fw" />
+                      </button>
+                    </span>
                   </div>
                 </div>
               </div>
@@ -258,7 +284,9 @@
         <span v-else>
           If you'd like to ask any of your contacts to take a look and see if
           their contacts can see more details,
-          <a @click="copyToClipboard(windowLocation)" class="text-blue-500"
+          <a
+            @click="copyToClipboard('Location', windowLocation)"
+            class="text-blue-500"
             >share this page with them</a
           >
           and see if they are willing to make an introduction.
@@ -277,7 +305,9 @@
         </span>
         <span v-else>
           If you'd like an introduction,
-          <a @click="copyToClipboard(windowLocation)" class="text-blue-500"
+          <a
+            @click="copyToClipboard('Location', windowLocation)"
+            class="text-blue-500"
             >share this page with them and ask if they'll tell you more about
             about the participants.</a
           >
@@ -301,8 +331,15 @@
               >
                 <div class="text-sm mt-2">
                   <span>
-                    {{ didInfo(visDid)
-                    }}<span v-if="veriClaim.publicUrls?.[visDid]"
+                    {{ didInfo(visDid) }}
+                    <span v-if="!serverUtil.isEmptyOrHiddenDid(visDid)">
+                      <button
+                        @click="copyToClipboard('The DID of ' + visDid, visDid)"
+                      >
+                        <fa icon="copy" class="text-slate-400 fa-fw" />
+                      </button>
+                    </span>
+                    <span v-if="veriClaim.publicUrls?.[visDid]"
                       >, found at
                       <fa icon="globe" class="fa-fw text-slate-400"></fa
                       >&nbsp;<a
@@ -756,7 +793,7 @@ export default class ClaimView extends Vue {
     );
   }
 
-  copyToClipboard(text: string) {
+  copyToClipboard(name: string, text: string) {
     useClipboard()
       .copy(text)
       .then(() => {
@@ -765,7 +802,7 @@ export default class ClaimView extends Vue {
             group: "alert",
             type: "toast",
             title: "Copied",
-            text: "Location was copied to clipboard.",
+            text: (name || "That") + " was copied to the clipboard.",
           },
           2000,
         );
diff --git a/src/views/ProjectViewView.vue b/src/views/ProjectViewView.vue
index 8b5501a..e30e4e2 100644
--- a/src/views/ProjectViewView.vue
+++ b/src/views/ProjectViewView.vue
@@ -800,7 +800,7 @@ export default class ProjectViewView extends Vue {
       claimType: "GiveAction",
       issuer: give.agentDid,
     };
-    return libsUtil.giveRecordTheUserCanConfirm(giveDetails, this.activeDid);
+    return libsUtil.isGiveRecordTheUserCanConfirm(giveDetails, this.activeDid);
   }
 
   // similar code is found in ClaimView