src/actions/adminActions/createTest/index.js

@@ -0,0 +1,16 @@
+import * as types from '../../../constants';
+
+export const createTestRequest = payload => ({
+    type: types.CREATE_TEST_REQUEST,
+    payload
+})
+
+export const createTestRequestSucces = payload => ({
+    type: types.CREATE_TEST_REQUEST_SUCCESS,
+    payload
+})
+
+export const createTestRequestFailure = error => ({
+    type: types.CREATE_TEST_REQUEST_FAILURE,
+    error
+})

src/components/common/input-form.js

@@ -1,34 +0,0 @@
-import React, { Component } from "react";
-import { connect } from "react-redux";
-import { reduxForm, Field, FieldArray } from "redux-form";
-
-const renderField = ({ input, meta: { touched, error }, label, type }) => (
-	<div className="form__input-box">
-		<label className="form__input-lable" htmlFor="origin">
-			{label}
-			<input type={type} {...input} />
-		</label>
-		{touched && error && <span>{error}</span>}
-	</div>
-);
-
-class LoadForm extends Component {
-	
-	render() {
-		const { handleSubmit, title, pristine, submitting } = this.props;
-
-		return (
-			<form onSubmit={handleSubmit(this.submit)} className="form">
-				
-			</form>
-		);
-	}
-}
-
-const mapStateToProps = (state, props) => ({
-});
-
-const component = reduxForm({ })(LoadForm);
-
-export default connect(mapStateToProps)(component);
-

src/components/common/protectedRoute/config.js

@@ -2,12 +2,12 @@ import React from 'react';
 import * as routes from './../../../constants/routes';
 import { lazy } from 'react';
 
+const CreateTest = lazy(()=> import('../../user-components/admin-components/createTestForm'))
 const DeleteUsers = lazy(()=>import('../../user-components/admin-components/createDeleteUser/index'))
 const LandingPage =    lazy(() => import('./../../public-components/landingPage'));
 const HomePage =       lazy(() => import('./../../user-components/homePage'));
 const SignInPage =     lazy(() => import('./../../../containers/auth/SignInPage'));
 const SignUpPage =     lazy(() => import('./../../../containers/auth/SignUpPage'));
-const CreateTestForm = lazy(() => import('./../../user-components/admin-components/createTestForm'));
 const ProfilePage =    lazy(() => import('./../../user-components/profilePage'));
 const CategoriesPage = lazy(() => import('./../../user-components/categoriesPage'));
 const CardsPage =      lazy(() => import('./../../user-components/CardsPage'));
@@ -54,6 +54,11 @@ export default [
         access: 'admin-only',
         component: DeleteUsers
     },
+    {
+        path: routes.CREATE_TEST ,
+        access: 'admin-only',
+        component: CreateTest
+    },
     {
         access: 'public',
         component: NotFound

src/components/common/protectedRoute/index.js

@@ -1,34 +1,51 @@
 import React from 'react';
 import { Route, Redirect } from 'react-router-dom';
 
+import token from '../../../utils/token'
+
 import * as routes from './../../../constants/routes';
 import PermissionDenied from './../../public-components/permissionDenied';
 
-export default ({ component: Component, user: {data}, access, ...rest  }) => (
+export default ({ component: Component, user: { data }, tokenAuth, access, ...rest }) => (
     <Route
         {...rest}
         render={props => {
+            let checkedData;
+
+            if (data) {
+                checkedData = data;
+            }
+            else {
+                const storagedUser = JSON.parse(localStorage.getItem(token));
+                if (storagedUser) {
+                    checkedData = storagedUser;
+                    tokenAuth(storagedUser);
+                } 
+                else {
+                    checkedData = null;
+                }
+            }
 
             if (access === 'public') {
                 return <Component {...props} />
             }
-            
-            if ( (access === 'user-only' || access === 'admin-only') && !data ) {
-                return <Redirect to={routes.SIGN_IN}/>
+
+            if ((access === 'user-only' || access === 'admin-only') && !checkedData) {
+                return <Redirect to={routes.SIGN_IN} />
             }
-            
-            if (access === 'user-only' && data) {
+
+            if (access === 'user-only' && checkedData) {
                 return <Component {...props} />
-            }        
+            }
 
             if (access === 'admin-only') {
-                if (data.is_admin) {
+                if (checkedData.is_admin) {
                     return <Component {...props} />
-                } 
+                }
 
                 return <PermissionDenied />
             }
-            
+
         }}
     />
 )

src/components/common/protectedRoute/validate/index.js

@@ -1,6 +0,0 @@
-export default function validate(values) {
-    const {} = values;
-    const errors = {}
-
-    return errors;
-}

src/components/public-components/auth/signUpForm/index.js

@@ -30,6 +30,9 @@ class Form extends React.Component {
                 </div>
 
                 <button className="sign-form__link--with-margin link--btn link--btn6s0" disabled={invalid}>Create Account</button>
+
+                <hr className="sign-form__divider" />
+
                 <p className="sign-form__agreement">By clicking this button you actually would donate us your flat !</p>
             </form>
         )

src/components/public-components/header/index.js

@@ -2,13 +2,16 @@ import React, { Component } from 'react';
 import { Link } from "react-router-dom";
 
 import * as routes from './../../../constants/routes';
-import { UserContext } from './../../../containers/header';
 import token from './../../../utils/token';
 
 export default class header extends Component {
 
     state = {
-        togglerClosed: true,
+        togglerClosed: true
+    }
+
+    handleClick = () => {
+        this.setState({ togglerClosed: true })
     }
 
     handleToggle = event => {
@@ -28,54 +31,53 @@ export default class header extends Component {
 
         return (
             <header className="header">
-                <Link to={routes.LANDING}>
+                <Link onClick={this.handleClick} to={routes.LANDING}>
                     <h1 className="header__logo">Test.<span className="header__logo--i-letter">i</span>o</h1>
                 </Link>
                 <hr className="header__logo--divider" />
-                {/* <span className="header__toggle-trigger" onClick={this.handleToggle} >
+                <span className="header__toggle-trigger" onClick={this.handleToggle} >
                     <span />
-                </span> */}
-                <button style={{ position: "absolute", top: '85px', left: 0 }} onClick={this.handleToggle}>HEADER TOGGLE</button>
+                </span>
                 <div className="header__flex-wrapper">
                     <nav className={`header__nav ${toggleStatus}`}>
                         <ul className="header__nav nav__list"  >
                             <li>
-                                <Link className="header__nav nav__list-item" to={routes.HOME}>
+                                <Link onClick={this.handleClick} className="header__nav nav__list-item" to={routes.HOME}>
                                     Home
-                </Link>
+                                </Link>
                             </li>
                             <li>
-                                <Link className="header__nav nav__list-item" to={routes.PROFILE}>
+                                <Link onClick={this.handleClick} className="header__nav nav__list-item" to={routes.PROFILE}>
                                     Profile
-                </Link>
+                                </Link>
                             </li>
                             <li>
-                                <Link className="header__nav nav__list-item" to={routes.TESTS}>
+                                <Link onClick={this.handleClick} className="header__nav nav__list-item" to={routes.TESTS}>
                                     Test
-                </Link>
+                                </Link>
                             </li>
                             <li>
-                                <Link className="header__nav nav__list-item" to={routes.CATEGORIES}>
+                                <Link onClick={this.handleClick} className="header__nav nav__list-item" to={routes.CATEGORIES}>
                                     Categories
-                </Link>
+                                </Link>
                             </li>
                             {
                                 data && data.is_admin && (
                                     <React.Fragment>
                                         <li>
-                                            <Link className="header__nav nav__list-item--admin-only" to={routes.CREATE_TEST}>
+                                            <Link onClick={this.handleClick} className="header__nav nav__list-item--admin-only" to={routes.CREATE_TEST}>
                                                 Create test
-                            </Link>
+                                            </Link>
                                         </li>
                                         <li>
-                                            <Link className="header__nav nav__list-item--admin-only" to={routes.CREATE_CATEGORY}>
+                                            <Link onClick={this.handleClick} className="header__nav nav__list-item--admin-only" to={routes.CREATE_CATEGORY}>
                                                 Create category
-                            </Link>
+                                            </Link>
                                         </li>
                                         <li>
-                                            <Link className="header__nav nav__list-item--admin-only" to={routes.DELETE_USER}>
+                                            <Link onClick={this.handleClick} className="header__nav nav__list-item--admin-only" to={routes.DELETE_USER}>
                                                 Delete data
-                            </Link>
+                                            </Link>
                                         </li>
                                     </React.Fragment>
                                 )
@@ -88,8 +90,8 @@ export default class header extends Component {
                             !data
                                 ? (
                                     <React.Fragment>
-                                        <Link className="header__links--sign-in link--btn link--btn25" to={routes.SIGN_IN}>Sign in</Link>
-                                        <Link className="header__links--sign-up link--btn link--btn25" to={routes.SIGN_UP}>Sign up</Link>
+                                        <Link onClick={this.handleClick} className="header__links--sign-in link--btn link--btn25" to={routes.SIGN_IN}>Sign in</Link>
+                                        <Link onClick={this.handleClick} className="header__links--sign-up link--btn link--btn25" to={routes.SIGN_UP}>Sign up</Link>
                                     </React.Fragment>
                                 )
                                 : (

src/components/user-components/admin-components/createTestForm/createTestForms/index.js

@@ -0,0 +1,48 @@
+import React from 'react';
+import { reduxForm, Field } from 'redux-form';
+import validate from '../validate';
+import formInput from './../../../../common/formInput'
+
+class CreateTestForm extends React.Component {
+    sendRequest(values) {
+        console.log('sendRequest createTestForm page values:', values);
+    }
+
+    render() {
+        const { handleSubmit } = this.props;
+
+        return (
+            <form className="page" onSubmit={handleSubmit(this.sendRequest)}>
+                <h2>Make a title-page for your test!</h2>
+
+                <div className="title-page__block">
+                    <p className="titles">Title</p>
+                    <Field
+                        className="title-page__block"
+                        name="title"
+                        type="input"
+                        placeholder=""
+                        component={formInput}
+                    />
+                </div>
+
+                <div className="title-page__block">
+                    <p className="titles">Description</p>
+                    <Field name="description" type="input" placeholder="" className="" component={formInput} />
+                </div>
+
+                <div className="title-page__block">
+                    <p className="titles">Cover image</p>
+                    <Field name="cover" type="file" placeholder="" className="" component="textarea" />
+                </div>
+
+                <button className="">Create card</button>
+            </form>
+        )
+    }   
+}
+
+export default reduxForm({
+    form: "createTest",
+    validate
+})(CreateTestForm)

src/components/user-components/admin-components/createTestForm/index.js

@@ -1,9 +1,11 @@
 import React from 'react';
 import { reduxForm, Field } from 'redux-form';
 import validate from './validate';
-import formInput from './../../../common/formInput'
+import formInput from './../../../common/formInput';
+import CreateTestForm from './createTestForms'
 
-class Form extends React.Component {
+
+class CreateTest extends React.Component {
     sendRequest(values) {
         console.log('sendRequest createTestForm page values:', values);
     }
@@ -12,32 +14,9 @@ class Form extends React.Component {
         const { handleSubmit } = this.props;
 
         return (
-            <form className="page" onSubmit={handleSubmit(this.sendRequest)}>
-                <h2>Make a title-page for your test!</h2>
-
-                <div className="title-page__block">
-                    <p className="titles">Title</p>
-                    <Field
-                        className="title-page__block"
-                        name="title"
-                        type="input"
-                        placeholder=""
-                        component={formInput}
-                    />
-                </div>
-
-                <div className="title-page__block">
-                    <p className="titles">Description</p>
-                    <Field name="description" type="input" placeholder="" className="" component={formInput} />
-                </div>
-
-                <div className="title-page__block">
-                    <p className="titles">Cover image</p>
-                    <Field name="cover" type="file" placeholder="" className="" component="textarea" />
-                </div>
-
-                <button className="">Create card</button>
-            </form>
+            <div className = "page">
+                <CreateTestForm></CreateTestForm>
+            </div>
         )
     }   
 }
@@ -45,4 +24,4 @@ class Form extends React.Component {
 export default reduxForm({
     form: "createTest",
     validate
-})(Form)
+})(CreateTest)

src/components/user-components/profilePage/index.js

@@ -11,8 +11,19 @@ import ChangeLogin from './LoginFild';
 import ChangePassword from './PasswordFields'
 
 // redux-connected container
+const user = {
+    "data": {
+        "_id": "5c48461c40ca670017ba5974",
+        "name": "Debil",
+        "email": "superus@lol.com",
+        "password": "$2a$10$qoxrQ2Sp3BDTLa9Xdc0ZPuLVHamipMQRWxeWxw1RwthICnbPoFLvC",
+        "profilePhoto": "",
+        "role": 0
+    },
+    "token": "eyJhbGciOiJIUzI1NiIsInR5cCI6IkpXVCJ9.eyJpZCI6IjVjNDg0NjFjNDBjYTY3MDAxN2JhNTk3NCIsInJvbGUiOjAsImlhdCI6MTU0ODI1NTczMiwiZXhwIjoxNTQ4MzQyMTMyfQ.RAIiCLjBJ2u1VEQWy1oUgPjHj0dZRG27l0J3c8FDss0"
+}
 
-class profilePage extends React.Component {
+class ProfilePage extends React.Component {
 
     state = {
         files: null,
@@ -49,21 +60,26 @@ class profilePage extends React.Component {
 
 
     render() {
-        const { user:{data},users, userChangeRequest,passwordChangeRequest } = this.props;
-
-        // console.log('User', users);
+        const { users, userChangeRequest,passwordChangeRequest } = this.props;
+        const {data} = user
+        console.log('User', data);
         // console.log('Props', this.props);
         // console.log('State', this.state);
 
         return (
             <div className="page page--bottom-only profile-page">
                 <section className="container section section--about">
+                    <img src =" https://cdn.iconscout.com/icon/free/png-256/avatar-373-456325.png" ></img>
                     {/* <h2 className="section__element section__element--header">{data.login}</h2> */}
-
+                    <section className="container section section--about">
+                    <div className="sedtion__element section__element--login">
+                        <h3>Name</h3>
+                        <p>{data.name}</p>
+                    </div>
                     <div className="sedtion__element section__element--login">
                         <h3>Email</h3>
                         {/* <p>{user.login}<button className="link link--btn right" >Change login</button></p> */}
-                        <ChangeLogin className="link link--btn right" data={data} actions={{ userChangeRequest }}>{data.login}</ChangeLogin>
+                        <ChangeLogin className="link link--btn right" data={data} actions={{ userChangeRequest }}>{data.email}</ChangeLogin>
                     </div>
                     <div className="section__element section__element--">
                         <h3>Password</h3>
@@ -73,6 +89,7 @@ class profilePage extends React.Component {
                         <h3>Status</h3>
                         <p>{data.description}</p>
                     </div>
+                    </section>
                 </section>
                 <section className="container section section--stats">
                     <div className="section__element section__element--">
@@ -108,5 +125,5 @@ const
 
 const mapDispatchToProps = dispatch => bindActionCreators({ userChangeRequest, passwordChangeRequest }, dispatch);
 
-export default connect(mapStateToProps, mapDispatchToProps)(profilePage);
+export default connect(mapStateToProps, mapDispatchToProps)(ProfilePage);
 

src/constants/index.js

@@ -41,4 +41,8 @@ export const USER_GET_REQUEST_FAILURE = 'USER_GET_REQUEST_FAILURE';
 
 export const DELETE_USER_REQUEST = 'DELETE_USER_REQUEST';
 export const DELETE_USER_REQUEST_SUCCESS = 'DELETE_USER_REQUEST_SUCCESS';
-export const DELETE_USER_REQUEST_FAILURE = 'DELETE_USER_REQUEST_FAILURE';
+export const DELETE_USER_REQUEST_FAILURE = 'DELETE_USER_REQUEST_FAILURE';
+
+export const CREATE_TEST_REQUEST = 'CREATE_TEST_REQUEST';
+export const CREATE_TEST_REQUEST_SUCCESS = 'CREATE_TEST_REQUEST_SUCCESS';
+export const CREATE_TEST_REQUEST_FAILURE = 'CREATE_TEST_REQUEST_FAILURE';

src/router.js

@@ -16,35 +16,25 @@ import fakeToken from './utils/token'
 import { bindActionCreators } from "redux";
 
 class Router extends React.Component {
-
-    componentDidMount() {
-        const storagedUser = localStorage.getItem(fakeToken);
-        const { tokenAuth } = this.props;
-
-
-        storagedUser && tokenAuth(JSON.parse(storagedUser));
-    }
-
     render() {
-        const { user } = this.props;
-        
-        //map located here because of switch-bag
-        const Router = config.map(route =>
-            <ProtectedRoute
-                path={route.path}
-                component={route.component}
-                access={route.access}
-                user={user}
-                exact
-            />
-        )
+        const { user, tokenAuth } = this.props;
 
         return (
             <div className="app">
                 <Header />
                 <Suspense fallback={<Spinner />}>
                     <Switch>
-                        {Router}
+                        {config.map(route =>
+                            <ProtectedRoute
+                                path={route.path}
+                                component={route.component}
+                                access={route.access}
+                                user={user}
+                                key={route}
+                                tokenAuth={tokenAuth}
+                                exact
+                            />
+                        )}
                     </Switch>
                 </Suspense>
                 <Footer />

src/saga/auth/signIn/index.js

@@ -7,18 +7,18 @@ import token from '../../../utils/token'
 // worker-saga for signing in
 
 export default function* ({ payload: { login, password } }) {
-  try {
-    const payload = yield call(() =>
-      axios.get(`${SIGN_IN_URL}login=${login}&password=${password}`)
-        .then(({ data: [payload] }) => payload)
-    );
+    try {
+        const payload = yield call(() =>
+            axios.get(`${SIGN_IN_URL}login=${login}&password=${password}`)
+                .then(({ data: [payload] }) => payload)
+        );
 
-    yield call(() => { if (!payload) throw (new Error("No such email or password")) });
-    yield put(actions.signInRequestSucces(payload));
-    yield call(() => localStorage.setItem(token, JSON.stringify(payload)));
-  }
-  catch ({ message }) {
-    yield put(actions.signInRequestFailure(message));
-    yield call(() => localStorage.removeItem(token));
-  }
+        yield call(() => { if (!payload) throw (new Error("No such email or password")) });
+        yield put(actions.signInRequestSucces(payload));
+        yield call(() => localStorage.setItem(token, JSON.stringify(payload)));
+    }
+    catch ({ message }) {
+        yield put(actions.signInRequestFailure(message));
+        yield call(() => localStorage.removeItem(token));
+    }
 }

src/styles/components/_button.scss

@@ -1,5 +1,6 @@
 .link {
     &--btn {
+        display: inline-block !important;
         text-transform: uppercase;
         font-family: 'Poiret One', cursive;
         font-weight: bold;

src/styles/components/_header.scss

@@ -76,7 +76,7 @@
         }
         &__toggle-trigger {
             position: absolute;
-            top: 70%;
+            top: 65%;
             cursor: pointer;
             left: 0;
             margin-left: 1em;
@@ -145,12 +145,12 @@
         .header__links {
             display: flex;
             justify-content: center;
-
             &--sign-in {
                 margin-right: 1.5vw;
             }
             &--sign-up {
                 margin-left: 1.5vw;
+                margin-right: 0;
             }
         }
     }

src/styles/components/_landingPage.scss

@@ -32,22 +32,27 @@
         justify-content: space-between;
         width: 25%;
         padding: 9vh;
+        @media screen and (max-width: 1125px) {
+            padding: 4vh 7vh;
+        }
     }
     // not correct spelling -> have to ask && change
     &__links {
         border: none;
         box-shadow: 0 0 10px grey;
         background: rgba(232,230, 230, 0.9);
-        padding: 3vh 0;
-        margin: 5px;
         text-transform: uppercase;
+        margin: 5px;
+        padding: 3vh 0;
         font-family: 'Cormorant Infant', serif;
         font-weight: bold;
         font-size: 16px;
         text-align: center;
         width: 20vh;
-            @media screen and (max-width: 1125px) {
+        @media screen and (max-width: 1125px) {
                 width: 100%;
+                margin: 10px 0;
+                padding: 2.5vh 0;
             }
         transition: all 0.6s ease-in-out;
     }

src/styles/components/_signPage.scss

@@ -22,7 +22,7 @@
             margin: 0 0 35px 0;
         }
         &__password-container {
-            margin: 50px 0;
+            margin: 50px 0 20px 0;
         }
         &__input {
             display: block;