lol

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

@@ -1,5 +0,0 @@
-import React from 'react';
-
-export default ({ input, meta: {error}, type }) => (
-    <input className={`sign-in-form__input sign-in-form__input--${type === 'text' ? 'login' : 'password'}`} placeholder={type === 'text' ? 'Login' : 'Password'} type={type} {...input}/>
-)

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

@@ -1,7 +1,7 @@
 import React from 'react';
 import { Field, reduxForm } from 'redux-form'
 import validate from './validate'
-import formInput from './formInput'
+import formInput from './../../../common/formInput'
 import { Link } from 'react-router-dom'
 import * as routes from './../../../../constants/routes'
 
@@ -14,14 +14,14 @@ class Form extends React.Component {
 
     render() {
         return (
-            <form className="sign-in-form" onSubmit={this.handleSubmit} method="POST">
-                <h2 className="sign-in-form__header">Sign In</h2>
-                <Field name="login" component={formInput} type="text"/>
-                <Field name="password" component={formInput} type="password" />
-                <button className="sign-in-form__submit-button">Sign In</button>
-                <p className="sign-in-form__link--forgot-password"><Link to={routes.PASSWORD_FORGET}>Forgot password ?</Link></p>
-                <hr className="sign-in-form__divider"/>
-                <p className="sign-in-form__link--sign-up">Still ain't got an account? <Link to={routes.SIGN_UP}>Sign up</Link> first!</p>
+            <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="sign-form__submit-button">Sign In</button>
+                <p className="sign-form__link--forgot-password"><Link 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 to={routes.SIGN_UP}>Sign up</Link> first!</p>
             </form>    
         )
     }

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

@@ -0,0 +1,38 @@
+import React from 'react';
+import { Field, reduxForm } from 'redux-form'
+import validate from './validate'
+import formInput from './../../../common/formInput'
+import { Link } from 'react-router-dom'
+import * as routes from './../../../../constants/routes'
+
+
+class Form extends React.Component {
+
+    handleSubmit = (event) => {
+        alert("lol");
+    }
+
+    render() {
+        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" />
+                </div>
+
+
+                <button className="sign-form__submit-button">Create Account</button>
+                <p className="sign-form__agreement">By clicking this button you actually would donate us your flat !</p>
+            </form>
+        )
+    }
+}
+
+export default reduxForm({
+    form: "signUp",
+    validate
+})(Form)

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

@@ -0,0 +1,3 @@
+export default function validate(values) {
+    
+}

src/components/auth/signUpPage/index.js

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

src/components/common/formInput/index.js

@@ -0,0 +1,5 @@
+import React from 'react';
+
+export default ({ input, meta: {error}, type, className, placeholder}) => (
+    <input className={className} placeholder={placeholder} type={type} {...input}/>
+)

src/components/homePage/index.js

@@ -1,29 +1,5 @@
 import React from 'react';
-import { Link } from 'react-router-dom';
-import * as routes from './../../constants/routes'
 
 export default props => (
-    <div className="home-page">
-        <div className="home-page__about">
-            <h1 className="description__header">
-                We are the powerfull servise providing you the ability to create and manage
-                your own tests, in any categories, choosing your own marking methods.
-            </h1>
-            <hr className="description__divider" />
-            <p className="description__main">
-                You can <span className="description__inline--pretty">share</span>
-                {" "}your test with anybody you'd like: no matter your friend or college or even subordinates
-                can easily pass them, get marks and <span className="description__inline--pretty">share</span> them!
-            </p>
-        </div>
-        <div className="home-page__links-container">
-            <Link to={routes.SIGN_IN} class="home-page__links home-page__links--sign-in">
-                Sign in
-            </Link>
-            <Link to={routes.SIGN_UP} class="home-page__links home-page__links--sign-up">
-                Sign up
-            </Link>
-            {/* rgb(221,221,221) */}
-        </div>
-    </div>
+    <div>there should be a home component</div>
 )

src/components/landingPage/index.js

@@ -0,0 +1,28 @@
+import React from 'react';
+import { Link } from 'react-router-dom';
+import * as routes from './../../constants/routes'
+
+export default props => (
+    <div className="home-page">
+        <div className="home-page__about">
+            <h1 className="description__header">
+                We are the powerfull servise providing you the ability to create and manage
+                your own tests, in any categories, choosing your own marking methods.
+            </h1>
+            <hr className="description__divider" />
+            <p className="description__main">
+                You can <span className="description__inline--pretty">share</span>
+                {" "}your test with anybody you'd like: no matter your friend or college or even subordinates
+                can easily pass them, get marks and <span className="description__inline--pretty">share</span> them!
+            </p>
+        </div>
+        <div className="home-page__links-container">
+            <Link to={routes.SIGN_IN} class="home-page__links home-page__links--sign-in">
+                Sign in
+            </Link>
+            <Link to={routes.SIGN_UP} class="home-page__links home-page__links--sign-up">
+                Sign up
+            </Link>
+        </div>
+    </div>
+)

src/components/notFound/index.js

@@ -0,0 +1,12 @@
+import React from 'react';
+import { Link } from 'react-router-dom';
+import { HOME } from './../../constants/routes'
+
+export default props => (
+    <div className="not-found">
+        <img className="not-found__image" src="http://kiwanismiracleleague.org/wp-content/themes/chillibox/media/images/404.png" alt="" />
+        <hr className="not-found__divider"/>
+        <h1 className="not-found__message">Sorry, but looks like nobody lives here...</h1>
+        <p><Link className="not-found__link--home" to={HOME}>Go home</Link></p>
+    </div>
+)

src/router.js

@@ -1,20 +1,26 @@
 import React from "react";
 import { Switch, Route } from "react-router-dom";
 // import AuthPage from './containers/AuthPage'
-import homePage from './components/homePage'
 
 import * as routes from './constants/routes'
 
 import Header from "./containers/Header"
+import landingPage from './components/landingPage'
 import signInPage from './components/auth/signInPage'
 import Footer from './components/footer'
+import signUpPage from "./components/auth/signUpPage";
+import notFound from "./components/notFound";
+import homePage from "./components/homePage";
 
 export default () => (
 	<div className="container">
 		<Header />
 		<Switch>
-            <Route path={routes.LANDING} exact component={homePage} />
+            <Route path={routes.LANDING} exact component={landingPage} />
 			<Route path={routes.SIGN_IN} exact component={signInPage} />
+            <Route path={routes.SIGN_UP} exact component={signUpPage} />
+            <Route path={routes.HOME} exact component={homePage} />
+            <Route component={notFound} />
 		</Switch>
         <Footer />
 	</div>

src/styles/components/_homePage.scss

@@ -4,7 +4,6 @@
     background-repeat: no-repeat;
     background-size: cover;
     background-position: center center;
-    // height: 85vh;
     padding-top: 11.5vh;
     padding-bottom: 9vh;
     font-family: 'Cormorant Infant', serif;

src/styles/components/_notFound.scss

@@ -0,0 +1,27 @@
+.not-found {
+    text-align: center;
+    padding: 10vh 0;
+    font-family: 'Poiret One', cursive;
+    
+    &__image {
+        display: block;
+        margin: auto;
+    }
+    &__divider {
+        margin: 25px auto;
+        width: 40%;
+    }
+    &__message {
+        margin-bottom: 8vh;
+    }
+    &__link {
+        &--home {
+            font-size: 30px;
+            padding: 3vh 6vh;
+            background: rgba(211,211,211, .9);
+            margin-top: 35px;
+            box-shadow: 0 0 10px grey;
+
+        }
+    }
+}

src/styles/components/_signInPage.scss

@@ -1,8 +1,11 @@
-.sign-in {
-    height: 83.5vh;
+.sign {
+    &-in {
+        height: 83.5vh;
+    }
     &-form {
         font-size: 18px;
         font-family: 'Poiret One', cursive;
+        font-weight: bold;
         position: relative;
         left: 50%;
         top: 50%;
@@ -19,20 +22,42 @@
         &__header {
             margin: 0 0 35px 0;
         }
+        &__password-container {
+            margin: 50px 0;
+        }
         &__input {
             display: block;
-            text-align: center;
+            // text-align: center;
             margin: 25px auto;
             border: 1px solid lightgray;
             padding: 15px;
+            box-shadow: 0 0 3px grey;
+
             &--login {}
             &--password {}
         }
+        &__input::placeholder {
+            font-family: 'Poiret One', cursive;
+            font-size: 18px;
+            font-weight: bold;
+
+        }
         &__submit-button {
-            padding: 5px;
             text-transform: uppercase;
+            // font-family: 'Cormorant Infant', serif;
+            font-family: 'Poiret One', cursive;
+
+            font-weight: bold;
+            padding: 1.5vh 3vh;
+            background: rgba(211,211,211, .9);
+            box-shadow: 0 0 10px grey;
+        }
+        &__link {
+            &--sign-up a{
+                color: green;
+                text-transform: uppercase;
+            }
         }
-        &__link {}
         &__divider {
             width: 60%;
         }

src/styles/index.scss

@@ -4,7 +4,8 @@
 @import "base/typography";
 
 @import "components/header";
-@import "components/signInPage";
+@import "components/signPage";
 @import "components/footer";
-@import "components/homePage";
+@import "components/landingPage";
+@import "components/notFound"