Add showModal function to Modal component

webui/node_modules/.vite/deps/_metadata.json

@@ -1,23 +1,23 @@
 {
-  "hash": "80447977",
-  "browserHash": "b98131b5",
+  "hash": "0c3e4771",
+  "browserHash": "01248067",
   "optimized": {
     "axios": {
       "src": "../../axios/index.js",
       "file": "axios.js",
-      "fileHash": "6b5eae63",
+      "fileHash": "d8d02cf0",
       "needsInterop": true
     },
     "vue": {
       "src": "../../vue/dist/vue.runtime.esm-bundler.js",
       "file": "vue.js",
-      "fileHash": "de50261f",
+      "fileHash": "f8034b26",
       "needsInterop": false
     },
     "vue-router": {
       "src": "../../vue-router/dist/vue-router.mjs",
       "file": "vue-router.js",
-      "fileHash": "4cad12d6",
+      "fileHash": "b4ca170f",
       "needsInterop": false
     }
   },

webui/src/App.vue

@@ -17,11 +17,12 @@ export default {
 		// title: title of the modal
 		// message: message to show in the modal
 		showModal(title, message) {
+			// Set the modal data
 			this.modalTitle = title
 			this.modalMsg = message
 
-			// Simulate a click on the hidden modal button to open it
-			this.$refs.openModal.click()
+			// Show the modal
+			this.$refs.errModal.showModal()
 		},
 
 		// Sets the login status to true
@@ -70,10 +71,10 @@ export default {
 </script>
 
 <template>
-	<!-- Invisible button to open the modal -->
-	<button ref="openModal" type="button" class="btn btn-primary" style="display: none" data-bs-toggle="modal" data-bs-target="#modal" />
 	<!-- Modal to show error messages -->
-	<Modal :title="modalTitle" :message="modalMsg" />
+	<Modal ref="errModal" id="errorModal" :title="modalTitle">
+		{{ modalMsg }}
+	</Modal>
 
 	<div class="container-fluid">
 		<div class="row">

webui/src/components/Modal.vue

@@ -1,25 +1,36 @@
 <script>
     export default {
-        props: ["message", "title"],
+        props: ["id", "title"],
+        methods: {
+		    // Visit the user's profile
+            showModal() {
+                this.$refs.openModal.click();
+            },
+        },
     }
 </script>
 
 <template>
     <!-- This components renders a Bootstrap modal -->
     <!-- The modal contains a title and a message -->
-    <div class="modal fade" id="modal" tabindex="-1" aria-labelledby="modalLabel" aria-hidden="true">
+
+    <!-- Invisible button to open the modal -->
+    <button ref="openModal" type="button" class="btn btn-primary" style="display: none" data-bs-toggle="modal" data-bs-target="#errorModal" />
+
+    <!-- Modal -->
+    <div class="modal fade" :id="id" tabindex="-1" :aria-labelledby="id + 'Label'" aria-hidden="true">
         <div class="modal-dialog">
             <div class="modal-content">
                 <div class="modal-header">
 
                     <!-- Modal title -->
-                    <h5 class="modal-title" id="modalLabel">{{ title }}</h5>
+                    <h5 class="modal-title" :id="id + 'Label'">{{ title }}</h5>
                     <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
                 </div>
 
                 <!-- Modal body -->
                 <div class="modal-body">
-                    {{ message }}
+                    <slot />
                 </div>
 
                 <!-- Footer with close button -->