[ES-831] [ES-833] Fixed: Error messages are not getting disappeared f…

…or below scenarios. Fixed: Otp text boxes are not aligned properly when Otp length is increased 8 Signed-off-by: GurukiranP <[email protected]>
mosip · Feb 26, 2024 · 68b4b87 · 68b4b87
1 parent de893b8
commit 68b4b87
Show file tree

Hide file tree

Showing 2 changed files with 37 additions and 8 deletions.
diff --git 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")}
                         />
                       </FormControl>
                     </div>

diff --git 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<Error | null>(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",
                     }}