Skip to content

Jay Mehta / zango-frontend

Go to a project
Toggle navigation
Toggle navigation pinning
Commit 3c81ef95 by jay
Options

grooming of vendor signup form

1 parent 1ea46a5d
Inline Side-by-side
Showing 1 changed file with 84 additions and 119 deletions
components/signup/Signup.js
import React, { useState } from 'react'; import React, { useState } from "react";
import { Formik } from "formik"; import { Formik } from "formik";
import Link from "next/link"; import Link from "next/link";
import { Fragment } from "react"; import { Fragment } from "react";
import { Button, Form } from "react-bootstrap"; import { Button, Form } from "react-bootstrap";
import * as Yup from "yup"; import * as Yup from "yup";
import OTPInput from 'react-otp-input'; import OTPInput from "react-otp-input";
import { renderImage } from '../../services/imageHandling'; import { renderImage } from "../../services/imageHandling";
import Image from 'next/image'; import Image from "next/image";
import { useRouter } from 'next/router'; import { useRouter } from "next/router";
const Signup = (props) => { const Signup = props => {
console.log(props.type) console.log(props.type);
const router = useRouter(); const router = useRouter();
const [isFormTouched, setIsFormTouched] = useState(false);
const [Otp, setOtp] = useState(""); const [Otp, setOtp] = useState("");
const [isTermsChecked, setTermsChecked] = useState(false) // const [isTermsChecked, setTermsChecked] = useState(false);
const [fullName, setFullname] = useState("") // const [fullName, setFullname] = useState("");
const [emailId, setEmailId] = useState("") // const [emailId, setEmailId] = useState("");
const [pwd, setPwd] = useState("") // const [pwd, setPwd] = useState("")
const [confirmPwd, setConfirmPwd] = useState("") // const [confirmPwd, setConfirmPwd] = useState("")
const [countryCode, setCountryCode] = useState("+91") const [isOtpSent, setOtpSent] = useState(false);
const [mobileNo, setMobileNo] = useState("") const [otpVerified, setOtpVerified] = useState(false);
const [isOtpSent, setOtpSent] = useState(false) // const [passwordMatch, setPasswordMatch] = useState()
const [otpVerified, setOtpVerified] = useState(false) const handleOTPChange = e => {
const handleOTPChange = (e) => {
setOtp(e); setOtp(e);
}; };
const signupValidationSchema = Yup.object().shape({ const signupValidationSchema = Yup.object().shape({
fullname: Yup.string() fullname: Yup.string().required("Fullname is Required"),
.required("Fullname is Required"), email: Yup.string().required("Email Id is Required").email("Please Enter An Valid Email Id"),
email: Yup.string() password: Yup.string().required("Password is Required").min(6, "Password must be minimum 6 characters"),
.required("Email Id is Required") confirmPassword: Yup.string()
.email("Please Enter An Valid Email Id"), .required("Confirm Password is Required")
password: Yup.string() .oneOf([Yup.ref("password"), null], "Passwords must match"),
.required("Password is Required"), countryCode: Yup.string().required("Country Code is Required"),
confirm_password: Yup.string()
.oneOf([Yup.ref("password"), null], "Passwords must match")
.required("Confirm Password is Required"),
country_code: Yup.string()
.required("Country Code is Required"),
mobile: Yup.string() mobile: Yup.string()
.required("Mobile Number is Required") .required("Mobile Number is Required")
.matches(/^[0-9\s]+$/, "Please Enter Correct Mobile No."), .matches(/^[0-9\s]+$/, "Please Enter Correct Mobile No."),
is_terms_checked: Yup.bool().oneOf([true], "Please Accept Terms & Conditions"), termsConditions: Yup.bool().oneOf([true], "Please Accept Terms & Conditions"),
otp: Yup.string().when("isOtpSent", { otp: Yup.string().when("isOtpSent", {
is: true, is: true,
then: Yup.string().required("Otp is Required") then: Yup.string()
.required("Otp is Required")
.matches(/^[0-9\s]+$/, "Please Enter Correct OTP") .matches(/^[0-9\s]+$/, "Please Enter Correct OTP")
}) })
}); });
...@@ -58,21 +51,20 @@ const Signup = (props) => { ...@@ -58,21 +51,20 @@ const Signup = (props) => {
fullname: "Full Name is required", fullname: "Full Name is required",
email: "Email is required", email: "Email is required",
password: "Password is required", password: "Password is required",
confirm_password: "Confirm Password is required", confirmPassword: "Confirm Password is required",
country_code: "Country Code is Required", countryCode: "Country Code is Required",
mobile: "Mobile Number is Required", mobile: "Mobile Number is Required"
}; };
const handleSendOtp = (values) => { const handleSendOtp = values => {
setOtpSent(true); setOtpSent(true);
} };
const handleVerifyOtp = (values) => { const handleVerifyOtp = values => {
setOtpVerified(true); setOtpVerified(true);
if (props.type == "user") { if (props.type == "user") {
// router.push("/");
}
} }
};
return ( return (
<Fragment> <Fragment>
...@@ -85,25 +77,25 @@ const Signup = (props) => { ...@@ -85,25 +77,25 @@ const Signup = (props) => {
<div className="form-container"> <div className="form-container">
<Formik <Formik
initialValues={{ initialValues={{
fullname: fullName ? fullName : "", fullname: "",
email: emailId ? emailId : "", email: "",
password: pwd ? pwd : "", password: "",
confirm_password: confirmPwd ? confirmPwd : "", confirmPassword: "",
country_code: countryCode ? countryCode : "", countryCode: "",
mobile: mobileNo ? mobileNo : "", mobile: "",
is_terms_checked: isTermsChecked, termsConditions: false,
otp: Otp ? Otp : "", otp: Otp ? Otp : ""
}} }}
// initialErrors={initialErrors} // initialErrors={initialErrors}
validationSchema={signupValidationSchema} validationSchema={signupValidationSchema}
enableReinitialize={true} enableReinitialize={true}
onSubmit={values => { onSubmit={values => {
console.log("signup values", values) console.log("signup values", values);
if (!isOtpSent) { if (!isOtpSent) {
handleSendOtp(values) handleSendOtp(values);
} }
if (isOtpSent) { if (isOtpSent) {
handleVerifyOtp(values) handleVerifyOtp(values);
} }
}} }}
> >
...@@ -120,14 +112,11 @@ const Signup = (props) => { ...@@ -120,14 +112,11 @@ const Signup = (props) => {
type="text" type="text"
name="fullname" name="fullname"
onChange={handleChange} onChange={handleChange}
onBlur={(e) => { onBlur={handleBlur}
handleBlur(e)
setFullname(e.target.value)
}}
value={values.fullname} value={values.fullname}
placeholder="Your name" placeholder="Your name"
/> />
{errors.fullname && touched.fullname && (<span className="form-error">{errors.fullname}</span>)} {errors.fullname && touched.fullname && <span className="form-error">{errors.fullname}</span>}
</div> </div>
<div className="input-group"> <div className="input-group">
<label>Email Id</label> <label>Email Id</label>
...@@ -135,60 +124,42 @@ const Signup = (props) => { ...@@ -135,60 +124,42 @@ const Signup = (props) => {
type="text" type="text"
name="email" name="email"
onChange={handleChange} onChange={handleChange}
onBlur={(e) => { onBlur={handleBlur}
handleBlur(e)
setEmailId(e.target.value)
}}
value={values.email} value={values.email}
placeholder="yourname@example.com" placeholder="yourname@example.com"
/> />
{errors.email && touched.email && (<span className="form-error">{errors.email}</span>)} {errors.email && touched.email && <span className="form-error">{errors.email}</span>}
</div> </div>
<div className="input-group"> <div className="input-group">
<label>Password</label> <label>Password</label>
<input <input type="password" name="password" onChange={handleChange} onBlur={handleBlur} value={values.password} placeholder="Enter password" />
type="text" {errors.password && touched.password && <span className="form-error">{errors.password}</span>}
name="password"
onChange={handleChange}
onBlur={(e) => {
handleBlur(e)
setPwd(e.target.value)
}}
value={values.password}
placeholder="#@$!%@#"
/>
{errors.password && touched.password && (<span className="form-error">{errors.password}</span>)}
</div> </div>
<div className="input-group"> <div className="input-group">
<label>Confirm Password</label> <label>Confirm Password</label>
<input <input
type="text" type="password"
name="confirm_password" name="confirmPassword"
onChange={handleChange} onChange={handleChange}
onBlur={(e) => { onBlur={handleBlur}
handleBlur(e) value={values.confirmPassword}
setConfirmPwd(e.target.value) placeholder="Enter password"
if (pwd !== e.target.value) {
alert("Passwords do not Match")
}
}}
value={values.confirm_password}
placeholder="#@$!%@#"
/> />
{errors.confirm_password && touched.confirm_password && (<span className="form-error">{errors.confirm_password}</span>)} {errors.confirmPassword && touched.confirmPassword && <span className="form-error">{errors.confirmPassword}</span>}
</div> </div>
<div className="input-group"> <div className="input-group">
<label>Mobile No.</label> <label>Mobile No.</label>
<div className="contact-number"> <div className="contact-number">
<select <select
id="country_code" id="countryCode"
name="country_code" name="countryCode"
onChange={handleChange} onChange={handleChange}
onBlur={(e) => { onBlur={e => {
handleBlur(e) handleBlur(e);
setCountryCode(e.target.value) setCountryCode(e.target.value);
}} }}
style={{ width: "80px" }}> style={{ width: "80px" }}
>
<option value="+91">+91</option> <option value="+91">+91</option>
<option value="+44">+44</option> <option value="+44">+44</option>
</select> </select>
...@@ -196,31 +167,24 @@ const Signup = (props) => { ...@@ -196,31 +167,24 @@ const Signup = (props) => {
type="text" type="text"
name="mobile" name="mobile"
onChange={handleChange} onChange={handleChange}
onBlur={(e) => { onBlur={handleBlur}
handleBlur(e)
setMobileNo(e.target.value)
}}
value={values.mobile} value={values.mobile}
placeholder="#@$!%@#" placeholder="#@$!%@#"
style={{ flex: "0 100%" }} style={{ flex: "0 100%" }}
/> />
</div> </div>
{errors.mobile && touched.mobile && (<span className="form-error">{errors.mobile}</span>)} {errors.mobile && touched.mobile && <span className="form-error">{errors.mobile}</span>}
</div> </div>
{isOtpSent && ( {isOtpSent && (
<> <>
<div className="input-group"> <div className="input-group">
<label>OTP <span style={{ marginLeft: "190px" }}>00:30</span></label> <label>
OTP <span style={{ marginLeft: "190px" }}>00:30</span>
</label>
<div className="otp-input"> <div className="otp-input">
<OTPInput <OTPInput value={Otp} onChange={handleOTPChange} numInputs={4} separator={<span> </span>} renderInput={props => <input {...props} />} />
value={Otp}
onChange={handleOTPChange}
numInputs={4}
separator={<span> </span>}
renderInput={props => <input {...props} />}
/>
</div> </div>
{errors.otp && touched.otp && (<span className="form-error">{errors.otp}</span>)} {errors.otp && touched.otp && <span className="form-error">{errors.otp}</span>}
</div> </div>
<div> <div>
<p>4 digit OTP is been sent on your email address.</p> <p>4 digit OTP is been sent on your email address.</p>
...@@ -237,25 +201,24 @@ const Signup = (props) => { ...@@ -237,25 +201,24 @@ const Signup = (props) => {
</> </>
)} )}
<div className="input-group mb-3"> <div className="input-group mb-3">
<label className="check-container mb-0 pt-1" htmlFor="is_terms_checked"> <label className="check-container mb-0 pt-1" htmlFor="termsConditions">
<input <input
type="checkbox" type="checkbox"
id="is_terms_checked" id="termsConditions"
name="is_terms_checked" name="termsConditions"
className="check-box me-2" className="check-box me-2"
checked={values.is_terms_checked} checked={values.termsConditions}
onChange={e => { onChange={handleChange}
handleChange(e);
setTermsChecked(e.target.checked)
}}
onBlur={handleBlur} onBlur={handleBlur}
/> />
<span className="checkmark"></span>I Agree to the <Link href="">terms & conditions*</Link> <span className="checkmark"></span>I Agree to the <Link href="">terms & conditions*</Link>
</label> </label>
{errors.is_terms_checked && touched.is_terms_checked && (<span className="form-error">{errors.is_terms_checked}</span>)} <br/>
{errors.termsConditions && touched.termsConditions && <span className="form-error">{errors.termsConditions}</span>}
</div> </div>
<div className="input-group mb-0"> <div className="input-group mb-0">
<Button type="submit" className="btn btn-primary btn-submit" disabled={Object.keys(errors).length}> <Button type="submit" className="btn btn-primary btn-submit" disabled={!values.termsConditions && !isValid}>
Sign Up Now Sign Up Now
</Button> </Button>
</div> </div>
...@@ -281,7 +244,9 @@ const Signup = (props) => { ...@@ -281,7 +244,9 @@ const Signup = (props) => {
<div className="form-container"> <div className="form-container">
<div className="input-group mb-2"> <div className="input-group mb-2">
<Button type="button" className="btn btn-primary btn-submit" <Button
type="button"
className="btn btn-primary btn-submit"
// onClick={() => { // onClick={() => {
// router.push("/") // router.push("/")
// }} // }}
...@@ -295,7 +260,7 @@ const Signup = (props) => { ...@@ -295,7 +260,7 @@ const Signup = (props) => {
)} )}
</div> </div>
</Fragment> </Fragment>
) );
} };
export default Signup; export default Signup;
Styling with Markdown is supported
You are about to add 0 people to the discussion. Proceed with caution.
Finish editing this message first!