import React, { Component } from 'react';
import {withRouter} from 'react-router';
export class Login extends Component {
	constructor(props) {
		super(props);
		this.handleSubmit = this.handleSubmit.bind(this);
	}
	handleSubmit (e) {
		e.preventDefault();
		let auth = this.props.auth;
	    var username,password;
	    username=$("#name").val();
	    password=$("#pass").val();
	    if(username === '' || password === ''){
	      $('#usernameNotification').show();
	      $('#passwordNotification').show();
	      return;
	    }
	    $('#usernameNotification').hide();
	    $('#passwordNotification').hide();
	    $("#loadingImage").show();
	    $("#send" ).attr( "disabled", true );
	    auth.login(
	      $("#username").val(),
	      $("#password").val(),
	      function( response ) {
	      	if (response.hasOwnProperty('status') && response.status === 'NOT_OK') {
	      		$("#loadingImage").hide();
	      		$('#invalidCredentials').show();
	      		$("#send" ).removeAttr( "disabled" );
	      		return;
	      	}
	        let accessToken = response.accessToken;
	        document.cookie="access_token="+ accessToken;
	        $("#logout").show();
	        $("#loadingImage").hide();
	        $("#send" ).attr( "disabled", false );
	        // alert('sample');
	        /*window.location.assign('#/courses');*/
	        this.props.router.push('/labs');
	      }.bind(this),
	      function() {
	        $('#invalidCredentials').show();
	        $("#send" ).attr( "disabled", false );
	        setTimeout(function(){
	          $('#invalidCredentials').hide();
	        }, 5000);
	        $("#loadingImage").hide();
	      }
	    );
	}
	render() {
		return (
			<div className="row">
	    		<div className="col-xs-12 col-sm-6 col-sm-offset-3 col-md-4 col-md-offset-4 login-container">
			    	<h2 className="text-center">Sign in to your account</h2>
		    		<div className="panel panel-default">
					  	<div className="panel-body">
							<div className="login-with-mobile">
								<form role="form" id="login" onSubmit={this.handleSubmit} noValidate>
									<div className="form-group">
										<label for="name" style={{marginTop: '20px'}}>USER ID</label>
										<div id="mobile-number">
											<input type="text" className="form-control" name='username' id="username" required/>
										  	<p id="usernameNotification" hidden style={{color:'red'}}>Please enter valid username</p>
			              				</div>
									</div>
									<div className="form-group" id="otp">
										<label for="pass">PIN</label>
										<input type="password" id="password" name="" className="form-control" required/>
			              				<p id="passwordNotification" hidden style={{color:'red'}}>Please enter valid password</p>
									</div>
			            			<br/>
									<button type="submit" id="send" className="btn btn-primary btn-custom-solid center-block">
										Submit <img id="loadingImage" src='/images/Loading.png' hidden/>
									</button>
									<br/>
			            			<p id='invalidCredentials' className='text-danger text-center' hidden>Invalid credentials</p>
		            			</form>
							</div>
						</div>
					</div>
				</div>
			</div>
		);
	}
}

export default withRouter(Login);
