import React from "react";
import {Header} from './Header';
export class Login extends React.Component{

constructor() {
 super();
 this.state = { user: {} };
 this.onSubmit = this.handleSubmit.bind(this);
}
handleSubmit(e) {
 e.preventDefault();
 //const proxyurl = "https://cors-anywhere.herokuapp.com/";
 var self = this;
 // On submit of the form, send a POST request with the data to the server.
 fetch('http://localhost:3000/login', {
     method: 'POST',
     body: {
       name: self.refs.name,
       job: self.refs.job
     }
   })
   .then(function(response) {
     return response.json()
   }).then(function(body) {
     console.log(body);
   });
}

render(){
return(
  <div>


  <div id="fm">
  <form onSubmit={this.onSubmit} >
    <div >
    <label>
      Username:
      <input id="uname" type="text" placeholder="Name" ref="name"/>
    </label>
    </div>
    <div >
    <label>
      Password:
      <input id="upass" type="password" placeholder="Jo b" ref="job"/>
    </label>
    </div>
    <input id="sub" type="submit" value="Submit" />
  </form>
  </div>
  </div>
);
}
}

var mysql = require('mysql');
var express = require('express');
var app = express();

var con = mysql.createConnection({
host: "localhost",
user: "root",
password: "",
database: "react"
});

con.connect(function(err) {
if (err) throw err;
console.log("Connected!");
//var sql = "INSERT INTO users (name, job) VALUES ('e211', 'Highway 37')";
//con.query(sql, function (err, result) {
//if (err) throw err;
//console.log("1 record inserted");
//});
});

app.post('/login', function(req, res) {
// Get sent data.
var user = req.body;
// Do a MySQL query.
var query = con.query('INSERT INTO users SET ?', user, function(err, result)
{
// Neat!
});
res.end('Success');
});


app.listen(3000, function() {
console.log('Example app listening on port 3000!');
});