You are on page 1of 4

//passsword eye function

const [showPassword, setShowPassword] = useState(false);

const [showConfirmPassword, setShowConfirmPassword] = useState(false);

const togglePasswordVisibility = () => {

setShowPassword(!showPassword);

};

const toggleConfirmPasswordVisibility = () => {

setShowConfirmPassword(!showConfirmPassword);

};

<Row className="mb-1">

<Form.Label column lg={4} style={{ fontWeight: "650", fontStyle: "italic" }}>

<FontAwesomeIcon icon={faLock} style={{ marginRight: "5px", color: "black" }}/> Enter


Your Password: <span style={{ color: "red" }}>*</span>

</Form.Label>

<Col>

<Form.Group controlId="formPassword">

<div style={{ position: "relative" }}>

<Form.Control

type={showPassword ? "text" : "password"}

placeholder="Enter Password"

onChange={(event) =>
handleChange(event, "password") }

value={data.password}

isInvalid={ !!errorData.errorData?.response?.data?.password}

style={{ color: "black", fontWeight: 640 }}

/>

<span style={{

position: "absolute",

right: "10px",

top: "20px",

cursor: "pointer",}}

onClick={togglePasswordVisibility} >

{/* Eye icon to toggle password visibility */}

<FontAwesomeIcon

icon={showPassword ? faEye : faEyeLowVision}

style={{ color: "black" }}

/>

</span>

</div>

<Form.Control.Feedback type="invalid">

{errorData.errorData?.response?.data?.password}

</Form.Control.Feedback>

</Form.Group>

</Col>

</Row>
Gmail

{/* Email field */}

<Row className="mb-1">

<Form.Label column lg={4} style={{ fontWeight: "650", fontStyle: "italic" }} >

<FontAwesomeIcon icon={faEnvelope} style={{ marginRight: "5px", color: "black" }}/>


Enter Your Email: <span style={{ color: "red" }}>*</span>

</Form.Label>

<Col>

<Form.Group controlId="formEmail">

<Form.Control

type="email"

placeholder="Enter email"

onChange={(event) => handleChange(event, "email")}

value={data.email}

isInvalid={ !!errorData.errorData?.response?.data?.email }

style={{ color: "black", fontWeight: 640 }}

/>

<Form.Control.Feedback type="invalid">

{errorData.errorData?.response?.data?.email}
</Form.Control.Feedback>

</Form.Group>

</Col>

</Row>

You might also like