http-response-handler/S.a.d.u/moduals/form/login.jsx

A comprehensive utility for standardizing HTTP responses in Node.js applications

import React, { useState } from 'react'
import { useNavigate } from 'react-router-dom'

function Login() {
    const [data, setData] = useState({
        name:"",
        pass:""
    })
    const [error, setError] = useState({})

    const navigate = useNavigate()

    const handleChange = (e)=>{
        const {name ,value} = e.target
        setData({...data, [name]: value})
        setError({...error, [name] : ""})
    }

    const handleError = () =>{
        let error = {}
        let valid = true
        if (data.name === "") {
            error.name = "*"
            valid = false
        }
        if (data.pass === "") {
            error.pass = "*"
            valid = false
        }
        setError(error)
        return valid =  true
    }

    const handleSubmmite = () =>{
        if (handleError()) {
            const getData = JSON.parse(localStorage.getItem("user"));
            if (getData.find((i)=> i.name === data.name && i.pass === data.pass)) {
                navigate("/")
            }else{
                alert("user not found")
            }
        }
    }

  return (
    <div>
        <label>Name<span>{error.name}</span></label><br/>
        <input type='text' value={data.name} onChange={handleChange} name='name'/>
        <br/>
        <label>pass{error.name}</label><br/>
        <input type='password' value={data.pass} onChange={handleChange} name='pass'/><br/><br/>
        <button onClick={handleSubmmite}>sub</button>
    </div>
  )
}

export default Login