created valodation forms and fix login page

src/components/login-form/LoginForm.js

@@ -4,6 +4,7 @@ import { Field, reduxForm } from 'redux-form';
 import './login.scss';
 
 import { customInput } from "../customFields/customInput/customInput";
+import { validationForms } from "../../utils/validationForms";
 
 let LoginForm = props => {
     const { handleSubmit, postLoginSubmit } = props;
@@ -14,7 +15,7 @@ let LoginForm = props => {
 
     return (
         <form className="form" onSubmit={handleSubmit(submit)}>
-            <Field name="email" component={customInput} type="email" id="email" label="E-mail" />
+            <Field name="email" component={customInput} type="email" id="email" label="E-mail"/>
             <Field name="password" component={customInput} type="password" id="password" label="Password"/>
             <button type="submit" className="btn">Sign in</button>
         </form>
@@ -22,7 +23,8 @@ let LoginForm = props => {
 };
 
 LoginForm = reduxForm({
-    form: 'login'
+    form: 'login',
+    validate: validationForms
 })(LoginForm)
 
 export default LoginForm

src/components/reg-form-event/RegFormEvent.js

@@ -5,6 +5,7 @@ import './reg-form-event.scss';
 
 import { customSelect } from "../customFields/customSelect/customSelect";
 import { customInput } from "../customFields/customInput/customInput";
+import { validationForms } from "../../utils/validationForms";
 
 let RegFormEvent = props => {
     const { handleSubmit, regEventSubmit, eventId, reset } = props;
@@ -35,9 +36,10 @@ let RegFormEvent = props => {
                     <Field name="sex" component="input" type="radio" id="female" value="female" hidden/>
                     <label htmlFor="female">female</label>
                 </div>
+                <div className="required-field">!Required field</div>
             </div>
-
-            <Field name="distance" label="Distance" component={customSelect}>
+            
+            <Field name="distance" label="Distance" required component={customSelect}>
                 {eventTypes.map( (elem,ind) => <option key={ind} value={elem}>{elem}</option>)}
             </Field>
 
@@ -51,7 +53,8 @@ let RegFormEvent = props => {
 };
 
 RegFormEvent = reduxForm({
-    form: 'regFormEvent'
+    form: 'regFormEvent',
+    validate: validationForms
 })(RegFormEvent)
 
 export default RegFormEvent

src/components/registration-form/RegistrationForm.js

@@ -4,14 +4,18 @@ import { Field, reduxForm } from 'redux-form';
 import './registrationForm.scss';
 
 import { customInput } from "../customFields/customInput/customInput";
+import { validationForms } from "../../utils/validationForms";
 
 let RegistrationForm = props => {
-    const { handleSubmit, postCheckInSubmit } = props;
+    const { handleSubmit, postCheckInSubmit, message } = props;
 
     const submit = value => {
-        //console.log(value);        
+        //console.log(value);
         postCheckInSubmit(value);
-        props.history.push('/login');
+        if(message !== 'User was successfully register'){
+            //console.log(message);
+            props.history.push('/login');
+        }
     };
 
     return (
@@ -29,6 +33,7 @@ let RegistrationForm = props => {
                     <Field name="sex" component="input" type="radio" id="female" value="female" hidden/>
                     <label htmlFor="female">female</label>
                 </div>
+                <div className="required-field">!Required field</div>
             </div>
             <div className="form-item">
                 <Field name="phone" component={customInput} type="phone" id="phone" label="Phone" />
@@ -50,7 +55,8 @@ let RegistrationForm = props => {
 };
 
 RegistrationForm = reduxForm({
-    form: 'registration'
+    form: 'registration',
+    validate: validationForms
 })(RegistrationForm)
 
 export default RegistrationForm

src/conteiners/login/Login.js

@@ -11,6 +11,7 @@ import LoginForm from '../../components/login-form/LoginForm';
 export class Login extends React.Component {
     render() {
         const { postLoginSubmit, message } = this.props;
+        console.log(message);
         return (
             <div className="login-page">
                 <div className="form-login">
@@ -20,7 +21,7 @@ export class Login extends React.Component {
                         </Link>
                     </div>
                     {
-                        message === "User already exist" && <h3>{message}!</h3>
+                        message && <h3>{message}</h3>
                     }
                     <LoginForm postLoginSubmit={postLoginSubmit}/>
                     <p className="form-quest">Don't have an account? <Link to="/registration">Sign up now</Link></p>

src/conteiners/login/login.scss

@@ -25,7 +25,7 @@
         }
 
         h3 {
-            font-size: 2.4rem;
+            font-size: 2rem;
             color: $color-error;
             text-align: center;
             font-weight: $bold;

src/conteiners/registrationPage/RegistrationPage.js

@@ -21,9 +21,9 @@ export class Login extends React.Component {
                         </Link>
                     </div>
                     {
-                        message === "User already exist" && <h3>{message}!</h3>
+                        message && <h3>{message}</h3>
                     }
-                    <RegistrationForm history={history} postCheckInSubmit={this.props.postCheckInSubmit}/>
+                    <RegistrationForm message={message} history={history} postCheckInSubmit={this.props.postCheckInSubmit}/>
                     <p className="form-quest">You have an account? <Link to="/login">Login now</Link></p>
                 </div>
             </div>

src/conteiners/registrationPage/registration-page.scss

@@ -25,7 +25,7 @@
         }
 
         h3 {
-            font-size: 2.4rem;
+            font-size: 2rem;
             color: $color-error;
             text-align: center;
             font-weight: $bold;
@@ -64,6 +64,14 @@
                 padding: 0;
             }
         }
+
+        .reg-radio {
+            margin-bottom: 2rem;
+
+            label {
+                margin-bottom: 1rem;
+            }
+        }
     }
 
     @media (max-width: $small) {

src/reducers/login.js

@@ -12,7 +12,7 @@ export default (state = initialState, action) => {
         }
 
         case types.POST_REQUEST_SUCCESS_LOGIN: {   
-            //console.log('action.payload.user',action.payload.message);
+            console.log('action.payload.message',action.payload.message);
             return {
                 ...state,
                 user: action.payload.user,

src/styles/custom.scss

@@ -121,50 +121,19 @@ i {
     }
 }
 
-//radio button
-.reg-radio {
-    display: flex;
-    flex-wrap: wrap;
-
-    .radio-label {
-        width: 50%;
-
-        label {
-            display: block;
-            padding: 0 1rem 0 2.5rem;
-            font-size: 1.4rem;
-            position: relative;
-
-            &:before {
-                content: '';
-                display: inline-block;
-                position: absolute;
-                top: 50%;
-                left: 0;
-                transform: translateY(-50%);
-                width: 1.7rem;
-                height: 1.7rem;
-                border-radius: 50%;
-                border: 1px solid $color-mint;
-                background: $color-white;
-            }
-        }
+//input-box error message
+.input-box {
+    &__error {
+        color: $color-error;
+    }
+}
 
-        input {
-            &:checked + label {
-                &:after {
-                    content: '';
-                    display: inline-block;
-                    position: absolute;
-                    top: 50%;
-                    left: 0.5rem;
-                    transform: translateY(-50%);
-                    width: 0.7rem;
-                    height: 0.7rem;
-                    border-radius: 50%;
-                    background: $color-blue;
-                }
-            }
+//select error message
+.form-block {
+    &__select {
+        .error {
+            font-size: 1.3rem;
+            color: $color-error;
         }
     }
 }

src/styles/main.scss

@@ -3,4 +3,5 @@
 @import "base";
 @import "custom";
 @import "logo";
-@import "filters";
+@import "filters";
+@import "reg-radio";

src/styles/reg-radio.scss

@@ -0,0 +1,58 @@
+//radio button
+.reg-radio {
+    display: flex;
+    flex-wrap: wrap;
+    border-top: 1px solid $color-grey-light;
+    border-bottom: 1px solid $color-grey-light;
+    padding: 1rem 0.2rem 0.5rem;
+
+    .radio-label {
+        width: 50%;
+
+        label {
+            display: block;
+            padding: 0 1rem 0 2.5rem;
+            margin-bottom: 1rem;
+            font-size: 1.4rem;
+            position: relative;
+
+            &:before {
+                content: '';
+                display: inline-block;
+                position: absolute;
+                top: 50%;
+                left: 0;
+                transform: translateY(-50%);
+                width: 1.7rem;
+                height: 1.7rem;
+                border-radius: 50%;
+                border: 1px solid $color-mint;
+                background: $color-white;
+            }
+        }
+
+        input {
+            &:checked + label {
+                &:after {
+                    content: '';
+                    display: inline-block;
+                    position: absolute;
+                    top: 50%;
+                    left: 0.5rem;
+                    transform: translateY(-50%);
+                    width: 0.7rem;
+                    height: 0.7rem;
+                    border-radius: 50%;
+                    background: $color-blue;
+                }
+            }
+        }
+    }
+
+    .required-field {
+        width: 100%;
+        color: $color-blue;
+        font-size: 1.3rem;
+        font-weight: $semi-bold;
+    }
+}

src/styles/variables.scss

@@ -2,7 +2,7 @@
 $color-blue: #1f7394;
 $color-white: #ffffff;
 $color-black: #000000;
-$color-error: #c60000;
+$color-error: #9e4560;
 $color-grey-light: #eeeeee;
 $color-mint: #5acec2;
 $color-grey-2: #f5f5f5;

src/utils/validationForms.js

@@ -0,0 +1,33 @@
+export const validationForms = values => {
+	const errors = {};
+
+	if (!values.email) {
+		errors.email = "Invalid e-mail";
+	}
+
+	if (!values.password) {
+		errors.password = "Required field";
+    }
+    
+    if (!values.confirmPassword) {
+		errors.confirmPassword = "Required field";
+    }
+    
+    if (!values.name) {
+		errors.name = "Required field";
+    }
+    
+    if (!values.phone) {
+		errors.phone = "Invalid phone number";
+    }
+    
+    if (!values.distance) {
+		errors.distance = "Required field";
+    }
+    
+    if (!values.userCountry) {
+		errors.userCountry = "Required field";
+	}
+
+	return errors;
+};