feat: add messagebox component

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>