diff --git a/signup-ui/src/pages/ResetPasswordPage/ResetPassword/ResetPassword.tsx b/signup-ui/src/pages/ResetPasswordPage/ResetPassword/ResetPassword.tsx index 06bf0251..21d2c65f 100644 --- a/signup-ui/src/pages/ResetPasswordPage/ResetPassword/ResetPassword.tsx +++ b/signup-ui/src/pages/ResetPasswordPage/ResetPassword/ResetPassword.tsx @@ -200,6 +200,7 @@ export const ResetPassword = ({ methods, settings }: ResetPasswordProps) => { maxLength={ settings.response.configs["password.length.max"] } + onBlur={() => trigger("confirmNewPassword")} /> diff --git a/signup-ui/src/pages/SignUpPage/Otp/Otp.tsx b/signup-ui/src/pages/SignUpPage/Otp/Otp.tsx index e548bd95..697d584f 100644 --- a/signup-ui/src/pages/SignUpPage/Otp/Otp.tsx +++ b/signup-ui/src/pages/SignUpPage/Otp/Otp.tsx @@ -68,6 +68,40 @@ export const Otp = ({ methods, settings }: OtpProps) => { const [challengeVerificationError, setChallengeVerificationError] = useState(null); + var pinInputStyle: object; + + var pinInputStyles = { + margin: "0px 02px", + border: "2px solid #C1C1C1", + color: "#000000", + borderRadius: "8px" + } + + if (window.screen.availWidth <= 425) { + let inputBoxSizeMd = { + width: "48px", + height: "48px" + } + let inputBoxSizeSm = { + width: "32px", + height: "32px", + overflow: "auto" + } + if (settings.response.configs["otp.length"] <= 6) { + pinInputStyle = {...pinInputStyles, ...inputBoxSizeMd} + } + else { + pinInputStyle = {...pinInputStyles, ...inputBoxSizeSm} + } + } + else { + let inputBoxSize = { + width: "55px", + height: "52px" + } + pinInputStyle = {...pinInputStyles, ...inputBoxSize} + } + useEffect(() => { resetField("otp", { defaultValue: signUpFormDefaultValues.otp }); }, [resetField]); @@ -103,6 +137,7 @@ export const Otp = ({ methods, settings }: OtpProps) => { const handleOtpChange = (otp: string) => { setValue("otp", otp, { shouldValidate: true, shouldTouch: true }); + setChallengeVerificationError(null); }; const handleResendOtp = useCallback( @@ -290,14 +325,7 @@ export const Otp = ({ methods, settings }: OtpProps) => { padding: "5px 0px", fontSize: "24px", }} - inputStyle={{ - width: "55px", - height: "52px", - margin: "0px 02px", - border: "2px solid #C1C1C1", - color: "#000000", - borderRadius: "8px", - }} + inputStyle={pinInputStyle} inputFocusStyle={{ border: "2px solid #676766", }}