WIP: validate confirm password and show error message

src/components/Badge.vue

@@ -0,0 +1,38 @@
+<template>
+    <div 
+      class="status-badge rounded-full max-w-[95px] w-fit px-3 inline-flex items-center text-[#ffffff] text-[14px] mr-2" 
+      :class="{
+        'badge-activated': isActivated,
+        'badge-deactivated': !isActivated,
+        'bg-[#0099FF]': isActivated,
+        'bg-[#C9CDD4]': !isActivated,
+      }"
+    >
+      {{ displayText }}
+    </div>
+  </template>
+  
+  <script>
+  import { defineComponent } from 'vue';
+  
+  export default defineComponent({
+    props: {
+      isActivated: {
+        type: Boolean,
+        required: true,
+        default: true,
+      },
+      displayText: {
+        type: String,
+        required: true,
+        default: "Status",
+      }
+    },
+    setup(props) {
+      return {
+        isActivated: props.isActivated,
+        displayText: props.displayText,
+      };
+    }
+  });
+  </script>