add onboarding help instructions as separate page

README.md

@@ -128,7 +128,7 @@ To add an icon, add to main.ts and reference with `fa` element and `icon` attrib
 
 * Clear cache for site. (In Chrome, go to `chrome://settings/cookies` and "all site data and permissions"; in Firefox, go to `about:preferences` and search for "cache" then "Manage Data", and also manually remove the IndexedDB data if the DBs still show.)
 * Clear notification permission. (In Chrome, go to `chrome://settings/content/notifications`; in Firefox, go to `about:preferences` and search for "notifications".)
-* Unregister service worker. (In Chrome, go to `chrome://serviceworker-internals/`; in Firefox, go to `about:serviceworkers`.)
+* Unregister service worker. (In Chrome, go to `chrome://serviceworker-internals`; in Firefox, go to `about:serviceworkers`.)
 * Clear Cache Storage manually, possibly deleting the DB. (In Chrome, in dev tools under Application; in Firefox, in dev tools under Storage.)
 
 (If you find more, add them to the HelpNotificationsView.vue file.)

src/libs/util.ts

@@ -15,11 +15,6 @@ import * as serverUtil from "@/libs/endorserServer";
 // eslint-disable-next-line @typescript-eslint/no-var-requires
 const Buffer = require("buffer/").Buffer;
 
-// 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) Read through all their yellow prompts. 2) Add them to your Contacts by scanning with the QR icon that is by the input box. 3) Click the person icon to register them. 4) Show them your QR so they'll scan you. 5) Have them enable notifications.";
-
 export const PRIVACY_MESSAGE =
   "The data you send be visible to the world -- except: your IDs and the IDs of anyone you tag will stay private, only visible to those you allow.";
 

src/router/index.ts

@@ -98,12 +98,6 @@ const routes: Array<RouteRecordRaw> = [
     component: () =>
       import(/* webpackChunkName: "help" */ "../views/HelpView.vue"),
   },
-  {
-    path: "/",
-    name: "home",
-    component: () =>
-      import(/* webpackChunkName: "home" */ "../views/HomeView.vue"),
-  },
   {
     path: "/help-notifications",
     name: "help-notifications",
@@ -112,6 +106,20 @@ const routes: Array<RouteRecordRaw> = [
         /* webpackChunkName: "help-notifications" */ "../views/HelpNotificationsView.vue"
       ),
   },
+  {
+    path: "/help-onboarding",
+    name: "help-onboarding",
+    component: () =>
+      import(
+        /* webpackChunkName: "help-onboarding" */ "../views/HelpOnboardingView.vue"
+      ),
+  },
+  {
+    path: "/",
+    name: "home",
+    component: () =>
+      import(/* webpackChunkName: "home" */ "../views/HomeView.vue"),
+  },
   {
     path: "/identity-switcher",
     name: "identity-switcher",

src/views/ContactsView.vue

@@ -10,7 +10,8 @@
       <span />
       <span>
         <a
-          @click="showHintsForOnboarding()"
+          href="/help-onboarding"
+          target="_blank"
           class="text-xs uppercase bg-gradient-to-b from-blue-400 to-blue-700 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] text-white px-1.5 py-1 rounded-md ml-1"
         >
           Onboarding Guide
@@ -510,18 +511,6 @@ export default class ContactsView extends Vue {
     }
   }
 
-  showHintsForOnboarding() {
-    this.$notify(
-      {
-        group: "alert",
-        type: "info",
-        title: "Onboard Someone",
-        text: libsUtil.ONBOARD_MESSAGE,
-      },
-      -1,
-    );
-  }
-
   async onClickNewContact(): Promise<void> {
     if (!this.contactInput) {
       this.$notify(
@@ -531,7 +520,7 @@ export default class ContactsView extends Vue {
           title: "No Contact",
           text: "There was no contact info to add.",
         },
-        -1,
+        3000,
       );
       return;
     }
@@ -559,7 +548,7 @@ export default class ContactsView extends Vue {
             title: "Contacts Added",
             text: "Each contact was added. Nothing was sent to the server.",
           },
-          -1, // keeping it up so that the "visibility" message is seen
+          3000, // keeping it up so that the "visibility" message is seen
         );
       } catch (e) {
         this.$notify(
@@ -664,7 +653,7 @@ export default class ContactsView extends Vue {
           title: "No Contact Info",
           text: "The contact info could not be parsed.",
         },
-        -1,
+        3000,
       );
       return;
     } else {
@@ -686,7 +675,7 @@ export default class ContactsView extends Vue {
           title: "Incomplete Contact",
           text: "Cannot add a contact without a DID.",
         },
-        -1,
+        5000,
       );
       return;
     }
@@ -698,7 +687,7 @@ export default class ContactsView extends Vue {
           title: "Invalid DID",
           text: "The DID is not valid. It must begin with 'did:'",
         },
-        -1,
+        5000,
       );
       return;
     }
@@ -737,7 +726,7 @@ export default class ContactsView extends Vue {
             title: "Contact Added",
             text: addedMessage,
           },
-          -1, // keeping it up so that the "visibility" message is seen
+          3000,
         );
       })
       .catch((err) => {
@@ -853,7 +842,7 @@ export default class ContactsView extends Vue {
                 title: "Registration Still Unknown",
                 text: message,
               },
-              -1,
+              5000,
             );
           } else if (resp.data?.success?.handleId) {
             contact.registered = true;
@@ -892,7 +881,7 @@ export default class ContactsView extends Vue {
               title: "Registration Error",
               text: userMessage,
             },
-            -1,
+            5000,
           );
         }
       }
@@ -933,7 +922,7 @@ export default class ContactsView extends Vue {
                   (visibility ? "" : "not ") +
                   "see your activity.",
               },
-              -1,
+              3000,
             );
           }
           contact.seesMe = visibility;
@@ -953,7 +942,7 @@ export default class ContactsView extends Vue {
               title: "Error Setting Visibility",
               text: message,
             },
-            -1,
+            5000,
           );
         }
       } catch (err) {
@@ -965,7 +954,7 @@ export default class ContactsView extends Vue {
             title: "Error Setting Visibility",
             text: "Check connectivity and try again.",
           },
-          -1,
+          5000,
         );
       }
     }
@@ -997,7 +986,7 @@ export default class ContactsView extends Vue {
               (visibility ? "" : "not ") +
               "see your activity.",
           },
-          -1,
+          3000,
         );
       } else {
         console.error("Got bad server response checking visibility:", resp);
@@ -1009,7 +998,7 @@ export default class ContactsView extends Vue {
             title: "Error Checking Visibility",
             text: message,
           },
-          -1,
+          5000,
         );
       }
     } catch (err) {
@@ -1021,7 +1010,7 @@ export default class ContactsView extends Vue {
           title: "Error Checking Visibility",
           text: "Check connectivity and try again.",
         },
-        -1,
+        3000,
       );
     }
   }
@@ -1069,7 +1058,7 @@ export default class ContactsView extends Vue {
           title: "Input Error",
           text: "This is not a valid number of hours: " + this.hourInput,
         },
-        -1,
+        3000,
       );
     } else if (parseFloat(this.hourInput) == 0 && !this.hourDescriptionInput) {
       this.$notify(
@@ -1079,7 +1068,7 @@ export default class ContactsView extends Vue {
           title: "Input Error",
           text: "Giving no hours or description does nothing.",
         },
-        -1,
+        3000,
       );
     } else if (!identity) {
       this.$notify(
@@ -1089,7 +1078,7 @@ export default class ContactsView extends Vue {
           title: "Status Error",
           text: "No identifier is available.",
         },
-        -1,
+        3000,
       );
     } else {
       // ask to confirm amount
@@ -1218,7 +1207,7 @@ export default class ContactsView extends Vue {
             title: "Error Sending Give",
             text: userMessage,
           },
-          -1,
+          5000,
         );
       }
     }

src/views/HelpOnboardingView.vue

@@ -0,0 +1,69 @@
+<template>
+  <!-- Don't include nav buttons since this is shown in a different window. -->
+
+  <!-- CONTENT -->
+  <section id="Content" class="p-6 pb-24 max-w-3xl mx-auto">
+    <!-- Breadcrumb -->
+    <div class="mb-8">
+      <!-- Don't include 'back' button since this is shown in a different window. -->
+      <!-- Heading -->
+      <h1 id="ViewHeading" class="text-4xl text-center font-light pt-4 mb-8">
+        Time Safari Onboarding Instructions
+      </h1>
+    </div>
+
+    <!-- eslint-disable prettier/prettier -->
+    <div class="ml-4">
+      <h1 class="font-bold text-xl">Install</h1>
+      <div>
+        <p>
+          1) Have them visit TimeSafari.app in a browser, preferably Chrome or Safari.
+        </p>
+        <p>
+          2) Have them "Install" the site to their desktop.
+        </p>
+      </div>
+
+      <h1 class="font-bold text-xl">Add Contact & Register</h1>
+      <div>
+        <p>
+          3) Have them follow their yellow prompts.
+        </p>
+        <p>
+          4) Add them to your contacts <fa icon="users" />
+        </p>
+        <p>
+          5) Register them <fa icon="person-circle-question" />
+        </p>
+        <p>
+          6) Add yourself to their contacts <fa icon="users" />
+        </p>
+      </div>
+
+      <h1 class="font-bold text-xl">Enable Notifications</h1>
+      <div>
+        <p>
+          7) Enable notifications from <fa icon="circle-user" />
+        </p>
+      </div>
+
+      <h1 class="font-bold text-xl">Discuss Backups</h1>
+      <div>
+        <p>
+          8) Exporting backups <fa icon="circle-user" /> are important if they lose their phone --- especially for the Identifier Seed!
+        </p>
+      </div>
+
+    </div>
+    <!-- eslint enable -->
+  </section>
+</template>
+
+<script lang="ts">
+import { Component, Vue } from "vue-facing-decorator";
+
+import QuickNav from "@/components/QuickNav.vue";
+
+@Component({ components: { QuickNav } })
+export default class Help extends Vue {}
+</script>

src/views/HelpView.vue

@@ -83,9 +83,9 @@
 
       <h2 class="text-xl font-semibold">How do I add someone else?</h2>
       <p>
-        <button class="text-blue-500" @click="showOnboardInfo">
+        <a href="/help-onboarding" target="_blank" class="text-blue-500">
           Click here to show an alert with the steps.
-        </button>
+        </a>
         To start scanning, go
         <router-link class="text-blue-500" to="/contact-qr">here.</router-link>
       </p>
@@ -376,7 +376,6 @@ import { Component, Vue } from "vue-facing-decorator";
 import * as Package from "../../package.json";
 import QuickNav from "@/components/QuickNav.vue";
 import { NotificationIface } from "@/constants/app";
-import { ONBOARD_MESSAGE } from "@/libs/util";
 
 @Component({ components: { QuickNav } })
 export default class Help extends Vue {
@@ -384,17 +383,5 @@ export default class Help extends Vue {
 
   package = Package;
   commitHash = process.env.VUE_APP_GIT_HASH;
-
-  showOnboardInfo() {
-    this.$notify(
-      {
-        group: "alert",
-        type: "info",
-        title: "Onboard Someone",
-        text: ONBOARD_MESSAGE,
-      },
-      -1,
-    );
-  }
 }
 </script>