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

import { Link } 			from "react-router-dom";
import { connect } 			from "react-redux";
import { useState } 		from "react";
import { actionChangePass } from "../actions/actionChangePassword";

const ChangePass = ({onChangePass}) => {
	const [log, setLog] 		= useState('')
	const [pass, setPass] 		= useState('')
	const [newPass, setNewPass] = useState('')
	//console.log(onChangePass);
	return (
		<>
			<Link to="/">
	        	<button className="float-left btn-secondary d-inline-block mt-2 ml-2">
	          		<span>&#8617;</span>Back to Main Page
	        	</button>
	      	</Link>
	      	<br/>
	      	<br/>
	      	<div className="container">
	      		<div style ={{textAlign: "center" , alignItems:"center", justifyContent:'center', marginTop: "70px"}}>
	      			<p>
	      				<input className="form-control text-center" 
	      					   value={log} 
	      					   placeholder='your login' 
	      					   onChange={(e) => setLog(e.target.value)}
	      					   style={{borderColor: log.length > 0 ? 'green' : 'red'}}
	      				/>
	      			</p>
	      			<p>
	      				<input className="form-control text-center" 
	      					   value={pass} 
	      					   placeholder='your old password' 
	      					   onChange={(e) => setPass(e.target.value)}
	      					   style={{borderColor: pass.length > 0 ? 'green' : 'red'}} 
	      				/>
	      			</p>
	      			<p>
	      				<input className="form-control col-md-6 text-center" 
	      					   placeholder='your new password' 
	      					   style={{borderColor: pass.length > 0 ? 'green' : 'red'}}
		      				   onChange={(e) => {setNewPass(e.target.value)}} 
		      			/>
	      			</p>
	      			<p>
	      				<button class="btn btn-success text-center" 
	      						onClick={() => onChangePass(log, pass, newPass)} 
	      						disabled={(log.length!==0 && pass.length!==0 && newPass!==0) ? false : true}>
	      					Сменить пароль
	      				</button>
	      			</p>
	      		</div>
	      	</div>
	    </>
	)
};

const CChangePass = connect(state=>({}),{onChangePass: actionChangePass})(ChangePass)

export default CChangePass;