class Page extends React.Component {
    constructor(props) {
        super(props);
        this.state = {
            username: this.props.username,
            password: ''
        };
    }

    handleSubmit(e) {
        this.setState({
            username: e.target.username.value,
            password: e.target.password.value
        });
    }

    handleLogout() {
        this.setState({username: ''});
    }

    render() {
        const username = this.state.username;
        return (
            <div>
                <Header username={username} onLogout={() => this.handleLogout()}/>
                {!username && <LoginForm onSubmit={e => this.handleSubmit(e)}/>}
            </div>
        );
    }
}

class Header extends React.Component {
    render() {
        const username = this.props.username;
        return (
            <div className="Header">
                {username ? (
                    <div>
                        <button>{username}</button>
                        <button onClick={this.props.onLogout}>Logout</button>
                    </div>
                ) : (
                    <div>
                        <button>Login</button>
                        <button>Register</button>
                    </div>
                )}
            </div>
        );
    }
}

class LoginForm extends React.Component {
    handleSubmit(e) {
        this.props.onSubmit(e);
        e.preventDefault();
    }

    render() {
        return (
            <form onSubmit={e => this.handleSubmit(e)} className="LoginForm">
                <label>
                    Username:
                    <input type="text" name="username"/>
                </label>
                <label>
                    Password:
                    <input type="password" name="password"/>
                </label>
                <input type="submit" value="Submit"/>
            </form>
        );
    }
}