creating registration page

src/actionTypes/actionTypes.js

@@ -14,4 +14,8 @@ export const SHOW_SIDEBAR = "SHOW_SIDEBAR";
 
 export const POST_REQUEST_LOGIN = "POST_REQUEST_LOGIN";
 export const POST_REQUEST_SUCCESS_LOGIN = "POST_REQUEST_SUCCESS_LOGIN";
-export const POST_REQUEST_ERROR_LOGIN = "POST_REQUEST_ERROR_LOGIN";
+export const POST_REQUEST_ERROR_LOGIN = "POST_REQUEST_ERROR_LOGIN";
+
+export const POST_REQUEST_CHECKIN = "POST_REQUEST_CHECKIN";
+export const POST_REQUEST_SUCCESS_CHECKIN = "POST_REQUEST_SUCCESS_CHECKIN";
+export const POST_REQUEST_ERROR_CHECKIN = "POST_REQUEST_ERROR_CHECKIN";

src/actions/registration.js

@@ -0,0 +1,37 @@
+import * as types from "../actionTypes/actionTypes";
+
+export const postCheckIn = payload => ({
+    type: types.POST_REQUEST_CHECKIN,
+    payload
+});
+
+export const postCheckInSuccess = payload => ({
+    type: types.POST_REQUEST_SUCCESS_CHECKIN,
+    payload
+});
+
+export const postCheckInError = payload => ({
+    type: types.POST_REQUEST_ERROR_CHECKIN,
+    payload
+});
+
+export const postCheckInSubmit = payload => {
+    return dispatch => {
+        let promise = fetch("https://api-marathon.herokuapp.com/api/v1/auth/register",
+            {
+                method: 'POST',
+                body: JSON.stringify(payload),
+                headers: {
+                    "Content-type": "application/json"
+                }
+            }
+        )
+
+        dispatch(postCheckIn())
+
+        promise.then(
+            data => data.json().then(data => dispatch(postCheckInSuccess(data))),
+            error => dispatch(postCheckInError(error))
+        )
+    }
+}

src/components/login-form/LoginForm.js

@@ -21,7 +21,7 @@ let LoginForm = props => {
                 <label htmlFor="password">Password</label>
                 <Field name="password" component="input" type="text" />
             </div>
-            <button type="submit">Submit</button>
+            <button type="submit">Sign in</button>
         </form>
         )
 };

src/components/registration-form/RegistrationForm.js

@@ -0,0 +1,48 @@
+import React from 'react'
+import { Field, reduxForm } from 'redux-form';
+
+import './registrationForm.scss';
+
+let RegistrationForm = props => {
+    const { handleSubmit, postCheckInSubmit } = props;
+
+    const submit = value => {
+        console.log(value);        
+        postCheckInSubmit(value);
+    };
+
+    return (
+        <form className="form" onSubmit={handleSubmit(submit)}>
+            <div>
+                <label htmlFor="name">Full name</label>
+                <Field name="name" component="input" type="text" />
+            </div>
+            <div>
+                <label htmlFor="sex">Sex</label>
+                <Field name="sex" component="select">
+                    <option value="male">male</option>
+                    <option value="female">female</option>
+                </Field>
+            </div>
+            <div>
+                <label htmlFor="phone">Phone</label>
+                <Field name="phone" component="input" type="phone" />
+            </div>
+            <div>
+                <label htmlFor="email">E-mail</label>
+                <Field name="email" component="input" type="email" />
+            </div>
+            <div>
+                <label htmlFor="password">Password</label>
+                <Field name="password" component="input" type="text" />
+            </div>
+            <button type="submit">Check in</button>
+        </form>
+        )
+};
+
+RegistrationForm = reduxForm({
+    form: 'login'
+})(RegistrationForm)
+
+export default RegistrationForm

src/components/registration-form/registrationForm.scss

@@ -0,0 +1 @@
+@import "../../styles/variables";

src/conteiners/home/Home.js

@@ -12,19 +12,21 @@ export default class Home extends React.Component {
     render() {
         return (
             <>
-            <Sidebar/>
-            <div className="hero">
-                <h1>International triathlon competitions among professionals and amateurs</h1>
+                <Sidebar/>
+                <div className="hero">
+                    <div className="hero-wrap">
+                        <h1>International triathlon competitions among professionals and amateurs</h1>                       
+                    </div>                    
 
-                <div className="bg"></div>
-                <div className="bg-img"></div>
+                    <div className="bg"></div>
+                    <div className="bg-img"></div>
 
-                <video id="background-video" loop autoPlay>
-                    <source src={this.state.videoURL} type="video/mp4" />
-                    <source src={this.state.videoURL} type="video/ogg" />
-                    Your browser does not support the video tag.
-                </video>
-            </div>
+                    <video id="background-video" loop autoPlay>
+                        <source src={this.state.videoURL} type="video/mp4" />
+                        <source src={this.state.videoURL} type="video/ogg" />
+                        Your browser does not support the video tag.
+                    </video>
+                </div>
             </>
         )
     }

src/conteiners/home/home.scss

@@ -7,6 +7,10 @@
     display: flex;
     align-items: center;
 
+    &-wrap {
+        padding-left: 320px;
+    }
+
     h1 {
         font-size: 36px;
         color: $color-white;

src/conteiners/login/Login.js

@@ -1,5 +1,6 @@
 import React from 'react';
 import { connect } from "react-redux";
+import { Link } from "react-router-dom";
 
 import { postLoginSubmit } from "../../actions/login";
 
@@ -7,7 +8,12 @@ import LoginForm from '../../components/login-form/LoginForm';
 
 export class Login extends React.Component {
     render() {
-        return ( <LoginForm postLoginSubmit={ this.props.postLoginSubmit }/> )
+        return (
+            <div>
+                <LoginForm postLoginSubmit={this.props.postLoginSubmit} />
+                <p>Don't have an account? <Link to="/registration">Sign up now</Link></p>
+            </div>
+        )
     }
 }
 

src/conteiners/registrationPage/RegistrationPage.js

@@ -0,0 +1,29 @@
+import React from 'react';
+import { connect } from "react-redux";
+import { Link } from "react-router-dom";
+
+import { postCheckInSubmit } from "../../actions/registration";
+
+import RegistrationForm from '../../components/registration-form/RegistrationForm';
+
+export class Login extends React.Component {
+    render() {
+        return (
+            <div>
+                <RegistrationForm postCheckInSubmit={this.props.postCheckInSubmit}/>
+                <p>You have an account? <Link to="/login">Login now</Link></p>
+            </div>
+        )
+    }
+}
+
+const mapStateToProps = state => {
+    return {
+        user: state.registration.user
+    };
+};
+
+export default connect(
+    mapStateToProps,
+    { postCheckInSubmit }
+)(Login);

src/reducers/combineReducers.js

@@ -4,9 +4,11 @@ import { reducer as formReducer } from "redux-form";
 import adminMainPageReducer from "./adminMainPageReducer";
 //import Sidebar from "./show-sidebar";
 import login from "./login";
+import registration from "./registration";
 
 export default combineReducers({
 	form: formReducer,
 	adminMainPageReducer,
-	login
+    login,
+    registration
 });

src/reducers/login.js

@@ -16,6 +16,7 @@ export default (state = initialState, action) => {
         }
 
         case types.POST_REQUEST_ERROR_LOGIN: {
+            console.log('error');
             return state;
         }
 

src/reducers/registration.js

@@ -0,0 +1,26 @@
+import * as types from "../actionTypes/actionTypes";
+
+const initialState = {
+    user: {}
+}
+
+export default (state = initialState, action) => {
+    switch (action.type) {
+        case types.POST_REQUEST_CHECKIN: {
+            return state;
+        }
+
+        case types.POST_REQUEST_SUCCESS_CHECKIN: {
+            console.log('some',action.payload.user);
+            return state;
+        }
+
+        case types.POST_REQUEST_ERROR_CHECKIN: {
+            console.log('error');
+            return state;
+        }
+
+        default:
+            return state;
+    }
+}

src/router.js

@@ -5,6 +5,7 @@ import AdminMainPage from './conteiners/adminMainPage/adminMainPage';
 import AdminAddEventPage from './conteiners/adminAddEventPage/adminAddEventPage';
 import Home from './conteiners/home/Home';
 import Login from './conteiners/login/Login';
+import RegistrationPage from './conteiners/registrationPage/RegistrationPage';
 
 import AdminAddPhotogalarytPage from "./conteiners/adminPhotogalaryPage/adminPhotogalaryPage"
 import Sidebar from './components/sidebar/Sidebar';
@@ -52,7 +53,9 @@ export default class Router extends React.Component {
 						</>
 	                )} />
 
-	                <Route exact path="/login" component={Login} />
+                    <Route exact path="/login" component={Login} />
+                    <Route exact path="/registration" component={RegistrationPage} />
+                    
 			           
 			        <Route exact path = '/admin' component = {AdminMainPage} />
 			        <Route exact path = '/admin/add_new_event' component = {AdminAddEventPage} />

src/styles/base.scss

@@ -113,7 +113,7 @@ button {
     box-shadow: none;
 }
 
-.button-position-bottom{
+.button-position-bottom {
 	max-width: 1000px;
 	position: fixed;
     bottom: 5px;
@@ -121,4 +121,13 @@ button {
     transform: translate(0% -50%);
 	transform: translateX(-50%);
 	z-index: 1;
+}
+
+.container {
+    &-wrap {
+        max-width: 1440px;
+        width: 100%;
+        padding-left: 16px;
+        padding-right: 16px;
+    }
 }