Implemented sign up form and validation

Backend/routes/eventRoutes.js

@@ -3,9 +3,7 @@ import {addNewEvent, getEvents} from "../controllers/eventControllers";
 
 const eventRoutes = (app) => {
     app.route('/events')
-        // GET endpoint
         .get(getEvents)
-        // POST endpoint (method)
         .post(addNewEvent);
     
 };

frontend/src/Components/App.js

@@ -6,7 +6,7 @@ import MyTickets from '../Pages/MyTickets';
 import Marketplace from '../Pages/Marketplace';
 import NavBar from './NavBar';
 import NotFound from '../Pages/NotFound'
-import { BrowserRouter, Switch, Routes , Route} from 'react-router-dom'
+import { BrowserRouter, Switch, Route} from 'react-router-dom'
 import SignUp from '../Pages/SignUp';
 import ForgotPassword from '../Pages/ForgotPassword';
 

frontend/src/Components/SignUpForm.js

@@ -3,15 +3,16 @@ 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 signUp from '../api/auth';
 
 const SignUpForm = () => {
     const[formData, setFormData] = useState({
-        firstName: '',
-        lastName: '', 
-        email: '', 
-        password: '',
-        confirmPassword: '',
+        firstName: 'Fin',
+        lastName: 'Wallis', 
+        email: 'user@gmail.com', 
+        password: 'password123',
+        confirmPassword: 'password123',
         successMsg: false,
         errorMsg: false
     })
@@ -20,6 +21,7 @@ const SignUpForm = () => {
         setFormData({
             ...formData,
             [event.target.name]: event.target.value,
+            errorMsg: ''
         })
         console.log(formData)
 
@@ -30,8 +32,38 @@ const SignUpForm = () => {
         console.log(formData)
 
         // Form validation
-        if (isEmpty(username) || isEmpty(lastName) || isEmpty(email) || isEmpty(confirmPassword)) {
+        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(err)
+                })
         }
     }
 
@@ -40,6 +72,7 @@ const SignUpForm = () => {
             <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}>
+                    {formData.errorMsg && errorAlert(formData.errorMsg)}
                     <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>

frontend/src/Helpers/errorAlert.js

+import React from "react";
+
+const errorAlert = (msg) => {
+  return (
+    <div className="text-white px-6 py-4 border-0 rounded relative mb-4 bg-purple-500">
+      <span className="text-xl inline-block mr-5 align-middle">
+        <i className="fas fa-bell" />
+      </span>
+      <span className="inline-block align-middle float-left">{msg}</span>
+    </div>
+  );
+};
+
+export default errorAlert;

frontend/src/api/auth.js

+import axios from 'axios'
+
+const signUp = async (data) => {
+    
+    const config = {
+        headers: {
+            'Content-Type': 'application/json'
+        }
+    }
+
+    const response = await axios.post('/api/auth/signUp', data, config)
+
+    return response
+    
+};
+
+export default signUp;
\ No newline at end of file