checkpoint

frontend/src/components/InputField.vue

@@ -0,0 +1,32 @@
+<script setup lang="ts">
+import { ref } from 'vue'
+
+const props = defineProps({
+  label: String,
+  placeholder: String,
+  inputError: String,
+  forceValidate: Boolean,
+})
+const inputText = defineModel('inputText')
+
+const touched = ref(false)
+</script>
+
+<template>
+  <label class="label">{{ props.label }}</label>
+  <input
+    :class="[
+      'input w-full',
+      { 'input-error': (touched || props.forceValidate) && props.inputError !== '' },
+    ]"
+    :placeholder="props.placeholder"
+    v-model="inputText"
+    @blur="touched = true"
+  />
+  <div
+    v-if="(touched || props.forceValidate) && props.inputError !== ''"
+    class="text-error text-sm mt-1"
+  >
+    {{ props.inputError }}
+  </div>
+</template>