automatically create an identity on the first page (and other UI tweaks)

src/views/HomeView.vue

@@ -61,8 +61,13 @@
 
     <!-- show the actions for recognizing a give -->
     <div class="mb-8">
+      <div v-if="isCreatingIdentifier">
+        <p class="text-slate-500 text-center italic mt-4 mb-4">
+          <fa icon="spinner" class="fa-spin-pulse"></fa> Loading&hellip;
+        </p>
+      </div>
       <div
-        v-if="!activeDid"
+        v-if="!activeDid && !isCreatingIdentifier"
         class="bg-amber-200 rounded-md overflow-hidden text-center px-4 py-3 mb-4"
       >
         <p class="text-lg mb-3">
@@ -81,19 +86,19 @@
         v-else-if="!isRegistered"
         class="bg-amber-200 rounded-md overflow-hidden text-center px-4 py-3 mb-4"
       >
-        Someone must register your account before you can record anyone's gives.
-        To do this:
+        Someone must register your identifier before you can record anyone's
+        giving.
         <router-link
           :to="{ name: 'contact-qr' }"
-          class="block text-center text-md font-bold uppercase bg-blue-500 text-white mt-2 px-2 py-3 rounded-md"
+          class="block text-center text-md font-bold uppercase bg-blue-500 text-white mt-2 mb-4 px-2 py-3 rounded-md"
         >
-          1. Show Them Your Identifier Info</router-link
+          Show Them Your Identifier Info</router-link
         >
-        <router-link
-          :to="{ name: 'account' }"
-          class="block text-center text-md font-bold uppercase bg-blue-500 text-white mt-2 px-2 py-3 rounded-md"
-        >
-          2. Check Your Limits</router-link
+        To double-check that you're registered,
+        <br />
+        <router-link :to="{ name: 'account' }" class="text-blue-500">
+          see your Usage Limits on the Account
+          <fa icon="circle-user" /> page.</router-link
         >
       </div>
 
@@ -171,7 +176,7 @@
               class="border-b border-dashed border-slate-400 text-orange-400 pb-2 mb-2 font-bold uppercase text-sm"
               v-if="record.jwtId == feedLastViewedClaimId"
             >
-              You've seen all the following
+              You've seen all the following before
             </div>
 
             <div class="flex">
@@ -184,7 +189,7 @@
           </li>
         </ul>
       </InfiniteScroll>
-      <div :class="{ hidden: isHiddenSpinner }">
+      <div v-if="isFeedLoading">
         <p class="text-slate-500 text-center italic mt-4 mb-4">
           <fa icon="spinner" class="fa-spin-pulse"></fa> Loading&hellip;
         </p>
@@ -213,6 +218,7 @@ import {
   GiveServerRecord,
 } from "@/libs/endorserServer";
 import { IIdentifier } from "@veramo/core";
+import { generateSaveAndActivateIdentity } from "@/libs/util";
 
 interface Notification {
   group: string;
@@ -240,16 +246,11 @@ export default class HomeView extends Vue {
   feedData = [];
   feedPreviousOldestId?: string;
   feedLastViewedClaimId?: string;
-  isHiddenSpinner = true;
+  isCreatingIdentifier = false;
+  isFeedLoading = true;
   isRegistered = false;
-  numAccounts = 0;
   userAgentInfo = new UAParser(); // see https://docs.uaparser.js.org/v2/api/ua-parser-js/get-os.html
 
-  async beforeCreate() {
-    await accountsDB.open();
-    this.numAccounts = await accountsDB.accounts.count();
-  }
-
   public async getIdentity(activeDid: string) {
     await accountsDB.open();
     const account = (await accountsDB.accounts
@@ -283,8 +284,16 @@ export default class HomeView extends Vue {
       this.feedLastViewedClaimId = settings?.lastViewedClaimId;
       this.isRegistered = !!settings?.isRegistered;
 
+      if (this.allMyDids.length === 0) {
+        this.isCreatingIdentifier = true;
+        this.activeDid = await generateSaveAndActivateIdentity();
+        this.allMyDids = [this.activeDid];
+        this.isCreatingIdentifier = false;
+      }
+
       // this returns a Promise but we don't need to wait for it
-      this.updateAllFeed();
+
+      await this.updateAllFeed();
 
       // eslint-disable-next-line @typescript-eslint/no-explicit-any
     } catch (err: any) {
@@ -344,7 +353,7 @@ export default class HomeView extends Vue {
   }
 
   public async updateAllFeed() {
-    this.isHiddenSpinner = false;
+    this.isFeedLoading = true;
     await this.retrieveGives(this.apiServer, this.feedPreviousOldestId)
       .then(async (results) => {
         if (results.data.length > 0) {
@@ -375,7 +384,7 @@ export default class HomeView extends Vue {
           -1,
         );
       });
-    this.isHiddenSpinner = true;
+    this.isFeedLoading = false;
   }
 
   /**