Propagated AlertMessage component

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 {