From b139957e3e14f6d06fb34c4368cf8c0ca7d3a344 Mon Sep 17 00:00:00 2001
From: Matthew Raymer <matthew.raymer@anomalistdesign.com>
Date: Mon, 3 Jul 2023 18:44:42 +0800
Subject: [PATCH 01/12] Added identity check

---
 src/components/World/components/objects/landmarks.js | 3 +++
 1 file changed, 3 insertions(+)

diff --git a/src/components/World/components/objects/landmarks.js b/src/components/World/components/objects/landmarks.js
index 3c6dbfaf..a4603376 100644
--- a/src/components/World/components/objects/landmarks.js
+++ b/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";

From 3f6dbdebef973c54ceb23f335a2747f252db5307 Mon Sep 17 00:00:00 2001
From: Matthew Raymer <matthew.raymer@anomalistdesign.com>
Date: Mon, 3 Jul 2023 18:46:23 +0800
Subject: [PATCH 02/12] Moved checkLimits inside try...catch since it has an
 identity check

---
 src/views/AccountViewView.vue | 3 +--
 1 file changed, 1 insertion(+), 2 deletions(-)

diff --git a/src/views/AccountViewView.vue b/src/views/AccountViewView.vue
index 17e6e2de..d268dde7 100644
--- a/src/views/AccountViewView.vue
+++ b/src/views/AccountViewView.vue
@@ -420,6 +420,7 @@ 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).";
@@ -427,8 +428,6 @@ export default class AccountViewView extends Vue {
       this.alertTitle = "Error Creating Account";
       this.isAlertVisible = true;
     }
-
-    this.checkLimits();
   }
 
   public async updateShowContactAmounts() {

From 99ea161da01e123da772992c4be8ac931e106c36 Mon Sep 17 00:00:00 2001
From: Matthew Raymer <matthew.raymer@anomalistdesign.com>
Date: Mon, 3 Jul 2023 18:48:01 +0800
Subject: [PATCH 03/12] Removed created() and relocated to mounted() could not
 replicate issue

---
 src/views/HomeView.vue | 19 +++++--------------
 1 file changed, 5 insertions(+), 14 deletions(-)

diff --git a/src/views/HomeView.vue b/src/views/HomeView.vue
index 3056d921..f9af6e15 100644
--- a/src/views/HomeView.vue
+++ b/src/views/HomeView.vue
@@ -148,25 +148,17 @@ export default class HomeView extends Vue {
 
   // 'created' hook runs when the Vue instance is first created
   async created() {
-    await accountsDB.open();
-    this.allAccounts = await accountsDB.accounts.toArray();
-    await db.open();
-    const settings = await db.settings.get(MASTER_SETTINGS_KEY);
-    this.activeDid = settings?.activeDid || "";
-    this.allContacts = await db.contacts.toArray();
-    this.feedLastViewedId = settings?.lastViewedClaimId;
-  }
-
-  // 'mounted' hook runs after initial render
-  async mounted() {
     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;
       this.updateAllFeed();
     } catch (err) {
-      console.log("Error in mounted():", err);
       this.alertTitle = "Error";
       this.alertMessage =
         err.userMessage ||
@@ -217,7 +209,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.");

From bcc6de6fc0a3af4be4170c812c232e0451542785 Mon Sep 17 00:00:00 2001
From: Matthew Raymer <matthew.raymer@anomalistdesign.com>
Date: Mon, 3 Jul 2023 19:40:53 +0800
Subject: [PATCH 04/12] New AlertMessage component

---
 src/components/AlertMessage.vue | 48 +++++++++++++++++++++++++++++++++
 1 file changed, 48 insertions(+)
 create mode 100644 src/components/AlertMessage.vue

diff --git a/src/components/AlertMessage.vue b/src/components/AlertMessage.vue
new file mode 100644
index 00000000..9e8666ef
--- /dev/null
+++ b/src/components/AlertMessage.vue
@@ -0,0 +1,48 @@
+<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, Vue } from "vue-facing-decorator";
+
+@Component
+export default class AlertMessage extends Vue {
+  alertTitle = "";
+  alertMessage = "";
+
+  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>
+
+<!-- Add "scoped" attribute to limit CSS to this component only -->
+<style scoped></style>

From 8d8635a3e6c8051c92e1712277d2e09c0d64cc85 Mon Sep 17 00:00:00 2001
From: Matthew Raymer <matthew.raymer@anomalistdesign.com>
Date: Mon, 3 Jul 2023 19:44:41 +0800
Subject: [PATCH 05/12] Added try...catch and linted

---
 src/components/AlertMessage.vue  | 21 ++++++++++-----------
 src/views/ContactAmountsView.vue | 23 +++++++++++++++--------
 2 files changed, 25 insertions(+), 19 deletions(-)

diff --git a/src/components/AlertMessage.vue b/src/components/AlertMessage.vue
index 9e8666ef..f425e66d 100644
--- a/src/components/AlertMessage.vue
+++ b/src/components/AlertMessage.vue
@@ -1,14 +1,14 @@
 <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>
+  <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">
@@ -40,7 +40,6 @@ export default class AlertMessage extends Vue {
       "duration-300": true,
     };
   }
-
 }
 </script>
 
diff --git a/src/views/ContactAmountsView.vue b/src/views/ContactAmountsView.vue
index b05099f0..1b1b46fb 100644
--- a/src/views/ContactAmountsView.vue
+++ b/src/views/ContactAmountsView.vue
@@ -150,16 +150,23 @@ export default class ContactsView extends Vue {
 
   // 'created' hook runs when the Vue instance is first created
   async created() {
-    await db.open();
-    const contactDid = this.$route.query.contactDid as string;
-    this.contact = (await db.contacts.get(contactDid)) || null;
+    try {
+      await db.open();
+      const contactDid = this.$route.query.contactDid as string;
+      this.contact = (await db.contacts.get(contactDid)) || null;
 
-    const settings = await db.settings.get(MASTER_SETTINGS_KEY);
-    this.activeDid = settings?.activeDid || "";
-    this.apiServer = settings?.apiServer || "";
+      const settings = await db.settings.get(MASTER_SETTINGS_KEY);
+      this.activeDid = settings?.activeDid || "";
+      this.apiServer = settings?.apiServer || "";
 
-    if (this.activeDid && this.contact) {
-      this.loadGives(this.activeDid, this.contact);
+      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.";
     }
   }
 

From 3c977a1f281c0a4a3b5705f0368715656d462f43 Mon Sep 17 00:00:00 2001
From: Matthew Raymer <matthew.raymer@anomalistdesign.com>
Date: Mon, 3 Jul 2023 20:24:23 +0800
Subject: [PATCH 06/12] First roll out of an AlertMessage control

---
 src/components/AlertMessage.vue |  6 ++---
 src/views/HomeView.vue          | 45 ++++++---------------------------
 2 files changed, 11 insertions(+), 40 deletions(-)

diff --git a/src/components/AlertMessage.vue b/src/components/AlertMessage.vue
index f425e66d..00fee10a 100644
--- a/src/components/AlertMessage.vue
+++ b/src/components/AlertMessage.vue
@@ -12,12 +12,12 @@
 </template>
 
 <script lang="ts">
-import { Component, Vue } from "vue-facing-decorator";
+import { Component, Prop, Vue } from "vue-facing-decorator";
 
 @Component
 export default class AlertMessage extends Vue {
-  alertTitle = "";
-  alertMessage = "";
+  @Prop alertTitle = "";
+  @Prop alertMessage = "";
 
   public onClickClose() {
     this.alertTitle = "";
diff --git a/src/views/HomeView.vue b/src/views/HomeView.vue
index f9af6e15..4f3ba8e2 100644
--- a/src/views/HomeView.vue
+++ b/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,6 +138,8 @@ 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() {
@@ -342,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>

From 0af03227a652f36953a87de7d32bbe07939f4d33 Mon Sep 17 00:00:00 2001
From: Matthew Raymer <matthew.raymer@anomalistdesign.com>
Date: Mon, 3 Jul 2023 21:04:53 +0800
Subject: [PATCH 07/12] Propagated AlertMessage component

---
 src/views/AccountViewView.vue       | 41 +++----------------
 src/views/ContactAmountsView.vue    | 43 ++++----------------
 src/views/ContactQRScanShowView.vue | 37 ++++-------------
 src/views/ContactsView.vue          | 62 ++++-------------------------
 src/views/DiscoverView.vue          | 45 +++++----------------
 src/views/NewEditProjectView.vue    | 46 ++++-----------------
 src/views/ProjectViewView.vue       | 43 ++++----------------
 src/views/SeedBackupView.vue        | 41 +++----------------
 src/views/StatisticsView.vue        | 39 +++---------------
 9 files changed, 65 insertions(+), 332 deletions(-)

diff --git a/src/views/AccountViewView.vue b/src/views/AccountViewView.vue
index d268dde7..69569e28 100644
--- a/src/views/AccountViewView.vue
+++ b/src/views/AccountViewView.vue
@@ -307,18 +307,10 @@
         </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>
 
@@ -334,6 +326,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 +340,7 @@ interface RateLimits {
   nextWeekBeginDateTime: string;
 }
 
-@Component
+@Component({ components: { AlertMessage } })
 export default class AccountViewView extends Vue {
   Constants = AppString;
 
@@ -546,27 +539,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>
diff --git a/src/views/ContactAmountsView.vue b/src/views/ContactAmountsView.vue
index 1b1b46fb..d086b35b 100644
--- a/src/views/ContactAmountsView.vue
+++ b/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,8 +132,9 @@ 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 = "";
@@ -337,28 +330,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,
-    };
-  }
 }
 </script>
 
diff --git a/src/views/ContactQRScanShowView.vue b/src/views/ContactQRScanShowView.vue
index 0cdf6c5e..871dd254 100644
--- a/src/views/ContactQRScanShowView.vue
+++ b/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>
diff --git a/src/views/ContactsView.vue b/src/views/ContactsView.vue
index c2a4143f..0425b802 100644
--- a/src/views/ContactsView.vue
+++ b/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 {
diff --git a/src/views/DiscoverView.vue b/src/views/DiscoverView.vue
index f78623dc..06def7cd 100644
--- a/src/views/DiscoverView.vue
+++ b/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>
diff --git a/src/views/NewEditProjectView.vue b/src/views/NewEditProjectView.vue
index cee4e502..06698ce2 100644
--- a/src/views/NewEditProjectView.vue
+++ b/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>
diff --git a/src/views/ProjectViewView.vue b/src/views/ProjectViewView.vue
index dc9c5a90..89c54fc7 100644
--- a/src/views/ProjectViewView.vue
+++ b/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>
diff --git a/src/views/SeedBackupView.vue b/src/views/SeedBackupView.vue
index 9ad683dc..7aa06552 100644
--- a/src/views/SeedBackupView.vue
+++ b/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,8 +97,9 @@ 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;
@@ -136,27 +129,5 @@ export default class SeedBackupView 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>
diff --git a/src/views/StatisticsView.vue b/src/views/StatisticsView.vue
index 2913b209..af9797ba 100644
--- a/src/views/StatisticsView.vue
+++ b/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 = {};
@@ -210,23 +200,6 @@ export default class StatisticsView extends Vue {
     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) {

From c31445865e2f6b3038debc123dafd5df347f39a4 Mon Sep 17 00:00:00 2001
From: Matthew Raymer <matthew.raymer@anomalistdesign.com>
Date: Mon, 3 Jul 2023 21:05:45 +0800
Subject: [PATCH 08/12] Straggler

---
 src/views/SeedBackupView.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/views/SeedBackupView.vue b/src/views/SeedBackupView.vue
index 7aa06552..2b40202c 100644
--- a/src/views/SeedBackupView.vue
+++ b/src/views/SeedBackupView.vue
@@ -99,7 +99,7 @@ import * as R from "ramda";
 import { MASTER_SETTINGS_KEY } from "@/db/tables/settings";
 import AlertMessage from "@/components/AlertMessage";
 
-@Component({ components: [AlertMessage] })
+@Component({ components: {AlertMessage} })
 export default class SeedBackupView extends Vue {
   activeAccount = null;
   showSeed = false;

From 0fd4b86a8457fd6fe1faf6d1aa2ded5d5c8b6df4 Mon Sep 17 00:00:00 2001
From: Matthew Raymer <matthew.raymer@anomalistdesign.com>
Date: Mon, 3 Jul 2023 21:06:24 +0800
Subject: [PATCH 09/12] A bit of linting

---
 src/views/SeedBackupView.vue | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/src/views/SeedBackupView.vue b/src/views/SeedBackupView.vue
index 2b40202c..359fea0e 100644
--- a/src/views/SeedBackupView.vue
+++ b/src/views/SeedBackupView.vue
@@ -99,7 +99,7 @@ import * as R from "ramda";
 import { MASTER_SETTINGS_KEY } from "@/db/tables/settings";
 import AlertMessage from "@/components/AlertMessage";
 
-@Component({ components: {AlertMessage} })
+@Component({ components: { AlertMessage } })
 export default class SeedBackupView extends Vue {
   activeAccount = null;
   showSeed = false;

From c24022c41cf9450c979250d4fb7216c99cf7f079 Mon Sep 17 00:00:00 2001
From: Matthew Raymer <matthew.raymer@anomalistdesign.com>
Date: Tue, 4 Jul 2023 19:26:05 +0800
Subject: [PATCH 10/12] Make the visibility of the Alert indirect

---
 src/components/AlertMessage.vue | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

diff --git a/src/components/AlertMessage.vue b/src/components/AlertMessage.vue
index 00fee10a..6f3ea5b1 100644
--- a/src/components/AlertMessage.vue
+++ b/src/components/AlertMessage.vue
@@ -18,15 +18,15 @@ import { Component, Prop, Vue } from "vue-facing-decorator";
 export default class AlertMessage extends Vue {
   @Prop alertTitle = "";
   @Prop alertMessage = "";
+  isAlertVisible = this.alertMessage;
 
   public onClickClose() {
-    this.alertTitle = "";
-    this.alertMessage = "";
+    this.isAlertVisible = false;
   }
 
   public computedAlertClassNames() {
     return {
-      hidden: !this.alertMessage,
+      hidden: !this.isAlertVisible,
       "dismissable-alert": true,
       "bg-slate-100": true,
       "p-5": true,

From c859778832f663da9d3782f7cc20d224b46afe8f Mon Sep 17 00:00:00 2001
From: Matthew Raymer <matthew.raymer@anomalistdesign.com>
Date: Tue, 4 Jul 2023 19:27:57 +0800
Subject: [PATCH 11/12] Add AlertMessage component

---
 src/views/ProjectsView.vue | 58 +++++++++++++++++++++++++-------------
 1 file changed, 38 insertions(+), 20 deletions(-)

diff --git a/src/views/ProjectsView.vue b/src/views/ProjectsView.vue
index a0dbe958..99596414 100644
--- a/src/views/ProjectsView.vue
+++ b/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,24 +228,32 @@ export default class ProjectsView 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 activeDid = settings?.activeDid || "";
-    this.apiServer = settings?.apiServer || "";
-
-    await accountsDB.open();
-    const num_accounts = await accountsDB.accounts.count();
-    if (num_accounts === 0) {
-      console.error("Problem!  Should have a profile!");
-    } else {
-      const accounts = await accountsDB.accounts.toArray();
-      const account = R.find((acc) => acc.did === activeDid, accounts);
-      const identity = JSON.parse(account?.identity || "null");
-      if (!identity) {
-        throw new Error("No identity found.");
+    try {
+      await db.open();
+      const settings = await db.settings.get(MASTER_SETTINGS_KEY);
+      const activeDid = settings?.activeDid || "";
+      this.apiServer = settings?.apiServer || "";
+
+      await accountsDB.open();
+      const num_accounts = await accountsDB.accounts.count();
+      if (num_accounts === 0) {
+        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);
+        const identity = JSON.parse(account?.identity || "null");
+        if (!identity) {
+          throw new Error("No identity found.");
+        }
+        this.current = identity;
+        this.LoadProjects(identity);
       }
-      this.current = identity;
-      this.LoadProjects(identity);
+    } catch (err) {
+      console.log(err);
+      this.alertTitle = "Error!";
+      this.alertMessage = "Problem!  You need a profile!";
     }
   }
 

From 0a020a40691f61986133e3855ce7cca55f641c52 Mon Sep 17 00:00:00 2001
From: Matthew Raymer <matthew.raymer@anomalistdesign.com>
Date: Tue, 4 Jul 2023 19:29:12 +0800
Subject: [PATCH 12/12] Clean up vestigle old alert code

---
 src/views/AccountViewView.vue    |  5 -----
 src/views/ContactAmountsView.vue | 11 ++---------
 src/views/SeedBackupView.vue     |  7 ++-----
 src/views/StatisticsView.vue     | 13 -------------
 4 files changed, 4 insertions(+), 32 deletions(-)

diff --git a/src/views/AccountViewView.vue b/src/views/AccountViewView.vue
index 69569e28..ed2c7df0 100644
--- a/src/views/AccountViewView.vue
+++ b/src/views/AccountViewView.vue
@@ -317,7 +317,6 @@
 <script lang="ts">
 import "dexie-export-import";
 import * as R from "ramda";
-
 import { Component, Vue } from "vue-facing-decorator";
 import { useClipboard } from "@vueuse/core";
 
@@ -419,7 +418,6 @@ export default class AccountViewView extends Vue {
         "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;
     }
   }
 
@@ -437,7 +435,6 @@ export default class AccountViewView extends Vue {
         err
       );
       this.alertTitle = "Error Updating Contact Setting";
-      this.isAlertVisible = true;
     }
   }
 
@@ -455,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);
     }
   }
diff --git a/src/views/ContactAmountsView.vue b/src/views/ContactAmountsView.vue
index d086b35b..3912731c 100644
--- a/src/views/ContactAmountsView.vue
+++ b/src/views/ContactAmountsView.vue
@@ -140,6 +140,8 @@ export default class ContactsView extends Vue {
   apiServer = "";
   contact: Contact | null = null;
   giveRecords: Array<GiveServerRecord> = [];
+  alertTitle = "";
+  alertMessage = "";
 
   // 'created' hook runs when the Vue instance is first created
   async created() {
@@ -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,12 +322,7 @@ 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 = "";
 }
 </script>
 
diff --git a/src/views/SeedBackupView.vue b/src/views/SeedBackupView.vue
index 359fea0e..f896b042 100644
--- a/src/views/SeedBackupView.vue
+++ b/src/views/SeedBackupView.vue
@@ -103,6 +103,8 @@ import AlertMessage from "@/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() {
@@ -118,16 +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 = "";
 }
 </script>
diff --git a/src/views/StatisticsView.vue b/src/views/StatisticsView.vue
index af9797ba..36684b80 100644
--- a/src/views/StatisticsView.vue
+++ b/src/views/StatisticsView.vue
@@ -187,19 +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 = "";
-  }
 }
 
 function ExportToSVG(rendererSVG, filename) {