From 0e2c5af16ead6625b27069a2aa25d3077625794a Mon Sep 17 00:00:00 2001 From: Trent Larson Date: Sun, 24 Mar 2024 17:01:53 -0600 Subject: [PATCH] add onboarding help instructions as separate page --- README.md | 2 +- src/libs/util.ts | 5 --- src/router/index.ts | 20 ++++++--- src/views/ContactsView.vue | 51 +++++++++-------------- src/views/HelpOnboardingView.vue | 69 ++++++++++++++++++++++++++++++++ src/views/HelpView.vue | 17 +------- 6 files changed, 106 insertions(+), 58 deletions(-) create mode 100644 src/views/HelpOnboardingView.vue diff --git a/README.md b/README.md index abb43f1a..dd2e6a0e 100644 --- a/README.md +++ b/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.) diff --git a/src/libs/util.ts b/src/libs/util.ts index 6c4a5c01..1a613df8 100644 --- a/src/libs/util.ts +++ b/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."; diff --git a/src/router/index.ts b/src/router/index.ts index 4f3e9fe4..0496a37d 100644 --- a/src/router/index.ts +++ b/src/router/index.ts @@ -98,12 +98,6 @@ const routes: Array = [ 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 = [ /* 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", diff --git a/src/views/ContactsView.vue b/src/views/ContactsView.vue index b866e5e2..8384163d 100644 --- a/src/views/ContactsView.vue +++ b/src/views/ContactsView.vue @@ -10,7 +10,8 @@ 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 { 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, ); } } diff --git a/src/views/HelpOnboardingView.vue b/src/views/HelpOnboardingView.vue new file mode 100644 index 00000000..e6c6b116 --- /dev/null +++ b/src/views/HelpOnboardingView.vue @@ -0,0 +1,69 @@ + + + diff --git a/src/views/HelpView.vue b/src/views/HelpView.vue index 79571b6f..30cb013d 100644 --- a/src/views/HelpView.vue +++ b/src/views/HelpView.vue @@ -83,9 +83,9 @@

How do I add someone else?

- + To start scanning, go here.

@@ -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, - ); - } }