Browse Source

add onboarding help instructions as separate page

pull/111/head
Trent Larson 8 months ago
parent
commit
0e2c5af16e
  1. 2
      README.md
  2. 5
      src/libs/util.ts
  3. 20
      src/router/index.ts
  4. 51
      src/views/ContactsView.vue
  5. 69
      src/views/HelpOnboardingView.vue
  6. 17
      src/views/HelpView.vue

2
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 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".) * 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.) * 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.) (If you find more, add them to the HelpNotificationsView.vue file.)

5
src/libs/util.ts

@ -15,11 +15,6 @@ import * as serverUtil from "@/libs/endorserServer";
// eslint-disable-next-line @typescript-eslint/no-var-requires // eslint-disable-next-line @typescript-eslint/no-var-requires
const Buffer = require("buffer/").Buffer; 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 = 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."; "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.";

20
src/router/index.ts

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

51
src/views/ContactsView.vue

@ -10,7 +10,8 @@
<span /> <span />
<span> <span>
<a <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" 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 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> { async onClickNewContact(): Promise<void> {
if (!this.contactInput) { if (!this.contactInput) {
this.$notify( this.$notify(
@ -531,7 +520,7 @@ export default class ContactsView extends Vue {
title: "No Contact", title: "No Contact",
text: "There was no contact info to add.", text: "There was no contact info to add.",
}, },
-1, 3000,
); );
return; return;
} }
@ -559,7 +548,7 @@ export default class ContactsView extends Vue {
title: "Contacts Added", title: "Contacts Added",
text: "Each contact was added. Nothing was sent to the server.", 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) { } catch (e) {
this.$notify( this.$notify(
@ -664,7 +653,7 @@ export default class ContactsView extends Vue {
title: "No Contact Info", title: "No Contact Info",
text: "The contact info could not be parsed.", text: "The contact info could not be parsed.",
}, },
-1, 3000,
); );
return; return;
} else { } else {
@ -686,7 +675,7 @@ export default class ContactsView extends Vue {
title: "Incomplete Contact", title: "Incomplete Contact",
text: "Cannot add a contact without a DID.", text: "Cannot add a contact without a DID.",
}, },
-1, 5000,
); );
return; return;
} }
@ -698,7 +687,7 @@ export default class ContactsView extends Vue {
title: "Invalid DID", title: "Invalid DID",
text: "The DID is not valid. It must begin with 'did:'", text: "The DID is not valid. It must begin with 'did:'",
}, },
-1, 5000,
); );
return; return;
} }
@ -737,7 +726,7 @@ export default class ContactsView extends Vue {
title: "Contact Added", title: "Contact Added",
text: addedMessage, text: addedMessage,
}, },
-1, // keeping it up so that the "visibility" message is seen 3000,
); );
}) })
.catch((err) => { .catch((err) => {
@ -853,7 +842,7 @@ export default class ContactsView extends Vue {
title: "Registration Still Unknown", title: "Registration Still Unknown",
text: message, text: message,
}, },
-1, 5000,
); );
} else if (resp.data?.success?.handleId) { } else if (resp.data?.success?.handleId) {
contact.registered = true; contact.registered = true;
@ -892,7 +881,7 @@ export default class ContactsView extends Vue {
title: "Registration Error", title: "Registration Error",
text: userMessage, text: userMessage,
}, },
-1, 5000,
); );
} }
} }
@ -933,7 +922,7 @@ export default class ContactsView extends Vue {
(visibility ? "" : "not ") + (visibility ? "" : "not ") +
"see your activity.", "see your activity.",
}, },
-1, 3000,
); );
} }
contact.seesMe = visibility; contact.seesMe = visibility;
@ -953,7 +942,7 @@ export default class ContactsView extends Vue {
title: "Error Setting Visibility", title: "Error Setting Visibility",
text: message, text: message,
}, },
-1, 5000,
); );
} }
} catch (err) { } catch (err) {
@ -965,7 +954,7 @@ export default class ContactsView extends Vue {
title: "Error Setting Visibility", title: "Error Setting Visibility",
text: "Check connectivity and try again.", text: "Check connectivity and try again.",
}, },
-1, 5000,
); );
} }
} }
@ -997,7 +986,7 @@ export default class ContactsView extends Vue {
(visibility ? "" : "not ") + (visibility ? "" : "not ") +
"see your activity.", "see your activity.",
}, },
-1, 3000,
); );
} else { } else {
console.error("Got bad server response checking visibility:", resp); console.error("Got bad server response checking visibility:", resp);
@ -1009,7 +998,7 @@ export default class ContactsView extends Vue {
title: "Error Checking Visibility", title: "Error Checking Visibility",
text: message, text: message,
}, },
-1, 5000,
); );
} }
} catch (err) { } catch (err) {
@ -1021,7 +1010,7 @@ export default class ContactsView extends Vue {
title: "Error Checking Visibility", title: "Error Checking Visibility",
text: "Check connectivity and try again.", text: "Check connectivity and try again.",
}, },
-1, 3000,
); );
} }
} }
@ -1069,7 +1058,7 @@ export default class ContactsView extends Vue {
title: "Input Error", title: "Input Error",
text: "This is not a valid number of hours: " + this.hourInput, text: "This is not a valid number of hours: " + this.hourInput,
}, },
-1, 3000,
); );
} else if (parseFloat(this.hourInput) == 0 && !this.hourDescriptionInput) { } else if (parseFloat(this.hourInput) == 0 && !this.hourDescriptionInput) {
this.$notify( this.$notify(
@ -1079,7 +1068,7 @@ export default class ContactsView extends Vue {
title: "Input Error", title: "Input Error",
text: "Giving no hours or description does nothing.", text: "Giving no hours or description does nothing.",
}, },
-1, 3000,
); );
} else if (!identity) { } else if (!identity) {
this.$notify( this.$notify(
@ -1089,7 +1078,7 @@ export default class ContactsView extends Vue {
title: "Status Error", title: "Status Error",
text: "No identifier is available.", text: "No identifier is available.",
}, },
-1, 3000,
); );
} else { } else {
// ask to confirm amount // ask to confirm amount
@ -1218,7 +1207,7 @@ export default class ContactsView extends Vue {
title: "Error Sending Give", title: "Error Sending Give",
text: userMessage, text: userMessage,
}, },
-1, 5000,
); );
} }
} }

69
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>

17
src/views/HelpView.vue

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

Loading…
Cancel
Save