diff --git a/Backend/routes/eventRoutes.js b/Backend/routes/eventRoutes.js index 4aa6f7554ac9af98b276876b6a6df5ec6c516dd7..6a97a26d50344f26e21dd99c723c2838df8b85a0 100644 --- a/Backend/routes/eventRoutes.js +++ b/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); }; diff --git a/frontend/src/Components/App.js b/frontend/src/Components/App.js index acb6788cc227ee36bd903170fa6b17517e00c2ae..16e9fd71c3f5e0a1df5fc9d4b7d13f64ccb64a16 100644 --- a/frontend/src/Components/App.js +++ b/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'; diff --git a/frontend/src/Components/SignUpForm.js b/frontend/src/Components/SignUpForm.js index 44d918d5fe11a53d137cc5e8a3d93270587e51de..752f2188cf219b3c6b3861e853b36957575b4040 100644 --- a/frontend/src/Components/SignUpForm.js +++ b/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> diff --git a/frontend/src/Helpers/errorAlert.js b/frontend/src/Helpers/errorAlert.js new file mode 100644 index 0000000000000000000000000000000000000000..affc18101e17752c8fd236ac06a7655e51b8e3d9 --- /dev/null +++ b/frontend/src/Helpers/errorAlert.js @@ -0,0 +1,14 @@ +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; diff --git a/frontend/src/api/auth.js b/frontend/src/api/auth.js new file mode 100644 index 0000000000000000000000000000000000000000..980989289f0461a087f4c3f28f840f5e9cd16b4d --- /dev/null +++ b/frontend/src/api/auth.js @@ -0,0 +1,17 @@ +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