Skip to content

Instantly share code, notes, and snippets.

@Shivamy2
Created May 13, 2022 11:42
Show Gist options
  • Save Shivamy2/d408ed6836cf28018abecac3606cda0d to your computer and use it in GitHub Desktop.
Save Shivamy2/d408ed6836cf28018abecac3606cda0d to your computer and use it in GitHub Desktop.
import React, { useState } from "react";
//import bgimg from '.';
// TODO:formik library
function Signup() {
// const [firstName, setFirstName] = useState("");
// const [lastName, setLastName] = useState("");
// const [email, setEmail] = useState("");
// const [password, setPassword] = useState("");
const [inputFields, setInputFields] = useState({
firstName: "",
lastName: "",
email: "",
password: "",
});
// const [inputErrors, setInputErrors] = useState({
// firstName: "",
// lastName: "",
// email: "",
// password: "",
// });
return (
<div className="text-gray-800 flex">
{/* <div className='flex sm:w-1/2 sm:max-h-screen'>
<img src="" alt="" />
</div> */}
<div className="text-teal-800 p-8 font-semibold w-1/2">
<div className="font-extrabold text-2xl p-6 underline">Sign Up</div>
<form method="post">
<div className="p-3 mb-2 rounded-full bg-gray-100 hover:bg-gray-50">
First Name :
<input
type="text"
// value={firstName}
value={inputFields.firstName}
onChange={(event) => {
// setFirstName(event.target.value);
setInputFields({
...inputFields,
firstName: event.target.value,
});
// if (inputFields.firstName.length < 5) {
// setInputErrors({
// ...inputErrors,
// firstName: "First Name is invalid!",
// });
// } else {
// setInputErrors({
// ...inputErrors,
// firstName: "",
// });
// }
}}
name="firstName"
placeholder="Enter first name"
className="outline-none p-2 ml-2 rounded-lg bg-gray-100"
/>
<p>{inputErrors.firstName}</p>
</div>
<div className="p-3 mb-2 rounded-full bg-gray-100 hover:bg-gray-50">
<label htmlFor="lastName">Last Name :</label>
<input
className="outline-none p-2 ml-2 rounded-lg bg-gray-100"
type="text"
value={inputFields.lastName}
onChange={(event) => {
// setLastName(event.target.value);
setInputFields({
...inputFields, //TODO: spread operator in js
lastName: event.target.value,
});
}}
// value={inputFields.lastName}
placeholder="Enter last name"
name="lastName"
/>
</div>
<div className="p-3 mb-2 rounded-full bg-gray-100 hover:bg-gray-50">
E-mail :
<input
// value={inputFields.email}
className="outline-none p-2 ml-2 rounded-lg bg-gray-100"
type="text"
value={inputFields.email}
onChange={(event) => {
// setEmail(event.target.value);
setInputFields({
...inputFields,
email: event.target.value,
});
}}
placeholder=" [email protected]"
name="email"
/>
</div>
<div className="p-3 mb-4 rounded-full bg-gray-100 hover:bg-gray-50">
Password :
<input
// value={inputFields.password}
value={inputFields.password}
onChange={(event) => {
// setPassword(event.target.value);
setInputFields({
...inputFields,
password: event.target.value,
});
}}
className="outline-none p-2 ml-2 rounded-lg bg-gray-100"
type="password"
placeholder=" password"
name="pass"
/>
</div>
<div className="bg-teal-600 shadow-lg rounded-full text-center font-bold text-white p-2 mb-2 hover:bg-teal-800">
<button
type="submit"
onClick={(event) => {
event.preventDefault();
console.log(inputFields);
}}
>
SIGN UP
</button>
</div>
</form>
</div>
</div>
);
}
export default Signup;
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment