contentoh-components-library 21.0.26 → 21.0.29

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

@@ -0,0 +1,63 @@
+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

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

package/src/index.js

@@ -11,6 +11,7 @@ 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/PriorityFlag/index";
 export * from "./components/atoms/ProductImage/index";
 export * from "./components/atoms/ProgressBar/index";
@@ -24,6 +25,7 @@ export * from "./components/atoms/ValidationPanel/index";
 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";
@@ -31,14 +33,19 @@ export * from "./components/molecules/ImageSelector/index";
 export * from "./components/molecules/LoginPasswordStrength";
 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/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";