vendredi 26 novembre 2021

server crashed down when I was trying to login the data for testing validation

I was trying to input wrong data to see how the server getting data from the database and responding to the client if there is any incorrect like wrong username/password or username does not exist. It worked perfectly and responded for 1 to 2 times until the third time the crash happened:

  1. Cannot set headers after they are sent to the client

  2. ERR_CONNECTION_REFUSED``

Here is my server-side:

const express = require("express");
const router = express.Router();
const { Users } = require("../models");
const bcrypt = require('bcryptjs');


router.post("/", async (req, res) => {
    const {username, password, phone, email} = req.body;

    const user = await Users.findOne({ where: {username: username}});
    if(user) {
        res.json({ error: "User is unavailable"});
    } else {
        bcrypt.hash(password, 10).then((hash) => {
            Users.create({
                username: username,
                password: hash,
                phone: phone,
                email: email,
            });
            res.json("SUCCESS");
        });
    };
    
});

router.post("/login", async (req, res) => {
    const { username, password } = req.body;
  
    const user = await Users.findOne({ where: { username: username } });
  
    if (!user) res.json("User Doesn't exist");
    bcrypt.compare(password, user.password).then((match) => {
        if (!match) res.json("Wrong Username or Password");
        res.json("YOU LOGGED IN");
    });
});


module.exports = router;

and Here is my client side:

import {FontAwesomeIcon} from '@fortawesome/react-fontawesome';
import {faUser, faLock, faEye, faEyeSlash} from  '@fortawesome/free-solid-svg-icons';
import { BiUser } from "react-icons/bi";
import {Link} from 'react-router-dom';
import { useState } from 'react';
import axios from 'axios';

function Register() {
    const [username, setUsername] = useState("");
    const [password, setPassword]= useState("");
    const [type, setType] = useState("password");
    const [icon, setIcon] = useState(faEye);

    const handleShowHidePass = () => {
        let currentType = type === "password" ? "text" : "password";
        let currentIcon = icon === faEye ? faEyeSlash : faEye;
        setType(currentType);
        setIcon(currentIcon);
      }

    const login = e => {
        e.preventDefault();
        
        axios.post ("http://localhost:3001/auth/login", {
            username: username,
            password: password,
        }).then((res) =>{
            console.log(res.data);
        });
    };

    return(
        <div className="right">
            <span className="title"><BiUser className="tilteIcon"/></span>

            <form onSubmit={login} >
                <div className="formInput">
                    <span className="icon"><FontAwesomeIcon icon={faUser}/></span>
                    <input 
                        type="text" 
                        className="username" 
                        value={username}
                        placeholder="Username" 
                        onChange={(e) => {
                            setUsername(e.target.value)
                        }}
                        />
                </div>

                

                <div className="formInput">
                    <span className="icon"><FontAwesomeIcon icon={faLock}/></span>
                    <input 
                        type={type} 
                        className="password1" 
                        value={password}
                        placeholder="Password" 
                        onChange={(event) => {
                            setPassword(event.target.value)
                        }}
                        
                        />
                    <span className="show"><FontAwesomeIcon icon={icon} onClick={handleShowHidePass}/></span>
                </div>
                
                <div className="formInput">
                    <button type="submit">Sign Up</button>
                </div>
                
                <div className="login">
                    <Link to="/register" style=>I already have an account!</Link>
                </div>
            </form>
        </div>
    );
}

export default Register;



Aucun commentaire:

Enregistrer un commentaire