index.js/server
const express =require('express');
const bodyParser =require('body-parser');
const cors=require('cors');
const app=express();
const mysql = require('mysql')
const router = express.Router();
const session = require('express-session');
const path = require('path');
var db = mysql.createConnection({
host: "localhost",
user: "root",
password: "password",
database: "tms",
});
app.use(bodyParser.json());
app.use(cors());
app.use(bodyParser.urlencoded({extended:true}));
app.use(session({
secret: 'secret',
resave: true,
saveUninitialized: true
}));
app.use(express.static(__dirname + "http://localhost:3000/Main.js "));
db.connect((err)=> {
if(!err)
{
console.log("connected");
}
else{
console.log('Connection Failed!'+ JSON.stringify(err,undefined,2));
}
});
app.post('/api/login',(req,res)=>{
const Username=req.body.Username;
const Password=req.body.Password;
db.query(
"SELECT * FROM login where username ='"+Username+"' AND Password ='"+Password+"';",
[Username,Password],
function(err,result){
if(err){
res.send({err:err});
}
if(result.length>0){
console.log("you have successfully logged in");
res.redirect("http://localhost:3000/Main ");
}
else{
res.send({message:"wrong username/password"});
}
}
);
});
app.listen(3001,()=>
{console.log("running on port 3001")});
my login.js(tms/src/components/login.js)
import React, { Component } from 'react'
import { useState } from 'react'
import Axios from 'axios';
function Login() {
const [Username ,setUserName] = useState("");
const [Password , setPassword] = useState("");
const login=()=>{
Axios.post("http://localhost:3001/api/login",{
Username:Username,
Password:Password}).then((response) => {
console.log(response.data);
});
};
return (
<div >
<h1 className="App">User Login</h1>
<div>
<label>User Name</label>
<input type="text" className="forminput" placeholder="Username" onChange={(e) => setUserName(e.target.value)} />
<label>Password</label>
<input type="password" className="input" placeholder="******" onChange={(e) => setPassword(e.target.value)} />
<button onClick={login} >save</button>
</div>
</div>
)
}
export default Login
What I have tried:
import React, { Component } from 'react'
import { useState } from 'react'
import Axios from 'axios';
function Login() {
const [Username ,setUserName] = useState("");
const [Password , setPassword] = useState("");
const login=()=>{
Axios.post("http://localhost:3001/api/login",{
Username:Username,
Password:Password}).then((response) => {
console.log(response.data);
});
};
return (
<div >
<h1 className="App">User Login</h1>
<div>
<label>User Name</label>
<input type="text" className="forminput" placeholder="Username" onChange={(e) => setUserName(e.target.value)} />
<label>Password</label>
<input type="password" className="input" placeholder="******" onChange={(e) => setPassword(e.target.value)} />
<button onClick={login} >save</button>
</div>
</div>
)
}
export default Login