init

src/actions/auth/tokenAuth/index.js

@@ -0,0 +1,6 @@
+import { TOKEN_AUTH } from './../../../constants';
+
+export const tokenAuth = (payload) => ({
+    type: TOKEN_AUTH,
+    payload
+})

src/components/auth/signInForm/index.js

@@ -9,7 +9,6 @@ import * as routes from './../../../constants/routes'
 
 class Form extends React.Component {
     sendRequest = values => {
-        // console.log("Redux-form values, onSubmithandler before signInRequest:", values);
         const { actions: { signInRequest } } = this.props;
         signInRequest(values);
     }

src/components/auth/signUpForm/index.js

@@ -13,7 +13,6 @@ class Form extends React.Component {
 
     render() {
         const { invalid, handleSubmit } = this.props;
-        console.log(this.props);
 
         return (
             <form className="sign-form" onSubmit={handleSubmit(this.sendRequest)}>

src/components/auth/signUpForm/validate/index.js

@@ -11,7 +11,12 @@ export default function validate(values) {
     else if (login.length < 8 || login.length > 20) {
         errors.login = "Invalid login length: login should be from 8 to 20 symbols";
     }
+<<<<<<< HEAD:src/components/auth/signUpForm/validate/index.js
     else if (!/^[a-z0-9_-]{8,20}$/i.test(login)) {
+=======
+    else if (
+        !/^(([^<>()\]\\.,;:\s@"]+(\.[^<>()\]\\.,;:\s@"]+)*)|(".+"))@(([0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\.[0-9]{1,3}\])|(([a-zA-Z\-0-9]+\.)+[a-zA-Z]{2,}))$/.test(login)) {
+>>>>>>> 86c9135... merged Sveta -> signIn/Up changes, getting user prototype:src/components/public-components/auth/signUpForm/validate/index.js
         errors.login = "Invalid login, try another one";
     }
     

src/components/common/formInput/index.js

@@ -3,6 +3,6 @@ import React, { Fragment } from 'react';
 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>)}
+        {touched && (error && <p style={{"color": "red", "textTransform": "uppercase"}}>⚠ {error}</p>)}
     </Fragment>
 )

src/components/common/protectedRoute/config.js

@@ -0,0 +1,48 @@
+import * as routes from './../../../constants/routes';
+import { lazy } from 'react';
+
+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'));
+
+export default [
+    {
+        path: routes.LANDING,
+        access: 'public',
+        component: landingPage
+    },
+    {
+        path: routes.SIGN_IN,
+        access: 'public',
+        component: signInPage
+    },
+    {
+        path: routes.SIGN_UP,
+        access: 'public',
+        component: signUpPage
+    },
+    {
+        path: routes.HOME,
+        access: 'user-only',
+        component: homePage
+    },
+    {
+        path: routes.CATEGORIES,
+        access: 'user-only',
+        component: categoriesPage
+    },
+    {
+        path: routes.PROFILE,
+        access: 'user-only',
+        component: profilePage
+    },
+    {
+        path: routes.CREATE_TEST,
+        access: 'admin-only',
+        component: createTestForm
+    }
+]

src/components/common/protectedRoute/index.js

@@ -0,0 +1,34 @@
+import React from 'react';
+import { Route, Redirect } from 'react-router-dom';
+import config from './config';
+import * as routes from './../../../constants/routes';
+import PermissionDenied from './../../public-components/permissionDenied';
+
+export default ({ component: Component, user, access, ...rest  }) => (
+    <Route
+        {...rest}
+        render={props => {
+
+            if (access === 'public') {
+                return <Component {...props} />
+            }
+            
+            if ( (access === 'user-only' || access === 'admin-only') && !user.data ) {
+                return <Redirect to={routes.SIGN_IN}/>
+            }
+            
+            if (access === 'user-only' && user.data) {
+                return <Component {...props} />
+            }        
+
+            if (access === 'admin-only') {
+                if (user.isAdmin) {
+                    return <Component {...props} />
+                } 
+
+                return <PermissionDenied />
+            }
+            
+        }}
+    />
+)

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

@@ -0,0 +1,49 @@
+import React from 'react';
+import axios from 'axios';
+
+class categoriesPage extends React.Component {
+
+    state = {
+        categories: []
+    }
+
+    getCategories = () => {
+        axios.get('http://127.0.0.1:2000/api/categories')
+            .then(({ data }) => this.setState({
+                categories: data
+            }))
+            .catch(({ message }) => console.warn(message))
+    }
+
+    componentDidMount() {
+        this.getCategories()
+    }
+
+    render() {
+        const { categories } = this.state;
+        console.log("Categories - ", categories);
+
+        return ( 
+            <div className="page page--bottom-only categories-page">
+                <div className="container categories-grid">
+                    {categories.map(el => (
+                        <div
+                            className="categories-grid__element"
+                            style={{ background: `url("${el.cover}") no-repeat center center` }}
+                        >
+                            <a href={el.title}>
+                                <div className="container categories-grid__content-wrapper">
+                                    <h2>{el.title}</h2>
+                                    <hr className="divider" />
+                                    <p>{el.description}</p>
+                                </div>
+                            </a>
+                        </div>
+                    ))}
+                </div>
+            </div>
+        )
+    }
+}
+
+export default categoriesPage;

src/constants/index.js

@@ -12,3 +12,12 @@ export const USER_IS_SIGNED_IN = 'USER_IS_SIGNED_IN';
 export const USER_IS_NOT_SIGNED_IN = 'USER_IS_NOT_SIGNED_IN';
 
 export const SIGN_OUT = 'SIGN_OUT';
+<<<<<<< HEAD
+=======
+
+export const USERS_GET_REQUEST = 'USERS_GET_REQUEST';
+export const USERS_GET_REQUEST_SUCCESS = 'USERS_GET_REQUEST_SUCCESS';
+export const USERS_GET_REQUEST_SUCCESS_FAILURE = 'USERS_GET_REQUEST_FAILURE';
+
+export const TOKEN_AUTH = 'TOKEN_AUTH';
+>>>>>>> 86c9135... merged Sveta -> signIn/Up changes, getting user prototype

src/constants/routes.js

@@ -1,13 +1,14 @@
+// Be careful ! Check all dependencies in protectedRoute/config.js,
+// otherwise it may cause mistakes in router.js! 
+
 export const LANDING = '/';
 export const SIGN_UP = '/sign-up';
 export const SIGN_IN = '/sign-in';
 export const HOME = '/home';
-export const ACCOUNT = '/account';
-export const ADMIN = '/admin';
-export const PASSWORD_FORGET = '/pw-forget';
-export const CREATE_TEST = '/create-test';
 export const CREATE_CATEGORY = '/create-category';
+export const CATEGORIES = '/categories';
+export const PROFILE = '/profile';
+export const CREATE_TEST = '/create-test';
 export const DELETE_USER = '/delete-user'
 export const TESTS = '/test';
-export const CATEGORIES = '/categories';
-export const PROFILE = '/profile';
+export const PASSWORD_FORGET = '/pw-forget';

src/containers/auth/SignInPage/index.js

@@ -11,7 +11,6 @@ import SignInForm from './../../../components/auth/signInForm'
 class SignInPage extends React.Component {
 
     render() {
-        console.log("SignInPage containers props:", this.props);
         const { signInRequest, user } = this.props;
         return (
             !(user.data)

src/containers/auth/SignUpPage/index.js

@@ -11,7 +11,6 @@ import SignUpForm from './../../../components/auth/signUpForm'
 class SignUpPage extends React.Component {
 
     render() {
-        console.log("SignInPage containers props:", this.props);
         const { signUpRequest, user } = this.props;
         return (
             !(user.data)

src/reducers/user/index.js

@@ -1,18 +1,31 @@
-import initialState from './../initialState'
-import * as types from './../../constants'
+import initialState from './../initialState';
+import * as types from './../../constants';
 
 export default function (state = initialState.user, { type, error, payload: data }) {
     switch(type) {
+
+        case types.TOKEN_AUTH: {
+            return {
+                ...state,
+                data
+            }
+        }
+
+        // SIGN_UP
+
         case types.SIGN_UP_REQUEST: {
             return {
                 ...state,
-                gettingUser: true
+                gettingUser: true,
+                error: null,
+                data: null
             }
         }
         case types.SIGN_UP_REQUEST_SUCCESS: {
             return {
                 ...state,
                 gettingUser: false,
+                error: null,
                 data
             }
         }
@@ -20,19 +33,29 @@ export default function (state = initialState.user, { type, error, payload: data
             return {
                 ...state,
                 gettingUser: false,
+                data: null,
                 error
             }
         }
+<<<<<<< HEAD
+=======
+
+        // SIGN_IN
+
+>>>>>>> 86c9135... merged Sveta -> signIn/Up changes, getting user prototype
         case types.SIGN_IN_REQUEST: {
             return {
                 ...state,
-                gettingUser: true
+                gettingUser: true,
+                error: null,
+                data: null
             }
         }
         case types.SIGN_IN_REQUEST_SUCCESS: {
             return {
                 ...state,
                 gettingUser: false,
+                error: null,
                 data                
             }
         }
@@ -40,12 +63,22 @@ export default function (state = initialState.user, { type, error, payload: data
             return {
                 ...state,
                 gettingUser: false,
+                data: null,
                 error
             }
         }
+<<<<<<< HEAD
+=======
+
+        // SIGN_OUT
+
+>>>>>>> 86c9135... merged Sveta -> signIn/Up changes, getting user prototype
         case types.SIGN_OUT: {
             return initialState.user
         }
+
+        // DEFAULT
+
         default: {
             return {...state}
             

src/router.js

@@ -1,43 +1,63 @@
 import React, { Suspense, lazy } from "react";
-import { Switch, Route } from "react-router-dom";
+import { Switch, Route, withRouter } from "react-router-dom";
+import { connect } from 'react-redux';
+import { tokenAuth } from './actions/auth/tokenAuth'
 
-import * as routes from './constants/routes'
-
-import Header from "./containers/Header"
-import landingPage from './components/landingPage'
-import Footer from './components/footer'
-import PrivateRouter from './PrivateRouter'
+import Header from "./containers/header";
+import Footer from './components/public-components/footer';
 
 import Spinner from "./components/common/spinner";
 
-const notFound   = lazy(() => import("./components/notFound"));
-const homePage   = lazy(() => import("./components/homePage"));
-const signInPage = lazy(() => import("./containers/auth/SignInPage"));
-const signUpPage = lazy(() => import("./containers/auth/SignUpPage"));
-const createTestPage = lazy(() => import("./components/admin-components/createTestPage"));
-
-export default () => (
-    <div className="app">
-        <Header />
-        <Suspense fallback={<Spinner />}>
-            <Switch>
-                <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} />
-
-                {/* <PrivateRouter path={routes.HOME} user={false} component={homePage}/> */}
-                <PrivateRouter path={routes.TESTS} user={false} component={null}/>
-                <PrivateRouter path={routes.CATEGORIES} user={false} component={null}/>
-                <PrivateRouter path={routes.PROFILE} user={false} component={null} />
-
-                <PrivateRouter path={routes.CREATE_TEST} user={true} component={createTestPage} />
-                <PrivateRouter path={routes.CREATE_CATEGORY} user={false} component={createTestPage} />
-                <PrivateRouter path={routes.DELETE_USER} user={false} component={createTestPage} />
-                
-                <Route component={notFound} />
-            </Switch>
-        </Suspense>
-        <Footer />
-    </div>
-);
+import ProtectedRoute from './components/common/protectedRoute';
+import config from './components/common/protectedRoute/config';
+
+import fakeToken from './utils/token'
+import { bindActionCreators } from "redux";
+
+const notFound = lazy(() => import('./components/public-components/notFound'));
+
+class Router extends React.Component {
+
+    componentDidMount() {
+        const storagedUser = localStorage.getItem(fakeToken);
+        const { tokenAuth } = this.props;
+
+        storagedUser && tokenAuth(storagedUser);
+    }
+
+    render() {
+        const { user } = this.props;
+
+        //map located here because of switch-bag
+
+        const protectedRoutes = config.map(route =>
+            <ProtectedRoute
+                path={route.path}
+                component={route.component}
+                access={route.access}
+                user={user}
+                exact
+            />
+        );
+
+        return (
+            <div className="app">
+                <Header />
+                <Suspense fallback={<Spinner />}>
+                    <Switch>
+                        {protectedRoutes}
+                        <Route component={notFound} />
+                    </Switch>
+                </Suspense>
+                <Footer />
+            </div>
+        )
+    }
+}
+
+const mapStateToProps = state => ({
+    user: state.user
+})
+const mapDispatchToProps = dispatch => bindActionCreators({ tokenAuth }, dispatch);
+
+export default withRouter(connect(mapStateToProps, mapDispatchToProps)(Router));

src/styles/base/_base.scss

@@ -31,4 +31,11 @@ code {
     font-family: source-code-pro, Menlo, Monaco, Consolas, "Courier New",
     monospace;
 }
-  
+
+// recheck
+
+@media screen and (max-width: 1200px) {
+    * {
+        transition: none !important;
+    }
+}

src/utils/token.js

@@ -0,0 +1 @@
+export default "fake-token-lol-kek";