diff --git a/eduaid_web/src/components/FormValidation/CharacterCounter.jsx b/eduaid_web/src/components/FormValidation/CharacterCounter.jsx new file mode 100644 index 00000000..552be743 --- /dev/null +++ b/eduaid_web/src/components/FormValidation/CharacterCounter.jsx @@ -0,0 +1,23 @@ +import React from 'react'; + +const CharacterCounter = ({ text, maxLength = 2500 }) => { + const count = text?.length || 0; + const isNearLimit = count > maxLength * 0.8; + const isOverLimit = count > maxLength; + + let textColor = "text-[#E4E4E4]"; + if (isOverLimit) { + textColor = "text-red-500 font-bold"; + } else if (isNearLimit) { + textColor = "text-yellow-500"; + } + + return ( +
+ {count} / {maxLength} characters + {isOverLimit && Exceeds model capacity} +
+ ); +}; + +export default CharacterCounter; \ No newline at end of file diff --git a/eduaid_web/src/pages/Text_Input.jsx b/eduaid_web/src/pages/Text_Input.jsx index e341d331..84c34650 100644 --- a/eduaid_web/src/pages/Text_Input.jsx +++ b/eduaid_web/src/pages/Text_Input.jsx @@ -7,10 +7,13 @@ import { FaClipboard } from "react-icons/fa"; import Switch from "react-switch"; import { Link,useNavigate } from "react-router-dom"; import apiClient from "../utils/apiClient"; +import CharacterCounter from "../components/FormValidation/CharacterCounter"; +import { validateTextInput } from "../utils/validation"; const Text_Input = () => { const navigate = useNavigate(); const [text, setText] = useState(""); + const [validationError, setValidationError] = useState(""); const [difficulty, setDifficulty] = useState("Easy Difficulty"); const [numQuestions, setNumQuestions] = useState(10); const [loading, setLoading] = useState(false); @@ -62,7 +65,16 @@ const Text_Input = () => { } finally { setLoading(false); } - } else if (text) { + } else { + // Validate text input before proceeding + const validation = validateTextInput(text); + if (!validation.isValid) { + setValidationError(validation.error); + setLoading(false); + return; + } + setValidationError(""); + // Proceed with existing functionality for local storage localStorage.setItem("textContent", text); localStorage.setItem("difficulty", difficulty); @@ -178,6 +190,16 @@ const Text_Input = () => { /> + + {/* Character Counter */} +
+ + {validationError && ( +
+ {validationError} +
+ )} +
{/* Separator */}
or
@@ -247,9 +269,12 @@ const Text_Input = () => { diff --git a/eduaid_web/src/utils/validation.js b/eduaid_web/src/utils/validation.js new file mode 100644 index 00000000..7c6547c0 --- /dev/null +++ b/eduaid_web/src/utils/validation.js @@ -0,0 +1,15 @@ +export const validateTextInput = (text) => { + if (!text || text.trim().length === 0) { + return { isValid: false, error: "Please enter some text to generate questions." }; + } + + if (text.length < 50) { + return { isValid: false, error: "Text is too short. Please provide at least 50 characters." }; + } + + if (text.length > 2500) { + return { isValid: false, error: "Text exceeds the 2500 character limit. Please shorten your text." }; + } + + return { isValid: true, error: "" }; +}; \ No newline at end of file