From 0af03227a652f36953a87de7d32bbe07939f4d33 Mon Sep 17 00:00:00 2001
From: Matthew Raymer <matthew.raymer@anomalistdesign.com>
Date: Mon, 3 Jul 2023 21:04:53 +0800
Subject: [PATCH] Propagated AlertMessage component

---
 src/views/AccountViewView.vue       | 41 +++----------------
 src/views/ContactAmountsView.vue    | 43 ++++----------------
 src/views/ContactQRScanShowView.vue | 37 ++++-------------
 src/views/ContactsView.vue          | 62 ++++-------------------------
 src/views/DiscoverView.vue          | 45 +++++----------------
 src/views/NewEditProjectView.vue    | 46 ++++-----------------
 src/views/ProjectViewView.vue       | 43 ++++----------------
 src/views/SeedBackupView.vue        | 41 +++----------------
 src/views/StatisticsView.vue        | 39 +++---------------
 9 files changed, 65 insertions(+), 332 deletions(-)

diff --git a/src/views/AccountViewView.vue b/src/views/AccountViewView.vue
index d268dde75..69569e281 100644
--- a/src/views/AccountViewView.vue
+++ b/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>
diff --git a/src/views/ContactAmountsView.vue b/src/views/ContactAmountsView.vue
index 1b1b46fb1..d086b35bf 100644
--- a/src/views/ContactAmountsView.vue
+++ b/src/views/ContactAmountsView.vue
@@ -109,25 +109,17 @@
         </div>
       </div>
     </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>
 
 <script lang="ts">
 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 { Contact } from "@/db/tables/contacts";
 import { MASTER_SETTINGS_KEY } from "@/db/tables/settings";
@@ -140,8 +132,9 @@ import {
 } from "@/libs/endorserServer";
 import * as didJwt from "did-jwt";
 import { AxiosError } from "axios";
+import AlertMessage from "@/components/AlertMessage";
 
-@Options({})
+@Component({ components: { AlertMessage } })
 export default class ContactsView extends Vue {
   activeDid = "";
   apiServer = "";
@@ -337,28 +330,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,
-    };
-  }
 }
 </script>
 
diff --git a/src/views/ContactQRScanShowView.vue b/src/views/ContactQRScanShowView.vue
index 0cdf6c5e6..871dd254f 100644
--- a/src/views/ContactQRScanShowView.vue
+++ b/src/views/ContactQRScanShowView.vue
@@ -64,17 +64,10 @@
       :dotsOptions="{ type: 'square' }"
       class="flex justify-center"
     />
-
-    <!-- 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>
-      <p>{{ alertMessage }}</p>
-    </div>
+    <AlertMessage
+      :alertTitle="alertTitle"
+      :alertMessage="alertMessage"
+    ></AlertMessage>
   </section>
 </template>
 
@@ -86,6 +79,7 @@ import { MASTER_SETTINGS_KEY } from "@/db/tables/settings";
 import * as R from "ramda";
 import { SimpleSigner } from "@/libs/crypto";
 import * as didJwt from "did-jwt";
+import AlertMessage from "@/components/AlertMessage";
 
 // eslint-disable-next-line @typescript-eslint/no-var-requires
 const Buffer = require("buffer/").Buffer;
@@ -93,6 +87,7 @@ const Buffer = require("buffer/").Buffer;
 @Component({
   components: {
     QRCodeVue3,
+    AlertMessage,
   },
 })
 export default class ContactQRScanShow extends Vue {
@@ -144,25 +139,7 @@ export default class ContactQRScanShow extends Vue {
   }
 
   // This same popup code is in many files.
+  alertTitle = "";
   alertMessage = "";
-  public onClickClose() {
-    this.alertMessage = "";
-  }
-  public computedAlertClassNames() {
-    return {
-      hidden: !this.alertMessage,
-      "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>
diff --git a/src/views/ContactsView.vue b/src/views/ContactsView.vue
index c2a4143f9..0425b8023 100644
--- a/src/views/ContactsView.vue
+++ b/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 {
diff --git a/src/views/DiscoverView.vue b/src/views/DiscoverView.vue
index f78623dc7..06def7cd0 100644
--- a/src/views/DiscoverView.vue
+++ b/src/views/DiscoverView.vue
@@ -153,30 +153,24 @@
         </a>
       </li>
     </ul>
-
-    <!-- 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>
 
 <script lang="ts">
-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 * as R from "ramda";
 import { accessToken } from "@/libs/crypto";
+import AlertMessage from "@/components/AlertMessage";
 
-@Options({
-  components: {},
+@Component({
+  components: { AlertMessage },
 })
 export default class DiscoverView extends Vue {
   activeDid = "";
@@ -237,28 +231,7 @@ export default class DiscoverView extends Vue {
       });
   }
 
-  // This same popup code is in many files.
   alertMessage = "";
   alertTitle = "";
-  public onClickClose() {
-    this.alertTitle = "";
-    this.alertMessage = "";
-  }
-  public computedAlertClassNames() {
-    return {
-      hidden: !this.alertMessage,
-      "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>
diff --git a/src/views/NewEditProjectView.vue b/src/views/NewEditProjectView.vue
index cee4e502d..06698ce2f 100644
--- a/src/views/NewEditProjectView.vue
+++ b/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>
diff --git a/src/views/ProjectViewView.vue b/src/views/ProjectViewView.vue
index dc9c5a90b..89c54fc7d 100644
--- a/src/views/ProjectViewView.vue
+++ b/src/views/ProjectViewView.vue
@@ -179,18 +179,10 @@
       </ul>
     </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>
 
@@ -198,7 +190,7 @@
 import { AxiosError } from "axios";
 import * as moment from "moment";
 import * as R from "ramda";
-import { Options, Vue } from "vue-class-component";
+import { Component, Vue } from "vue-facing-decorator";
 
 import GiftedDialog from "@/components/GiftedDialog.vue";
 import { accountsDB, db } from "@/db";
@@ -207,9 +199,10 @@ import { MASTER_SETTINGS_KEY } from "@/db/tables/settings";
 import { createAndSubmitGive } from "@/libs/endorserServer";
 import { accessToken } from "@/libs/crypto";
 import { IIdentifier } from "@veramo/core";
+import AlertMessage from "@/components/AlertMessage";
 
-@Options({
-  components: { GiftedDialog },
+@Component({
+  components: { GiftedDialog, AlertMessage },
 })
 export default class ProjectViewView extends Vue {
   activeDid = "";
@@ -379,25 +372,5 @@ export default class ProjectViewView extends Vue {
   // This same popup code is in many files.
   alertMessage = "";
   alertTitle = "";
-  public onClickClose() {
-    this.alertTitle = "";
-    this.alertMessage = "";
-  }
-  public computedAlertClassNames() {
-    return {
-      hidden: !this.alertMessage,
-      "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>
diff --git a/src/views/SeedBackupView.vue b/src/views/SeedBackupView.vue
index 9ad683dcb..7aa06552c 100644
--- a/src/views/SeedBackupView.vue
+++ b/src/views/SeedBackupView.vue
@@ -85,18 +85,10 @@
       <p v-if="showSeed">{{ activeAccount.mnemonic }}</p>
     </div>
     <div v-else>You do not have an active identity.</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>
 
@@ -105,8 +97,9 @@ import { Component, Vue } from "vue-facing-decorator";
 import { accountsDB, db } from "@/db";
 import * as R from "ramda";
 import { MASTER_SETTINGS_KEY } from "@/db/tables/settings";
+import AlertMessage from "@/components/AlertMessage";
 
-@Component
+@Component({ components: [AlertMessage] })
 export default class SeedBackupView extends Vue {
   activeAccount = null;
   showSeed = false;
@@ -136,27 +129,5 @@ export default class SeedBackupView 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>
diff --git a/src/views/StatisticsView.vue b/src/views/StatisticsView.vue
index 2913b2090..af9797baf 100644
--- a/src/views/StatisticsView.vue
+++ b/src/views/StatisticsView.vue
@@ -79,22 +79,11 @@
         {{ worldProperties.animationDurationSeconds }} seconds
       </div>
     </div>
-
     <button class="float-right" @click="captureGraphics()">Screenshot</button>
-
-    <!-- Another place to play with the sizing is in Resizer.setSize -->
-    <div id="scene-container" class="h-screen"></div>
-
-    <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>
 
@@ -102,13 +91,14 @@
 import { SVGRenderer } from "three/addons/renderers/SVGRenderer.js";
 import { Component, Vue } from "vue-facing-decorator";
 import { World } from "@/components/World/World.js";
+import AlertMessage from "@/components/AlertMessage";
 
 interface WorldProperties {
   startTime?: string;
   endTime?: string;
 }
 
-@Component
+@Component({ components: { AlertMessage } })
 export default class StatisticsView extends Vue {
   world: World;
   worldProperties: WorldProperties = {};
@@ -210,23 +200,6 @@ export default class StatisticsView extends Vue {
     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,
-    };
-  }
 }
 
 function ExportToSVG(rendererSVG, filename) {