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

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

const Reg = ({ onReg, LogedIn }) => {
    const [login, setLogin]       = useState("");
    const [password, setPassword] = useState("");
    return (
      <>
        <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" style={{backgroundColor:'pink'}}>
                            <div className="panel-title">Registration</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"
                                           id="login-username" 
                                           type="text"  
                                           name="username"
                                           value={login} 
                                           placeholder="Login"
                                           onChange={(e) => setLogin(e.target.value)} 
                                    />
                                </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={() => onReg(login, password)} style={{textDecoration: 'none', color: 'white'}}>
                                            Register
                                        </a>
                                    </div>
                                </div>

                                <div className="form-row text-center">
                                    <div className=" col-md-12 control">
                                        <div style={{borderTop: "1px solid#888",paddingTop: "15px",fontSize: "85%"}}>
                                            <span>if you are registered click here &rArr;</span> &nbsp; &nbsp;<a href="/login" >Log in</a>
                                        </div>
                                    </div>
                                </div>
                            </form>
                        </div>
                    </div>
                </div>
            </div>
        </div>
      </>
    );
};

const RegForm = connect((state) => ({ LogedIn: state?.auth?.token }), {onReg: actionFullRegister,})(Reg);

export default RegForm;