feat: add messagebox component

frontend/src/components/MessageBox.vue

@@ -0,0 +1,41 @@
+<script setup lang="ts">
+import { ref } from 'vue';
+
+const isVisible = ref(false);
+const title = ref<string>("");
+const content = ref<string>("");
+
+const show = (_content: string, _title?: string) => {
+  title.value = _title ?? "Notification";
+  content.value = _content;
+  isVisible.value = true;
+}
+
+const hide = () => {
+  isVisible.value = false;
+}
+
+defineExpose({
+  show
+})
+</script>
+
+<template>
+  <div class="modal" :class="{ 'is-active': isVisible }" style="float: left; position: fixed; top: 0; bottom: 0; left: 0; right: 0;">
+    <div class="modal-background"></div>
+    <div class="modal-card">
+      <header class="modal-card-head">
+        <p class="modal-card-title">{{ title }}</p>
+        <button class="delete" aria-label="close" @click="hide"></button>
+      </header>
+      <div class="modal-card-body">
+        <p>{{ content }}</p>
+      </div>
+      <footer class="modal-card-foot">
+        <button class="button is-success" @click="hide">OK</button>
+      </footer>
+    </div>
+  </div>
+</template>
+
+<style scoped></style>

frontend/src/views/Login.vue

@@ -1,4 +1,14 @@
-<script setup lang="ts"></script>
+<script setup lang="ts">
+import MessageBox from '@/components/MessageBox.vue';
+import { ref } from 'vue';
+
+const messagebox = ref<InstanceType<typeof MessageBox> | null>(null);
+
+const login = () => {
+  messagebox.value?.show("Fail to login. Please check your username or password.")
+}
+
+</script>
 
 <template>
   <div style="margin-top: 1.25rem; width: 100%; display: flex; justify-content: center; align-items: center;">
@@ -23,11 +33,13 @@
       </div>
 
       <div class="control">
-        <button class="button is-primary">Login</button>
+        <button class="button is-primary" @click="login">Login</button>
       </div>
 
     </div>
   </div>
+
+  <MessageBox ref="messagebox"/>
 </template>
 
 <style scoped></style>