Propagated AlertMessage component

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>