music-player/src/pages/header.js

import logo from "../logo.svg";
import {useState} from 'react'
import {connect} from 'react-redux';
import {actionAuthLogout, actionFullReg, actionFullLogin} from "../reducers"
import {history} from "../reducers";
import {Route, Link, Switch} from 'react-router-dom';

export const Logo = () =>
<Link to='/'><img src={logo} className="App-logo" alt="logo" /></Link>

export const Header = () =>
    <header className="Header">
        <Logo />
        <Switch>
            <Route path="/login" component={CLoginForm}/>
            <Route path="/registration" component={CRegForm}/>
            <Route path='*' component={CLoginButtons} />
        </Switch>
    </header>

const LoginButtons = ({onLogout, history, token}) => {

    return (
        <>
            {!token ?
                ( <div className='LoginButtons'>
                    <Link to='/login'><button onClick={() => history.push('/')}>Вход</button></Link>
                    <Link to='/registration'><button>Регистрация</button></Link></div>) :
                (<div className='LoginColumn'><strong>{JSON.parse(atob(token.split(".")[1])).sub.login}
                </strong>
                    <button onClick={() => {onLogout(); history.push('/')}}>Выйти</button></div>)
            }
        </>
    )
}
const CLoginButtons = connect(state => ({token: state.auth.token}), {onLogout: actionAuthLogout})(LoginButtons)

const LoginForm = ({onLogin, history}) => {
    const [l, setL] = useState ('')
    const [p, setP] = useState ('')



    return (
        <div className='LoginColumn'>
            <input placeholder='Введите имя' style={{backgroundColor:"skyblue"}} onChange={e => setL(e.target.value)}></input>
            <input type='password' placeholder='Введите пароль' style={{backgroundColor:"skyblue"}} onChange={e => setP(e.target.value)}></input>
            <button onClick={() => {onLogin(l,p); history.push('/')}}>Войти</button>
        </div>
    )
}

const CLoginForm = connect (null,{onLogin: actionFullLogin})(LoginForm)

const RegForm = ({ onReg }) => {
    const [l, setL] = useState("");
    const [p, setP] = useState("");
    const [p2, setP2] = useState('')

    return (
        <div className='LoginButtons'>

            <div className='RegColumn'>
                         <input placeholder='Введите имя'
                                style={{ backgroundColor: "skyblue" }}
                                onChange={(e) => setL(e.target.value)}></input>

                         <input placeholder='Введите пароль'
                                style={{ backgroundColor: "skyblue" }}
                                onChange={(e) => setP(e.target.value)}></input>
            <div>{p.length < 6 ? 'Короткий пароль' : 'Хороший пароль'}</div>
            </div>
            <div className='RegColumn'>
            <button disabled={p.length >= 6 && p === p2 && l !== "" ? false : true} onClick={() => {onReg(l, p); history.push('/')}}>Регистрация</button>
                         <input placeholder='Подтвердите пароль'
                                style={{ backgroundColor: "skyblue" }}
                                onChange={(e) => setP2(e.target.value)}></input>
            <div>{p === p2 ? 'Пароли совпадают' : 'Пароли не совпадают'}</div>
            </div>
        </div>
    );
};

const CRegForm = connect(null,{onReg: actionFullReg}) (RegForm)