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
### Changed
- Send signed data to nostr endpoints to verify public key ownership.
- Enhanced help & help onboarding.
### Changed in DB or environment
- Uses Endorser.ch version 4.1.1

62
src/views/HelpOnboardingView.vue

@ -13,7 +13,8 @@
</div>
<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
: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"
@ -21,31 +22,42 @@
<fa icon="envelope-open-text" class="fa-fw text-xl"
/></router-link>
</p>
<p>That's all it takes.</p>
<p>Watch that page to see when people accept their invite.</p>
<p>Then watch that page to see when they accept their invite.</p>
<p>
That page is also reachable from the Contacts <fa icon="users" /> page
though the invitation <fa icon="envelope-open-text" /> icon.
(That page is also reachable from the Contacts <fa icon="users" /> page
though the invitation <fa icon="envelope-open-text" /> icon.)
</p>
<h1 class="font-bold text-xl">Advanced</h1>
The following are optional steps for even more functionality:
<!-- eslint-disable prettier/prettier -->
<h1 class="mt-4 font-bold text-xl">Next Steps</h1>
Although not totally necessary, these are important to understand.
<div class="ml-4">
<h1 class="font-bold text-xl">Install</h1>
<h1 class="font-bold text-xl">Backups</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.
Exporting backups (from the Account <fa icon="circle-user" /> screen)
is important for the case where they lose their device. This is
especially true for the Identifier Seed: that is theirs and and theirs
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>
</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>
<p>
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
to each other's contact lists.
</p>
@ -54,33 +66,37 @@
</p>
<div>
<p>
3) Have them follow their yellow prompts.
1) Have them follow their yellow prompts.
</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" />
</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" />
</p>
<p>
6) Add yourself to their Contacts <fa icon="users" />
4) Add yourself to their Contacts <fa icon="users" />
</p>
</div>
<h1 class="font-bold text-xl">Enable Notifications</h1>
<h1 class="font-bold text-xl">Install</h1>
<div>
<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>
</div>
<h1 class="font-bold text-xl">Discuss Backups</h1>
<h1 class="font-bold text-xl">Enable Notifications</h1>
<div>
<p>
8) Exporting backups <fa icon="circle-user" /> are important if they lose their phone
--- especially for the Identifier Seed!
Enable notifications from the Account page <fa icon="circle-user" />.
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>
</div>

2
src/views/HelpView.vue

@ -515,6 +515,8 @@
<fa v-show="!showDidCopy" icon="copy" class="text-slate-400 fa-fw" />
</button>
<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.
</p>

Loading…
Cancel
Save