add registration check and the ability to register someone

src/main.ts

@@ -13,6 +13,7 @@ import {
   faCalendar,
   faChevronLeft,
   faCircleCheck,
+  faCircleQuestion,
   faCircleUser,
   faCopy,
   faEllipsisVertical,
@@ -23,6 +24,8 @@ import {
   faHouseChimney,
   faMagnifyingGlass,
   faPen,
+  faPersonCircleCheck,
+  faPersonCircleQuestion,
   faPlus,
   faQrcode,
   faRotate,
@@ -38,6 +41,7 @@ library.add(
   faCalendar,
   faChevronLeft,
   faCircleCheck,
+  faCircleQuestion,
   faCircleUser,
   faCopy,
   faEllipsisVertical,
@@ -48,6 +52,8 @@ library.add(
   faHouseChimney,
   faMagnifyingGlass,
   faPen,
+  faPersonCircleCheck,
+  faPersonCircleQuestion,
   faPlus,
   faQrcode,
   faRotate,

src/views/AccountViewView.vue

@@ -202,6 +202,29 @@
       </button>
     </div>
 
+    <div class="flex">
+      <button
+        class="text-center text-md text-blue-500 px-1.5 py-2"
+        @click="checkLimits()"
+      >
+        Check Limits
+      </button>
+      <div v-if="!!limits?.nextWeekBeginDateTime" class="px-9">
+        <span class="font-bold">Rate Limits</span>
+        <p>
+          You have done {{ limits.doneClaimsThisWeek }} claims out of
+          {{ limits.maxClaimsPerWeek }} for this week. Your claims counter
+          resets at {{ readableTime(limits.nextWeekBeginDateTime) }}
+        </p>
+        <p>
+          You have done {{ limits.doneRegistrationsThisMonth }} registrations
+          out of {{ limits.maxRegistrationsPerMonth }} for this month. Your
+          registrations counter resets at
+          {{ readableTime(limits.nextMonthBeginDateTime) }}
+        </p>
+      </div>
+    </div>
+
     <div v-bind:class="computedAlertClassNames()">
       <button
         class="close-button bg-slate-200 w-8 leading-loose rounded-full absolute top-2 right-2"
@@ -221,27 +244,47 @@ import { Options, Vue } from "vue-class-component";
 import { useClipboard } from "@vueuse/core";
 import { db, accountsDB } from "@/db";
 import { MASTER_SETTINGS_KEY } from "@/db/tables/settings";
-import { deriveAddress, generateSeed, newIdentifier } from "@/libs/crypto";
+import {
+  accessToken,
+  deriveAddress,
+  generateSeed,
+  newIdentifier,
+} from "@/libs/crypto";
+import { AppString } from "@/constants/app";
 //import { testServerRegisterUser } from "../test";
 
 // eslint-disable-next-line @typescript-eslint/no-var-requires
 const Buffer = require("buffer/").Buffer;
 
+interface RateLimits {
+  doneClaimsThisWeek: string;
+  doneRegistrationsThisMonth: string;
+  maxClaimsPerWeek: string;
+  maxRegistrationsPerMonth: string;
+  nextMonthBeginDateTime: string;
+  nextWeekBeginDateTime: string;
+}
+
 @Options({
   components: {},
 })
 export default class AccountViewView extends Vue {
   address = "";
+  derivationPath = "";
   firstName = "";
   lastName = "";
   mnemonic = "";
   publicHex = "";
   publicBase64 = "";
-  derivationPath = "";
+  limits: RateLimits | null = null;
   showContactGives = false;
 
   copy = useClipboard().copy;
 
+  readableTime(timeStr: string) {
+    return timeStr.substring(0, timeStr.indexOf("T"));
+  }
+
   // 'created' hook runs when the Vue instance is first created
   async created() {
     // Uncomment to register this user on the test server.
@@ -346,6 +389,39 @@ export default class AccountViewView extends Vue {
     }
   }
 
+  async checkLimits() {
+    const endorserApiServer = AppString.DEFAULT_ENDORSER_API_SERVER;
+    const url = endorserApiServer + "/api/report/rateLimits";
+    await accountsDB.open();
+    const accounts = await accountsDB.accounts.toArray();
+    const identity = JSON.parse(accounts[0].identity);
+    const token = await accessToken(identity);
+    const headers = {
+      "Content-Type": "application/json",
+      Authorization: "Bearer " + token,
+    };
+
+    try {
+      const resp = await this.axios.get(url, { headers });
+      if (resp.status === 200) {
+        this.limits = resp.data;
+      } else {
+        this.alertTitle = "Error from Server";
+        console.log("Bad response retrieving limits: ", resp.data);
+        if (resp.data.error?.message) {
+          this.alertMessage = resp.data.error?.message;
+        } else {
+          this.alertMessage = "Bad server response of " + resp.status;
+        }
+        this.isAlertVisible = true;
+      }
+    } catch (err) {
+      this.alertTitle = "Error from Server";
+      this.alertMessage = err as string;
+      this.isAlertVisible = true;
+    }
+  }
+
   alertMessage = "";
   alertTitle = "";
   isAlertVisible = false;

src/views/ContactsView.vue

@@ -112,14 +112,29 @@
             <span class="tooltiptext">Cannot see you</span>
             <fa icon="eye-slash" class="text-slate-900 fa-fw ml-1" />
           </button>
+
           <button class="tooltip" @click="checkVisibility(contact)">
             <span class="tooltiptext">Check Visibility</span>
             <fa icon="rotate" class="text-slate-900 fa-fw ml-1" />
           </button>
 
-          <button @click="deleteContact(contact)" class="px-9">
+          <button v-if="contact.registered" class="tooltip">
+            <span class="tooltiptext">Registered</span>
+            <fa icon="person-circle-check" class="text-slate-900 fa-fw ml-1" />
+          </button>
+          <button v-else @click="register(contact)" class="tooltip">
+            <span class="tooltiptext">Maybe not registered</span>
+            <fa
+              icon="person-circle-question"
+              class="text-slate-900 fa-fw ml-1"
+            />
+          </button>
+
+          <button @click="deleteContact(contact)" class="px-9 tooltip">
+            <span class="tooltiptext">Delete!</span>
             <fa icon="trash-can" class="text-red-600 fa-fw ml-1" />
           </button>
+
           <div v-if="showGiveTotals" class="float-right">
             <div class="float-right">
               to: {{ givenByMeTotals[contact.did] || 0 }}
@@ -170,6 +185,8 @@ import { MASTER_SETTINGS_KEY } from "@/db/tables/settings";
 // eslint-disable-next-line @typescript-eslint/no-var-requires
 const Buffer = require("buffer/").Buffer;
 
+const SERVICE_ID = "endorser.ch";
+
 export interface GiveVerifiableCredential {
   "@context": string;
   "@type": string;
@@ -179,6 +196,14 @@ export interface GiveVerifiableCredential {
   recipient: { identifier: string };
 }
 
+export interface RegisterVerifiableCredential {
+  "@context": string;
+  "@type": string;
+  agent: { identifier: string };
+  object: string;
+  recipient: { identifier: string };
+}
+
 @Options({
   components: {},
 })
@@ -319,7 +344,7 @@ export default class ContactsView extends Vue {
           this.nameForDid(this.contacts, contact.did) +
           " with DID " +
           contact.did +
-          "?"
+          " ?"
       )
     ) {
       await db.open();
@@ -328,6 +353,88 @@ export default class ContactsView extends Vue {
     }
   }
 
+  async register(contact: Contact) {
+    if (
+      confirm(
+        "Are you sure you want to use one of your registrations for " +
+          this.nameForDid(this.contacts, contact.did) +
+          "?"
+      )
+    ) {
+      await accountsDB.open();
+      const accounts = await accountsDB.accounts.toArray();
+      const identity = JSON.parse(accounts[0].identity);
+      // Make a claim
+      const vcClaim: RegisterVerifiableCredential = {
+        "@context": "https://schema.org",
+        "@type": "RegisterAction",
+        agent: { identifier: identity.did },
+        object: SERVICE_ID,
+        recipient: { identifier: contact.did },
+      };
+      // Make a payload for the claim
+      const vcPayload = {
+        vc: {
+          "@context": ["https://www.w3.org/2018/credentials/v1"],
+          type: ["VerifiableCredential"],
+          credentialSubject: vcClaim,
+        },
+      };
+      // Create a signature using private key of identity
+      if (identity.keys[0].privateKeyHex !== null) {
+        // eslint-disable-next-line @typescript-eslint/no-non-null-assertion
+        const privateKeyHex: string = identity.keys[0].privateKeyHex!;
+        const signer = await SimpleSigner(privateKeyHex);
+        const alg = undefined;
+        // Create a JWT for the request
+        const vcJwt: string = await didJwt.createJWT(vcPayload, {
+          alg: alg,
+          issuer: identity.did,
+          signer: signer,
+        });
+
+        // Make the xhr request payload
+        const payload = JSON.stringify({ jwtEncoded: vcJwt });
+        const endorserApiServer = AppString.DEFAULT_ENDORSER_API_SERVER;
+        const url = endorserApiServer + "/api/v2/claim";
+        const token = await accessToken(identity);
+        const headers = {
+          "Content-Type": "application/json",
+          Authorization: "Bearer " + token,
+        };
+
+        try {
+          const resp = await this.axios.post(url, payload, { headers });
+          //console.log("Got resp data:", resp.data);
+          if (resp.data?.success?.handleId) {
+            contact.registered = true;
+            db.contacts.update(contact.did, { registered: true });
+
+            this.alertTitle = "Registration Success";
+            this.alertMessage = contact.name + " has been registered.";
+            this.isAlertVisible = true;
+          }
+        } catch (error) {
+          let userMessage = "There was an error. See logs for more info.";
+          const serverError = error as AxiosError;
+          if (serverError) {
+            if (serverError.message) {
+              userMessage = serverError.message; // Info for the user
+            } else {
+              userMessage = JSON.stringify(serverError.toJSON());
+            }
+          } else {
+            userMessage = error as string;
+          }
+          // Now set that error for the user to see.
+          this.alertTitle = "Error with Server";
+          this.alertMessage = userMessage;
+          this.isAlertVisible = true;
+        }
+      }
+    }
+  }
+
   async setVisibility(contact: Contact, visibility: boolean) {
     const endorserApiServer = AppString.DEFAULT_ENDORSER_API_SERVER;
     const url =
@@ -387,6 +494,7 @@ export default class ContactsView extends Vue {
         const visibility = resp.data;
         contact.seesMe = visibility;
         db.contacts.update(contact.did, { seesMe: visibility });
+
         this.alertTitle = "Refreshed";
         this.alertMessage =
           this.nameForContact(contact, true) +
@@ -396,7 +504,6 @@ export default class ContactsView extends Vue {
         this.isAlertVisible = true;
       } else {
         this.alertTitle = "Error from Server";
-        console.log("Bad response checking visibility: ", resp.data);
         if (resp.data.error?.message) {
           this.alertMessage = resp.data.error?.message;
         } else {