refactor name setting and other small messaging & types

src/views/AccountViewView.vue

@@ -52,7 +52,17 @@
 
     <!-- Identity Details -->
     <div class="bg-slate-100 rounded-md overflow-hidden px-4 py-3 mb-4">
-      <h2 class="text-xl font-semibold mb-2">{{ givenName }}</h2>
+      <h2 v-if="givenName" class="text-xl font-semibold mb-2">
+        {{ givenName }}
+      </h2>
+      <span v-else>
+        <router-link
+          :to="{ name: 'new-edit-account' }"
+          class="text-xs bg-blue-500 text-white px-1.5 py-1 rounded-md"
+        >
+          (set name)
+        </router-link>
+      </span>
 
       <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">
@@ -113,7 +123,7 @@
 
     <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-2"
+      class="block text-center text-lg font-bold uppercase bg-slate-500 text-white px-2 py-3 rounded-md mb-2"
     >
       Edit Identity
     </router-link>

src/views/ContactsView.vue

@@ -256,7 +256,7 @@ import { NotificationIface } from "@/constants/app";
 import { IIdentifier } from "@veramo/core";
 import { accountsDB, db } from "@/db/index";
 import { Contact } from "@/db/tables/contacts";
-import { MASTER_SETTINGS_KEY } from "@/db/tables/settings";
+import { MASTER_SETTINGS_KEY, Settings } from "@/db/tables/settings";
 import {
   accessToken,
   getContactPayloadFromJwtUrl,
@@ -271,6 +271,7 @@ import {
 import { Component, Vue } from "vue-facing-decorator";
 import QuickNav from "@/components/QuickNav.vue";
 import EntityIcon from "@/components/EntityIcon.vue";
+import { Account } from "@/db/tables/accounts";
 
 // eslint-disable-next-line @typescript-eslint/no-var-requires
 const Buffer = require("buffer/").Buffer;
@@ -308,7 +309,7 @@ export default class ContactsView extends Vue {
 
   async created() {
     await db.open();
-    const settings = await db.settings.get(MASTER_SETTINGS_KEY);
+    const settings = (await db.settings.get(MASTER_SETTINGS_KEY)) as Settings;
     this.activeDid = settings?.activeDid || "";
     this.apiServer = settings?.apiServer || "";
 
@@ -332,7 +333,7 @@ export default class ContactsView extends Vue {
   public async getIdentity(activeDid: string) {
     await accountsDB.open();
     const accounts = await accountsDB.accounts.toArray();
-    const account = R.find((acc) => acc.did === activeDid, accounts);
+    const account = R.find((acc) => acc.did === activeDid, accounts) as Account;
     const identity = JSON.parse(account?.identity || "null");
 
     if (!identity) {
@@ -765,8 +766,8 @@ export default class ContactsView extends Vue {
           -1,
         );
       } else {
-        const message =
-          resp.data.error?.message || "Bad server response of " + resp.status;
+        console.log("Got bad server response when checking visibility: ", resp);
+        const message = resp.data.error?.message || "Got bad server response.";
         this.$notify(
           {
             group: "alert",

src/views/IdentitySwitcherView.vue

@@ -71,7 +71,7 @@ import { Component, Vue } from "vue-facing-decorator";
 import { AppString } from "@/constants/app";
 import { db, accountsDB } from "@/db/index";
 import { AccountsSchema } from "@/db/tables/accounts";
-import { MASTER_SETTINGS_KEY } from "@/db/tables/settings";
+import { MASTER_SETTINGS_KEY, Settings } from "@/db/tables/settings";
 import QuickNav from "@/components/QuickNav.vue";
 
 interface Notification {
@@ -107,12 +107,12 @@ export default class IdentitySwitcherView extends Vue {
   async created() {
     try {
       await db.open();
-      const settings = await db.settings.get(MASTER_SETTINGS_KEY);
-      this.activeDid = (settings?.activeDid as string) || "";
-      this.apiServer = (settings?.apiServer as string) || "";
-      this.apiServerInput = (settings?.apiServer as string) || "";
+      const settings = (await db.settings.get(MASTER_SETTINGS_KEY)) as Settings;
+      this.activeDid = settings?.activeDid || "";
+      this.apiServer = settings?.apiServer || "";
+      this.apiServerInput = settings?.apiServer || "";
       this.givenName =
-        ((settings?.firstName as string) || "") +
+        (settings?.firstName || "") +
         (settings?.lastName ? ` ${settings.lastName}` : ""); // deprecated, pre v 0.1.3
       this.showContactGives = !!settings?.showContactGivesInline;
 

src/views/NewEditAccountView.vue

@@ -10,7 +10,7 @@
         >
           <fa icon="chevron-left" class="fa-fw"></fa>
         </button>
-        [New/Edit] Identity
+        Edit Identity
       </h1>
     </div>
 
@@ -44,7 +44,7 @@
 <script lang="ts">
 import { Component, Vue } from "vue-facing-decorator";
 import { db } from "@/db/index";
-import { MASTER_SETTINGS_KEY } from "@/db/tables/settings";
+import { MASTER_SETTINGS_KEY, Settings } from "@/db/tables/settings";
 
 @Component({
   components: {},
@@ -55,9 +55,9 @@ export default class NewEditAccountView 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 settings = (await db.settings.get(MASTER_SETTINGS_KEY)) as Settings;
     this.givenName =
-      ((settings?.firstName as string) || "") +
+      (settings?.firstName || "") +
       (settings?.lastName ? ` ${settings.lastName}` : ""); // deprecated, pre v 0.1.3
   }