From c39138550071fa10696ea9417abbf4c9f2bca5b7 Mon Sep 17 00:00:00 2001 From: Trent Larson Date: Sat, 18 Nov 2023 13:43:01 -0700 Subject: [PATCH] feat & doc: automatically set visibility & alert about registration, alert to help onboard (and refine docs & tasks) --- README.md | 161 ++++++---------------------- project.task.yaml | 5 + src/views/ContactQRScanShowView.vue | 23 +++- src/views/ContactsView.vue | 60 +++++++++-- src/views/HelpView.vue | 111 +++++++++++++------ src/views/HomeView.vue | 2 +- 6 files changed, 184 insertions(+), 178 deletions(-) diff --git a/README.md b/README.md index 57ac895f..64c34dd0 100644 --- a/README.md +++ b/README.md @@ -26,31 +26,13 @@ npm run build npm run lint ``` -## Tests -### Web-push -For your own web-push tests, change the 'vapid' URL in App.vue, and install apps on the same domain. -### Test key contents - -See [this page](openssl_signing_console.rst) +## Tests ### Register new user on test server -New users require registration. This can be done with a claim payload like this -by an existing user: - -``` - const vcClaim = { - "@context": "https://schema.org", - "@type": "RegisterAction", - agent: { identifier: identity0.did }, - object: SERVICE_ID, - participant: { identifier: newIdentity.did }, - }; -``` - On the test server, User #0 has rights to register others, so you can start playing one of two ways: @@ -66,14 +48,37 @@ playing one of two ways: ### Create multiple identifiers -Go to /start and create or import a new one. Then switch identifiers on the bottom of the Your Identity page. +Under the "Your Identity" screen, click "Advanced", click "Switch Identity / No Identity", then "Add Another Identity...". ### Create keys with alternate tools -See [this page](openssl_signing_console.rst) +[This page](openssl_signing_console.rst) is a tool to create a JWT from a locally-generated keypair. + +### Web-push + +For your own web-push tests, change the 'vapid' URL in App.vue, and install apps on the same domain. + +### Manual walk-through + +- Clear the browser cache for localhost to be a new user. + - On each page, verify the messaging. + - On the home page, see message prompting to generate an ID. +- As User #0 in another browser, add a give record. (See User #0 details above.) + - With the new user on the home page, see the feed that shows users without names. +- As the new user on the contacts page, add a contact. + - On the discovery page, check that they can see projects. + - Choose a search area and see items show nearby. +- Generate an ID. + - On the home page, check that it now prompts them to get registered. + - On the account page, check that they see messages on limits. +- Register the ID from User #0. + - As the new user on the home page, check that they can now record a gift. + Also that they see a hint on the user name in the feed (since user #0 is visible to them). + - On the contacts page, check that they cannot register someone else yet. +- As the new user, add User #0 to contacts. + - On the home page, see the name of user #0 info in the feed. +- Walk through the functions on each page. -### Customize Vue configuration -See [Configuration Reference](https://cli.vuejs.org/config/). ## Scenarios @@ -90,8 +95,8 @@ See [Configuration Reference](https://cli.vuejs.org/config/). ### Clear data & restart -Clear cache for localhost, then go to http://localhost:8080/start -(because it'll generate a new one automatically if you start on the `/account` page). +Clear the browser cache for localhost. + @@ -102,110 +107,10 @@ Clear cache for localhost, then go to http://localhost:8080/start * Notifications can be type of `toast` (self-dismiss), `info`, `success`, `warning`, and `danger`. They are done via [notiwind](https://www.npmjs.com/package/notiwind) and set up in App.vue. -``` -// reference material from https://github.com/trentlarson/endorser-mobile/blob/8dc8e0353e0cc80ffa7ed89ded15c8b0da92726b/src/utility/idUtility.ts#L83 - -// Import an existing ID -export const importAndStoreIdentifier = async (mnemonic: string, mnemonicPassword: string, toLowercase: boolean, previousIdentifiers: Array) => { - - // just to get rid of variability that might cause an error - mnemonic = mnemonic.trim().toLowerCase() - - /** - // an approach I pieced together - // requires: yarn add elliptic - // ... plus: - // const EC = require('elliptic').ec - // const secp256k1 = new EC('secp256k1') - // - const keyHex: string = bip39.mnemonicToEntropy(mnemonic) - // returns a KeyPair from the elliptic.ec library - const keyPair = secp256k1.keyFromPrivate(keyHex, 'hex') - // this code is from did-provider-eth createIdentifier - const privateHex = keyPair.getPrivate('hex') - const publicHex = keyPair.getPublic('hex') - const address = didJwt.toEthereumAddress(publicHex) - **/ - - /** - // from https://github.com/uport-project/veramo/discussions/346#discussioncomment-302234 - // ... which almost works but the didJwt.toEthereumAddress is wrong - // requires: yarn add bip32 - // ... plus: import * as bip32 from 'bip32' - // - const seed: Buffer = await bip39.mnemonicToSeed(mnemonic) - const root = bip32.fromSeed(seed) - const node = root.derivePath(UPORT_ROOT_DERIVATION_PATH) - const privateHex = node.privateKey.toString("hex") - const publicHex = node.publicKey.toString("hex") - const address = didJwt.toEthereumAddress('0x' + publicHex) - **/ - - /** - // from https://github.com/uport-project/veramo/discussions/346#discussioncomment-302234 - // requires: yarn add @ethersproject/hdnode - // ... plus: import { HDNode } from '@ethersproject/hdnode' - **/ - const hdnode: HDNode = HDNode.fromMnemonic(mnemonic) - const rootNode: HDNode = hdnode.derivePath(UPORT_ROOT_DERIVATION_PATH) - const privateHex = rootNode.privateKey.substring(2) // original starts with '0x' - const publicHex = rootNode.publicKey.substring(2) // original starts with '0x' - let address = rootNode.address - - const prevIds = previousIdentifiers || []; - - if (toLowercase) { - const foundEqual = R.find( - (id) => utility.rawAddressOfDid(id.did) === address, - prevIds - ) - if (foundEqual) { - // They're trying to create a lowercase version of one that exists in normal case. - // (We really should notify the user.) - appStore.dispatch(appSlice.actions.addLog({log: true, msg: "Will create a normal-case version of the DID since a regular version exists."})) - } else { - address = address.toLowerCase() - } - } else { - // They're not trying to convert to lowercase. - const foundLower = R.find((id) => - utility.rawAddressOfDid(id.did) === address.toLowerCase(), - prevIds - ) - if (foundLower) { - // They're trying to create a normal case version of one that exists in lowercase. - // (We really should notify the user.) - appStore.dispatch(appSlice.actions.addLog({log: true, msg: "Will create a lowercase version of the DID since a lowercase version exists."})) - address = address.toLowerCase() - } - } - - appStore.dispatch(appSlice.actions.addLog({log: false, msg: "... derived keys and address..."})) - - const newId = newIdentifier(address, publicHex, privateHex, UPORT_ROOT_DERIVATION_PATH) - appStore.dispatch(appSlice.actions.addLog({log: false, msg: "... created new ID..."})) - - // awaiting because otherwise the UI may not see that a mnemonic was created - const savedId = await storeIdentifier(newId, mnemonic, mnemonicPassword) - appStore.dispatch(appSlice.actions.addLog({log: false, msg: "... stored new ID..."})) - return savedId -} - -// Create a totally new ID -export const createAndStoreIdentifier = async (mnemonicPassword) => { - - // This doesn't give us the entropy/seed. - //const id = await agent.didManagerCreate() - - const entropy = crypto.randomBytes(32) - const mnemonic = bip39.entropyToMnemonic(entropy) - appStore.dispatch(appSlice.actions.addLog({log: false, msg: "... generated mnemonic..."})) - - return importAndStoreIdentifier(mnemonic, mnemonicPassword, false, []) -} -``` +* [Customize Vue configuration](https://cli.vuejs.org/config/). + -## Kudos +### Kudos Gifts make the world go 'round! diff --git a/project.task.yaml b/project.task.yaml index 271c5e94..8f30da63 100644 --- a/project.task.yaml +++ b/project.task.yaml @@ -5,7 +5,12 @@ tasks: - 40 notifications : - push, where we trigger a ServiceWorker(?) in the app to reach out and check for new data assignee:matthew +- .5 if there is no area search selected, make "anywhere" search the default +- .5 allow to manage their notifications even without an identity +- .1 put a "back" button at the top of the start page +- .5 bug - on the discover page, enter a search term and search and see a duplicate project show at the end of the list - 01 Ensure each action sent to the server has a confirmation - eg registration (ie a toast something that dismisses after 5-10s) +- 01 Make a new contact able to see me by default. - Home Feed & Quick Give screen : - 01 save the feed-viewed status in settings storage ("afterQuery") diff --git a/src/views/ContactQRScanShowView.vue b/src/views/ContactQRScanShowView.vue index 21a924e5..f7a2999b 100644 --- a/src/views/ContactQRScanShowView.vue +++ b/src/views/ContactQRScanShowView.vue @@ -2,10 +2,23 @@
- -

- Your Contact Info -

+ +
+ +
+

+ +

+
+ + +

+ Your Contact Info +

+
- -

- Help -

+ +
+ +
+

+ +

+
+ + +

+ Help +

+

@@ -15,7 +28,7 @@

What is the philosophy here?

- We are building networks of people who want to grow a gifting society. + We are building networks of people who want to grow a giving society. First of all, you can record ways you've seen people give, and that leaves a permanent record -- one that came from you, and the recipient can prove it was for them. This is personally gratifying, but it extends @@ -36,22 +49,39 @@ the control; this app gives you the control.

-

How do I take my first action?

+

How do I get started?

You need someone to register you -- usually the person who told you about this app, on the Contacts - page. After they register you, - you can select any contact on the home page (or "anonymous") and record - your appreciation for... whatever. The main goal is to record what - people have given you, to grow gifting economies. Each claim is recorded - on a custom ledger. The day after being registered, you'll be able to - able to register others; later, you can create projects, too. + page. After they register you, you can + select any contact on the home page (or "anonymous") and record your + appreciation for... whatever. The main goal is to record what people + have given you, to grow giving economies. Each claim is recorded on a + custom ledger. The day after being registered, you'll be able to able to + register others; later, you can create projects, too.

Note that there are limits to how many others each person can register, so you may have to wait.

+

How do I add someone else?

+

+ + To start scanning, go + here. +

+

+ If they are not nearby to scan QR codes, tell them to copy their ID from + their Identity page, which + typically starts with "did:ethr:...", and send it to you. Go to the + Contacts page and enter that into the + top form. To add a name, put a comma and then their name; to add their + public key, put another comma followed by the key. +

+

How do I backup all my data?

There are two sets of data to backup: the identifier secrets and the @@ -113,27 +143,20 @@ How do I restore my other (non-identifier-secret) data?

    -
  • Make sure you have your backup file (above), then contact us.
    • +
  • + Make sure you have your backup file (above), then contact us with + your interest. This is functionality that has to be written, and + your interest will help us prioritize it, but there are also manual + ways to restore your data. +
-

- How do I add someone to my contacts? -

-

- Tell them to copy their ID, which typically starts with "did:ethr:...", - and send it to you. Go to the Contacts - page and enter that into the top - form. You may add a name by adding a comma followed by their name; you - may also add their public key by adding another comma followed by the - key. -

-

How do I create another identity?

Before doing this, note that it is an advanced feature that affects functionality (eg. the words "Alt ID" next to results, backup features) - so beware if you think that may cause confusion. You can + so beware. You can create another identity here. @@ -151,10 +174,10 @@ .

- Sometimes the reason you don't see something is because the search time - is limited. Go to the bottom and make sure to load all the data on a - list. If you still don't see it, try a search or view on a different - page. + Sometimes the reason you don't see something is because the search + results are limited. Go to the bottom and make sure to load all the data + on a list. If you still don't see it, try a search or view on a + different page.

What is your privacy policy?

@@ -171,11 +194,11 @@

- For any other questions, including remove your data: + For any other questions, including removing your data:

- Contact us through - CommunityCred.org. + Contact us at + info@TimeSafari.app

@@ -186,8 +209,30 @@ import * as Package from "../../package.json"; import { Component, Vue } from "vue-facing-decorator"; import QuickNav from "@/components/QuickNav.vue"; +interface Notification { + group: string; + type: string; + title: string; + text: string; +} + @Component({ components: { QuickNav } }) export default class Help extends Vue { + $notify!: (notification: Notification, timeout?: number) => void; + package = Package; + + showOnboardInfo() { + this.$notify( + { + group: "alert", + type: "info", + title: "Onboard Someone", + // If you edit this, check that the numbers still line up on the side in the alert (on mobile, preferably). + text: "1) Check that they've entered their name. 2) Go to the scanning page via the Identity page and then the through the QR icon at the top, and then scan and register them. 3) Have them go to that page and scan you.", + }, + -1, + ); + } } diff --git a/src/views/HomeView.vue b/src/views/HomeView.vue index 5aaeac62..4abb6ab7 100644 --- a/src/views/HomeView.vue +++ b/src/views/HomeView.vue @@ -29,7 +29,7 @@
-

Record a Gift

+

Record Something Given