contentoh-components-library 21.0.74 → 21.0.78

package/src/components/atoms/VerticalSideMenuMainPage/index.js

@@ -0,0 +1,55 @@
+import { Container } from "./styles";
+import iconLogoContentoh from "../../../assets/images/verticalSideMenuMainPage/iconLogoContentoh.svg";
+import iconProduct from "../../../assets/images/verticalSideMenuMainPage/iconProduct.svg";
+import iconGroup from "../../../assets/images/verticalSideMenuMainPage/iconGroup.svg";
+import iconLogo from "../../../assets/images/verticalSideMenuMainPage/iconLogo.svg";
+import iconSpeedometer from "../../../assets/images/verticalSideMenuMainPage/iconSpeedometer.svg";
+import iconTask from "../../../assets/images/verticalSideMenuMainPage/iconTask.svg";
+import openMenu from "../../../assets/images/verticalSideMenuMainPage/openMenu.svg";
+import React, { useState, useEffect, useCallback } from "react";
+
+export const VerticalSideMenuMainPage = () => {
+  const [trueBar, setTrueBar] = useState(false);
+  const active = () => {
+    console.log(window.location.href);
+    //document.getElementById("slidea1").style.border= "1px solid rgb(227, 58, 169)";
+  };
+  return (
+    <Container bar={trueBar}>
+      <div className="navbar-top">
+        <img
+          src={trueBar ? iconLogoContentoh : iconLogo}
+          alt="Logo"
+          className="logo"
+        ></img>
+        <div className="option">
+          <div>
+            <img src={iconSpeedometer} alt="Speed Meter" width={"25px"}></img>
+          </div>
+          <div>
+            <img src={iconProduct} alt="Focus Product" width={"25px"}></img>
+          </div>
+          <div>
+            <img src={iconGroup} alt="Group" width={"25px"}></img>
+          </div>
+          <div>
+            <img src={iconLogo} alt="Logo" width={"25px"}></img>
+          </div>
+          <div>
+            <img src={iconTask} alt="Task" width={"25px"}></img>
+          </div>
+        </div>
+      </div>
+      <div>
+        <img
+          src={openMenu}
+          alt="Open Menu"
+          onClick={() => {
+            setTrueBar(true);
+            active();
+          }}
+        ></img>
+      </div>
+    </Container>
+  );
+};

package/src/components/atoms/VerticalSideMenuMainPage/styles.js

@@ -0,0 +1,45 @@
+import styled from "styled-components";
+
+export const Container = styled.div`
+  height: 100%;
+  width: ${({ bar }) => (bar ? 200 : 58)}px;
+  box-sizing: border-box;
+  padding: 23px 10px 70px 10px;
+  flex-direction: column;
+  justify-content: space-between;
+  overflow: auto;
+  border-radius: ${({ bar }) => (bar ? 20 : 50)}px;
+  background: linear-gradient(180deg, #e33aa9 0%, #3b1366 100%);
+  scrollbar-width: none;
+  display: flex;
+  text-align: center;
+  img {
+    cursor: pointer;
+    width:"25px" !important;
+  }
+  .navbar-top {
+    & + * {
+      margin-top: 15px;
+    }
+    .option {
+      div {
+        height: 38px;
+        display: flex;
+        justify-content: center;
+        border-radius: 100%;
+        & + * {
+          margin-top: 12px;
+        }
+      }
+      div:hover {
+        background: #e33aa9;
+      }
+    }
+    .logo {
+      cursor: default;
+      & + * {
+        margin-top: 225%;
+      }
+    }
+  }
+`;

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

@@ -9,46 +9,43 @@ export const CarouselImagesLogin = ({
   panelColor,
 }) => {
   const carouselStart = () => {
-    addEventListener("DOMContentLoaded", () => {
-      const images = panelImg;
-      let i = 1;
-      const img1 = document.querySelector("#img1");
-      const img2 = document.querySelector("#img2");
-      const divIndicadores = document.querySelector("#indicadores");
-      for (let index = 0; index < images.length; index++) {
-        const div = document.createElement("div");
-        div.classList.add("circles");
-        div.id = index;
-        divIndicadores.appendChild(div);
+    const images = panelImg;
+    let i = 1;
+    const img1 = document.querySelector("#img1");
+    const img2 = document.querySelector("#img2");
+    const divIndicadores = document.querySelector("#indicadores");
+    for (let index = 0; index < images.length; index++) {
+      const div = document.createElement("div");
+      div.classList.add("circles");
+      div.id = index;
+      divIndicadores.appendChild(div);
+    }
+    img1.src = images[0];
+    const circulos = document.querySelectorAll(".circles");
+    circulos[0].classList.add("resaltado");
+    const slideshow = () => {
+      img2.src = images[i];
+      const circulo_actual = Array.from(circulos).find((el) => el.id == i);
+      Array.from(circulos).forEach((cir) => cir.classList.remove("resaltado"));
+      circulo_actual.classList.add("resaltado");
+      img1.classList.add("right");
+      img2.classList.add("active");
+      i++;
+      if (i == images.length) {
+        i = 0;
       }
-      img1.src = images[0];
-      const circulos = document.querySelectorAll(".circles");
-      circulos[0].classList.add("resaltado");
-      const slideshow = () => {
-        img2.src = images[i];
-        const circulo_actual = Array.from(circulos).find((el) => el.id == i);
-        Array.from(circulos).forEach((cir) =>
-          cir.classList.remove("resaltado")
-        );
-        circulo_actual.classList.add("resaltado");
-        img1.classList.add("right");
-        img2.classList.add("active");
-        i++;
-        if (i == images.length) {
-          i = 0;
-        }
-        setTimeout(() => {
-          img1.src = img2.src;
-          img2.classList.remove("active");
-          img1.classList.remove("right");
-        }, 1000);
-      };
-      setInterval(slideshow, 4000);
-    });
+      setTimeout(() => {
+        img1.src = img2.src;
+        img2.classList.remove("active");
+        img1.classList.remove("right");
+      }, 1000);
+    };
+    setInterval(slideshow, 4000);
   };
-  useEffect(()=>{
+
+  useEffect(() => {
     carouselStart();
-  },[]) 
+  }, []);
 
   return (
     <Container panelColor={panelColor}>

package/src/components/molecules/EmailResetPasswordLogin/EmailResetPasswordLogin.stories.js

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

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

@@ -0,0 +1,85 @@
+import { Container } from "./styles";
+import { GradientPanel } from "../../atoms/GradientPanel";
+import { useState } from "react";
+import { LogoImage } from "../../atoms/LogoImage";
+import { ScreenHeader } from "../../atoms/ScreenHeader";
+import { GlobalColors, FontFamily } from "../../../global-files/variables";
+import { TagAndInput } from "../../molecules/TagAndInput";
+import { Button } from "../../atoms/GeneralButton";
+
+export const EmailResetPasswordLogin = (props) => {
+  const [emptyEmail, setEmptyEmail] = useState(false);
+  const [invalidEmail, setInvalidEmail] = useState(false);
+  const [showErrors, setShowErrors] = useState(false);
+  const [awsError, setAwsError] = useState("");
+
+  const validate = async (e) => {
+    let valid = true;
+    setShowErrors(true);
+    e.preventDefault();
+    const email = document.querySelector("#emailInput").value.trim();
+    email === "" ? setEmptyEmail(true) : setEmptyEmail(false);
+    !/^[a-zA-Z0-9.!#$%&'*+/=?^_`{|}~-]+@[a-zA-Z0-9-]+(?:\.[a-zA-Z0-9-]+)*$/.test(
+      email
+    )
+      ? setInvalidEmail(true)
+      : setInvalidEmail(false);
+    emptyEmail && (valid = false);
+    invalidEmail && (valid = false);
+    if (valid) {
+      try {
+        await props.Auth.forgotPassword(email);
+        sessionStorage.setItem("email", JSON.stringify(email));
+        sessionStorage.setItem("resetPasswordProcess", JSON.stringify("true"));
+        props.setPaso(5);
+      } catch (err) {
+        setAwsError(err.code);
+      }
+    }
+  };
+
+  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">
+      <TagAndInput
+        inputType={"text"}
+        inputId={"emailInput"}
+        label={"Nombre de usuario"}
+        inputPlaceHolder={"username@contentoh.com"}
+      />
+      {showErrors && emptyEmail && <label>Ingrese su correo</label>}
+      {showErrors && invalidEmail && !emptyEmail && (
+        <label>Ingrese un correo valido</label>
+      )}
+      {showErrors && awsError === "LimitExceededException" && (
+        <label>Has cambiado la contraseña recientemente, intenta despues</label>
+      )}
+    </div>,
+    <div className="button-center" key="4">
+      <Button
+        buttonType={"general-default-button"}
+        label={"Enviar"}
+        onClick={(e) => validate(e)}
+      />
+    </div>,
+    <div className="back-login" key="5">
+      <p onClick={() => props.setPaso(7)}>Regresar...</p>
+    </div>,
+  ];
+  return (
+    <Container>
+      <GradientPanel
+        componentsArray={loginRight}
+        panelType={"home-login"}
+        panelColor={GlobalColors.white}
+      />
+    </Container>
+  );
+};

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

@@ -0,0 +1,23 @@
+import styled from "styled-components";
+import { FontFamily, GlobalColors } from "../../../global-files/variables";
+
+export const Container = styled.div`
+  display: flex;
+  width: 50%;
+  height: 100vh;
+    .button-center {
+      text-align: center;
+      .general-default-button {
+        width: 160px;
+      }
+    }
+    .back-login {
+      text-align: center;
+      margin: 15px !important;
+      color: ${GlobalColors.secondary_magenta};
+      cursor: pointer;
+      font-weight: bold;
+      font-family: ${FontFamily.Raleway};
+      font-size: 13px;
+    }
+`;

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

@@ -1,15 +1,18 @@
 import { Container, ItemPasswordStrength, Password } from "./styles";
 import { useEffect, useState } from "react";
 import { TagAndInput } from "../TagAndInput";
+
 export const LoginPasswordStrength = ({
   emptyPassword,
   emptyConfirmPassword,
   matchPasswords,
+  required,
 }) => {
   const [passwordStrength, setPasswordStrength] = useState(0);
   let upperCaseLetters = /[A-Z]/g;
   let numbers = /[0-9]/g;
   let specialChar = /[‘!’,‘@’,‘#’,‘$’,‘%’,‘^’,‘&’,‘*’]/g;
+
   useEffect(() => {
     const inputValue = document.getElementById("newPasswordInput");
     inputValue.addEventListener(
@@ -20,6 +23,7 @@ export const LoginPasswordStrength = ({
       false
     );
   }, []);
+
   const updateInfo = (e, newValue) => {
     switch (e.target.id) {
       case "newPasswordInput":
@@ -35,25 +39,25 @@ export const LoginPasswordStrength = ({
         newValue.match(specialChar) &&
           setPasswordStrength((passwordStrength) => passwordStrength + 1);
         break;
-      case "confirmPasswordInput":
-        break;
       default:
         return;
     }
   };
+
   return (
     <Container>
-      <div className="user" key={"3"}>
+      <div className="user">
         <TagAndInput
           inputType={"password"}
           inputId={"newPasswordInput"}
           label={"Ingrese su nueva contraseña"}
+          isRequired={required}
         />
         {emptyPassword && (
           <label>La contraseña debe ser minimo de 8 caracteres</label>
         )}
       </div>
-      <div className="divPasswordStrength" key={"4"}>
+      <div className="divPasswordStrength">
         <ItemPasswordStrength paso={1}>
           <Password level={1} passwordStrength={passwordStrength} />
           {passwordStrength === 1 && <p>Baja</p>}
@@ -71,11 +75,12 @@ export const LoginPasswordStrength = ({
           {passwordStrength === 4 && <p>Fuerte</p>}
         </ItemPasswordStrength>
       </div>
-      <div className="user" key={"5"}>
+      <div className="user">
         <TagAndInput
           inputType={"password"}
           inputId={"confirmPasswordInput"}
           label={"Confirme la nueva contraseña"}
+          isRequired={required}
         />
         {emptyConfirmPassword && !emptyPassword && (
           <label>Confirme la contraseña</label>
@@ -86,4 +91,4 @@ export const LoginPasswordStrength = ({
       </div>
     </Container>
   );
-};
+};

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

@@ -3,6 +3,7 @@ import { FontFamily, GlobalColors } from "../../../global-files/variables";
 
 export const Container = styled.div`
   width: 100%;
+  margin-bottom: 15px;
   .divPasswordStrength {
     width: 100%;
     display: flex;
@@ -20,6 +21,9 @@ export const Container = styled.div`
     font-family: ${FontFamily.Raleway_700};
     font-size: 11px;
   }
+  & + * {
+    margin-top: 20px;
+  }
 `;
 
 export const Password = styled.div`
@@ -84,4 +88,4 @@ export const ItemPasswordStrength = styled.div`
       }
     }};
   }
-`;
+`;

package/src/components/molecules/LogoLoading/Loading.stories.js

@@ -0,0 +1,10 @@
+import { LogoLoading } from "./index";
+
+export default {
+  title: "Components/molecules/LogoLoading",
+  component: LogoLoading,
+};
+const Template = (args) => <LogoLoading {...args} />;
+export const LogoLoadingDefault = Template.bind({});
+
+LogoLoadingDefault.args = {};

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

@@ -0,0 +1,12 @@
+import { Container } from "./styles";
+import { Loading } from "../../atoms/Loading";
+import { LogoImage } from "../../atoms/LogoImage";
+
+export const LogoLoading = () => {
+  return (
+    <Container>
+      <LogoImage/>
+      <Loading/>
+    </Container>
+  );
+};

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

@@ -0,0 +1,16 @@
+import styled from "styled-components";
+
+export const Container = styled.div`
+  height: 100vh;
+  width: 50%;
+  padding-top: 25%;
+  .logo {
+    text-align: center;
+    img {
+      width: 65%;
+    }
+  }
+  .loading {
+    height: 10%;
+  }
+`;

package/src/components/molecules/RegistrationFirstStep/RegistrationFirstStep.stories.js

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