LoginBox.js

import React from 'react';
import './styles/LoginBox.css';
import './styles/bootstrap-social.css';

class LoginBox extends React.Component {

    handleSignIn(e) {
        e.preventDefault();
        let username = this.refs.username.value;
        let password = this.refs.password.value;
        this.props.onSignIn(username, password);
    }

    handleGoogleSignIn(e) {
        e.preventDefault();
        this.props.onGoogleSignIn();
    }

    render() {
        return (
            <div className="middlePage">
                <div className="panel panel-info">
                    <div className="panel-heading">
                        <h3 className="panel-title">Sign In</h3>
                    </div>
                    <div className="panel-body">
                        <div className="row">
                            <div className="col-md-5">
                                <a href="javascript:;" className='btn btn-block btn-social btn-facebook'>
                                    <span className='fa fa-facebook'></span> Sign in with Facebook
                                </a>
                                <a href="javascript:;" className='btn btn-block btn-social btn-twitter'>
                                    <span className='fa fa-twitter'></span> Sign in with Twitter
                                </a>
                                <a href="javascript:;" onClick={this.handleGoogleSignIn.bind(this)} className='btn btn-block btn-social btn-google'>
                                    <span className='fa fa-google'></span> Sign in with Google
                                </a>
                                <a href="javascript:;" className='btn btn-block btn-social btn-github'>
                                    <span className='fa fa-github'></span> Sign in with GitHub
                                </a>
                            </div>
                            <div className="col-md-7 loginbox">
                                <form className="form-horizontal" onSubmit={this.handleSignIn.bind(this)}>
                                    <fieldset>
                                        <input id="textinput" name="textinput" type="text" ref="email" placeholder="E-Mail Address" className="form-control input-md" />
                                        <div className="spacing">
                                            <input type="checkbox" name="checkboxes" id="checkboxes-0" value="1" />
                                            <small> Remember me</small>
                                        </div>
                                        <input id="textinput" name="textinput" type="password" ref="password" placeholder="Password" className="form-control input-md" />
                                        <div className="spacing">
                                            <a href="#"><small> Forgot Password?</small></a><br />
                                            <a href="#"><small> Register</small></a><br />
                                        </div>
                                        <button id="singlebutton" name="singlebutton" className="btn btn-info btn-sm pull-right">Sign In</button>
                                    </fieldset>
                                </form>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        )
    }
}

export default LoginBox