show full contact details, plus other tweaks

README.md

@@ -75,7 +75,7 @@ At the test server:
 `npx playwright test`
 
 At the locally running server:
-... after clone and setup https://github.com/trentlarson/endorser-ch
+... after cloning and setting up https://github.com/trentlarson/endorser-ch and running `test/test.sh`
 ... and after you `npx playwright install chrome`
 ... then run these:
 ```

src/views/ClaimView.vue

@@ -299,13 +299,15 @@
           <a @click="onClickShareClaim()" class="text-blue-500"
             >click to send them this info</a
           >
-          and see if they are willing to make an introduction.
+          and see if they are willing to make an introduction. They are surely
+          connected to someone; if you don't know who to ask, you might try the
+          person who registered you.
         </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('Location', windowLocation)"
+            @click="copyToClipboard('This page location', windowLocation)"
             class="text-blue-500"
             >share this page with them</a
           >

src/views/ContactsView.vue

@@ -301,6 +301,7 @@
 
 <script lang="ts">
 import { AxiosError } from "axios";
+import { Buffer } from "buffer/";
 import { IndexableType } from "dexie";
 import * as R from "ramda";
 import { Component, Vue } from "vue-facing-decorator";
@@ -327,8 +328,6 @@ import EntityIcon from "@/components/EntityIcon.vue";
 import GiftedDialog from "@/components/GiftedDialog.vue";
 import OfferDialog from "@/components/OfferDialog.vue";
 
-import { Buffer } from "buffer/";
-
 @Component({
   components: { GiftedDialog, EntityIcon, OfferDialog, QuickNav },
 })
@@ -942,13 +941,7 @@ export default class ContactsView extends Vue {
       if (resp.status === 200) {
         const visibility = resp.data;
         contact.seesMe = visibility;
-        console.log(
-          "Visibility checked:",
-          visibility,
-          contact.did,
-          contact.name,
-        ); // eslint-disable-line no-console
-        console.log(this.contacts); // eslint-disable-line no-console
+        // console.log("Visibility checked:", visibility, contact.did, contact.name);
         db.contacts.update(contact.did, { seesMe: visibility });
 
         this.$notify(

src/views/DIDView.vue

@@ -27,9 +27,17 @@
               .displayName
           }}
         </h2>
-        <span class="mt-2 text-xl font-semibold break-words">
-          {{ viewingDid }}
-        </span>
+        <button @click="showDidDetails = !showDidDetails" class="ml-2 mr-2">
+          Details
+          <fa v-if="showDidDetails" icon="chevron-up" class="text-blue-400" />
+          <fa v-else icon="chevron-down" class="text-blue-400" />
+        </button>
+        <!-- Keep the dump contents directly between > and < to avoid weird spacing. -->
+        <pre
+          v-if="showDidDetails"
+          class="text-sm overflow-x-scroll px-4 py-3 bg-slate-100 rounded-md"
+          >{{ contactYaml }}</pre
+        >
       </div>
       <div class="flex justify-center mt-4">
         <span v-if="contact?.profileImageUrl" class="flex justify-between">
@@ -126,6 +134,7 @@
 <script lang="ts">
 import { Component, Vue } from "vue-facing-decorator";
 import { Router } from "vue-router";
+import * as yaml from "js-yaml";
 
 import QuickNav from "@/components/QuickNav.vue";
 import InfiniteScroll from "@/components/InfiniteScroll.vue";
@@ -144,6 +153,7 @@ import {
   GiveVerifiableCredential,
   OfferVerifiableCredential,
 } from "@/libs/endorserServer";
+import * as libsUtil from "@/libs/util";
 import EntityIcon from "@/components/EntityIcon.vue";
 
 @Component({
@@ -157,14 +167,19 @@ import EntityIcon from "@/components/EntityIcon.vue";
 export default class DIDView extends Vue {
   $notify!: (notification: NotificationIface, timeout?: number) => void;
 
+  libsUtil = libsUtil;
+  yaml = yaml;
+
   activeDid = "";
   allMyDids: Array<string> = [];
   apiServer = "";
   claims: Array<GenericCredWrapper<GenericVerifiableCredential>> = [];
   contact?: Contact;
+  contactYaml = "";
   hitEnd = false;
   isLoading = false;
   searchBox: { name: string; bbox: BoundingBox } | null = null;
+  showDidDetails = false;
   showLargeIdenticonId?: string;
   showLargeIdenticonUrl?: string;
   viewingDid?: string;
@@ -183,6 +198,7 @@ export default class DIDView extends Vue {
     if (pathParam) {
       this.viewingDid = decodeURIComponent(pathParam);
       this.contact = await db.contacts.get(this.viewingDid);
+      this.contactYaml = yaml.dump(this.contact)
       await this.loadClaimsAbout();
     } else {
       this.$notify(