validation added

src/components/auth/signInPage/form/index.js

@@ -9,16 +9,19 @@ import * as routes from './../../../../constants/routes'
 class Form extends React.Component {
 
     handleSubmit = (event) => {
-        alert("lol");
+        event.preventDefault();
+        alert('lol');
     }
 
     render() {
+        const { invalid } = this.props;
+
         return (
             <form className="sign-form" onSubmit={this.handleSubmit} method="POST">
                 <h2 className="sign-form__header">Sign In</h2>
                 <Field className="sign-form__input sign-form__input--text" placeholder="Login" name="login" component={formInput} type="text"/>
                 <Field className="sign-form__input sign-form__input--password" placeholder="Password" name="password" component={formInput} type="password" />
-                <button className="link--btn link--btn60">Sign In</button>
+                <button className="link--btn link--btn60" disabled={invalid}>Sign In</button>
                 <p className="sign-form__link--forgot-password"><Link className="link--inline" to={routes.PASSWORD_FORGET}>Forgot password ?</Link></p>
                 <hr className="sign-form__divider"/>
                 <p className="sign-form__link--sign-up">Still ain't got an account? <Link className="link--inline" to={routes.SIGN_UP}>Sign up</Link> first!</p>

src/components/auth/signInPage/form/validate/index.js

@@ -1,12 +1,16 @@
 export default function validate(values) {
-    // const { login, password } = this.values;
-    // const errors = {};
-
-    // if (!login) {
-    //     errors.login = "Required"
-    // }
-    // else if (login.match)
-    // if (!password) {
-    //     errors.password = "Required"
-    // }
+    const { login, password } = values;
+    const errors = {};
+
+    console.log("Validate, sign-in page form: ", values);
+
+    if (!login) {
+        errors.login = "Required";
+    }
+
+    if (!password) {
+        errors.password = "Required"
+    }
+
+    return errors;
 }

src/components/auth/signUpPage/form/index.js

@@ -9,23 +9,26 @@ import * as routes from './../../../../constants/routes'
 class Form extends React.Component {
 
     handleSubmit = (event) => {
+        event.preventDefault();
         alert("lol");
     }
 
     render() {
+        const { invalid } = this.props;
+        console.log(this.props);
+
         return (
             <form className="sign-form" onSubmit={this.handleSubmit} method="POST">
                 <h2 className="sign-form__header">Sign Up</h2>
-                
+
                 <Field name="login" className="sign-form__input sign-form__input--text" placeholder="Login" component={formInput} type="text" />
 
                 <div className="sign-form__password-container">
                     <Field name="password" className="sign-form__input sign-form__input--password" placeholder="Password" component={formInput} type="password" />
-                    <Field name="password" className="sign-form__input sign-form__input--password" placeholder="Password confirmation" component={formInput} type="password" />
+                    <Field name="passwordConfirmation" className="sign-form__input sign-form__input--password" placeholder="Password confirmation" component={formInput} type="password" />
                 </div>
 
-
-                <button className="sign-form__link--with-margin link--btn link--btn6s0">Create Account</button>
+                <button className="sign-form__link--with-margin link--btn link--btn6s0" disabled={invalid}>Create Account</button>
                 <p className="sign-form__agreement">By clicking this button you actually would donate us your flat !</p>
             </form>
         )

src/components/auth/signUpPage/form/validate/index.js

@@ -1,3 +1,41 @@
 export default function validate(values) {
+    const { login, password, passwordConfirmation } = values;
+    const errors = {};
+
+    if (!login) {
+        errors.login = "Required";
+    }
+    else if (/[,]/.test(login)) {
+        errors.login = "Invalid symbol: \",\" is not allowed!";
+    }
+    else if (login.length < 8 || login.length > 20) {
+        errors.login = "Invalid login length: login should be from 8 to 20 symbols";
+    }
+    else if (!/^[a-z0-9_-]{8,20}$/i.test(login)) {
+        errors.login = "Invalid login, try another one";
+    }
     
+    if (!password) {
+        errors.password = "Required"
+    }
+    else if (/[,]/.test(password)) {
+        errors.password = "Invalid symbol: \",\" is not allowed!";
+    }
+    else if (password.length < 8 || password.length > 20) {
+        errors.password = "Invalid password length: password should be from 8 to 20 symbols";
+    }
+    else if (!/^[a-z0-9_-]{8,20}$/i.test(password)) {
+        errors.password = "Invalid password, try another one";
+    }
+
+    if (!passwordConfirmation) {
+        errors.passwordConfirmation = "Required";
+    }
+    else if (password !== passwordConfirmation) {
+        errors.passwordConfirmation = "Passwords don't match each other!";
+    }
+
+
+
+    return errors;
 }

src/components/auth/signUpPage/index.js

@@ -1,7 +1,6 @@
 import React from 'react';
 import Form from './form'
 
-
 export default props => (
     <div className="sign-in">
         <Form />

src/components/common/formInput/index.js

@@ -1,5 +1,8 @@
-import React from 'react';
+import React, { Fragment } from 'react';
 
-export default ({ input, meta: {error}, type, className, placeholder}) => (
-    <input className={className} placeholder={placeholder} type={type} {...input}/>
+export default ({ input, className, placeholder, type, meta: { touched, error } }) => (
+    <Fragment>
+        <input className={className} placeholder={placeholder} type={type} {...input} />
+        {touched && (error && <p style={{"color": "red", "text-transform": "uppercase"}}>⚠ {error}</p>)}
+    </Fragment>
 )

src/styles/abstracts/_variables.scss

@@ -14,5 +14,8 @@ $color-lightgrey-transparent: rgba(211,211,211, .9);
 $color-lightsteelblue: #B0C4DE;
 $color-lightsteelblue-transparent: rgba(176, 196, 222, .9);
 
+$padding-top-fixed: 170px;
+$padding-bottom-fixed: 45px;
+
 
 

src/styles/components/_button.scss

@@ -9,6 +9,12 @@
         background: $color-lightgrey-transparent;
         box-shadow: 0 0 10px $color-grey;
         border: none;
+            @media screen and (min-width: 1200px) {
+                transition: transform 200ms ease-in-out;
+                &:hover {
+                    transform: scale(1.2,1.2);
+                }
+            }
         &50 {
             width: 50%;
         }

src/styles/components/_landingPage.scss

@@ -4,7 +4,7 @@
     background-repeat: no-repeat;
     background-size: cover;
     background-position: top center;
-    padding-top: 200px;
+    padding-top: $padding-top-fixed;
     padding-bottom: 9vh;
     font-family: 'Cormorant Infant', serif;
     &__about,

src/styles/components/_notFound.scss

@@ -1,7 +1,9 @@
 .not-found {
     text-align: center;
-    padding: 175px 0 10vh 0;
+    padding-top: $padding-top-fixed;
     font-family: 'Poiret One', cursive;
+    padding-top: $padding-top-fixed;
+    padding-bottom: $padding-bottom-fixed;
     
     &__image {
         display: block;

src/styles/components/_signPage.scss

@@ -1,7 +1,8 @@
 .sign {
     &-in {
         // height: 83.5vh;
-        padding: 30vh 0 5vw 0;
+        padding-top: $padding-top-fixed;
+        padding-bottom: $padding-bottom-fixed;
     }
     &-form {
         font-size: 18px;