#334 [Authorization] ability to select both company startup

FrontEnd/src/components/SignUp/components/signup/signup-form/SignUpFormContent.js

@@ -3,10 +3,13 @@ import { useForm } from 'react-hook-form';
 import { useNavigate  } from 'react-router-dom';
 
 import axios from 'axios';
+
 import EyeInvisible from '../../../../authorization/EyeInvisible';
 import EyeVisible from '../../../../authorization/EyeVisible';
 import styles from './SignUpFormContent.module.css';
 
+import { EMAIL_PATTERN, PASSWORD_PATTERN } from '../../../../../constants/constants';
+
 export function SignUpFormContentComponent(props) {
   const [showPassword, setShowPassword] = useState(false);
   const [showConfirmPassword, setShowConfirmPassword] = useState(false);
@@ -27,10 +30,6 @@ export function SignUpFormContentComponent(props) {
     confirmPassword: 'Паролі не збігаються',
   };
 
-  const emailPattern = /^[A-Z0-9._%+-]+@[A-Z0-9.-]+\.[A-Z]{2,}$/i;
-
-  const passwordPattern = /^(?=.*[0-9])(?=.*[a-zA-Z])[a-zA-Z0-9]{8,20}$/;
-
   const {
     register,
     handleSubmit,
@@ -42,34 +41,15 @@ export function SignUpFormContentComponent(props) {
     mode: 'all',
   });
 
-  const [isChecked, setIsChecked] = useState({
-    startup: false,
-    company: false,
-  });
-
-  const onChangeCheckbox = (event) => {
-    if (event.target.name === 'startup') {
-      setIsChecked({
-        startup: true,
-        company: false,
-      });
-    } else if (event.target.name === 'company') {
-      setIsChecked({
-        startup: false,
-        company: true,
-      });
-    }
-  };
-
   const { setIsValid } = props;
 
   useEffect(() => {
-    const companyOrStartup = isChecked.company || isChecked.startup;
-    const formIsValid = companyOrStartup && isValid;
-    setIsValid(formIsValid);
-  }, [isValid, setIsValid, isChecked.company, isChecked.startup]);
+    setIsValid(isValid);
+  }, [isValid, setIsValid]);
+
 
   const onSubmit = () => {
+
     const dataToSend = {
       email: getValues('email'),
       password: getValues('password'),
@@ -78,11 +58,10 @@ export function SignUpFormContentComponent(props) {
       surname: getValues('surname'),
       company: {
         name: getValues('companyName'),
-        is_registered: isChecked.company,
-        is_startup: isChecked.startup,
+        is_registered: (getValues('representative').indexOf('company') > -1),
+        is_startup: (getValues('representative').indexOf('startup') > -1),
       },
     };
-
     axios({
       method: 'post',
       url: `${process.env.REACT_APP_BASE_API_URL}/api/auth/users/`,
@@ -127,7 +106,7 @@ export function SignUpFormContentComponent(props) {
                 {...register('email', {
                   required: errorMessageTemplates.required,
                   pattern: {
-                    value: emailPattern,
+                    value: EMAIL_PATTERN,
                     message: errorMessageTemplates.email,
                   },
                 })}
@@ -182,7 +161,7 @@ export function SignUpFormContentComponent(props) {
                 {...register('password', {
                   required: errorMessageTemplates.required,
                   pattern: {
-                    value: passwordPattern,
+                    value: PASSWORD_PATTERN,
                     message: errorMessageTemplates.password,
                   },
                 })}
@@ -301,8 +280,10 @@ export function SignUpFormContentComponent(props) {
                       <input
                         type="checkbox"
                         name="company"
-                        onChange={onChangeCheckbox}
-                        checked={isChecked.company}
+                        value={'company'}
+                        {...register('representative', {
+                          required: errorMessageTemplates.required
+                        })}
                       />
                     </div>
                     <label className={styles['representative__label']}>
@@ -318,8 +299,10 @@ export function SignUpFormContentComponent(props) {
                       <input
                         type="checkbox"
                         name="startup"
-                        onChange={onChangeCheckbox}
-                        checked={isChecked.startup}
+                        value={'startup'}
+                        {...register('representative', {
+                          required: errorMessageTemplates.required
+                        })}
                       />
                     </div>
                     <label className={styles['representative__label']}>
@@ -329,6 +312,9 @@ export function SignUpFormContentComponent(props) {
                 </div>
               </div>
             </div>
+            <div className={styles['signup-form__error']}>
+              {errors.representative && errors.representative.message}
+            </div>
           </div>
           <div className={styles['signup-form__checkboxes-container--rules']}>
             <div className={styles['rules__container']}>

authentication/serializers.py

@@ -58,10 +58,6 @@ def validate(self, value):
             custom_errors["comp_status"].append(
                 "Please choose who you represent."
             )
-        elif is_registered and is_startup:
-            custom_errors["comp_status"].append(
-                "Please choose either registered or startup."
-            )
         try:
             validate_password_long(password)
         except ValidationError as error:

authentication/tests/test_user_registration.py

@@ -154,8 +154,11 @@ def test_register_user_who_represent_both_chosen(self):
             },
             format="json",
         )
-        self.assertEqual(response.status_code, status.HTTP_400_BAD_REQUEST)
+        self.assertEqual(response.status_code, status.HTTP_201_CREATED)
         self.assertEqual(
-            {"comp_status": ["Please choose either registered or startup."]},
+            {
+                "name": "Jane",
+                "surname": "Smith",
+            },
             response.json(),
         )