player-project/src/components/Login/index.js

import * as action from '../../actions'

import { useEffect, useState } from 'react';
import { connect } from 'react-redux';
import { Link } from 'react-router-dom';
import { history } from '../../App';

const RegisterForm = ({ onRegister, regData }) => {
  let [login, setLogin] = useState()
  let [password, setPassword] = useState()
  let [password2, setPassword2] = useState()
  let [data, setData] = useState()
  let [isReg, setIsReg] = useState(false)

  useEffect(() => {
    setData(regData)
  }, [regData, data])

  return (
    <>
      <h1>Web-player</h1>
      <div className='forms'>
        <h2 className='highlightYellow'>Registration</h2>
        <input className='forms__input' type="text" placeholder='Login' onChange={(e) => setLogin(e.target.value)} />
        <input className='forms__input' type="password" placeholder='Password' onChange={(e) => setPassword(e.target.value)} />
        <input 
          className='forms__input'
          disabled={!password || password.length < 8} type="password" placeholder='Repeat Password *' 
          onChange={(e) => setPassword2(e.target.value)} 
        />
        <small style={{ color: 'red' }}>{password2 && password2 !== password ? 'Passwords do not match' : ''}</small>
        <br />
        {data?.payload && isReg? <small className='highlightGreen'>User {data.payload.login} successfully registered!</small> : 
                        <button 
                          className='forms__button highlightYellow' 
                          disabled={!password || !login || password2 !== password} 
                          onClick={() => {onRegister(login, password); setIsReg(true)}}
                        >Register</button>}
        <br />
        <Link className='forms__link highlightYellow' to="/login">Back to log-in page</Link>
      </div>
    </>
  )
}
export const RegisterFormConnect = connect(state => ({regData: state.promise.registration || {}}), { onRegister: action.actionRegister })(RegisterForm)

const LoginForm = ({ loged, onLogin }) => {
  let [login, setLogin] = useState()
  let [password, setPassword] = useState()
  let [log, setLog] = useState()

  useEffect(() => {
    setLog(loged)
    if (log?.payload && localStorage.authToken) history.push('/player')
  }, [loged, log])

  return (
    <>
      <h1>Web-player</h1>
      <div className='forms'>
        <h2 className='highlightYellow'>Log-in</h2>
        <input className='forms__input' type="text" placeholder='Login' onChange={(e) => setLogin(e.target.value)} />
        <input className='forms__input' type="password" placeholder='Password' onChange={(e) => setPassword(e.target.value)} />
        <small style={{ color: 'red' }}>
          {loged.status === 'REJECTED' || (loged.status === 'RESOLVED' && !loged.payload)? 'invalid login or password' : ''}
        </small>
        <br />
        <button
          className='forms__button highlightGreen'
          disabled={!password || !login}
          onClick={() => { onLogin(login, password) }}
        >Login</button>
        <p>- OR -</p>
        <Link className='forms__link highlightYellow' to="/registration">Register new user</Link>
      </div>
    </>
  )
}
export const LoginFormConnect = connect(state => ({ loged: state.promise.login || {} }), { onLogin: action.actionFullLogin })(LoginForm)