Newer
Older
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
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;