Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

routes fixed #1416

Closed
wants to merge 2 commits into from
+545 −82
Closed

routes fixed #1416

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
812c00b
routes fixed
shruthi-monika Sep 12, 2024
7d21baf
password initial feature
shruthi-monika Sep 13, 2024
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
186 changes: 107 additions & 79 deletions src/features/default/src/Components/NewOnboarding/VerifyEmail.jsx
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -31,6 +31,10 @@ import {
import { CountdownCircleTimer } from "react-countdown-circle-timer";
import { useHistory } from "react-router-dom";
import { FarmStackContext } from "common/components/context/DefaultContext/FarmstackProvider";
import Visibility from '@mui/icons-material/Visibility';
import VisibilityOff from '@mui/icons-material/VisibilityOff';
import IconButton from '@mui/material/IconButton';
import InputAdornment from '@mui/material/InputAdornment';

const VerifyEmailStep = (props) => {
const { callLoader, callToast } = useContext(FarmStackContext);
Expand All @@ -43,13 +47,22 @@ const VerifyEmailStep = (props) => {
const [loginError, setLoginError] = useState("");
const [emailId, setEmailId] = useState("");
const [otp, setOtp] = useState("");
const [isValidEmailSent, setIsValidEmailSent] = useState(false);
// const [isValidEmailSent, setIsValidEmailSent] = useState(false);
const [gotOtp, setGotOtp] = useState(false);
const [key, setKey] = useState(0);

const [resend, showResend] = useState(false);
const [timer, showTimer] = useState(false);
const [agreement, showAgreement] = useState(true);
const [showPassword, setShowPassword] = useState(false);

const handleClickShowPassword = () => {
setShowPassword(!showPassword);
};

const handleMouseDownPassword = (event) => {
event.preventDefault();
};

const history = useHistory();

Expand Down Expand Up @@ -81,7 +94,7 @@ const VerifyEmailStep = (props) => {
console.log(
"🚀 ~ file: VerifyEmail.jsx:80 ~ .then ~ response:",
isEmailValid,
!isValidEmailSent,
// !isValidEmailSent,
agreementChecked,
response
);
Expand All @@ -94,7 +107,7 @@ const VerifyEmailStep = (props) => {
response?.data?.message ? response?.data?.message : "Enter Otp"
);
// setTimer(10);
setIsValidEmailSent(true);
// setIsValidEmailSent(true);
} else if (action == "otp") {
callLoader(false);
console.log(action, response);
Expand Down Expand Up @@ -288,50 +301,102 @@ const VerifyEmailStep = (props) => {
return (
<div style={{ margin: mobile ? "30px" : "", minHeight: "400px" }}>
<div className={styles.email_id_label}>
{" "}
{isValidEmailSent ? "Enter the OTP" : "Enter your email Id"}
</div>

<div className={styles.email_id_sub_label}>
{isValidEmailSent
? "we sent you the otp, please check your email."
: "We will send you otp to verify your email id."}
Enter your email ID and password to seamlessly sign in.
</div>
<div className={styles.inputs}>
<TextField
fullWidth
placeholder={isValidEmailSent ? "Enter 6 digit OTP" : "Enter mail id"}
placeholder={"Enter mail id"}
id="email_id_for_login"
data-testid="email_id_for_login_test"
label={isValidEmailSent ? "Enter 6 digit OTP" : "Enter mail id"}
label={"Enter mail id"}
variant="outlined"
value={isValidEmailSent ? otp : emailId}
onChange={(e) =>
!isValidEmailSent
? setEmailId(e.target.value.toLowerCase())
: setOtp(
e.target.value.length <= 6 && !isNaN(e.target.value)
? e.target.value
: otp // If the input is not a valid 6-digit number, keep the current value
)
}
// value={emailId}
// onChange={(e) =>
// !isValidEmailSent
// ? setEmailId(e.target.value.toLowerCase())
// : setOtp(
// e.target.value.length <= 6 && !isNaN(e.target.value)
// ? e.target.value
// : otp // If the input is not a valid 6-digit number, keep the current value
// )
// }
required
onKeyDown={(e) => {
console.log(e.key);
if (e.key == " ") {
e.preventDefault();
} else if (e.key == "Enter") {
if (!isValidEmailSent && emailId && agreementChecked) {
handleSubmit("email");
} else if (isValidEmailSent && otp) {
handleSubmit("otp");
}
}
// onKeyDown={(e) => {
// console.log(e.key);
// if (e.key == " ") {
// e.preventDefault();
// } else if (e.key == "Enter") {
// if (!isValidEmailSent && emailId && agreementChecked) {
// handleSubmit("email");
// } else if (isValidEmailSent && otp) {
// handleSubmit("otp");
// }
// }
// }}
error={loginError ? true : false}
helperText={loginError}
/>
</div>
<div className={styles.inputs}>
<TextField
fullWidth
placeholder={"Enter your password"}
id="email_id_for_login"
data-testid="email_id_for_login_test"
label={"Enter your password"}
variant="outlined"
type={showPassword ? "text" : "password"}
// value={}
// onChange={(e) =>
// !isValidEmailSent
// ? setEmailId(e.target.value.toLowerCase())
// : setOtp(
// e.target.value.length <= 6 && !isNaN(e.target.value)
// ? e.target.value
// : otp // If the input is not a valid 6-digit number, keep the current value
// )
// }
required
// onKeyDown={(e) => {
// console.log(e.key);
// if (e.key == " ") {
// e.preventDefault();
// } else if (e.key == "Enter") {
// if (!isValidEmailSent && emailId && agreementChecked) {
// handleSubmit("email");
// } else if (isValidEmailSent && otp) {
// handleSubmit("otp");
// }
// }
// }}
InputProps={{
endAdornment: (
<InputAdornment position="end">
<IconButton
aria-label="toggle password visibility"
onClick={handleClickShowPassword}
onMouseDown={handleMouseDownPassword}
edge="end"
>
{showPassword ? <VisibilityOff /> : <Visibility />}
</IconButton>
</InputAdornment>
),
}}
error={loginError ? true : false}
helperText={loginError}
/>
</div>
<div className={styles.resend_otp_button + " " + global_style.font700}>
<Button
data-testid="resend-otp-button-test"
onClick={(e) => hanleResendOTp(e)}
className={styles.resend_main_button + " " + global_style.blue}
>
Forget Password?
</Button>
</div>
{agreement && (
<div className={styles.agreement}>
<Checkbox
Expand All @@ -353,43 +418,6 @@ const VerifyEmailStep = (props) => {
</span>
</div>
)}
{timer && isValidEmailSent && (
<div
style={{
maxWidth: "564px",
margin: "auto",
display: "flex",
justifyContent: "right",
}}
>
<CountdownCircleTimer
data-testid="timer-circle-test"
id={"countdown"}
key={key}
size={40}
isPlaying
duration={props.timer ?? 120}
strokeWidth={6}
colors={["#00A94F", "#A30000"]}
colorsTime={props.timer ? [props.timer, 0] : [120, 0]}
children={children}
onComplete={() => {
handleStates("resend");
}}
></CountdownCircleTimer>
</div>
)}
{isValidEmailSent && resend && (
<div className={styles.resend_otp_button + " " + global_style.font700}>
<Button
data-testid="resend-otp-button-test"
onClick={(e) => hanleResendOTp(e)}
className={styles.resend_main_button + " " + global_style.blue}
>
Resend OTP
</Button>
</div>
)}

<div className={styles.send_otp_div}>
<Button
Expand All @@ -400,20 +428,20 @@ const VerifyEmailStep = (props) => {
// ? false
// : true
// }
onClick={() =>
!isValidEmailSent && emailId
? handleSubmit("email")
: isValidEmailSent && otp
? handleSubmit("otp")
: ""
}
// onClick={() =>
// !isValidEmailSent && emailId
// ? handleSubmit("email")
// : isValidEmailSent && otp
// ? handleSubmit("otp")
// : ""
// }
className={global_style.primary_button + " " + styles.send_otp}
id="send-otp-btn"
data-testid="send-otp-btn-test"
disabled={!agreementChecked ? true : false}
>
{" "}
{!isValidEmailSent ? "Send OTP" : "Submit"}
{"Submit"}
</Button>
</div>
</div>
Expand Down
Loading
Loading