fix registration, separate ID creation to allow new random ones, and refactor warning and other verbiage

src/views/AccountViewView.vue

@@ -66,20 +66,22 @@
       </span>
     </div>
 
-    <!-- Friend referral requirement notice -->
+    <!-- Registration notice -->
+    <!-- We won't show any loading indicator; we'll just pop the message in once we know they need it. -->
     <div
+      v-if="!loadingLimits && !limits?.nextWeekBeginDateTime"
       class="bg-amber-200 text-amber-900 border-amber-500 border-dashed border text-center rounded-md overflow-hidden px-4 py-3 mb-4"
     >
       <p class="mb-4">
-        <b>Important:</b> before you can create a new project or commit time to
-        one, you need a friend to register you.
+        <b>Note:</b> Before you can publicly announce a new project or time
+        commitment, a friend needs to register you.
       </p>
-      <button
-        id="btnShowQR"
+      <router-link
+        :to="{ name: 'contact-qr' }"
         class="inline-block text-md uppercase bg-amber-600 text-white px-4 py-2 rounded-md"
       >
-        Share Your ID
-      </button>
+        Share Your Info
+      </router-link>
     </div>
 
     <!-- Identity Details -->
@@ -181,7 +183,7 @@
         <div class="text-slate-500 text-center">
           <b>ID:</b> <code>did:peer:kl45kj41lk451kl3</code>
         </div>
-        <img src="img/sample-qr-code.png" class="w-full mb-3" />
+        <img src="/img/sample-qr-code.png" class="w-full mb-3" />
 
         <button
           value="cancel"
@@ -229,6 +231,13 @@
       <button class="text-center text-md text-blue-500" @click="checkLimits()">
         Check Limits
       </button>
+      <!-- show spinner if loading limits -->
+      <div v-if="loadingLimits" class="ml-2">
+        Checking... <fa icon="spinner" class="fa-spin"></fa>
+      </div>
+      <div class="ml-2">
+        {{ limitsMessage }}
+      </div>
       <div v-if="!!limits?.nextWeekBeginDateTime" class="px-9">
         <span class="font-bold">Rate Limits</span>
         <p>
@@ -280,7 +289,7 @@
     </div>
 
     <div v-if="numAccounts > 0" class="flex py-2">
-      Switch Account
+      Switch Identifier
       <span v-for="accountNum in numAccounts" :key="accountNum">
         <button class="text-blue-500 px-2" @click="switchAccount(accountNum)">
           #{{ accountNum }}
@@ -357,6 +366,8 @@ export default class AccountViewView extends Vue {
   publicHex = "";
   publicBase64 = "";
   limits: RateLimits | null = null;
+  limitsMessage = "";
+  loadingLimits = true; // might as well now that we do it on mount, to avoid flashing the registration message
   showContactGives = false;
 
   showDidCopy = false;
@@ -388,6 +399,7 @@ export default class AccountViewView extends Vue {
     // assign this to a class variable, eg. "registerThisUser = testServerRegisterUser",
     // select a component in the extension, and enter in the console: $vm.ctx.registerThisUser()
     //testServerRegisterUser();
+
     try {
       await db.open();
       const settings = await db.settings.get(MASTER_SETTINGS_KEY);
@@ -441,6 +453,8 @@ export default class AccountViewView extends Vue {
       this.alertTitle = "Error Creating Account";
       this.isAlertVisible = true;
     }
+
+    this.checkLimits();
   }
 
   public async updateShowContactAmounts() {
@@ -482,6 +496,9 @@ export default class AccountViewView extends Vue {
   }
 
   async checkLimits() {
+    this.loadingLimits = true;
+    this.limitsMessage = "";
+
     const url = this.apiServer + "/api/report/rateLimits";
     await accountsDB.open();
     const accounts = await accountsDB.accounts.toArray();
@@ -502,18 +519,14 @@ export default class AccountViewView extends Vue {
     } catch (error: unknown) {
       const serverError = error as AxiosError;
 
-      this.alertTitle = "Error from Server";
       console.error("Bad response retrieving limits: ", serverError);
       // Anybody know how to access items inside "response.data" without this?
       // eslint-disable-next-line @typescript-eslint/no-explicit-any
       const data: any = serverError.response?.data;
-      if (data.error.message) {
-        this.alertMessage = data.error.message;
-      } else {
-        this.alertMessage = "Bad server response. See logs for details.";
-      }
-      this.isAlertVisible = true;
+      this.limitsMessage = data?.error?.message || "Bad server response.";
     }
+
+    this.loadingLimits = false;
   }
 
   async switchAccount(accountNum: number) {