Implement EditAccount in Frontend

web/src/components/Modal.vue

@@ -7,7 +7,8 @@ const props = defineProps<{
 }>();
 
 const emit = defineEmits<{
-  (e: 'submit'): void
+    (e: 'submit'): void,
+    (e: 'open'): void,
 }>();
 
 const visible = ref(false);
@@ -15,6 +16,7 @@ function closeDialog() {
     visible.value = false;
 };
 function openDialog() {
+    emit("open");
     visible.value = true;
 };
 function submitDialog() {
@@ -24,10 +26,14 @@ function submitDialog() {
 </script>
 
 <template>
-    <Card>
-        <p class="w-24 text-center text-6xl">+</p>
-        <button class="text-lg" dark @click="openDialog">{{ buttonText }}</button>
-    </Card>
+    <button @click="openDialog">
+        <slot name="placeholder">
+            <Card>
+                <p class="w-24 text-center text-6xl">+</p>
+                <span class="text-lg" dark>{{ buttonText }}</span>
+            </Card>
+        </slot>
+    </button>
     <div
         v-if="visible"
         class="fixed inset-0 bg-gray-600 bg-opacity-50 overflow-y-auto h-full w-full"