rstarter-supporthq/src/General/Login.js

import React from 'react';
import TextBox from './TextBox';
import Button from './Button';

export default class Login extends React.Component{
    constructor(props) {
        super(props);
        this.login = this.login.bind(this);
        this.state={
            username:"",
            password:"",
        }
        this.onChangeUsername = this.onChangeUsername.bind(this);
        this.onChangePassword = this.onChangePassword.bind(this);
        this.login = this.login.bind(this);

    }

    login(){
        const {username,password}=this.state;
        this.props.onLogin(username,password);
    }
    onChangeUsername(e){
        this.setState({username:e.target.value});
    }
    onChangePassword(e){
        this.setState({password:e.target.value});
    }


    render() {
        return (
            <div className={"row"}>
                <div className={"col-md-4 offset-md-4 "}>
                   <div style={{marginTop:"30vh",marginLeft:"10%"}}>
                       <div style={{marginRight:"10%",padding:"8%",background:"rgb(239, 244, 255)"}}>
                           <TextBox placeHolder={"username"} onChange={this.onChangeUsername}/>
                           <input type={"password"}  placeholder={"password"} className={"form-control"} style={{marginTop:"8px"}} onChange={this.onChangePassword}/>
                           <br/><Button name={"login"} className={"btn btn-md btn-primary float-right"} onClick={this.login}/>
                           <p className={"clearfix"}></p>
                       </div>
                   </div>
                </div>
            </div>
        );
    }


}