Merge branch 'dev' of http://gitlab.a-level.com.ua/Entony/FEA_12_TRIATHLON into dev

src/actionTypes/actionTypes.js

@@ -68,4 +68,8 @@ export const GET_EVENT_BY_TITLE_FAIL = "GET_EVENT_BY_TITLE_FAIL";
 
 export const GET_REGISTRED_USERS = "GET_REGISTRED_USERS";
 export const GET_REGISTRED_USERS_SUCCESS = "GET_REGISTRED_USERS_SUCCESS";
-export const GET_REGISTRED_USERS_FAIL = "GET_REGISTRED_USERS_FAIL";
+export const GET_REGISTRED_USERS_FAIL = "GET_REGISTRED_USERS_FAIL";
+
+export const GET_USERS_INFO = "GET_USERS_INFO";
+export const GET_USERS_INFO_SUCCESS = "GET_USERS_INFO_SUCCESS";
+export const GET_USERS_INFO_ERROR = "GET_USERS_INFO_ERROR";

src/actions/getUserInfo.js

@@ -0,0 +1,29 @@
+import * as types from "../actionTypes/actionTypes";
+
+export const getUserInfoRequest = payload => ({
+    type: types.GET_USERS_INFO,
+    payload
+});
+
+export const getUserInfoRequestSuccess = payload => ({
+    type: types.GET_USERS_INFO_SUCCESS,
+    payload
+});
+
+export const getUserInfoRequestError = payload => ({
+    type: types.GET_USERS_INFO_ERROR,
+    payload
+});
+
+export const getUserInfo = id => {
+    return dispatch => {
+        let promise = fetch(`https://api-marathon.herokuapp.com/api/v1/users/${id}`)
+
+        dispatch(getUserInfoRequest())
+
+        promise.then(
+            data => data.json().then(data => dispatch(getUserInfoRequestSuccess(data))),
+            error => dispatch(getUserInfoRequestError(error))
+        )
+    }
+}

src/components/eventForm/eventReduxForm.js

@@ -31,7 +31,9 @@ const EventReduxForm = ({
             showConfirmationMessage();
 		}
 		reset();
-	};
+    };
+    
+    console.log('initialValues',initialValues);
 
     
 	// const resetForm = () => {

src/components/filtersEvents/FiltersEvents.js

@@ -3,26 +3,27 @@ import { Field, reduxForm } from 'redux-form';
 
 import './filtersEvents.scss';
 
+import { customSelect } from "../customFields/customSelect/customSelect";
+
 let FiltersEvents = props => {
     const { handleSubmit, getAllEvents } = props;
+    const eventTypes = ['All events','Marathon','Triathlon','Cycling'];
 
     const submit = value => {
         console.log(value);
-        getAllEvents(value.typeEvent);
+        getAllEvents(value.eventType);
     };
 
     return (
-        <form className="form" onSubmit={handleSubmit(submit)}>
+        <form className="form-filter" onSubmit={handleSubmit(submit)}>
             <div>
-                <label htmlFor="typeEvent">Type event</label>
-                <Field name="typeEvent" component="select">
-                    <option value="All events">All events</option>
-                    <option value="Marathon">Marathon</option>
-                    <option value="Triathlon">Triathlon</option>
-                    <option value="Cycling">Cycling</option>
+                <Field name="eventType" label="Event Type" component={customSelect}>
+                    {eventTypes.map( (elem,ind) => <option key={ind} value={elem}>{elem}</option>)}
                 </Field>
             </div>
-            <button type="submit">Search</button>
+            <div className="btn-group">
+                <button type="submit" className="btn">Search</button>
+            </div>            
         </form>
     )
 };

src/components/filtersEvents/filtersEvents.scss

@@ -1 +1,13 @@
 @import "../../styles/variables";
+
+.form-filter {
+    .form-block__select {
+        width: 100%;
+    }
+
+    .btn-group {
+        text-align: center;
+        padding-top: 1rem;
+        padding-bottom: 0;
+    }
+}

src/components/login-form/LoginForm.js

@@ -3,6 +3,8 @@ import { Field, reduxForm } from 'redux-form';
 
 import './login.scss';
 
+import { customInput } from "../customFields/customInput/customInput";
+
 let LoginForm = props => {
     const { handleSubmit, postLoginSubmit } = props;
 
@@ -13,14 +15,12 @@ let LoginForm = props => {
     return (
         <form className="form" onSubmit={handleSubmit(submit)}>
             <div>
-                <label htmlFor="email">E-mail</label>
-                <Field name="email" component="input" type="text" id="email" />
+                <Field name="email" component={customInput} type="email" id="email" label="E-mail"/>
             </div>
             <div>
-                <label htmlFor="password">Password</label>
-                <Field name="password" component="input" type="text" id="password" />
+                <Field name="password" component={customInput} type="password" id="password" label="Password"/>
             </div>
-            <button type="submit">Sign in</button>
+            <button type="submit" className="btn">Sign in</button>
         </form>
         )
 };

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

@@ -3,8 +3,12 @@ import { Field, reduxForm } from 'redux-form';
 
 import './reg-form-event.scss';
 
+import { customSelect } from "../customFields/customSelect/customSelect";
+import { customInput } from "../customFields/customInput/customInput";
+
 let RegFormEvent = props => {
     const { handleSubmit, regEventSubmit, eventId } = props;
+    const eventTypes = ['Select distance', 'Half marathone','Marathone'];
 
     const submit = value => {
         value.event = eventId;
@@ -15,36 +19,30 @@ let RegFormEvent = props => {
 
     return (
         <form className="form" onSubmit={handleSubmit(submit)}>
-             <div>
-                <label htmlFor="name">Full name</label>
-                <Field name="name" component="input" type="text" id="name"/>
-            </div>
-            <div>
-                <label htmlFor="phone">Phone</label>
-                <Field name="phone" component="input" type="phone" id="phone"/>
-            </div>
-            <div>
-                <label htmlFor="email">E-mail</label>
-                <Field name="email" component="input" type="text" />
-            </div>
-            <div>
-                <label htmlFor="male">Male</label>
-                <Field name="sex" component="input" type="radio" id="male" value="male" checked="checked"/>
+            <Field name="name" label="Full name"  type="text" id="name" component={customInput} />
 
-                <label htmlFor="female">female</label>
-                <Field name="sex" component="input" type="radio" id="female" value="female"/>
-            </div>
-            <div>
-                <label>Distance</label>
-                <Field name="distance" component="select">
-                    <option value="Half marathone">Half marathone</option>
-                    <option value="Marathone">Marathone</option>
-                </Field>
-            </div>
-            <div>
-                <label htmlFor="userCountry">Country</label>
-                <Field name="userCountry" component="input" type="text" id="userCountry"/>
+            <Field name="phone" label="Phone"  type="phone" id="phone" component={customInput} />
+
+            <Field name="email" label="E-mail"  type="email" id="email" component={customInput} />
+
+            <div className="reg-radio">
+                <div className="radio-label">
+                    <Field name="sex" component="input" type="radio" id="male" value="male" hidden/>
+                    <label htmlFor="male">male</label>
+                </div>
+
+                <div className="radio-label">
+                    <Field name="sex" component="input" type="radio" id="female" value="female" hidden/>
+                    <label htmlFor="female">female</label>
+                </div>
             </div>
+
+            <Field name="distance" label="Distance" component={customSelect}>
+                {eventTypes.map( (elem,ind) => <option key={ind} value={elem}>{elem}</option>)}
+            </Field>
+
+            <Field name="userCountry" label="Country"  type="text" id="userCountry" component={customInput} />
+
             <div className="btn-group">
                 <button className="btn" type="submit">Register</button>
             </div>

src/components/registration-form/RegistrationForm.js

@@ -3,6 +3,8 @@ import { Field, reduxForm } from 'redux-form';
 
 import './registrationForm.scss';
 
+import { customInput } from "../customFields/customInput/customInput";
+
 let RegistrationForm = props => {
     const { handleSubmit, postCheckInSubmit } = props;
 
@@ -14,34 +16,33 @@ let RegistrationForm = props => {
     return (
         <form className="form" onSubmit={handleSubmit(submit)}>
             <div>
-                <label htmlFor="name">Full name</label>
-                <Field name="name" component="input" type="text" id="name"/>
+                <Field name="name" component={customInput} type="text" id="name" label="Full name"/>
             </div>
-            <div>
-                <label htmlFor="male">male</label>
-                <Field name="sex" component="input" type="radio" id="male" value="male" checked="checked"/>
+            <div className="reg-radio">
+                <div className="radio-label">
+                    <Field name="sex" component="input" type="radio" id="male" value="male" hidden/>
+                    <label htmlFor="male">male</label>
+                </div>
 
-                <label htmlFor="female">female</label>
-                <Field name="sex" component="input" type="radio" id="female" value="female"/>
+                <div className="radio-label">
+                    <Field name="sex" component="input" type="radio" id="female" value="female" hidden/>
+                    <label htmlFor="female">female</label>
+                </div>
             </div>
             <div>
-                <label htmlFor="phone">Phone</label>
-                <Field name="phone" component="input" type="phone" id="phone"/>
+                <Field name="phone" component={customInput} type="phone" id="phone" label="Phone"/>
             </div>
             <div>
-                <label htmlFor="email">E-mail</label>
-                <Field name="email" component="input" type="email" id="email"/>
+                <Field name="email" component={customInput} type="email" id="email" label="E-mail"/>
             </div>
             <div>
-                <label htmlFor="password">Password</label>
-                <Field name="password" component="input" type="text" id="password"/>
+                <Field name="password" component={customInput} type="password" id="password" label="Password"/>
             </div>
             <div>
-                <label htmlFor="confirmPassword">Confirm Password</label>
-                <Field name="confirmPassword" component="input" type="text" id="confirmPassword"/>
+                <Field name="confirmPassword" component={customInput} type="password" id="confirmPassword" label="Confirm Password"/>
             </div>
             
-            <button type="submit">Check in</button>
+            <button type="submit" className="btn">Check in</button>
         </form>
         )
 };

src/components/review-form/ReviewForm.js

@@ -3,6 +3,9 @@ import { Field, reduxForm } from 'redux-form';
 
 import './review-form.scss';
 
+import { customInput } from "../customFields/customInput/customInput";
+import { customTextarea } from "../customFields/customTextarea/customTextarea";
+
 let ReviewForm = props => {
     //const { handleSubmit, postReviewSubmit } = props;
     const { handleSubmit } = props;
@@ -15,15 +18,12 @@ let ReviewForm = props => {
 
     return (
         <form className="form" onSubmit={handleSubmit(submit)}>
-            <div>
-                <label htmlFor="name">Fullname</label>
-                <Field name="name" component="input" type="text" id="name"/>
+            <Field name="name" label="Full name"  type="text" id="name" component={customInput} />
+            <Field name="text" label="Your message" type="text" id="text" component={customTextarea} />
+
+            <div className="btn-group">
+                <button type="submit" className="btn">Send</button>
             </div>
-            <div>
-                <label htmlFor="text">Your message</label>
-                <Field name="text" component="textarea" type="text" id="text"/>
-            </div>            
-            <button type="submit">Send</button>
         </form>
         )
 };

src/components/settings-form/settings-form.scss

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

src/components/settings-form/settingsForm.js

@@ -0,0 +1,56 @@
+import React from 'react'
+import { Field, reduxForm } from 'redux-form';
+
+import './settings-form.scss';
+
+import { customInput } from "../customFields/customInput/customInput";
+
+let SettingsForm = props => {
+    //const { handleSubmit, postCheckInSubmit } = props;
+    const { handleSubmit, initialValues } = props;
+    console.log('initialValues',initialValues);
+    console.log(props)
+
+    const onChangeValue = e => {
+        console.log(e.target.value);
+    }
+
+    const submit = value => {
+        console.log(value);        
+        //postCheckInSubmit(value);
+    };
+
+    return (
+        <form className="form" onSubmit={handleSubmit(submit)}>
+            <div>
+                {/*<label htmlFor="name">Name</label>*/}
+                {/*<input name="name" type="text" id="name" value={userInfo.name}/>*/}
+                <Field name="name" component={customInput} id="name" label="Name" onChange={onChangeValue}/>
+            </div>
+            <div>
+                {/*<label htmlFor="phone">Phone</label>*/}
+                <Field name="phone" component={customInput} type="phone" id="phone" label="Phone" onChange={onChangeValue}/>
+            </div>
+            {/*<div>
+                <label htmlFor="email">E-mail</label>
+                <Field name="email" component="input" type="email" id="email"/>
+            </div>
+            <div>
+                <label htmlFor="password">Password</label>
+                <Field name="password" component="input" type="text" id="password"/>
+            </div>
+            <div>
+                <label htmlFor="confirmPassword">Confirm Password</label>
+                <Field name="confirmPassword" component="input" type="text" id="confirmPassword"/>
+            </div>*/}
+            
+            <button type="submit" className="btn">Save</button>
+        </form>
+        )
+};
+
+SettingsForm = reduxForm({
+    form: 'settings'
+})(SettingsForm)
+
+export default SettingsForm

src/conteiners/adminAddEventPage/adminAddEventPage.js

@@ -34,6 +34,7 @@ class AdminAddEventPage extends Component {
             eventTypes,
             editFormFlag
         } = this.props
+        console.log('eventFormInitialValue',eventFormInitialValue);
 
 
 		return (

src/conteiners/eventCard/EventCard.js

@@ -96,7 +96,7 @@ export class EventCard extends React.Component {
                                         </div>
                                     }
                                 </div>
-                                <div>
+                                <div className="reg-form-event">
                                     <RegFormEvent eventId={event._id} regEventSubmit={regEventSubmit}/>
                                 </div>
                             </div>

src/conteiners/eventCard/eventCard.scss

@@ -139,6 +139,23 @@
         .reg-form {
             width: 50%;
             padding: 0 1rem;
+
+            .reg-form-event {
+                .form {
+                    max-width: 25rem;
+                    margin: 5rem auto 0;
+                    border: 1px solid $color-mint;
+                    padding: 1.5rem;
+                    border-radius: 4px;
+                }
+
+                .form-block__select,
+                .input-box,
+                .reg-radio {
+                    width: 100%;
+                    margin-bottom: 2rem;
+                }
+            }
         }
     }
 
@@ -175,6 +192,7 @@
     margin: 0 auto;
     text-align: center;
     padding: 1.5rem;
+    border-radius: 4px;
 
     h3 {
         font-size: 2.4rem;

src/conteiners/login/Login.js

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

src/conteiners/login/login.scss

@@ -1,7 +1,47 @@
 @import "../../styles/variables";
 
-.form-quest {
-    a {
-        color: $color-mint;
+.login-page {
+    position: absolute;
+    top: 0;
+    right: 0;
+    bottom: 0;
+    left: 0;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    padding: 1.5rem;
+    background: $color-grey-3;
+
+    .form-login {
+        max-width: 32rem;
+        width: 100%;
+        padding: 1.5rem;
+        background: $color-white;
+        border-radius: 4px;
+        box-shadow: 0 1rem 2rem rgba($color-black, 0.1);
+
+        h3 {
+            font-size: 2.4rem;
+            color: $color-error;
+            text-align: center;
+            font-weight: $bold;
+            margin-bottom: 2rem;
+        }
+
+        .form {
+            label {
+                display: block;
+                width: 100%;
+                margin-bottom: 2rem;
+
+                span {
+                    font-size: 1.4rem;
+                }
+
+                input {
+                    width: 100%;
+                }
+            }
+        }
     }
 }

src/conteiners/profile/Profile.js

@@ -1,17 +1,26 @@
 import React from 'react';
 import { connect } from "react-redux";
 
+import { getUserInfo } from "../../actions/getUserInfo";
+
 import './profile.scss';
 
 import manAvatar from '../../assets/img/man.svg';
 import womanAvatar from '../../assets/img/woman.svg';
 
 import Sidebar from '../../components/sidebar/Sidebar';
+//import SettingsForm from '../../components/settings-form/settingsForm';
 
 export class Profile extends React.Component {
+    componentDidMount() {
+        this.props.getUserInfo(JSON.parse(localStorage.user).user._id)
+    }
+
     render() {
-    console.log('profileUser',JSON.parse(localStorage.user).user);
-    const user = JSON.parse(localStorage.user).user;
+        //console.log('profileUser',JSON.parse(localStorage.user).user._id);
+        //const user = JSON.parse(localStorage.user).user;
+        const { user } = this.props;
+        console.log('user',user);
     
         return (
             <>
@@ -52,28 +61,46 @@ export class Profile extends React.Component {
                     <div className="profile-tabs-wrap">
                         <div className="tabs-main">
                             <input id="tab1" type="radio" name="tabs" checked readOnly hidden/>
-                            <label htmlFor="tab1">History</label>
+                            <label htmlFor="tab1" className="tab-label">History</label>
 
-                            <input id="tab2" type="radio" name="tabs" readOnly hidden/>
-                            <label htmlFor="tab2">Settings</label>
+                            {/*<input id="tab2" type="radio" name="tabs" readOnly hidden/>
+                            <label htmlFor="tab2" className="tab-label">Settings</label>*/}
 
                             <div className="tab-item" id="content1">
-                                <p>
-                                    Jerky jowl pork chop tongue, kielbasa shank venison. Capicola shank pig ribeye leberkas filet mignon brisket beef kevin tenderloin porchetta. Capicola fatback venison shank kielbasa, drumstick ribeye landjaeger beef kevin tail meatball pastrami prosciutto pancetta. Tail kevin spare ribs ground round ham ham hock brisket shoulder. Corned beef tri-tip leberkas flank sausage ham hock filet mignon beef ribs pancetta turkey.
-                                </p>
-                                <p>
-                                    Bacon ipsum dolor sit amet landjaeger sausage brisket, jerky drumstick fatback boudin.
-                                </p>
+                               <div className="history">
+                                   {/* название ивента, дистанция, время, место */}
+                                   <table>
+                                       <thead>
+                                           <tr>
+                                               <th>Event</th>
+                                               <th>Distance</th>
+                                               <th>Time</th>
+                                               <th>Rating</th>
+                                           </tr>
+                                       </thead>
+                                       <tbody>
+                                           <tr>
+                                               <td>ULTRA MARATHON OF THE ATLANTIC 2019</td>
+                                               <td>marathone</td>
+                                               <td>3h40</td>
+                                               <td>39</td>
+                                           </tr>
+                                           <tr>
+                                               <td>CORFU HALF MARATHON</td>
+                                               <td>Half marathone</td>
+                                               <td>2h30</td>
+                                               <td>30</td>
+                                           </tr>
+                                       </tbody>
+                                   </table>
+                               </div>
                             </div>
 
-                            <div className="tab-item" id="content2">
-                                <p>
-                                    Bacon ipsum dolor sit amet landjaeger sausage brisket, jerky drumstick fatback boudin.
-                                </p>
-                                <p>
-                                    Jerky jowl pork chop tongue, kielbasa shank venison. Capicola shank pig ribeye leberkas filet mignon brisket beef kevin tenderloin porchetta. Capicola fatback venison shank kielbasa, drumstick ribeye landjaeger beef kevin tail meatball pastrami prosciutto pancetta. Tail kevin spare ribs ground round ham ham hock brisket shoulder. Corned beef tri-tip leberkas flank sausage ham hock filet mignon beef ribs pancetta turkey.
-                                </p>
-                            </div>
+                            {/*<div className="tab-item" id="content2">
+                                <div className="settings">
+                                    <SettingsForm initialValues={JSON.parse(localStorage.user).user}/>
+                                </div>
+                            </div>*/}
                         </div>
                     </div>
                 </div>
@@ -84,10 +111,11 @@ export class Profile extends React.Component {
 
 const mapStateToProps = state => {
     return {
-        user: state.login.user
+        user: state.userInfo.userProfile
     };
 };
 
 export default connect(
-    mapStateToProps
+    mapStateToProps,
+    { getUserInfo }
 )(Profile);

src/conteiners/profile/profile.scss

@@ -17,7 +17,6 @@
         display: flex;
         flex-wrap: wrap;
         padding: 5rem 0 10rem;
-        //border-bottom: 1px solid $color-mint;
 
         .avatar {
             width: 280px;
@@ -48,6 +47,7 @@
 
                 .cap {
                     width: 7rem;
+                    color: $color-blue;
                 }
 
                 .info {
@@ -73,7 +73,7 @@
                 text-align: left;
             }
     
-            label {
+            .tab-label {
                 display: inline-block;
                 margin: 0 0 -1px;
                 padding: 1.5rem 5rem;
@@ -90,7 +90,7 @@
                 }
             }
     
-            input:checked + label {
+            input:checked + .tab-label {
                 color: $color-blue;
                 border: 1px solid $color-mint;
                 border-top: 3px solid $color-mint;
@@ -102,6 +102,49 @@
                 display: block;
             }
         }
+
+        .history {
+            overflow-x: auto;
+            
+
+            table {
+                min-width: 380px;
+                width: 100%;
+                border-collapse: collapse;
+                border: 0;
+
+                thead {
+                    tr {
+                        border-bottom: 1px solid $color-mint;
+                    }
+                }
+
+                tbody {
+                    tr {
+                        &:not(:last-child) {
+                            border-bottom: 1px solid $color-mint;
+                        }
+                    }
+                }
+
+                th {
+                    font-size: 1.2rem;
+                    color: $color-blue;
+                    font-weight: $bold;
+                }
+
+                td {
+                    font-size: 1.4rem;
+                }
+
+                th, td {
+                    padding: 10px;
+                    border-collapse: collapse;
+                    border: 0;
+                    //border-bottom: 1px solid $color-mint;
+                }
+            }
+        }
     }
 
     @media screen and (max-width: $medium) {
@@ -149,7 +192,7 @@
         }
         &-tabs-wrap {
             .tabs-main {
-                label {
+                .tab-label {
                     padding: 1.5rem;
                     width: 50%;
                 }

src/conteiners/registrationPage/RegistrationPage.js

@@ -10,10 +10,17 @@ import RegistrationForm from '../../components/registration-form/RegistrationFor
 
 export class Login extends React.Component {
     render() {
+        const { message } = this.props;
+
         return (
-            <div>
-                <RegistrationForm postCheckInSubmit={this.props.postCheckInSubmit}/>
-                <p className="form-quest">You have an account? <Link to="/login">Login now</Link></p>
+            <div className="reg-page">
+                <div className="form-reg">
+                    {
+                        message === "User already exist" && <h3>{message}!</h3>
+                    }
+                    <RegistrationForm postCheckInSubmit={this.props.postCheckInSubmit}/>
+                    <p className="form-quest">You have an account? <Link to="/login">Login now</Link></p>
+                </div>
             </div>
         )
     }
@@ -21,7 +28,7 @@ export class Login extends React.Component {
 
 const mapStateToProps = state => {
     return {
-        user: state.registration.user
+        message: state.registration.message
     };
 };
 

src/conteiners/registrationPage/registration-page.scss

@@ -1,7 +1,51 @@
 @import "../../styles/variables";
 
-.form-quest {
-    a {
-        color: $color-mint;
+.reg-page {
+    position: absolute;
+    top: 0;
+    right: 0;
+    left: 0;
+    height: 100%;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+    padding: 6rem 1.5rem;
+    background: $color-grey-3;
+
+    .form-reg {
+        max-width: 32rem;
+        width: 100%;
+        padding: 1.5rem;
+        background: $color-white;
+        border-radius: 4px;
+        box-shadow: 0 1rem 2rem rgba($color-black, 0.1);
+
+        h3 {
+            font-size: 2.4rem;
+            color: $color-error;
+            text-align: center;
+            font-weight: $bold;
+            margin-bottom: 2rem;
+        }
+
+        .form {
+            label {
+                display: block;
+                width: 100%;
+                margin-bottom: 2rem;
+
+                span {
+                    font-size: 1.4rem;
+                }
+
+                input {
+                    width: 100%;
+                }
+            }
+        }
+    }
+
+    @media (max-height: $height-499) {
+        height: auto;
     }
 }

src/conteiners/reviews/Reviews.js

@@ -72,6 +72,7 @@ export class Reviews extends React.Component {
                         }
                     </div>
                     <div className="reviews-wrap-add">
+                        <h3>Send your reviews</h3>
                         <ReviewForm postReviewSubmit={postReviewSubmit}/>
                     </div>
                 </div>

src/conteiners/reviews/reviews.scss

@@ -10,6 +10,25 @@
 
         &-add {
             padding-bottom: 5rem;
+            padding-top: 3rem;
+
+            h3 {
+                font-size: 2.1rem;
+                margin-bottom: 1.5rem;
+                text-align: center;
+                color: $color-mint;
+            }
+
+            .form {
+                max-width: 500px;
+                width: 100%;
+                margin: 0 auto;
+            }
+
+            .input-box {
+                width: 100%;
+                margin-bottom: 2rem;
+            }
         }
     }
 

src/reducers/combineReducers.js

@@ -11,6 +11,7 @@ import photogalaryReducer from "./photogalaryReducer"
 import logout from "./logout";
 import allReviews from "./reviews";
 import adminResultsReduser from "./adminResultsReduser"
+import userInfo from "./getUserInfo"
 
 export default combineReducers({
 	form: formReducer,
@@ -23,5 +24,6 @@ export default combineReducers({
     photogalaryReducer,
     allReviews,
     logout,
-    adminResultsReduser
+    adminResultsReduser,
+    userInfo
 });

src/reducers/getUserInfo.js

@@ -0,0 +1,30 @@
+import * as types from "../actionTypes/actionTypes";
+
+const initialState = {
+    userProfile: []
+}
+
+export default (state = initialState, action) => {
+    switch (action.type) {
+        case types.GET_USERS_INFO: {
+            return state;
+        }
+
+        case types.GET_USERS_INFO_SUCCESS: {
+            //console.log('userprofile',action.payload.user);
+            
+            return {
+                ...state,
+                userProfile: action.payload.user
+            };
+        }
+
+        case types.GET_USERS_INFO_ERROR: {
+            console.log('error userProfile');
+            return state;
+        }
+
+        default:
+            return state;
+    }
+}

src/reducers/login.js

@@ -1,7 +1,8 @@
 import * as types from "../actionTypes/actionTypes";
 
 const initialState = {
-    user: {}
+    user: {},
+    message: ''
 }
 
 export default (state = initialState, action) => {
@@ -11,10 +12,11 @@ export default (state = initialState, action) => {
         }
 
         case types.POST_REQUEST_SUCCESS_LOGIN: {   
-            //console.log('action.payload.user',action.payload.user);
+            console.log('action.payload.user',action.payload.message);
             return {
                 ...state,
-                user: action.payload.user
+                user: action.payload.user,
+                message: action.payload.message
             };
         }
 

src/reducers/registration.js

@@ -1,7 +1,7 @@
 import * as types from "../actionTypes/actionTypes";
 
 const initialState = {
-    user: {}
+    message: ''
 }
 
 export default (state = initialState, action) => {
@@ -11,8 +11,11 @@ export default (state = initialState, action) => {
         }
 
         case types.POST_REQUEST_SUCCESS_CHECKIN: {
-            console.log('some', action.payload );
-            return state;
+            console.log('some', action.payload.message );
+            return {
+                ...state,
+                message: action.payload.message
+            };
         }
 
         case types.POST_REQUEST_ERROR_CHECKIN: {

src/styles/custom.scss

@@ -1,3 +1,11 @@
+/*html {
+    min-height: 100vh;
+    height: 100%;
+}
+body, #root {
+    height: 100vh;
+}*/
+
 .button-position-bottom {
 	max-width: 1000px;
 	position: fixed;
@@ -9,7 +17,12 @@
 }
 
 .container {
+    display: flex;
+    flex-direction: column;
+    height: 100%;
+
     &-wrap {
+        flex-grow: 1;
         width: 100%;
         padding-right: 2rem;
         padding-left: 2rem;
@@ -91,4 +104,67 @@ i {
     text-align: center;
     width: 100%;
     color: $color-blue;
+}
+
+//for the login and registration pages
+.form-quest {
+    font-size: 1.4rem;
+    margin-top:2rem;
+
+    a {
+        color: $color-mint;
+        transition: 0.5s;
+
+        &:hover {
+            color: $color-blue;
+        }
+    }
+}
+
+//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 {
+            &: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;
+                }
+            }
+        }
+    }
 }

src/styles/variables.scss

@@ -2,6 +2,7 @@
 $color-blue: #1f7394;
 $color-white: #ffffff;
 $color-black: #000000;
+$color-error: #c60000;
 $color-grey-light: #eeeeee;
 $color-mint: #5acec2;
 $color-grey-2: #f5f5f5;
@@ -30,6 +31,8 @@ $min-medium-sm: 992px;
 $min-small: 768px;
 $min-xsmall: 576px;
 
+//max-height
+$height-499: 499px;
 
 //mixins
 @mixin bg-settings {