Propagated AlertMessage component

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>