contentoh-components-library 21.0.20 → 21.0.23

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/Login/Login.stories.js

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

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

@@ -0,0 +1,79 @@
+import { Container } from "./styles";
+import { LogoImage } from "../../atoms/LogoImage/index";
+import { ScreenHeader } from "../../atoms/ScreenHeader/index";
+import { Button } from "../../atoms/GeneralButton/index";
+import { CheckBox } from "../../atoms/CheckBox/index";
+import { TagAndInput } from "../TagAndInput";
+import { FontFamily, GlobalColors } from "../../../global-files/variables";
+import { useState } from "react";
+
+export const Login = () => {
+  const [emptyEmail, setEmptyEmail] = useState(false);
+  const [invalidEmail, setInvalidEmail] = useState(false);
+  const [emptyPassword, setEmptyPassword] = useState(false);
+  const validate = async (e) => {
+    e.preventDefault();
+    const email = document.querySelector("#emailInput").value;
+    const password = document.querySelector("#passwordInput").value;
+    email === "" ? setEmptyEmail(true) : setEmptyEmail(false);
+    password === "" ? setEmptyPassword(true) : setEmptyPassword(false);
+    !/^[a-zA-Z0-9.!#$%&'*+/=?^_`{|}~-]+@[a-zA-Z0-9-]+(?:\.[a-zA-Z0-9-]+)*$/.test(
+      email
+    )
+      ? setInvalidEmail(true)
+      : setInvalidEmail(false);
+  };
+  return (
+    <Container className={"home-login"}>
+      <div className="main-container">
+        <LogoImage />
+        <div className="credenciales">
+          <ScreenHeader
+            fontFamily={FontFamily.AvenirNext}
+            color={GlobalColors.s5}
+            text={"Ingresa tus credenciales"}
+          />
+        </div>
+        <div className="user">
+          <TagAndInput
+            inputType={"text"}
+            label={"Nombre de usuario"}
+            inputPlaceHolder={"username@contentoh.com"}
+            inputId={"emailInput"}
+          />
+        </div>
+        {emptyEmail && <label>Ingrese su correo</label>}
+        {invalidEmail && !emptyEmail && <label>Ingrese un correo válido</label>}
+        <div className="password">
+          <TagAndInput
+            inputType={"text"}
+            label={"Contraseña"}
+            inputPlaceHolder={"Escribe tu contraseña"}
+            inputId={"passwordInput"}
+          />
+        </div>
+        {emptyPassword && <label>Ingrese su contraseña</label>}
+        <div className="select">
+          <CheckBox
+            label={"Mantener sesión activada"}
+            id={"chk-default"}
+            className="active-left"
+          />
+          <p className="active-right">Olvide mi contraseña</p>
+        </div>
+        <div className="button-right">
+          <Button
+            buttonType={"general-default-button"}
+            label={"Iniciar sesión"}
+            onClick={(e) => validate(e)}
+          />
+        </div>
+        <div className="new-login">
+          <p className="pre-registro">
+            ¿Aún no tienes cuenta?<span> Regístrate</span>
+          </p>
+        </div>
+      </div>
+    </Container>
+  );
+};

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

@@ -0,0 +1,77 @@
+import styled from "styled-components";
+import { FontFamily, GlobalColors } from "../../../global-files/variables";
+
+export const Container = styled.div`
+  background: "white";
+  display: flex;
+  height: 100%;
+  justify-content: center;
+  align-items: center;
+  label {
+    color: red;
+    margin-top: 3px;
+    margin-left: 15px;
+    font-family: ${FontFamily.Raleway_700};
+    font-size: 11px;
+    & + * {
+      margin-top: 12px;
+    }
+  }
+
+  &.home-login {
+    .credenciales {
+      & + * {
+        margin-top: 30px;
+      }
+    }
+    .user {
+      & + * {
+        margin-top: 20px;
+      }
+    }
+    .password {
+      & + * {
+        margin-top: 20px;
+      }
+    }
+    .select {
+      display: flex;
+      justify-content: space-between;
+      .active-right {
+        font-family: ${FontFamily.AvenirNext};
+        font-weight: 500;
+        font-size: 13px;
+        line-height: 24px;
+        letter-spacing: -0.015em;
+        color: ${GlobalColors.s5};
+        cursor: pointer;
+      }
+      & + * {
+        margin-top: 50px;
+      }
+    }
+    .button-right {
+      text-align: right;
+      & + * {
+        margin-top: 55px;
+      }
+    }
+    .new-login {
+      p {
+        font-family: ${FontFamily.AvenirNext};
+        text-align: right;
+        font-weight: 500;
+        font-size: 13px;
+        line-height: 24px;
+        color: ${GlobalColors.s5};
+        span {
+          color: ${GlobalColors.secondary_magenta};
+        }
+      }
+    }
+  }
+  .main-container {
+    max-width: 80%;
+    max-height: 80%;
+  }
+`;