add instructions for contacting potential links to hidden people

src/components/HiddenDidDialog.vue

@@ -0,0 +1,174 @@
+<template>
+  <div
+    v-if="isOpen"
+    class="fixed inset-0 bg-black bg-opacity-50 flex items-center justify-center z-50"
+  >
+    <div class="bg-white rounded-lg p-6 max-w-2xl w-full mx-4">
+      <!-- Header -->
+      <div class="flex justify-between items-center mb-4">
+        <h2 class="text-xl font-bold capitalize">{{ roleName }} Details</h2>
+        <button @click="close" class="text-gray-500 hover:text-gray-700">
+          <fa icon="times" />
+        </button>
+      </div>
+
+      <!-- Content -->
+      <!-- This is somewhat similar to ClaimView.vue and ConfirmGiftView.vue -->
+      <div class="mb-4">
+        <p class="mb-4">
+          <span v-if="R.isEmpty(visibleToDids)">
+            The {{ roleName }} is not visible to you or any of your contacts.
+          </span>
+          <span v-else>
+            The {{ roleName }} is not visible to you.
+          </span>
+        </p>
+
+        <div v-if="R.isEmpty(visibleToDids)">
+          <p class="mt-2">
+            You can ask one of your contacts to take a look and see if their
+            contacts can see more details. Someone is connected to people closer
+            to them; if you don't know who to ask, try the person who registered
+            you.
+          </p>
+        </div>
+
+        <div v-else>
+          <p class="mb-2">
+            They are visible to some of your contacts. If you'd like an
+            introduction, ask them if they'll tell you more.
+          </p>
+
+          <div class="ml-4">
+            <ul>
+              <li
+                v-for="(visDid, idx) of visibleToDids"
+                :key="idx"
+                class="list-disc ml-4 mb-2"
+              >
+                <div class="text-sm">
+                  <span>
+                    {{ didInfo(visDid) }}
+                    <span v-if="!serverUtil.isEmptyOrHiddenDid(visDid)">
+                      <a :href="`/did/${visDid}`" target="_blank" class="text-blue-500">
+                        <fa icon="arrow-up-right-from-square" class="fa-fw" />
+                      </a>
+                    </span>
+                  </span>
+                </div>
+              </li>
+            </ul>
+          </div>
+        </div>
+
+        <div class="mt-4">
+          <span v-if="canShare">
+            If you'd like an introduction,
+            <a @click="onClickShareClaim()" class="text-blue-500"
+              >click here to share the information with them and ask if they'll
+              tell you more about the {{ roleName }}.</a
+            >
+          </span>
+          <span v-else>
+            If you'd like an introduction,
+            <a
+              @click="copyToClipboard('A link to this page', windowLocation)"
+              class="text-blue-500"
+              >click here to copy this page, paste it into a message, and ask
+              if they'll tell you more about the {{ roleName }}.</a
+            >
+          </span>
+        </div>
+      </div>
+
+      <!-- Footer -->
+      <div class="flex justify-end">
+        <button
+          @click="close"
+          class="bg-blue-500 text-white px-4 py-2 rounded hover:bg-blue-600"
+        >
+          Close
+        </button>
+      </div>
+    </div>
+  </div>
+</template>
+
+<script lang="ts">
+import { Component, Vue } from "vue-facing-decorator";
+import * as R from "ramda";
+import { useClipboard } from "@vueuse/core";
+import { Contact } from "@/db/tables/contacts";
+import * as serverUtil from "@/libs/endorserServer";
+import { NotificationIface } from "@/constants/app";
+
+@Component
+export default class HiddenDidDialog extends Vue {
+  $notify!: (notification: NotificationIface, timeout?: number) => void;
+
+  isOpen = false;
+  roleName = "";
+  visibleToDids: string[] = [];
+  allContacts: Array<Contact> = [];
+  activeDid = "";
+  allMyDids: Array<string> = [];
+  canShare = false;
+  windowLocation = window.location.href;
+
+  R = R;
+  serverUtil = serverUtil;
+
+  created() {
+    // 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;
+  }
+
+  open(roleName: string, visibleToDids: string[], allContacts: Array<Contact>, activeDid: string, allMyDids: Array<string>) {
+    this.roleName = roleName;
+    this.visibleToDids = visibleToDids;
+    this.allContacts = allContacts;
+    this.activeDid = activeDid;
+    this.allMyDids = allMyDids;
+    this.isOpen = true;
+  }
+
+  close() {
+    this.isOpen = false;
+  }
+
+  didInfo(did: string) {
+    return serverUtil.didInfo(
+      did,
+      this.activeDid,
+      this.allMyDids,
+      this.allContacts,
+    );
+  }
+
+  copyToClipboard(name: string, text: string) {
+    useClipboard()
+      .copy(text)
+      .then(() => {
+        this.$notify(
+          {
+            group: "alert",
+            type: "toast",
+            title: "Copied",
+            text: (name || "That") + " was copied to the clipboard.",
+          },
+          2000,
+        );
+      });
+  }
+
+  onClickShareClaim() {
+    this.copyToClipboard("A link to this page", this.windowLocation);
+    window.navigator.share({
+      title: "Help Connect Me",
+      text: "I'm trying to find the people who recorded this. Can you help me?",
+      url: this.windowLocation,
+    });
+  }
+}
+</script>