import * as React from 'react';
import {
    Button,
    FormGroup,
    Input,
    Label
} from 'reactstrap';
import {observer} from 'mobx-react';

@observer
export class LoginForm extends React.Component {
    form: any;
    username: any;
    password: any;
    OnLogin (){
      console.log("username:",this.username);
      console.log("username value:",this.username.value);
    }
    render(){
        return (
            <form className="form" ref={(form:any)=>{this.form = form}}>
                <FormGroup>
                    <Label>Sign In</Label>
                    <Input type="text" name="username" ref={(username:any)=>{this.username = username}} id="username" placeholder="enter your username"/>
                    <Input type="password" name="password" ref={(password:any)=>{this.password = password}} id="password" placeholder="enter your password"/>
                    <Button color="primary" onClick={this.OnLogin.bind(this)}>{"Login"}</Button>{' '}
                </FormGroup>
            </form>
        )
    }
}

OnLogin (){
  let formData: any = new FormData(form);
  console.log(formData.fd.get('upload_for'));
  console.log("username:",formData.fd.get('username'));
}