feat(front): integrate VeeValidate for form validation and add InputField and FormButton components

front/components/Field/FormButton.vue

@@ -0,0 +1,24 @@
+<template>
+  <Button @click="() => emit('click', form)" :disabled="!isValid">
+    <slot />
+  </Button>
+</template>
+<script setup lang="ts">
+import { Button } from '~/components/ui/button'
+import { useFormContext } from 'vee-validate'
+const form = useFormContext()
+
+const isValid = ref(false)
+watch(
+  () => form?.values,
+  async () => {
+    const { valid } = await form?.validate()
+    isValid.value = valid
+  },
+  { deep: true }
+)
+
+const emit = defineEmits<{
+  (e: 'click', form: ReturnType<typeof useFormContext>): void
+}>()
+</script>

front/components/Field/InputField.vue

@@ -0,0 +1,16 @@
+<template>
+  <Field :name="props.name" v-slot="{ field }">
+    <div class="flex flex-col gap-2">
+      <Label v-if="props.label">{{ props.label }}</Label>
+      <Input v-bind="field" :placeholder="props.placeholder" />
+    </div>
+  </Field>
+</template>
+<script setup lang="ts">
+import { Input } from '~/components/ui/input'
+const props = defineProps<{
+  name: string
+  label?: string
+  placeholder?: string
+}>()
+</script>