contentoh-components-library 21.0.71 → 21.0.74

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

@@ -1,171 +0,0 @@
-import { Container } from "./styles";
-import { GradientPanel } from "../../atoms/GradientPanel";
-import { useEffect, useState } from "react";
-import { LogoImage } from "../../atoms/LogoImage";
-import { ScreenHeader } from "../../atoms/ScreenHeader";
-import { GlobalColors, FontFamily } from "../../../global-files/variables";
-import { GeneralInput } from "../../atoms/GeneralInput";
-import { Button } from "../../atoms/GeneralButton";
-import { validateInput, validate } from "./utils";
-
-export const VerificationCodeResetPasswordLogin = (props) => {
-  const [resend, setResend] = useState(false);
-  const [awsError, setAwsError] = useState("");
-  const [emptyVerificationCode, setEmptyVerificationCode] = useState(false);
-  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);
-      setEmptyVerificationCode(false);
-      setResend(true);
-    } catch (err) {
-      setAwsError(err.code);
-      console.log(err.message);
-    }
-  };
-
-  useEffect(() => {
-    setInputCodeVerificationAll(
-      document.querySelectorAll("[id^='verificationCodeInput']")
-    );
-  }, []);
-
-  const loginRight = [
-    <LogoImage key="1" />,
-    <div className="credenciales" key={"2"}>
-      <ScreenHeader
-        fontFamily={FontFamily.AvenirNext}
-        color={GlobalColors.s5}
-        text={"Ingresa tus credenciales"}
-      />
-    </div>,
-    <div className="user" key="3">
-      {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
-            inputId={`verificationCodeInput${position}`}
-            inputType={"text"}
-            inputPlaceholder={"X"}
-            validateInput={validateInput}
-            inputsArray={inputCodeVerificationAll}
-            position={position}
-            maxLength="1"
-          />
-        ))}
-      </div>
-      {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 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) => {
-          let flag = validate(inputCodeVerificationAll);
-          checkCode(e, flag);
-          setEmptyVerificationCode(flag);
-        }}
-      />
-    </div>,
-    <div className="reset-password" key="6">
-       <p onClick={() => props.setPaso(10)}>Regresar...</p> 
-    </div>,
-  ];
-  return (
-    <Container>
-      <GradientPanel
-        componentsArray={loginRight}
-        panelType={"home-login"}
-        panelColor={GlobalColors.white}
-      />
-    </Container>
-  );
-};

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

@@ -1,54 +0,0 @@
-import styled from "styled-components";
-import { FontFamily, GlobalColors } from "../../../global-files/variables";
-
-export const Container = styled.div`
-  display: flex;
-  height: 100vh;
-  width: 50%;
-  align-items: center;
-  justify-content: center;
-  .button-center {
-    text-align: center;
-    .general-default-button {
-      width: 160px;
-    }
-  }
-  .reset-password {
-    text-align: center;
-    margin: 15px !important;
-    color: ${GlobalColors.secondary_magenta};
-    cursor: pointer;
-    font-weight: bold;
-    font-family: ${FontFamily.Raleway};
-    font-size: 13px;
-  }
-  .resend-code {
-    margin-top: 8px !important;
-    color: ${GlobalColors.magenta_s2};
-    font-family: ${FontFamily.AvenirNext};
-    font-size: 11px;
-    text-decoration: underline rgb(228, 81, 172);
-    cursor: pointer;
-    & + * {
-      margin-top: 30px;
-    }
-  }
-  .verification-code {
-    display: flex;
-    text-align: center;
-    margin: auto;
-    margin-top: 10px;
-    input[type="number"]::-webkit-inner-spin-button,
-    input[type="number"]::-webkit-outer-spin-button {
-      -webkit-appearance: none;
-      margin: 0;
-    }
-    input {
-      width: 70%;
-      text-align: center;
-    }
-  }
-  .resendTrue{
-    color: ${GlobalColors.exported};
-  }
-`;

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

@@ -1,54 +0,0 @@
-/**
- *
- * @param {event} e event received triggered by verification code input
- * @param {number} index index position from the verification code(VC) input array (i.e. digit 1,2,3 etc...)
- * @param {array<html nodes>} inputsArray array which contains every VC digit input (used to change focus on input change)
- */
-export const validateInput = (e, index, inputsArray) => {
-  let isValid = false;
-  const inputNotEmpty = e.target.value.length > 0;
-  if (inputNotEmpty) {
-    if (validateInputNumber(e) !== null) {
-      isValid = true;
-      nextInputFocus(inputsArray, index++);
-    }
-  }
-  return isValid ? e.target.value : "";
-};
-
-/**
- *
- * @param {event} e event received triggered by verification code input
- * @returns {boolean} if digit is a number
- */
-const validateInputNumber = (e) => {
-  return (e.target.value || String.fromCharCode(e.keyCode)).match(/[0-9]{1}/);
-};
-
-/**
- *
- * @param {array<html nodes>} inputsArray array which contains every VC digit input (used to change focus on input change)
- * @param {number} index index position from the verification code(VC) input array (i.e. digit 1,2,3 etc...)
- * changes focus to next input if digit typed is a number and there wasn't any before
- */
-const nextInputFocus = (inputsArray, index) => {
-  const button = document.getElementsByClassName("general-default-button");
-
-  inputsArray?.length && index === inputsArray?.length
-    ? button[0].focus()
-    : inputsArray[index]?.focus();
-};
-
-/**
- *
- * @param {array<html nodes>} inputsArray array which contains every VC digit input (used to check if there's any empty)
- * @param {function} setEmptyVerificationCode function to update flag which handles if there's an empty char
- * updates emptyVerificationFlag from father component
- */
-export const validate = (inputsArray) => {
-  let contInputEmpty = 0;
-  inputsArray.forEach((element) => {
-    element.value === "" ? 0 : contInputEmpty++;
-  });
-  return contInputEmpty !== inputsArray.length  
-};

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

@@ -1,11 +0,0 @@
-import { ChangePassword } from "./index";
-
-export default {
-  title: "Components/organisms/ChangePassword",
-  component: ChangePassword,
-};
-const Template = (args) => <ChangePassword {...args} />;
-
-export const ChangePasswordDefault = Template.bind({});
-
-ChangePasswordDefault.args = {};

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

@@ -1,77 +0,0 @@
-import { Container } from "./styles";
-import { LoginPasswordStrength } from "../../molecules/LoginPasswordStrength";
-import { useState } from "react";
-import { Button } from "../../atoms/GeneralButton";
-import { LogoImage } from "../../atoms/LogoImage";
-import { ScreenHeader } from "../../atoms/ScreenHeader";
-import { GlobalColors, FontFamily } from "../../../global-files/variables";
-import { GradientPanel } from "../../atoms/GradientPanel";
-
-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();
-    let password = document.querySelector("#newPasswordInput").value;
-    password.length < 8 ? setEmptyPassword(true) : setEmptyPassword(false);
-    let confirmPassword = document.querySelector("#confirmPasswordInput").value;
-    confirmPassword === ""
-      ? setEmptyConfirmPassword(true)
-      : setEmptyConfirmPassword(false);
-    if (password === confirmPassword) {
-      setMatchPasswords(true);
-    } else {
-      setMatchPasswords(false);
-    }
-    let valid = true;
-    if (
-      password.length < 8 ||
-      confirmPassword === "" ||
-      password !== confirmPassword
-    ) {
-      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"}>
-      <ScreenHeader
-        fontFamily={FontFamily.AvenirNext}
-        color={GlobalColors.s5}
-        text={"Ingresa tus credenciales"}
-      />
-    </div>,
-    <LoginPasswordStrength
-      emptyPassword={emptyPassword}
-      emptyConfirmPassword={emptyConfirmPassword}
-      matchPasswords={matchPasswords}
-      textTittle={"Ingresa tus credenciales"}
-      key="3"
-    />,
-    <div className="button-center" key="4">
-      <Button
-        buttonType={"general-default-button"}
-        label={"Enviar"}
-        onClick={(e) => validate(e)}
-      />
-    </div>,
-  ];
-  return (
-    <Container>
-      <GradientPanel
-        panelColor={GlobalColors.white}
-        componentsArray={loginRight}
-        panelType={"home-login"}
-      ></GradientPanel>
-    </Container>
-  );
-};

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

@@ -1,13 +0,0 @@
-import styled from "styled-components";
-
-export const Container = styled.div`
-  width: 50%;
-  height: 100vh;
-  .button-center {
-    display: flex;
-    justify-content: center;
-    .general-default-button {
-      width: 160px;
-    }
-  }
-`;