add settings table to store names (and other things soon)

src/db/index.ts

@@ -1,6 +1,12 @@
 import BaseDexie, { Table } from "dexie";
 import { encrypted, Encryption } from "@pvermeer/dexie-encrypted-addon";
-import { Account, accountsSchema } from "./tables/accounts";
+import {
+  Account,
+  AccountsSchema,
+  MASTER_SETTINGS,
+  Settings,
+  SettingsSchema,
+} from "./tables";
 
 /**
  * In order to make the next line be acceptable, the program needs to have its linter suppress a rule:
@@ -12,10 +18,13 @@ import { Account, accountsSchema } from "./tables/accounts";
  */
 type DexieTables = {
   accounts: Table<Account>;
+  settings: Table<Settings>;
 };
+
 export type Dexie<T extends unknown = DexieTables> = BaseDexie & T;
 export const db = new BaseDexie("KickStart") as Dexie;
-const schema = Object.assign({}, accountsSchema);
+
+const AllSchemas = Object.assign({}, AccountsSchema, SettingsSchema);
 
 /**
  * Needed to enable a special webpack setting to allow *await* below:
@@ -29,6 +38,12 @@ const secret =
 if (localStorage.getItem("secret") == null) {
   localStorage.setItem("secret", secret);
 }
-console.log(secret);
+console.log("Secret:", secret);
 encrypted(db, { secretKey: secret });
-db.version(1).stores(schema);
+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 });
+});

src/db/tables/index.ts

@@ -9,7 +9,20 @@ export type 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 = {
+export const AccountsSchema = {
   accounts:
     "++id, dateCreated, derivationPath, $identity, $mnemonic, publicKeyHex",
 };
+
+// a singleton
+export type Settings = {
+  id: number;
+  firstName?: string;
+  lastName?: string;
+};
+
+export const SettingsSchema = {
+  settings: "id",
+};
+
+export const MASTER_SETTINGS = 1;

src/views/AccountViewView.vue

@@ -185,46 +185,47 @@
 <script lang="ts">
 import { Options, Vue } from "vue-class-component";
 import { useClipboard } from "@vueuse/core";
-import { deriveAddress, generateSeed, newIdentifier } from "../libs/crypto";
-import { db } from "../db";
+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 = "";
   derivationPath = "";
   copy = useClipboard().copy;
 
-  // 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() {
     await db.open();
-    const num_accounts = await db.accounts.count();
-    if (num_accounts === 0) {
-      try {
+    try {
+      const settings = await db.settings.get(MASTER_SETTINGS);
+      if (settings) {
+        this.firstName = settings.firstName || "";
+        this.lastName = settings.lastName || "";
+      }
+
+      const numAccounts = await db.accounts.count();
+      if (numAccounts === 0) {
+        let privateHex = "";
         this.mnemonic = generateSeed();
-        [this.address, this.privateHex, this.publicHex, this.derivationPath] =
+        [this.address, privateHex, this.publicHex, this.derivationPath] =
           deriveAddress(this.mnemonic);
 
         const newId = newIdentifier(
           this.address,
           this.publicHex,
-          this.privateHex,
+          privateHex,
           this.derivationPath
         );
         await db.accounts.add({
@@ -234,13 +235,13 @@ export default class AccountViewView extends Vue {
           mnemonic: this.mnemonic,
           publicKeyHex: newId.keys[0].publicKeyHex,
         });
-      } catch (err) {
-        this.alertMessage =
-          "Clear your cache and start over. Root Cause: " + err;
-        this.alertTitle = "Error Creating Account";
-        this.isAlertVisible = true;
-        console.log(err);
       }
+    } 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;
     }
 
     const accounts = await db.accounts.toArray();

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() {