merged Sveta -> signIn/Up changes, getting user prototype

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/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/privateAdminRouter/index.js

@@ -1,29 +0,0 @@
-import React from 'react';
-import { Route, Redirect } from 'react-router';
-import * as routes from '../../../constants/routes';
-import { connect } from 'react-redux';
-import PermissionDenied from './../../public-components/permissionDenied'
-
-const PrivateAdminRouter = ({ component: Component, user, ...rest }) => {
-    console.log("Protected user", user);
-    alert();
-    return (
-        <Route
-            {...rest}
-            render={props => (
-                user.isAdmin
-                    ? <Component {...props} />
-                    : user.data
-                        ? <PermissionDenied />
-                        : <Redirect to={routes.SIGN_IN} />
-            )}
-        />
-    )
-}
-
-const
-    mapStateToProps = state => ({
-        user: state.user
-    })
-
-export default connect(mapStateToProps)(PrivateAdminRouter)

src/components/common/privateRouter/index.js

@@ -1,15 +0,0 @@
-import React from 'react';
-import { Route, Redirect } from 'react-router';
-import * as routes from '../../../constants/routes';
-
-export default ({ component: Component, user, ...rest }) => (
-        <Route
-            {...rest}
-            render={props => (
-                user
-                    ? <Component {...props} />
-                    : <Redirect to={routes.SIGN_IN} />
-            )}
-        />
-)
-

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/public-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/public-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/public-components/auth/signUpForm/validate/index.js

@@ -11,7 +11,10 @@ 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";
     }
-
+    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)) {
+        errors.login = "Invalid login, try another one";
+    }
     
     if (!password) {
         errors.password = "Required"

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

@@ -23,7 +23,7 @@ class categoriesPage extends React.Component {
         const { categories } = this.state;
         console.log("Categories - ", categories);
 
-        return (
+        return ( 
             <div className="page page--bottom-only categories-page">
                 <div className="container categories-grid">
                     {categories.map(el => (

src/constants/index.js

@@ -16,3 +16,5 @@ export const SIGN_OUT = 'SIGN_OUT';
 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';

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/public-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/public-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,22 +33,26 @@ export default function (state = initialState.user, { type, error, payload: data
             return {
                 ...state,
                 gettingUser: false,
+                data: null,
                 error
             }
         }
 
-        //
+        // SIGN_IN
 
         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                
             }
         }
@@ -43,15 +60,19 @@ export default function (state = initialState.user, { type, error, payload: data
             return {
                 ...state,
                 gettingUser: false,
+                data: null,
                 error
             }
         }
 
-        //
+        // SIGN_OUT
 
         case types.SIGN_OUT: {
             return initialState.user
         }
+
+        // DEFAULT
+
         default: {
             return {...state}
             

src/router.js

@@ -1,63 +1,51 @@
 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/index";
-import landingPage from './components/public-components/landingPage';
+import Header from "./containers/header";
 import Footer from './components/public-components/footer';
-import PrivateRouter from './components/common/privateRouter';
-import PrivateAdminRouter from './components/common/privateAdminRouter';
 
 import Spinner from "./components/common/spinner";
 
-const notFound = lazy(() => import("./components/public-components/notFound"));
-// const permissionDenied = lazy(() => import("./components/public-components/permissionDenied"));
-
-const homePage = lazy(() => import("./components/user-components/homePage"));
-const signInPage = lazy(() => import("./containers/auth/SignInPage"));
-const signUpPage = lazy(() => import("./containers/auth/SignUpPage"));
-const createTestForm = lazy(() => import("./components/user-components/admin-components/createTestForm"));
-const profilePage = lazy(() => import('./components/user-components/profilePage'));
-const categoriesPage = lazy(() => import('./components/user-components/categoriesPage'));
+import ProtectedRoute from './components/common/protectedRoute';
+import config from './components/common/protectedRoute/config';
 
-class Router extends React.Component {
+import fakeToken from './utils/token'
+import { bindActionCreators } from "redux";
 
-    checkUserInLocalStorage = () => {
-        // localStorage.getItem(token)
-    }
+const notFound = lazy(() => import('./components/public-components/notFound'));
 
-    //chunk.js warnings are disabled !
+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>
-                        <Route path={routes.LANDING} exact component={landingPage} />
-                        <Route path={routes.SIGN_UP} exact component={signUpPage} />
-                        <Route path={routes.SIGN_IN} exact component={signInPage} />
-                        <Route path={routes.HOME} exact component={homePage} />
-
-                        {/* should be protected */}
-                        <Route path={routes.CREATE_TEST} exact component={createTestForm} /> 
-                        <Route path={routes.PROFILE} user={user} exact component={profilePage} />
-                        <Route path={routes.CATEGORIES} user={user} exact component={categoriesPage} />
-
-                        <PrivateRouter path={routes.HOME} user={user} exact component={homePage} />
-                        <PrivateRouter path={routes.TESTS} user={user} exact component={null} />
-                        <PrivateRouter path={routes.CATEGORIES} user={user} exact component={null} />
-
-                        <PrivateAdminRouter path={routes.CREATE_CATEGORY} user={user} exact component={null} />
-                        <PrivateAdminRouter path={routes.DELETE_USER} user={user} exact component={null} />
-
+                        {protectedRoutes}
                         <Route component={notFound} />
                     </Switch>
                 </Suspense>
@@ -67,11 +55,9 @@ class Router extends React.Component {
     }
 }
 
-// const
-//     mapStateToProps = state => ({
-//         user: state.user
-//     })
-
-// export default connect()(Router)
+const mapStateToProps = state => ({
+    user: state.user
+})
+const mapDispatchToProps = dispatch => bindActionCreators({ tokenAuth }, dispatch);
 
-export default Router;
+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";