Merge pull request #541 from ita-social-projects/#534-ImproveFieldsVa…

…lidationOnRegistrationFormAndEditProfile #534 Improve fields validation on the Registration form and Edit profile page
ita-social-projects · Apr 29, 2024 · 96184ca · 96184ca
2 parents 2f61e85 + ec37092
commit 96184ca
Show file tree

Hide file tree

Showing 19 changed files with 213 additions and 44 deletions.
diff --git a/FrontEnd/src/components/ProfilePage/FormComponents/AdditionalInfo.js b/FrontEnd/src/components/ProfilePage/FormComponents/AdditionalInfo.js
@@ -60,7 +60,9 @@ const AdditionalInfo = (props) => {
 
     const handleSubmit = async (event) => {
         event.preventDefault();
-        if (validateForm()) {
+        if (!validateForm()) {
+            toast.error('Зміни не можуть бути збережені, перевірте правильність заповнення полів');
+        } else {
             try {
                 const response = await axios.patch(`${process.env.REACT_APP_BASE_API_URL}/api/profiles/${user.profile_id}`, {
                     founded: profile.founded,

diff --git a/FrontEnd/src/components/ProfilePage/FormComponents/ContactsInfo.js b/FrontEnd/src/components/ProfilePage/FormComponents/ContactsInfo.js
@@ -73,7 +73,9 @@ const ContactsInfo = (props) => {
 
     const handleSubmit = async (event) => {
         event.preventDefault();
-        if (validateForm()) {
+        if (!validateForm()) {
+            toast.error('Зміни не можуть бути збережені, перевірте правильність заповнення полів');
+        } else {
             try {
                 const response = await axios.patch(`${process.env.REACT_APP_BASE_API_URL}/api/profiles/${user.profile_id}`, {
                     phone: profile.phone,

diff --git a/...nd/src/components/ProfilePage/FormComponents/DeleteProfileComponent/DeleteProfileModal.js b/...nd/src/components/ProfilePage/FormComponents/DeleteProfileComponent/DeleteProfileModal.js
@@ -3,6 +3,7 @@ import css from './DeleteProfileModal.module.css';
 import { useAuth } from '../../../../hooks';
 import { useNavigate } from 'react-router-dom';
 import { useState } from 'react';
+import preventEnterSubmit from '../../../../utils/preventEnterSubmit';
 
 
 const DeleteProfileModal = (props) => {
@@ -75,6 +76,7 @@ const DeleteProfileModal = (props) => {
                             name="email"
                             placeholder="Електронна пошта"
                             onChange={emailChangeHandler}
+                            onKeyDown={preventEnterSubmit}
                         />
                     </div>
                     {(!isCorrectEmail) &&
@@ -91,6 +93,7 @@ const DeleteProfileModal = (props) => {
                             name="password"
                             placeholder="Пароль"
                             onChange={passwordChangeHandler}
+                            onKeyDown={preventEnterSubmit}
                         />
                         <span onClick={passwordVisisbilityHandler}>
                             <img

diff --git a/FrontEnd/src/components/ProfilePage/FormComponents/FormComponents.module.css b/FrontEnd/src/components/ProfilePage/FormComponents/FormComponents.module.css
@@ -4,6 +4,10 @@
     gap: 0px;
 }
 
+.user_form_fields {
+    gap: 14px
+}
+
 .fields-groups {
     display: flex;
     align-items: flex-start;

diff --git a/FrontEnd/src/components/ProfilePage/FormComponents/FormFields/CheckBoxField.js b/FrontEnd/src/components/ProfilePage/FormComponents/FormFields/CheckBoxField.js
@@ -1,8 +1,10 @@
 import { PropTypes } from 'prop-types';
 import { Checkbox } from 'antd';
+import preventEnterSubmit from '../../../../utils/preventEnterSubmit';
 import css from './CheckBoxField.module.css';
 
 const CheckBoxField = (props) => {
+
     return (
         <div className={css['representative']}>
             <div className={css['representative__label']}>
@@ -19,6 +21,7 @@ const CheckBoxField = (props) => {
                         <Checkbox
                             name={props.nameRegister}
                             onChange={props.updateHandler}
+                            onKeyDown={preventEnterSubmit}
                             checked={props.valueRegister}
                         />
                         Зареєстрована компанія
@@ -29,6 +32,7 @@ const CheckBoxField = (props) => {
                         <Checkbox
                             name={props.nameStartup}
                             onChange={props.updateHandler}
+                            onKeyDown={preventEnterSubmit}
                             checked={props.valueStartup}
                         />
                         Стартап проект, який шукає інвестиції

diff --git a/FrontEnd/src/components/ProfilePage/FormComponents/FormFields/FullField.js b/FrontEnd/src/components/ProfilePage/FormComponents/FormFields/FullField.js
@@ -1,6 +1,8 @@
+import preventEnterSubmit from '../../../../utils/preventEnterSubmit';
 import css from './FullField.module.css';
 
 const FullField = (props) => {
+
     return (
         <div className={css['fields__column']}>
             <div className={css['fields__label']}>
@@ -19,8 +21,11 @@ const FullField = (props) => {
                     value={props.value}
                     placeholder={props.fieldPlaceholder ? props.fieldPlaceholder: 'Введіть текст'}
                     onChange={props.updateHandler}
+                    onBlur={props.onBlur}
+                    onKeyDown={preventEnterSubmit}
                     required={(props.requredField) ? 'required' : ''}
                     disabled={(props.name === 'email') ? 'disabled' : ''}
+                    maxLength={props.maxLength}
                 />
             </div>
             {(props.requredField || props.error)  &&

diff --git a/FrontEnd/src/components/ProfilePage/FormComponents/FormFields/FullField.module.css b/FrontEnd/src/components/ProfilePage/FormComponents/FormFields/FullField.module.css
@@ -90,8 +90,8 @@
     flex: 1 0 0;
     color: var(--red-red-100, #F34444);
     font-family: var(--font-error);
-    font-size: 14px;
+    font-size: 12px;
     font-style: normal;
     font-weight: 400;
-    line-height: 22px;
+    line-height: 16px;
 }
diff --git a/FrontEnd/src/components/ProfilePage/FormComponents/FormFields/HalfFormField.js b/FrontEnd/src/components/ProfilePage/FormComponents/FormFields/HalfFormField.js
@@ -1,7 +1,9 @@
 import { PropTypes } from 'prop-types';
+import preventEnterSubmit from '../../../../utils/preventEnterSubmit';
 import css from './HalfFormField.module.css';
 
 const HalfFormField = (props) => {
+
     return (
         <div className={css['fields__column']}>
             <div className={css['fields__label']}>
@@ -19,17 +21,25 @@ const HalfFormField = (props) => {
                     name={props.name}
                     value={props.value}
                     placeholder={props.fieldPlaceholder ? props.fieldPlaceholder : 'Введіть текст'}
+                    onBlur={props.onBlur}
+                    onKeyDown={preventEnterSubmit}
                     onChange={props.updateHandler}
                     required={(props.requredField) ? 'required' : ''}
                     disabled={(props.name === 'email') ? 'disabled' : ''}
                     maxLength={props.maxLength}
                 />
             </div>
-            {(props.requredField || props.error) &&
+            {(props.requiredField || props.error) && (
                 <div className={css['error-message']}>
-                    {props.error}
+                    {Array.isArray(props.error) ? (
+                        props.error.map((error, index) =>
+                            <span key={index}>{error}</span>
+                        )
+                    ) : (
+                        <span>{props.error}</span>
+                    )}
                 </div>
-            }
+            )}
         </div>
     );
 };
@@ -48,5 +58,8 @@ HalfFormField.propTypes = {
     fieldPlaceholder: PropTypes.string,
     maxLength: PropTypes.number,
     updateHandler: PropTypes.func,
-    error:PropTypes.string,
+    error:PropTypes.oneOfType([
+        PropTypes.string,
+        PropTypes.arrayOf(PropTypes.string),
+      ]),
   };
diff --git a/FrontEnd/src/components/ProfilePage/FormComponents/FormFields/HalfFormField.module.css b/FrontEnd/src/components/ProfilePage/FormComponents/FormFields/HalfFormField.module.css
@@ -2,7 +2,7 @@
     display: flex;
     width: 257px;
     height: 84px;
-    padding-bottom: 5px;
+    padding-bottom: 10px;
     flex-direction: column;
     align-items: flex-start;
 }
@@ -83,17 +83,17 @@
 
 .error-message {
     display: flex;
+    flex-direction: column;
     padding: 1px 0px;
     align-items: flex-start;
-    gap: 10px;
     align-self: stretch;
     flex: 1 0 0;
     color: var(--red-red-100, #F34444);
     font-family: var(--font-error);
-    font-size: 14px;
+    font-size: 12px;
     font-style: normal;
     font-weight: 400;
-    line-height: 22px;
+    line-height: 16px;
 }
 
 .disabled__field {

diff --git a/FrontEnd/src/components/ProfilePage/FormComponents/FormFields/ImageField.js b/FrontEnd/src/components/ProfilePage/FormComponents/FormFields/ImageField.js
@@ -1,10 +1,13 @@
 import classNames from 'classnames';
+import preventEnterSubmit from '../../../../utils/preventEnterSubmit';
 import css from './ImageField.module.css';
 
 const ImageField = (props) => {
+
     const backgroundImage = {
         background: `url(${props.value}) lightgray 50% / cover no-repeat`,
     };
+
     return (
         <div className={classNames(css['fields__column'], {[css['fields__column--logo']] : props.name === 'logo_image'})}>
             <div className={css['fields__label']}>
@@ -14,7 +17,7 @@ const ImageField = (props) => {
                     {props.label}
                 </label>
                 {props.name === 'banner_image' && props.value &&
-                    (<button className={css['upload-file__delete--wrapper']} onClick={() => (props.onDeleteImage(props.name))}>
+                    (<button className={css['upload-file__delete--wrapper']} onKeyDown={preventEnterSubmit} onClick={() => (props.onDeleteImage(props.name))}>
                         <img className={css['upload-file__delete--trashBin']} src={`${process.env.REACT_APP_PUBLIC_URL}/profilepage/Vectordelete.png`} alt="Delete icon" />
                         <span className={css['upload-file__delete--text']}>видалити зображення</span>
                     </button>)}
@@ -27,6 +30,7 @@ const ImageField = (props) => {
                     className={css['upload-file__input']}
                     name={props.name}
                     onChange={props.updateHandler}
+                    onKeyDown={preventEnterSubmit}
                     required={(props.requredField) ? 'required' : ''}
                 />
                 {!props.value &&
@@ -53,7 +57,7 @@ const ImageField = (props) => {
                 {props.name === 'logo_image' && props.value && (
                     <div className={css['upload-file__wrapper--logo']}>
                         <div className={css['upload-file__logo']} style={backgroundImage}/>
-                        <button className={css['upload-file__delete--wrapper']} onClick={() => (props.onDeleteImage(props.name))}>
+                        <button className={css['upload-file__delete--wrapper']} onKeyDown={preventEnterSubmit} onClick={() => (props.onDeleteImage(props.name))}>
                             <img className={css['upload-file__delete--trashBin']} src={`${process.env.REACT_APP_PUBLIC_URL}/profilepage/Vectordelete.png`} alt="Delete icon" />
                             <span className={css['upload-file__delete--text']}>видалити логотип</span>
                         </button>

diff --git a/FrontEnd/src/components/ProfilePage/FormComponents/FormFields/MultipleSelectChip.js b/FrontEnd/src/components/ProfilePage/FormComponents/FormFields/MultipleSelectChip.js
@@ -1,9 +1,11 @@
 import { Select, Space } from 'antd';
 import { PropTypes } from 'prop-types';
+import preventEnterSubmit from '../../../../utils/preventEnterSubmit';
 import css from './MultipleSelectChip.module.css';
 
 
 export default function MultipleSelectChip(props) {
+
   return (
     <div className={css['fields__column']}>
       <div className={css['fields__label']}>
@@ -29,6 +31,7 @@ export default function MultipleSelectChip(props) {
             borderRadius: '2px',
           }}
           onChange={props.updateHandler}
+          onKeyDown={preventEnterSubmit}
           options={props.options.map(option => ({
             value: option.name ?? option.name_ukr,
           }))}
@@ -44,7 +47,7 @@ export default function MultipleSelectChip(props) {
 }
 
 MultipleSelectChip.propTypes = {
-    requredField: PropTypes.bool.isRequired,
+    requredField: PropTypes.bool,
     name: PropTypes.string.isRequired,
     label: PropTypes.string.isRequired,
     value: PropTypes.array,

diff --git a/FrontEnd/src/components/ProfilePage/FormComponents/FormFields/PasswordField.js b/FrontEnd/src/components/ProfilePage/FormComponents/FormFields/PasswordField.js
@@ -2,6 +2,7 @@ import { useState } from 'react';
 import { PropTypes } from 'prop-types';
 import EyeInvisible from '../../../authorization/EyeInvisible';
 import EyeVisible from '../../../authorization/EyeVisible';
+import preventEnterSubmit from '../../../../utils/preventEnterSubmit';
 import css from './PasswordField.module.css';
 import { PASSWORD_PATTERN } from '../../../../constants/constants';
 
@@ -42,6 +43,7 @@ const PasswordField = (props) => {
             <div className={css['password-field__password']}>
                 <div className={css['password-field__password__wrapper']}>
                     <input
+                        onKeyDown={preventEnterSubmit}
                         id={inputId}
                         type={showPassword ? 'text' : 'password'}
                         placeholder={label}

diff --git a/FrontEnd/src/components/ProfilePage/FormComponents/FormFields/TextField.js b/FrontEnd/src/components/ProfilePage/FormComponents/FormFields/TextField.js
@@ -1,6 +1,8 @@
+import preventEnterSubmit from '../../../../utils/preventEnterSubmit';
 import css from './TextField.module.css';
 
 const TextField = (props) => {
+
     return (
         <div className={css['fields__column']}>
             <div className={css['fields__label']}>
@@ -18,6 +20,7 @@ const TextField = (props) => {
                     value={props.value}
                     placeholder={props.fieldPlaceholder ? props.fieldPlaceholder : 'Введіть текст'}
                     onChange={props.updateHandler}
+                    onKeyDown={preventEnterSubmit}
                     required={(props.requredField) ? 'required' : ''}
                     disabled={(props.name === 'email') ? 'disabled' : ''}
                 ></textarea>

diff --git a/FrontEnd/src/components/ProfilePage/FormComponents/GeneralInfo.js b/FrontEnd/src/components/ProfilePage/FormComponents/GeneralInfo.js
@@ -116,6 +116,12 @@ const GeneralInfo = (props) => {
             }
         }
         setFormStateErr({ ...formStateErr, ...newFormState });
+        if (profile.official_name.length !== 0 && profile.official_name.length < 2) {
+            isValid = false;
+        }
+        if (profile.name.length < 2) {
+            isValid = false;
+        }
         if (profile.edrpou) {
             try {
                 validateEdrpou(profile.edrpou);
@@ -140,8 +146,25 @@ const GeneralInfo = (props) => {
     };
 
     const onUpdateField = e => {
+        const { value: fieldValue, name: fieldName } = e.target;
+        const symbolCount = (fieldValue.replace(/[\s]/g,'')).length;
+        setFormStateErr({ ...formStateErr, [fieldName]: {'error': false, 'message': ''}});
+        if (fieldName === 'name' && symbolCount < 2) {
+            setFormStateErr({ ...formStateErr, [fieldName]: {'error': true, 'message': 'Введіть від 2 до 100 символів'}});
+        }
+        if (fieldName === 'official_name' && symbolCount !== 0 && symbolCount < 2) {
+            setFormStateErr({ ...formStateErr, [fieldName]: {'error': true, 'message': 'Введіть від 2 до 200 символів'}});
+        }
         setProfile((prevState) => {
-            return { ...prevState, [e.target.name]: e.target.value };
+            return { ...prevState, [fieldName]: fieldValue };
+        });
+    };
+
+    const onBlurHandler = (e) => {
+        const { value: rawFieldValue, name: fieldName } = e.target;
+        const fieldValue = rawFieldValue.replace(/\s{2,}/g,' ').trim();
+        setProfile((prevState) => {
+            return { ...prevState, [fieldName]: fieldValue };
         });
     };
 
@@ -315,7 +338,9 @@ const GeneralInfo = (props) => {
 
     const handleSubmit = async (event) => {
         event.preventDefault();
-        if (checkRequiredFields()) {
+        if (!checkRequiredFields()) {
+            toast.error('Зміни не можуть бути збережені, перевірте правильність заповнення полів');
+        } else {
             try {
                 const response = await axios.patch(`${process.env.REACT_APP_BASE_API_URL}/api/profiles/${user.profile_id}`, {
                     name: profile.name,
@@ -353,16 +378,21 @@ const GeneralInfo = (props) => {
                                 name="name"
                                 label={LABELS.name}
                                 updateHandler={onUpdateField}
-                                error={formStateErr['name']['error'] ? formStateErr['name']['message'] : null}
+                                onBlur={onBlurHandler}
+                                error={formStateErr['name']?.['error'] ? formStateErr['name']['message'] : null}
                                 requredField={true}
                                 value={profile.name}
+                                maxLength={100}
                             />
                         </div>
                         <FullField
                             name="official_name"
                             label={LABELS.official_name}
                             updateHandler={onUpdateField}
+                            onBlur={onBlurHandler}
                             value={profile.official_name ?? ''}
+                            error={formStateErr['official_name']?.['error'] ? formStateErr['official_name']['message'] : null}
+                            maxLength={200}
                         />
                         <div className={css['fields-groups']}>
                             {mainProfile?.is_fop ?