I want to tell reactjs login component whether login was successful or not-CodePudding

I am confused as to how to communicate from the nodejs server to the reactjs login component on whether login was successful or not. I have a reactjs component that handles login as follows:

import React, {useState} from 'react';
import axios from "axios";

const Login = () => {

const [user,setUser] = useState({email:"",password:""});

const handleSubmit = (e) => {
    e.preventDefault();
    console.log(user);

      axios.post('http://localhost:5000/login',user)
      .then(function (response) {
        console.log(response);
        console.log("Successfully done");
      })
      .catch(function (error) {
          console.log("error here")
        console.log(error.message);
      });
}


    return (
        <div>
            <h1>Login</h1>
            <form onSubmit={handleSubmit}>
                <div>Email:</div> 
                <div><input type="text" name="email" placeholder='Enter your email' 
                    onChange={(e)=>setUser({...user,email:e.target.value})}
                /></div>
                <div>Password:</div> 
                <div><input type="password" name="password" placeholder='Enter your password'
                    onChange={(e)=>setUser({...user,password:e.target.value})}
                    /></div>
                <div><input type="submit" value="Add" /></div>
            </form>
        </div>
    )
}

export default Login;

and an expressjs backed that processes the login server.js

const express = require("express");
const mongoose = require("mongoose");
const User = require("./Models/Conn.js");
const bcrypt = require("bcryptjs");
//const Route1 = require("./Routes/Route.js");
const cors = require('cors');

const app = express();
//app.use("/api",Route1);
app.use(express.json({extended:true}));
app.use(express.urlencoded({extended:true}));
app.use(cors()); 


const url = "mongodb srv://pekele:[email protected]/myDatabase?retryWrites=true&w=majority";
mongoose.connect(url)
.then(()=>console.log("connected to database successfully"))
.catch(err=>console.log(err));




app.get("/",(req,res)=> {
    res.send("<h1>Welcome Guest</h1>");
});

app.get("/signup",(req,res)=> {
    res.json({"id":"1"});
})

app.post("/signup",(req,res)=> {
    const {email,password} = req.body;
    bcrypt.genSalt(10)
    .then(salt=> {
        bcrypt.hash(password,salt)
        .then(hash => {
            const user = new User({email,password:hash}); 
            user.save()
            .then(()=>console.log("Successfully saved"))
            .catch(error=>console.log(error));
        }) 
    }).catch(err=>console.log(err));
    
})

app.post("/login",(req,res)=> {
    const {email,password} = req.body;
    console.log(`My email is ${email}`)
    User.findOne({email:email}, function (err, doc) {
        console.log(doc);
        if(doc == null) {
            //How do i let react login page know that there is no user with such email 
        }
        if(doc != null) {
            const emailDB = doc.email;
            const passwordDB = doc.password;
            bcrypt.compare(password,passwordDB)
            .then(res => {
                //How do I tell the react login page that the login was successful
            }).catch(err=>console.log(err));
        }
    });
})



app.listen(5000,()=> console.log("Server listening on port 5000"));

The problem is how do I communicate to the react login page whether the login was successful or not in the app.post("/login",(req,res) ... Thanks

CodePudding user response：

You can send data via -

res.json(data)
res.send("Submitted Successfully!")
res.status(200).send(message)