SignUpForm.js

import React, { useState } from 'react';
import { Link } from 'react-router-dom';
import isEmail from 'validator/lib/isEmail';
import isEmpty from 'validator/lib/isEmpty';
import equals from 'validator/lib/equals';
import errorAlert from '../Helpers/errorAlert';
import successAlert from '../Helpers/successAlert';
import {signUp} from '../api/auth';

const SignUpForm = () => {

    const[formData, setFormData] = useState({
        firstName: 'Fin',
        lastName: 'Wallis', 
        email: 'user@gmail.com', 
        password: 'password123',
        confirmPassword: 'password123',
        successMsg: false,
        errorMsg: false
    })

    const handleChange = (event) => {
        setFormData({
            ...formData,
            [event.target.name]: event.target.value,
            errorMsg: ''
        })
        console.log(formData)
    }

    const handleSubmit = (event) => {
        event.preventDefault()
        console.log(formData)

        // Form validation
        if (isEmpty(formData.firstName) || isEmpty(formData.lastName) || isEmpty(formData.email) || isEmpty(formData.password) || isEmpty(formData.confirmPassword)) {
            setFormData({
                ...formData, errorMsg: 'All fields are required',
            }) 
        } 
        else if (!isEmail(formData.email)) {
            setFormData({
                ...formData, errorMsg: 'Invalid email',
            })
        } 
        else if (!equals(formData.password, formData.confirmPassword)) {
            setFormData({
                ...formData, errorMsg: 'Passwords do not match',
            })
        } else {
            
            const {firstName, lastName, email, password} = formData
            const data = {firstName, lastName, email, password}

            signUp(data)
                .then((response) => {
                    console.log('axios success', response)
                    setFormData({
                        firstName: '',
                        lastName: '', 
                        email: '', 
                        password: '', 
                        confirmPassword: '',
                        successMsg: response.data.successMessage

                    })
                })
                .catch((err) => {
                    console.log("Axios 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)}
                    {formData.successMsg && successAlert(formData.successMsg)}
                    <input className='font-montserrat font-medium rounded-full w-full py-4 px-7 shadow-lg' name='firstName' value={formData.firstName} type='text' placeholder='First Name' onChange={handleChange}></input>
                    <input className='font-montserrat font-medium rounded-full w-full py-4 px-7 shadow-lg' name='lastName' value={formData.lastName} type='text' placeholder='Last Name' onChange={handleChange}></input>
                    <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>
                    <input className='font-montserrat font-medium rounded-full w-full py-4 px-7 shadow-lg' name='confirmPassword' value={formData.confirmPassword} type='password' placeholder='Confirm 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 Up</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'>
                                Already have a Tickcrypt account?
                            </p>
                            <Link to='/Login' className=' pl-2 text-purple-500'>Sign In</Link>
                        </div>
                    </div>
                </form>
            </div>
        </div>
    );
}

export default SignUpForm;