adjust more UI on the Advanced section, and make other small code & UI tweaks

README.md

@@ -136,12 +136,18 @@ To add an icon, add to main.ts and reference with `fa` element and `icon` attrib
 ## Troubleshooting
 
 * A problem with `GET http://localhost:8080/web-push/vapid` means the py-push-server is not running
-  (and it won't work for a local app, anyway).
+  (and notifications won't work for a local app without special routing from the browser's web push service provider, anyway).
 
 * Red errors everywhere with a console message like this:
   `Error: An ID is chosen but there are no keys for it so it cannot be used to talk with the service`
   ... has happened on account switching when the current account was erased (or maybe replaced -- once I had a duplicate and I don't know how).
 
+* The error `DEXIE ENCRYPT ADDON: Could not decrypt message!` or
+  `Encryption key has changed` means that the encryption key is wrong,
+  sometimes seen after clearing storage for testing; you can make it happen by clearing localStorage.
+  Maybe only part of the storage was cleared out. Unless you got a copy of that password, you'll
+  have to erase storage and reload the identifier.
+
 
 
 ## Other

src/views/AccountViewView.vue

@@ -302,7 +302,7 @@
         @click="handleChange"
       >
         <!-- label -->
-        <span class="text-slate-500 text-sm font-bold">Contacts</span>
+        <span class="text-slate-500 text-sm font-bold">Contacts Display</span>
         <span class="ml-2">Show amounts given</span>
         <!-- toggle -->
         <div class="relative ml-2">
@@ -322,33 +322,17 @@
         </div>
       </label>
 
-      <div class="grid-cols-2 mb-4">
-        <span class="text-slate-500 text-sm font-bold">Import</span>
-        <input type="file" @change="uploadFile" class="ml-2" />
-        <div v-if="showContactImport()">
-          <button
-            class="block text-center text-md uppercase bg-green-600 text-white px-1.5 py-2 rounded-md mb-6"
-            @click="submitFile()"
-          >
-            Import Settings & Contacts
-            <br />
-            (excluding Identifier Data)
-          </button>
-        </div>
-      </div>
-
       <div>
         <h2 class="text-slate-500 text-sm font-bold mt-4">Claim Server</h2>
-        <div class="flex px-4 py-4">
-          Server
+        <div class="px-4 py-4">
           <input
             type="text"
-            class="block w-full rounded border border-slate-400 px-3 py-2"
+            class="block w-full rounded border border-slate-400 px-4 py-2"
             v-model="apiServerInput"
           />
           <button
             v-if="apiServerInput != apiServer"
-            class="px-4 rounded bg-red-500 border border-slate-400"
+            class="w-full px-4 rounded bg-yellow-500 border border-slate-400"
             @click="onClickSaveApiServer()"
           >
             <fa icon="floppy-disk" class="fa-fw" color="white"></fa>
@@ -414,10 +398,10 @@
         </label>
       </div>
 
-      <div class="flex py-4">
-        <h2 class="text-slate-500 text-sm font-bold mb-2">
-          Notification Push Server
-        </h2>
+      <h2 class="text-slate-500 text-sm font-bold mb-2">
+        Notification Push Server
+      </h2>
+      <div class="px-3 py-4">
         <input
           type="text"
           class="block w-full rounded border border-slate-400 px-3 py-2"
@@ -425,7 +409,7 @@
         />
         <button
           v-if="webPushServerInput != webPushServer"
-          class="px-4 rounded bg-red-500 border border-slate-400"
+          class="w-full px-4 rounded bg-yellow-500 border border-slate-400"
           @click="onClickSavePushServer()"
         >
           <fa icon="floppy-disk" class="fa-fw" color="white"></fa>
@@ -455,6 +439,27 @@
         {{ DEFAULT_PUSH_SERVER }}
       </span>
 
+      <div class="mt-4">
+        <h2 class="text-slate-500 text-sm font-bold">
+          Contacts & Settings Database
+        </h2>
+
+        <div class="ml-4 mt-2">
+          Import
+          <input type="file" @change="uploadFile" class="ml-2" />
+          <div v-if="showContactImport()">
+            <button
+              class="block text-center text-md uppercase bg-blue-500 text-white px-1.5 py-2 rounded-md mb-6"
+              @click="submitFile()"
+            >
+              Import Settings & Contacts
+              <br />
+              (excluding Identifier Data)
+            </button>
+          </div>
+        </div>
+      </div>
+
       <div class="flex mt-4">
         <button>
           <router-link

src/views/ContactAmountsView.vue

@@ -193,7 +193,7 @@ export default class ContactAmountssView extends Vue {
           title: "Error",
           text:
             err.userMessage ||
-            "There was an error retrieving your settings and/or contacts and/or gives.",
+            "There was an error retrieving your settings or contacts or gives.",
         },
         -1,
       );

src/views/ContactGiftingView.vue

@@ -132,7 +132,7 @@ export default class ContactGiftingView extends Vue {
           title: "Error",
           text:
             err.message ||
-            "There was an error retrieving your settings and/or contacts.",
+            "There was an error retrieving your settings or contacts.",
         },
         -1,
       );

src/views/HelpView.vue

@@ -74,7 +74,7 @@
         How do I restore my old one?
       </h2>
       <p>
-        Go to the page
+        Go
         <router-link class="text-blue-500" to="/import-account">import your identifier</router-link>.
         If you don't want the old one, click "Advanced" and check the box to erase it.
         (The erase option only shows if you have exactly one identifier.
@@ -138,7 +138,7 @@
 
       <h2 class="text-xl font-semibold">How do I restore my data?</h2>
       <p>
-        There are two parts to restore your data: the identity secrets and the
+        There are two steps to restore your data: the identity secrets, then the
         other data such as settings, contacts, etc.
       </p>
 
@@ -161,7 +161,7 @@
         <ul class="list-disc list-outside ml-4">
           <li>
             Go to Your Identity <fa icon="circle-user" class="fa-fw" /> page,
-            click Advanced, and follow the instructions for Data Import.
+            click Advanced, and follow the instructions for the Contacts & Settings Database "Import".
           </li>
         </ul>
       </div>
@@ -223,8 +223,8 @@
       <p>
         If you don't see anything associated with a person, this is typically
         because they have not given you permission to see their information. Ask
-        them to add you to their contact list and make sure the eye next to your
-        name is open like this
+        them to add you to their contact list, and ask specifically to make sure
+        the eye next to your name is open like this
         <fa icon="eye" class="fa-fw" /> and not closed like this
         <fa icon="eye-slash" class="fa-fw" />.
       </p>

src/views/ProjectsView.vue

@@ -103,9 +103,46 @@ export default class ProjectsView extends Vue {
   isLoading = false;
   numAccounts = 0;
 
-  async beforeCreate() {
-    await accountsDB.open();
-    this.numAccounts = await accountsDB.accounts.count();
+  /**
+   * 'created' hook runs when the Vue instance is first created
+   **/
+  async created() {
+    try {
+      await db.open();
+      const settings = await db.settings.get(MASTER_SETTINGS_KEY);
+      const activeDid = settings?.activeDid || "";
+      this.apiServer = settings?.apiServer || "";
+
+      await accountsDB.open();
+      this.numAccounts = await accountsDB.accounts.count();
+      if (this.numAccounts === 0) {
+        console.error("No accounts found.");
+        this.$notify(
+          {
+            group: "alert",
+            type: "danger",
+            title: "Error",
+            text: "You need an identifier to load your projects.",
+          },
+          -1,
+        );
+      } else {
+        const identity = await this.getIdentity(activeDid);
+        this.current = identity;
+        this.loadProjects(identity);
+      }
+    } catch (err) {
+      console.log("Error initializing:", err);
+      this.$notify(
+        {
+          group: "alert",
+          type: "danger",
+          title: "Error",
+          text: "Something went wrong loading your projects.",
+        },
+        -1,
+      );
+    }
   }
 
   /**
@@ -186,7 +223,7 @@ export default class ProjectsView extends Vue {
    * Load projects initially
    * @param identity of the user
    **/
-  async LoadProjects(identity: IIdentifier) {
+  async loadProjects(identity: IIdentifier) {
     const url = `${this.apiServer}/api/v2/report/plansByIssuer`;
     const token: string = await accessToken(identity);
     await this.dataLoader(url, token);
@@ -208,46 +245,6 @@ export default class ProjectsView extends Vue {
     return identity;
   }
 
-  /**
-   * 'created' hook runs when the Vue instance is first created
-   **/
-  async created() {
-    try {
-      await db.open();
-      const settings = await db.settings.get(MASTER_SETTINGS_KEY);
-      const activeDid = settings?.activeDid || "";
-      this.apiServer = settings?.apiServer || "";
-
-      if (this.numAccounts === 0) {
-        console.error("No accounts found.");
-        this.$notify(
-          {
-            group: "alert",
-            type: "danger",
-            title: "Error",
-            text: "You need an identifier to load your projects.",
-          },
-          -1,
-        );
-      } else {
-        const identity = await this.getIdentity(activeDid);
-        this.current = identity;
-        this.LoadProjects(identity);
-      }
-    } catch (err) {
-      console.log("Error initializing:", err);
-      this.$notify(
-        {
-          group: "alert",
-          type: "danger",
-          title: "Error",
-          text: "Something went wrong loading your projects.",
-        },
-        -1,
-      );
-    }
-  }
-
   /**
    * Handling clicking on the new project button
    **/

src/views/SeedBackupView.vue

@@ -2,6 +2,16 @@
   <QuickNav selected="Profile"></QuickNav>
   <!-- CONTENT -->
   <section id="Content" class="p-6 pb-24 max-w-3xl mx-auto">
+    <!-- Back -->
+    <div class="text-lg text-center font-light relative px-7">
+      <h1
+        class="text-lg text-center px-2 py-1 absolute -left-2 -top-1"
+        @click="$router.back()"
+      >
+        <fa icon="chevron-left" class="fa-fw"></fa>
+      </h1>
+    </div>
+
     <!-- Heading -->
     <h1 id="ViewHeading" class="text-4xl text-center font-light pt-4 mb-8">
       Seed Backup