HomeWork1/React/CodePen/src/components/routes.js

import React from "react";
import createHistory from "history/createBrowserHistory";
import {connect} from "react-redux";
import RegForm from "../pages/reg";
import {LogForm} from "../pages/login";
import Home from "../pages/homePage";
import ConnectCabinet from "../pages/cabinet";
import Search from "../pages/search";
import ConnectedPrivateRoute from "./privateRoute";
import {Redirect} from "react-router";
import {useEffect, useState, useRef} from "react";
import {BrowserRouter as Router, Switch, Route} from "react-router-dom";
import ChangePass from "../pages/changePass";
import Project from "../pages/project";
import CProjects from "../pages/projects";


const LoginForm = ({onLogin}) =>{
  const [login, setLogin] = useState(''); //braunvlad4
  const [pass, setPass] = useState('');   //123
  return( 
    <div className='LoginForm'>
      <input value={login} style={{backgroundColor: login.length>0 ? 'green' : 'red'}} 
            placeholder='your login' onChange={e=>setLogin(e.target.value)} />
      <input value={pass} style={{backgroundColor: pass.length>0 ? 'green' : 'red'}} 
            placeholder='your pass' onChange={e=>setPass(e.target.value)} />
      <button onClick={()=>onLogin(login,pass)} disabled={(login.length!==0 && pass.length!==0)?false:true }>Send</button>
    </div>
  )
}

const Routes = ({ isAuth }) => {
  return (
    <div className="App">
      <div className="contentDiv">
            <Switch>
                <ConnectedPrivateRoute exact path="/" roles = {['user']} component={Home} />
                <ConnectedPrivateRoute path="/cabinet" roles = {['user']} component={ConnectCabinet} />
                <ConnectedPrivateRoute path="/search" roles = {['user']} component={Search} />
                <ConnectedPrivateRoute path="/changePass" roles={['user']} component={ChangePass} />
                <ConnectedPrivateRoute path="/projects" roles = {['user']} component={CProjects} />
                <ConnectedPrivateRoute path="/login" roles = {['unknown']} component={LogForm} /> 
                <ConnectedPrivateRoute path="/registration" roles = {['unknown']} component={RegForm} />
                <ConnectedPrivateRoute path="/project" roles = {['user']} component={Project} />
            </Switch>
      </div>
    </div>
  );
};

export default Routes