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}

Client/src/Pages/Register/index.jsx

@@ -1,4 +1,4 @@
-import React from "react";
+import React, { useState } from "react";
 import "./index.css";
 import BackgroundPattern from "../../Components/BackgroundPattern/BackgroundPattern";
 import Logomark from "../../assets/Images/Logomark.png";
@@ -10,6 +10,28 @@ import Button from "../../Components/Button";
 import Google from "../../assets/Images/Google.png";
 
 const Register = () => {
+  const idMap = {
+    "register-firstname-input": "firstname",
+    "register-lastname-input": "lastname",
+    "register-email-input": "email",
+    "register-password-input": "password",
+  };
+
+  const [form, setForm] = useState({
+    firstname: "",
+    lastname: "",
+    email: "",
+    password: "",
+  });
+
+  const handleInput = (e) => {
+    const fieldName = idMap[e.target.id];
+    setForm({
+      ...form,
+      [idMap[e.target.id]]: e.target.value,
+    });
+  };
+
   return (
     <div className="register-page">
       <BackgroundPattern></BackgroundPattern>
@@ -27,6 +49,7 @@ const Register = () => {
         <div className="register-form-v-spacing-40px" />
         <div className="register-form-inputs">
           <StringTextField
+            onChange={handleInput}
             error={false}
             label="First name*"
             placeholder="Enter your first name"
@@ -34,6 +57,7 @@ const Register = () => {
           />
           <div className="login-form-v2-spacing" />
           <StringTextField
+            onChange={handleInput}
             error={false}
             label="Last name*"
             placeholder="Enter your last name"
@@ -41,6 +65,7 @@ const Register = () => {
           />
           <div className="login-form-v2-spacing" />
           <EmailTextField
+            onChange={handleInput}
             label="Email*"
             error={false}
             placeholder="Enter your email"
@@ -48,6 +73,7 @@ const Register = () => {
           />
           <div className="login-form-v2-spacing" />
           <PasswordTextField
+            onChange={handleInput}
             label="Password*"
             error={false}
             placeholder="Create a password"