implement validation logic for first step of registration form

apps/app/src/components/RegistrationForms/FirstStepRegistrationForm/FirstStepRegistrationForm.tsx

@@ -1,7 +1,9 @@
-import { ChangeEvent } from 'react';
+import { ChangeEvent, useEffect, useState } from 'react';
 import { Input } from '../../Input';
 import c from './FirstStepRegistrationForm.module.scss';
 import { Checkbox } from '../../Checkbox';
+import { RegistrationFormErrors } from '../../../types/errors/errors.dto';
+import { validateField } from '../../../helpers/validateInput';
 
 type UserData = {
   firstName: string;
@@ -17,12 +19,16 @@ type UserData = {
 type Props = {
   userData: UserData;
   updateUserData: (newData: Partial<UserData>) => void;
+  isSubmitted: boolean;
 };
 
 export const FirstStepRegistrationForm = ({
   userData,
   updateUserData,
+  isSubmitted,
 }: Props) => {
+  const [errors, setErrors] = useState<RegistrationFormErrors>({});
+
   const handleInputChange = (e: ChangeEvent<HTMLInputElement>) => {
     const { name, value } = e.target;
     updateUserData({ [name]: value });
@@ -33,6 +39,26 @@ export const FirstStepRegistrationForm = ({
     updateUserData({ [name]: checked });
   };
 
+  useEffect(() => {
+    if (isSubmitted) {
+      const newErrors: RegistrationFormErrors = {};
+
+      Object.keys(userData).forEach((key) => {
+        const error = validateField(
+          key as keyof UserData,
+          userData[key as keyof UserData],
+          userData,
+        );
+
+        if (error) {
+          newErrors[key as keyof RegistrationFormErrors] = error;
+        }
+      });
+
+      setErrors(newErrors);
+    }
+  }, [isSubmitted, userData]);
+
   return (
     <>
       <div className={c.inputFieldsWrapper}>
@@ -41,31 +67,36 @@ export const FirstStepRegistrationForm = ({
           value={userData.firstName}
           placeholder='Ime'
           onChange={handleInputChange}
+          error={errors.firstName}
         />
         <Input
           name='lastName'
           value={userData.lastName}
           placeholder='Prezime'
           onChange={handleInputChange}
+          error={errors.lastName}
         />
         <Input
           name='email'
           value={userData.email}
           placeholder='Email'
           onChange={handleInputChange}
+          error={errors.email}
         />
         <Input
           name='password'
           value={userData.password}
           placeholder='Lozinka'
           onChange={handleInputChange}
+          error={errors.password}
           type='password'
         />
         <Input
           name='repeatedPassword'
           value={userData.repeatedPassword}
           placeholder='Potvrdite lozinku'
           onChange={handleInputChange}
+          error={errors.repeatedPassword}
           type='password'
         />
       </div>
@@ -76,20 +107,23 @@ export const FirstStepRegistrationForm = ({
           checked={userData.newsletterEnabled}
           name='newsletterEnabled'
           onChange={handleCheckboxChange}
+          error={errors.termsAndConditionsEnabled}
           key={1}
         />
         <Checkbox
           label='Želim primati novosti o tvrtkama i otvorenim radnim pozicijama.'
           checked={userData.companiesNewsEnabled}
           name='companiesNewsEnabled'
           onChange={handleCheckboxChange}
+          error={errors.termsAndConditionsEnabled}
           key={2}
         />
         <Checkbox
           label='Slažem se s uvjetima i odredbama.'
           checked={userData.termsAndConditionsEnabled}
           name='termsAndConditionsEnabled'
           onChange={handleCheckboxChange}
+          error={errors.termsAndConditionsEnabled}
           key={3}
         />
       </div>

apps/app/src/components/RegistrationForms/GeneralRegistrationForm/GeneralRegistrationForm.tsx

@@ -10,6 +10,7 @@ import { UserData } from '../../../types/user/user.dto';
 
 export const GeneralRegistrationForm = () => {
   const [currentStep, setCurrentStep] = useState(1);
+  const [isSubmitted, setIsSubmitted] = useState(false);
 
   const [userData, setUserData] = useState<UserData>({
     firstName: '',
@@ -33,8 +34,6 @@ export const GeneralRegistrationForm = () => {
     }));
   };
 
-  console.log(userData);
-
   return (
     <div className={c.generalRegistrationForm}>
       <div className={c.registrationUpper}>
@@ -49,6 +48,7 @@ export const GeneralRegistrationForm = () => {
         <FirstStepRegistrationForm
           userData={userData}
           updateUserData={updateUserData}
+          isSubmitted={isSubmitted}
         />
       )}
       {currentStep === 2 && (
@@ -63,7 +63,12 @@ export const GeneralRegistrationForm = () => {
       {currentStep === 4 && <div>Četvrti korak</div>}
 
       <div className={c.buttonsWrapper}>
-        <Button type='submit' variant='orange' children='Registriraj se' />
+        <Button
+          type='submit'
+          variant='orange'
+          children='Registriraj se'
+          onClick={() => setIsSubmitted(!isSubmitted)}
+        />
         <Button
           type='submit'
           variant='black'