bugfix - fixed forms with hookform

Frontend/sections/ModalSignIn/ModalSignIn.tsx

@@ -12,6 +12,7 @@ function ModalSignIn() {
   const {
     register,
     handleSubmit,
+    reset,
     formState: { errors },
   } = useForm({
     resolver: yupResolver(signInValidationSchema),
@@ -22,7 +23,13 @@ function ModalSignIn() {
       <label htmlFor="sign-in-modal" className="modal cursor-pointer">
         <label className="modal-box relative bg-base-100  max-w-full md:max-w-[550px] py-4 px-3 md:p-6">
           <div className="flex justify-end pb-2 select-none">
-            <label htmlFor="sign-in-modal" className="cursor-pointer">
+            <label
+              htmlFor="sign-in-modal"
+              className="cursor-pointer"
+              onClick={() => {
+                reset();
+              }}
+            >
               <Icon name="Dismiss20Filled" size="medium" color={color} />
             </label>
           </div>
@@ -36,7 +43,13 @@ function ModalSignIn() {
               </h3>
               <p className="text-sm md:text-base">Lets kick some more ass?</p>
             </div>
-            <form onSubmit={handleSubmit(() => {})} className="w-full md:w-2/3">
+            <form
+              onSubmit={handleSubmit((data) => {
+                console.log(data);
+                reset();
+              })}
+              className="w-full md:w-2/3"
+            >
               <div className="relative mt-6">
                 <input
                   {...register("email")}

Frontend/sections/ModalSignUp/ModalSignUp.tsx

@@ -14,6 +14,7 @@ function ModalSignUp() {
   const {
     register,
     handleSubmit,
+    reset,
     formState: { errors },
   } = useForm({
     resolver: yupResolver(signUpValidationSchema),
@@ -25,12 +26,23 @@ function ModalSignUp() {
         id="sign-up-modal"
         className="modal-toggle"
         name=""
-        // onChange={whenModalOpens}
       />
-      <label htmlFor="sign-up-modal" className="modal cursor-pointer">
+      <label
+        htmlFor="sign-up-modal"
+        className="modal cursor-pointer"
+        onClick={() => {
+          reset();
+        }}
+      >
         <label className="modal-box relative  max-w-full md:max-w-[550px] py-4 px-3 md:p-6">
           <div className="flex justify-end pb-2 select-none">
-            <label htmlFor="sign-up-modal" className="cursor-pointer">
+            <label
+              htmlFor="sign-up-modal"
+              className="cursor-pointer"
+              onClick={() => {
+                reset();
+              }}
+            >
               <Icon name="Dismiss20Filled" size="medium" />
             </label>
           </div>
@@ -45,7 +57,13 @@ function ModalSignUp() {
               Excited to see what we&apos;ve got! Signup and get started!
             </p>
           </div>
-          <form onSubmit={handleSubmit(() => {})} className="w-full md:w-2/3">
+          <form
+            onSubmit={handleSubmit((data) => {
+              console.log(data);
+              reset();
+            })}
+            className="w-full md:w-2/3"
+          >
             <div className="relative mt-6">
               <input
                 {...register("email")}
@@ -62,7 +80,7 @@ function ModalSignUp() {
             </div>
             <div className="relative mt-1">
               <input
-                {...register("first_name")}
+                {...register("firstName")}
                 id="SignUpFirstName"
                 type="text"
                 className="py-3 px-4 block w-full bg-base-200 text-base-content border-white rounded-lg text-sm focus:border-blue-500 focus:ring-blue-500 disabled:opacity-50 disabled:pointer-events-none "
@@ -71,12 +89,12 @@ function ModalSignUp() {
                 autoComplete="on"
               />
               <div className="text-start text-sm italic text-error-content">
-                {errors.email?.message}&nbsp;
+                {errors.firstName?.message}&nbsp;
               </div>
             </div>
             <div className="relative mt-1">
               <input
-                {...register("last_name")}
+                {...register("lastName")}
                 id="SignUpLastName"
                 type="text"
                 className="py-3 px-4 block w-full bg-base-200 text-base-content border-white rounded-lg text-sm focus:border-blue-500 focus:ring-blue-500 disabled:opacity-50 disabled:pointer-events-none "
@@ -84,13 +102,13 @@ function ModalSignUp() {
                 aria-label="Last Name…"
               />
               <div className="text-start text-sm italic text-error-content">
-                {errors.email?.message}&nbsp;
+                {errors.lastName?.message}&nbsp;
               </div>
             </div>
 
             <div className="relative mt-1">
               <input
-                {...register("phone_number")}
+                {...register("phoneNumber")}
                 id="SignUpPhoneNumber"
                 type="text"
                 className="py-3 px-4 block w-full bg-base-200 text-base-content border-white rounded-lg text-sm focus:border-blue-500 focus:ring-blue-500 disabled:opacity-50 disabled:pointer-events-none "
@@ -98,7 +116,7 @@ function ModalSignUp() {
                 aria-label="Phone Number…"
               />
               <div className="text-start text-sm italic text-error-content">
-                {errors.email?.message}&nbsp;
+                {errors.phoneNumber?.message}&nbsp;
               </div>
             </div>
             <div className="relative mt-1">
@@ -111,12 +129,12 @@ function ModalSignUp() {
                 aria-label="Organisation…"
               />
               <div className="text-start text-sm italic text-error-content">
-                {errors.email?.message}&nbsp;
+                {errors.organisation?.message}&nbsp;
               </div>
             </div>
             <div className="relative mt-1">
               <select
-                {...register("company_size")}
+                {...register("organisationSize")}
                 id="SignUpCompanySize"
                 defaultValue={""}
                 className="py-3 px-4 block w-full bg-base-200 text-base-content border-white rounded-lg text-sm focus:border-blue-500 focus:ring-blue-500 disabled:opacity-50 disabled:pointer-events-none "
@@ -137,7 +155,7 @@ function ModalSignUp() {
                 })}
               </select>
               <div className="text-start text-sm italic text-error-content">
-                {errors.email?.message}&nbsp;
+                {errors.organisationSize?.message}&nbsp;
               </div>
             </div>
             <div className="relative mt-1">
@@ -150,7 +168,7 @@ function ModalSignUp() {
                 aria-label="Password"
               />
               <div className="text-start text-sm italic text-error-content">
-                {errors.email?.message}&nbsp;
+                {errors.password?.message}&nbsp;
               </div>
             </div>
             <div className="relative mt-1 mb-2">
@@ -163,7 +181,7 @@ function ModalSignUp() {
                 aria-label="Confirmed Password"
               />
               <div className="text-start text-sm italic text-error-content">
-                {errors.email?.message}&nbsp;
+                {errors.passwordConfirmation?.message}&nbsp;
               </div>
             </div>
 

Frontend/utils/form.ts

@@ -38,14 +38,14 @@ Yup.addMethod(Yup.string, "mobileNumberValidation", function (errorMessage) {
 });
 
 const signUpValidationSchema = Yup.object().shape({
-  first_name: Yup.string().required("First Name is required"),
+  firstName: Yup.string().required("First Name is required"),
-  last_name: Yup.string().required("Last Name is required"),
+  lastName: Yup.string().required("Last Name is required"),
   email: Yup.string().email().required("E-mail is required"),
-  phone_number: Yup.string()
+  phoneNumber: Yup.string()
     .required("Phone Number is required")
     .mobileNumberValidation("Phone Number is not valid"),
   organisation: Yup.string().required("Organisation name is required"),
-  company_size: Yup.string().required("Company Size is required"),
+  organisationSize: Yup.string().required("Company Size is required"),
   password: Yup.string()
     .password()
     .required("Password is required.")