contentoh-components-library 21.0.39 → 21.0.42

package/src/components/molecules/VerificationCodeResetPasswordLogin/index.js

@@ -8,11 +8,59 @@ import { GeneralInput } from "../../atoms/GeneralInput";
 import { Button } from "../../atoms/GeneralButton";
 import { validateInput, validate } from "./utils";
 
-export const VerificationCodeResetPasswordLogin = () => {
+export const VerificationCodeResetPasswordLogin = (props) => {
+  const [resend, setResend] = useState(false);
+  const [awsError, setAwsError] = useState("");
   const [emptyVerificationCode, setEmptyVerificationCode] = useState(false);
-  const [inputCodeVerificationAll, setInputCodeVerificationAll] = useState();
+  const [inputCodeVerificationAll, setInputCodeVerificationAll] = useState(
+    document.querySelectorAll("[id^='verificationCodeInput']")
+  );
   const inputPositions = [1, 2, 3, 4, 5, 6];
 
+  useEffect(() => {
+    props.confirmationError !== "" && setEmptyVerificationCode(false);
+  }, [props.confirmationError]);
+
+  const checkCode = (e, flag) => {
+    let valid = true;
+    e.preventDefault();
+    let code = "";
+    if (awsError === "" && !flag) {
+      inputPositions.map(
+        (position) =>
+          (code =
+            code +
+            document.querySelector(`#verificationCodeInput${position}`).value)
+      );
+      if (sessionStorage.getItem("resetError")) {
+        JSON.parse(sessionStorage.getItem("confirmationCode")) === code &&
+          (valid = false);
+      }
+      sessionStorage.setItem("confirmationCode", JSON.stringify(code));
+      valid &&
+      !sessionStorage.getItem("resetPasswordProcess") &&
+      props.setPaso(6);
+      valid &&
+      sessionStorage.getItem("resetPasswordProcess") &&
+      props.setPaso(8);
+    }
+  };
+
+  const validateResend = async (e) => {
+    e.preventDefault();
+    const email = JSON.parse(sessionStorage.getItem("email"));
+    try {
+      await props.Auth.forgotPassword(email);
+      sessionStorage.setItem("email", JSON.stringify(email));
+      sessionStorage.setItem("resetPasswordProcess", JSON.stringify("true"));
+      props.setPaso(5);
+      setResend(true);
+    } catch (err) {
+      setAwsError(err.code);
+      console.log(err.message);
+    }
+  };
+
   useEffect(() => {
     setInputCodeVerificationAll(
       document.querySelectorAll("[id^='verificationCodeInput']")
@@ -29,10 +77,22 @@ export const VerificationCodeResetPasswordLogin = () => {
       />
     </div>,
     <div className="user" key="3">
-      <ScreenHeader
-        text={"Ingresa el código de verificación enviado a:"}
-        headerType={"input-name-header"}
-      />
+      {sessionStorage.getItem("email") && (
+        <ScreenHeader
+          text={`Ingrese el código de verificación enviado a: ${JSON.parse(
+            sessionStorage.getItem("email")
+          )}`}
+          headerType={"input-name-header"}
+        />
+      )}
+      {!sessionStorage.getItem("email") && (
+        <ScreenHeader
+           text={`Ingrese código de verificación enviado a: ${
+             JSON.parse(sessionStorage.getItem("nuevoRegistro")).email
+           }`}
+          headerType={"input-name-header"}
+        />
+      )}
       <div className="verification-code">
         {inputPositions.map((position) => (
           <GeneralInput
@@ -49,21 +109,53 @@ export const VerificationCodeResetPasswordLogin = () => {
       {emptyVerificationCode && (
         <label>Ingrese su código de verificación</label>
       )}
+      {sessionStorage.getItem("resetError") && (
+        <label>Código de verifiación incorrecto</label>
+      )}
+      {props.confirmationError === "LimitExceededException" &&
+        !emptyVerificationCode && (
+          <label>Haz realizado demasiados intentos, intentalo más tarde</label>
+        )}
+      {props.confirmationError === "CodeMismatchException" &&
+        !emptyVerificationCode && (
+          <label>Código de verificación incorrecto</label>
+        )}
+      {props.confirmationError === "ExpiredCodeException" &&
+        !emptyVerificationCode && (
+          <label>El código ingresado está expirado</label>
+        )}
+      {props.confirmationError === "InternalErrorException" &&
+        !emptyVerificationCode && (
+          <label>Algo salió mal, porfavor vuelva a intentarlo</label>
+        )}
+      {awsError === "LimitExceededException" && (
+        <label>Haz realizado demasiados intentos, intentalo más tarde</label>
+      )}
+      {awsError === "InternalErrorException" && (
+        <label>Algo salió mal, porfavor vuelva a intentarlo</label>
+      )}
+      {resend && awsError === "" && (
+        <label className="resendTrue">
+          Se reenvió el código de verificación correctamente
+        </label>
+      )}
     </div>,
     <div className="resend-code" key="4">
-      <p>Reenviar código de verificación</p>
+      <p onClick={(e) => validateResend(e)}>Reenviar código de verificación</p>
     </div>,
     <div className="button-center" key="5">
       <Button
         buttonType={"general-default-button"}
         label={"Enviar"}
-        onClick={(e) =>
-          validate(inputCodeVerificationAll, setEmptyVerificationCode)
-        }
+        onClick={(e) => {
+          let flag = validate(inputCodeVerificationAll);
+          checkCode(e, flag);
+          setEmptyVerificationCode(flag);
+        }}
       />
     </div>,
     <div className="reset-password" key="6">
-      <p>Regresar...</p>
+       <p onClick={() => props.setPaso(10)}>Regresar...</p> 
     </div>,
   ];
   return (

package/src/components/molecules/VerificationCodeResetPasswordLogin/utils.js

@@ -45,12 +45,10 @@ const nextInputFocus = (inputsArray, index) => {
  * @param {function} setEmptyVerificationCode function to update flag which handles if there's an empty char
  * updates emptyVerificationFlag from father component
  */
-export const validate = (inputsArray, setEmptyVerificationCode) => {
+export const validate = (inputsArray) => {
   let contInputEmpty = 0;
   inputsArray.forEach((element) => {
     element.value === "" ? 0 : contInputEmpty++;
   });
-  contInputEmpty === inputsArray.length
-    ? setEmptyVerificationCode(false)
-    : setEmptyVerificationCode(true);
+  return contInputEmpty !== inputsArray.length  
 };

package/src/components/organisms/ChangePassword/index.js

@@ -7,15 +7,17 @@ import { ScreenHeader } from "../../atoms/ScreenHeader";
 import { GlobalColors, FontFamily } from "../../../global-files/variables";
 import { GradientPanel } from "../../atoms/GradientPanel";
 
-export const ChangePassword = () => {
+export const ChangePassword = (props) => {
+  
   const [emptyPassword, setEmptyPassword] = useState(false);
   const [emptyConfirmPassword, setEmptyConfirmPassword] = useState(false);
   const [matchPasswords, setMatchPasswords] = useState(true);
+
   const validate = async (e) => {
     e.preventDefault();
-    const password = document.querySelector("#newPasswordInput").value;
+    let password = document.querySelector("#newPasswordInput").value;
     password.length < 8 ? setEmptyPassword(true) : setEmptyPassword(false);
-    const confirmPassword = document.querySelector(
+    let confirmPassword = document.querySelector(
       "#confirmPasswordInput"
     ).value;
     confirmPassword === ""
@@ -26,7 +28,18 @@ export const ChangePassword = () => {
     } else {
       setMatchPasswords(false);
     }
+    let valid = true;
+    emptyPassword && (valid = false);
+    emptyConfirmPassword && (valid = false);
+    !matchPasswords && (valid = false);
+    if (valid) {
+      sessionStorage.setItem("newPassword", JSON.stringify(password));
+      !sessionStorage.getItem("resetPasswordProcess")
+        ? props.setPaso(9)
+        : props.setPaso(11);
+    }
   };
+
   const loginRight = [
     <LogoImage key="1" />,
     <div className="credenciales" key={"2"}>

package/src/components/organisms/ChangePassword/styles.js

@@ -5,10 +5,9 @@ export const Container = styled.div`
   width: 50%;
   height: 100vh;
   .button-center {
-    text-align: center;
     position: absolute;
     bottom: 5%;
-    left: calc(75% - 80px);
+    left: 75%;
     .general-default-button {
       width: 160px;
     }