Browse Source

Merge pull request 'Add settings table.' (#12) from db-set-and-bak into master

Reviewed-on: https://gitea.anomalistdesign.com/trent_larson/kick-starter-for-time-pwa/pulls/12
tweaks
trentlarson 2 years ago
parent
commit
fb44c8aa48
  1. 1
      .tool-versions
  2. 12
      README.md
  3. 4
      project.yaml
  4. 32
      src/db/index.ts
  5. 12
      src/db/tables/accounts.ts
  6. 12
      src/db/tables/contacts.ts
  7. 41
      src/db/tables/index.ts
  8. 6
      src/libs/crypto/index.ts
  9. 10
      src/router/index.ts
  10. 22
      src/store/account.ts
  11. 15
      src/store/app.ts
  12. 194
      src/views/AccountViewView.vue
  13. 2
      src/views/ContactsView.vue
  14. 22
      src/views/ImportAccountView.vue
  15. 21
      src/views/NewEditAccountView.vue

1
.tool-versions

@ -1 +0,0 @@
nodejs 16.18.0

12
README.md

@ -36,9 +36,9 @@ New users require registration. This can be done with a claim payload like this
const vcClaim = {
"@context": "https://schema.org",
"@type": "RegisterAction",
agent: { did: identity0.did },
agent: { identifier: identity0.did },
object: SERVICE_ID,
participant: { did: newIdentity.did },
participant: { identifier: newIdentity.did },
};
```
@ -62,6 +62,14 @@ 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

4
project.yaml

@ -12,7 +12,9 @@
- replace user-affecting console.logs with error messages (eg. catches)
- contacts v1:
- parse input correctly (with CSV lib and not commas)
- .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)
- commit screen

32
src/db/index.ts

@ -1,11 +1,19 @@
import BaseDexie, { Table } from "dexie";
import { encrypted, Encryption } from "@pvermeer/dexie-encrypted-addon";
import { accountsSchema, Account } from "./tables/accounts";
import { contactsSchema, Contact } from "./tables/contacts";
import {
Account,
AccountsSchema,
Contact,
ContactsSchema,
MASTER_SETTINGS,
Settings,
SettingsSchema,
} from "./tables";
type AllTables = {
accounts: Table<Account>;
contacts: Table<Contact>;
settings: Table<Settings>;
};
/**
@ -18,7 +26,13 @@ type AllTables = {
*/
type DexieTables = AllTables;
export type Dexie<T extends unknown = DexieTables> = BaseDexie & T;
export const db = new BaseDexie("kickStarter") as Dexie;
export const db = new BaseDexie("KickStart") as Dexie;
const AllSchemas = Object.assign(
{},
AccountsSchema,
ContactsSchema,
SettingsSchema
);
/**
* Needed to enable a special webpack setting to allow *await* below:
@ -32,7 +46,13 @@ const secret =
if (localStorage.getItem("secret") == null) {
localStorage.setItem("secret", secret);
}
console.log("DB encryption secretKey:", secret);
//console.log("IndexedDB Encryption Secret:", secret);
encrypted(db, { secretKey: secret });
db.version(1).stores(accountsSchema);
db.version(2).stores(contactsSchema);
db.version(1).stores(AllSchemas);
// 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 });
});

12
src/db/tables/accounts.ts

@ -1,12 +0,0 @@
export type Account = {
id?: number;
publicKey: string;
mnemonic: string;
identity: string;
dateCreated: number;
};
// mark encrypted field by starting with a $ character
export const accountsSchema = {
accounts: "++id, publicKey, $mnemonic, $identity, dateCreated",
};

12
src/db/tables/contacts.ts

@ -1,12 +0,0 @@
export interface Contact {
did: string;
name?: string;
publicKeyBase64?: string;
seesMe?: boolean;
registered?: boolean;
}
// mark encrypted field by starting with a $ character
export const contactsSchema = {
contacts: "++did, name, publicKeyBase64, seesMe, registered",
};

41
src/db/tables/index.ts

@ -0,0 +1,41 @@
export type Account = {
id?: number; // auto-generated by Dexie
dateCreated: string;
derivationPath: string;
identity: string;
publicKeyHex: string;
mnemonic: string;
};
// 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, $identity, $mnemonic, publicKeyHex",
};
export interface Contact {
did: string;
name?: string;
publicKeyBase64?: string;
seesMe?: boolean;
registered?: boolean;
}
export const ContactsSchema = {
contacts: "++did, name, publicKeyBase64, registered, seesMe",
};
// a singleton
export type Settings = {
id: number;
firstName?: string;
lastName?: string;
showContactGivesInline?: boolean;
};
export const SettingsSchema = {
settings: "id",
};
export const MASTER_SETTINGS = 1;

6
src/libs/crypto/index.ts

@ -65,7 +65,7 @@ export const deriveAddress = (
*
* @return {*} {string}
*/
export const createIdentifier = (): string => {
export const generateSeed = (): 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 uportTokenPayload = { exp: endEpoch, iat: nowEpoch, iss: did };
const tokenPayload = { 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(uportTokenPayload, {
const jwt: string = await didJwt.createJWT(tokenPayload, {
alg,
issuer: did,
signer,

10
src/router/index.ts

@ -1,5 +1,5 @@
import { createRouter, createWebHistory, RouteRecordRaw } from "vue-router";
import { useAppStore } from "../store/app";
import { db } from "@/db";
const routes: Array<RouteRecordRaw> = [
{
@ -7,10 +7,10 @@ const routes: Array<RouteRecordRaw> = [
name: "home",
component: () =>
import(/* webpackChunkName: "start" */ "../views/DiscoverView.vue"),
beforeEnter: (to, from, next) => {
const appStore = useAppStore();
const isAuthenticated = appStore.condition === "registered";
if (isAuthenticated) {
beforeEnter: async (to, from, next) => {
await db.open();
const num_accounts = await db.accounts.count();
if (num_accounts > 0) {
next();
} else {
next({ name: "start" });

22
src/store/account.ts

@ -1,22 +0,0 @@
// @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");
},
},
});

15
src/store/app.ts

@ -4,30 +4,15 @@ 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);
},

194
src/views/AccountViewView.vue

@ -111,8 +111,8 @@
<div class="text-slate-500 text-sm font-bold">Derivation Path</div>
<div class="text-sm text-slate-500 mb-1">
<span
><code>{{ UPORT_ROOT_DERIVATION_PATH }}</code>
<button @click="copy(UPORT_ROOT_DERIVATION_PATH)">
><code>{{ derivationPath }}</code>
<button @click="copy(derivationPath)">
<fa icon="copy" class="text-slate-400 fa-fw ml-1"></fa>
</button>
</span>
@ -168,86 +168,158 @@
</button>
</form>
</dialog>
<h3 class="text-sm uppercase font-semibold mb-3">Advanced</h3>
<div class="flex">
<button
href=""
class="text-center text-md text-white px-1.5 py-2 rounded-md mb-6"
v-bind:class="showContactGivesClassNames()"
@click="toggleShowContactAmounts"
>
{{ showContactGives ? "Showing" : "Hiding" }}
amounts given with contacts (Click to
{{ showContactGives ? "hide" : "show" }})
</button>
</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 { 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 { db } from "@/db";
import { MASTER_SETTINGS } from "@/db/tables";
import { deriveAddress, generateSeed, newIdentifier } from "@/libs/crypto";
//import { testServerRegisterUser } from "../test";
@Options({
components: {},
})
export default class AccountViewView extends Vue {
firstName =
localStorage.getItem("firstName") === null
? "--"
: localStorage.getItem("firstName");
lastName =
localStorage.getItem("lastName") === null
? "--"
: localStorage.getItem("lastName");
mnemonic = "";
// This registers current user in vue plugin with: $vm.ctx.testRegisterUser()
//testRegisterUser = testServerRegisterUser;
address = "";
privateHex = "";
firstName = "";
lastName = "";
mnemonic = "";
publicHex = "";
UPORT_ROOT_DERIVATION_PATH = "";
source = ref("Hello");
copy = useClipboard().copy;
derivationPath = "";
showContactGives = false;
// This registers current user in vue plugin with: $vm.ctx.testRegisterUser()
//testRegisterUser = testServerRegisterUser;
copy = useClipboard().copy;
// 'created' hook runs when the Vue instance is first created
async created() {
const appCondition = useAppStore().condition;
if (appCondition == "uninitialized") {
this.mnemonic = createIdentifier();
[
this.address,
this.privateHex,
this.publicHex,
this.UPORT_ROOT_DERIVATION_PATH,
] = deriveAddress(this.mnemonic);
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);
await db.open();
try {
const settings = await db.settings.get(MASTER_SETTINGS);
if (settings) {
this.firstName = settings.firstName || "";
this.lastName = settings.lastName || "";
this.showContactGives = !!settings.showContactGivesInline;
}
const numAccounts = await db.accounts.count();
if (numAccounts === 0) {
let privateHex = "";
this.mnemonic = generateSeed();
[this.address, privateHex, this.publicHex, this.derivationPath] =
deriveAddress(this.mnemonic);
const newId = newIdentifier(
this.address,
this.publicHex,
privateHex,
this.derivationPath
);
await db.accounts.add({
dateCreated: new Date().toISOString(),
derivationPath: this.derivationPath,
identity: JSON.stringify(newId),
mnemonic: this.mnemonic,
publicKeyHex: newId.keys[0].publicKeyHex,
});
}
} 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;
}
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 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;
const accounts = await db.accounts.toArray();
const identity = JSON.parse(accounts[0].identity);
this.address = identity.did;
this.publicHex = identity.keys[0].publicKeyHex;
this.derivationPath = identity.keys[0].meta.derivationPath;
}
public async toggleShowContactAmounts() {
this.showContactGives = !this.showContactGives;
try {
await db.open();
const settings = await db.settings.get(MASTER_SETTINGS);
if (settings) {
db.settings.update(MASTER_SETTINGS, {
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 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,
absolute: true,
"top-3": true,
"inset-x-3": true,
"transition-transform": true,
"ease-in": true,
"duration-300": true,
};
}
}
</script>

2
src/views/ContactsView.vue

@ -141,7 +141,7 @@ import { AppString } from "@/constants/app";
import { accessToken, SimpleSigner } from "@/libs/crypto";
import { IIdentifier } from "@veramo/core";
import { db } from "../db";
import { Contact } from "../db/tables/contacts";
import { Contact } from "../db/tables";
export interface GiveVerifiableCredential {
"@context": string;

22
src/views/ImportAccountView.vue

@ -46,7 +46,6 @@
import { Options, Vue } from "vue-class-component";
import { deriveAddress, newIdentifier } from "../libs/crypto";
import { db } from "@/db";
import { useAppStore } from "@/store/app";
@Options({
components: {},
@ -56,7 +55,7 @@ export default class ImportAccountView extends Vue {
address = "";
privateHex = "";
publicHex = "";
UPORT_ROOT_DERIVATION_PATH = "";
derivationPath = "";
public onCancelClick() {
this.$router.back();
@ -65,33 +64,28 @@ 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.UPORT_ROOT_DERIVATION_PATH,
] = deriveAddress(mne);
[this.address, this.privateHex, this.publicHex, this.derivationPath] =
deriveAddress(mne);
const newId = newIdentifier(
this.address,
this.publicHex,
this.privateHex,
this.UPORT_ROOT_DERIVATION_PATH
this.derivationPath
);
try {
await db.open();
const num_accounts = await db.accounts.count();
if (num_accounts === 0) {
console.log("...");
await db.accounts.add({
publicKey: newId.keys[0].publicKeyHex,
mnemonic: mne,
dateCreated: new Date().toISOString(),
derivationPath: this.derivationPath,
identity: JSON.stringify(newId),
dateCreated: new Date().getTime(),
mnemonic: mne,
publicKeyHex: newId.keys[0].publicKeyHex,
});
}
useAppStore().setCondition("registered");
this.$router.push({ name: "account" });
} catch (err) {
console.log("Error!");

21
src/views/NewEditAccountView.vue

@ -50,6 +50,8 @@
<script lang="ts">
import { Options, Vue } from "vue-class-component";
import { db } from "@/db";
import { MASTER_SETTINGS } from "@/db/tables";
@Options({
components: {},
@ -64,13 +66,24 @@ 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);
if (settings) {
this.firstName = settings.firstName || "";
this.lastName = settings.lastName || "";
}
}
onClickSaveChanges() {
db.settings.update(MASTER_SETTINGS, {
firstName: this.firstName,
lastName: this.lastName,
});
localStorage.setItem("firstName", this.firstName as string);
localStorage.setItem("lastName", this.lastName as string);
const route = {
name: "account",
};
this.$router.push(route);
this.$router.push({ name: "account" });
}
onClickCancel() {

Loading…
Cancel
Save