Add AlertMessage component

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 || "";
+    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!  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.");
+      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!";
     }
   }