Login API with Token in reactjs

Login API with Token in reactjs 

import React, { useState } from 'react'

import { Link, useNavigate } from 'react-router-dom'

import axios from 'axios'

import {

  CButton,

  CCard,

  CCardBody,

  CCardGroup,

  CCol,

  CContainer,

  CForm,

  CFormInput,

  CInputGroup,

  CInputGroupText,

  CRow,

} from '@coreui/react'

import CIcon from '@coreui/icons-react'

import { cilLockLocked, cilUser } from '@coreui/icons'

import { setUserSession } from 'src/Utils/Common'

// import { response } from 'express'

const Login = (props) => {

  const navigate = useNavigate()

  const [MailID, setMailID] = useState('')

  const [Password, setPassword] = useState('')

  const [error, setError] = useState(null)

  const [loading, setLoading] = useState(false)

  const handleLogin = () => {

    setError(null)

    setLoading(true)

    axios

      .post('http://164.92.124.108/api/login', {

        MailID: MailID,

        Password: Password,

      })

      .then((response) => {

        setLoading(false)

        console.log('response', response)

        // setUserSession(response.data)

        if (response.data.status === true) {

          localStorage.setItem('@token', response.data.token)

          navigate('/client')

        } else {

          alert(response.data.message)

        }

      })

      .catch((error) => {

        setLoading(false)

        console.error(error)

      })

    // console.log(MailID, Password)

    // const item = { MailID, Password }

    // let result = await fetch('http://164.92.124.108/api/login', {

    //   method: 'POST',

    //   headers: {

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

    //     Accept: 'application/json',

    //   },

    //   body: JSON.stringify(item),

    // })

    // result = await result.json()

    // console.log(result)

    // localStorage.setItem('name', JSON.stringify(result))

    //

  }

  return (

    <div className="bg-light min-vh-100 d-flex flex-row align-items-center">

      <CContainer>

        <CRow className="justify-content-center">

          <CCol md={8}>

            <CCardGroup>

              <CCard className="p-4">

                <CCardBody>

                  <CForm>

                    <h1>Login</h1>

                    <p className="text-medium-emphasis">Sign In to your account</p>

                    <CInputGroup className="mb-3">

                      <CInputGroupText>

                        <CIcon icon={cilUser} />

                      </CInputGroupText>

                      <CFormInput

                        placeholder="Username"

                        value={MailID}

                        onChange={(e) => setMailID(e.target.value)}

                        type="text"

                      />

                    </CInputGroup>

                    <CInputGroup className="mb-4">

                      <CInputGroupText>

                        <CIcon icon={cilLockLocked} />

                      </CInputGroupText>

                      <CFormInput

                        type="password"

                        placeholder="Password"

                        value={Password}

                        onChange={(e) => setPassword(e.target.value)}

                      />

                    </CInputGroup>

                    {error && <p>{error}</p>}

                    <CRow>

                      <CCol xs={6}>

                        {/* <CButton color="primary" className="px-4" onClick={log}>

                          Login

                        </CButton> */}

                        <input type="button" value={'login'} onClick={handleLogin} />

                      </CCol>

                      <CCol xs={6} className="text-right">

                        <CButton color="link" className="px-0">

                          Forgot password?

                        </CButton>

                      </CCol>

                    </CRow>

                  </CForm>

                </CCardBody>

              </CCard>

              <CCard className="text-white bg-primary py-5" style={{ width: '44%' }}>

                <CCardBody className="text-center">

                  <div>

                    <h2>Sign up</h2>

                    <p>

                      Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod

                      tempor incididunt ut labore et dolore magna aliqua.

                    </p>

                    <Link to="/register">

                      <CButton color="primary" className="mt-3" active tabIndex={-1}>

                        Register Now!

                      </CButton>

                    </Link>

                  </div>

                </CCardBody>

              </CCard>

            </CCardGroup>

          </CCol>

        </CRow>

      </CContainer>

    </div>

  )

}

export default Login