npm - contentoh-components-library - Versions diffs - 21.0.74 → 21.0.75 - Mend

contentoh-components-library 21.0.74 → 21.0.75

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (102) hide show

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

@@ -0,0 +1,54 @@
+/**
+ *
+ * @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 ADDED Viewed

@@ -0,0 +1,11 @@
+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 ADDED Viewed

@@ -0,0 +1,77 @@
+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 ADDED Viewed

@@ -0,0 +1,13 @@
+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;
+    }
+  }
+`;

package/src/index.js CHANGED Viewed

@@ -11,32 +11,45 @@ export * from "./components/atoms/GeneralButton/index";
 export * from "./components/atoms/GeneralInput/index";
 export * from "./components/atoms/GeneralTextBox/index";
 export * from "./components/atoms/GradientPanel/index";
+export * from "./components/atoms/Loading/index";
+export * from "./components/atoms/LogoImage/index";
 export * from "./components/atoms/PriorityFlag/index";
 export * from "./components/atoms/ProductImage/index";
 export * from "./components/atoms/ProgressBar/index";
 export * from "./components/atoms/ScreenHeader/index";
 export * from "./components/atoms/SideMenuButton/index";
+export * from "./components/atoms/SliderToolTip/index";
 export * from "./components/atoms/StatusTag/index";
 export * from "./components/atoms/TabSection/index";
 export * from "./components/atoms/ValidationPanel/index";
+export * from "./components/atoms/VerticalSideMenuMainPage/index";
 //molecules
 export * from "./components/molecules/AvatarAndValidation/index";
+export * from "./components/molecules/CarouselImagesLogin";
 export * from "./components/molecules/EditionActiveImage/index";
+export * from "./components/molecules/EmailResetPasswordLogin/index";
 export * from "./components/molecules/FeaturesBar/index";
 export * from "./components/molecules/GalleryElement/index";
 export * from "./components/molecules/HeaderTop/index";
 export * from "./components/molecules/ImageSelector/index";
+export * from "./components/molecules/LoginPasswordStrength/index";
+export * from "./components/molecules/LogoLoading/index";
 export * from "./components/molecules/PlanSelection/index";
 export * from "./components/molecules/ProductNameHeader/index";
+export * from "./components/molecules/RegistrationFirstStep/index";
+export * from "./components/molecules/RegistrationSecondStep/index";
+export * from "./components/molecules/RegistrationThirdStep/index";
+export * from "./components/molecules/SignInLogin/index";
 export * from "./components/molecules/StatusAsignationInfo/index";
 export * from "./components/molecules/TableHeader/index";
 export * from "./components/molecules/TableRow/index";
 export * from "./components/molecules/TabsMenu/index";
 export * from "./components/molecules/TagAndInput/index";
-export * from "./components/molecules/TextAndGradient/index";
+export * from "./components/molecules/VerificationCodeResetPasswordLogin/index";
 //organisms
+export * from "./components/organisms/ChangePassword/index";
 export * from "./components/organisms/Fullplan/index";
 export * from "./components/organisms/FullProductNameHeader/index";
 export * from "./components/organisms/FullTabsMenu/index";
@@ -47,7 +60,14 @@ export * from "./components/organisms/InputGroup/index";
 export * from "./components/organisms/ProductImageModal/index";
 //pages
+export * from "./components/pages/ChangePasswordLogin";
+export * from "./components/pages/CustomerLogin";
 export * from "./components/pages/CustomerType";
+export * from "./components/pages/EmailResetPassword";
 export * from "./components/pages/OnboardPlan";
+export * from "./components/pages/RegistrationLoginFirstStep";
+export * from "./components/pages/RegistrationLoginSecondStep";
+export * from "./components/pages/RegistrationLoginThirdStep";
 export * from "./components/pages/RetailerProductEdition";
 export * from "./components/pages/ProviderProductEdition";
+export * from "./components/pages/VerificationCodeResetPassword";