diff --git a/frontend/src/Components/App.js b/frontend/src/Components/App.js index 19652825939a62e64dca13007ab4d6ca2e31e01a..acb6788cc227ee36bd903170fa6b17517e00c2ae 100644 --- a/frontend/src/Components/App.js +++ b/frontend/src/Components/App.js @@ -8,6 +8,7 @@ import NavBar from './NavBar'; import NotFound from '../Pages/NotFound' import { BrowserRouter, Switch, Routes , Route} from 'react-router-dom' import SignUp from '../Pages/SignUp'; +import ForgotPassword from '../Pages/ForgotPassword'; function App() { return ( @@ -33,6 +34,9 @@ function App() { <Route exact path='/SignUp'> <SignUp /> </Route> + <Route exact path='/ForgotPassword'> + <ForgotPassword /> + </Route> <Route> <NotFound /> </Route> diff --git a/frontend/src/Components/SignUpForm.js b/frontend/src/Components/SignUpForm.js new file mode 100644 index 0000000000000000000000000000000000000000..9b811fe0929d28a1c3be6a67e337d214b53e699a --- /dev/null +++ b/frontend/src/Components/SignUpForm.js @@ -0,0 +1,53 @@ +import React, { useState } from 'react'; +import { Link } from 'react-router-dom'; + +const SignUpForm = () => { + const[formData, setFormData] = useState({ + firstName: '', + lastName: '', + email: '', + password: '', + successMsg: false, + errorMsg: false + }) + + const handleChange = (evt) => { + setFormData({ + ...formData, + [evt.target.name]: evt.target.value, + }) + + } + + const handleSubmit = (evt) => { + evt.preventDefault() + } + + 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}> + <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> + <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; \ No newline at end of file diff --git a/frontend/src/Pages/ForgotPassword.js b/frontend/src/Pages/ForgotPassword.js new file mode 100644 index 0000000000000000000000000000000000000000..4502c805dd8e86321c3e263cd86cb6eddde9eab7 --- /dev/null +++ b/frontend/src/Pages/ForgotPassword.js @@ -0,0 +1,11 @@ +import React from 'react'; + +const ForgotPassword = () => { + return ( + <div> + forgot password page + </div> + ); +}; + +export default ForgotPassword; \ No newline at end of file diff --git a/frontend/src/Pages/SignUp.js b/frontend/src/Pages/SignUp.js index 34bc06d39a2b62c89620105ec1daa9a156d59010..3e8ce99077c5e274892480511354886743ff7af2 100644 --- a/frontend/src/Pages/SignUp.js +++ b/frontend/src/Pages/SignUp.js @@ -1,10 +1,11 @@ import React from 'react'; +import SignUpForm from '../Components/SignUpForm'; const SignUp = () => { return ( - <div> - sign up on this page - </div> + <> + <SignUpForm /> + </> ); };