import React, { useState } from "react"; import { Link, useNavigate } from 'react-router-dom'; import errorAlert from '../Helpers/errorAlert'; import isEmpty from 'validator/lib/isEmpty'; import isEmail from 'validator/lib/isEmail'; import {signIn} from '../api/auth'; import { isAuthenticated, setAuthentication } from "../Helpers/auth"; const LoginForm = () => { let navigate= useNavigate(); const[formData, setFormData] = useState({ email: 'user@gmail.com', password: 'password123', errorMsg: false, }) const handleChange = (event) => { setFormData({ ...formData, [event.target.name]: event.target.value, errorMsg: '' }) } const handleSubmit = (event) => { event.preventDefault() // Form validation if (isEmpty(formData.email) || isEmpty(formData.password)) { setFormData({ ...formData, errorMsg: 'All fields are required', }) } else if (!isEmail(formData.email)) { setFormData({ ...formData, errorMsg: 'Invalid email', }) } else { const {email, password} = formData const data = {email, password} signIn(data) .then(response => { setAuthentication(response.data.token, response.data.user) if (isAuthenticated()) { navigate("/Marketplace") window.location.reload(); } }) .catch(err => { console.log("Login error", err) setFormData({ ...formData, errorMsg: err.response.data.errorMessage }) }) } } return ( <div className='flex mt-20 items-center justify-center'> <div className='bg-white p-12 rounded-md w-1/3 shadow-lg'> <h1 className='text-black font-montserrat font-extrabold text-3xl mb-12 ml-3'>Tickcrypt</h1> <form className='signup-form space-y-5 px-100' onSubmit={handleSubmit} noValidate> {formData.errorMsg && errorAlert(formData.errorMsg)} <input className='font-montserrat font-medium rounded-full w-full py-4 px-7 shadow-lg' name='email' value={formData.email} type='email' placeholder='Email Address' onChange={handleChange}></input> <input className='font-montserrat font-medium rounded-full w-full py-4 px-7 shadow-lg' name='password' value={formData.password} type='password' placeholder='Password' onChange={handleChange}></input> <button className='py-4 px-14 text-white bg-purple-500 hover:bg-purple-400 font-montserrat font-medium rounded-full' type='submit'>Sign in</button> <div className='mt-6 '> <p className='forgot-password'> <Link to='/ForgotPassword' className='text-gray-400'>Forgot Password?</Link> </p> <div className='mt-4'> <p className='text-gray-400 inline'> Need a Tickcrypt account? </p> <Link to='/SignUp' className=' pl-2 text-purple-500'>Sign up</Link> </div> </div> </form> </div> </div> ); }; export default LoginForm;