Browse Source

enhance help & help onboarding

master
Trent Larson 1 month ago
parent
commit
f036a0df91
  1. 1
      CHANGELOG.md
  2. 62
      src/views/HelpOnboardingView.vue
  3. 2
      src/views/HelpView.vue

1
CHANGELOG.md

@ -11,6 +11,7 @@ and this project adheres to [Semantic Versioning](https://semver.org/spec/v2.0.0
- Invite for a contact to join immediately - Invite for a contact to join immediately
### Changed ### Changed
- Send signed data to nostr endpoints to verify public key ownership. - Send signed data to nostr endpoints to verify public key ownership.
- Enhanced help & help onboarding.
### Changed in DB or environment ### Changed in DB or environment
- Uses Endorser.ch version 4.1.1 - Uses Endorser.ch version 4.1.1

62
src/views/HelpOnboardingView.vue

@ -13,7 +13,8 @@
</div> </div>
<p> <p>
To invite someone, generate a link to send to them from this page: To invite someone the easiest way, send them a link that you generate from
this page:
<router-link <router-link
:to="{ name: 'invite-one' }" :to="{ name: 'invite-one' }"
class="bg-gradient-to-b from-green-400 to-green-700 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] text-white px-1.5 py-2 rounded-md" class="bg-gradient-to-b from-green-400 to-green-700 shadow-[inset_0_-1px_0_0_rgba(0,0,0,0.5)] text-white px-1.5 py-2 rounded-md"
@ -21,31 +22,42 @@
<fa icon="envelope-open-text" class="fa-fw text-xl" <fa icon="envelope-open-text" class="fa-fw text-xl"
/></router-link> /></router-link>
</p> </p>
<p>That's all it takes.</p> <p>Then watch that page to see when they accept their invite.</p>
<p>Watch that page to see when people accept their invite.</p>
<p> <p>
That page is also reachable from the Contacts <fa icon="users" /> page (That page is also reachable from the Contacts <fa icon="users" /> page
though the invitation <fa icon="envelope-open-text" /> icon. though the invitation <fa icon="envelope-open-text" /> icon.)
</p> </p>
<h1 class="font-bold text-xl">Advanced</h1> <h1 class="mt-4 font-bold text-xl">Next Steps</h1>
The following are optional steps for even more functionality: Although not totally necessary, these are important to understand.
<!-- eslint-disable prettier/prettier -->
<div class="ml-4"> <div class="ml-4">
<h1 class="font-bold text-xl">Install</h1> <h1 class="font-bold text-xl">Backups</h1>
<div> <div>
<p> <p>
1) Have them visit TimeSafari.app in a browser, preferably Chrome or Safari. Exporting backups (from the Account <fa icon="circle-user" /> screen)
</p> is important for the case where they lose their device. This is
<p> especially true for the Identifier Seed: that is theirs and and theirs
2) Have them "Install" the site to their desktop. alone, and currently nobody else can recover it if they lose it. The
good thing is that anyone can create a new account and simply inform
their network of their new ID.
</p> </p>
</div> </div>
</div>
<h1 class="mt-4 font-bold text-xl">Advanced</h1>
The following are optional steps for even more functionality.
<!-- eslint-disable prettier/prettier -->
<div class="ml-4">
<h1 class="font-bold text-xl">Add Contact & Register</h1> <h1 class="font-bold text-xl">Add Contact & Register</h1>
<p> <p>
You share even more information such as your picture and name when You share even more information such as your picture and name when
you share with your QR code at these links: <fa icon="qrcode" /> Scanning you share with your QR code at these links: <fa icon="qrcode" />
</p>
<p>
Scanning
those with your cameras will automatically register people and add them those with your cameras will automatically register people and add them
to each other's contact lists. to each other's contact lists.
</p> </p>
@ -54,33 +66,37 @@
</p> </p>
<div> <div>
<p> <p>
3) Have them follow their yellow prompts. 1) Have them follow their yellow prompts.
</p> </p>
<p> <p>
4) Scan their QR, or have them tap on it to copy their info and send it to you. 2) Scan their QR, or have them tap on it to copy their info and send it to you.
Then you can add them to your Contacts <fa icon="users" /> Then you can add them to your Contacts <fa icon="users" />
</p> </p>
<p> <p>
5) You can register them at their info page <fa icon="circle-info" /> 3) You can register them at their info page <fa icon="circle-info" />
and click on the register button <fa icon="person-circle-question" /> and click on the register button <fa icon="person-circle-question" />
</p> </p>
<p> <p>
6) Add yourself to their Contacts <fa icon="users" /> 4) Add yourself to their Contacts <fa icon="users" />
</p> </p>
</div> </div>
<h1 class="font-bold text-xl">Enable Notifications</h1> <h1 class="font-bold text-xl">Install</h1>
<div> <div>
<p> <p>
7) Enable notifications from the Account page <fa icon="circle-user" /> Have them visit TimeSafari.app in a browser, preferably Chrome or Safari,
and then look for the "Install" selection which adds this app to their desktop.
This enables other things, like the ability to "share" a photo from their
device directly to Time Safari, and it makes notifications more reliable.
</p> </p>
</div> </div>
<h1 class="font-bold text-xl">Discuss Backups</h1> <h1 class="font-bold text-xl">Enable Notifications</h1>
<div> <div>
<p> <p>
8) Exporting backups <fa icon="circle-user" /> are important if they lose their phone Enable notifications from the Account page <fa icon="circle-user" />.
--- especially for the Identifier Seed! Those notifications might show up on the device depending on your settings.
For the most reliable habits, people should own alarm or some other ritual to look every day.
</p> </p>
</div> </div>

2
src/views/HelpView.vue

@ -515,6 +515,8 @@
<fa v-show="!showDidCopy" icon="copy" class="text-slate-400 fa-fw" /> <fa v-show="!showDidCopy" icon="copy" class="text-slate-400 fa-fw" />
</button> </button>
<span v-show="showDidCopy" class="ml-2 text-sm text-green-500">Copied</span> <span v-show="showDidCopy" class="ml-2 text-sm text-green-500">Copied</span>
You can donate online via
<a href="https://www.patreon.com/TimeSafari" target="_blank" class="text-blue-500">Patreon here</a>.
For other donations, contact us. For other donations, contact us.
</p> </p>

Loading…
Cancel
Save