forked from trent_larson/crowd-funder-for-time-pwa
Compare commits
1 Commits
tweaks
...
try-cypres
| Author | SHA1 | Date | |
|---|---|---|---|
| d48b2210d5 |
1
.tool-versions
Normal file
1
.tool-versions
Normal file
@@ -0,0 +1 @@
|
||||
nodejs 16.18.0
|
||||
34
README.md
34
README.md
@@ -22,8 +22,7 @@ npm run lint
|
||||
|
||||
### 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 cache for localhost, then go to http://localhost:8080/start (because it'll regenerate if you start on the `/account` page).
|
||||
|
||||
### Test key contents
|
||||
|
||||
@@ -31,36 +30,29 @@ See [this page](openssl_signing_console.rst)
|
||||
|
||||
### Register new user on test server
|
||||
|
||||
New users require registration. This can be done with a claim payload like this
|
||||
by an existing user:
|
||||
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 },
|
||||
agent: { did: identity0.did },
|
||||
object: SERVICE_ID,
|
||||
participant: { identifier: newIdentity.did },
|
||||
participant: { did: newIdentity.did },
|
||||
};
|
||||
```
|
||||
|
||||
On the test server, User #0 has rights to register others, so you can start
|
||||
playing one of two ways:
|
||||
On the test server, User #0 has rights to register others, so you can start playing one of two ways:
|
||||
|
||||
- Import the keys for the test User `did:ethr:0x000Ee5654b9742f6Fe18ea970e32b97ee2247B51` by importing this seed phrase:
|
||||
`seminar accuse mystery assist delay law thing deal image undo guard initial shallow wrestle list fragile borrow velvet tomorrow awake explain test offer control`
|
||||
(Other test users are found [here](https://github.com/trentlarson/endorser-ch/blob/master/test/util.js).)
|
||||
- Import the keys for that test User `did:ethr:0x000Ee5654b9742f6Fe18ea970e32b97ee2247B51` by importing this seed phrase: `seminar accuse mystery assist delay law thing deal image undo guard initial shallow wrestle list fragile borrow velvet tomorrow awake explain test offer control`
|
||||
|
||||
- Alternatively, register someone else under User #0 automatically:
|
||||
- Register someone else under User #0 on the `/account` page:
|
||||
|
||||
* In the `src/views/AccountViewView.vue` file, uncomment the lines referring to "testServerRegisterUser".
|
||||
* Edit the `src/views/AccountViewView.vue` file and uncomment the lines referring to "test".
|
||||
|
||||
* Visit the `/account` page.
|
||||
* Use the [Vue Devtools browser extension](https://devtools.vuejs.org/) and type this into the console: `$vm.ctx.testRegisterUser()`
|
||||
|
||||
### Create multiple identifiers
|
||||
|
||||
Go to /import-account and import a new one. Then switch identifiers on the
|
||||
bottom of the Your Identity page.
|
||||
|
||||
### Create keys with alternate tools
|
||||
|
||||
@@ -70,14 +62,6 @@ See [this page](openssl_signing_console.rst)
|
||||
See [Configuration Reference](https://cli.vuejs.org/config/).
|
||||
|
||||
|
||||
## Dependencies
|
||||
|
||||
See https://tea.xyz
|
||||
|
||||
| Project | Version |
|
||||
| ---------- | --------- |
|
||||
| nodejs.org | ^16.0.0 |
|
||||
| npmjs.com | ^8.0.0 |
|
||||
|
||||
## Other
|
||||
|
||||
|
||||
9
cypress.config.ts
Normal file
9
cypress.config.ts
Normal file
@@ -0,0 +1,9 @@
|
||||
import { defineConfig } from "cypress";
|
||||
|
||||
export default defineConfig({
|
||||
e2e: {
|
||||
setupNodeEvents(on, config) {
|
||||
// implement node event listeners here
|
||||
},
|
||||
},
|
||||
});
|
||||
20
cypress/e2e/spec.cy.ts
Normal file
20
cypress/e2e/spec.cy.ts
Normal file
@@ -0,0 +1,20 @@
|
||||
describe('My First Test', () => {
|
||||
it('finds the content "type"', () => {
|
||||
cy.visit('http://localhost:8080')
|
||||
|
||||
cy.contains('Yes').click()
|
||||
|
||||
cy.get('#mnemonic').type('seminar accuse mystery assist delay law thing deal image undo guard initial shallow wrestle list fragile borrow velvet tomorrow awake explain test offer control')
|
||||
cy.get('#import').click()
|
||||
|
||||
cy.get('Share Your ID')
|
||||
|
||||
/**
|
||||
cy.visit('http://localhost:8080/new-edit-project')
|
||||
cy.get('#name').type('Clicker Shooter')
|
||||
cy.get('#description').type('Joel\'s new test project via Cypress')
|
||||
cy.contains('Save Project').click()
|
||||
**/
|
||||
|
||||
})
|
||||
})
|
||||
5
cypress/fixtures/example.json
Normal file
5
cypress/fixtures/example.json
Normal file
@@ -0,0 +1,5 @@
|
||||
{
|
||||
"name": "Using fixtures to represent data",
|
||||
"email": "hello@cypress.io",
|
||||
"body": "Fixtures are a great way to mock data for responses to routes"
|
||||
}
|
||||
37
cypress/support/commands.ts
Normal file
37
cypress/support/commands.ts
Normal file
@@ -0,0 +1,37 @@
|
||||
/// <reference types="cypress" />
|
||||
// ***********************************************
|
||||
// This example commands.ts shows you how to
|
||||
// create various custom commands and overwrite
|
||||
// existing commands.
|
||||
//
|
||||
// For more comprehensive examples of custom
|
||||
// commands please read more here:
|
||||
// https://on.cypress.io/custom-commands
|
||||
// ***********************************************
|
||||
//
|
||||
//
|
||||
// -- This is a parent command --
|
||||
// Cypress.Commands.add('login', (email, password) => { ... })
|
||||
//
|
||||
//
|
||||
// -- This is a child command --
|
||||
// Cypress.Commands.add('drag', { prevSubject: 'element'}, (subject, options) => { ... })
|
||||
//
|
||||
//
|
||||
// -- This is a dual command --
|
||||
// Cypress.Commands.add('dismiss', { prevSubject: 'optional'}, (subject, options) => { ... })
|
||||
//
|
||||
//
|
||||
// -- This will overwrite an existing command --
|
||||
// Cypress.Commands.overwrite('visit', (originalFn, url, options) => { ... })
|
||||
//
|
||||
// declare global {
|
||||
// namespace Cypress {
|
||||
// interface Chainable {
|
||||
// login(email: string, password: string): Chainable<void>
|
||||
// drag(subject: string, options?: Partial<TypeOptions>): Chainable<Element>
|
||||
// dismiss(subject: string, options?: Partial<TypeOptions>): Chainable<Element>
|
||||
// visit(originalFn: CommandOriginalFn, url: string, options: Partial<VisitOptions>): Chainable<Element>
|
||||
// }
|
||||
// }
|
||||
// }
|
||||
20
cypress/support/e2e.ts
Normal file
20
cypress/support/e2e.ts
Normal file
@@ -0,0 +1,20 @@
|
||||
// ***********************************************************
|
||||
// This example support/e2e.ts is processed and
|
||||
// loaded automatically before your test files.
|
||||
//
|
||||
// This is a great place to put global configuration and
|
||||
// behavior that modifies Cypress.
|
||||
//
|
||||
// You can change the location of this file or turn off
|
||||
// automatically serving support files with the
|
||||
// 'supportFile' configuration option.
|
||||
//
|
||||
// You can read more here:
|
||||
// https://on.cypress.io/configuration
|
||||
// ***********************************************************
|
||||
|
||||
// Import commands.js using ES2015 syntax:
|
||||
import './commands'
|
||||
|
||||
// Alternatively you can use CommonJS syntax:
|
||||
// require('./commands')
|
||||
5261
package-lock.json
generated
5261
package-lock.json
generated
File diff suppressed because it is too large
Load Diff
74
package.json
74
package.json
@@ -9,53 +9,50 @@
|
||||
},
|
||||
"dependencies": {
|
||||
"@ethersproject/hdnode": "^5.7.0",
|
||||
"@fortawesome/fontawesome-svg-core": "^6.4.0",
|
||||
"@fortawesome/free-solid-svg-icons": "^6.4.0",
|
||||
"@fortawesome/vue-fontawesome": "^3.0.3",
|
||||
"@pvermeer/dexie-encrypted-addon": "^2.0.5",
|
||||
"@veramo/core": "^5.1.2",
|
||||
"@veramo/credential-w3c": "^5.1.4",
|
||||
"@veramo/data-store": "^5.1.2",
|
||||
"@veramo/did-manager": "^5.1.2",
|
||||
"@veramo/did-provider-ethr": "^5.1.2",
|
||||
"@veramo/did-resolver": "^5.1.2",
|
||||
"@veramo/key-manager": "^5.1.2",
|
||||
"@vueuse/core": "^9.13.0",
|
||||
"@fortawesome/fontawesome-svg-core": "^6.2.1",
|
||||
"@fortawesome/free-solid-svg-icons": "^6.2.1",
|
||||
"@fortawesome/vue-fontawesome": "^3.0.2",
|
||||
"@pvermeer/dexie-encrypted-addon": "^2.0.2",
|
||||
"@veramo/core": "^4.1.1",
|
||||
"@veramo/credential-w3c": "^4.1.1",
|
||||
"@veramo/data-store": "^4.1.1",
|
||||
"@veramo/did-manager": "^4.1.1",
|
||||
"@veramo/did-provider-ethr": "^4.1.2",
|
||||
"@veramo/did-resolver": "^4.1.1",
|
||||
"@veramo/key-manager": "^4.1.1",
|
||||
"@vueuse/core": "^9.6.0",
|
||||
"@zxing/text-encoding": "^0.9.0",
|
||||
"axios": "^1.3.4",
|
||||
"buffer": "^6.0.3",
|
||||
"axios": "^1.2.2",
|
||||
"class-transformer": "^0.5.1",
|
||||
"core-js": "^3.29.1",
|
||||
"dexie": "^3.2.3",
|
||||
"dexie-export-import": "^4.0.7",
|
||||
"did-jwt": "^6.11.5",
|
||||
"ethereum-cryptography": "^1.2.0",
|
||||
"core-js": "^3.26.1",
|
||||
"dexie": "^3.2.2",
|
||||
"did-jwt": "^6.9.0",
|
||||
"ethereum-cryptography": "^1.1.2",
|
||||
"ethereumjs-util": "^7.1.5",
|
||||
"ethr-did-resolver": "^8.0.0",
|
||||
"js-generate-password": "^0.1.7",
|
||||
"localstorage-slim": "^2.4.0",
|
||||
"luxon": "^3.3.0",
|
||||
"localstorage-slim": "^2.3.0",
|
||||
"luxon": "^3.1.1",
|
||||
"merkletreejs": "^0.3.9",
|
||||
"moment": "^2.29.4",
|
||||
"papaparse": "^5.4.1",
|
||||
"papaparse": "^5.3.2",
|
||||
"pina": "^0.20.2204228",
|
||||
"pinia-plugin-persistedstate": "^3.1.0",
|
||||
"pinia-plugin-persistedstate": "^3.0.1",
|
||||
"ramda": "^0.28.0",
|
||||
"readable-stream": "^4.3.0",
|
||||
"readable-stream": "^4.2.0",
|
||||
"reflect-metadata": "^0.1.13",
|
||||
"register-service-worker": "^1.7.2",
|
||||
"vue": "^3.2.47",
|
||||
"vue": "^3.2.45",
|
||||
"vue-axios": "^3.5.2",
|
||||
"vue-class-component": "^8.0.0-0",
|
||||
"vue-facing-decorator": "^2.1.19",
|
||||
"vue-property-decorator": "^9.1.2",
|
||||
"vue-router": "^4.1.6",
|
||||
"web-did-resolver": "^2.0.22"
|
||||
"web-did-resolver": "^2.0.21"
|
||||
},
|
||||
"devDependencies": {
|
||||
"@types/ramda": "^0.28.23",
|
||||
"@typescript-eslint/eslint-plugin": "^5.57.0",
|
||||
"@typescript-eslint/parser": "^5.57.0",
|
||||
"@types/ramda": "^0.28.20",
|
||||
"@typescript-eslint/eslint-plugin": "^5.44.0",
|
||||
"@typescript-eslint/parser": "^5.44.0",
|
||||
"@vue/cli-plugin-babel": "~5.0.8",
|
||||
"@vue/cli-plugin-eslint": "~5.0.8",
|
||||
"@vue/cli-plugin-pwa": "~5.0.8",
|
||||
@@ -64,14 +61,15 @@
|
||||
"@vue/cli-plugin-vuex": "~5.0.8",
|
||||
"@vue/cli-service": "~5.0.8",
|
||||
"@vue/eslint-config-typescript": "^11.0.2",
|
||||
"autoprefixer": "^10.4.14",
|
||||
"eslint": "^8.37.0",
|
||||
"eslint-config-prettier": "^8.8.0",
|
||||
"autoprefixer": "^10.4.13",
|
||||
"cypress": "^12.5.1",
|
||||
"eslint": "^8.28.0",
|
||||
"eslint-config-prettier": "^8.5.0",
|
||||
"eslint-plugin-prettier": "^4.2.1",
|
||||
"eslint-plugin-vue": "^9.10.0",
|
||||
"postcss": "^8.4.21",
|
||||
"prettier": "^2.8.7",
|
||||
"tailwindcss": "^3.3.1",
|
||||
"typescript": "~5.0.3"
|
||||
"eslint-plugin-vue": "^9.8.0",
|
||||
"postcss": "^8.4.19",
|
||||
"prettier": "^2.8.0",
|
||||
"tailwindcss": "^3.2.4",
|
||||
"typescript": "~4.9.3"
|
||||
}
|
||||
}
|
||||
|
||||
31
project.yaml
31
project.yaml
@@ -1,31 +1,20 @@
|
||||
- top screens from img/screens.pdf milestone:2 :
|
||||
- new
|
||||
- feedback to show saving assignee:matthew status:pending
|
||||
- edit
|
||||
- feedback to show saved assignee:matthew status:pending
|
||||
- view all :
|
||||
- search bar isn't highlighted & icon on right doesn't show assignee:matthew
|
||||
- no tab bar across bottom assignee:matthew status:committed
|
||||
- add spinner assignee:matthew status:pending
|
||||
- add infinite scroll assignee:matthew
|
||||
- view one
|
||||
- image (removed for MVP since we don't have a mechanism for images yet) status:done
|
||||
blocks: ref:https://raw.githubusercontent.com/trentlarson/lives-of-gifts/master/project.yaml#kickstarter%20for%20time
|
||||
|
||||
- replace user-affecting console.logs with error messages (eg. catches)
|
||||
|
||||
- contacts v1 :
|
||||
- .2 warn about amounts when you cannot see them
|
||||
- .1 add confirmation message when 'copy' succeeds
|
||||
- .5 switch to prod server
|
||||
- .5 Add page to show seed.
|
||||
- 01 Provide a way to import the non-sensitive data.
|
||||
- 01 Provide way to share your contact info.
|
||||
- .2 move all "identity" references to temporary account access
|
||||
- .5 make deploy for give-only features
|
||||
|
||||
- contacts v+ :
|
||||
- .5 make advanced "show/hide amounts" button into a nice UI toggle
|
||||
- .2 show error to user when adding a duplicate contact
|
||||
- parse input more robustly (with CSV lib and not commas)
|
||||
|
||||
- refactor UI :
|
||||
- .5 Alerts show at the top and can be missed, eg. account data download
|
||||
- 01 Change alerts into a component (to cut down duplicate code)
|
||||
- 01 Code for "nav" tabs across the bottom is duplicated on each page.
|
||||
- .2 Add "copied" feedback when they click "copy" on /account
|
||||
- .5 Fix how icons show on top of bottom bar on ContactAmounts page
|
||||
- contacts
|
||||
|
||||
- commit screen
|
||||
|
||||
|
||||
@@ -9,10 +9,3 @@
|
||||
font-family: 'Work Sans', ui-sans-serif, system-ui, sans-serif !important;
|
||||
}
|
||||
}
|
||||
|
||||
@layer components {
|
||||
input:checked ~ .dot {
|
||||
transform: translateX(100%);
|
||||
background-color: #FFF !important;
|
||||
}
|
||||
}
|
||||
@@ -2,7 +2,7 @@
|
||||
* Generic strings that could be used throughout the app.
|
||||
*/
|
||||
export enum AppString {
|
||||
APP_NAME = "KickStart with Time",
|
||||
APP_NAME = "Kickstart for time",
|
||||
VERSION = "0.1",
|
||||
DEFAULT_ENDORSER_API_SERVER = "https://test.endorser.ch:8000",
|
||||
//DEFAULT_ENDORSER_API_SERVER = "http://localhost:3000",
|
||||
|
||||
@@ -1,22 +1,6 @@
|
||||
import BaseDexie, { Table } from "dexie";
|
||||
import BaseDexie from "dexie";
|
||||
import { encrypted, Encryption } from "@pvermeer/dexie-encrypted-addon";
|
||||
import { Account, AccountsSchema } from "./tables/accounts";
|
||||
import { Contact, ContactsSchema } from "./tables/contacts";
|
||||
import {
|
||||
MASTER_SETTINGS_KEY,
|
||||
Settings,
|
||||
SettingsSchema,
|
||||
} from "./tables/settings";
|
||||
|
||||
// a separate DB because the seed is super-sensitive data
|
||||
type SensitiveTables = {
|
||||
accounts: Table<Account>;
|
||||
};
|
||||
|
||||
type NonsensitiveTables = {
|
||||
contacts: Table<Contact>;
|
||||
settings: Table<Settings>;
|
||||
};
|
||||
import { accountsSchema, AccountsTable } from "./tables/accounts";
|
||||
|
||||
/**
|
||||
* In order to make the next line be acceptable, the program needs to have its linter suppress a rule:
|
||||
@@ -26,14 +10,10 @@ type NonsensitiveTables = {
|
||||
*
|
||||
* https://9to5answer.com/how-to-bypass-warning-unexpected-any-specify-a-different-type-typescript-eslint-no-explicit-any
|
||||
*/
|
||||
export type SensitiveDexie<T extends unknown = SensitiveTables> = BaseDexie & T;
|
||||
export const accountsDB = new BaseDexie("KickStartAccounts") as SensitiveDexie;
|
||||
const SensitiveSchemas = Object.assign({}, AccountsSchema);
|
||||
|
||||
export type NonsensitiveDexie<T extends unknown = NonsensitiveTables> =
|
||||
BaseDexie & T;
|
||||
export const db = new BaseDexie("KickStart") as NonsensitiveDexie;
|
||||
const NonsensitiveSchemas = Object.assign({}, ContactsSchema, SettingsSchema);
|
||||
type DexieTables = AccountsTable;
|
||||
export type Dexie<T extends unknown = DexieTables> = BaseDexie & T;
|
||||
export const db = new BaseDexie("kickStarter") as Dexie;
|
||||
const schema = Object.assign({}, accountsSchema);
|
||||
|
||||
/**
|
||||
* Needed to enable a special webpack setting to allow *await* below:
|
||||
@@ -47,15 +27,6 @@ const secret =
|
||||
if (localStorage.getItem("secret") == null) {
|
||||
localStorage.setItem("secret", secret);
|
||||
}
|
||||
|
||||
//console.log("IndexedDB Encryption Secret:", secret);
|
||||
encrypted(accountsDB, { secretKey: secret });
|
||||
accountsDB.version(1).stores(SensitiveSchemas);
|
||||
|
||||
db.version(1).stores(NonsensitiveSchemas);
|
||||
|
||||
// initialize, a la https://dexie.org/docs/Tutorial/Design#the-populate-event
|
||||
db.on("populate", function () {
|
||||
// ensure there's an initial entry for settings
|
||||
db.settings.add({ id: MASTER_SETTINGS_KEY });
|
||||
});
|
||||
console.log(secret);
|
||||
encrypted(db, { secretKey: secret });
|
||||
db.version(1).stores(schema);
|
||||
|
||||
@@ -1,16 +1,18 @@
|
||||
import { Table } from "dexie";
|
||||
|
||||
export type Account = {
|
||||
id?: number; // auto-generated by Dexie
|
||||
dateCreated: string;
|
||||
derivationPath: string;
|
||||
did: string;
|
||||
identity: string;
|
||||
publicKeyHex: string;
|
||||
id?: number;
|
||||
publicKey: string;
|
||||
mnemonic: string;
|
||||
identity: string;
|
||||
dateCreated: number;
|
||||
};
|
||||
|
||||
export type AccountsTable = {
|
||||
accounts: Table<Account>;
|
||||
};
|
||||
|
||||
// mark encrypted field by starting with a $ character
|
||||
// see https://github.com/PVermeer/dexie-addon-suite-monorepo/tree/master/packages/dexie-encrypted-addon
|
||||
export const AccountsSchema = {
|
||||
accounts:
|
||||
"++id, dateCreated, derivationPath, did, $identity, $mnemonic, publicKeyHex",
|
||||
export const accountsSchema = {
|
||||
accounts: "++id, publicKey, $mnemonic, $identity, dateCreated",
|
||||
};
|
||||
|
||||
@@ -1,11 +0,0 @@
|
||||
export interface Contact {
|
||||
did: string;
|
||||
name?: string;
|
||||
publicKeyBase64?: string;
|
||||
seesMe?: boolean;
|
||||
registered?: boolean;
|
||||
}
|
||||
|
||||
export const ContactsSchema = {
|
||||
contacts: "++did, name, publicKeyBase64, registered, seesMe",
|
||||
};
|
||||
@@ -1,14 +0,0 @@
|
||||
// a singleton
|
||||
export type Settings = {
|
||||
id: number; // there's only one entry: MASTER_SETTINGS_KEY
|
||||
activeDid?: string;
|
||||
firstName?: string;
|
||||
lastName?: string;
|
||||
showContactGivesInline?: boolean;
|
||||
};
|
||||
|
||||
export const SettingsSchema = {
|
||||
settings: "id",
|
||||
};
|
||||
|
||||
export const MASTER_SETTINGS_KEY = 1;
|
||||
@@ -65,7 +65,7 @@ export const deriveAddress = (
|
||||
*
|
||||
* @return {*} {string}
|
||||
*/
|
||||
export const generateSeed = (): string => {
|
||||
export const createIdentifier = (): string => {
|
||||
const entropy: Uint8Array = getRandomBytesSync(32);
|
||||
const mnemonic = entropyToMnemonic(entropy, wordlist);
|
||||
|
||||
@@ -87,9 +87,9 @@ export const accessToken = async (identifier: IIdentifier) => {
|
||||
const nowEpoch = Math.floor(Date.now() / 1000);
|
||||
const endEpoch = nowEpoch + 60; // add one minute
|
||||
|
||||
const tokenPayload = { exp: endEpoch, iat: nowEpoch, iss: did };
|
||||
const uportTokenPayload = { exp: endEpoch, iat: nowEpoch, iss: did };
|
||||
const alg = undefined; // defaults to 'ES256K', more standardized but harder to verify vs ES256K-R
|
||||
const jwt: string = await didJwt.createJWT(tokenPayload, {
|
||||
const jwt: string = await didJwt.createJWT(uportTokenPayload, {
|
||||
alg,
|
||||
issuer: did,
|
||||
signer,
|
||||
|
||||
@@ -1,40 +0,0 @@
|
||||
export const SCHEMA_ORG_CONTEXT = "https://schema.org";
|
||||
export const SERVICE_ID = "endorser.ch";
|
||||
|
||||
export interface AgreeVerifiableCredential {
|
||||
"@context": string;
|
||||
"@type": string;
|
||||
// "any" because arbitrary objects can be subject of agreement
|
||||
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
||||
object: Record<any, any>;
|
||||
}
|
||||
|
||||
export interface GiveServerRecord {
|
||||
agentDid: string;
|
||||
amount: number;
|
||||
amountConfirmed: number;
|
||||
description: string;
|
||||
fullClaim: GiveVerifiableCredential;
|
||||
handleId: string;
|
||||
issuedAt: string;
|
||||
recipientDid: string;
|
||||
unit: string;
|
||||
}
|
||||
|
||||
export interface GiveVerifiableCredential {
|
||||
"@context"?: string; // optional when embedded, eg. in an Agree
|
||||
"@type": string;
|
||||
agent: { identifier: string };
|
||||
description?: string;
|
||||
identifier?: string;
|
||||
object: { amountOfThisGood: number; unitCode: string };
|
||||
recipient: { identifier: string };
|
||||
}
|
||||
|
||||
export interface RegisterVerifiableCredential {
|
||||
"@context": string;
|
||||
"@type": string;
|
||||
agent: { identifier: string };
|
||||
object: string;
|
||||
recipient: { identifier: string };
|
||||
}
|
||||
72
src/main.ts
72
src/main.ts
@@ -10,67 +10,43 @@ import "./assets/styles/tailwind.css";
|
||||
|
||||
import { library } from "@fortawesome/fontawesome-svg-core";
|
||||
import {
|
||||
faCalendar,
|
||||
faChevronLeft,
|
||||
faCircle,
|
||||
faCircleCheck,
|
||||
faCircleQuestion,
|
||||
faCircleUser,
|
||||
faCopy,
|
||||
faEllipsisVertical,
|
||||
faEye,
|
||||
faEyeSlash,
|
||||
faFileLines,
|
||||
faHouseChimney,
|
||||
faMagnifyingGlass,
|
||||
faFolderOpen,
|
||||
faHand,
|
||||
faHouseChimney,
|
||||
faLongArrowAltLeft,
|
||||
faLongArrowAltRight,
|
||||
faMagnifyingGlass,
|
||||
faPen,
|
||||
faPersonCircleCheck,
|
||||
faPersonCircleQuestion,
|
||||
faPlus,
|
||||
faQrcode,
|
||||
faRotate,
|
||||
faCircleUser,
|
||||
faCopy,
|
||||
faShareNodes,
|
||||
faSpinner,
|
||||
faTrashCan,
|
||||
faQrcode,
|
||||
faUser,
|
||||
faUsers,
|
||||
faXmark,
|
||||
faPen,
|
||||
faPlus,
|
||||
faTrashCan,
|
||||
faCalendar,
|
||||
faEllipsisVertical,
|
||||
faSpinner,
|
||||
faCircleCheck,
|
||||
} from "@fortawesome/free-solid-svg-icons";
|
||||
|
||||
library.add(
|
||||
faCalendar,
|
||||
faChevronLeft,
|
||||
faCircle,
|
||||
faCircleCheck,
|
||||
faCircleQuestion,
|
||||
faCircleUser,
|
||||
faCopy,
|
||||
faEllipsisVertical,
|
||||
faEye,
|
||||
faEyeSlash,
|
||||
faFileLines,
|
||||
faHouseChimney,
|
||||
faMagnifyingGlass,
|
||||
faFolderOpen,
|
||||
faHand,
|
||||
faHouseChimney,
|
||||
faLongArrowAltLeft,
|
||||
faLongArrowAltRight,
|
||||
faMagnifyingGlass,
|
||||
faPen,
|
||||
faPersonCircleCheck,
|
||||
faPersonCircleQuestion,
|
||||
faPlus,
|
||||
faQrcode,
|
||||
faRotate,
|
||||
faCircleUser,
|
||||
faCopy,
|
||||
faShareNodes,
|
||||
faSpinner,
|
||||
faTrashCan,
|
||||
faQrcode,
|
||||
faUser,
|
||||
faUsers,
|
||||
faXmark
|
||||
faPen,
|
||||
faPlus,
|
||||
faTrashCan,
|
||||
faCalendar,
|
||||
faEllipsisVertical,
|
||||
faSpinner,
|
||||
faCircleCheck
|
||||
);
|
||||
|
||||
import { FontAwesomeIcon } from "@fortawesome/vue-fontawesome";
|
||||
|
||||
@@ -1,5 +1,5 @@
|
||||
import { createRouter, createWebHistory, RouteRecordRaw } from "vue-router";
|
||||
import { accountsDB } from "@/db";
|
||||
import { useAppStore } from "../store/app";
|
||||
|
||||
const routes: Array<RouteRecordRaw> = [
|
||||
{
|
||||
@@ -7,10 +7,10 @@ const routes: Array<RouteRecordRaw> = [
|
||||
name: "home",
|
||||
component: () =>
|
||||
import(/* webpackChunkName: "start" */ "../views/DiscoverView.vue"),
|
||||
beforeEnter: async (to, from, next) => {
|
||||
await accountsDB.open();
|
||||
const num_accounts = await accountsDB.accounts.count();
|
||||
if (num_accounts > 0) {
|
||||
beforeEnter: (to, from, next) => {
|
||||
const appStore = useAppStore();
|
||||
const isAuthenticated = appStore.condition === "registered";
|
||||
if (isAuthenticated) {
|
||||
next();
|
||||
} else {
|
||||
next({ name: "start" });
|
||||
@@ -23,6 +23,12 @@ const routes: Array<RouteRecordRaw> = [
|
||||
component: () =>
|
||||
import(/* webpackChunkName: "about" */ "../views/AboutView.vue"),
|
||||
},
|
||||
{
|
||||
path: "/start",
|
||||
name: "start",
|
||||
component: () =>
|
||||
import(/* webpackChunkName: "start" */ "../views/StartView.vue"),
|
||||
},
|
||||
{
|
||||
path: "/account",
|
||||
name: "account",
|
||||
@@ -37,20 +43,6 @@ const routes: Array<RouteRecordRaw> = [
|
||||
/* webpackChunkName: "confirm-contact" */ "../views/ConfirmContactView.vue"
|
||||
),
|
||||
},
|
||||
{
|
||||
path: "/contact-amounts",
|
||||
name: "contact-amounts",
|
||||
component: () =>
|
||||
import(
|
||||
/* webpackChunkName: "contact-amounts" */ "../views/ContactAmountsView.vue"
|
||||
),
|
||||
},
|
||||
{
|
||||
path: "/contacts",
|
||||
name: "contacts",
|
||||
component: () =>
|
||||
import(/* webpackChunkName: "contacts" */ "../views/ContactsView.vue"),
|
||||
},
|
||||
{
|
||||
path: "/scan-contact",
|
||||
name: "scan-contact",
|
||||
@@ -65,12 +57,6 @@ const routes: Array<RouteRecordRaw> = [
|
||||
component: () =>
|
||||
import(/* webpackChunkName: "discover" */ "../views/DiscoverView.vue"),
|
||||
},
|
||||
{
|
||||
path: "/help",
|
||||
name: "help",
|
||||
component: () =>
|
||||
import(/* webpackChunkName: "help" */ "../views/HelpView.vue"),
|
||||
},
|
||||
{
|
||||
path: "/import-account",
|
||||
name: "import-account",
|
||||
@@ -95,6 +81,12 @@ const routes: Array<RouteRecordRaw> = [
|
||||
/* webpackChunkName: "new-edit-commitment" */ "../views/NewEditCommitmentView.vue"
|
||||
),
|
||||
},
|
||||
{
|
||||
path: "/project",
|
||||
name: "project",
|
||||
component: () =>
|
||||
import(/* webpackChunkName: "project" */ "../views/ProjectViewView.vue"),
|
||||
},
|
||||
{
|
||||
path: "/new-edit-project",
|
||||
name: "new-edit-project",
|
||||
@@ -103,12 +95,6 @@ const routes: Array<RouteRecordRaw> = [
|
||||
/* webpackChunkName: "new-edit-project" */ "../views/NewEditProjectView.vue"
|
||||
),
|
||||
},
|
||||
{
|
||||
path: "/project",
|
||||
name: "project",
|
||||
component: () =>
|
||||
import(/* webpackChunkName: "project" */ "../views/ProjectViewView.vue"),
|
||||
},
|
||||
{
|
||||
path: "/projects",
|
||||
name: "projects",
|
||||
@@ -116,10 +102,12 @@ const routes: Array<RouteRecordRaw> = [
|
||||
import(/* webpackChunkName: "projects" */ "../views/ProjectsView.vue"),
|
||||
},
|
||||
{
|
||||
path: "/start",
|
||||
name: "start",
|
||||
path: "/commitments",
|
||||
name: "commitments",
|
||||
component: () =>
|
||||
import(/* webpackChunkName: "start" */ "../views/StartView.vue"),
|
||||
import(
|
||||
/* webpackChunkName: "commitments" */ "../views/CommitmentsView.vue"
|
||||
),
|
||||
},
|
||||
];
|
||||
|
||||
|
||||
22
src/store/account.ts
Normal file
22
src/store/account.ts
Normal file
@@ -0,0 +1,22 @@
|
||||
// @ts-check
|
||||
import { defineStore } from "pinia";
|
||||
|
||||
export const useAccountStore = defineStore({
|
||||
id: "account",
|
||||
state: () => ({
|
||||
account: JSON.parse(
|
||||
typeof localStorage["account"] == "undefined"
|
||||
? null
|
||||
: localStorage["account"]
|
||||
),
|
||||
}),
|
||||
getters: {
|
||||
firstName: (state) => state.account.firstName,
|
||||
lastName: (state) => state.account.lastName,
|
||||
},
|
||||
actions: {
|
||||
reset() {
|
||||
localStorage.removeItem("account");
|
||||
},
|
||||
},
|
||||
});
|
||||
@@ -4,15 +4,30 @@ import { defineStore } from "pinia";
|
||||
export const useAppStore = defineStore({
|
||||
id: "app",
|
||||
state: () => ({
|
||||
_condition:
|
||||
typeof localStorage["condition"] == "undefined"
|
||||
? "uninitialized"
|
||||
: localStorage["condition"],
|
||||
_lastView:
|
||||
typeof localStorage["lastView"] == "undefined"
|
||||
? "/start"
|
||||
: localStorage["lastView"],
|
||||
_projectId:
|
||||
typeof localStorage.getItem("projectId") === "undefined"
|
||||
? ""
|
||||
: localStorage.getItem("projectId"),
|
||||
}),
|
||||
getters: {
|
||||
condition: (state) => state._condition,
|
||||
projectId: (state): string => state._projectId as string,
|
||||
},
|
||||
actions: {
|
||||
reset() {
|
||||
localStorage.removeItem("condition");
|
||||
},
|
||||
setCondition(newCondition: string) {
|
||||
localStorage.setItem("condition", newCondition);
|
||||
},
|
||||
async setProjectId(newProjectId: string) {
|
||||
localStorage.setItem("projectId", newProjectId);
|
||||
},
|
||||
|
||||
@@ -4,7 +4,6 @@ import { AppString } from "@/constants/app";
|
||||
import { db } from "../db";
|
||||
import { SERVICE_ID } from "../libs/veramo/setup";
|
||||
import { deriveAddress, newIdentifier } from "../libs/crypto";
|
||||
import { MASTER_SETTINGS_KEY } from "@/db/tables/settings";
|
||||
|
||||
export async function testServerRegisterUser() {
|
||||
const testUser0Mnem =
|
||||
@@ -15,7 +14,8 @@ export async function testServerRegisterUser() {
|
||||
const identity0 = newIdentifier(addr, publicHex, privateHex, deriPath);
|
||||
|
||||
await db.open();
|
||||
const settings = await db.settings.get(MASTER_SETTINGS_KEY);
|
||||
const accounts = await db.accounts.toArray();
|
||||
const thisIdentity = JSON.parse(accounts[0].identity);
|
||||
|
||||
// Make a claim
|
||||
const vcClaim = {
|
||||
@@ -23,7 +23,7 @@ export async function testServerRegisterUser() {
|
||||
"@type": "RegisterAction",
|
||||
agent: { did: identity0.did },
|
||||
object: SERVICE_ID,
|
||||
participant: { did: settings?.activeDid },
|
||||
participant: { did: thisIdentity.did },
|
||||
};
|
||||
// Make a payload for the claim
|
||||
const vcPayload = {
|
||||
@@ -56,5 +56,5 @@ export async function testServerRegisterUser() {
|
||||
};
|
||||
|
||||
const resp = await axios.post(url, payload, { headers });
|
||||
console.log("User registration result:", resp);
|
||||
console.log("Result:", resp);
|
||||
}
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
<template>
|
||||
<!-- QUICK NAV -->
|
||||
<nav id="QuickNav" class="fixed bottom-0 left-0 right-0 bg-slate-200 z-50">
|
||||
<nav id="QuickNav" class="fixed bottom-0 left-0 right-0 bg-slate-200">
|
||||
<ul class="flex text-2xl p-2 gap-2">
|
||||
<!-- Home Feed -->
|
||||
<li class="basis-1/5 rounded-md text-slate-500">
|
||||
@@ -26,13 +26,13 @@
|
||||
<fa icon="folder-open" class="fa-fw"></fa>
|
||||
</router-link>
|
||||
</li>
|
||||
<!-- Contacts -->
|
||||
<!-- Commitments -->
|
||||
<li class="basis-1/5 rounded-md text-slate-500">
|
||||
<router-link
|
||||
:to="{ name: 'contacts' }"
|
||||
:to="{ name: 'commitments' }"
|
||||
class="block text-center py-3 px-1"
|
||||
>
|
||||
<fa icon="users" class="fa-fw"></fa>
|
||||
<fa icon="hand" class="fa-fw"></fa>
|
||||
</router-link>
|
||||
</li>
|
||||
<!-- Profile -->
|
||||
@@ -54,18 +54,6 @@
|
||||
Your Identity
|
||||
</h1>
|
||||
|
||||
<div class="flex justify-between py-2">
|
||||
<span />
|
||||
<span>
|
||||
<router-link
|
||||
:to="{ name: 'help' }"
|
||||
class="text-xs uppercase bg-blue-500 text-white px-1.5 py-1 rounded-md ml-1"
|
||||
>
|
||||
Help
|
||||
</router-link>
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<!-- Friend referral requirement notice -->
|
||||
<div
|
||||
class="bg-amber-200 text-amber-900 border-amber-500 border-dashed border text-center rounded-md overflow-hidden px-4 py-3 mb-4"
|
||||
@@ -87,12 +75,16 @@
|
||||
<h2 class="text-xl font-semibold mb-2">{{ firstName }} {{ lastName }}</h2>
|
||||
|
||||
<div class="text-slate-500 text-sm font-bold">ID</div>
|
||||
<div class="text-sm text-slate-500 flex justify-start items-center mb-1">
|
||||
<code class="truncate">{{ activeDid }}</code>
|
||||
<button @click="copy(activeDid)" class="ml-2">
|
||||
<fa icon="copy" class="text-slate-400 fa-fw"></fa>
|
||||
</button>
|
||||
<span class="whitespace-nowrap ml-4">
|
||||
<div
|
||||
class="text-sm text-slate-500 flex justify-between items-center mb-1"
|
||||
>
|
||||
<span
|
||||
><code>{{ address }}</code>
|
||||
<button @click="copy(address)">
|
||||
<fa icon="copy" class="text-slate-400 fa-fw ml-1"></fa>
|
||||
</button>
|
||||
</span>
|
||||
<span>
|
||||
<button
|
||||
class="text-xs uppercase bg-slate-500 text-white px-1.5 py-1 rounded-md"
|
||||
>
|
||||
@@ -106,53 +98,53 @@
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div class="text-slate-500 text-sm font-bold">Public Key (base 64)</div>
|
||||
<div class="text-sm text-slate-500 flex justify-start items-center mb-1">
|
||||
<code class="truncate">{{ publicBase64 }}</code>
|
||||
<button @click="copy(publicBase64)" class="ml-2">
|
||||
<fa icon="copy" class="text-slate-400 fa-fw"></fa>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="text-slate-500 text-sm font-bold">Public Key (hex)</div>
|
||||
<div class="text-sm text-slate-500 flex justify-start items-center mb-1">
|
||||
<code class="truncate">{{ publicHex }}</code>
|
||||
<button @click="copy(publicHex)" class="ml-2">
|
||||
<fa icon="copy" class="text-slate-400 fa-fw"></fa>
|
||||
</button>
|
||||
<div class="text-slate-500 text-sm font-bold">Public Key</div>
|
||||
<div class="text-sm text-slate-500 mb-1">
|
||||
<span
|
||||
><code>{{ publicHex }}</code>
|
||||
<button @click="copy(publicHex)">
|
||||
<fa icon="copy" class="text-slate-400 fa-fw ml-1"></fa>
|
||||
</button>
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div class="text-slate-500 text-sm font-bold">Derivation Path</div>
|
||||
<div class="text-sm text-slate-500 flex justify-start items-center mb-1">
|
||||
<code class="truncate">{{ derivationPath }}</code>
|
||||
<button @click="copy(derivationPath)" class="ml-2">
|
||||
<fa icon="copy" class="text-slate-400 fa-fw"></fa>
|
||||
</button>
|
||||
<div class="text-sm text-slate-500 mb-1">
|
||||
<span
|
||||
><code>{{ UPORT_ROOT_DERIVATION_PATH }}</code>
|
||||
<button @click="copy(UPORT_ROOT_DERIVATION_PATH)">
|
||||
<fa icon="copy" class="text-slate-400 fa-fw ml-1"></fa>
|
||||
</button>
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<router-link
|
||||
:to="{ name: 'new-edit-account' }"
|
||||
class="block text-center text-lg font-bold uppercase bg-blue-600 text-white px-2 py-3 rounded-md mb-8"
|
||||
>Edit Identity</router-link
|
||||
>
|
||||
Edit Identity
|
||||
</router-link>
|
||||
|
||||
<h3 class="text-sm uppercase font-semibold mb-3">Data</h3>
|
||||
<h3 class="text-sm uppercase font-semibold mb-3">Contact Actions</h3>
|
||||
|
||||
<a
|
||||
href="contact-scan.html"
|
||||
class="block w-full text-center text-md uppercase bg-slate-500 text-white px-1.5 py-2 rounded-md mb-6"
|
||||
>Scan New Contact</a
|
||||
>
|
||||
|
||||
<h3 class="text-sm uppercase font-semibold mb-3">Identity Actions</h3>
|
||||
|
||||
<a
|
||||
href=""
|
||||
class="block w-full text-center text-md uppercase bg-slate-500 text-white px-1.5 py-2 rounded-md mb-2"
|
||||
>Backup Seed</a
|
||||
>
|
||||
Backup Identifier Seed
|
||||
</a>
|
||||
<a
|
||||
href=""
|
||||
class="block w-full text-center text-md uppercase bg-slate-500 text-white px-1.5 py-2 rounded-md mb-6"
|
||||
@click="exportDatabase()"
|
||||
>Backup Other Data</a
|
||||
>
|
||||
Download Settings & Contacts (excluding Identifier Data)
|
||||
</a>
|
||||
<a ref="downloadLink" />
|
||||
|
||||
<!-- QR code popup -->
|
||||
<dialog id="dlgQR" class="backdrop:bg-black/75 rounded-md">
|
||||
@@ -176,312 +168,86 @@
|
||||
</button>
|
||||
</form>
|
||||
</dialog>
|
||||
|
||||
<h3 class="text-sm uppercase font-semibold mb-3">Advanced</h3>
|
||||
|
||||
<label
|
||||
for="toggleShowAmounts"
|
||||
class="flex items-center cursor-pointer mb-6"
|
||||
@click="handleChange"
|
||||
>
|
||||
<!-- toggle -->
|
||||
<div class="relative">
|
||||
<!-- input -->
|
||||
<input
|
||||
type="checkbox"
|
||||
v-model="showContactGives"
|
||||
name="showContactGives"
|
||||
class="sr-only"
|
||||
/>
|
||||
<!-- line -->
|
||||
<div class="block bg-slate-500 w-14 h-8 rounded-full"></div>
|
||||
<!-- dot -->
|
||||
<div
|
||||
class="dot absolute left-1 top-1 bg-slate-400 w-6 h-6 rounded-full transition"
|
||||
></div>
|
||||
</div>
|
||||
<!-- label -->
|
||||
<div class="ml-2">Show amounts given with contacts</div>
|
||||
</label>
|
||||
|
||||
<div class="flex py-2">
|
||||
<button class="text-center text-md text-blue-500" @click="checkLimits()">
|
||||
Check Registration and Claim Limits
|
||||
</button>
|
||||
<div v-if="!!limits?.nextWeekBeginDateTime" class="px-9">
|
||||
<span class="font-bold">Rate Limits</span>
|
||||
<p>
|
||||
You have done {{ limits.doneClaimsThisWeek }} claims out of
|
||||
{{ limits.maxClaimsPerWeek }} for this week. Your claims counter
|
||||
resets at {{ readableTime(limits.nextWeekBeginDateTime) }}
|
||||
</p>
|
||||
<p>
|
||||
You have done {{ limits.doneRegistrationsThisMonth }} registrations
|
||||
out of {{ limits.maxRegistrationsPerMonth }} for this month. Your
|
||||
registrations counter resets at
|
||||
{{ readableTime(limits.nextMonthBeginDateTime) }}
|
||||
</p>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div v-if="numAccounts > 0" class="flex py-2">
|
||||
Switch Account
|
||||
<span v-for="accountNum in numAccounts" :key="accountNum">
|
||||
<button class="text-blue-500 px-2" @click="switchAccount(accountNum)">
|
||||
#{{ accountNum }}
|
||||
</button>
|
||||
</span>
|
||||
</div>
|
||||
|
||||
<div v-bind:class="computedAlertClassNames()">
|
||||
<button
|
||||
class="close-button bg-slate-200 w-8 leading-loose rounded-full absolute top-2 right-2"
|
||||
@click="onClickClose()"
|
||||
>
|
||||
<fa icon="xmark"></fa>
|
||||
</button>
|
||||
<h4 class="font-bold pr-5">{{ alertTitle }}</h4>
|
||||
<p>{{ alertMessage }}</p>
|
||||
</div>
|
||||
</section>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import "dexie-export-import";
|
||||
import * as R from "ramda";
|
||||
|
||||
import { Component, Vue } from "vue-facing-decorator";
|
||||
import { Options, Vue } from "vue-class-component";
|
||||
import { useClipboard } from "@vueuse/core";
|
||||
import { createIdentifier, deriveAddress, newIdentifier } from "../libs/crypto";
|
||||
import { db } from "../db";
|
||||
import { useAppStore } from "@/store/app";
|
||||
import { ref } from "vue";
|
||||
//import { testServerRegisterUser } from "../test";
|
||||
|
||||
import { AppString } from "@/constants/app";
|
||||
import { db, accountsDB } from "@/db";
|
||||
import { MASTER_SETTINGS_KEY } from "@/db/tables/settings";
|
||||
import {
|
||||
accessToken,
|
||||
deriveAddress,
|
||||
generateSeed,
|
||||
newIdentifier,
|
||||
} from "@/libs/crypto";
|
||||
import { AxiosError } from "axios/index";
|
||||
|
||||
// eslint-disable-next-line @typescript-eslint/no-var-requires
|
||||
const Buffer = require("buffer/").Buffer;
|
||||
|
||||
interface RateLimits {
|
||||
doneClaimsThisWeek: string;
|
||||
doneRegistrationsThisMonth: string;
|
||||
maxClaimsPerWeek: string;
|
||||
maxRegistrationsPerMonth: string;
|
||||
nextMonthBeginDateTime: string;
|
||||
nextWeekBeginDateTime: string;
|
||||
}
|
||||
|
||||
@Component
|
||||
@Options({
|
||||
components: {},
|
||||
})
|
||||
export default class AccountViewView extends Vue {
|
||||
activeDid = "";
|
||||
derivationPath = "";
|
||||
firstName = "";
|
||||
lastName = "";
|
||||
numAccounts = 0;
|
||||
firstName =
|
||||
localStorage.getItem("firstName") === null
|
||||
? "--"
|
||||
: localStorage.getItem("firstName");
|
||||
lastName =
|
||||
localStorage.getItem("lastName") === null
|
||||
? "--"
|
||||
: localStorage.getItem("lastName");
|
||||
mnemonic = "";
|
||||
address = "";
|
||||
privateHex = "";
|
||||
publicHex = "";
|
||||
publicBase64 = "";
|
||||
limits: RateLimits | null = null;
|
||||
showContactGives = false;
|
||||
|
||||
UPORT_ROOT_DERIVATION_PATH = "";
|
||||
source = ref("Hello");
|
||||
copy = useClipboard().copy;
|
||||
|
||||
handleChange() {
|
||||
this.showContactGives = !this.showContactGives;
|
||||
this.updateShowContactAmounts();
|
||||
}
|
||||
|
||||
readableTime(timeStr: string) {
|
||||
return timeStr.substring(0, timeStr.indexOf("T"));
|
||||
}
|
||||
// This registers current user in vue plugin with: $vm.ctx.testRegisterUser()
|
||||
//testRegisterUser = testServerRegisterUser;
|
||||
|
||||
// 'created' hook runs when the Vue instance is first created
|
||||
async created() {
|
||||
// Uncomment to register this user on the test server.
|
||||
// To manage within the vue devtools browser extension https://devtools.vuejs.org/
|
||||
// assign this to a class variable, eg. "registerThisUser = testServerRegisterUser",
|
||||
// select a component in the extension, and enter in the console: $vm.ctx.registerThisUser()
|
||||
//testServerRegisterUser();
|
||||
const appCondition = useAppStore().condition;
|
||||
if (appCondition == "uninitialized") {
|
||||
this.mnemonic = createIdentifier();
|
||||
[
|
||||
this.address,
|
||||
this.privateHex,
|
||||
this.publicHex,
|
||||
this.UPORT_ROOT_DERIVATION_PATH,
|
||||
] = deriveAddress(this.mnemonic);
|
||||
|
||||
try {
|
||||
await db.open();
|
||||
const settings = await db.settings.get(MASTER_SETTINGS_KEY);
|
||||
this.activeDid = settings?.activeDid || "";
|
||||
this.firstName = settings?.firstName || "";
|
||||
this.lastName = settings?.lastName || "";
|
||||
this.showContactGives = !!settings?.showContactGivesInline;
|
||||
|
||||
await accountsDB.open();
|
||||
this.numAccounts = await accountsDB.accounts.count();
|
||||
if (this.numAccounts === 0) {
|
||||
let address = ""; // 0x... ETH address, without "did:eth:"
|
||||
let privateHex = "";
|
||||
const mnemonic = generateSeed();
|
||||
[address, privateHex, this.publicHex, this.derivationPath] =
|
||||
deriveAddress(mnemonic);
|
||||
|
||||
const newId = newIdentifier(
|
||||
address,
|
||||
this.publicHex,
|
||||
privateHex,
|
||||
this.derivationPath
|
||||
);
|
||||
await accountsDB.accounts.add({
|
||||
dateCreated: new Date().toISOString(),
|
||||
derivationPath: this.derivationPath,
|
||||
did: newId.did,
|
||||
identity: JSON.stringify(newId),
|
||||
mnemonic: mnemonic,
|
||||
publicKeyHex: newId.keys[0].publicKeyHex,
|
||||
});
|
||||
this.activeDid = newId.did;
|
||||
const newId = newIdentifier(
|
||||
this.address,
|
||||
this.publicHex,
|
||||
this.privateHex,
|
||||
this.UPORT_ROOT_DERIVATION_PATH
|
||||
);
|
||||
try {
|
||||
await db.open();
|
||||
const num_accounts = await db.accounts.count();
|
||||
if (num_accounts === 0) {
|
||||
await db.accounts.add({
|
||||
publicKey: newId.keys[0].publicKeyHex,
|
||||
mnemonic: this.mnemonic,
|
||||
identity: JSON.stringify(newId),
|
||||
dateCreated: new Date().getTime(),
|
||||
});
|
||||
}
|
||||
useAppStore().setCondition("registered");
|
||||
} catch (err) {
|
||||
console.log(err);
|
||||
}
|
||||
|
||||
const accounts = await accountsDB.accounts.toArray();
|
||||
const account = R.find((acc) => acc.did === this.activeDid, accounts);
|
||||
const identity = JSON.parse(account?.identity || "undefined");
|
||||
this.publicHex = identity.keys[0].publicKeyHex;
|
||||
this.publicBase64 = Buffer.from(this.publicHex, "hex").toString("base64");
|
||||
this.derivationPath = identity.keys[0].meta.derivationPath;
|
||||
|
||||
db.settings.update(MASTER_SETTINGS_KEY, {
|
||||
activeDid: identity.did,
|
||||
});
|
||||
} catch (err) {
|
||||
this.alertMessage =
|
||||
"Clear your cache and start over (after data backup). See console log for more info.";
|
||||
console.log("Telling user to clear cache because:", err);
|
||||
this.alertTitle = "Error Creating Account";
|
||||
this.isAlertVisible = true;
|
||||
}
|
||||
}
|
||||
|
||||
public async updateShowContactAmounts() {
|
||||
try {
|
||||
await db.open();
|
||||
db.settings.update(MASTER_SETTINGS_KEY, {
|
||||
showContactGivesInline: this.showContactGives,
|
||||
});
|
||||
} catch (err) {
|
||||
this.alertMessage =
|
||||
"Clear your cache and start over (after data backup). See console log for more info.";
|
||||
console.log("Telling user to clear cache because:", err);
|
||||
this.alertTitle = "Error Creating Account";
|
||||
this.isAlertVisible = true;
|
||||
}
|
||||
}
|
||||
|
||||
public async exportDatabase() {
|
||||
try {
|
||||
const blob = await db.export({ prettyJson: true });
|
||||
const url = URL.createObjectURL(blob);
|
||||
|
||||
const downloadAnchor = this.$refs.downloadLink as HTMLAnchorElement;
|
||||
downloadAnchor.href = url;
|
||||
downloadAnchor.download = db.name + "-backup.json";
|
||||
downloadAnchor.click();
|
||||
|
||||
URL.revokeObjectURL(url);
|
||||
|
||||
this.alertTitle = "Download Started";
|
||||
this.alertMessage = "See your downloads directory for the backup.";
|
||||
this.isAlertVisible = true;
|
||||
} catch (error) {
|
||||
this.alertTitle = "Export Error";
|
||||
this.alertMessage = "See console logs for more info.";
|
||||
this.isAlertVisible = true;
|
||||
console.error("Export Error:", error);
|
||||
}
|
||||
}
|
||||
|
||||
async checkLimits() {
|
||||
const endorserApiServer = AppString.DEFAULT_ENDORSER_API_SERVER;
|
||||
const url = endorserApiServer + "/api/report/rateLimits";
|
||||
await accountsDB.open();
|
||||
const accounts = await accountsDB.accounts.toArray();
|
||||
const account = R.find((acc) => acc.did === this.activeDid, accounts);
|
||||
const identity = JSON.parse(account?.identity || "undefined");
|
||||
const token = await accessToken(identity);
|
||||
const headers = {
|
||||
"Content-Type": "application/json",
|
||||
Authorization: "Bearer " + token,
|
||||
};
|
||||
|
||||
try {
|
||||
const resp = await this.axios.get(url, { headers });
|
||||
// axios throws an exception on a 400
|
||||
if (resp.status === 200) {
|
||||
this.limits = resp.data;
|
||||
}
|
||||
} catch (error: unknown) {
|
||||
const serverError = error as AxiosError;
|
||||
|
||||
this.alertTitle = "Error from Server";
|
||||
console.log("Bad response retrieving limits: ", serverError);
|
||||
// Anybody know how to access items inside "response.data" without this?
|
||||
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
||||
const data: any = serverError.response?.data;
|
||||
if (data.error.message) {
|
||||
this.alertMessage = data.error.message;
|
||||
} else {
|
||||
this.alertMessage = "Bad server response. See logs for details.";
|
||||
}
|
||||
this.isAlertVisible = true;
|
||||
}
|
||||
}
|
||||
|
||||
async switchAccount(accountNum: number) {
|
||||
await accountsDB.open();
|
||||
const accounts = await accountsDB.accounts.toArray();
|
||||
const account = accounts[accountNum - 1];
|
||||
|
||||
await db.open();
|
||||
db.settings.update(MASTER_SETTINGS_KEY, {
|
||||
activeDid: account.did,
|
||||
});
|
||||
|
||||
this.activeDid = account.did;
|
||||
this.derivationPath = account.derivationPath;
|
||||
this.publicHex = account.publicKeyHex;
|
||||
this.publicBase64 = Buffer.from(this.publicHex, "hex").toString("base64");
|
||||
}
|
||||
|
||||
public showContactGivesClassNames() {
|
||||
return {
|
||||
"bg-slate-900": !this.showContactGives,
|
||||
"bg-green-600": this.showContactGives,
|
||||
};
|
||||
}
|
||||
|
||||
alertMessage = "";
|
||||
alertTitle = "";
|
||||
isAlertVisible = false;
|
||||
|
||||
public onClickClose() {
|
||||
this.isAlertVisible = false;
|
||||
this.alertTitle = "";
|
||||
this.alertMessage = "";
|
||||
}
|
||||
|
||||
public computedAlertClassNames() {
|
||||
return {
|
||||
hidden: !this.isAlertVisible,
|
||||
"dismissable-alert": true,
|
||||
"bg-slate-100": true,
|
||||
"p-5": true,
|
||||
rounded: true,
|
||||
"drop-shadow-lg": true,
|
||||
fixed: true,
|
||||
"top-3": true,
|
||||
"inset-x-3": true,
|
||||
"transition-transform": true,
|
||||
"ease-in": true,
|
||||
"duration-300": true,
|
||||
};
|
||||
const num_accounts = await db.accounts.count();
|
||||
if (num_accounts === 0) {
|
||||
console.log("Problem! Should have a profile!");
|
||||
} else {
|
||||
const accounts = await db.accounts.toArray();
|
||||
const identity = JSON.parse(accounts[0].identity);
|
||||
this.address = identity.did;
|
||||
this.publicHex = identity.keys[0].publicKeyHex;
|
||||
this.UPORT_ROOT_DERIVATION_PATH = identity.keys[0].meta.derivationPath;
|
||||
}
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
3
src/views/CommitmentsView.vue
Normal file
3
src/views/CommitmentsView.vue
Normal file
@@ -0,0 +1,3 @@
|
||||
<template>
|
||||
<section id="Content" class="p-6 pb-24"></section>
|
||||
</template>
|
||||
@@ -1,388 +0,0 @@
|
||||
<template>
|
||||
<!-- QUICK NAV -->
|
||||
<nav id="QuickNav" class="fixed bottom-0 left-0 right-0 bg-slate-200 z-50">
|
||||
<ul class="flex text-2xl p-2 gap-2">
|
||||
<!-- Home Feed -->
|
||||
<li class="basis-1/5 rounded-md text-slate-500">
|
||||
<router-link :to="{ name: 'home' }" class="block text-center py-3 px-1"
|
||||
><fa icon="house-chimney" class="fa-fw"></fa
|
||||
></router-link>
|
||||
</li>
|
||||
<!-- Search -->
|
||||
<li class="basis-1/5 rounded-md text-slate-500">
|
||||
<router-link
|
||||
:to="{ name: 'discover' }"
|
||||
class="block text-center py-3 px-1"
|
||||
><fa icon="magnifying-glass" class="fa-fw"></fa
|
||||
></router-link>
|
||||
</li>
|
||||
<!-- Contacts -->
|
||||
<li class="basis-1/5 rounded-md text-slate-500">
|
||||
<router-link
|
||||
:to="{ name: 'projects' }"
|
||||
class="block text-center py-3 px-1"
|
||||
><fa icon="folder-open" class="fa-fw"></fa
|
||||
></router-link>
|
||||
</li>
|
||||
<!-- Contacts -->
|
||||
<li class="basis-1/5 rounded-md text-slate-500">
|
||||
<router-link
|
||||
:to="{ name: 'contacts' }"
|
||||
class="block text-center py-3 px-1"
|
||||
><fa icon="users" class="fa-fw"></fa
|
||||
></router-link>
|
||||
</li>
|
||||
<!-- Profile -->
|
||||
<li class="basis-1/5 rounded-md text-slate-500">
|
||||
<router-link
|
||||
:to="{ name: 'account' }"
|
||||
class="block text-center py-3 px-1"
|
||||
><fa icon="circle-user" class="fa-fw"></fa
|
||||
></router-link>
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
|
||||
<section id="Content" class="p-6 pb-24">
|
||||
<h1 id="ViewHeading" class="text-4xl text-center font-light pt-4 mb-8">
|
||||
Given with {{ contact?.name }}
|
||||
</h1>
|
||||
|
||||
<!-- Results List -->
|
||||
<div>
|
||||
<div class="border-b border-slate-300 flex">
|
||||
<div class="w-1/4"></div>
|
||||
<div class="w-1/4">from them</div>
|
||||
<div class="w-1/4"></div>
|
||||
<div class="w-1/4">to them</div>
|
||||
</div>
|
||||
<div
|
||||
class="border-b border-slate-300 flex"
|
||||
v-for="record in giveRecords"
|
||||
:key="record.id"
|
||||
>
|
||||
<div class="w-1/4">
|
||||
{{ new Date(record.issuedAt).toLocaleString() }}
|
||||
</div>
|
||||
<div class="w-1/4">
|
||||
<span v-if="record.agentDid == contact.did">
|
||||
<div class="font-bold">
|
||||
{{ record.amount }} {{ record.unit }}
|
||||
<span v-if="record.amountConfirmed" class="tooltip">
|
||||
<fa icon="circle-check" class="text-green-600 fa-fw ml-1" />
|
||||
<span class="tooltiptext">Confirmed</span>
|
||||
</span>
|
||||
<button v-else class="tooltip" @click="confirmGiven(record)">
|
||||
<fa icon="circle" class="text-blue-600 fa-fw ml-1" />
|
||||
<span class="tooltiptext">Unconfirmed</span>
|
||||
</button>
|
||||
</div>
|
||||
<br />
|
||||
{{ record.description }}
|
||||
</span>
|
||||
</div>
|
||||
<div class="w-1/8">
|
||||
<span v-if="record.agentDid == contact.did">
|
||||
<fa icon="long-arrow-alt-left" class="text-slate-900 fa-fw ml-1" />
|
||||
</span>
|
||||
<span v-else>
|
||||
|
||||
<fa icon="long-arrow-alt-right" class="text-slate-900 fa-fw ml-1" />
|
||||
</span>
|
||||
</div>
|
||||
<div class="w-1/4">
|
||||
<span v-if="record.agentDid != contact.did">
|
||||
<div class="font-bold">
|
||||
{{ record.amount }} {{ record.unit }}
|
||||
<span v-if="record.amountConfirmed" class="tooltip">
|
||||
<fa icon="circle-check" class="text-green-600 fa-fw ml-1" />
|
||||
<span class="tooltiptext">Confirmed</span>
|
||||
</span>
|
||||
<button v-else class="tooltip" @click="cannotConfirmMessage()">
|
||||
<fa icon="circle" class="text-slate-600 fa-fw ml-1" />
|
||||
<span class="tooltiptext">Unconfirmed</span>
|
||||
</button>
|
||||
</div>
|
||||
<br />
|
||||
{{ record.description }}
|
||||
</span>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<div v-bind:class="computedAlertClassNames()">
|
||||
<button
|
||||
class="close-button bg-slate-200 w-8 leading-loose rounded-full absolute top-2 right-2"
|
||||
@click="onClickClose()"
|
||||
>
|
||||
<fa icon="xmark"></fa>
|
||||
</button>
|
||||
<h4 class="font-bold pr-5">{{ alertTitle }}</h4>
|
||||
<p>{{ alertMessage }}</p>
|
||||
</div>
|
||||
</section>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import * as R from "ramda";
|
||||
import { Options, Vue } from "vue-class-component";
|
||||
|
||||
import { accountsDB, db } from "@/db";
|
||||
import { Contact } from "@/db/tables/contacts";
|
||||
import { MASTER_SETTINGS_KEY } from "@/db/tables/settings";
|
||||
import { AppString } from "@/constants/app";
|
||||
import { accessToken, SimpleSigner } from "@/libs/crypto";
|
||||
import {
|
||||
AgreeVerifiableCredential,
|
||||
GiveServerRecord,
|
||||
GiveVerifiableCredential,
|
||||
SCHEMA_ORG_CONTEXT,
|
||||
} from "@/libs/endorserServer";
|
||||
import * as didJwt from "did-jwt";
|
||||
import { AxiosError } from "axios";
|
||||
|
||||
@Options({})
|
||||
export default class ContactsView extends Vue {
|
||||
activeDid = "";
|
||||
contact: Contact | null = null;
|
||||
giveRecords: Array<GiveServerRecord> = [];
|
||||
|
||||
// 'created' hook runs when the Vue instance is first created
|
||||
async created() {
|
||||
await db.open();
|
||||
const contactDid = this.$route.query.contactDid as string;
|
||||
this.contact = (await db.contacts.get(contactDid)) || null;
|
||||
|
||||
const settings = await db.settings.get(MASTER_SETTINGS_KEY);
|
||||
this.activeDid = settings?.activeDid || "";
|
||||
|
||||
if (this.activeDid && this.contact) {
|
||||
this.loadGives(this.activeDid, this.contact);
|
||||
}
|
||||
}
|
||||
|
||||
async loadGives(activeDid: string, contact: Contact) {
|
||||
// only load the private keys temporarily when needed
|
||||
await accountsDB.open();
|
||||
const accounts = await accountsDB.accounts.toArray();
|
||||
const account = R.find((acc) => acc.did === activeDid, accounts);
|
||||
const identity = JSON.parse(account?.identity || "undefined");
|
||||
|
||||
const endorserApiServer = AppString.DEFAULT_ENDORSER_API_SERVER;
|
||||
|
||||
// load all the time I have given to them
|
||||
try {
|
||||
let result = [];
|
||||
|
||||
const url =
|
||||
endorserApiServer +
|
||||
"/api/v2/report/gives?agentDid=" +
|
||||
encodeURIComponent(identity.did) +
|
||||
"&recipientDid=" +
|
||||
encodeURIComponent(contact.did);
|
||||
const token = await accessToken(identity);
|
||||
const headers = {
|
||||
"Content-Type": "application/json",
|
||||
Authorization: "Bearer " + token,
|
||||
};
|
||||
const resp = await this.axios.get(url, { headers });
|
||||
if (resp.status === 200) {
|
||||
result = resp.data.data;
|
||||
} else {
|
||||
console.log(
|
||||
"Got bad response status & data of",
|
||||
resp.status,
|
||||
resp.data
|
||||
);
|
||||
this.alertTitle = "Error With Server";
|
||||
this.alertMessage =
|
||||
"Got an error retrieving your given time from the server.";
|
||||
this.isAlertVisible = true;
|
||||
}
|
||||
|
||||
const url2 =
|
||||
endorserApiServer +
|
||||
"/api/v2/report/gives?agentDid=" +
|
||||
encodeURIComponent(contact.did) +
|
||||
"&recipientDid=" +
|
||||
encodeURIComponent(identity.did);
|
||||
const token2 = await accessToken(identity);
|
||||
const headers2 = {
|
||||
"Content-Type": "application/json",
|
||||
Authorization: "Bearer " + token2,
|
||||
};
|
||||
const resp2 = await this.axios.get(url2, { headers: headers2 });
|
||||
if (resp2.status === 200) {
|
||||
result = R.concat(result, resp2.data.data);
|
||||
} else {
|
||||
console.log(
|
||||
"Got bad response status & data of",
|
||||
resp2.status,
|
||||
resp2.data
|
||||
);
|
||||
this.alertTitle = "Error With Server";
|
||||
this.alertMessage =
|
||||
"Got an error retrieving your given time from the server.";
|
||||
this.isAlertVisible = true;
|
||||
}
|
||||
|
||||
const sortedResult: Array<GiveServerRecord> = R.sort(
|
||||
(a, b) =>
|
||||
new Date(b.issuedAt).getTime() - new Date(a.issuedAt).getTime(),
|
||||
result
|
||||
);
|
||||
this.giveRecords = sortedResult;
|
||||
} catch (error) {
|
||||
this.alertTitle = "Error With Server";
|
||||
this.alertMessage = error as string;
|
||||
this.isAlertVisible = true;
|
||||
}
|
||||
}
|
||||
|
||||
async confirmGiven(record: GiveServerRecord) {
|
||||
if (!confirm("Are you sure you want to mark this as confirmed?")) {
|
||||
return;
|
||||
}
|
||||
|
||||
// Make claim
|
||||
// I use clone here because otherwise it gets a Proxy object.
|
||||
// eslint-disable-next-line @typescript-eslint/no-explicit-any
|
||||
const origClaim: GiveVerifiableCredential = R.clone(record.fullClaim);
|
||||
if (record.fullClaim["@context"] == SCHEMA_ORG_CONTEXT) {
|
||||
delete origClaim["@context"];
|
||||
}
|
||||
origClaim["identifier"] = record.handleId;
|
||||
const vcClaim: AgreeVerifiableCredential = {
|
||||
"@context": SCHEMA_ORG_CONTEXT,
|
||||
"@type": "AgreeAction",
|
||||
object: origClaim,
|
||||
};
|
||||
|
||||
// Make a payload for the claim
|
||||
const vcPayload = {
|
||||
vc: {
|
||||
"@context": ["https://www.w3.org/2018/credentials/v1"],
|
||||
type: ["VerifiableCredential"],
|
||||
credentialSubject: vcClaim,
|
||||
},
|
||||
};
|
||||
|
||||
// Create a signature using private key of identity
|
||||
await accountsDB.open();
|
||||
const accounts = await accountsDB.accounts.toArray();
|
||||
const account = R.find((acc) => acc.did === this.activeDid, accounts);
|
||||
const identity = JSON.parse(account?.identity || "undefined");
|
||||
if (identity.keys[0].privateKeyHex !== null) {
|
||||
// eslint-disable-next-line @typescript-eslint/no-non-null-assertion
|
||||
const privateKeyHex: string = identity.keys[0].privateKeyHex!;
|
||||
const signer = await SimpleSigner(privateKeyHex);
|
||||
const alg = undefined;
|
||||
// Create a JWT for the request
|
||||
const vcJwt: string = await didJwt.createJWT(vcPayload, {
|
||||
alg: alg,
|
||||
issuer: identity.did,
|
||||
signer: signer,
|
||||
});
|
||||
|
||||
// Make the xhr request payload
|
||||
const payload = JSON.stringify({ jwtEncoded: vcJwt });
|
||||
const endorserApiServer = AppString.DEFAULT_ENDORSER_API_SERVER;
|
||||
const url = endorserApiServer + "/api/v2/claim";
|
||||
const token = await accessToken(identity);
|
||||
const headers = {
|
||||
"Content-Type": "application/json",
|
||||
Authorization: "Bearer " + token,
|
||||
};
|
||||
|
||||
try {
|
||||
const resp = await this.axios.post(url, payload, { headers });
|
||||
//console.log("Got resp data:", resp.data);
|
||||
if (resp.data?.success) {
|
||||
record.amountConfirmed = origClaim.object?.amountOfThisGood || 1;
|
||||
}
|
||||
} catch (error) {
|
||||
let userMessage = "There was an error. See logs for more info.";
|
||||
const serverError = error as AxiosError;
|
||||
if (serverError) {
|
||||
if (serverError.message) {
|
||||
userMessage = serverError.message; // Info for the user
|
||||
} else {
|
||||
userMessage = JSON.stringify(serverError.toJSON());
|
||||
}
|
||||
} else {
|
||||
userMessage = error as string;
|
||||
}
|
||||
// Now set that error for the user to see.
|
||||
this.alertTitle = "Error With Server";
|
||||
this.alertMessage = userMessage;
|
||||
this.isAlertVisible = true;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
cannotConfirmMessage() {
|
||||
this.alertTitle = "Not Allowed";
|
||||
this.alertMessage = "Only the recipient can confirm final receipt.";
|
||||
this.isAlertVisible = true;
|
||||
}
|
||||
|
||||
alertTitle = "";
|
||||
alertMessage = "";
|
||||
isAlertVisible = false;
|
||||
|
||||
public onClickClose() {
|
||||
this.isAlertVisible = false;
|
||||
this.alertTitle = "";
|
||||
this.alertMessage = "";
|
||||
}
|
||||
|
||||
public computedAlertClassNames() {
|
||||
return {
|
||||
hidden: !this.isAlertVisible,
|
||||
"dismissable-alert": true,
|
||||
"bg-slate-100": true,
|
||||
"p-5": true,
|
||||
rounded: true,
|
||||
"drop-shadow-lg": true,
|
||||
fixed: true,
|
||||
"top-3": true,
|
||||
"inset-x-3": true,
|
||||
"transition-transform": true,
|
||||
"ease-in": true,
|
||||
"duration-300": true,
|
||||
};
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
/* Tooltip from https://www.w3schools.com/css/css_tooltip.asp */
|
||||
/* Tooltip container */
|
||||
.tooltip {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
border-bottom: 1px dotted black; /* If you want dots under the hoverable text */
|
||||
}
|
||||
|
||||
/* Tooltip text */
|
||||
.tooltip .tooltiptext {
|
||||
visibility: hidden;
|
||||
width: 200px;
|
||||
background-color: black;
|
||||
color: #fff;
|
||||
text-align: center;
|
||||
padding: 5px 0;
|
||||
border-radius: 6px;
|
||||
|
||||
position: absolute;
|
||||
z-index: 1;
|
||||
}
|
||||
|
||||
/* Show the tooltip text when you mouse over the tooltip container */
|
||||
.tooltip:hover .tooltiptext {
|
||||
visibility: visible;
|
||||
}
|
||||
.tooltip:hover .tooltiptext-left {
|
||||
visibility: visible;
|
||||
}
|
||||
</style>
|
||||
@@ -1,908 +0,0 @@
|
||||
<template>
|
||||
<!-- QUICK NAV -->
|
||||
<nav id="QuickNav" class="fixed bottom-0 left-0 right-0 bg-slate-200 z-50">
|
||||
<ul class="flex text-2xl p-2 gap-2">
|
||||
<!-- Home Feed -->
|
||||
<li class="basis-1/5 rounded-md text-slate-500">
|
||||
<router-link :to="{ name: 'home' }" class="block text-center py-3 px-1"
|
||||
><fa icon="house-chimney" class="fa-fw"></fa
|
||||
></router-link>
|
||||
</li>
|
||||
<!-- Search -->
|
||||
<li class="basis-1/5 rounded-md text-slate-500">
|
||||
<router-link
|
||||
:to="{ name: 'discover' }"
|
||||
class="block text-center py-3 px-1"
|
||||
><fa icon="magnifying-glass" class="fa-fw"></fa
|
||||
></router-link>
|
||||
</li>
|
||||
<!-- Contacts -->
|
||||
<li class="basis-1/5 rounded-md text-slate-500">
|
||||
<router-link
|
||||
:to="{ name: 'projects' }"
|
||||
class="block text-center py-3 px-1"
|
||||
><fa icon="folder-open" class="fa-fw"></fa
|
||||
></router-link>
|
||||
</li>
|
||||
<!-- Contacts -->
|
||||
<li class="basis-1/5 rounded-md bg-slate-400 text-white">
|
||||
<router-link
|
||||
:to="{ name: 'contacts' }"
|
||||
class="block text-center py-3 px-1"
|
||||
><fa icon="users" class="fa-fw"></fa
|
||||
></router-link>
|
||||
</li>
|
||||
<!-- Profile -->
|
||||
<li class="basis-1/5 rounded-md text-slate-500">
|
||||
<router-link
|
||||
:to="{ name: 'account' }"
|
||||
class="block text-center py-3 px-1"
|
||||
><fa icon="circle-user" class="fa-fw"></fa
|
||||
></router-link>
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
|
||||
<section id="Content" class="p-6 pb-24">
|
||||
<!-- Heading -->
|
||||
<h1 id="ViewHeading" class="text-4xl text-center font-light pt-4 mb-8">
|
||||
Your Contacts
|
||||
</h1>
|
||||
|
||||
<!-- New Contact -->
|
||||
<div class="mb-4 flex">
|
||||
<input
|
||||
type="text"
|
||||
placeholder="DID, Name, Public Key"
|
||||
class="block w-full rounded-l border border-r-0 border-slate-400 px-3 py-2"
|
||||
v-model="contactInput"
|
||||
/>
|
||||
<button
|
||||
class="px-4 rounded-r bg-slate-200 border border-l-0 border-slate-400"
|
||||
@click="onClickNewContact()"
|
||||
>
|
||||
<fa icon="plus" class="fa-fw"></fa>
|
||||
</button>
|
||||
</div>
|
||||
|
||||
<div class="flex justify-between" v-if="showGiveNumbers">
|
||||
<div class="w-full text-right">
|
||||
Hours to Add:
|
||||
<input
|
||||
class="border border rounded border-slate-400 w-24 text-right"
|
||||
type="text"
|
||||
placeholder="1"
|
||||
v-model="hourInput"
|
||||
/>
|
||||
<br />
|
||||
<input
|
||||
class="border border rounded border-slate-400 w-48"
|
||||
type="text"
|
||||
placeholder="Description"
|
||||
v-model="hourDescriptionInput"
|
||||
/>
|
||||
<br />
|
||||
<br />
|
||||
<button
|
||||
href=""
|
||||
class="text-center text-md text-white px-1.5 py-2 rounded-md mb-6"
|
||||
v-bind:class="showGiveAmountsClassNames()"
|
||||
@click="toggleShowGiveTotals()"
|
||||
>
|
||||
{{
|
||||
showGiveTotals
|
||||
? "Total"
|
||||
: showGiveConfirmed
|
||||
? "Confirmed"
|
||||
: "Unconfirmed"
|
||||
}}
|
||||
</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
<!-- Results List -->
|
||||
<ul class="">
|
||||
<li
|
||||
class="border-b border-slate-300"
|
||||
v-for="contact in contacts"
|
||||
:key="contact.did"
|
||||
>
|
||||
<div class="grow overflow-hidden">
|
||||
<h2 class="text-base font-semibold">
|
||||
{{ contact.name || "(no name)" }}
|
||||
</h2>
|
||||
<div class="text-sm truncate">{{ contact.did }}</div>
|
||||
<div class="text-sm truncate" v-if="contact.publicKeyBase64">
|
||||
Public Key (base 64): {{ contact.publicKeyBase64 }}
|
||||
</div>
|
||||
|
||||
<button
|
||||
v-if="contact.seesMe"
|
||||
class="tooltip"
|
||||
@click="setVisibility(contact, false)"
|
||||
>
|
||||
<fa icon="eye" class="text-slate-900 fa-fw ml-1" />
|
||||
<span class="tooltiptext">They can see you</span>
|
||||
</button>
|
||||
<button v-else class="tooltip" @click="setVisibility(contact, true)">
|
||||
<span class="tooltiptext">They cannot see you</span>
|
||||
<fa icon="eye-slash" class="text-slate-900 fa-fw ml-1" />
|
||||
</button>
|
||||
|
||||
<button class="tooltip" @click="checkVisibility(contact)">
|
||||
<span class="tooltiptext">Check Visibility</span>
|
||||
<fa icon="rotate" class="text-slate-900 fa-fw ml-1" />
|
||||
</button>
|
||||
|
||||
<button v-if="contact.registered" class="tooltip">
|
||||
<span class="tooltiptext">Registered</span>
|
||||
<fa icon="person-circle-check" class="text-slate-900 fa-fw ml-1" />
|
||||
</button>
|
||||
<button v-else @click="register(contact)" class="tooltip">
|
||||
<span class="tooltiptext">Registration Unknown</span>
|
||||
<fa
|
||||
icon="person-circle-question"
|
||||
class="text-slate-900 fa-fw ml-1"
|
||||
/>
|
||||
</button>
|
||||
|
||||
<button @click="deleteContact(contact)" class="px-9 tooltip">
|
||||
<span class="tooltiptext">Delete!</span>
|
||||
<fa icon="trash-can" class="text-red-600 fa-fw ml-1" />
|
||||
</button>
|
||||
|
||||
<div v-if="showGiveNumbers" class="float-right">
|
||||
<div class="float-right">
|
||||
<div class="tooltip">
|
||||
to:
|
||||
{{
|
||||
/* eslint-disable prettier/prettier */
|
||||
this.showGiveTotals
|
||||
? ((givenByMeConfirmed[contact.did] || 0)
|
||||
+ (givenByMeUnconfirmed[contact.did] || 0))
|
||||
: this.showGiveConfirmed
|
||||
? (givenByMeConfirmed[contact.did] || 0)
|
||||
: (givenByMeUnconfirmed[contact.did] || 0)
|
||||
/* eslint-enable prettier/prettier */
|
||||
}}
|
||||
<span class="tooltiptext-left">
|
||||
{{
|
||||
givenByMeDescriptions[contact.did]
|
||||
? "Most recently: " + givenByMeDescriptions[contact.did]
|
||||
: "(None given yet.)"
|
||||
}}
|
||||
</span>
|
||||
<button
|
||||
class="text-md uppercase bg-slate-500 text-white px-1.5 py-2 rounded-md mb-6"
|
||||
@click="onClickAddGive(activeDid, contact.did)"
|
||||
>
|
||||
+
|
||||
</button>
|
||||
</div>
|
||||
<div class="tooltip px-2">
|
||||
from:
|
||||
{{
|
||||
/* eslint-disable prettier/prettier */
|
||||
this.showGiveTotals
|
||||
? ((givenToMeConfirmed[contact.did] || 0)
|
||||
+ (givenToMeUnconfirmed[contact.did] || 0))
|
||||
: this.showGiveConfirmed
|
||||
? (givenToMeConfirmed[contact.did] || 0)
|
||||
: (givenToMeUnconfirmed[contact.did] || 0)
|
||||
/* eslint-enable prettier/prettier */
|
||||
}}
|
||||
<span class="tooltiptext-left">
|
||||
{{
|
||||
givenToMeDescriptions[contact.did]
|
||||
? "Most recently: " + givenToMeDescriptions[contact.did]
|
||||
: "(None received yet.)"
|
||||
}}
|
||||
</span>
|
||||
<button
|
||||
class="text-md uppercase bg-slate-500 text-white px-1.5 py-2 rounded-md mb-6"
|
||||
@click="onClickAddGive(contact.did, activeDid)"
|
||||
>
|
||||
+
|
||||
</button>
|
||||
</div>
|
||||
<router-link
|
||||
:to="{
|
||||
name: 'contact-amounts',
|
||||
query: { contactDid: contact.did },
|
||||
}"
|
||||
class="tooltip"
|
||||
>
|
||||
<fa icon="file-lines" class="text-slate-600 fa-fw ml-1" />
|
||||
<span class="tooltiptext-left">See All Given Activity</span>
|
||||
</router-link>
|
||||
</div>
|
||||
</div>
|
||||
</div>
|
||||
</li>
|
||||
</ul>
|
||||
</section>
|
||||
|
||||
<div v-bind:class="computedAlertClassNames()">
|
||||
<button
|
||||
class="close-button bg-slate-200 w-8 leading-loose rounded-full absolute top-2 right-2"
|
||||
@click="onClickClose()"
|
||||
>
|
||||
<fa icon="xmark"></fa>
|
||||
</button>
|
||||
<h4 class="font-bold pr-5">{{ alertTitle }}</h4>
|
||||
<p>{{ alertMessage }}</p>
|
||||
</div>
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { AxiosError } from "axios";
|
||||
import * as didJwt from "did-jwt";
|
||||
import * as R from "ramda";
|
||||
import { IIdentifier } from "@veramo/core";
|
||||
import { Options, Vue } from "vue-class-component";
|
||||
|
||||
import { AppString } from "@/constants/app";
|
||||
import { accountsDB, db } from "@/db";
|
||||
import { Contact } from "@/db/tables/contacts";
|
||||
import { MASTER_SETTINGS_KEY } from "@/db/tables/settings";
|
||||
import { accessToken, SimpleSigner } from "@/libs/crypto";
|
||||
import {
|
||||
GiveServerRecord,
|
||||
GiveVerifiableCredential,
|
||||
RegisterVerifiableCredential,
|
||||
SERVICE_ID,
|
||||
} from "@/libs/endorserServer";
|
||||
|
||||
// eslint-disable-next-line @typescript-eslint/no-var-requires
|
||||
const Buffer = require("buffer/").Buffer;
|
||||
|
||||
@Options({
|
||||
components: {},
|
||||
})
|
||||
export default class ContactsView extends Vue {
|
||||
activeDid = "";
|
||||
contacts: Array<Contact> = [];
|
||||
contactInput = "";
|
||||
// { "did:...": concatenated-descriptions } entry for each contact
|
||||
givenByMeDescriptions: Record<string, string> = {};
|
||||
// { "did:...": amount } entry for each contact
|
||||
givenByMeConfirmed: Record<string, number> = {};
|
||||
// { "did:...": amount } entry for each contact
|
||||
givenByMeUnconfirmed: Record<string, number> = {};
|
||||
// { "did:...": concatenated-descriptions } entry for each contact
|
||||
givenToMeDescriptions: Record<string, string> = {};
|
||||
// { "did:...": amount } entry for each contact
|
||||
givenToMeConfirmed: Record<string, number> = {};
|
||||
// { "did:...": amount } entry for each contact
|
||||
givenToMeUnconfirmed: Record<string, number> = {};
|
||||
hourDescriptionInput = "";
|
||||
hourInput = "0";
|
||||
showGiveNumbers = false;
|
||||
showGiveTotals = true;
|
||||
showGiveConfirmed = true;
|
||||
|
||||
// 'created' hook runs when the Vue instance is first created
|
||||
async created() {
|
||||
await db.open();
|
||||
const settings = await db.settings.get(MASTER_SETTINGS_KEY);
|
||||
this.activeDid = settings?.activeDid || "";
|
||||
|
||||
this.showGiveNumbers = !!settings?.showContactGivesInline;
|
||||
if (this.showGiveNumbers) {
|
||||
this.loadGives();
|
||||
}
|
||||
const allContacts = await db.contacts.toArray();
|
||||
this.contacts = R.sort(
|
||||
(a: Contact, b) => (a.name || "").localeCompare(b.name || ""),
|
||||
allContacts
|
||||
);
|
||||
}
|
||||
|
||||
async loadGives() {
|
||||
await accountsDB.open();
|
||||
const accounts = await accountsDB.accounts.toArray();
|
||||
const account = R.find((acc) => acc.did === this.activeDid, accounts);
|
||||
const identity = JSON.parse(account?.identity || "undefined");
|
||||
|
||||
if (!identity) {
|
||||
console.error(
|
||||
"Attempted to load Give records with no identity available."
|
||||
);
|
||||
return;
|
||||
}
|
||||
|
||||
const endorserApiServer = AppString.DEFAULT_ENDORSER_API_SERVER;
|
||||
|
||||
// load all the time I have given
|
||||
try {
|
||||
const url =
|
||||
endorserApiServer +
|
||||
"/api/v2/report/gives?agentDid=" +
|
||||
encodeURIComponent(identity.did);
|
||||
const token = await accessToken(identity);
|
||||
const headers = {
|
||||
"Content-Type": "application/json",
|
||||
Authorization: "Bearer " + token,
|
||||
};
|
||||
const resp = await this.axios.get(url, { headers });
|
||||
console.log("All gifts you've given:", resp.data);
|
||||
if (resp.status === 200) {
|
||||
const contactDescriptions: Record<string, string> = {};
|
||||
const contactConfirmed: Record<string, number> = {};
|
||||
const contactUnconfirmed: Record<string, number> = {};
|
||||
const allData: Array<GiveServerRecord> = resp.data.data;
|
||||
for (const give of allData) {
|
||||
const recipDid: string = give.recipientDid;
|
||||
if (recipDid && give.unit == "HUR") {
|
||||
if (give.amountConfirmed) {
|
||||
const prevAmount = contactConfirmed[recipDid] || 0;
|
||||
contactConfirmed[recipDid] = prevAmount + give.amount;
|
||||
} else {
|
||||
const prevAmount = contactUnconfirmed[recipDid] || 0;
|
||||
contactUnconfirmed[recipDid] = prevAmount + give.amount;
|
||||
}
|
||||
if (!contactDescriptions[recipDid] && give.description) {
|
||||
// Since many make the tooltip too big, we'll just use the latest.
|
||||
contactDescriptions[recipDid] = give.description;
|
||||
}
|
||||
}
|
||||
}
|
||||
this.givenByMeDescriptions = contactDescriptions;
|
||||
this.givenByMeConfirmed = contactConfirmed;
|
||||
this.givenByMeUnconfirmed = contactUnconfirmed;
|
||||
} else {
|
||||
console.log(
|
||||
"Got bad response status & data of",
|
||||
resp.status,
|
||||
resp.data
|
||||
);
|
||||
this.alertTitle = "Error With Server";
|
||||
this.alertMessage =
|
||||
"Got an error retrieving your given time from the server.";
|
||||
this.isAlertVisible = true;
|
||||
}
|
||||
} catch (error) {
|
||||
this.alertTitle = "Error With Server";
|
||||
this.alertMessage = error as string;
|
||||
this.isAlertVisible = true;
|
||||
}
|
||||
|
||||
// load all the time I have received
|
||||
try {
|
||||
const url =
|
||||
endorserApiServer +
|
||||
"/api/v2/report/gives?recipientDid=" +
|
||||
encodeURIComponent(identity.did);
|
||||
const token = await accessToken(identity);
|
||||
const headers = {
|
||||
"Content-Type": "application/json",
|
||||
Authorization: "Bearer " + token,
|
||||
};
|
||||
const resp = await this.axios.get(url, { headers });
|
||||
console.log("All gifts you've recieved:", resp.data);
|
||||
if (resp.status === 200) {
|
||||
const contactDescriptions: Record<string, string> = {};
|
||||
const contactConfirmed: Record<string, number> = {};
|
||||
const contactUnconfirmed: Record<string, number> = {};
|
||||
const allData: Array<GiveServerRecord> = resp.data.data;
|
||||
for (const give of allData) {
|
||||
if (give.unit == "HUR") {
|
||||
if (give.amountConfirmed) {
|
||||
const prevAmount = contactConfirmed[give.agentDid] || 0;
|
||||
contactConfirmed[give.agentDid] = prevAmount + give.amount;
|
||||
} else {
|
||||
const prevAmount = contactUnconfirmed[give.agentDid] || 0;
|
||||
contactUnconfirmed[give.agentDid] = prevAmount + give.amount;
|
||||
}
|
||||
if (!contactDescriptions[give.agentDid] && give.description) {
|
||||
// Since many make the tooltip too big, we'll just use the latest.
|
||||
contactDescriptions[give.agentDid] = give.description;
|
||||
}
|
||||
}
|
||||
}
|
||||
//console.log("Done retrieving receipts", contactConfirmed);
|
||||
this.givenToMeDescriptions = contactDescriptions;
|
||||
this.givenToMeConfirmed = contactConfirmed;
|
||||
this.givenToMeUnconfirmed = contactUnconfirmed;
|
||||
} else {
|
||||
console.log(
|
||||
"Got bad response status & data of",
|
||||
resp.status,
|
||||
resp.data
|
||||
);
|
||||
this.alertTitle = "Error With Server";
|
||||
this.alertMessage =
|
||||
"Got an error retrieving your received time from the server.";
|
||||
this.isAlertVisible = true;
|
||||
}
|
||||
} catch (error) {
|
||||
this.alertTitle = "Error With Server";
|
||||
this.alertMessage = error as string;
|
||||
this.isAlertVisible = true;
|
||||
}
|
||||
}
|
||||
|
||||
async onClickNewContact(): Promise<void> {
|
||||
let did = this.contactInput;
|
||||
let name, publicKeyBase64;
|
||||
const commaPos1 = this.contactInput.indexOf(",");
|
||||
if (commaPos1 > -1) {
|
||||
did = this.contactInput.substring(0, commaPos1).trim();
|
||||
name = this.contactInput.substring(commaPos1 + 1).trim();
|
||||
const commaPos2 = this.contactInput.indexOf(",", commaPos1 + 1);
|
||||
if (commaPos2 > -1) {
|
||||
name = this.contactInput.substring(commaPos1 + 1, commaPos2).trim();
|
||||
publicKeyBase64 = this.contactInput.substring(commaPos2 + 1).trim();
|
||||
}
|
||||
}
|
||||
// help with potential mistakes while this sharing requires copy-and-paste
|
||||
if (publicKeyBase64 && /^[0-9A-Fa-f]{66}$/i.test(publicKeyBase64)) {
|
||||
// it must be all hex (compressed public key), so convert
|
||||
publicKeyBase64 = Buffer.from(publicKeyBase64, "hex").toString("base64");
|
||||
}
|
||||
const newContact = { did, name, publicKeyBase64 };
|
||||
await db.contacts.add(newContact);
|
||||
const allContacts = this.contacts.concat([newContact]);
|
||||
this.contacts = R.sort(
|
||||
(a: Contact, b) => (a.name || "").localeCompare(b.name || ""),
|
||||
allContacts
|
||||
);
|
||||
}
|
||||
|
||||
async deleteContact(contact: Contact) {
|
||||
if (
|
||||
confirm(
|
||||
"Are you sure you want to delete " +
|
||||
this.nameForDid(this.contacts, contact.did) +
|
||||
" with DID " +
|
||||
contact.did +
|
||||
" ?"
|
||||
)
|
||||
) {
|
||||
await db.open();
|
||||
await db.contacts.delete(contact.did);
|
||||
this.contacts = R.without([contact], this.contacts);
|
||||
}
|
||||
}
|
||||
|
||||
async register(contact: Contact) {
|
||||
if (
|
||||
confirm(
|
||||
"Are you sure you want to use one of your registrations for " +
|
||||
this.nameForDid(this.contacts, contact.did) +
|
||||
"?"
|
||||
)
|
||||
) {
|
||||
await accountsDB.open();
|
||||
const accounts = await accountsDB.accounts.toArray();
|
||||
const account = R.find((acc) => acc.did === this.activeDid, accounts);
|
||||
const identity = JSON.parse(account?.identity || "undefined");
|
||||
|
||||
// Make a claim
|
||||
const vcClaim: RegisterVerifiableCredential = {
|
||||
"@context": "https://schema.org",
|
||||
"@type": "RegisterAction",
|
||||
agent: { identifier: identity.did },
|
||||
object: SERVICE_ID,
|
||||
recipient: { identifier: contact.did },
|
||||
};
|
||||
// Make a payload for the claim
|
||||
const vcPayload = {
|
||||
vc: {
|
||||
"@context": ["https://www.w3.org/2018/credentials/v1"],
|
||||
type: ["VerifiableCredential"],
|
||||
credentialSubject: vcClaim,
|
||||
},
|
||||
};
|
||||
// Create a signature using private key of identity
|
||||
if (identity.keys[0].privateKeyHex !== null) {
|
||||
// eslint-disable-next-line @typescript-eslint/no-non-null-assertion
|
||||
const privateKeyHex: string = identity.keys[0].privateKeyHex!;
|
||||
const signer = await SimpleSigner(privateKeyHex);
|
||||
const alg = undefined;
|
||||
// Create a JWT for the request
|
||||
const vcJwt: string = await didJwt.createJWT(vcPayload, {
|
||||
alg: alg,
|
||||
issuer: identity.did,
|
||||
signer: signer,
|
||||
});
|
||||
|
||||
// Make the xhr request payload
|
||||
const payload = JSON.stringify({ jwtEncoded: vcJwt });
|
||||
const endorserApiServer = AppString.DEFAULT_ENDORSER_API_SERVER;
|
||||
const url = endorserApiServer + "/api/v2/claim";
|
||||
const token = await accessToken(identity);
|
||||
const headers = {
|
||||
"Content-Type": "application/json",
|
||||
Authorization: "Bearer " + token,
|
||||
};
|
||||
|
||||
try {
|
||||
const resp = await this.axios.post(url, payload, { headers });
|
||||
//console.log("Got resp data:", resp.data);
|
||||
if (resp.data?.success?.handleId) {
|
||||
contact.registered = true;
|
||||
db.contacts.update(contact.did, { registered: true });
|
||||
|
||||
this.alertTitle = "Registration Success";
|
||||
this.alertMessage = contact.name + " has been registered.";
|
||||
this.isAlertVisible = true;
|
||||
}
|
||||
} catch (error) {
|
||||
let userMessage = "There was an error. See logs for more info.";
|
||||
const serverError = error as AxiosError;
|
||||
if (serverError) {
|
||||
if (serverError.message) {
|
||||
userMessage = serverError.message; // Info for the user
|
||||
} else {
|
||||
userMessage = JSON.stringify(serverError.toJSON());
|
||||
}
|
||||
} else {
|
||||
userMessage = error as string;
|
||||
}
|
||||
// Now set that error for the user to see.
|
||||
this.alertTitle = "Error With Server";
|
||||
this.alertMessage = userMessage;
|
||||
this.isAlertVisible = true;
|
||||
}
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
async setVisibility(contact: Contact, visibility: boolean) {
|
||||
const endorserApiServer = AppString.DEFAULT_ENDORSER_API_SERVER;
|
||||
const url =
|
||||
endorserApiServer +
|
||||
"/api/report/" +
|
||||
(visibility ? "canSeeMe" : "cannotSeeMe");
|
||||
await accountsDB.open();
|
||||
const accounts = await accountsDB.accounts.toArray();
|
||||
const account = R.find((acc) => acc.did === this.activeDid, accounts);
|
||||
const identity = JSON.parse(account?.identity || "undefined");
|
||||
|
||||
const token = await accessToken(identity);
|
||||
const headers = {
|
||||
"Content-Type": "application/json",
|
||||
Authorization: "Bearer " + token,
|
||||
};
|
||||
const payload = JSON.stringify({ did: contact.did });
|
||||
|
||||
try {
|
||||
const resp = await this.axios.post(url, payload, { headers });
|
||||
if (resp.status === 200) {
|
||||
contact.seesMe = visibility;
|
||||
db.contacts.update(contact.did, { seesMe: visibility });
|
||||
} else {
|
||||
this.alertTitle = "Error With Server";
|
||||
console.log("Bad response setting visibility: ", resp.data);
|
||||
if (resp.data.error?.message) {
|
||||
this.alertMessage = resp.data.error?.message;
|
||||
} else {
|
||||
this.alertMessage = "Bad server response of " + resp.status;
|
||||
}
|
||||
this.isAlertVisible = true;
|
||||
}
|
||||
} catch (err) {
|
||||
this.alertTitle = "Error With Server";
|
||||
this.alertMessage = err as string;
|
||||
this.isAlertVisible = true;
|
||||
}
|
||||
}
|
||||
|
||||
async checkVisibility(contact: Contact) {
|
||||
const endorserApiServer = AppString.DEFAULT_ENDORSER_API_SERVER;
|
||||
const url =
|
||||
endorserApiServer +
|
||||
"/api/report/canDidExplicitlySeeMe?did=" +
|
||||
encodeURIComponent(contact.did);
|
||||
await accountsDB.open();
|
||||
const accounts = await accountsDB.accounts.toArray();
|
||||
const account = R.find((acc) => acc.did === this.activeDid, accounts);
|
||||
const identity = JSON.parse(account?.identity || "undefined");
|
||||
|
||||
const token = await accessToken(identity);
|
||||
const headers = {
|
||||
"Content-Type": "application/json",
|
||||
Authorization: "Bearer " + token,
|
||||
};
|
||||
|
||||
try {
|
||||
const resp = await this.axios.get(url, { headers });
|
||||
if (resp.status === 200) {
|
||||
const visibility = resp.data;
|
||||
contact.seesMe = visibility;
|
||||
db.contacts.update(contact.did, { seesMe: visibility });
|
||||
|
||||
this.alertTitle = "Refreshed";
|
||||
this.alertMessage =
|
||||
this.nameForContact(contact, true) +
|
||||
" can " +
|
||||
(visibility ? "" : "not ") +
|
||||
"see your activity.";
|
||||
this.isAlertVisible = true;
|
||||
} else {
|
||||
this.alertTitle = "Error With Server";
|
||||
if (resp.data.error?.message) {
|
||||
this.alertMessage = resp.data.error?.message;
|
||||
} else {
|
||||
this.alertMessage = "Bad server response of " + resp.status;
|
||||
}
|
||||
this.isAlertVisible = true;
|
||||
}
|
||||
} catch (err) {
|
||||
this.alertTitle = "Error With Server";
|
||||
this.alertMessage = err as string;
|
||||
this.isAlertVisible = true;
|
||||
}
|
||||
}
|
||||
|
||||
// from https://stackoverflow.com/a/175787/845494
|
||||
//
|
||||
private isNumeric(str: string): boolean {
|
||||
return !isNaN(+str);
|
||||
}
|
||||
|
||||
private nameForDid(contacts: Array<Contact>, did: string): string {
|
||||
const contact = R.find((con) => con.did == did, contacts);
|
||||
return this.nameForContact(contact);
|
||||
}
|
||||
|
||||
private nameForContact(contact?: Contact, capitalize?: boolean): string {
|
||||
return contact?.name || (capitalize ? "T" : "t") + "this unnamed user";
|
||||
}
|
||||
|
||||
async onClickAddGive(fromDid: string, toDid: string): Promise<void> {
|
||||
await accountsDB.open();
|
||||
const accounts = await accountsDB.accounts.toArray();
|
||||
const account = R.find((acc) => acc.did === this.activeDid, accounts);
|
||||
const identity = JSON.parse(account?.identity || "undefined");
|
||||
|
||||
// if they have unconfirmed amounts, ask to confirm those first
|
||||
if (toDid == identity?.did && this.givenToMeUnconfirmed[fromDid] > 0) {
|
||||
if (
|
||||
confirm(
|
||||
"There are " +
|
||||
this.givenToMeUnconfirmed[fromDid] +
|
||||
" unconfirmed hours from them." +
|
||||
" Would you like to confirm some of those hours?"
|
||||
)
|
||||
) {
|
||||
this.$router.push({
|
||||
name: "contact-amounts",
|
||||
query: { contactDid: fromDid },
|
||||
});
|
||||
}
|
||||
}
|
||||
if (!this.isNumeric(this.hourInput)) {
|
||||
this.alertTitle = "Input Error";
|
||||
this.alertMessage =
|
||||
"This is not a valid number of hours: " + this.hourInput;
|
||||
this.isAlertVisible = true;
|
||||
} else if (!parseFloat(this.hourInput)) {
|
||||
this.alertTitle = "Input Error";
|
||||
this.alertMessage = "Giving 0 hours does nothing.";
|
||||
this.isAlertVisible = true;
|
||||
} else if (!identity) {
|
||||
this.alertTitle = "Status Error";
|
||||
this.alertMessage = "No identity is available.";
|
||||
this.isAlertVisible = true;
|
||||
} else {
|
||||
// ask to confirm amount
|
||||
let toFrom;
|
||||
if (fromDid == identity?.did) {
|
||||
toFrom = "from you to " + this.nameForDid(this.contacts, toDid);
|
||||
} else {
|
||||
toFrom = "from " + this.nameForDid(this.contacts, fromDid) + " to you";
|
||||
}
|
||||
let description;
|
||||
if (this.hourDescriptionInput) {
|
||||
description = " with description '" + this.hourDescriptionInput + "'";
|
||||
} else {
|
||||
description = " with no description";
|
||||
}
|
||||
if (
|
||||
confirm(
|
||||
"Are you sure you want to record " +
|
||||
this.hourInput +
|
||||
" hours " +
|
||||
toFrom +
|
||||
description +
|
||||
"?"
|
||||
)
|
||||
) {
|
||||
this.createAndSubmitGive(
|
||||
identity,
|
||||
fromDid,
|
||||
toDid,
|
||||
parseFloat(this.hourInput),
|
||||
this.hourDescriptionInput
|
||||
);
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
private async createAndSubmitGive(
|
||||
identity: IIdentifier,
|
||||
fromDid: string,
|
||||
toDid: string,
|
||||
amount: number,
|
||||
description: string
|
||||
): Promise<void> {
|
||||
// Make a claim
|
||||
const vcClaim: GiveVerifiableCredential = {
|
||||
"@context": "https://schema.org",
|
||||
"@type": "GiveAction",
|
||||
agent: { identifier: fromDid },
|
||||
object: { amountOfThisGood: amount, unitCode: "HUR" },
|
||||
recipient: { identifier: toDid },
|
||||
};
|
||||
if (description) {
|
||||
vcClaim.description = description;
|
||||
}
|
||||
// Make a payload for the claim
|
||||
const vcPayload = {
|
||||
vc: {
|
||||
"@context": ["https://www.w3.org/2018/credentials/v1"],
|
||||
type: ["VerifiableCredential"],
|
||||
credentialSubject: vcClaim,
|
||||
},
|
||||
};
|
||||
// Create a signature using private key of identity
|
||||
if (identity.keys[0].privateKeyHex !== null) {
|
||||
// eslint-disable-next-line @typescript-eslint/no-non-null-assertion
|
||||
const privateKeyHex: string = identity.keys[0].privateKeyHex!;
|
||||
const signer = await SimpleSigner(privateKeyHex);
|
||||
const alg = undefined;
|
||||
// Create a JWT for the request
|
||||
const vcJwt: string = await didJwt.createJWT(vcPayload, {
|
||||
alg: alg,
|
||||
issuer: identity.did,
|
||||
signer: signer,
|
||||
});
|
||||
|
||||
// Make the xhr request payload
|
||||
|
||||
const payload = JSON.stringify({ jwtEncoded: vcJwt });
|
||||
const endorserApiServer = AppString.DEFAULT_ENDORSER_API_SERVER;
|
||||
const url = endorserApiServer + "/api/v2/claim";
|
||||
const token = await accessToken(identity);
|
||||
const headers = {
|
||||
"Content-Type": "application/json",
|
||||
Authorization: "Bearer " + token,
|
||||
};
|
||||
|
||||
try {
|
||||
const resp = await this.axios.post(url, payload, { headers });
|
||||
//console.log("Got resp data:", resp.data);
|
||||
if (resp.data?.success?.handleId) {
|
||||
this.alertTitle = "Done";
|
||||
this.alertMessage = "Successfully logged time to the server.";
|
||||
this.isAlertVisible = true;
|
||||
if (fromDid === identity.did) {
|
||||
const newList = R.clone(this.givenByMeUnconfirmed);
|
||||
newList[toDid] = (newList[toDid] || 0) + amount;
|
||||
this.givenByMeUnconfirmed = newList;
|
||||
} else {
|
||||
const newList = R.clone(this.givenToMeConfirmed);
|
||||
newList[fromDid] = (newList[fromDid] || 0) + amount;
|
||||
this.givenToMeConfirmed = newList;
|
||||
}
|
||||
}
|
||||
} catch (error) {
|
||||
let userMessage = "There was an error. See logs for more info.";
|
||||
const serverError = error as AxiosError;
|
||||
if (serverError) {
|
||||
if (serverError.message) {
|
||||
userMessage = serverError.message; // Info for the user
|
||||
} else {
|
||||
userMessage = JSON.stringify(serverError.toJSON());
|
||||
}
|
||||
} else {
|
||||
userMessage = error as string;
|
||||
}
|
||||
// Now set that error for the user to see.
|
||||
this.alertTitle = "Error With Server";
|
||||
this.alertMessage = userMessage;
|
||||
this.isAlertVisible = true;
|
||||
}
|
||||
}
|
||||
}
|
||||
|
||||
public toggleShowGiveTotals() {
|
||||
if (this.showGiveTotals) {
|
||||
this.showGiveTotals = false;
|
||||
this.showGiveConfirmed = true;
|
||||
} else if (this.showGiveConfirmed) {
|
||||
this.showGiveTotals = false; // stays the same
|
||||
this.showGiveConfirmed = false;
|
||||
} else {
|
||||
this.showGiveTotals = true;
|
||||
this.showGiveConfirmed = true;
|
||||
}
|
||||
}
|
||||
|
||||
alertTitle = "";
|
||||
alertMessage = "";
|
||||
isAlertVisible = false;
|
||||
|
||||
public onClickClose() {
|
||||
this.isAlertVisible = false;
|
||||
this.alertTitle = "";
|
||||
this.alertMessage = "";
|
||||
}
|
||||
|
||||
public computedAlertClassNames() {
|
||||
return {
|
||||
hidden: !this.isAlertVisible,
|
||||
"dismissable-alert": true,
|
||||
"bg-slate-100": true,
|
||||
"p-5": true,
|
||||
rounded: true,
|
||||
"drop-shadow-lg": true,
|
||||
fixed: true,
|
||||
"top-3": true,
|
||||
"inset-x-3": true,
|
||||
"transition-transform": true,
|
||||
"ease-in": true,
|
||||
"duration-300": true,
|
||||
};
|
||||
}
|
||||
|
||||
public showGiveAmountsClassNames() {
|
||||
return {
|
||||
"bg-slate-500": this.showGiveTotals,
|
||||
"bg-green-600": !this.showGiveTotals && this.showGiveConfirmed,
|
||||
"bg-yellow-600": !this.showGiveTotals && !this.showGiveConfirmed,
|
||||
};
|
||||
}
|
||||
}
|
||||
</script>
|
||||
|
||||
<style>
|
||||
/* Tooltip from https://www.w3schools.com/css/css_tooltip.asp */
|
||||
/* Tooltip container */
|
||||
.tooltip {
|
||||
position: relative;
|
||||
display: inline-block;
|
||||
border-bottom: 1px dotted black; /* If you want dots under the hoverable text */
|
||||
}
|
||||
|
||||
/* Tooltip text */
|
||||
.tooltip .tooltiptext {
|
||||
visibility: hidden;
|
||||
width: 200px;
|
||||
background-color: black;
|
||||
color: #fff;
|
||||
text-align: center;
|
||||
padding: 5px 0;
|
||||
border-radius: 6px;
|
||||
|
||||
position: absolute;
|
||||
z-index: 1;
|
||||
}
|
||||
/* How do we share with the above so code isn't duplicated? */
|
||||
.tooltip .tooltiptext-left {
|
||||
visibility: hidden;
|
||||
width: 200px;
|
||||
background-color: black;
|
||||
color: #fff;
|
||||
text-align: center;
|
||||
padding: 5px 0;
|
||||
border-radius: 6px;
|
||||
|
||||
position: absolute;
|
||||
z-index: 1;
|
||||
|
||||
bottom: 0%;
|
||||
right: 105%;
|
||||
margin-left: -60px;
|
||||
}
|
||||
|
||||
/* Show the tooltip text when you mouse over the tooltip container */
|
||||
.tooltip:hover .tooltiptext {
|
||||
visibility: visible;
|
||||
}
|
||||
.tooltip:hover .tooltiptext-left {
|
||||
visibility: visible;
|
||||
}
|
||||
</style>
|
||||
@@ -1,6 +1,6 @@
|
||||
<template>
|
||||
<!-- QUICK NAV -->
|
||||
<nav id="QuickNav" class="fixed bottom-0 left-0 right-0 bg-slate-200 z-50">
|
||||
<nav id="QuickNav" class="fixed bottom-0 left-0 right-0 bg-slate-200">
|
||||
<ul class="flex text-2xl p-2 gap-2">
|
||||
<!-- Home Feed -->
|
||||
<li class="basis-1/5 rounded-md text-slate-500">
|
||||
@@ -24,12 +24,10 @@
|
||||
><fa icon="folder-open" class="fa-fw"></fa
|
||||
></router-link>
|
||||
</li>
|
||||
<!-- Contacts -->
|
||||
<!-- Commitments -->
|
||||
<li class="basis-1/5 rounded-md text-slate-500">
|
||||
<router-link
|
||||
:to="{ name: 'contacts' }"
|
||||
class="block text-center py-3 px-1"
|
||||
><fa icon="users" class="fa-fw"></fa
|
||||
<router-link :to="{ name: '' }" class="block text-center py-3 px-1"
|
||||
><fa icon="hand" class="fa-fw"></fa
|
||||
></router-link>
|
||||
</li>
|
||||
<!-- Profile -->
|
||||
|
||||
@@ -1,159 +0,0 @@
|
||||
<template>
|
||||
<!-- QUICK NAV -->
|
||||
<nav id="QuickNav" class="fixed bottom-0 left-0 right-0 bg-slate-200 z-50">
|
||||
<ul class="flex text-2xl p-2 gap-2">
|
||||
<!-- Home Feed -->
|
||||
<li class="basis-1/5 rounded-md text-slate-500">
|
||||
<router-link :to="{ name: 'home' }" class="block text-center py-3 px-1">
|
||||
<fa icon="house-chimney" class="fa-fw"></fa>
|
||||
</router-link>
|
||||
</li>
|
||||
<!-- Search -->
|
||||
<li class="basis-1/5 rounded-md text-slate-500">
|
||||
<router-link
|
||||
:to="{ name: 'discover' }"
|
||||
class="block text-center py-3 px-1"
|
||||
>
|
||||
<fa icon="magnifying-glass" class="fa-fw"></fa>
|
||||
</router-link>
|
||||
</li>
|
||||
<!-- Projects -->
|
||||
<li class="basis-1/5 rounded-md text-slate-500">
|
||||
<router-link
|
||||
:to="{ name: 'projects' }"
|
||||
class="block text-center py-3 px-1"
|
||||
>
|
||||
<fa icon="folder-open" class="fa-fw"></fa>
|
||||
</router-link>
|
||||
</li>
|
||||
<!-- Contacts -->
|
||||
<li class="basis-1/5 rounded-md text-slate-500">
|
||||
<router-link
|
||||
:to="{ name: 'contacts' }"
|
||||
class="block text-center py-3 px-1"
|
||||
>
|
||||
<fa icon="users" class="fa-fw"></fa>
|
||||
</router-link>
|
||||
</li>
|
||||
<!-- Profile -->
|
||||
<li class="basis-1/5 rounded-md text-slate-400">
|
||||
<router-link
|
||||
:to="{ name: 'account' }"
|
||||
class="block text-center py-3 px-1"
|
||||
>
|
||||
<fa icon="circle-user" class="fa-fw"></fa>
|
||||
</router-link>
|
||||
</li>
|
||||
</ul>
|
||||
</nav>
|
||||
|
||||
<!-- CONTENT -->
|
||||
<section id="Content" class="p-4 pb-24">
|
||||
<!-- Heading -->
|
||||
<h1 id="ViewHeading" class="text-4xl text-center font-light pt-4 mb-8">
|
||||
Help
|
||||
</h1>
|
||||
|
||||
<div>
|
||||
<h2 class="text-xl font-semibold py-4">Introduction</h2>
|
||||
<p>
|
||||
This app is a window into data that you and your friends own, focused on
|
||||
gifts and collaboration.
|
||||
</p>
|
||||
|
||||
<h2 class="text-xl font-semibold py-4">How do I backup all my data?</h2>
|
||||
<p>
|
||||
There are two parts to backup your data: the identifier secrets and the
|
||||
other data such as settings, contacts, etc.
|
||||
</p>
|
||||
|
||||
<div class="px-4">
|
||||
<h2 class="text-xl font-semibold">
|
||||
How do I backup my identifier (secret) data?
|
||||
</h2>
|
||||
<ul class="list-disc list-inside">
|
||||
<li>
|
||||
Go to your Identity <fa icon="circle-user" class="fa-fw" /> page.
|
||||
</li>
|
||||
<li>
|
||||
Click on "Backup Identifier Seed" and follow the instructions.
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<h2 class="text-xl font-semibold">
|
||||
How do I backup my other (non-identifier-secret) data?
|
||||
</h2>
|
||||
<ul class="list-disc list-inside">
|
||||
<li>
|
||||
Go to your Identity <fa icon="circle-user" class="fa-fw" /> page.
|
||||
</li>
|
||||
<li>
|
||||
Click on "Download Settings...". That will save a file to your
|
||||
downloads folder. That is your backup, so put it someplace where you
|
||||
won't lose it.
|
||||
</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<h2 class="text-xl font-semibold py-4">How do I restore my data?</h2>
|
||||
<p>
|
||||
There are two parts to restore your data: the identity secrets and the
|
||||
other data such as settings, contacts, etc.
|
||||
</p>
|
||||
|
||||
<div class="px-4">
|
||||
<h2 class="text-xl font-semibold">
|
||||
How do I restore my identifier (secret) data?
|
||||
</h2>
|
||||
<ul class="list-disc list-inside">
|
||||
<li>
|
||||
You only have one identifier at a time. If you have an identifier on
|
||||
Your Identity <fa icon="circle-user" class="fa-fw" /> page, you'll
|
||||
need to clear it out;
|
||||
<a
|
||||
href="https://www.lifewire.com/how-to-clear-cache-2617980"
|
||||
class="text-blue-500"
|
||||
>
|
||||
here are some helpful instructions.
|
||||
</a>
|
||||
But beware! This will also clear out your settings and contact data,
|
||||
so be sure to back that up first.
|
||||
</li>
|
||||
<li>
|
||||
<router-link class="text-blue-500" to="/">
|
||||
Go to the start
|
||||
</router-link>
|
||||
and choose "Yes" to enter the identity you backed up.
|
||||
</li>
|
||||
</ul>
|
||||
|
||||
<h2 class="text-xl font-semibold">
|
||||
How do I restore my other (non-identifier-secret) data?
|
||||
</h2>
|
||||
<ul class="list-disc list-inside">
|
||||
<li>Make sure you have your backup file (above), then contact us.</li>
|
||||
</ul>
|
||||
</div>
|
||||
|
||||
<h2 class="text-xl font-semibold py-4">
|
||||
How do I get registered to make claims?
|
||||
</h2>
|
||||
<p>
|
||||
Contact a current user. They will be able to register you on their
|
||||
Contacts <fa icon="users" class="fa-fw" /> screen. Note that they have a
|
||||
limited number of registrations.
|
||||
</p>
|
||||
|
||||
<h2 class="text-xl font-semibold py-4">
|
||||
How do I add someone to my contacts?
|
||||
</h2>
|
||||
<p>
|
||||
Tell them to copy their ID, which typically starts with "did:ethr:...",
|
||||
and send it to you. Go to the Contacts
|
||||
<fa icon="users" class="fa-fw" /> 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.
|
||||
</p>
|
||||
</div>
|
||||
</section>
|
||||
</template>
|
||||
@@ -19,6 +19,7 @@
|
||||
</p>
|
||||
<input
|
||||
type="text"
|
||||
id="mnemonic"
|
||||
placeholder="Seed Phrase"
|
||||
class="block w-full rounded border border-slate-400 mb-4 px-3 py-2"
|
||||
v-model="mnemonic"
|
||||
@@ -26,6 +27,7 @@
|
||||
{{ mnemonic }}
|
||||
<div class="mt-8">
|
||||
<button
|
||||
id="import"
|
||||
@click="from_mnemonic()"
|
||||
class="block w-full text-center text-lg font-bold uppercase bg-blue-600 text-white px-2 py-3 rounded-md mb-2"
|
||||
>
|
||||
@@ -45,8 +47,8 @@
|
||||
<script lang="ts">
|
||||
import { Options, Vue } from "vue-class-component";
|
||||
import { deriveAddress, newIdentifier } from "../libs/crypto";
|
||||
import { accountsDB, db } from "@/db";
|
||||
import { MASTER_SETTINGS_KEY } from "@/db/tables/settings";
|
||||
import { db } from "@/db";
|
||||
import { useAppStore } from "@/store/app";
|
||||
|
||||
@Options({
|
||||
components: {},
|
||||
@@ -56,7 +58,7 @@ export default class ImportAccountView extends Vue {
|
||||
address = "";
|
||||
privateHex = "";
|
||||
publicHex = "";
|
||||
derivationPath = "";
|
||||
UPORT_ROOT_DERIVATION_PATH = "";
|
||||
|
||||
public onCancelClick() {
|
||||
this.$router.back();
|
||||
@@ -65,32 +67,33 @@ export default class ImportAccountView extends Vue {
|
||||
public async from_mnemonic() {
|
||||
const mne: string = this.mnemonic.trim().toLowerCase();
|
||||
if (this.mnemonic.trim().length > 0) {
|
||||
[this.address, this.privateHex, this.publicHex, this.derivationPath] =
|
||||
deriveAddress(mne);
|
||||
[
|
||||
this.address,
|
||||
this.privateHex,
|
||||
this.publicHex,
|
||||
this.UPORT_ROOT_DERIVATION_PATH,
|
||||
] = deriveAddress(mne);
|
||||
|
||||
const newId = newIdentifier(
|
||||
this.address,
|
||||
this.publicHex,
|
||||
this.privateHex,
|
||||
this.derivationPath
|
||||
this.UPORT_ROOT_DERIVATION_PATH
|
||||
);
|
||||
|
||||
try {
|
||||
await accountsDB.open();
|
||||
await accountsDB.accounts.add({
|
||||
dateCreated: new Date().toISOString(),
|
||||
derivationPath: this.derivationPath,
|
||||
did: newId.did,
|
||||
identity: JSON.stringify(newId),
|
||||
mnemonic: mne,
|
||||
publicKeyHex: newId.keys[0].publicKeyHex,
|
||||
});
|
||||
|
||||
// record that as the active DID
|
||||
await db.open();
|
||||
db.settings.update(MASTER_SETTINGS_KEY, {
|
||||
activeDid: newId.did,
|
||||
});
|
||||
const num_accounts = await db.accounts.count();
|
||||
if (num_accounts === 0) {
|
||||
console.log("...");
|
||||
await db.accounts.add({
|
||||
publicKey: newId.keys[0].publicKeyHex,
|
||||
mnemonic: mne,
|
||||
identity: JSON.stringify(newId),
|
||||
dateCreated: new Date().getTime(),
|
||||
});
|
||||
}
|
||||
useAppStore().setCondition("registered");
|
||||
this.$router.push({ name: "account" });
|
||||
} catch (err) {
|
||||
console.log("Error!");
|
||||
|
||||
@@ -50,8 +50,6 @@
|
||||
|
||||
<script lang="ts">
|
||||
import { Options, Vue } from "vue-class-component";
|
||||
import { db } from "@/db";
|
||||
import { MASTER_SETTINGS_KEY } from "@/db/tables/settings";
|
||||
|
||||
@Options({
|
||||
components: {},
|
||||
@@ -66,22 +64,13 @@ export default class NewEditAccountView extends Vue {
|
||||
? "--"
|
||||
: localStorage.getItem("lastName");
|
||||
|
||||
// 'created' hook runs when the Vue instance is first created
|
||||
async created() {
|
||||
await db.open();
|
||||
const settings = await db.settings.get(MASTER_SETTINGS_KEY);
|
||||
this.firstName = settings?.firstName || "";
|
||||
this.lastName = settings?.lastName || "";
|
||||
}
|
||||
|
||||
onClickSaveChanges() {
|
||||
db.settings.update(MASTER_SETTINGS_KEY, {
|
||||
firstName: this.firstName,
|
||||
lastName: this.lastName,
|
||||
});
|
||||
localStorage.setItem("firstName", this.firstName as string);
|
||||
localStorage.setItem("lastName", this.lastName as string);
|
||||
this.$router.push({ name: "account" });
|
||||
const route = {
|
||||
name: "account",
|
||||
};
|
||||
this.$router.push(route);
|
||||
}
|
||||
|
||||
onClickCancel() {
|
||||
|
||||
@@ -22,6 +22,7 @@
|
||||
</div>
|
||||
|
||||
<input
|
||||
id="name"
|
||||
type="text"
|
||||
placeholder="Project Name"
|
||||
class="block w-full rounded border border-slate-400 mb-4 px-3 py-2"
|
||||
@@ -29,6 +30,7 @@
|
||||
/>
|
||||
|
||||
<textarea
|
||||
id="description"
|
||||
placeholder="Description"
|
||||
class="block w-full rounded border border-slate-400 mb-4 px-3 py-2"
|
||||
rows="5"
|
||||
@@ -68,7 +70,7 @@
|
||||
class="close-button bg-slate-200 w-8 leading-loose rounded-full absolute top-2 right-2"
|
||||
@click="onClickClose()"
|
||||
>
|
||||
<fa icon="xmark"></fa>
|
||||
<i class="fa-solid fa-xmark"></i>
|
||||
</button>
|
||||
<h4 class="font-bold pr-5">{{ alertTitle }}</h4>
|
||||
<p>{{ alertMessage }}</p>
|
||||
@@ -76,17 +78,14 @@
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { AxiosError } from "axios";
|
||||
import * as didJwt from "did-jwt";
|
||||
import * as R from "ramda";
|
||||
import { Options, Vue } from "vue-class-component";
|
||||
|
||||
import { AppString } from "@/constants/app";
|
||||
import { accountsDB, db } from "@/db";
|
||||
import { MASTER_SETTINGS_KEY } from "@/db/tables/settings";
|
||||
import { db } from "../db";
|
||||
import { accessToken, SimpleSigner } from "@/libs/crypto";
|
||||
import { useAppStore } from "@/store/app";
|
||||
import * as didJwt from "did-jwt";
|
||||
import { IIdentifier } from "@veramo/core";
|
||||
import { useAppStore } from "@/store/app";
|
||||
import { AxiosError } from "axios";
|
||||
|
||||
interface VerifiableCredential {
|
||||
"@context": string;
|
||||
@@ -100,7 +99,6 @@ interface VerifiableCredential {
|
||||
components: {},
|
||||
})
|
||||
export default class NewEditProjectView extends Vue {
|
||||
activeDid = "";
|
||||
projectName = "";
|
||||
description = "";
|
||||
errorMessage = "";
|
||||
@@ -111,21 +109,17 @@ export default class NewEditProjectView extends Vue {
|
||||
isHiddenSave = false;
|
||||
isHiddenSpinner = true;
|
||||
|
||||
// 'created' hook runs when the Vue instance is first created
|
||||
async created() {
|
||||
await db.open();
|
||||
const settings = await db.settings.get(MASTER_SETTINGS_KEY);
|
||||
this.activeDid = settings?.activeDid || "";
|
||||
|
||||
if (this.projectId) {
|
||||
await accountsDB.open();
|
||||
const num_accounts = await accountsDB.accounts.count();
|
||||
if (this.projectId === "") {
|
||||
console.log("This is a new project");
|
||||
} else {
|
||||
await db.open();
|
||||
const num_accounts = await db.accounts.count();
|
||||
if (num_accounts === 0) {
|
||||
console.log("Problem! Should have a profile!");
|
||||
} else {
|
||||
const accounts = await accountsDB.accounts.toArray();
|
||||
const account = R.find((acc) => acc.did === this.activeDid, accounts);
|
||||
const identity = JSON.parse(account?.identity || "undefined");
|
||||
const accounts = await db.accounts.toArray();
|
||||
const identity = JSON.parse(accounts[0].identity);
|
||||
this.LoadProject(identity);
|
||||
}
|
||||
}
|
||||
@@ -133,10 +127,8 @@ export default class NewEditProjectView extends Vue {
|
||||
|
||||
async LoadProject(identity: IIdentifier) {
|
||||
const endorserApiServer = AppString.DEFAULT_ENDORSER_API_SERVER;
|
||||
const url =
|
||||
endorserApiServer +
|
||||
"/api/claim/byHandle/" +
|
||||
encodeURIComponent(this.projectId);
|
||||
// eslint-disable-next-line prettier/prettier
|
||||
const url = endorserApiServer + "/api/claim/byHandle/" + encodeURIComponent(this.projectId);
|
||||
const token = await accessToken(identity);
|
||||
const headers = {
|
||||
"Content-Type": "application/json",
|
||||
@@ -170,6 +162,7 @@ export default class NewEditProjectView extends Vue {
|
||||
}
|
||||
// Make a payload for the claim
|
||||
const vcPayload = {
|
||||
sub: "PlanAction",
|
||||
vc: {
|
||||
"@context": ["https://www.w3.org/2018/credentials/v1"],
|
||||
type: ["VerifiableCredential"],
|
||||
@@ -177,8 +170,12 @@ export default class NewEditProjectView extends Vue {
|
||||
},
|
||||
};
|
||||
// create a signature using private key of identity
|
||||
if (identity.keys[0].privateKeyHex != null) {
|
||||
const privateKeyHex: string = identity.keys[0].privateKeyHex;
|
||||
if (
|
||||
identity.keys[0].privateKeyHex !== "undefined" &&
|
||||
identity.keys[0].privateKeyHex !== null
|
||||
) {
|
||||
// eslint-disable-next-line
|
||||
const privateKeyHex: string = identity.keys[0].privateKeyHex!;
|
||||
const signer = await SimpleSigner(privateKeyHex);
|
||||
const alg = undefined;
|
||||
// create a JWT for the request
|
||||
@@ -202,17 +199,11 @@ export default class NewEditProjectView extends Vue {
|
||||
try {
|
||||
const resp = await this.axios.post(url, payload, { headers });
|
||||
console.log("Got resp data:", resp.data);
|
||||
// handleId is new in server v release-1.6.0; remove fullIri when that
|
||||
// version shows up here: https://endorser.ch:3000/api-docs/
|
||||
if (resp.data?.success?.handleId || resp.data?.success?.fullIri) {
|
||||
if (resp.data?.success?.fullIri) {
|
||||
this.errorMessage = "";
|
||||
this.alertTitle = "";
|
||||
this.alertMessage = "";
|
||||
// handleId is new in server v release-1.6.0; remove fullIri when that
|
||||
// version shows up here: https://endorser.ch:3000/api-docs/
|
||||
useAppStore().setProjectId(
|
||||
resp.data.success.handleId || resp.data.success.fullIri
|
||||
);
|
||||
useAppStore().setProjectId(resp.data.success.fullIri);
|
||||
setTimeout(
|
||||
function (that: Vue) {
|
||||
const route = {
|
||||
@@ -258,14 +249,13 @@ export default class NewEditProjectView extends Vue {
|
||||
public async onSaveProjectClick() {
|
||||
this.isHiddenSave = true;
|
||||
this.isHiddenSpinner = false;
|
||||
await accountsDB.open();
|
||||
const num_accounts = await accountsDB.accounts.count();
|
||||
await db.open();
|
||||
const num_accounts = await db.accounts.count();
|
||||
if (num_accounts === 0) {
|
||||
console.log("Problem! Should have a profile!");
|
||||
} else {
|
||||
const accounts = await accountsDB.accounts.toArray();
|
||||
const account = R.find((acc) => acc.did === this.activeDid, accounts);
|
||||
const identity = JSON.parse(account?.identity || "undefined");
|
||||
const accounts = await db.accounts.toArray();
|
||||
const identity = JSON.parse(accounts[0].identity);
|
||||
this.SaveProject(identity);
|
||||
}
|
||||
}
|
||||
@@ -277,13 +267,13 @@ export default class NewEditProjectView extends Vue {
|
||||
isAlertVisible = false;
|
||||
public computedAlertClassNames() {
|
||||
return {
|
||||
hidden: !this.isAlertVisible,
|
||||
hidden: this.isAlertVisible,
|
||||
"dismissable-alert": true,
|
||||
"bg-slate-100": true,
|
||||
"p-5": true,
|
||||
rounded: true,
|
||||
"drop-shadow-lg": true,
|
||||
fixed: true,
|
||||
absolute: true,
|
||||
"top-3": true,
|
||||
"inset-x-3": true,
|
||||
"transition-transform": true,
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
<template>
|
||||
<!-- QUICK NAV -->
|
||||
<nav id="QuickNav" class="fixed bottom-0 left-0 right-0 bg-slate-200 z-50">
|
||||
<nav id="QuickNav" class="fixed bottom-0 left-0 right-0 bg-slate-200">
|
||||
<ul class="flex text-2xl p-2 gap-2">
|
||||
<!-- Home Feed -->
|
||||
<li class="basis-1/5 rounded-md text-slate-500">
|
||||
@@ -24,11 +24,9 @@
|
||||
><fa icon="folder-open" class="fa-fw"></fa
|
||||
></router-link>
|
||||
</li>
|
||||
<!-- Contacts -->
|
||||
<!-- Commitments -->
|
||||
<li class="basis-1/5 rounded-md text-slate-500">
|
||||
<router-link
|
||||
:to="{ name: 'contacts' }"
|
||||
class="block text-center py-3 px-1"
|
||||
<router-link :to="{ name: '' }" class="block text-center py-3 px-1"
|
||||
><fa icon="hand" class="fa-fw"></fa
|
||||
></router-link>
|
||||
</li>
|
||||
@@ -146,16 +144,13 @@
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import { AxiosError } from "axios";
|
||||
import * as moment from "moment";
|
||||
import * as R from "ramda";
|
||||
import { Options, Vue } from "vue-class-component";
|
||||
|
||||
import { AppString } from "@/constants/app";
|
||||
import { accountsDB, db } from "@/db";
|
||||
import { MASTER_SETTINGS_KEY } from "@/db/tables/settings";
|
||||
import { accessToken } from "@/libs/crypto";
|
||||
import { db } from "../db";
|
||||
import { IIdentifier } from "@veramo/core";
|
||||
import { AppString } from "@/constants/app";
|
||||
import * as moment from "moment";
|
||||
import { AxiosError } from "axios";
|
||||
|
||||
@Options({
|
||||
components: {},
|
||||
@@ -227,20 +222,14 @@ export default class ProjectViewView extends Vue {
|
||||
}
|
||||
}
|
||||
|
||||
// 'created' hook runs when the Vue instance is first created
|
||||
async created() {
|
||||
await db.open();
|
||||
const settings = await db.settings.get(MASTER_SETTINGS_KEY);
|
||||
const activeDid = settings?.activeDid || "";
|
||||
|
||||
await accountsDB.open();
|
||||
const num_accounts = await accountsDB.accounts.count();
|
||||
const num_accounts = await db.accounts.count();
|
||||
if (num_accounts === 0) {
|
||||
console.log("Problem! Should have a profile!");
|
||||
} else {
|
||||
const accounts = await accountsDB.accounts.toArray();
|
||||
const account = R.find((acc) => acc.did === activeDid, accounts);
|
||||
const identity = JSON.parse(account?.identity || "undefined");
|
||||
const accounts = await db.accounts.toArray();
|
||||
const identity = JSON.parse(accounts[0].identity);
|
||||
this.LoadProject(identity);
|
||||
}
|
||||
}
|
||||
|
||||
@@ -1,6 +1,6 @@
|
||||
<template>
|
||||
<!-- QUICK NAV -->
|
||||
<nav id="QuickNav" class="fixed bottom-0 left-0 right-0 bg-slate-200 z-50">
|
||||
<nav id="QuickNav" class="fixed bottom-0 left-0 right-0 bg-slate-200">
|
||||
<ul class="flex text-2xl p-2 gap-2">
|
||||
<!-- Home Feed -->
|
||||
<li class="basis-1/5 rounded-md text-slate-500">
|
||||
@@ -9,7 +9,7 @@
|
||||
></router-link>
|
||||
</li>
|
||||
<!-- Search -->
|
||||
<li class="basis-1/5 rounded-md text-slate-500">
|
||||
<li class="basis-1/5 rounded-md bg-slate-400 text-white">
|
||||
<router-link
|
||||
:to="{ name: 'discover' }"
|
||||
class="block text-center py-3 px-1"
|
||||
@@ -17,19 +17,17 @@
|
||||
></router-link>
|
||||
</li>
|
||||
<!-- Projects -->
|
||||
<li class="basis-1/5 rounded-md bg-slate-400 text-white">
|
||||
<li class="basis-1/5 rounded-md text-slate-500">
|
||||
<router-link
|
||||
:to="{ name: 'projects' }"
|
||||
class="block text-center py-3 px-1"
|
||||
><fa icon="folder-open" class="fa-fw"></fa
|
||||
></router-link>
|
||||
</li>
|
||||
<!-- Contacts -->
|
||||
<!-- Commitments -->
|
||||
<li class="basis-1/5 rounded-md text-slate-500">
|
||||
<router-link
|
||||
:to="{ name: 'contacts' }"
|
||||
class="block text-center py-3 px-1"
|
||||
><fa icon="users" class="fa-fw"></fa
|
||||
<router-link :to="{ name: '' }" class="block text-center py-3 px-1"
|
||||
><fa icon="hand" class="fa-fw"></fa
|
||||
></router-link>
|
||||
</li>
|
||||
<!-- Profile -->
|
||||
@@ -45,7 +43,7 @@
|
||||
<section id="Content" class="p-6 pb-24">
|
||||
<!-- Heading -->
|
||||
<h1 id="ViewHeading" class="text-4xl text-center font-light pt-4 mb-8">
|
||||
Your Plans
|
||||
My Plans
|
||||
</h1>
|
||||
|
||||
<!-- Quick Search -->
|
||||
@@ -101,14 +99,11 @@
|
||||
</template>
|
||||
|
||||
<script lang="ts">
|
||||
import * as R from "ramda";
|
||||
import { Options, Vue } from "vue-class-component";
|
||||
|
||||
import { AppString } from "@/constants/app";
|
||||
import { accountsDB, db } from "@/db";
|
||||
import { MASTER_SETTINGS_KEY } from "@/db/tables/settings";
|
||||
import { accessToken } from "@/libs/crypto";
|
||||
import { db } from "../db";
|
||||
import { IIdentifier } from "@veramo/core";
|
||||
import { AppString } from "@/constants/app";
|
||||
|
||||
@Options({
|
||||
components: {},
|
||||
@@ -144,9 +139,7 @@ export default class ProjectsView extends Vue {
|
||||
const data = {
|
||||
name: plan.name,
|
||||
description: plan.description,
|
||||
// handleId is new in server v release-1.6.0; remove fullIri when that
|
||||
// version shows up here: https://endorser.ch:3000/api-docs/
|
||||
handleId: plan.handleId || plan.fullIri,
|
||||
handleId: plan.fullIri,
|
||||
};
|
||||
this.projects.push(data);
|
||||
}
|
||||
@@ -156,20 +149,14 @@ export default class ProjectsView extends Vue {
|
||||
}
|
||||
}
|
||||
|
||||
// 'created' hook runs when the Vue instance is first created
|
||||
async created() {
|
||||
await db.open();
|
||||
const settings = await db.settings.get(MASTER_SETTINGS_KEY);
|
||||
const activeDid = settings?.activeDid || "";
|
||||
|
||||
await accountsDB.open();
|
||||
const num_accounts = await accountsDB.accounts.count();
|
||||
const num_accounts = await db.accounts.count();
|
||||
if (num_accounts === 0) {
|
||||
console.log("Problem! Should have a profile!");
|
||||
} else {
|
||||
const accounts = await accountsDB.accounts.toArray();
|
||||
const account = R.find((acc) => acc.did === activeDid, accounts);
|
||||
const identity = JSON.parse(account?.identity || "undefined");
|
||||
const accounts = await db.accounts.toArray();
|
||||
const identity = JSON.parse(accounts[0].identity);
|
||||
this.LoadProjects(identity);
|
||||
}
|
||||
}
|
||||
|
||||
Reference in New Issue
Block a user