add help blurb for registration, and other minor doc tweaks

project.yaml

@@ -6,14 +6,14 @@
 - replace user-affecting console.logs with error messages (eg. catches)
 
 - contacts v1 :
-  - .1 remove 'copy' until it works
+  - .2 warn about amounts when you cannot see them
+  - .1 add confirmation message when 'copy' succeeds
   - .5 switch to prod server
   - .5 Add page to show seed.
   - 01 Provide a way to import the non-sensitive data.
   - 01 Provide way to share your contact info.
   - .2 move all "identity" references to temporary account access
   - .5 make deploy for give-only features
-  - .5 get 'copy' to work on account page
 
 - contacts v+ :
   - .5 make advanced "show/hide amounts" button into a nice UI toggle
@@ -42,6 +42,3 @@
 - Peer DID
 
 - DIDComm
-
-- v video for multiple identities https://youtu.be/p8L87AeD76w
-- v video for adding time to contacts https://youtu.be/7Yylczevp10

src/components/InfiniteScroll.vue

@@ -1,42 +0,0 @@
-<template>
-  <div ref="scrollContainer">
-    <slot />
-    <div ref="sentinel" style="height: 1px"></div>
-  </div>
-</template>
-
-<script lang="ts">
-import { Component, Emit, Prop, Vue } from "vue-facing-decorator";
-
-@Component
-export default class InfiniteScroll extends Vue {
-  @Prop({ default: 100 })
-  readonly distance!: number;
-  private observer!: IntersectionObserver;
-
-  mounted() {
-    const options = {
-      root: this.$refs.scrollContainer as HTMLElement,
-      rootMargin: `0px 0px ${this.distance}px 0px`,
-      threshold: 1.0,
-    };
-    this.observer = new IntersectionObserver(this.handleIntersection, options);
-    this.observer.observe(this.$refs.sentinel as HTMLElement);
-  }
-
-  beforeUnmount() {
-    this.observer.disconnect();
-  }
-  @Emit("reached-bottom")
-  handleIntersection(entries: IntersectionObserverEntry[]) {
-    const entry = entries[0];
-    if (entry.isIntersecting) {
-      return true;
-    }
-    return false;
-  }
-}
-</script>
-
-<!-- Add "scoped" attribute to limit CSS to this component only -->
-<style scoped></style>

src/views/AccountViewView.vue

@@ -89,15 +89,9 @@
       <div class="text-slate-500 text-sm font-bold">ID</div>
       <div class="text-sm text-slate-500 flex justify-start items-center mb-1">
         <code class="truncate">{{ activeDid }}</code>
-        <button
-          @click="
-            doCopyTwoSecRedo(activeDid, () => (showDidCopy = !showDidCopy))
-          "
-          class="ml-2"
-        >
+        <button @click="copy(activeDid)" class="ml-2">
           <fa icon="copy" class="text-slate-400 fa-fw"></fa>
         </button>
-        <span v-show="showDidCopy">Copied!</span>
         <span class="whitespace-nowrap ml-4">
           <button
             class="text-xs uppercase bg-slate-500 text-white px-1.5 py-1 rounded-md"
@@ -115,43 +109,25 @@
       <div class="text-slate-500 text-sm font-bold">Public Key (base 64)</div>
       <div class="text-sm text-slate-500 flex justify-start items-center mb-1">
         <code class="truncate">{{ publicBase64 }}</code>
-        <button
-          @click="
-            doCopyTwoSecRedo(publicBase64, () => (showB64Copy = !showB64Copy))
-          "
-          class="ml-2"
-        >
+        <button @click="copy(publicBase64)" class="ml-2">
           <fa icon="copy" class="text-slate-400 fa-fw"></fa>
         </button>
-        <span v-show="showB64Copy">Copied!</span>
       </div>
 
       <div class="text-slate-500 text-sm font-bold">Public Key (hex)</div>
       <div class="text-sm text-slate-500 flex justify-start items-center mb-1">
         <code class="truncate">{{ publicHex }}</code>
-        <button
-          @click="
-            doCopyTwoSecRedo(publicHex, () => (showPubCopy = !showPubCopy))
-          "
-          class="ml-2"
-        >
+        <button @click="copy(publicHex)" class="ml-2">
           <fa icon="copy" class="text-slate-400 fa-fw"></fa>
         </button>
-        <span v-show="showPubCopy">Copied!</span>
       </div>
 
       <div class="text-slate-500 text-sm font-bold">Derivation Path</div>
       <div class="text-sm text-slate-500 flex justify-start items-center mb-1">
         <code class="truncate">{{ derivationPath }}</code>
-        <button
-          @click="
-            doCopyTwoSecRedo(derivationPath, () => (showDerCopy = !showDerCopy))
-          "
-          class="ml-2"
-        >
+        <button @click="copy(derivationPath)" class="ml-2">
           <fa icon="copy" class="text-slate-400 fa-fw"></fa>
         </button>
-        <span v-show="showDerCopy">Copied!</span>
       </div>
     </div>
 
@@ -230,7 +206,7 @@
 
     <div class="flex py-2">
       <button class="text-center text-md text-blue-500" @click="checkLimits()">
-        Check Limits
+        Check Registration and Claim Limits
       </button>
       <div v-if="!!limits?.nextWeekBeginDateTime" class="px-9">
         <span class="font-bold">Rate Limits</span>
@@ -312,18 +288,7 @@ export default class AccountViewView extends Vue {
   limits: RateLimits | null = null;
   showContactGives = false;
 
-  showDidCopy = false;
-  showDerCopy = false;
-  showB64Copy = false;
-  showPubCopy = false;
-
-  // call fn, copy text to the clipboard, then redo fn after 2 seconds
-  doCopyTwoSecRedo(text, fn) {
-    fn();
-    useClipboard()
-      .copy(text)
-      .then(() => setTimeout(fn, 2000));
-  }
+  copy = useClipboard().copy;
 
   handleChange() {
     this.showContactGives = !this.showContactGives;
@@ -341,6 +306,7 @@ export default class AccountViewView extends Vue {
     // assign this to a class variable, eg. "registerThisUser = testServerRegisterUser",
     // select a component in the extension, and enter in the console: $vm.ctx.registerThisUser()
     //testServerRegisterUser();
+
     try {
       await db.open();
       const settings = await db.settings.get(MASTER_SETTINGS_KEY);

src/views/ContactAmountsView.vue

@@ -72,7 +72,7 @@
                 <fa icon="circle-check" class="text-green-600 fa-fw ml-1" />
                 <span class="tooltiptext">Confirmed</span>
               </span>
-              <button v-else class="tooltip" @click="confirm(record)">
+              <button v-else class="tooltip" @click="confirmGiven(record)">
                 <fa icon="circle" class="text-blue-600 fa-fw ml-1" />
                 <span class="tooltiptext">Unconfirmed</span>
               </button>
@@ -239,7 +239,11 @@ export default class ContactsView extends Vue {
     }
   }
 
-  async confirm(record: GiveServerRecord) {
+  async confirmGiven(record: GiveServerRecord) {
+    if (!confirm("Are you sure you want to mark this as confirmed?")) {
+      return;
+    }
+
     // Make claim
     // I use clone here because otherwise it gets a Proxy object.
     // eslint-disable-next-line @typescript-eslint/no-explicit-any

src/views/ContactsView.vue

@@ -49,18 +49,6 @@
       Your Contacts
     </h1>
 
-    <div class="flex justify-between py-2">
-      <span />
-      <span>
-        <router-link
-          :to="{ name: 'help' }"
-          class="text-xs uppercase bg-blue-500 text-white px-1.5 py-1 rounded-md ml-1"
-        >
-          Help
-        </router-link>
-      </span>
-    </div>
-
     <!-- New Contact -->
     <div class="mb-4 flex">
       <input
@@ -177,11 +165,12 @@
                         : (givenByMeUnconfirmed[contact.did] || 0)
                   /* eslint-enable prettier/prettier */
                 }}
-                <span
-                  v-if="givenByMeDescriptions[contact.did]"
-                  class="tooltiptext-left"
-                >
-                  {{ givenByMeDescriptions[contact.did] }}
+                <span class="tooltiptext-left">
+                  {{
+                    givenByMeDescriptions[contact.did]
+                      ? "Most recently: " + givenByMeDescriptions[contact.did]
+                      : "(None given yet.)"
+                  }}
                 </span>
                 <button
                   class="text-md uppercase bg-slate-500 text-white px-1.5 py-2 rounded-md mb-6"
@@ -202,11 +191,12 @@
                         : (givenToMeUnconfirmed[contact.did] || 0)
                   /* eslint-enable prettier/prettier */
                 }}
-                <span
-                  v-if="givenToMeDescriptions[contact.did]"
-                  class="tooltiptext-left"
-                >
-                  {{ givenToMeDescriptions[contact.did] }}
+                <span class="tooltiptext-left">
+                  {{
+                    givenToMeDescriptions[contact.did]
+                      ? "Most recently: " + givenToMeDescriptions[contact.did]
+                      : "(None received yet.)"
+                  }}
                 </span>
                 <button
                   class="text-md uppercase bg-slate-500 text-white px-1.5 py-2 rounded-md mb-6"
@@ -342,8 +332,8 @@ export default class ContactsView extends Vue {
         const contactUnconfirmed: Record<string, number> = {};
         const allData: Array<GiveServerRecord> = resp.data.data;
         for (const give of allData) {
-          if (give.unit == "HUR") {
           const recipDid: string = give.recipientDid;
+          if (recipDid && give.unit == "HUR") {
             if (give.amountConfirmed) {
               const prevAmount = contactConfirmed[recipDid] || 0;
               contactConfirmed[recipDid] = prevAmount + give.amount;
@@ -357,7 +347,6 @@ export default class ContactsView extends Vue {
             }
           }
         }
-        //console.log("Done retrieving gives", contactConfirmed);
         this.givenByMeDescriptions = contactDescriptions;
         this.givenByMeConfirmed = contactConfirmed;
         this.givenByMeUnconfirmed = contactUnconfirmed;

src/views/HelpView.vue

@@ -48,20 +48,20 @@
   </nav>
 
   <!-- CONTENT -->
-  <section id="Content" class="p-6 pb-24">
+  <section id="Content" class="p-4 pb-24">
     <!-- Heading -->
     <h1 id="ViewHeading" class="text-4xl text-center font-light pt-4 mb-8">
       Help
     </h1>
 
     <div>
-      <h2 class="text-xl font-semibold">Introduction</h2>
+      <h2 class="text-xl font-semibold py-4">Introduction</h2>
       <p>
         This app is a window into data that you and your friends own, focused on
         gifts and collaboration.
       </p>
 
-      <h2 class="text-xl font-semibold">How do I backup all my data?</h2>
+      <h2 class="text-xl font-semibold py-4">How do I backup all my data?</h2>
       <p>
         There are two parts to backup your data: the identifier secrets and the
         other data such as settings, contacts, etc.
@@ -73,7 +73,7 @@
         </h2>
         <ul class="list-disc list-inside">
           <li>
-            Go to Your Identity <fa icon="circle-user" class="fa-fw" /> page.
+            Go to your Identity <fa icon="circle-user" class="fa-fw" /> page.
           </li>
           <li>
             Click on "Backup Identifier Seed" and follow the instructions.
@@ -85,7 +85,7 @@
         </h2>
         <ul class="list-disc list-inside">
           <li>
-            Go to Your Identity <fa icon="circle-user" class="fa-fw" /> page.
+            Go to your Identity <fa icon="circle-user" class="fa-fw" /> page.
           </li>
           <li>
             Click on "Download Settings...". That will save a file to your
@@ -95,7 +95,7 @@
         </ul>
       </div>
 
-      <h2 class="text-xl font-semibold">How do I restore my data?</h2>
+      <h2 class="text-xl font-semibold py-4">How do I restore my data?</h2>
       <p>
         There are two parts to restore your data: the identity secrets and the
         other data such as settings, contacts, etc.
@@ -135,30 +135,24 @@
         </ul>
       </div>
 
-      <h2 class="text-xl font-semibold">
+      <h2 class="text-xl font-semibold py-4">
+        How do I get registered to make claims?
+      </h2>
+      <p>
+        Contact a current user. They will be able to register you on their
+        Contacts <fa icon="users" class="fa-fw" /> screen. Note that they have a
+        limited number of registrations.
+      </p>
+
+      <h2 class="text-xl font-semibold py-4">
         How do I add someone to my contacts?
       </h2>
       <p>
         Tell them to copy their ID, which typically starts with "did:ethr:...",
         and send it to you. Go to the Contacts
-        <fa icon="circle-user" class="fa-fw" /> page and enter that into the top
-        form. You may add a name by adding a comma followed by their name; you
-        may also add their public key by adding another comma followed by the
-        key.
-      </p>
-
-      <h2 class="text-xl font-semibold">
-        I know there is a record from someone, so why can't I see that info?
-      </h2>
-      <p>
-        Sometimes someone else has made claims -- meaning they have given time,
-        or recognized time given, or declared a project -- but you cannot see
-        anything associated with them. The reason may be because they have not
-        given you permission to see their information. Ask them to add you to
-        their contact list and make sure the eye next to your name is open like
-        this
-        <fa icon="eye" class="fa-fw" /> and not closed like this
-        <fa icon="eye-slash" class="fa-fw" />.
+        <fa icon="users" class="fa-fw" /> page and enter that into the top form.
+        You may add a name by adding a comma followed by their name; you may
+        also add their public key by adding another comma followed by the key.
       </p>
     </div>
   </section>