How do i send a response to react?-CodePudding

I have a login component and I sended a post request to the server containing the username and password then after I recieved the data in the backend I will match it to the SELECT query result from the backend and after I want send a data to the client from the server...

Here's my login code:

import React, { useState, useEffect } from 'react';
import { Link } from 'react-router-dom';
import Axios from 'axios'


function Login() {

const [account, setAccount] = useState({
    username: "",
    password: ""
})


function handleClick(event) {

    Axios.post("http://localhost:3001/login", {
        username: account.username,
        password: account.password
    }).then(() => {
        console.log("Account Logged In");
    })
    event.preventDefault();
}

function handleChange(event) {
    const { name, value } = event.target;
    setAccount(prev => ({ ...prev, [name]: value }))
}

return (

    <div className="float shadow bg-light px-3 py-3 ai-center js-between my-3">
        <h2 className="brand color-olive">Furns</h2>
        <h1 className="color-olive">Login</h1>
        <form className="column">
            <label htmlFor="username" className="color-olive my-1"> Username</label>
            <input id="username" type="text" className="txt-box" name="username" value={account.username} onChange={handleChange} />

            <label htmlFor="password" className="color-olive my-1">Password </label>
            <input id="password" type="password" className="txt-box" name="password" value={account.password} onChange={handleChange} />


            <button type="submit" className="mt-4 olive login-btn-large w-100" onClick={handleClick}>Login</button>

            <Link to="/">
                <button className="my-1 olive bg-light btn-cancel w-100">Cancel</button>
            </Link>

        </form>

    </div>

);
}

export default Login;

And here's the code in the server:

app.post("/login", (req, res) => {
const username = req.body.username;
const password = req.body.password;
var selectAccount = "SELECT username, password FROM user WHERE username=? AND password=?";
db.query(selectAccount, [username, password], function (err, result) {
    if (err) throw err;
})

//I want to match the query results with the user input the send a boolean to the login component })

CodePudding user response：

I am not sure about SQL Syntax, but here is the way you can do this.

Find first with username
If no record is found, then User does not exist response.
Else, check if results[0].password !== password, then send wrong password
Else, the password is right and send success response

You can send response using res.send({/*data inside*/}). Here, I used a custom status code, so that error handling at frontend become easy.

app.post("/login", (req, res) => {
   const username = req.body.username;
   const password = req.body.password;
   var selectAccount = "SELECT username, password FROM user WHERE username=?";
   db.query(selectAccount, [username], function (err, result) {
       if (err) throw err;
       if(results.length === 0) return res.send({status: 404, msg: "No user found"});
       if(results[0].password !== password) return res.send({status: 400, msg:"Wrong Password"})
       return res.send({status: 200, msg:"Login Successful"})
   })
})