contentoh-components-library 21.0.37 → 21.0.40

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

@@ -1,17 +1,52 @@
 import { Container } from "./styles";
 import { GradientPanel } from "../../atoms/GradientPanel";
-import { useState } from "react";
+import { useState, useEffect } from "react";
 import { ScreenHeader } from "../../atoms/ScreenHeader";
 import { GlobalColors, FontFamily } from "../../../global-files/variables";
 import { Button } from "../../atoms/GeneralButton";
 import { LoginPasswordStrength } from "../../molecules/LoginPasswordStrength";
 import { LogoImage } from "../../atoms/LogoImage";
 
-export const RegistrationSecondStep = () => {
+export const RegistrationSecondStep = (props) => {
+  const [passwordStrength, setPasswordStrenght] = useState(0);
+  const [passwordFinal, setPasswordFinal] = useState("");
+  const [repeatedPassword, setRepeatedPassword] = useState("");
+  const [passwordMatches, setPasswordMatches] = useState(false);
+  const [passwordToShort, setPasswordToShort] = useState(true);
+  const [showErrors, setShowErrors] = useState(false);
+  const [privacyCheck, setPrivacyCheck] = useState(false);
+  const [termsCheck, setTermsCheck] = useState(false);
+
   const [emptyPassword, setEmptyPassword] = useState(false);
   const [emptyConfirmPassword, setEmptyConfirmPassword] = useState(false);
   const [matchPasswords, setMatchPasswords] = useState(true);
-  const validate = async (e) => {
+
+  let nuevoUsuario = JSON.parse(sessionStorage.getItem("nuevoRegistro"));
+  let upperCaseLetters = /[A-Z]/g;
+  let numbers = /[0-9]/g;
+  let specialChar = /['!','@','#','$','%','^','&','*']/g;
+
+  // on passwordFinal update
+  useEffect(() => {
+    passwordFinal === repeatedPassword
+      ? setPasswordMatches(true)
+      : setPasswordMatches(false);
+    passwordFinal.length < 8
+      ? setPasswordToShort(true)
+      : setPasswordToShort(false);
+  }, [passwordFinal, repeatedPassword]);
+
+  // on repeatedPassword update
+  useEffect(() => {
+    passwordFinal === repeatedPassword
+      ? setPasswordMatches(true)
+      : setPasswordMatches(false);
+    repeatedPassword === ""
+      ? setEmptyConfirmPassword(true)
+      : setEmptyConfirmPassword(false);
+  }, [passwordFinal, repeatedPassword]);
+
+  const updateInfo = (e, newValue) => {
     e.preventDefault();
     const password = document.querySelector("#newPasswordInput").value;
     password.length < 8 ? setEmptyPassword(true) : setEmptyPassword(false);
@@ -26,7 +61,43 @@ export const RegistrationSecondStep = () => {
     } else {
       setMatchPasswords(false);
     }
+    switch (e.target.id) {
+      case "passwordInput":
+        setPasswordStrenght(0);
+        if (newValue.length > 8) {
+          setPasswordStrenght((passwordStrenght) => passwordStrenght + 1);
+        }
+        //Verificar si la contraseña contiene mayuscula, numeros y un caracter especial
+        newValue.match(upperCaseLetters) &&
+          setPasswordStrenght((passwordStrenght) => passwordStrenght + 1);
+        newValue.match(numbers) &&
+          setPasswordStrenght((passwordStrenght) => passwordStrenght + 1);
+        newValue.match(specialChar) &&
+          setPasswordStrenght((passwordStrenght) => passwordStrenght + 1);
+        //Actualizar value de la contraseña y guardar en sessionStorage
+        setPasswordFinal(newValue);
+        nuevoUsuario.password = newValue;
+        sessionStorage.setItem("nuevoRegistro", JSON.stringify(nuevoUsuario));
+        break;
+      case "confirmPasswordInput":
+        setRepeatedPassword(newValue);
+        break;
+      default:
+        return;
+    }
+  };
+  const validateForm = (evt) => {
+    evt.preventDefault();
+    setShowErrors(true);
+    let valid = true;
+    passwordToShort && (valid = false);
+    emptyConfirmPassword && (valid = false);
+    !passwordMatches && (valid = false);
+    !termsCheck && (valid = false);
+    !privacyCheck && (valid = false);
+    valid && props.setPaso(3);
   };
+  
   const loginRight = [
     <LogoImage key="1" />,
     <div className="credenciales" key={"2"}>
@@ -42,6 +113,8 @@ export const RegistrationSecondStep = () => {
       emptyConfirmPassword={emptyConfirmPassword}
       matchPasswords={matchPasswords}
       textTittle={"Ingresa tus credenciales"}
+      onChange={(e) => updateInfo(e, e.target.value)}
+      required={"required"}
     />,
     <label className="label-terms" key={"4"}>Términos y condiciones</label>,
     <div className="checkbox-terms" key={"5"}>

package/src/components/molecules/SignInLogin/styles.js

@@ -65,6 +65,7 @@ export const Container = styled.div`
         font-size: 13px;
         line-height: 24px;
         color: ${GlobalColors.s5};
+        cursor: pointer;
         span {
           color: ${GlobalColors.secondary_magenta};
         }

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

@@ -8,6 +8,9 @@ export const TagAndInput = ({
   value,
   inputPlaceHolder,
   inputId,
+  required,
+  onChange,
+  defaultValue,
 }) => {
   return (
     <Container
@@ -21,6 +24,9 @@ export const TagAndInput = ({
         inputType={inputType}
         inputValue={value}
         inputPlaceholder={inputPlaceHolder}
+        required={required}
+        onChange={onChange}
+        defaultValue={defaultValue}
       />
     </Container>
   );

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

@@ -8,11 +8,58 @@ 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 inputPositions = [1, 2, 3, 4, 5, 6];
 
+  useEffect(() => {
+    props.confirmationError !== "" && setEmptyVerificationCode(false);
+  }, [props.confirmationError]);
+
+  const checkCode = (e) => {
+    let valid = true;
+    e.preventDefault();
+    let code = "";
+    if (awsError === "" && !emptyVerificationCode) {
+      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));
+      setEmptyVerificationCode(false);
+      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 +76,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 +108,52 @@ 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) => {
+          validate(inputCodeVerificationAll, setEmptyVerificationCode);
+          checkCode(e);
+        }}
       />
     </div>,
     <div className="reset-password" key="6">
-      <p>Regresar...</p>
+      <p onClick={() => props.setPaso(10)}>Regresar...</p>
     </div>,
   ];
   return (