initial

frontend/app/components/ConfirmationModal.vue

@@ -0,0 +1,48 @@
+<template>
+  <u-modal
+    title="Confirmation"
+    description="Confirmation required for the selected action"
+    :dismissible="false"
+  >
+    <template #body>
+      <p class="my-3">
+        Type <strong>{{ message }}</strong> to confirm.
+      </p>
+
+      <div>
+        <u-field-group class="w-full">
+          <u-input
+            v-model="inputMessage"
+            name="user-input"
+            autocomplete="false"
+            type="text"
+            class="w-full"
+          />
+          <u-button color="error" :disabled="!matched" @click="onSubmit">
+            Submit
+          </u-button>
+        </u-field-group>
+      </div>
+    </template>
+  </u-modal>
+</template>
+<script lang="ts" setup>
+import { UModal, UInput, UButton } from "#components";
+
+interface Props {
+  message: string;
+}
+const props = defineProps<Props>();
+
+const emit = defineEmits<{ close: [boolean] }>();
+
+const inputMessage = ref("");
+
+const matched = computed(() => {
+  return inputMessage.value === props.message;
+});
+
+function onSubmit() {
+  emit("close", true);
+}
+</script>