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 id="loginbox" style={{marginTop: "120px", border:"1px solid black"}} className="">
          <div >
            <div>
              <div style={{backgroundColor:'pink'}}>Авторизация</div>
            </div>

            <div style={{ paddingTop: "30px" }}>
              <div style={{ display: "none" }}></div>

              <form id="loginform" className="form-horizontal" role="form">
                <div style={{ "marginBottom": "25px" }} className="input-group">
                  <span className="">
                    <i className=""></i>
                  </span>
                  <input id="login-username" type="text" className="form-control" 
                      name="username" value={login} placeholder="Login"
                      onChange={ e =>{
                          console.log(e.target.value)
                          setLogin(e.target.value) && <Redirect to ="/"/>
                        } 
                      } 
                  />
                </div>
                <div style={{ marginBottom: "25px" }} className="input-group">
                  <span className="">
                    <i className=""></i>
                  </span>
                  <input id="login-password" type="password" className="form-control"
                    name="password" placeholder="Password" value={password}
                  onChange={(e) => setPassword(e.target.value)}
                  />
                </div>
                <div style={{ marginTop: "10px" }} className="form-group">
                  <div className="">
                    <a id="btn-login" href="#" onClick={() => onLog(login, password)}>
                      Войти
                    </a>
                  </div>
                </div>
                <div className="form-group">
                  <div>
                    <div style={{borderTop: "1px solid#888",paddingTop: "15px",fontSize: "85%",}}>
                      <a href="/registration">Зарегестрироваться</a>
                    </div>
                  </div>
                </div>
              </form>
            </div>
          </div>
        </div>
      </div>
    </>
  );
};

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