contentoh-components-library 21.0.28 → 21.0.31

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

@@ -1,78 +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 = () => {
-  const [emptyVerificationCode, setEmptyVerificationCode] = useState(false);
-  const [inputCodeVerificationAll, setInputCodeVerificationAll] = useState();
-  const inputPositions = [1, 2, 3, 4, 5, 6];
-
-  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">
-      <ScreenHeader
-        text={"Ingresa el código de verificación enviado a:"}
-        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>
-      )}
-    </div>,
-    <div className="resend-code" key="4">
-      <p>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)
-        }
-      />
-    </div>,
-    <div className="reset-password" key="6">
-      <p>Regresar...</p>
-    </div>,
-  ];
-  return (
-    <Container>
-      <GradientPanel
-        componentsArray={loginRight}
-        panelType={"home-login"}
-        panelColor={GlobalColors.white}
-      />
-    </Container>
-  );
-};

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

@@ -1,49 +0,0 @@
-import styled from "styled-components";
-import { FontFamily, GlobalColors } from "../../../global-files/variables";
-
-export const Container = styled.div`
-  display: flex;
-  height: 100%;
-  width: 50%;
-  .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;
-    }
-  }
-`;

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

@@ -1,56 +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, setEmptyVerificationCode) => {
-  let contInputEmpty = 0;
-  inputsArray.forEach((element) => {
-    element.value === "" ? 0 : contInputEmpty++;
-  });
-  contInputEmpty === inputsArray.length
-    ? setEmptyVerificationCode(false)
-    : setEmptyVerificationCode(true);
-};

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,63 +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 = () => {
-  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;
-    password.length < 8 ? setEmptyPassword(true) : setEmptyPassword(false);
-    const confirmPassword = document.querySelector(
-      "#confirmPasswordInput"
-    ).value;
-    confirmPassword === ""
-      ? setEmptyConfirmPassword(true)
-      : setEmptyConfirmPassword(false);
-    if (password === confirmPassword) {
-      setMatchPasswords(true);
-    } else {
-      setMatchPasswords(false);
-    }
-  };
-  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,16 +0,0 @@
-import styled from "styled-components";
-
-export const Container = styled.div`
-  display: flex;
-  width: 50%;
-  height: 100vh;
-  .button-center {
-    text-align: center;
-    position: absolute;
-    bottom: 5%;
-    left: calc(75% - 80px);
-    .general-default-button {
-      width: 160px;
-    }
-  }
-`;