//Login -ui
var Login = React.createClass({
    getInitialState: ()=> {
        console.log("Login getInitialState");
        return {
            username: '',
            password: ''
        }
    },
    handleUsernameOnChange: function (e) {
        this.setState({username: e.target.value});
    }, handlePasswordOnChange: function (e) {
        this.setState({password: e.target.value});
    }, handleSubmit: function (e) {
        e.target.action = 'app.html';
        e.target.method = 'get';
        this.props.service.login(this.state.username, this.state.password)
            .then(json=> {
                console.log("should go to next page");
            })
            .catch(error=> {
                console.error(error);
                alert('Invalid username or password');
            });
    }, render: function () {
        return (
            <div style={{padding:100}}>
                <center>
                    <form onSubmit={this.handleSubmit}>
                        <input type="text" placeholder="Username" value={this.state.username}
                               onChange={this.handleUsernameOnChange}/>
                        <br/>
                        <input type="password" placeholder="Password" value={this.state.password}
                               onChange={this.handlePasswordOnChange}/>
                        <br/>
                        <input type="submit" value="Login"/>
                    </form>
                </center>
            </div>
        );
    }
});
var service = function () {
    var url = "http://localhost:8080/api/login";
    //var url = "http://192.168.0.101:8080/api/login";
    return {
        login: (username, password)=> {
            console.log("called login");
            var req = {method: 'GET'};
            req.headers = new Headers({
                'Content-Type': 'application/json',
                Authorization: " Basic " + btoa(username + ":" + password)
            });
            //return a promise
            return fetch(url, req).then(res=> {
                if (res.ok) {
                    console.log("managed to login");
                    return res.json();
                } else {
                    console.log("error at login");
                    throw new Error(res.status);
                }
            });
        }
    }
}();
ReactDOM.render(
    <Login service={service}/>,
    document.getElementById('login')
);