export default class Credentials extends Component {
    constructor(props) {
        super(props);

        this.state = {
            username: '',
            password: ''
        };
    }

    onUsernameChange(text) {
        this.setState({username: text});
    }

    onPasswordChange(text) {
        this.setState({password: text});
    }

    onSubmit() {
        this.props.onSetCredentials(this.state);
    }

    render() {
        return (
            <div className="container">
                    <div className="form-group">
                        <label htmlFor="username">Username: </label>
                        <input
                            type="text"
                            name="username"
                            value={this.state.username}
                            onChange={event => this.onUsernameChange(event.target.value)} />
                        <label htmlFor="password">Password: </label>
                        <input
                            name="password"
                            type="password"
                            value={this.state.password}
                            onChange={event => this.onPasswordChange(event.target.value)} />
                        <button className="btn-primary pull-xs-right" onClick={this.onSubmit.bind(this)}>
                            Save Credentials
                        </button>
                    </div>
            </div>
        )
    }
}