HomeWork1/React/CodePen/src/pages/login.js

import { connect } 		     from "react-redux";
import { useState }        from "react";
import { actionFullLogin } from "../actions/actionFullLogin";
import { Redirect }        from "react-router";

const Log = ({ onLog, LogedIn }) => {
    const [login, setLogin]       = useState("");
    const [password, setPassword] = useState("");
    return LogedIn ? (
        <Redirect to ="/"/>
    ) : (
      <>
          <div className="container" >
            <div className='row'>
              <div className="mainbox col-md-6 col-md-offset-3 col-sm-8 col-sm-offset-2" id="loginbox" style={{marginTop: "120px"}} >
                  <div className="panel panel-info" style={{boxShadow:'0px 5px 10px 2px rgba(34, 60, 80, 0.5)'}}>

                      <div className="panel-heading">
                          <div className="panel-title">Login</div>
                      </div>

                      <div className="input-group" style={{paddingTop: "30px"}}>
                          <form className="form-horizontal" id="loginform" role="form">
                              <div className="input-group" style={{"marginBottom": "25px"}} >
                                  <input className="form-control" 
                                         type="text" 
                                         name="username"
                                         value={login} 
                                         placeholder="Login" 
                                         onChange={(e) => { console.log(e.target.value); setLogin(e.target.value) && <Redirect to ="/"/>}} 
                                  />
                              </div>

                              <div className="input-group" style={{marginBottom: "25px"}} >
                                  <span className="input-group-addon">
                                    <i className="glyphicon glyphicon-lock"></i>
                                  </span>
                                  <input className="form-control" 
                                         id="login-password" 
                                         type="password" 
                                         name="password" 
                                         placeholder="Password" 
                                         value={password}
                                         onChange={(e) => setPassword(e.target.value)}
                                  />
                              </div>

                              <div className="form-row text-center" style={{marginTop: "10px", paddingLeft: '35%'}}>
                                  <div type="button" class="btn btn-success col-md-6">
                                      <a href="#" id="btn-login" onClick={() => onLog(login, password)} style={{textDecoration: 'none', color: 'Black'}}>
                                          Log in
                                      </a>
                                  </div>
                              </div>
                              <div className="form-row text-center">
                                  <div className=" col-md-12 control">
                                      <div style={{"border-top": "1px solid#888","padding-top": "15px","font-size": "85%"}}>
                                          <span>if you are not registered click here &rArr;</span>&nbsp; &nbsp;<a href="/registration">Registration</a>
                                      </div>
                                  </div>
                              </div>
                          </form>
                      </div>
                  </div>
              </div>
            </div>
          </div>
      </>
    );
};

export const LogForm = connect((state) => ({ LogedIn: state?.auth?.token }), {onLog: actionFullLogin})(Log);