class Login extends React.Component {

constructor(props) {
    super(props);
    this.handleSubmit = this.handleSubmit.bind(this);
}

handleSubmit(event) {
    event.preventDefault();
    const data = new FormData(event.target);

    const email = data.get('email');
    const password = data.get('password');

    fetch('http://localhost:3000/authentication', {
        method: 'POST',
        headers: {
          "Content-Type": "application/json"
        },
        body: JSON.stringify({
            "email": email,
            "password": password
        }),
    }).then(function (response) {
        if (response.ok) {
            alert("Login Successful!");
        } else {
            console.log("Failed");
        }
    });
    console.log("Email: " + email);
    console.log("pwd: " + password);
}

render() {
    return (
        <form className="col s12 m12 l12" onSubmit={this.handleSubmit}>
            <div className="row">
                <div className="col s12 center-align">
                    <img className="logo" src="images/bibdata-center.png" alt="BibData Logo"/>
                </div>
                <div className="input-field col s12">
                    <i className="material-icons prefix">email</i>
                    <input id="email" name="email" type="email" className="validate" onChange={this.handleEmailChange}/>
                    <label htmlFor="email">Email</label>
                </div>
            </div>
            <div className="row">
                <div className="input-field col s12">
                    <i className="material-icons prefix">lock</i>
                    <input id="password" name="password" type="password" className="validate" onChange={this.handlePasswordChange}/>
                    <label htmlFor="password">Password</label>
                </div>
            </div>
            <div className="row">
                <div className="col s12 m6 l6 center-align">
                    <button className="btn waves-effect btn-large waves-light" type="submit" value="Submit" name="action">Sign in
                        <i className="material-icons right">send</i>
                    </button>
                </div>
                <div className="col s12 m6 l6 center-align">
                    <button className="btn waves-effect btn-large waves-light blue" type="submit" name="action"
                            onClick={() => renderReactComponent(newUser, 'root')}>
                        Register
                    </button>
                </div>
            </div>
            <div className="row">
                <div className="col s12 center-align">
                    <a href="#" onClick={() => renderReactComponent(forgotPassword, 'root')}>
                        <span className="helper-text grey-text text-darken-1"
                              data-error="wrong" data-success="right">
                            Forgot password?
                        </span>
                    </a>
                </div>
            </div>
        </form>
    );
}
}

const createError = require('http-errors');
const express = require('express');
const path = require('path');
const mysql = require('mysql');
const cookieParser = require('cookie-parser');
const logger = require('morgan');

const indexRouter = require('./routes/index');
const loginRouter = require('./routes/login');
const adminRouter = require('./routes/admin');
const usersRouter = require('./routes/users');

const app = express();
const port = process.env.PORT || 5000;

// Create a connection to database
const connection = mysql.createConnection({
    host: 'localhost',
    user: 'root',
    password: '',
    database: 'test'
});
global.connection = connection;

// view engine setup
app.set('views', path.join(__dirname, 'views'));
app.set('view engine', 'jade');

app.use(logger('dev'));
app.use(express.json());
app.use(express.urlencoded({ extended: false }));

app.use('/', indexRouter);
app.use('/login', loginRouter);
app.use('/users', usersRouter);
app.use('/admin', adminRouter);

app.post('/authentication', function (req, res) {
    let email = req.body.email;
    let password = req.body.password;

    console.log(email);
    console.log(password);

    connection.query('SELECT email, password FROM user WHERE email = ? AND password = ?',[email, password], function (error, results) {
        if (error) {
            return res.status(400).send(error);
        }
        if (results.length > 0) {
            return res.send({ error: false, data: results, message: 'ok'})
        } else {
            return res.status(400).send(error);
        }
    });
});

app.post('/newuser', function (req, res) {
    let user = {
        "first_name":req.body.first_name,
        "last_name":req.body.last_name,
        "email":req.body.email,
        "password":req.body.password,
        "address": req.body.address,
        "phone": req.body.phone
    };
    connection.query('INSERT INTO user SET ?',user, function (error, results) {
        if (error) {
            console.log("Error: ", error);
            return res.status(400).send(error);
        } else {
            return res.send({ error: false, data: results, message: 'user registered successfully'})
        }
    });
});

// Retrieve books from database
app.get('/getbooks', function (req, res) {
    connection.query('SELECT * FROM book', function (error, rows) {
        if (error) {
            console.log("Error: ", error);
            return res.status(400).send(error);
        } else {
            return res.send(rows);
        }
    })
});

// catch 404 and forward to error handler
app.use(function(req, res, next) {
  next(createError(404));
});

// error handler
app.use(function(err, req, res, next) {
  // set locals, only providing error in development
  res.locals.message = err.message;
  res.locals.error = req.app.get('env') === 'development' ? err : {};

  // render the error page
  res.status(err.status || 500);
  res.render('error');
});

app.listen(port, () => console.log(`Listening on port ${port}`));

module.exports = app;