add missing image and validation frontend

frontend/src/components/CustomInput.vue

@@ -1,5 +1,5 @@
 <script setup>
-import { ref, computed, defineProps, defineEmits } from 'vue';
+import { ref, computed } from 'vue';
 
 const props = defineProps({
     label: {
@@ -11,7 +11,7 @@ const props = defineProps({
         default: true,
         required: false,
     },
-    value: {
+    modelValue: {
         type: String,
         required: true,
     },
@@ -29,10 +29,11 @@ const props = defineProps({
 
 const name = computed(() => props.label.toLowerCase());
 
-const emit = defineEmits(['input', 'change']);
+const emit = defineEmits(['update:modelValue', 'change']);
 
 // Peut ajouter la validation ici
 const onInput = (event) => {
+    emit('update:modelValue', event.target.value);
     emit('input', event.target.value);
 };
 
@@ -44,7 +45,7 @@ const onChange = (event) => {
 <template>
     <div class="input-container">
         <label v-if="hasLabel" :for="name">{{ label }}<span v-if="props.required">*</span></label>
-        <input :type="type" :id="name" :name="name" :value="value" @input="onInput" @change="onChange" maxlength="250" :required="required"/>
+        <input :type="type" :id="name" :name="name" :value="modelValue" @input="onInput" @change="onChange" maxlength="25" :required="required"/>
     </div>
 </template>
 

frontend/src/views/AddQuestionView.vue

@@ -6,57 +6,70 @@ import axios from 'axios';
 const API_SERVER = import.meta.env.VITE_API_SERVER;
 
 const question = ref('');
-const updateQuestion = (value) => {
-    question.value = value;
-};
-
 const correctAnswer = ref('');
-const updateCorrectAnswer = (value) => {
-    correctAnswer.value = value;
-};
-
 const wrongAnswer1 = ref('');
-const updateWrongAnswer1 = (value) => {
-    wrongAnswer1.value = value;
-};
-
 const wrongAnswer2 = ref('');
-const updateWrongAnswer2 = (value) => {
-    wrongAnswer2.value = value;
-};
-
 const wrongAnswer3 = ref('');
-const updateWrongAnswer3 = (value) => {
-    wrongAnswer3.value = value;
+const validationMessage = ref('');
+const clearForm = () => {
+    question.value = '';
+    correctAnswer.value = '';
+    wrongAnswer1.value = '';
+    wrongAnswer2.value = '';
+    wrongAnswer3.value = '';
 };
 
 const submitForm = () => {
+    if (!question.value.trim() || !correctAnswer.value.trim() || !wrongAnswer1.value.trim()
+        || !wrongAnswer2.value.trim() || !wrongAnswer3.value.trim()) {
+        validationMessage.value = 'Please fill in all fields.';
+        return;
+    }
+
+    if (question.value.length > 250 || correctAnswer.value.length > 250 || wrongAnswer1.value.length > 250
+        || wrongAnswer2.value.length > 250 || wrongAnswer3.value.length > 250) {
+        validationMessage.value = 'Input fields cannot exceed 250 characters.';
+        return;
+    }
+
     axios.post(`${API_SERVER}/api/question/new_community/`, {
-        question: question.value,
-        options: [correctAnswer.value, wrongAnswer1.value, wrongAnswer2.value, wrongAnswer3.value],
+        question: question.value.trim(),
+        options: [correctAnswer.value.trim(), wrongAnswer1.value.trim(), wrongAnswer2.value.trim(), wrongAnswer3.value.trim()],
         answer: '0' // Indicate which option is the correct answer.
     })
     .then(response => {
         console.log('Question saved successfully:', response.data);
-        // TODO redirect user or show success message
+        validationMessage.value = 'Question saved successfully.';
+        clearForm();
     })
     .catch(error => {
         console.error('Error saving question:', error);
-        // TODO handle error
+        validationMessage.value = 'Error saving question. Please try again later.';
+        // TODO: Show detail error message to user
     });
 };
 </script>
 
+
 <template>
     <section class="add-question container">
         <h1>Add your question on this page</h1>
+        <!--For mid eval only-->
+        <p :class="{ 'success-message': validationMessage === 'Question saved successfully.' }">{{ validationMessage }}</p>
         <form @submit.prevent="submitForm">
-            <CustomInput label="Question" :value="question.value" @input="updateQuestion" required />
-            <CustomInput label="Correct Answer" :value="correctAnswer.value" @input="updateCorrectAnswer" required />
-            <CustomInput label="Wrong Answer 1" :value="wrongAnswer1.value" @input="updateWrongAnswer1" required />
-            <CustomInput label="Wrong Answer 2" :value="wrongAnswer2.value" @input="updateWrongAnswer2" required/>
-            <CustomInput label="Wrong Answer 3" :value="wrongAnswer3.value" @input="updateWrongAnswer3" required/>
+            <CustomInput label="Question" v-model="question" required />
+            <CustomInput label="Correct Answer" v-model="correctAnswer" required />
+            <CustomInput label="Wrong Answer 1" v-model="wrongAnswer1" required />
+            <CustomInput label="Wrong Answer 2" v-model="wrongAnswer2" required/>
+            <CustomInput label="Wrong Answer 3" v-model="wrongAnswer3" required/>
             <button type="submit" class="btn">Submit</button>
         </form>
     </section>
 </template>
+
+// For mid eval only
+<style>
+.success-message {
+    color: green;
+}
+</style>