add Claim view for details about a specific server record

src/libs/endorserServer.ts

@@ -12,6 +12,8 @@ export const SERVICE_ID = "endorser.ch";
 export const CONTACT_URL_PREFIX = "https://endorser.ch";
 // the suffix for the contact URL
 export const ENDORSER_JWT_URL_LOCATION = "/contact?jwt=";
+// the prefix for handle IDs, the permanent ID for claims on Endorser
+export const ENDORSER_CH_HANDLE_PREFIX = "https://endorser.ch/entity/";
 
 export interface AgreeVerifiableCredential {
   "@context": string;
@@ -42,10 +44,18 @@ export interface GenericClaim {
   "@context": string;
   "@type": string;
   issuedAt: string;
+  issuer: string;
   // "any" because arbitrary objects can be subject of agreement
   // eslint-disable-next-line @typescript-eslint/no-explicit-any
   claim: Record<any, any>;
 }
+export const BLANK_GENERIC_CLAIM: GenericClaim = {
+  "@context": SCHEMA_ORG_CONTEXT,
+  "@type": "",
+  issuedAt: "",
+  issuer: "",
+  claim: {},
+};
 
 export interface GiveServerRecord {
   agentDid: string;
@@ -143,6 +153,14 @@ export function isHiddenDid(did: string) {
   return did === HIDDEN_DID;
 }
 
+export function stripEndorserPrefix(claimId: string) {
+  if (claimId && claimId.startsWith(ENDORSER_CH_HANDLE_PREFIX)) {
+    return claimId.substring(ENDORSER_CH_HANDLE_PREFIX.length);
+  } else {
+    return claimId;
+  }
+}
+
 /**
  always returns text, maybe UNNAMED_VISIBLE or UNKNOWN_ENTITY
 
@@ -163,8 +181,8 @@ export function didInfo(
   return contact
     ? contact.name || "Contact With No Name"
     : isHiddenDid(did)
-    ? "Someone Not In Network"
-    : "Someone Not In Contacts";
+      ? "Someone Not In Network"
+      : "Someone Not In Contacts";
 }
 
 export interface ResultWithType {

src/libs/util.ts

@@ -1,3 +1,5 @@
+// many of these are also found in endorser-mobile utility.ts
+
 export const isGlobalUri = (uri: string) => {
   return uri && uri.match(new RegExp(/^[A-Za-z][A-Za-z0-9+.-]+:/));
 };

src/main.ts

@@ -43,6 +43,7 @@ import {
   faLongArrowAltLeft,
   faLongArrowAltRight,
   faMagnifyingGlass,
+  faMessage,
   faPen,
   faPersonCircleCheck,
   faPersonCircleQuestion,
@@ -94,6 +95,7 @@ library.add(
   faLongArrowAltLeft,
   faLongArrowAltRight,
   faMagnifyingGlass,
+  faMessage,
   faPen,
   faPersonCircleCheck,
   faPersonCircleQuestion,

src/router/index.ts

@@ -41,6 +41,12 @@ const routes: Array<RouteRecordRaw> = [
       import(/* webpackChunkName: "account" */ "../views/AccountViewView.vue"),
     beforeEnter: enterOrStart,
   },
+  {
+    path: "/claim/:id?",
+    name: "claim",
+    component: () =>
+      import(/* webpackChunkName: "claim" */ "../views/ClaimView.vue"),
+  },
   {
     path: "/confirm-contact",
     name: "confirm-contact",

src/views/ClaimView.vue

@@ -0,0 +1,411 @@
+<template>
+  <QuickNav />
+  <!-- CONTENT -->
+  <section id="Content" class="p-6 pb-24">
+    <!-- Breadcrumb -->
+    <div id="ViewBreadcrumb" class="mb-8">
+      <h1 class="text-lg text-center font-light relative px-7">
+        <!-- Back -->
+        <button
+          @click="$router.go(-1)"
+          class="text-lg text-center px-2 py-1 absolute -left-2 -top-1"
+        >
+          <fa icon="chevron-left" class="fa-fw"></fa>
+        </button>
+        Verifiable Claim Details
+      </h1>
+    </div>
+
+    <!-- Details -->
+    <div class="bg-slate-100 rounded-md overflow-hidden px-4 py-3 mb-4">
+      <div>
+        <div class="block pb-4 flex gap-4 overflow-hidden">
+          <div class="overflow-hidden">
+            <h2 class="text-xl">{{ veriClaim.id }}</h2>
+            <div class="text-sm">
+              <div>
+                {{ veriClaim.claimType }}
+              </div>
+              <div>
+                <fa icon="message" class="fa-fw text-slate-400"></fa>
+                {{ veriClaim.claim?.description }}
+              </div>
+              <div>
+                <fa icon="user" class="fa-fw text-slate-400"></fa>
+                {{ veriClaim.issuer }}
+              </div>
+              <div>
+                <fa icon="calendar" class="fa-fw text-slate-400"></fa>
+                {{ veriClaim.issuedAt?.replace(/T/, " ").replace(/Z/, " UTC") }}
+              </div>
+            </div>
+          </div>
+        </div>
+      </div>
+    </div>
+
+    <div>
+      <h2 class="font-bold text-2xl">Confirmations</h2>
+
+      <span v-if="totalConfirmers() === 0">Nobody has confirmed this.</span>
+      <span v-else-if="totalConfirmers() === 1">
+        One person has confirmed this.
+      </span>
+      <span v-else> {{ totalConfirmers() }} people have confirmed this. </span>
+
+      <div v-if="totalConfirmers() > 0">
+        <div
+          v-if="
+            confirmerIdList.length === 0 && confsVisibleToIdList.length === 0
+          "
+        >
+          Nobody that you know confirmed this claim, nor do they have any
+          confirmers in their network.
+        </div>
+
+        <div
+          v-if="confirmerIdList.length === 0 && confsVisibleToIdList.length > 0"
+        >
+          <!-- Only show if this person has links to confirmers (below). -->
+          Nobody that you know has issued or confirmed this claim.
+        </div>
+        <div v-if="confirmerIdList.length > 0">
+          The following people have issued or confirmed this claim.
+          <ul>
+            <li
+              v-for="confirmerId in confirmerIdList"
+              :key="confirmerId"
+              class="list-disc"
+            >
+              <div class="flex gap-4">
+                <div class="grow overflow-hidden">
+                  <div class="text-sm">
+                    {{ confirmerId }}
+                  </div>
+                </div>
+              </div>
+            </li>
+          </ul>
+        </div>
+
+        <!--
+         Never need to show the following message.
+         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. -->
+
+        <div v-if="confsVisibleToIdList.length > 0">
+          The following people can connect you with people who have issued or
+          confirmed this claim.
+          <ul>
+            <li
+              v-for="confsVisibleTo in confsVisibleToIdList"
+              :key="confsVisibleTo"
+              class="list-disc"
+            >
+              <div class="flex gap-4">
+                <div class="grow overflow-hidden">
+                  <div class="text-sm">
+                    {{ confsVisibleTo }}
+                  </div>
+                </div>
+              </div>
+            </li>
+          </ul>
+        </div>
+      </div>
+    </div>
+
+    <div>
+      <h2 class="font-bold text-2xl mt-8">Claim</h2>
+      <pre>{{ util.inspect(veriClaim, false, null) }}</pre>
+    </div>
+
+    <h2 class="font-bold text-2xl mt-8">Full Claim</h2>
+    <p>
+      The full claim includes the claim as it was originally issued, including
+      the signature (ie. the proof of issuance by that person).
+    </p>
+    <div v-if="!fullClaim">
+      <div v-if="fullClaimMessage">
+        {{ fullClaimMessage }}
+      </div>
+      <button
+        v-else
+        class="bg-blue-600 text-white mt-4 px-4 py-2 rounded-md mb-4"
+        @click="showFullClaim(veriClaim.id)"
+      >
+        Load Full Claim Details
+      </button>
+    </div>
+    <div v-else>
+      <pre>{{ util.inspect(fullClaim, false, null) }}</pre>
+    </div>
+
+    <a :href="apiServer + '/api/claim/' + veriClaim.id" target="_blank">
+      <button class="bg-blue-600 text-white mt-4 px-4 py-2 rounded-md mb-4">
+        View on the Public Server
+      </button>
+    </a>
+  </section>
+</template>
+
+<script lang="ts">
+import { AxiosError, RawAxiosRequestHeaders } from "axios";
+import * as R from "ramda";
+import { IIdentifier } from "@veramo/core";
+import * as util from "util";
+import { Component, Vue } from "vue-facing-decorator";
+
+import GiftedDialog from "@/components/GiftedDialog.vue";
+import OfferDialog from "@/components/OfferDialog.vue";
+import { accountsDB, db } from "@/db/index";
+import { Contact } from "@/db/tables/contacts";
+import { MASTER_SETTINGS_KEY, Settings } from "@/db/tables/settings";
+import { accessToken } from "@/libs/crypto";
+import {
+  BLANK_GENERIC_CLAIM,
+  didInfo,
+  isHiddenDid,
+  stripEndorserPrefix,
+} from "@/libs/endorserServer";
+import QuickNav from "@/components/QuickNav.vue";
+import EntityIcon from "@/components/EntityIcon.vue";
+import { Account } from "@/db/tables/accounts";
+
+interface Notification {
+  group: string;
+  type: string;
+  title: string;
+  text: string;
+}
+
+@Component({
+  components: { EntityIcon, GiftedDialog, OfferDialog, QuickNav },
+})
+export default class ClaimView extends Vue {
+  $notify!: (notification: Notification, timeout?: number) => void;
+
+  activeDid = "";
+  allMyDids: Array<string> = [];
+  allContacts: Array<Contact> = [];
+  apiServer = "";
+  confirmerIdList = []; // list of DIDs that have confirmed this claim excluding the issuer
+  confsVisibleErrorMessage = "";
+  confsVisibleToIdList = []; // list of DIDs that can see any confirmer
+  fullClaim = null;
+  fullClaimMessage = "";
+  numConfsNotVisible = 0; // number of hidden DIDs in the confirmerIdList, minus the issuer if they aren't visible
+  veriClaim = BLANK_GENERIC_CLAIM;
+
+  util = util;
+
+  async created() {
+    await db.open();
+    const settings = (await db.settings.get(MASTER_SETTINGS_KEY)) as Settings;
+    this.activeDid = settings?.activeDid || "";
+    this.apiServer = settings?.apiServer || "";
+    this.allContacts = await db.contacts.toArray();
+
+    await accountsDB.open();
+    const accounts = accountsDB.accounts;
+    const accountsArr = await accounts?.toArray();
+    this.allMyDids = accountsArr.map((acc) => acc.did);
+    const account = accountsArr.find((acc) => acc.did === this.activeDid);
+    const identity = JSON.parse(account?.identity || "null");
+
+    const pathParam = window.location.pathname.substring("/claim/".length);
+    let claimId;
+    if (pathParam) {
+      claimId = decodeURIComponent(pathParam);
+      this.loadClaim(claimId, identity);
+    } else {
+      this.$notify(
+        {
+          group: "alert",
+          type: "danger",
+          title: "Error",
+          text: "No claim ID was provided.",
+        },
+        -1,
+      );
+    }
+  }
+
+  totalConfirmers() {
+    return (
+      this.numConfsNotVisible +
+      this.confirmerIdList.length +
+      this.confsVisibleToIdList.length
+    );
+  }
+
+  public async getIdentity(activeDid: string) {
+    await accountsDB.open();
+    const account = (await accountsDB.accounts
+      .where("did")
+      .equals(activeDid)
+      .first()) as Account;
+    const identity = JSON.parse(account?.identity || "null");
+
+    if (!identity) {
+      throw new Error(
+        "Attempted to load project records with no identity available.",
+      );
+    }
+    return identity;
+  }
+
+  public async getHeaders(identity: IIdentifier) {
+    const headers: RawAxiosRequestHeaders = {
+      "Content-Type": "application/json",
+    };
+    if (identity) {
+      const token = await accessToken(identity);
+      headers["Authorization"] = "Bearer " + token;
+    }
+    return headers;
+  }
+
+  // Isn't there a better way to make this available to the template?
+  didInfo(
+    did: string,
+    activeDid: string,
+    dids: Array<string>,
+    contacts: Array<Contact>,
+  ) {
+    return didInfo(did, activeDid, dids, contacts);
+  }
+
+  async loadClaim(claimId: string, identity: IIdentifier) {
+    const url =
+      this.apiServer + "/api/claim/byHandle/" + encodeURIComponent(claimId);
+    const headers = await this.getHeaders(identity);
+
+    try {
+      const resp = await this.axios.get(url, { headers });
+      if (resp.status === 200) {
+        this.veriClaim = resp.data;
+      } else {
+        // actually, axios typically throws an error so we never get here
+        console.log("Error getting claim:", resp);
+        this.$notify(
+          {
+            group: "alert",
+            type: "danger",
+            title: "Error",
+            text: "There was a problem getting that claim. See logs for more info.",
+          },
+          -1,
+        );
+      }
+    } catch (error: unknown) {
+      const serverError = error as AxiosError;
+      console.error("Error retrieving claim:", serverError);
+      this.$notify(
+        {
+          group: "alert",
+          type: "danger",
+          title: "Error",
+          text: "Something went wrong retrieving that claim. See logs for more info.",
+        },
+        -1,
+      );
+    }
+
+    const confirmUrl =
+      this.apiServer +
+      "/api/report/issuersWhoClaimedOrConfirmed?claimId=" +
+      encodeURIComponent(stripEndorserPrefix(claimId));
+    const confirmHeaders = await this.getHeaders(identity);
+    try {
+      const response = await this.axios.get(confirmUrl, {
+        headers: confirmHeaders,
+      });
+      if (response.status === 200) {
+        console.log("response:", response);
+        const resultList1 = response.data.result || [];
+        const resultList2 = R.reject(isHiddenDid, resultList1);
+        const resultList3 = R.reject(
+          (did: string) => did === this.veriClaim.issuer,
+          resultList2,
+        );
+        console.log("all result lists:", resultList1, resultList2, resultList3);
+        this.confirmerIdList = resultList3;
+        this.numConfsNotVisible = resultList1.length - resultList2.length;
+        if (resultList3.length === resultList2.length) {
+          // the issuer was not in the "visible" list so they must be hidden
+          // so subtract them from the non-visible confirmers count
+          this.numConfsNotVisible = this.numConfsNotVisible - 1;
+        }
+        this.confsVisibleToIdList =
+          response.data.result.resultVisibleToDids || [];
+      } else {
+        this.confsVisibleErrorMessage =
+          "Had problems retrieving confirmations.";
+      }
+    } catch (error: unknown) {
+      const serverError = error as AxiosError;
+      console.error("Error retrieving confirmations:", serverError);
+      this.confsVisibleErrorMessage =
+        "Had problems retrieving confirmations. See logs for more info.";
+    }
+    console.log("confirmerIdList:", this.confirmerIdList);
+    console.log("confsVisibleToIdList:", this.confsVisibleToIdList);
+  }
+
+  async showFullClaim(claimId: string) {
+    await accountsDB.open();
+    const accounts = accountsDB.accounts;
+    const accountsArr = await accounts?.toArray();
+    const account = accountsArr.find((acc) => acc.did === this.activeDid);
+    const identity = JSON.parse(account?.identity || "null");
+
+    const url =
+      this.apiServer + "/api/claim/full/" + encodeURIComponent(claimId);
+    const headers = await this.getHeaders(identity);
+
+    try {
+      const resp = await this.axios.get(url, { headers });
+      if (resp.status === 200) {
+        this.fullClaim = resp.data;
+      } else {
+        // actually, axios typically throws an error so we never get here
+        console.log("Error getting full claim:", resp);
+        this.$notify(
+          {
+            group: "alert",
+            type: "danger",
+            title: "Error",
+            text: "There was a problem getting that claim. See logs for more info.",
+          },
+          -1,
+        );
+      }
+    } catch (error: unknown) {
+      console.error("Error retrieving full claim:", error);
+      const serverError = error as AxiosError;
+      if (serverError.response?.status === 403) {
+        this.fullClaimMessage =
+          "You are not authorized to view the full contents of this claim." +
+          " To see all the details, ask the issuer to allow you to see their claims." +
+          " If you cannot see the issuer's DID, ask someone in the Confirmations section above." +
+          " If there are no connections, you will have to ask people in your" +
+          " network for their help, some other way; send them to this page and" +
+          " see if they can make a connection for you.";
+      } else {
+        this.$notify(
+          {
+            group: "alert",
+            type: "danger",
+            title: "Error",
+            text: "Something went wrong retrieving that claim. See logs for more info.",
+          },
+          -1,
+        );
+      }
+    }
+  }
+}
+</script>

src/views/ContactsView.vue

@@ -67,8 +67,8 @@
             showGiveTotals
               ? "Total"
               : showGiveConfirmed
-              ? "Confirmed"
-              : "Unconfirmed"
+                ? "Confirmed"
+                : "Unconfirmed"
           }}
         </button>
         <br />

src/views/HomeView.vue

@@ -108,8 +108,10 @@
           </div>
           <div class="flex">
             <fa icon="gift" class="pt-1 pr-2 text-slate-500"></fa>
-            <!-- icon values: "coins" = money; "clock" = time; "gift" = others -->
             <span class="">{{ this.giveDescription(record) }}</span>
+            <a @click="onClickLoadClaim(record.jwtId)">
+              <fa icon="circle-info" class="pl-2 pt-1 text-slate-500"></fa>
+            </a>
           </div>
         </li>
       </ul>
@@ -341,6 +343,13 @@ export default class HomeView extends Vue {
     return giverInfo + " gave" + gaveRecipientInfo + ": " + gaveAmount;
   }
 
+  onClickLoadClaim(jwtId: string) {
+    const route = {
+      path: "/claim/" + encodeURIComponent(jwtId),
+    };
+    this.$router.push(route);
+  }
+
   displayAmount(code: string, amt: number) {
     return "" + amt + " " + this.currencyShortWordForCode(code, amt === 1);
   }

src/views/ProjectViewView.vue

@@ -1,5 +1,5 @@
 <template>
-  <QuickNav selected="Projects"></QuickNav>
+  <QuickNav />
   <!-- CONTENT -->
   <section id="Content" class="p-6 pb-24">
     <!-- Breadcrumb -->
@@ -423,19 +423,21 @@ export default class ProjectViewView extends Vue {
         this.latitude = resp.data.claim?.location?.geo?.latitude || 0;
         this.longitude = resp.data.claim?.location?.geo?.longitude || 0;
         this.url = resp.data.claim?.url || "";
-      } else if (resp.status === 404) {
-        // actually, axios throws an error so we never get here
+      } else {
+        // actually, axios throws an error on 404 so we probably never get here
+        console.log("Error getting project:", resp);
         this.$notify(
           {
             group: "alert",
             type: "danger",
             title: "Error",
-            text: "That project does not exist.",
+            text: "There was a problem getting that project. See logs for more info.",
           },
           -1,
         );
       }
     } catch (error: unknown) {
+      console.error("Error retrieving project:", error);
       const serverError = error as AxiosError;
       if (serverError.response?.status === 404) {
         this.$notify(
@@ -457,7 +459,6 @@ export default class ProjectViewView extends Vue {
           },
           -1,
         );
-        console.error("Error retrieving project:", serverError.message);
       }
     }