exposed onChange listeners for text fields

Client/src/Components/TextFields/Description/DescriptionTextField.jsx

@@ -7,11 +7,12 @@ import { useTheme } from "@mui/material";
 /**
  * @component
  * @param {Object} props
+ * @param {function} props.onChange - The function to call when the text field changes (optional)
  * @param {string} props.hintText - The hint text displayed within the text field (required)
  * @param {boolean} props.hasError - A flag indicating if the text field has an error (required)
  * @returns {JSX.Element} - Renders the description text field component
  */
-const DescriptionTextField = ({ hintText, hasError }) => {
+const DescriptionTextField = ({ onChange, hintText, hasError }) => {
   const theme = useTheme();
 
   const fontLookup = {
@@ -27,6 +28,7 @@ const DescriptionTextField = ({ hintText, hasError }) => {
     >
       <div className="text-field-title">Description</div>
       <TextField
+        onChange={onChange}
         id="description-field-area"
         error={hasError}
         className="description-field-area"

Client/src/Components/TextFields/Email/EmailTextField.jsx

@@ -10,6 +10,7 @@ import { useTheme } from "@mui/material";
  *
  * @component
  * @param {Object} props - The properties that define the `EmailTextField` component.
+ * @param {function} props.onChange - The function to call when the text field changes.
  * @param {string} props.id - The id of the text field.
  * @param {string} [props.label="Email"] - The label of the text field.
  * @param {string} props.variant - The variant of the text field.
@@ -26,6 +27,7 @@ import { useTheme } from "@mui/material";
  */
 
 const EmailTextField = ({
+  onChange,
   id,
   label = "Email",
   variant,
@@ -52,6 +54,7 @@ const EmailTextField = ({
       <div className="email-text-field-title">{label}</div>
       <div className="email-text-field">
         <TextField
+          onChange={onChange}
           error={error}
           className="email-text-field-input"
           id={id}

Client/src/Components/TextFields/Password/PasswordTextField.jsx

@@ -8,6 +8,7 @@ import { useTheme } from "@mui/material";
 /**
  * @component
  * @param {Object} props
+ * @param {function} props.onChange - The function to call when the text field changes (optional)
  * @param {string} props.id - Unique ID for the text field (optional)
  * @param {string} props.label - The label text displayed above the text field (optional)
  * @param {"standard" | "outlined" | "filled"} props.variant - The variant of the text field (e.g., "outlined") (optional)
@@ -18,6 +19,7 @@ import { useTheme } from "@mui/material";
  * @returns {JSX.Element} - Renders the password text field component with dynamic icon display
  */
 const PasswordTextField = ({
+  onChange,
   id,
   label = "Password",
   variant,
@@ -44,6 +46,7 @@ const PasswordTextField = ({
       <div className="password-text-field-title">{label}</div>
       <div className="password-text-field">
         <TextField
+          onChange={onChange}
           type="password"
           error={error}
           className="password-text-field-input"

Client/src/Components/TextFields/Text/TextField.jsx

@@ -7,6 +7,7 @@ import { useTheme } from "@mui/material";
 
 /**
  * @param {Object} props - The component props.
+ * @param {function} props.onChange - The function to call when the text field changes.
  * @param {string} props.id - The ID of the text field.
  * @param {string} props.label - The label text for the text field.
  * @param {string} props.variant - The variant of the text field.
@@ -17,6 +18,7 @@ import { useTheme } from "@mui/material";
  * @returns {JSX.Element} The rendered component.
  */
 const StringTextField = ({
+  onChange,
   id,
   label,
   variant,
@@ -43,6 +45,7 @@ const StringTextField = ({
       <div className="email-text-field-title">{label}</div>
       <div className="email-text-field">
         <TextField
+          onChange={onChange}
           error={error}
           className="email-text-field-input"
           id={id}