add sharing & copying instructions when asking contacts for help, and list all the visibleTo DIDs with an English description of their path

src/views/ClaimView.vue

@@ -235,29 +235,87 @@
     </div>
 
     <div>
-      <h2 class="font-bold uppercase text-xl mt-8 mb-2">Visible Details</h2>
-      <div v-if="Object.keys(veriClaimDidsVisible).length > 0">
+      <h2 class="font-bold uppercase text-xl mt-8 mb-2">
+        {{ serverUtil.containsHiddenDid(veriClaim) ? "Visible " : "" }}Details
+      </h2>
+      <div
+        v-if="
+          serverUtil.containsHiddenDid(veriClaim) &&
+          R.isEmpty(veriClaimDidsVisible)
+        "
+        class="mb-2"
+      >
+        Some of the details are not visible to you; they show as "HIDDEN". They
+        are not visible to any of your direct contacts, either.
+        <span v-if="canShare">
+          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="onClickShareClaim()" class="text-blue-500"
+            >click to send them this info</a
+          >
+          and see if they are willing to make an introduction.
+        </span>
+        <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"
+            >share this page with them</a
+          >
+          and see if they are willing to make an introduction.
+        </span>
+      </div>
+
+      <div v-if="!R.isEmpty(veriClaimDidsVisible)">
         Some of the details are not visible to you but they are visible to some
-        of your contacts. If you'd like an introduction, share the information
-        with them and ask them to connect you.
+        of your contacts.
+        <span v-if="canShare">
+          If you'd like an introduction,
+          <a @click="onClickShareClaim()" class="text-blue-500"
+            >click to share the information with them and ask if they'll tell
+            you more about the participants.</a
+          >
+        </span>
+        <span v-else>
+          If you'd like an introduction,
+          <a @click="copyToClipboard(windowLocation)" class="text-blue-500"
+            >share this page with them and ask if they'll tell you more about
+            about the participants.</a
+          >
+        </span>
+
         <div
           v-for="(visibleDidPath, index) of Object.keys(veriClaimDidsVisible)"
           :key="index"
-          class="list-disc flex justify-start p-2"
+          class="list-disc p-4"
         >
-          <div class="text-sm p-4">
-            {{ visibleDidPath }}
+          <div class="text-sm">
+            <fa icon="minus" class="fa-fw"></fa>
+            The {{ visibleDidPath }} is visible to:
           </div>
-          <div class="p-4">
+          <div class="ml-12 p-1">
             <ul>
               <li
                 v-for="(visDid, idx2) of veriClaimDidsVisible[visibleDidPath]"
                 :key="idx2"
                 class="list-disc"
               >
-                <div class="text-sm">
-                  {{ didInfo(visDid) }}
-                  {{ veriClaim.publicUrls?.[visDid] || "" }}
+                <div class="text-sm mt-2">
+                  <span>
+                    {{ didInfo(visDid)
+                    }}<span v-if="veriClaim.publicUrls?.[visDid]"
+                      >, found at
+                      <fa icon="globe" class="fa-fw text-slate-400"></fa
+                      >&nbsp;<a
+                        :href="veriClaim.publicUrls?.[visDid]"
+                        class="text-blue-500"
+                        >{{
+                          veriClaim.publicUrls[visDid].substring(
+                            veriClaim.publicUrls[visDid].indexOf("//") + 2,
+                          )
+                        }}
+                      </a>
+                    </span>
+                  </span>
                 </div>
               </li>
             </ul>
@@ -308,6 +366,7 @@ import * as yaml from "js-yaml";
 import * as R from "ramda";
 import { IIdentifier } from "@veramo/core";
 import { Component, Vue } from "vue-facing-decorator";
+import { useClipboard } from "@vueuse/core";
 
 import GiftedDialog from "@/components/GiftedDialog.vue";
 import OfferDialog from "@/components/OfferDialog.vue";
@@ -341,6 +400,7 @@ export default class ClaimView extends Vue {
   allContacts: Array<Contact> = [];
   apiServer = "";
 
+  canShare = false;
   confirmerIdList: string[] = []; // list of DIDs that have confirmed this claim excluding the issuer
   confsVisibleErrorMessage = "";
   confsVisibleToIdList: string[] = []; // list of DIDs that can see any confirmer
@@ -355,7 +415,9 @@ export default class ClaimView extends Vue {
   veriClaim = serverUtil.BLANK_GENERIC_SERVER_RECORD;
   veriClaimDump = "";
   veriClaimDidsVisible = {};
+  windowLocation = window.location.href;
 
+  R = R;
   yaml = yaml;
   libsUtil = libsUtil;
   serverUtil = serverUtil;
@@ -405,6 +467,10 @@ export default class ClaimView extends Vue {
         -1,
       );
     }
+
+    // When Chrome compatibility is fixed https://developer.mozilla.org/en-US/docs/Web/API/Web_Share_API#api.navigator.canshare
+    // then use this truer check: navigator.canShare && navigator.canShare()
+    this.canShare = !!navigator.share;
   }
 
   // insert a space before any capital letters except the initial letter
@@ -472,6 +538,7 @@ export default class ClaimView extends Vue {
         this.veriClaimDump = yaml.dump(this.veriClaim);
         this.veriClaimDidsVisible = libsUtil.findAllVisibleToDids(
           this.veriClaim,
+          true,
         );
       } else {
         // actually, axios typically throws an error so we never get here
@@ -688,5 +755,29 @@ export default class ClaimView extends Vue {
       this.veriClaim.handleId,
     );
   }
+
+  copyToClipboard(text: string) {
+    useClipboard()
+      .copy(text)
+      .then(() => {
+        this.$notify(
+          {
+            group: "alert",
+            type: "toast",
+            title: "Copied",
+            text: "Location was copied to clipboard.",
+          },
+          2000,
+        );
+      });
+  }
+
+  onClickShareClaim() {
+    window.navigator.share({
+      title: "Help Connect Me",
+      text: "I'm trying to find the full details of this claim. Can you help me?",
+      url: this.windowLocation,
+    });
+  }
 }
 </script>