reactjwt token

 import axios from 'axios';

import React,{useEffect, useState} from 'react'

import  './style/form.css';

import { useNavigate } from "react-router-dom";

export default function Form() {

const intialstate={

    username:'',

    userpass:''

}

const navigate = useNavigate();

    const [state,setState]=useState(intialstate);

const [formerror,SetFormerror]=useState({});

const [issubmit,setIsSubmit]=useState(false);

const [data,setData]=useState(null);

    const {username,userpass}=state;

 const handleChange=(e)=>{

    //  console.log(e.target.value);

    //  console.log(e.target.name);

const {name,value}=e.target;

setState({...state,[name]:value})

}

const Validate=()=>{

    const err={};

    const regexpname=/^[a-zA-Z]+$/;

    const regexpwd=/^\w{3,6}$/;

if(!(state.username)){

    // alert("please fill your name");

err.name="please fill your name";

}

else if(!regexpname.test(state.username)){

err.name="please fill character only";

}

else if(!(state.userpass)){

    err.pwd="please fill your password";

    //alert("please fill your password");

}

else if(!regexpwd.test(state.userpass)){

    err.pwd="please fill a-z A-Z 0-9 _ min 3 to 6";

    }

//console.log(state);

SetFormerror(err);

}

const handleSubmit=(e)=>{

    console.log("submit button pressed");

    e.preventDefault();

    Validate();

    setIsSubmit(true);

}

useEffect(()=>{

    // console.log("good morning",issubmit);

    // console.log(Object.keys(formerror).length);

if(Object.keys(formerror).length===0 && issubmit===true){

    // console.log("good morning");

console.log(state);

// fetch(`http://localhost:8000/login`, {

//     method: "POST",

//     headers: {

//         "Content-Type": "application/json",

//     },

//     credentials: "include", // This here

//     body: JSON.stringify({

//         username: state.username,

//         userpass: state.userpass,

//     }),

// }).then((response) => {

    

// console.log(response);

//     })

 axios.post('http://localhost:8000/login',

 JSON.stringify(state)

 , 

    {withCredentials: true,

       

    headers: {'Access-Control-Allow-Origin': '*', 

'Content-Type': 'application/json'}

}

 

 ).then(res=>{

    

      console.log(res.data);

     if(res.status===200){

        // alert("login successfully");

        navigate('/');

    }

    //setData(res.data);

    

 })

.catch(err => {

    let message = err;

    console.log(message.response.status);

    if(message.response.status===401 ||!message){

        alert("invalid credential");

    }

    

}

);

}

},[formerror])

    return (

    <div>

        {/* <h1>{username} {userpass}</h1> */}

<form onSubmit={handleSubmit}>

<label htmlFor="name">Enter name</label>

<input type="text" name="username" value={username}  onChange={handleChange}/>

<span> {formerror.name}</span>

<br />

<label htmlFor="password">Enter Password</label>

<input type="password" name="userpass" value={userpass} onChange={handleChange} />

<span>{formerror.pwd}</span>

<br />

<input type="submit" value="Login" />

</form>

    </div>

  )

}