public/index.html

@@ -6,7 +6,7 @@
 	    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
 	    <meta name="theme-color" content="#000000">
 	    
-	    <link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/font-awesome/4.3.0/css/font-awesome.min.css">
+	    
 		<link href='https://fonts.googleapis.com/css?family=Roboto:400' rel='stylesheet' type='text/css'>
 	    <link rel="manifest" href="%PUBLIC_URL%/manifest.json">
 	    

src/actions/getUserById.js

@@ -0,0 +1,40 @@
+import * as types from "../constants/actionTypes";
+
+const axios = require("axios");
+
+
+
+
+const userAuthRequestById = payload => ({
+    type: types.USER_AUTH_REQUEST_BY_ID,
+    payload
+})
+
+const userAuthRequestSuccessById = payload => ({
+    type: types.USER_AUTH_REQUEST_SUCCESS_BY_ID,
+    payload
+})
+
+const userAuthRequestFailById = payload => ({
+    type: types.USER_AUTH_REQUEST_FAIL_BY_ID,
+    payload
+})
+
+export const getUsersDataById = (payload) => {
+    return dispatch => {
+        dispatch(userAuthRequestById());
+        return axios.get(`http://127.0.0.1:2000/api/users?id=${payload}`)
+            .then(res => {
+                dispatch(userAuthRequestSuccessById(res))
+            })
+            .catch(err => {
+                dispatch(userAuthRequestFailById(err));
+            })
+    }
+}
+
+export const getParams = payload => ({
+    type: types.GET_PARAMS,
+    payload
+})
+

src/actions/searchStaffAction.js

@@ -24,6 +24,7 @@ const searchStaffrequestFail = payload => ({
     payload
 })
 
+
 export const searchStaff = payload => {
     return dispatch => {
         dispatch(searchStaffRequest())

src/actions/usersAuthActions.js

@@ -20,7 +20,7 @@ const userAuthRequestFail = payload => ({
 export const getUsersData = (payload) => {
     return dispatch => {
         dispatch(userAuthRequest());
-        return axios.get(`http://127.0.0.1:2000/api/users`)
+        return axios.post(`http://127.0.0.1:2000/api/users-check`, payload)
             .then(res => {
                 dispatch(userAuthRequestSuccess(res))
             })
@@ -28,4 +28,4 @@ export const getUsersData = (payload) => {
                 dispatch(userAuthRequestFail(err));
             })
     }
-}
+}

src/components/AllStaffs/index.js

@@ -9,8 +9,7 @@ class AllStaffs extends Component {
     render() {
         const { inputStaffs, isFetching } = this.props
         let data;
-            if(isFetching===true){
-                
+            if(isFetching===true){            
                 data = <div className="loader"> 
                     <Loader type="Triangle"
                         color="#FD7F71"
@@ -18,14 +17,16 @@ class AllStaffs extends Component {
                         width="100"
                     /> 
                 </div> 
-            }
-            else{
+            } else {
                 data = <div className="staffs">
                     {inputStaffs.map((el,key)=>(
                         <Link to={`/staff/${el.id}`} key={key}>
                             <div className="staff">
                                 <img src={el.img} width="325" height="190" className="imgStaff"  alt="lorem" />
-                                {el.title} {el.price}
+                                <div className="titlleAndPrice">
+                                    <h4>{el.title}</h4>
+                                    <h4>Цена: {el.price}</h4>
+                                </div>
                             </div>
                         </Link> 
                     ))}    
@@ -33,8 +34,7 @@ class AllStaffs extends Component {
             }
         return (
 
-           <div className="content">
-
+           <div className="contentStaffs">
                 {data}
                 <AddNewStaff/>
            </div> 

src/components/Auth/authorisation.js

@@ -2,19 +2,22 @@ import React from "react";
 import { reduxForm, Field } from "redux-form";
 import Authbuttons from './authButtons'
 
+import {Link} from "react-router-dom"
+
 import {authValidate} from "../../utils/authValidate";
 import {authRenderField} from "../../common/authRenderField"
 
 
 const Form = props => {
-    const { handleSubmit, getUsersData, pristine } = props
+    const { handleSubmit, getUsersData } = props
     const submit = (values) => {
         getUsersData(values);
+        
     }
     return (
         <div className="formdiv">
             <Authbuttons />
-            <form className="form" onSubmit={handleSubmit(submit)}>
+            <form className="form" >
                 <div>
                     <Field
                         name="email"
@@ -33,7 +36,7 @@ const Form = props => {
                         className="input"
                     />
                 </div>
-                <button className="auth__submit-button">Войти</button>
+               <button className="auth__submit-button" onClick={handleSubmit(submit)}><Link to="/">Войти</Link></button>
             </form>
         </div>
 

src/components/FormsAdd/FormAddNewStaff/SendingStaffForm.js

@@ -1,11 +1,16 @@
-import React from 'react';
+import React, { Component } from 'react';
 import { Field, reduxForm } from 'redux-form';
-import { Link } from "react-router-dom";
 
-const SendingForm = props => {
-    const { handleSubmit, pristine, reset, submitting, AddNewStaff, allCategory} = props
-    
-    const submit = values => {
+
+class SendingForm extends  Component  {
+
+    onChange = e =>{
+        //console.log(e.target.files[0])
+        this.setState({image: e.target.files[0].name})
+    }
+    submit = values => {
+        const { AddNewStaff } = this.props
+        //const { image } = this.state
         values.img = "http://zabavnik.club/wp-content/uploads/vopros_2_14000037-939x1024.jpg"
         values.staff = "Машина"
         values.state = 1
@@ -13,11 +18,12 @@ const SendingForm = props => {
         
         AddNewStaff(values)
     };
-    console.log(allCategory)
+    render(){
+         const { handleSubmit, pristine, reset, submitting, allCategory } = this.props
     return (
-        <div className="formdiv">
-            <div>
-                <form onSubmit={handleSubmit(submit)} className="form">
+        
+            <div className="formdiv">
+                <form onSubmit={handleSubmit(this.submit)} className="form">
                     <Field
                         name="title"
                         component="input"
@@ -28,10 +34,10 @@ const SendingForm = props => {
 
                     <Field
                         name="description"
-                        component="input"
+                        component="textarea"
                         type="text"
                         placeholder="Описание"
-                        className="input"
+                        className="textarea"
                     />
 
                     <Field
@@ -42,17 +48,18 @@ const SendingForm = props => {
                         className="input"
                     />
 
+
                     <Field
                         name="categoryId"
                         component="select"
                         
                         className="input"
                     >
-                        
+                        <option >Выберите рубрику</option>
                         {allCategory.map(el => <option value={el.id}> {el.title}</option>)}
                     </Field>
 
-                    <div>
+                    <div className="buttonConteiner">
                         <button type="submit" disabled={pristine || submitting} className="button" >
                             Submit
                         </button>
@@ -61,9 +68,11 @@ const SendingForm = props => {
                         </button>
                     </div>
                 </form>
+
             </div>
-        </div>
+        
     )
+  }
 }
 
 export default reduxForm({

src/components/FormsAdd/FormAddNewStaff/index.js

@@ -1,4 +1,4 @@
-import React, { Component } from 'react';
+import React, { Component, Fragment } from 'react';
 import { connect } from 'react-redux';
 import * as actions from '../../../actions/categoryAction';
 
@@ -25,12 +25,10 @@ class FormAddNewStaff extends Component {
             data = <Form AddNewStaff={AddNewStaff} allCategory={category}/>
         }
         return (
-            <div>
-               {data}
-               {isFetching===true ? <div><MDSpinner size={100} duration={1000} /></div> : null}
- 
-
-            </div>
+            <Fragment>
+                {data}
+                {isFetching===true ? <div><MDSpinner size={100} duration={1000} /></div> : null}
+            </Fragment>
         );
     }
 }

src/components/Header/Myprofile.js

@@ -5,18 +5,41 @@ import { Avatar } from 'antd';
 class Myprofile extends Component {
 
     render() {
+
+        const { name, getUser, id } =this.props
+        let localS = JSON.parse(localStorage.getItem("login"));
+        let data;
+
+        if(!name && !getUser.name || localS===null){
+
+            data = <Link to="/auth" className="link">
+                <div className="header__auth__container">
+                    <div className="avatar">
+                        <Avatar icon="user" size={60} style={{ backgroundColor: '#FD7F71' }}/>
+                    </div>
+                    <div className="text">
+                        Мой профиль
+                    </div>
+                        
+                </div>    
+            </Link>
+        } else {
+            
+            data = <Link to={`/user/id:${getUser.id || id }`} className="link">
+                <div className="header__auth__container">
+                    <div className="avatar">
+                        <Avatar icon="user" size={60} style={{ backgroundColor: '#FD7F71' }}/>
+                    </div>
+                    <div className="text">
+                        {name || getUser.name }
+                    </div>                    
+                </div>    
+            </Link> 
+        }
+            
         return (
             <div className="header__auth">
-                <Link to="/auth" className="link">
-                    <div className="header__auth__container">
-                        <div className="avatar">
-                            <Avatar icon="user" size={60} style={{ backgroundColor: '#FD7F71' }}/>
-                        </div>
-                        <div className="text">
-                            Мой профиль
-                        </div>
-                    </div>    
-                </Link>    
+                { data }
             </div>
         );
     }

src/components/LeftMenu/PodCategory.js

@@ -16,14 +16,21 @@ class PodCatygory extends Component {
 
         let datacat = this.podCaty.map((el, key) =>
             <Link to={`/category/staff/${el.id}`}  key={`podCaty${key}`}>
-                <li key={`${el.id}`} className="ant-menu-item" role="menuitem" style={{"paddingLeft": "48px"}}>
+                <li key={`${el.id}`} 
+                    className="ant-menu-item" 
+                    role="menuitem" 
+                    style={{"paddingLeft": "48px"}}
+                >
                     {el.title}
                 </li>
             </Link>
         ) 
 
         return (
-            <ul className="ant-menu ant-menu-sub ant-menu-inline" role="menu" >
+            <ul className="ant-menu ant-menu-sub ant-menu-inline" 
+                role="menu" 
+                style={{"background": "#e06b62","color": "#fff"}} 
+            >
                 {datacat}
             </ul>
         );

src/components/LeftMenu/index.js

@@ -7,7 +7,7 @@ import { Link } from "react-router-dom";
 const { Sider } = Layout;
 
 class LeftMenu extends Component {
-   
+
     state = {
         collapsed: false,
     };
@@ -18,8 +18,9 @@ class LeftMenu extends Component {
 
     render() {
 
-        const { allCategory, mainCategory } = this.props
-        
+        const { allCategory, mainCategory, isAdmin, getUser } = this.props
+        let localS = JSON.parse(localStorage.getItem("login"));
+
         return (
             <div>
                 <Layout style={{ minHeight: '100vh', 'background': 'red' }}>
@@ -27,17 +28,17 @@ class LeftMenu extends Component {
                         collapsed={this.state.collapsed}
                         onCollapse={this.onCollapse}
                     >
-                        <Menu key="addCatigory1" theme="dark" defaultSelectedKeys={['1']} mode="inline">    
+                        {Boolean(isAdmin) && Boolean(getUser.isAdmin) || (localS !== null && <Menu key="addCatigory1" theme="dark" defaultSelectedKeys={['1']} mode="inline">
                             <Menu.Item key="addCatigory">
                                 <Link to="/addCategory">
                                     <Icon type="plus" />
                                     <span >Добавить категорию</span>
                                 </Link>
                             </Menu.Item>
-                        </Menu>                       
-                        <DrawCategory allCategory={allCategory} 
-                            mainCategory={mainCategory}  
-                        />  
+                        </Menu>)}
+                        <DrawCategory allCategory={allCategory}
+                            mainCategory={mainCategory}
+                        />
                     </Sider>
                 </Layout>
             </div>

src/components/privateRouterComponents/addCategoryIfAdmin.js

@@ -0,0 +1,29 @@
+import React, { Component } from 'react';
+
+
+import { Menu, Icon } from 'antd';
+import { Link } from "react-router-dom";
+
+
+
+
+
+class addCategoryIfAdmin extends Component {
+    render() {
+        return (
+            <div>
+                <Menu key="addCatigory1" theme="dark" defaultSelectedKeys={['1']} mode="inline">    
+                            <Menu.Item key="addCatigory">
+                                <Link to="/addCategory">
+                                    <Icon type="plus" />
+                                    <span >Добавить категорию</span>
+                                </Link>
+                            </Menu.Item>
+                        </Menu>          
+            </div>
+        );
+    }
+}
+
+export default addCategoryIfAdmin;
+ 

src/components/usersProtectPage/PrivateRoute.js

@@ -0,0 +1,21 @@
+import React from 'react';
+
+import { Route } from "react-router-dom";
+
+export default ({ component: Component, data, params, ...rest }) => (
+    <Route
+        {...rest}
+        render={props => {
+
+            return <Component {...data}  {...props} />
+            // else {
+            //   return <Redirect to='/' />
+            // }
+        }}
+    />
+
+)
+
+
+
+

src/components/usersProtectPage/index.js

@@ -0,0 +1,16 @@
+import React, { Component } from 'react';
+import { throws } from 'assert';
+
+class UsersProtect extends Component {
+    render() {
+        
+       const { id, name, email } = this.props
+        return (
+            <div>
+               { name } 
+            </div>
+        );
+    }
+}
+
+export default UsersProtect;

src/constants/actionTypes.js

@@ -57,4 +57,10 @@
     //usersRegistrAction
     export const USER_REG_REQUEST = "USER_REG_REQUEST";
     export const USER_REG_REQUEST_SUCCESS = "USER_REG_REQUEST_SUCCESS";
-    export const USER_REG_REQUEST_FAIL = "USER_REG_REQUEST_FAIL";
+    export const USER_REG_REQUEST_FAIL = "USER_REG_REQUEST_FAIL";
+
+    //getUsersById
+    export const USER_AUTH_REQUEST_BY_ID = "USER_AUTH_REQUEST_BY_ID";
+    export const USER_AUTH_REQUEST_SUCCESS_BY_ID = "USER_AUTH_REQUEST_SUCCESS_BY_ID";
+    export const USER_AUTH_REQUEST_FAIL_BY_ID = "USER_AUTH_REQUEST_FAIL_BY_ID";
+    export const GET_PARAMS = "GET_PARAMS";

src/container/AddNewStaff.js

@@ -1,4 +1,4 @@
-import React, { Component } from 'react';
+import React, { Component, Fragment } from 'react';
 
 import { connect } from 'react-redux';
 import * as actions from "../actions/addNewStaffAction";
@@ -19,18 +19,18 @@ class AddNewStaff extends Component {
         
         return (
 
-            <div className="top">
-                <div>
+            <Fragment>
+                <Fragment>
                     <FormAddNewStaff AddNewStaff={AddNewStaff} 
                         isFetching={isFetching} 
                     />
-                </div>
+                </Fragment>
                 <EditModal visible={showModal}
                     onOk={this.closeEditModal}
                     onCancel={this.closeEditModal}
                     error={error}
                 />
-            </div>
+            </Fragment>
 
         );
     }

src/container/CategoryStaffInfo.js

@@ -8,11 +8,7 @@ import LeftMenu from '../container/LeftMenu'
 import Header from '../container/Header'
 
 class CategoryStaffInfo extends Component {
-    constructor(props){
-        super(props)
-        
-       
-    }
+    
     componentDidMount(){
         const { getCategorysDataById, match } = this.props
         getCategorysDataById(match.params.id)

src/container/Header.js

@@ -10,8 +10,9 @@ import { getUsersData } from '../actions/usersAuthActions'
 import { bindActionCreators } from "redux";
 
 class Header extends Component {
+
     render() { 
-        const { inputData, searchStaff, changeInputValue } = this.props
+        const { inputData, searchStaff, changeInputValue, name, getUser, id } = this.props
         return (
             <div className="header">
                <HeaderLogo />
@@ -19,7 +20,8 @@ class Header extends Component {
                     searchStaff={searchStaff}
                     changeInputValue={changeInputValue} 
                 />
-               <Myprofile/>
+                <Myprofile name = {name} getUser={ getUser } id={ id } />
+
             </div>
         );
     }

src/container/LeftMenu.js

@@ -15,13 +15,15 @@ class LeftMenu extends Component {
 
     render() {
         
-        const { allCategory, mainCategory, podCategory } = this.props
+        const { allCategory, mainCategory, podCategory, isAdmin, getUser } = this.props
         
         return (
             <Fragment>
                 <CategoryMenu allCategory={allCategory.data} 
                     mainCategory={mainCategory} 
-                    podCategory={podCategory} 
+                    podCategory={podCategory}
+                    isAdmin = { isAdmin }
+                    getUser={ getUser } 
                 />
             </Fragment>
         );

src/container/MainPage.js

@@ -1,7 +1,9 @@
 import React, { Component, Fragment } from 'react';
 import { connect } from 'react-redux';
 
-import * as actions from "../actions/staffsAction";
+import { getStaffsData } from "../actions/staffsAction";
+
+import { getUsersDataById } from "../actions/getUserById"
 
 import { bindActionCreators } from "redux";
 
@@ -10,18 +12,43 @@ import LeftMenu from '../container/LeftMenu'
 import AllStaffs from "../components/AllStaffs"
 
 class MainPage extends Component {
+   
+    //  componentDidUpdate(prevProps){
+
+    //     let localS = JSON.parse(localStorage.getItem("login"));
+    //     console.log("prevProps-" ,prevProps, "this.props-", this.props)
+    //     if ( prevProps.isFetching !== this.props.isFetching ){
+    //         console.log(2342)
+    //         this.setState({trig: !this.state.trig})
+    //        //this.props.getStaffsData()
+    //     }
 
+    // }
     componentDidMount() {
-        this.props.getStaffsData()
+        
+        const { getStaffsData, getUsersDataById } = this.props
+
+        getStaffsData()
+
+        let localS = JSON.parse(localStorage.getItem("login"));
+        if (localS === null) {
+
+        } else {
+            getUsersDataById(localS)
+        }
+
     }
 
     render() {
-        const { inputStaffs, isFetching } = this.props
+
+        const { inputStaffs, isFetching, getUser } = this.props
+        const { name, isAdmin, id } = this.props
+
         return (
             <Fragment>
-                <Header />
-                <div className="contentDiv">
-                    <LeftMenu />
+                <Header name={name} getUser={getUser} id={id} />
+                <div className="menuAndContent">
+                    <LeftMenu isAdmin={isAdmin} getUser={getUser} />
                     <AllStaffs inputStaffs={inputStaffs} isFetching={isFetching} />
                 </div>
             </Fragment>
@@ -31,10 +58,12 @@ class MainPage extends Component {
 
 const mapStateToProps = state => ({
     inputStaffs: state.staffs.inputStaffs,
-    isFetching: state.staffs.isFetching
+    isFetching: state.staffs.isFetching,
+    getUser: state.getUserById.getUser,
+    params: state.getUserById.params,
 });
 
-const mapDispatchToProps = dispatch => bindActionCreators({ ...actions }, dispatch);
+const mapDispatchToProps = dispatch => bindActionCreators({ getStaffsData, getUsersDataById }, dispatch);
 
 export default MainPage = connect(
     mapStateToProps,

src/container/MainPageStaffInfo.js

@@ -18,7 +18,7 @@ class MainPageStaffInfo extends Component {
             <div>
 
                 <Header />
-                <LeftMenu />
+                <LeftMenu/>
                 <FullInfoAboutStaff {...this.props} />
 
             </div>

src/container/SearchStaff.js

@@ -6,7 +6,7 @@ import { bindActionCreators } from "redux";
 
 
 import SearchStaffsPage from "../components/SearchStaffsPage"
-import LeftMenu from '../components/LeftMenu'
+import LeftMenu from '../container/LeftMenu'
 import Header from '../container/Header'
 
 

src/container/SearchStaffsInfo.js

@@ -4,7 +4,7 @@ import * as actions from "../actions/searchStaffByIdAction";
 import { bindActionCreators } from "redux";
 
 import SearchFullInfoStaff from '../components/SearchStaffsPage/SearchFullInfoStaff'
-import LeftMenu from '../components/LeftMenu'
+import LeftMenu from '../container/LeftMenu'
 import Header from '../container/Header'
 
 class SearchInfoStaffsInfo extends Component {

src/container/UserProfile.js

@@ -0,0 +1,58 @@
+import React, { Component } from 'react';
+
+import { Link } from "react-router-dom";
+
+import { connect } from 'react-redux';
+
+import { getUsersData } from "../actions/usersAuthActions";
+
+import { getUsersDataById } from "../actions/getUserById"
+
+import { getParams } from "../actions/getUserById"
+
+import { bindActionCreators } from "redux";
+
+class UserProfile extends Component {
+
+    singOut = () => {
+        const { getParams, match } = this.props
+        localStorage.removeItem("login")
+        getParams(match.params.id)
+    }
+
+    componentDidMount() {
+        const { getUsersDataById } = this.props
+            
+              let localS = JSON.parse(localStorage.getItem("login"));
+                if(localS===null){
+
+                }
+                else{
+                    getUsersDataById(localS)
+                }     
+    }
+    render() {
+        console.log(this.props)
+
+        return (
+            <div>
+                {this.props.getUser.name}
+                <button onClick={this.singOut}><Link to="/">Выход</Link></button>
+            </div>
+        );
+    }
+}
+
+
+const mapStateToProps = state => ({
+    inputData: state.usersAuth.inputData,
+    getUser: state.getUserById.getUser,
+    
+});
+
+const mapDispatchToProps = dispatch => bindActionCreators({ getUsersData, getUsersDataById, getParams }, dispatch);
+
+export default UserProfile = connect(
+    mapStateToProps,
+    mapDispatchToProps
+)(UserProfile);

src/reducer/categoryById.js

@@ -4,35 +4,31 @@ const initState = {
     infoCategory: [],
     isFetching: false,
     error: null,
-    
-  };
+};
 
-  export default (state = initState, { type, payload }) => {
-      console.log(payload)
-      switch (type) {
-        
+export default (state = initState, { type, payload }) => {
+    switch (type) {
         case types.CATEGORY_REQUEST_BY_ID: {
-          return {
-          ...state,
-          isFetching: true,
-          infoCategory: [],
-          }
-        } 
-        case types.CATEGORY_REQUEST_SUCCESS_BY_ID: { 
-          return {
-          ...state,
-          isFetching: false,
-          infoCategory: payload.data.staffs,
-          
-          }
+            return {
+                ...state,
+                isFetching: true,
+                infoCategory: [],
+            }
+        }
+        case types.CATEGORY_REQUEST_SUCCESS_BY_ID: {
+            return {
+                ...state,
+                isFetching: false,
+                infoCategory: payload.data.staffs,
+            }
         }
         case types.CATEGORY_REQUEST_FAIL_BY_ID: {
-          return {
-          ...state,
-          isFetching: false,
-          error: "ERROR"
-          }
+            return {
+                ...state,
+                isFetching: false,
+                error: "ERROR"
+            }
         }
-        default: return state;    
+        default: return state;
     }
-  };
+};

src/reducer/getUserById.js

@@ -0,0 +1,45 @@
+import * as types from "../constants/actionTypes";
+
+const initState = {
+    getUser: [],
+    isFetching: false,
+    error: null,
+    params: null
+    
+  };
+
+export default (state = initState, {type, payload} ) => {
+    
+    switch(type) {
+        case types.USER_AUTH_REQUEST_BY_ID: {
+            return {
+                ...state,
+                isFetching: true
+            }
+        }
+        case types.USER_AUTH_REQUEST_SUCCESS_BY_ID: {
+            
+            return {
+                ...state,
+                getUser: payload.data,
+                isFetching: false
+            }
+        }
+        case types.USER_AUTH_REQUEST_FAIL_BY_ID: {
+            return {
+                ...state,
+                isFetching: false,
+                error: "ERROR"
+            }
+        }
+        case types.GET_PARAMS: {
+            return {
+                ...state,
+                params: payload
+            }
+        }
+        
+        default: return state;
+
+    }
+};

src/reducer/index.js

@@ -3,6 +3,7 @@ import { reducer as formReducer } from 'redux-form';
 
 import usersRegistration from './usersRegistration'
 import usersAuthorisation from './usersAuthorisation'
+import getUserById from './getUserById'
 
 import staffs from './staffs'
 import searchStaff from './searchStaff'
@@ -17,6 +18,7 @@ import categoryById from './categoryById'
 export default  combineReducers({
     usersRegistr: usersRegistration,
     usersAuth: usersAuthorisation,
+    getUserById,
     
     staffs,
     searchStaff,

src/reducer/usersAuthorisation.js

@@ -3,7 +3,8 @@ import * as types from "../constants/actionTypes";
 const initState = {
     inputData: [],
     isFetching: false,
-    error: null
+    error: null,
+    trig: true
   };
 
 export default (state = initState, {type, payload} ) => {
@@ -11,25 +12,32 @@ export default (state = initState, {type, payload} ) => {
         case types.USER_AUTH_REQUEST: {
             return {
                 ...state,
-                inputData: payload,
-                isFatching: true
+                isFatching: true,
             }
         }
         case types.USER_AUTH_REQUEST_SUCCESS: {
+            
+            if (payload.data===null){
+                payload.data = false
+            }
+            else if (payload.data!==null && payload.data.id !==undefined ){
+                const { id } = payload.data
+                localStorage.setItem("login",JSON.stringify(id))
+            }
             return {
                 ...state,
                 inputData: payload.data,
-                isFatching: false
+                isFatching: false,
             }
         }
         case types.USER_AUTH_REQUEST_FAIL: {
             return {
                 ...state,
                 isFatching: false,
-                error: "ERROR"
+                error: "ERROR",
             }
         }
+        
         default: return state;
-
     }
 };

src/router.js

@@ -1,37 +1,65 @@
-import React from "react";
-import { Switch, Route } from "react-router-dom";
+import React, { Component, Fragment } from "react";
+import { Switch, Route, withRouter } from "react-router-dom";
+import { connect } from 'react-redux';
+import { bindActionCreators } from "redux";
 
-import RenderRegistration from "./container/renderRegistration"
-import RenderAuthorisation from "./container/renderAuthorisation"
+import PrivateRoute from './components/usersProtectPage/PrivateRoute'
+
+import { getUsersDataById } from "./actions/getUserById"
+import { getUsersData } from './actions/usersAuthActions'
 
 import MainPage from "./container/MainPage";
-// import Form from './components/Auth/index'
-// import RegistrForm from './components/Auth/registration'
-import MainPageStaffInfo from './container/MainPageStaffInfo'
+import userProfile from './container/UserProfile'
+import RenderAuthorisation from "./container/renderAuthorisation"
+import RenderRegistration from "./container/renderRegistration"
 import CategoryStaffInfo from './container/CategoryStaffInfo'
-
+import MainPageStaffInfo from './container/MainPageStaffInfo'
 import SearchStaffs from './container/SearchStaff'
-
 import SearchStaffsInfo from './container/SearchStaffsInfo'
 import AddNewStaff from './container/AddNewStaff'
-
 import AddNewCategory from './container/AddNewCategory'
 
-export default () => (
-
-    <div>
-	    <Switch>
-            <Route path="/" exact component={MainPage} />
-            <Route path="/authorisation" exact component={RenderAuthorisation} />
-            <Route path="/auth" exact component= {RenderAuthorisation}/>
-            <Route path="/registration" exact component={RenderRegistration} />
-            <Route path="/category/staff/:id" exact component={CategoryStaffInfo} />
-            <Route path="/staff/:id" exact component={MainPageStaffInfo} />
-            <Route path="/search/:title" exact component={SearchStaffs} />
-                <Route path="/search/Staff/:id" exact component={SearchStaffsInfo} />
-            <Route path="/newStaff" exact component={AddNewStaff} />
-            <Route path="/addCategory" exact component={AddNewCategory} />
-	    </Switch>
-    </div>
-);
+// import Form from './components/Auth/index'
+// import RegistrForm from './components/Auth/registration'
+// import UserProtect from './components/usersProtectPage/'
+// import UserProfile from './components/Header/Myprofile'
+//import addCategory from './components/privateRouterComponents/addCategoryIfAdmin'
+
+class Router extends Component {
+    render() {
+
+        const { inputData, params } = this.props
+
+        return (
+            <Fragment>
+                <Switch>
+                    <PrivateRoute path="/" data={inputData} params={params} exact component={MainPage} />
+                    {/* <Route path="/" exact component={MainPage} /> */}
+                    <Route path="/user/:id" exact component={userProfile} />
+                    <Route path="/authorisation" exact component={RenderAuthorisation} />
+                    <Route path="/auth" exact component={RenderAuthorisation} />
+                    <Route path="/registration" exact component={RenderRegistration} />
+                    <Route path="/category/staff/:id" exact component={CategoryStaffInfo} />
+                    <Route path="/staff/:id" exact component={MainPageStaffInfo} />
+                    <Route path="/search/:title" exact component={SearchStaffs} />
+                    <Route path="/search/Staff/:id" exact component={SearchStaffsInfo} />
+                    <Route path="/newStaff" exact component={AddNewStaff} />
+                    <Route path="/addCategory" exact component={AddNewCategory} />
+                </Switch>
+            </Fragment>
+        )
+    }
+}
+
+const mapStateToProps = state => ({
+    inputData: state.usersAuth.inputData,
+    trig: state.usersAuth.trig,
+    params: state.getUserById.params,
+})
+const mapDispatchToProps = dispatch => bindActionCreators({ getUsersData, getUsersDataById }, dispatch);
+
+export default withRouter(connect(
+    mapStateToProps, 
+    mapDispatchToProps
+)(Router));
 

src/style/abstracts/variables.scss

@@ -17,7 +17,14 @@ $color-grey-the-lightest: #f9fbfd;
 $color-grey-transparent: rgba(247, 249, 251, 0.7);
 
 //BASE COLORS
-$color-shadow:#d4d4d4;
 $el-color:#FD7F71;
-// BASE
-$color-backgtound: #f5f8fb;
+$color-backgtound: #f8f6f6;
+
+//SearchLine
+$color: #FD7F71;
+$background: #F7FBFB;
+$background-2: #EAF5F5;
+$background-3: #BBD8D8;
+$primary: #FD7F71;
+$white: #fff;
+$breakpoint: 768px;

src/style/base/_base.scss

@@ -6,6 +6,9 @@
 	box-sizing:border-box;
 }
 body{
-	// max-width: 1140px;
+	min-width: 980px;
+	max-width: 1400px;
+	width: 100%;
 	margin: 0 auto ;
+	background: $color-backgtound;
 }

src/style/components/_allStaff.scss

@@ -1,28 +1,60 @@
-
-.contentDiv{
+.menuAndContent{
     max-width: 100%;
     display: flex;
     
-    .content{
+    .contentStaffs{
         width: 100%;
         padding: 10px;
     }
 
     .staffs{
+        margin: 0 auto;
         display: flex;
-        flex-wrap: wrap;
-        justify-content: space-around;
         align-items: center;
         align-content: center; 
+        flex-wrap: wrap;
     }
 
     .staff{
         width: 350px;
         height: 250px;
         margin: 10px;
-        background-color: red;
-        border: 4px double black; 
-        background: #fc3;   
+        padding: 1%;
+        border: none;
+        outline: none;
+        border: 0px;
+        cursor: pointer;
+        color: #FD7F71;
+        transition: .3s ease-out;
+        border-radius: 10px;
+        background-color: #fff;
+        box-shadow: 0 1px 1px rgba(187, 216, 216, 0.6), 
+            0 3px 3px rgba(187, 216, 216, 0.4), 
+            0 8px 16px rgba(187, 216, 216, 0.3);
+
+        .titlleAndPrice{
+            display: flex;
+            justify-content: space-around;
+            padding-top: 10px;
+
+        }    
+    }
+
+    .imgStaff{
+        width: 100%;
+        padding: 5px ;
+       
+    }
+
+    .loader{
+        position: fixed;
+        bottom: 0;
+        left: 50%;
+        right: 0;
+        top: 50%;
+        height: 100%;
+        width: 100%;
+        z-index: 9999;  
     }
 
 }
@@ -77,10 +109,6 @@
 // }
 
 
-.imgStaff{
-    width: 100%;
-    padding: 5px ;
-   
-}
+
   
 

src/style/components/_form.scss

@@ -0,0 +1,117 @@
+.formdiv{
+    width: 100%;
+    height: 100vh;
+    display: flex;
+    justify-content: center;
+    align-items: center;
+	font-size: 20px;
+    background-image: url("../img/depositphotos_80275194-stock-illustration-russian-old-fair-bazaar-vector.jpg");
+    background-position: center; /* Center the image */
+    background-repeat: no-repeat; /* Do not repeat the image */
+    background-size: cover; 
+    
+    .form {
+        box-sizing: border-box;
+        width: 460px;
+        box-shadow: 2px 2px 5px 1px rgba(0,0,0,0.2);
+        padding-bottom: 40px;
+        border-radius: 3px;
+        background-color: rgba(247, 240, 240, 0.7);
+        
+        
+        h1 {
+            box-sizing: border-box;
+            padding: 20px;
+        }
+    }
+
+    .input {
+        margin: 20px auto;
+        width: 80%;
+        display: block;
+        border: none;
+        padding: 10px 0;
+        border-bottom: solid 1px $color;
+        transition: all 0.3s cubic-bezier(.64,.09,.08,1);
+        background: linear-gradient(to bottom, rgba(255,255,255,0) 96%, $color 4%);
+        background-position: -400px 0;
+        background-size: 400px 100%;
+        background-repeat: no-repeat;
+        color: darken($color, 1%);
+        &:focus {
+            box-shadow: none;
+            outline: none;
+            background-position: 0 0;
+            &::-webkit-input-placeholder {
+                color: $color;
+                font-size: 11px;
+                transform: translateY(-20px);
+                visibility: visible !important;
+            }
+        }
+        option{
+            background: rgba(247, 240, 240, 0.7);
+            border-radius: 3px;
+        }
+        select::-ms-expand { /* for IE 11 */
+            appearance: none;
+        }
+    }
+    
+    .textarea {
+        margin: 20px auto;
+        width: 80%;
+        height: 100px;
+        display: block;
+        border: none;
+        padding: 20px 0;
+        overflow: hidden;
+        border-bottom: solid 1px $color;
+        transition: all 0.3s cubic-bezier(.64,.09,.08,1);
+        background: linear-gradient(to bottom, rgba(255,255,255,0) 96%, $color 4%);
+        background-position: -400px 0;
+        background-size: 400px 100%;
+        background-repeat: no-repeat;
+        color: darken($color, 1%);
+        &:focus {
+            box-shadow: none;
+            outline: none;
+            background-position: 0 0;
+            &::-webkit-input-placeholder {
+                color: $color;
+                font-size: 11px;
+                transform: translateY(-20px);
+                visibility: visible !important;
+            }
+        }
+    }
+
+    .buttonConteiner{
+        display: flex;
+        justify-content: center;
+    }
+
+    .button {
+        border: none;
+        background: $color;
+        cursor: pointer;
+        border-radius: 3px;
+        padding: 6px;
+        margin: 10px 30px;
+        width: 80%;
+        color: white;
+        margin-left: 25px;
+        box-shadow: 0 3px 6px 0 rgba(0,0,0,0.2);
+        &:hover { 
+          transform: translateY(-3px);
+          box-shadow: 0 6px 6px 0 rgba(0,0,0,0.2);
+        }
+    }
+
+}
+
+input[type=number]::-webkit-inner-spin-button, 
+input[type=number]::-webkit-outer-spin-button { 
+  -webkit-appearance: none; 
+  margin: 0; 
+}

src/style/components/_formLogin.scss

@@ -6,10 +6,7 @@
     align-items: center;
 	font-size: 20px;
     margin: 0 auto ;
-    // background-color: #c1bdba;
     background-image: url("../img/depositphotos_80275194-stock-illustration-russian-old-fair-bazaar-vector.jpg");
-    
-    //height: 500px; /* You must set a specified height */
     background-position: center; /* Center the image */
     background-repeat: no-repeat; /* Do not repeat the image */
     background-size: cover; 
@@ -59,15 +56,16 @@ h1 {
     background-size: 200px 100%;
     background-repeat: no-repeat;
     color: darken($el-color, 20%);
+
     &:focus {
         box-shadow: none;
         outline: none;
         background-position: 0 0;
         &::-webkit-input-placeholder {
-        color: $el-color;
-        font-size: 11px;
-        transform: translateY(-20px);
-        visibility: visible !important;
+            color: $el-color;
+            font-size: 11px;
+            transform: translateY(-20px);
+            visibility: visible !important;
         }
     }
 }
@@ -88,4 +86,125 @@ h1 {
         transform: translateY(-3px);
         box-shadow: 0 6px 6px 0 rgba(0,0,0,0.2);
     }
-}
+}
+
+
+h1, .input::-webkit-input-placeholder, .button {
+    font-family: 'roboto', sans-serif;
+    transition: all 0.3s ease-in-out;
+  }
+  
+  h1 {
+    height: 100px;
+    width: 100%;
+    font-size: 18px;
+    background: darken($color, 4%);
+    color: white;
+    line-height: 150%;
+    border-radius: 3px 3px 0 0;
+    box-shadow: 0 2px 5px 1px rgba(0,0,0,0.2);
+  }
+  
+  .form {
+    box-sizing: border-box;
+    width: 460px;
+    margin: auto 0;
+    box-shadow: 2px 2px 5px 1px rgba(0,0,0,0.2);
+    padding-bottom: 40px;
+    border-radius: 3px;
+  }
+  
+  .input {
+    margin: 20px 25px;
+    width: 80%;
+    display: block;
+    border: none;
+    padding: 10px 0;
+    border-bottom: solid 1px $color;
+    transition: all 0.3s cubic-bezier(.64,.09,.08,1);
+    background: linear-gradient(to bottom, rgba(255,255,255,0) 96%, $color 4%);
+    background-position: -200px 0;
+    background-size: 200px 100%;
+    background-repeat: no-repeat;
+    color: darken($color, 1%);
+    &:focus {
+      box-shadow: none;
+      outline: none;
+      background-position: 0 0;
+      &::-webkit-input-placeholder {
+        color: $color;
+        font-size: 11px;
+        transform: translateY(-20px);
+        visibility: visible !important;
+      }
+    }
+  }
+  //.input:focus::-webkit-input-placeholder {text-indent: 500px; transition: text-indent 0.5s ease;}
+  .button {
+    border: none;
+    background: $color;
+    cursor: pointer;
+    border-radius: 3px;
+    padding: 6px;
+    margin-bottom: 10px;
+    width: 80%;
+    color: white;
+    margin-left: 25px;
+    box-shadow: 0 3px 6px 0 rgba(0,0,0,0.2);
+    &:hover { 
+      transform: translateY(-3px);
+      box-shadow: 0 6px 6px 0 rgba(0,0,0,0.2);
+    }
+  }
+  // .allStaffs{
+    
+  //   max-width: 1500px;
+  //    display: flex;
+  //     flex-wrap: wrap;
+  //     justify-content: center;
+  //     align-items: center;
+  //     align-content: center;
+  // }
+  // .staffs{
+  //   max-width: 1500px;
+  //   display: flex;
+  //     flex-wrap: wrap;
+  //     justify-content: center;
+  //     align-items: center;
+  //     align-content: center;
+      
+  // }
+  // .staff{
+  //    width: 350px;
+     
+  // }
+  .main{
+    display: flex;
+  }
+  
+  .sider{
+    background-color: #FD7F71
+  }
+  .auth__button{
+  
+    width: 100%;
+    display : flex;
+    padding-top: 30px;
+    padding-bottom: 30px;
+    
+  }
+  .btn1{
+    width: 180px;
+      margin-left: 0px;
+      border-radius: 0px;
+      padding-bottom: 10px;
+      padding-top: 10px;
+  }
+  .btn2{
+    width: 180px;
+      margin-left: 0px;
+      border-radius: 0px;
+      padding-bottom: 10px;
+      padding-top: 10px;
+  }
+  

src/style/components/_header.scss

@@ -3,6 +3,10 @@
 
 	&__logo {
 		width: 20%;
+		margin: 0 auto;
+		display: flex;
+		justify-content: center;
+		align-items: center;	
 	}
 
 	&__searchLine{
@@ -34,4 +38,93 @@
 			}
 		}
 	}
+}
+
+.searchInput::-webkit-input-placeholder, .button {
+    font-family: 'roboto', sans-serif;
+    transition: all 0.3s ease-in-out;
+}
+  
+.searchInput{   
+	margin: 40px 25px;
+	width: 75%;
+	display: block;
+	border: none;
+	padding: 10px 0;
+	border-bottom: solid 1px $color;
+	transition: all 0.3s cubic-bezier(.64,.09,.08,1);
+	background: linear-gradient(to bottom, rgba(255,255,255,0) 96%, $color 4%);
+	background-position: -700px 0;
+	background-size: 700px 100%;
+	background-repeat: no-repeat;
+	color: darken($color,1%);
+	
+	&:focus {
+		box-shadow: none;
+		outline: none;
+		background-position: 0 0;
+		&::-webkit-input-placeholder {
+			text-indent: 700px; transition: text-indent 0.5s ease;
+		}
+	}
+}
+.searchBtn{
+    border:none;
+    outline: none;
+    border: 0px;
+    cursor: pointer;
+	color: $primary;
+	transition: .3s ease-out;
+	
+	&:hover,
+	&:focus { 
+    	transform: scale(1.125);
+    
+    	.icon {
+	  		transform: scale(1.25); 
+		} 
+	} 
+        // Display/alignment
+        display: flex;
+        justify-content: center;
+        align-items: center;
+        align-content: center;
+        
+        // Sizing
+        width: 68px;
+        height: 68px;
+        border-radius: 34px;
+        
+        // Style
+        background-color: $white;
+        box-shadow:
+          0 1px 1px rgba($background-3, .6),
+          0 3px 3px rgba($background-3, .4),
+          0 8px 16px rgba($background-3, .3);
+        
+        &:hover,
+        &:focus {
+          box-shadow:
+            0 2px 2px rgba($background-3, .4),
+            0 4px 4px rgba($background-3, .3),
+            0 12px 32px rgba($background-3, .3); } 
+}
+
+.fill-currentcolor {
+	fill: currentcolor; 
+}
+  
+.fill-none {
+	fill: none; 
+}
+
+.icon {
+    width: 24px;
+    height: 24px;
+    transition: .3s ease-out;
+        
+    @media (min-width: $breakpoint) {
+      	width: 32px;
+		height: 32px; 
+	} 
 }

src/style/components/_leftMenu.scss

@@ -0,0 +1,53 @@
+.ant-layout-sider-children{
+    background: $el-color;  
+}
+.ant-menu-submenu-title{
+    background: $el-color;  
+}
+.ant-menu-dark{
+    color: rgba(255, 255, 255, 0.9);
+    background: $el-color;
+
+    &:hover {
+        background: rgb(223, 111, 98);
+    }
+}
+
+.ant-menu .ant-menu-sub .ant-menu-inline{
+    background: $el-color;
+    // color: rgba(255, 255, 255, 0.9);
+
+    & a :hover{
+        background: rgb(223, 111, 98);
+    }
+
+    .ant-menu-item{
+        background: $el-color;
+        color: rgba(255, 255, 255, 0.9);
+        
+        .ant-menu-item:hover {
+            background: #f0f0f0;
+        }
+    }
+    
+}
+
+.ant-layout-sider-trigger {
+    position: fixed;
+    text-align: center;
+    bottom: 0;
+    cursor: pointer;
+    height: 48px;
+    line-height: 48px;
+    color: #fff;
+    background: #e06b62;
+    z-index: 1;
+    transition: all 0.2s;
+}
+
+.ant-menu .ant-menu-sub .ant-menu-inline{
+    & :hover{
+        background: #e06b62;
+    }
+    
+}

src/style/components/auth.scss

@@ -1,9 +1,8 @@
-$color: #FD7F71;
-
 h1, .input::-webkit-input-placeholder, .button {
   font-family: 'roboto', sans-serif;
   transition: all 0.3s ease-in-out;
 }
+
 h1 {
   height: 100px;
   width: 100%;
@@ -14,6 +13,7 @@ h1 {
   border-radius: 3px 3px 0 0;
   box-shadow: 0 2px 5px 1px rgba(0,0,0,0.2);
 }
+
 .form {
   box-sizing: border-box;
   width: 460px;
@@ -21,10 +21,8 @@ h1 {
   box-shadow: 2px 2px 5px 1px rgba(0,0,0,0.2);
   padding-bottom: 40px;
   border-radius: 3px;
-
-
-
 }
+
 .input {
   margin: 20px 25px;
   width: 80%;
@@ -67,43 +65,32 @@ h1 {
     box-shadow: 0 6px 6px 0 rgba(0,0,0,0.2);
   }
 }
-.allStaffs{
+// .allStaffs{
   
-  max-width: 1500px;
-   display: flex;
-    flex-wrap: wrap;
-    justify-content: center;
-    align-items: center;
-    align-content: center;
-}
-.staffs{
-  max-width: 1500px;
-  display: flex;
-    flex-wrap: wrap;
-    justify-content: center;
-    align-items: center;
-    align-content: center;
+//   max-width: 1500px;
+//    display: flex;
+//     flex-wrap: wrap;
+//     justify-content: center;
+//     align-items: center;
+//     align-content: center;
+// }
+// .staffs{
+//   max-width: 1500px;
+//   display: flex;
+//     flex-wrap: wrap;
+//     justify-content: center;
+//     align-items: center;
+//     align-content: center;
     
-}
-.staff{
-   width: 350px;
+// }
+// .staff{
+//    width: 350px;
    
-}
+// }
 .main{
   display: flex;
 }
-.loader{
-  position: fixed;
-  bottom: 0;
-  left: 50%;
-  right: 0;
-  top: 50%;
-  height: 100%;
-  width: 100%;
-  z-index: 9999;
-  
-   
-}
+
 .sider{
   background-color: #FD7F71
 }
@@ -129,6 +116,3 @@ h1 {
     padding-bottom: 10px;
     padding-top: 10px;
 }
-.ant-layout-sider-children{
-  background: #FD7F71;
-}

src/style/components/searchLine.scss

@@ -1,93 +0,0 @@
-$color: #FD7F71;
-$background: #F7FBFB;
-$background-2: #EAF5F5;
-$background-3: #BBD8D8;
-$primary: #FD7F71;
-$white: #fff;
-$breakpoint: 768px;
-.searchInput::-webkit-input-placeholder, .button {
-    font-family: 'roboto', sans-serif;
-    transition: all 0.3s ease-in-out;
-  }
-  
-.searchInput{   
-margin: 40px 25px;
-width: 75%;
-display: block;
-border: none;
-padding: 10px 0;
-border-bottom: solid 1px $color;
-transition: all 0.3s cubic-bezier(.64,.09,.08,1);
-background: linear-gradient(to bottom, rgba(255,255,255,0) 96%, $color 4%);
-background-position: -700px 0;
-background-size: 700px 100%;
-background-repeat: no-repeat;
-color: darken($color,1%);
-&:focus {
-  box-shadow: none;
-  outline: none;
-  background-position: 0 0;
-  &::-webkit-input-placeholder {
-    text-indent: 700px; transition: text-indent 0.5s ease;
-  }
-}
-}
-.searchBtn{
-    border:none;
-    outline: none;
-    border: 0px;
-    cursor: pointer;
-  color: $primary;
-  transition: .3s ease-out;
-  
-  &:hover,
-  &:focus { 
-    transform: scale(1.125);
-    
-    .icon {
-      transform: scale(1.25); } } 
-        // Display/alignment
-        display: flex;
-        justify-content: center;
-        align-items: center;
-        align-content: center;
-        
-        // Sizing
-        width: 68px;
-        height: 68px;
-        border-radius: 34px;
-        
-        // Style
-        background-color: $white;
-        box-shadow:
-          0 1px 1px rgba($background-3, .6),
-          0 3px 3px rgba($background-3, .4),
-          0 8px 16px rgba($background-3, .3);
-        
-        &:hover,
-        &:focus {
-          box-shadow:
-            0 2px 2px rgba($background-3, .4),
-            0 4px 4px rgba($background-3, .3),
-            0 12px 32px rgba($background-3, .3); } 
-  }
-
-  .fill-currentcolor {
-    fill: currentcolor; }
-  
-  .fill-none {
-    fill: none; }
-
-    .icon {
-        width: 24px;
-        height: 24px;
-        transition: .3s ease-out;
-        
-        @media (min-width: $breakpoint) {
-          width: 32px;
-          height: 32px; } }
-          
-          
-         
-          
-        

src/style/index.scss

@@ -1,47 +1,16 @@
-
 @import "~antd/dist/antd.css";
 
 @import "abstracts/variables.scss";
 
 @import "base/base";
-@import "base/typography";
 
 @import "layout/container";
 
 @import "components/header";
-@import "components/formLogin";
 @import "components/allStaff";
+@import "components/leftMenu";
+// @import "components/formLogin";
+@import "components/form";
 
-@import './components/auth.scss';
-@import './components/searchLine.scss'
-
-
-// *, *:before, *:after{
-//   box-sizing:border-box; 
-// }
-
-// body{
-//     max-width: 1400px;
-//     min-width: 300px;
-//     width: 100%;
-// 	font-size: 20px;
-//     margin: 0 auto ;
-//     background-color: aqua;
-//     // background-image: url("../img/pngtree-Analog-Clock-Clock-Timepiece-Time-photo-484074.jpg");
-//     // background-color: #cccccc; /* Used if the image is unavailable */
-//     // height: 500px; /* You must set a specified height */
-//     // background-position: center; /* Center the image */
-//     // background-repeat: no-repeat; /* Do not repeat the image */
-//     // background-size: cover; 
-// }
-
-// .contentDiv{
-//     display: flex;   
-// }
-
-// .content{
-//     width: 80%;
-//     display: flex;
-//     flex-wrap: wrap;
-// }
+// @import './components/auth.scss';