add hints for registration on the contact page

package.json

@@ -1,6 +1,6 @@
 {
   "name": "TimeSafari_Test",
-  "version": "0.2.1",
+  "version": "0.2.2",
   "private": true,
   "scripts": {
     "serve": "vue-cli-service serve",

project.task.yaml

@@ -15,8 +15,10 @@ tasks:
 - record donations vs gives
 - make server endpoint for full English description of limits
 - make identicons for contacts into more-memorable faces (and maybe change project identicons, too)
+- create a help-desk document & add screenshots
 
 - 01 server - show all claim details when issued by the issuer
+- 01 on Mac (& Windows?) desktop, add a help blurb so that they can find it again (since it doesn't show in Application list)
 - bug - got error adding on Firefox user #0 as contact for themselves
 - bug (that is hard to reproduce) - back-and-forth on discovery & project pages led to "You need an identity to load your projects." error on product page when I had an identity
 - bug (that is hard to reproduce) - in Chrome, install app then delete app and try from Chrome browser and see log errors "Uncaught TypeError: self.appendDailyLog is not a function"

src/libs/util.ts

@@ -13,6 +13,11 @@ export const isGlobalUri = (uri: string) => {
   return uri && uri.match(new RegExp(/^[A-Za-z][A-Za-z0-9+.-]+:/));
 };
 
+// If you edit this, check that the numbers still line up on the side in the alert (on mobile, too),
+// and make sure they can take all actions while the notification shows.
+export const ONBOARD_MESSAGE =
+  "1) Check that they've entered their name. 2) Go to the scanning page: use the Contacts page and click on the QR icon at the top, and then scan and register them. 3) Have them go to that page and scan you.";
+
 export const sendTestThroughPushServer = async (
   subscription: PushSubscription,
   skipFilter: boolean,

src/views/ContactQRScanShowView.vue

@@ -51,8 +51,7 @@
         create your identifier.
       </router-link>
       <br />
-      We recommend you do that first; otherwise, these contacts won't see your
-      activity.
+      If you don't that first, these contacts won't see your activity.
     </div>
 
     <div class="text-center">

src/views/ContactsView.vue

@@ -9,17 +9,17 @@
     <div class="flex justify-between py-2">
       <span />
       <span>
-        <router-link
-          :to="{ name: 'help' }"
+        <a
+          @click="showHintsForOnboarding()"
           class="text-xs uppercase bg-blue-500 text-white px-1.5 py-1 rounded-md ml-1"
         >
-          Help
-        </router-link>
+          Onboarding Hints
+        </a>
       </span>
     </div>
 
     <!-- New Contact -->
-    <div class="mb-4 flex items-stretch">
+    <div class="mt-4 mb-4 flex items-stretch">
       <router-link
         :to="{ name: 'contact-qr' }"
         class="flex items-center bg-slate-500 text-white px-1.5 py-1 mr-1 rounded-md"
@@ -144,19 +144,14 @@
                 @click="register(contact)"
                 class="text-sm uppercase bg-slate-500 text-white ml-6 px-2 py-1.5 rounded-md"
                 v-if="activeDid"
+                title="Registration"
               >
                 <fa
                   v-if="contact.registered"
                   icon="person-circle-check"
                   class="fa-fw"
-                  title="Registered"
-                />
-                <fa
-                  v-else
-                  icon="person-circle-question"
-                  class="fa-fw"
-                  title="Registration Unknown"
                 />
+                <fa v-else icon="person-circle-question" class="fa-fw" />
               </button>
             </div>
 
@@ -280,6 +275,7 @@ import { Component, Vue } from "vue-facing-decorator";
 import QuickNav from "@/components/QuickNav.vue";
 import EntityIcon from "@/components/EntityIcon.vue";
 import { Account } from "@/db/tables/accounts";
+import { ONBOARD_MESSAGE } from "@/libs/util";
 
 // eslint-disable-next-line @typescript-eslint/no-var-requires
 const Buffer = require("buffer/").Buffer;
@@ -477,6 +473,18 @@ export default class ContactsView extends Vue {
     }
   }
 
+  showHintsForOnboarding() {
+    this.$notify(
+      {
+        group: "alert",
+        type: "info",
+        title: "Onboard Someone",
+        text: ONBOARD_MESSAGE,
+      },
+      -1,
+    );
+  }
+
   async onClickNewContact(): Promise<void> {
     if (!this.contactInput) {
       this.$notify(
@@ -582,10 +590,9 @@ export default class ContactsView extends Vue {
         if (this.activeDid) {
           this.setVisibility(newContact, true, false);
           addedMessage =
-            newContact.name +
-            " was added, and your activity is visible to them.";
+            "They were added, and your activity is visible to them.";
         } else {
-          addedMessage = newContact.name + " was added.";
+          addedMessage = "They were added.";
         }
         if (this.isRegistered) {
           this.$notify(
@@ -593,10 +600,7 @@ export default class ContactsView extends Vue {
               group: "alert",
               type: "info",
               title: "New User?",
-              text:
-                "If " +
-                newContact.name +
-                " is a new user, be sure to register them.",
+              text: "If they are a new user, be sure to register them.",
             },
             -1,
           );

src/views/HelpView.vue

@@ -301,9 +301,11 @@
 </template>
 
 <script lang="ts">
-import * as Package from "../../package.json";
 import { Component, Vue } from "vue-facing-decorator";
+
+import * as Package from "../../package.json";
 import QuickNav from "@/components/QuickNav.vue";
+import { ONBOARD_MESSAGE } from "@/libs/util";
 
 interface Notification {
   group: string;
@@ -325,8 +327,7 @@ export default class Help extends Vue {
         group: "alert",
         type: "info",
         title: "Onboard Someone",
-        // If you edit this, check that the numbers still line up on the side in the alert (on mobile, preferably).
-        text: "1) Check that they've entered their name. 2) Go to the scanning page via the Identity page and then the through the QR icon at the top, and then scan and register them. 3) Have them go to that page and scan you.",
+        text: ONBOARD_MESSAGE,
       },
       -1,
     );

src/views/HomeView.vue

@@ -44,7 +44,8 @@
               width="30"
               style="display: inline; margin: 0 5px; vertical-align: middle"
             />
-            and go use that app.
+            and go use that app. If you already did these steps, reload this app
+            so that it is fully detected.
           </span>
           <span v-else>
             Try