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,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!";
+    }
   }
 
   /**