Merge pull request 'error-logging' (#29) from error-logging into master

Reviewed-on: https://gitea.anomalistdesign.com/trent_larson/kick-starter-for-time-pwa/pulls/29

src/components/AlertMessage.vue

@@ -0,0 +1,47 @@
+<template>
+  <div v-bind:class="computedAlertClassNames()">
+    <button
+      class="close-button bg-slate-200 w-8 leading-loose rounded-full absolute top-2 right-2"
+      @click="onClickClose()"
+    >
+      <fa icon="xmark"></fa>
+    </button>
+    <h4 class="font-bold pr-5">{{ alertTitle }}</h4>
+    <p>{{ alertMessage }}</p>
+  </div>
+</template>
+
+<script lang="ts">
+import { Component, Prop, Vue } from "vue-facing-decorator";
+
+@Component
+export default class AlertMessage extends Vue {
+  @Prop alertTitle = "";
+  @Prop alertMessage = "";
+  isAlertVisible = this.alertMessage;
+
+  public onClickClose() {
+    this.isAlertVisible = false;
+  }
+
+  public computedAlertClassNames() {
+    return {
+      hidden: !this.isAlertVisible,
+      "dismissable-alert": true,
+      "bg-slate-100": true,
+      "p-5": true,
+      rounded: true,
+      "drop-shadow-lg": true,
+      fixed: true,
+      "top-3": true,
+      "inset-x-3": true,
+      "transition-transform": true,
+      "ease-in": true,
+      "duration-300": true,
+    };
+  }
+}
+</script>
+
+<!-- Add "scoped" attribute to limit CSS to this component only -->
+<style scoped></style>

src/components/World/components/objects/landmarks.js

@@ -23,6 +23,9 @@ export async function loadLandmarks(vue, world, scene, loop) {
     const accounts = await accountsDB.accounts.toArray();
     const account = R.find((acc) => acc.did === activeDid, accounts);
     const identity = JSON.parse(account?.identity || "undefined");
+    if (!identity) {
+      throw new Error("No identity found.");
+    }
     const token = await accessToken(identity);
 
     const url = apiServer + "/api/v2/report/claims?claimType=GiveAction";

src/views/AccountViewView.vue

@@ -307,25 +307,16 @@
         </router-link>
       </button>
     </div>
-
-    <!-- This same popup code is in many files. -->
-    <div v-bind:class="computedAlertClassNames()">
-      <button
-        class="close-button bg-slate-200 w-8 leading-loose rounded-full absolute top-2 right-2"
-        @click="onClickClose()"
-      >
-        <fa icon="xmark"></fa>
-      </button>
-      <h4 class="font-bold pr-5">{{ alertTitle }}</h4>
-      <p>{{ alertMessage }}</p>
-    </div>
+    <AlertMessage
+      :alertTitle="alertTitle"
+      :alertMessage="alertMessage"
+    ></AlertMessage>
   </section>
 </template>
 
 <script lang="ts">
 import "dexie-export-import";
 import * as R from "ramda";
-
 import { Component, Vue } from "vue-facing-decorator";
 import { useClipboard } from "@vueuse/core";
 
@@ -334,6 +325,7 @@ import { db, accountsDB } from "@/db";
 import { MASTER_SETTINGS_KEY } from "@/db/tables/settings";
 import { accessToken } from "@/libs/crypto";
 import { AxiosError } from "axios/index";
+import AlertMessage from "@/components/AlertMessage";
 
 // eslint-disable-next-line @typescript-eslint/no-var-requires
 const Buffer = require("buffer/").Buffer;
@@ -347,7 +339,7 @@ interface RateLimits {
   nextWeekBeginDateTime: string;
 }
 
-@Component
+@Component({ components: { AlertMessage } })
 export default class AccountViewView extends Vue {
   Constants = AppString;
 
@@ -420,15 +412,13 @@ export default class AccountViewView extends Vue {
       db.settings.update(MASTER_SETTINGS_KEY, {
         activeDid: identity.did,
       });
+      this.checkLimits();
     } catch (err) {
       this.alertMessage =
         "Clear your cache and start over (after data backup).";
       console.error("Telling user to clear cache at page create because:", err);
       this.alertTitle = "Error Creating Account";
-      this.isAlertVisible = true;
     }
-
-    this.checkLimits();
   }
 
   public async updateShowContactAmounts() {
@@ -445,7 +435,6 @@ export default class AccountViewView extends Vue {
         err
       );
       this.alertTitle = "Error Updating Contact Setting";
-      this.isAlertVisible = true;
     }
   }
 
@@ -463,11 +452,9 @@ export default class AccountViewView extends Vue {
 
       this.alertTitle = "Download Started";
       this.alertMessage = "See your downloads directory for the backup.";
-      this.isAlertVisible = true;
     } catch (error) {
       this.alertTitle = "Export Error";
       this.alertMessage = "See console logs for more info.";
-      this.isAlertVisible = true;
       console.error("Export Error:", error);
     }
   }
@@ -547,27 +534,5 @@ export default class AccountViewView extends Vue {
   // This same popup code is in many files.
   alertMessage = "";
   alertTitle = "";
-  isAlertVisible = false;
-  public onClickClose() {
-    this.isAlertVisible = false;
-    this.alertTitle = "";
-    this.alertMessage = "";
-  }
-  public computedAlertClassNames() {
-    return {
-      hidden: !this.isAlertVisible,
-      "dismissable-alert": true,
-      "bg-slate-100": true,
-      "p-5": true,
-      rounded: true,
-      "drop-shadow-lg": true,
-      fixed: true,
-      "top-3": true,
-      "inset-x-3": true,
-      "transition-transform": true,
-      "ease-in": true,
-      "duration-300": true,
-    };
-  }
 }
 </script>

src/views/ContactAmountsView.vue

@@ -109,25 +109,17 @@
         </div>
       </div>
     </div>
-
-    <!-- This same popup code is in many files. -->
-    <div v-bind:class="computedAlertClassNames()">
-      <button
-        class="close-button bg-slate-200 w-8 leading-loose rounded-full absolute top-2 right-2"
-        @click="onClickClose()"
-      >
-        <fa icon="xmark"></fa>
-      </button>
-      <h4 class="font-bold pr-5">{{ alertTitle }}</h4>
-      <p>{{ alertMessage }}</p>
-    </div>
+    <AlertMessage
+      :alertTitle="alertTitle"
+      :alertMessage="alertMessage"
+    ></AlertMessage>
   </section>
 </template>
 
 <script lang="ts">
 import * as R from "ramda";
-import { Options, Vue } from "vue-class-component";
 
+import { Component, Vue } from "vue-facing-decorator";
 import { accountsDB, db } from "@/db";
 import { Contact } from "@/db/tables/contacts";
 import { MASTER_SETTINGS_KEY } from "@/db/tables/settings";
@@ -140,16 +132,20 @@ import {
 } from "@/libs/endorserServer";
 import * as didJwt from "did-jwt";
 import { AxiosError } from "axios";
+import AlertMessage from "@/components/AlertMessage";
 
-@Options({})
+@Component({ components: { AlertMessage } })
 export default class ContactsView extends Vue {
   activeDid = "";
   apiServer = "";
   contact: Contact | null = null;
   giveRecords: Array<GiveServerRecord> = [];
+  alertTitle = "";
+  alertMessage = "";
 
   // 'created' hook runs when the Vue instance is first created
   async created() {
+    try {
       await db.open();
       const contactDid = this.$route.query.contactDid as string;
       this.contact = (await db.contacts.get(contactDid)) || null;
@@ -161,6 +157,12 @@ export default class ContactsView extends Vue {
       if (this.activeDid && this.contact) {
         this.loadGives(this.activeDid, this.contact);
       }
+    } catch (err) {
+      this.alertTitle = "Error";
+      this.alertMessage =
+        err.userMessage ||
+        "There was an error retrieving the latest sweet, sweet action.";
+    }
   }
 
   async loadGives(activeDid: string, contact: Contact) {
@@ -200,7 +202,6 @@ export default class ContactsView extends Vue {
         this.alertTitle = "Error With Server";
         this.alertMessage =
           "Got an error retrieving your given time from the server.";
-        this.isAlertVisible = true;
       }
 
       const url2 =
@@ -226,7 +227,6 @@ export default class ContactsView extends Vue {
         this.alertTitle = "Error With Server";
         this.alertMessage =
           "Got an error retrieving your given time from the server.";
-        this.isAlertVisible = true;
       }
 
       const sortedResult: Array<GiveServerRecord> = R.sort(
@@ -238,7 +238,6 @@ export default class ContactsView extends Vue {
     } catch (error) {
       this.alertTitle = "Error With Server";
       this.alertMessage = error as string;
-      this.isAlertVisible = true;
     }
   }
 
@@ -316,7 +315,6 @@ export default class ContactsView extends Vue {
         // Now set that error for the user to see.
         this.alertTitle = "Error With Server";
         this.alertMessage = userMessage;
-        this.isAlertVisible = true;
       }
     }
   }
@@ -324,33 +322,6 @@ export default class ContactsView extends Vue {
   cannotConfirmMessage() {
     this.alertTitle = "Not Allowed";
     this.alertMessage = "Only the recipient can confirm final receipt.";
-    this.isAlertVisible = true;
-  }
-
-  // This same popup code is in many files.
-  alertTitle = "";
-  alertMessage = "";
-  isAlertVisible = false;
-  public onClickClose() {
-    this.isAlertVisible = false;
-    this.alertTitle = "";
-    this.alertMessage = "";
-  }
-  public computedAlertClassNames() {
-    return {
-      hidden: !this.isAlertVisible,
-      "dismissable-alert": true,
-      "bg-slate-100": true,
-      "p-5": true,
-      rounded: true,
-      "drop-shadow-lg": true,
-      fixed: true,
-      "top-3": true,
-      "inset-x-3": true,
-      "transition-transform": true,
-      "ease-in": true,
-      "duration-300": true,
-    };
   }
 }
 </script>

src/views/ContactQRScanShowView.vue

@@ -64,17 +64,10 @@
       :dotsOptions="{ type: 'square' }"
       class="flex justify-center"
     />
-
-    <!-- This same popup code is in many files. -->
-    <div v-bind:class="computedAlertClassNames()">
-      <button
-        class="close-button bg-slate-200 w-8 leading-loose rounded-full absolute top-2 right-2"
-        @click="onClickClose()"
-      >
-        <fa icon="xmark"></fa>
-      </button>
-      <p>{{ alertMessage }}</p>
-    </div>
+    <AlertMessage
+      :alertTitle="alertTitle"
+      :alertMessage="alertMessage"
+    ></AlertMessage>
   </section>
 </template>
 
@@ -86,6 +79,7 @@ import { MASTER_SETTINGS_KEY } from "@/db/tables/settings";
 import * as R from "ramda";
 import { SimpleSigner } from "@/libs/crypto";
 import * as didJwt from "did-jwt";
+import AlertMessage from "@/components/AlertMessage";
 
 // eslint-disable-next-line @typescript-eslint/no-var-requires
 const Buffer = require("buffer/").Buffer;
@@ -93,6 +87,7 @@ const Buffer = require("buffer/").Buffer;
 @Component({
   components: {
     QRCodeVue3,
+    AlertMessage,
   },
 })
 export default class ContactQRScanShow extends Vue {
@@ -144,25 +139,7 @@ export default class ContactQRScanShow extends Vue {
   }
 
   // This same popup code is in many files.
+  alertTitle = "";
   alertMessage = "";
-  public onClickClose() {
-    this.alertMessage = "";
-  }
-  public computedAlertClassNames() {
-    return {
-      hidden: !this.alertMessage,
-      "dismissable-alert": true,
-      "bg-slate-100": true,
-      "p-5": true,
-      rounded: true,
-      "drop-shadow-lg": true,
-      fixed: true,
-      "top-3": true,
-      "inset-x-3": true,
-      "transition-transform": true,
-      "ease-in": true,
-      "duration-300": true,
-    };
-  }
 }
 </script>

src/views/ContactsView.vue

@@ -230,19 +230,11 @@
         </div>
       </li>
     </ul>
+    <AlertMessage
+      :alertTitle="alertTitle"
+      :alertMessage="alertMessage"
+    ></AlertMessage>
   </section>
-
-  <!-- This same popup code is in many files. -->
-  <div v-bind:class="computedAlertClassNames()">
-    <button
-      class="close-button bg-slate-200 w-8 leading-loose rounded-full absolute top-2 right-2"
-      @click="onClickClose()"
-    >
-      <fa icon="xmark"></fa>
-    </button>
-    <h4 class="font-bold pr-5">{{ alertTitle }}</h4>
-    <p>{{ alertMessage }}</p>
-  </div>
 </template>
 
 <script lang="ts">
@@ -250,8 +242,8 @@ import { AxiosError } from "axios";
 import * as didJwt from "did-jwt";
 import * as R from "ramda";
 import { IIdentifier } from "@veramo/core";
-import { Options, Vue } from "vue-class-component";
 
+import { Component, Vue } from "vue-facing-decorator";
 import { accountsDB, db } from "@/db";
 import { Contact } from "@/db/tables/contacts";
 import { MASTER_SETTINGS_KEY } from "@/db/tables/settings";
@@ -266,8 +258,8 @@ import {
 // eslint-disable-next-line @typescript-eslint/no-var-requires
 const Buffer = require("buffer/").Buffer;
 
-@Options({
-  components: {},
+@Component({
+  components: { AlertMessage },
 })
 export default class ContactsView extends Vue {
   activeDid = "";
@@ -370,12 +362,10 @@ export default class ContactsView extends Vue {
         this.alertTitle = "Error With Server";
         this.alertMessage =
           "Got an error retrieving your given time from the server.";
-        this.isAlertVisible = true;
       }
     } catch (error) {
       this.alertTitle = "Error With Server";
       this.alertMessage = error as string;
-      this.isAlertVisible = true;
     }
 
     // load all the time I have received
@@ -424,12 +414,10 @@ export default class ContactsView extends Vue {
         this.alertTitle = "Error With Server";
         this.alertMessage =
           "Got an error retrieving your received time from the server.";
-        this.isAlertVisible = true;
       }
     } catch (error) {
       this.alertTitle = "Error With Server";
       this.alertMessage = error as string;
-      this.isAlertVisible = true;
     }
   }
 
@@ -540,14 +528,12 @@ export default class ContactsView extends Vue {
               message += " " + resp.data.success.embeddedRecordError;
             }
             this.alertMessage = message;
-            this.isAlertVisible = true;
           } else if (resp.data?.success?.handleId) {
             contact.registered = true;
             db.contacts.update(contact.did, { registered: true });
 
             this.alertTitle = "Registration Success";
             this.alertMessage = contact.name + " has been registered.";
-            this.isAlertVisible = true;
           }
         } catch (error) {
           let userMessage = "There was an error. See logs for more info.";
@@ -564,7 +550,6 @@ export default class ContactsView extends Vue {
           // Now set that error for the user to see.
           this.alertTitle = "Error With Server";
           this.alertMessage = userMessage;
-          this.isAlertVisible = true;
         }
       }
     }
@@ -603,12 +588,10 @@ export default class ContactsView extends Vue {
         } else {
           this.alertMessage = "Bad server response of " + resp.status;
         }
-        this.isAlertVisible = true;
       }
     } catch (err) {
       this.alertTitle = "Error With Server";
       this.alertMessage = err as string;
-      this.isAlertVisible = true;
     }
   }
 
@@ -644,7 +627,6 @@ export default class ContactsView extends Vue {
           " can " +
           (visibility ? "" : "not ") +
           "see your activity.";
-        this.isAlertVisible = true;
       } else {
         this.alertTitle = "Error With Server";
         if (resp.data.error?.message) {
@@ -652,12 +634,10 @@ export default class ContactsView extends Vue {
         } else {
           this.alertMessage = "Bad server response of " + resp.status;
         }
-        this.isAlertVisible = true;
       }
     } catch (err) {
       this.alertTitle = "Error With Server";
       this.alertMessage = err as string;
-      this.isAlertVisible = true;
     }
   }
 
@@ -705,15 +685,12 @@ export default class ContactsView extends Vue {
       this.alertTitle = "Input Error";
       this.alertMessage =
         "This is not a valid number of hours: " + this.hourInput;
-      this.isAlertVisible = true;
     } else if (!parseFloat(this.hourInput)) {
       this.alertTitle = "Input Error";
       this.alertMessage = "Giving 0 hours does nothing.";
-      this.isAlertVisible = true;
     } else if (!identity) {
       this.alertTitle = "Status Error";
       this.alertMessage = "No identity is available.";
-      this.isAlertVisible = true;
     } else {
       // ask to confirm amount
       let toFrom;
@@ -804,7 +781,7 @@ export default class ContactsView extends Vue {
         if (resp.data?.success?.handleId) {
           this.alertTitle = "Done";
           this.alertMessage = "Successfully logged time to the server.";
-          this.isAlertVisible = true;
+
           if (fromDid === identity.did) {
             const newList = R.clone(this.givenByMeUnconfirmed);
             newList[toDid] = (newList[toDid] || 0) + amount;
@@ -830,7 +807,6 @@ export default class ContactsView extends Vue {
         // Now set that error for the user to see.
         this.alertTitle = "Error With Server";
         this.alertMessage = userMessage;
-        this.isAlertVisible = true;
       }
     }
   }
@@ -851,28 +827,6 @@ export default class ContactsView extends Vue {
   // This same popup code is in many files.
   alertTitle = "";
   alertMessage = "";
-  isAlertVisible = false;
-  public onClickClose() {
-    this.isAlertVisible = false;
-    this.alertTitle = "";
-    this.alertMessage = "";
-  }
-  public computedAlertClassNames() {
-    return {
-      hidden: !this.isAlertVisible,
-      "dismissable-alert": true,
-      "bg-slate-100": true,
-      "p-5": true,
-      rounded: true,
-      "drop-shadow-lg": true,
-      fixed: true,
-      "top-3": true,
-      "inset-x-3": true,
-      "transition-transform": true,
-      "ease-in": true,
-      "duration-300": true,
-    };
-  }
 
   public showGiveAmountsClassNames() {
     return {

src/views/DiscoverView.vue

@@ -153,30 +153,24 @@
         </a>
       </li>
     </ul>
-
-    <!-- This same popup code is in many files. -->
-    <div v-bind:class="computedAlertClassNames()">
-      <button
-        class="close-button bg-slate-200 w-8 leading-loose rounded-full absolute top-2 right-2"
-        @click="onClickClose()"
-      >
-        <fa icon="xmark"></fa>
-      </button>
-      <h4 class="font-bold pr-5">{{ alertTitle }}</h4>
-      <p>{{ alertMessage }}</p>
-    </div>
+    <AlertMessage
+      :alertTitle="alertTitle"
+      :alertMessage="alertMessage"
+    ></AlertMessage>
   </section>
 </template>
 
 <script lang="ts">
-import { Options, Vue } from "vue-class-component";
+import { Component, Vue } from "vue-facing-decorator";
+
 import { accountsDB, db } from "@/db";
 import { MASTER_SETTINGS_KEY } from "@/db/tables/settings";
 import * as R from "ramda";
 import { accessToken } from "@/libs/crypto";
+import AlertMessage from "@/components/AlertMessage";
 
-@Options({
-  components: {},
+@Component({
+  components: { AlertMessage },
 })
 export default class DiscoverView extends Vue {
   activeDid = "";
@@ -237,28 +231,7 @@ export default class DiscoverView extends Vue {
       });
   }
 
-  // This same popup code is in many files.
   alertMessage = "";
   alertTitle = "";
-  public onClickClose() {
-    this.alertTitle = "";
-    this.alertMessage = "";
-  }
-  public computedAlertClassNames() {
-    return {
-      hidden: !this.alertMessage,
-      "dismissable-alert": true,
-      "bg-slate-100": true,
-      "p-5": true,
-      rounded: true,
-      "drop-shadow-lg": true,
-      fixed: true,
-      "top-3": true,
-      "inset-x-3": true,
-      "transition-transform": true,
-      "ease-in": true,
-      "duration-300": true,
-    };
-  }
 }
 </script>

src/views/HomeView.vue

@@ -106,18 +106,10 @@
       </ul>
     </div>
   </section>
-
-  <!-- This same popup code is in many files. -->
-  <div v-bind:class="computedAlertClassNames()">
-    <button
-      class="close-button bg-slate-200 w-8 leading-loose rounded-full absolute top-2 right-2"
-      @click="onClickClose()"
-    >
-      <fa icon="xmark"></fa>
-    </button>
-    <h4 class="font-bold pr-5">{{ alertTitle }}</h4>
-    <p>{{ alertMessage }}</p>
-  </div>
+  <AlertMessage
+    :alertTitle="alertTitle"
+    :alertMessage="alertMessage"
+  ></AlertMessage>
 </template>
 
 <script lang="ts">
@@ -131,9 +123,10 @@ import { accessToken } from "@/libs/crypto";
 import { createAndSubmitGive, didInfo } from "@/libs/endorserServer";
 import { Account } from "@/db/tables/accounts";
 import { Contact } from "@/db/tables/contacts";
+import AlertMessage from "@/components/AlertMessage";
 
 @Options({
-  components: { GiftedDialog },
+  components: { GiftedDialog, AlertMessage },
 })
 export default class HomeView extends Vue {
   activeDid = "";
@@ -145,28 +138,22 @@ export default class HomeView extends Vue {
   feedPreviousOldestId = null;
   feedLastViewedId = null;
   isHiddenSpinner = true;
+  alertTitle = "";
+  alertMessage = "";
 
   // 'created' hook runs when the Vue instance is first created
   async created() {
+    try {
       await accountsDB.open();
       this.allAccounts = await accountsDB.accounts.toArray();
       await db.open();
       const settings = await db.settings.get(MASTER_SETTINGS_KEY);
+      this.apiServer = settings?.apiServer || "";
       this.activeDid = settings?.activeDid || "";
       this.allContacts = await db.contacts.toArray();
       this.feedLastViewedId = settings?.lastViewedClaimId;
-  }
-
-  // 'mounted' hook runs after initial render
-  async mounted() {
-    try {
-      await db.open();
-      const settings = await db.settings.get(MASTER_SETTINGS_KEY);
-      this.apiServer = settings?.apiServer || "";
-
       this.updateAllFeed();
     } catch (err) {
-      console.log("Error in mounted():", err);
       this.alertTitle = "Error";
       this.alertMessage =
         err.userMessage ||
@@ -217,7 +204,6 @@ export default class HomeView extends Vue {
         (acc) => acc.did === this.activeDid,
         this.allAccounts
       );
-      //console.log("about to parse from", this.activeDid, account?.identity);
       const identity = JSON.parse(account?.identity || "null");
       if (!identity) {
         throw new Error("No identity found.");
@@ -351,29 +337,5 @@ export default class HomeView extends Vue {
           "There was an error recording the give.";
       });
   }
-
-  // This same popup code is in many files.
-  alertMessage = "";
-  alertTitle = "";
-  public onClickClose() {
-    this.alertTitle = "";
-    this.alertMessage = "";
-  }
-  public computedAlertClassNames() {
-    return {
-      hidden: !this.alertMessage,
-      "dismissable-alert": true,
-      "bg-slate-100": true,
-      "p-5": true,
-      rounded: true,
-      "drop-shadow-lg": true,
-      fixed: true,
-      "top-3": true,
-      "inset-x-3": true,
-      "transition-transform": true,
-      "ease-in": true,
-      "duration-300": true,
-    };
-  }
 }
 </script>

src/views/NewEditProjectView.vue

@@ -63,32 +63,25 @@
         Cancel
       </button>
     </div>
+    <AlertMessage
+      :alertTitle="alertTitle"
+      :alertMessage="alertMessage"
+    ></AlertMessage>
   </section>
-
-  <!-- This same popup code is in many files. -->
-  <div v-bind:class="computedAlertClassNames()">
-    <button
-      class="close-button bg-slate-200 w-8 leading-loose rounded-full absolute top-2 right-2"
-      @click="onClickClose()"
-    >
-      <fa icon="xmark"></fa>
-    </button>
-    <h4 class="font-bold pr-5">{{ alertTitle }}</h4>
-    <p>{{ alertMessage }}</p>
-  </div>
 </template>
 
 <script lang="ts">
 import { AxiosError } from "axios";
 import * as didJwt from "did-jwt";
 import * as R from "ramda";
-import { Options, Vue } from "vue-class-component";
+import { Component, Vue } from "vue-facing-decorator";
 
 import { accountsDB, db } from "@/db";
 import { MASTER_SETTINGS_KEY } from "@/db/tables/settings";
 import { accessToken, SimpleSigner } from "@/libs/crypto";
 import { useAppStore } from "@/store/app";
 import { IIdentifier } from "@veramo/core";
+import AlertMessage from "@/components/AlertMessage";
 
 interface VerifiableCredential {
   "@context": string;
@@ -98,8 +91,8 @@ interface VerifiableCredential {
   identifier?: string;
 }
 
-@Options({
-  components: {},
+@Component({
+  components: { AlertMessage },
 })
 export default class NewEditProjectView extends Vue {
   activeDid = "";
@@ -229,7 +222,6 @@ export default class NewEditProjectView extends Vue {
         let userMessage = "There was an error saving the project.";
         const serverError = error as AxiosError;
         if (serverError) {
-          this.isAlertVisible = true;
           if (Object.prototype.hasOwnProperty.call(serverError, "message")) {
             console.log(serverError);
             this.alertTitle = "User Message";
@@ -278,27 +270,5 @@ export default class NewEditProjectView extends Vue {
   // This same popup code is in many files.
   alertTitle = "";
   alertMessage = "";
-  isAlertVisible = false;
-  public onClickClose() {
-    this.isAlertVisible = false;
-    this.alertTitle = "";
-    this.alertMessage = "";
-  }
-  public computedAlertClassNames() {
-    return {
-      hidden: !this.isAlertVisible,
-      "dismissable-alert": true,
-      "bg-slate-100": true,
-      "p-5": true,
-      rounded: true,
-      "drop-shadow-lg": true,
-      fixed: true,
-      "top-3": true,
-      "inset-x-3": true,
-      "transition-transform": true,
-      "ease-in": true,
-      "duration-300": true,
-    };
-  }
 }
 </script>

src/views/ProjectViewView.vue

@@ -179,18 +179,10 @@
       </ul>
     </div>
     -->
-
-    <!-- This same popup code is in many files. -->
-    <div v-bind:class="computedAlertClassNames()">
-      <button
-        class="close-button bg-slate-200 w-8 leading-loose rounded-full absolute top-2 right-2"
-        @click="onClickClose()"
-      >
-        <fa icon="xmark"></fa>
-      </button>
-      <h4 class="font-bold pr-5">{{ alertTitle }}</h4>
-      <p>{{ alertMessage }}</p>
-    </div>
+    <AlertMessage
+      :alertTitle="alertTitle"
+      :alertMessage="alertMessage"
+    ></AlertMessage>
   </section>
 </template>
 
@@ -198,7 +190,7 @@
 import { AxiosError } from "axios";
 import * as moment from "moment";
 import * as R from "ramda";
-import { Options, Vue } from "vue-class-component";
+import { Component, Vue } from "vue-facing-decorator";
 
 import GiftedDialog from "@/components/GiftedDialog.vue";
 import { accountsDB, db } from "@/db";
@@ -207,9 +199,10 @@ import { MASTER_SETTINGS_KEY } from "@/db/tables/settings";
 import { createAndSubmitGive } from "@/libs/endorserServer";
 import { accessToken } from "@/libs/crypto";
 import { IIdentifier } from "@veramo/core";
+import AlertMessage from "@/components/AlertMessage";
 
-@Options({
-  components: { GiftedDialog },
+@Component({
+  components: { GiftedDialog, AlertMessage },
 })
 export default class ProjectViewView extends Vue {
   activeDid = "";
@@ -379,25 +372,5 @@ export default class ProjectViewView extends Vue {
   // This same popup code is in many files.
   alertMessage = "";
   alertTitle = "";
-  public onClickClose() {
-    this.alertTitle = "";
-    this.alertMessage = "";
-  }
-  public computedAlertClassNames() {
-    return {
-      hidden: !this.alertMessage,
-      "dismissable-alert": true,
-      "bg-slate-100": true,
-      "p-5": true,
-      rounded: true,
-      "drop-shadow-lg": true,
-      fixed: true,
-      "top-3": true,
-      "inset-x-3": true,
-      "transition-transform": true,
-      "ease-in": true,
-      "duration-300": true,
-    };
-  }
 }
 </script>

src/views/ProjectsView.vue

@@ -107,18 +107,22 @@
         </li>
       </ul>
     </InfiniteScroll>
+    <AlertMessage
+      :alertTitle="alertTitle"
+      :alertMessage="alertMessage"
+    ></AlertMessage>
   </section>
 </template>
 
 <script lang="ts">
 import * as R from "ramda";
 import { Component, Vue } from "vue-facing-decorator";
-
 import { accountsDB, db } from "@/db";
 import { MASTER_SETTINGS_KEY } from "@/db/tables/settings";
 import { accessToken } from "@/libs/crypto";
 import { IIdentifier } from "@veramo/core";
 import InfiniteScroll from "@/components/InfiniteScroll";
+import AlertMessage from "@/components/AlertMessage";
 
 /**
  * Represents data about a project
@@ -143,13 +147,15 @@ interface ProjectData {
 }
 
 @Component({
-  components: { InfiniteScroll },
+  components: { InfiniteScroll, AlertMessage },
 })
 export default class ProjectsView extends Vue {
   apiServer = "";
   projects: ProjectData[] = [];
   current: IIdentifier;
   isLoading = false;
+  alertTitle = "";
+  alertMessage = "";
 
   /**
    * Core project data loader
@@ -171,9 +177,13 @@ export default class ProjectsView extends Vue {
           const { name, description, handleId = plan.fullIri, rowid } = plan;
           this.projects.push({ name, description, handleId, rowid });
         }
+      } else {
+        console.log(resp.status);
       }
     } catch (error) {
-      console.error("Got error loading projects:", error);
+      console.error("Got error loading projects:", error.message);
+      this.alertTitle = "Error";
+      this.alertMessage = "Got an error loading projects:" + error.message;
     } finally {
       this.isLoading = false;
     }
@@ -218,6 +228,7 @@ export default class ProjectsView extends Vue {
    * '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 || "";
@@ -226,7 +237,9 @@ export default class ProjectsView extends Vue {
       await accountsDB.open();
       const num_accounts = await accountsDB.accounts.count();
       if (num_accounts === 0) {
-      console.error("Problem!  Should have a profile!");
+        console.error("Problem! You need a profile!");
+        this.alertTitle = "Error!";
+        this.alertMessage = "Problem!  You need a profile!";
       } else {
         const accounts = await accountsDB.accounts.toArray();
         const account = R.find((acc) => acc.did === activeDid, accounts);
@@ -237,6 +250,11 @@ export default class ProjectsView extends Vue {
         this.current = identity;
         this.LoadProjects(identity);
       }
+    } catch (err) {
+      console.log(err);
+      this.alertTitle = "Error!";
+      this.alertMessage = "Problem!  You need a profile!";
+    }
   }
 
   /**

src/views/SeedBackupView.vue

@@ -85,18 +85,10 @@
       <p v-if="showSeed">{{ activeAccount.mnemonic }}</p>
     </div>
     <div v-else>You do not have an active identity.</div>
-
-    <!-- This same popup code is in many files. -->
-    <div v-bind:class="computedAlertClassNames()">
-      <button
-        class="close-button bg-slate-200 w-8 leading-loose rounded-full absolute top-2 right-2"
-        @click="onClickClose()"
-      >
-        <fa icon="xmark"></fa>
-      </button>
-      <h4 class="font-bold pr-5">{{ alertTitle }}</h4>
-      <p>{{ alertMessage }}</p>
-    </div>
+    <AlertMessage
+      :alertTitle="alertTitle"
+      :alertMessage="alertMessage"
+    ></AlertMessage>
   </section>
 </template>
 
@@ -105,11 +97,14 @@ import { Component, Vue } from "vue-facing-decorator";
 import { accountsDB, db } from "@/db";
 import * as R from "ramda";
 import { MASTER_SETTINGS_KEY } from "@/db/tables/settings";
+import AlertMessage from "@/components/AlertMessage";
 
-@Component
+@Component({ components: { AlertMessage } })
 export default class SeedBackupView extends Vue {
   activeAccount = null;
   showSeed = false;
+  alertMessage = "";
+  alertTitle = "";
 
   // 'created' hook runs when the Vue instance is first created
   async created() {
@@ -125,38 +120,11 @@ export default class SeedBackupView extends Vue {
       console.error("Got an error loading an identity:", err);
       this.alertTitle = "Error Loading Account";
       this.alertMessage = "Got an error loading your seed data.";
-      this.isAlertVisible = true;
     }
   }
 
   showSeedPhrase() {
     this.showSeed = true;
   }
-
-  // This same popup code is in many files.
-  alertMessage = "";
-  alertTitle = "";
-  isAlertVisible = false;
-  public onClickClose() {
-    this.isAlertVisible = false;
-    this.alertTitle = "";
-    this.alertMessage = "";
-  }
-  public computedAlertClassNames() {
-    return {
-      hidden: !this.isAlertVisible,
-      "dismissable-alert": true,
-      "bg-slate-100": true,
-      "p-5": true,
-      rounded: true,
-      "drop-shadow-lg": true,
-      fixed: true,
-      "top-3": true,
-      "inset-x-3": true,
-      "transition-transform": true,
-      "ease-in": true,
-      "duration-300": true,
-    };
-  }
 }
 </script>

src/views/StatisticsView.vue

@@ -79,22 +79,11 @@
         {{ worldProperties.animationDurationSeconds }} seconds
       </div>
     </div>
-
     <button class="float-right" @click="captureGraphics()">Screenshot</button>
-
-    <!-- Another place to play with the sizing is in Resizer.setSize -->
-    <div id="scene-container" class="h-screen"></div>
-
-    <div v-bind:class="computedAlertClassNames()">
-      <button
-        class="close-button bg-slate-200 w-8 leading-loose rounded-full absolute top-2 right-2"
-        @click="onClickClose()"
-      >
-        <fa icon="xmark"></fa>
-      </button>
-      <h4 class="font-bold pr-5">{{ alertTitle }}</h4>
-      <p>{{ alertMessage }}</p>
-    </div>
+    <AlertMessage
+      :alertTitle="alertTitle"
+      :alertMessage="alertMessage"
+    ></AlertMessage>   
   </section>
 </template>
 
@@ -102,13 +91,14 @@
 import { SVGRenderer } from "three/addons/renderers/SVGRenderer.js";
 import { Component, Vue } from "vue-facing-decorator";
 import { World } from "@/components/World/World.js";
+import AlertMessage from "@/components/AlertMessage";
 
 interface WorldProperties {
   startTime?: string;
   endTime?: string;
 }
 
-@Component
+@Component({ components: { AlertMessage } })
 export default class StatisticsView extends Vue {
   world: World;
   worldProperties: WorldProperties = {};
@@ -197,36 +187,6 @@ export default class StatisticsView extends Vue {
 
   alertTitle = "";
   alertMessage = "";
-  isAlertVisible = false;
-
-  public setAlert(title, message) {
-    this.alertTitle = title;
-    this.alertMessage = message;
-    this.isAlertVisible = true;
-  }
-
-  public onClickClose() {
-    this.isAlertVisible = false;
-    this.alertTitle = "";
-    this.alertMessage = "";
-  }
-
-  public computedAlertClassNames() {
-    return {
-      hidden: !this.isAlertVisible,
-      "dismissable-alert": true,
-      "bg-slate-100": true,
-      "p-5": true,
-      rounded: true,
-      "drop-shadow-lg": true,
-      fixed: true,
-      "top-3": true,
-      "inset-x-3": true,
-      "transition-transform": true,
-      "ease-in": true,
-      "duration-300": true,
-    };
-  }
 }
 
 function ExportToSVG(rendererSVG, filename) {