contentoh-components-library 21.0.23 → 21.0.27

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";
@@ -22,22 +23,29 @@ export * from "./components/atoms/ValidationPanel/index";
 
 //molecules
 export * from "./components/molecules/AvatarAndValidation/index";
-export * from "./components/molecules/CarouselImagesLogin"
+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"
+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";
@@ -48,13 +56,13 @@ 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/ChangePasswordLogin";
+export * from "./components/pages/CustomerLogin";
 export * from "./components/pages/CustomerType";
-export * from "./components/pages/EmailResetPassword"
+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/RegistrationLoginFirstStep";
+export * from "./components/pages/RegistrationLoginSecondStep";
+export * from "./components/pages/RegistrationLoginThirdStep";
 export * from "./components/pages/RetailerProductEdition";
-export * from "./components/pages/VerificationCodeResetPassword"
+export * from "./components/pages/VerificationCodeResetPassword";

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

@@ -1,142 +0,0 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.Login = void 0;
-
-var _regenerator = _interopRequireDefault(require("@babel/runtime/regenerator"));
-
-var _asyncToGenerator2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/asyncToGenerator"));
-
-var _slicedToArray2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/slicedToArray"));
-
-var _styles = require("./styles");
-
-var _index = require("../../atoms/LogoImage/index");
-
-var _index2 = require("../../atoms/ScreenHeader/index");
-
-var _index3 = require("../../atoms/GeneralButton/index");
-
-var _index4 = require("../../atoms/CheckBox/index");
-
-var _TagAndInput = require("../TagAndInput");
-
-var _variables = require("../../../global-files/variables");
-
-var _react = require("react");
-
-var _jsxRuntime = require("react/jsx-runtime");
-
-var Login = function Login() {
-  var _useState = (0, _react.useState)(false),
-      _useState2 = (0, _slicedToArray2.default)(_useState, 2),
-      emptyEmail = _useState2[0],
-      setEmptyEmail = _useState2[1];
-
-  var _useState3 = (0, _react.useState)(false),
-      _useState4 = (0, _slicedToArray2.default)(_useState3, 2),
-      invalidEmail = _useState4[0],
-      setInvalidEmail = _useState4[1];
-
-  var _useState5 = (0, _react.useState)(false),
-      _useState6 = (0, _slicedToArray2.default)(_useState5, 2),
-      emptyPassword = _useState6[0],
-      setEmptyPassword = _useState6[1];
-
-  var validate = /*#__PURE__*/function () {
-    var _ref = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee(e) {
-      var email, password;
-      return _regenerator.default.wrap(function _callee$(_context) {
-        while (1) {
-          switch (_context.prev = _context.next) {
-            case 0:
-              e.preventDefault();
-              email = document.querySelector("#emailInput").value;
-              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);
-
-            case 6:
-            case "end":
-              return _context.stop();
-          }
-        }
-      }, _callee);
-    }));
-
-    return function validate(_x) {
-      return _ref.apply(this, arguments);
-    };
-  }();
-
-  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_styles.Container, {
-    className: "home-login",
-    children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
-      className: "main-container",
-      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_index.LogoImage, {}), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-        className: "credenciales",
-        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_index2.ScreenHeader, {
-          fontFamily: _variables.FontFamily.AvenirNext,
-          color: _variables.GlobalColors.s5,
-          text: "Ingresa tus credenciales"
-        })
-      }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-        className: "user",
-        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_TagAndInput.TagAndInput, {
-          inputType: "text",
-          label: "Nombre de usuario",
-          inputPlaceHolder: "username@contentoh.com",
-          inputId: "emailInput"
-        })
-      }), emptyEmail && /*#__PURE__*/(0, _jsxRuntime.jsx)("label", {
-        children: "Ingrese su correo"
-      }), invalidEmail && !emptyEmail && /*#__PURE__*/(0, _jsxRuntime.jsx)("label", {
-        children: "Ingrese un correo v\xE1lido"
-      }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-        className: "password",
-        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_TagAndInput.TagAndInput, {
-          inputType: "text",
-          label: "Contraseña",
-          inputPlaceHolder: "Escribe tu contraseña",
-          inputId: "passwordInput"
-        })
-      }), emptyPassword && /*#__PURE__*/(0, _jsxRuntime.jsx)("label", {
-        children: "Ingrese su contrase\xF1a"
-      }), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {
-        className: "select",
-        children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_index4.CheckBox, {
-          label: "Mantener sesión activada",
-          id: "chk-default",
-          className: "active-left"
-        }), /*#__PURE__*/(0, _jsxRuntime.jsx)("p", {
-          className: "active-right",
-          children: "Olvide mi contrase\xF1a"
-        })]
-      }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-        className: "button-right",
-        children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_index3.Button, {
-          buttonType: "general-default-button",
-          label: "Iniciar sesión",
-          onClick: function onClick(e) {
-            return validate(e);
-          }
-        })
-      }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
-        className: "new-login",
-        children: /*#__PURE__*/(0, _jsxRuntime.jsxs)("p", {
-          className: "pre-registro",
-          children: ["\xBFA\xFAn no tienes cuenta?", /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
-            children: " Reg\xEDstrate"
-          })]
-        })
-      })]
-    })
-  });
-};
-
-exports.Login = Login;

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

@@ -1,20 +0,0 @@
-"use strict";
-
-var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
-
-Object.defineProperty(exports, "__esModule", {
-  value: true
-});
-exports.Container = void 0;
-
-var _taggedTemplateLiteral2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/taggedTemplateLiteral"));
-
-var _styledComponents = _interopRequireDefault(require("styled-components"));
-
-var _variables = require("../../../global-files/variables");
-
-var _templateObject;
-
-var Container = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  background: \"white\";\n  display: flex;\n  height: 100%;\n  justify-content: center;\n  align-items: center;\n  label {\n    color: red;\n    margin-top: 3px;\n    margin-left: 15px;\n    font-family: ", ";\n    font-size: 11px;\n    & + * {\n      margin-top: 12px;\n    }\n  }\n\n  &.home-login {\n    .credenciales {\n      & + * {\n        margin-top: 30px;\n      }\n    }\n    .user {\n      & + * {\n        margin-top: 20px;\n      }\n    }\n    .password {\n      & + * {\n        margin-top: 20px;\n      }\n    }\n    .select {\n      display: flex;\n      justify-content: space-between;\n      .active-right {\n        font-family: ", ";\n        font-weight: 500;\n        font-size: 13px;\n        line-height: 24px;\n        letter-spacing: -0.015em;\n        color: ", ";\n        cursor: pointer;\n      }\n      & + * {\n        margin-top: 50px;\n      }\n    }\n    .button-right {\n      text-align: right;\n      & + * {\n        margin-top: 55px;\n      }\n    }\n    .new-login {\n      p {\n        font-family: ", ";\n        text-align: right;\n        font-weight: 500;\n        font-size: 13px;\n        line-height: 24px;\n        color: ", ";\n        span {\n          color: ", ";\n        }\n      }\n    }\n  }\n  .main-container {\n    max-width: 80%;\n    max-height: 80%;\n  }\n"])), _variables.FontFamily.Raleway_700, _variables.FontFamily.AvenirNext, _variables.GlobalColors.s5, _variables.FontFamily.AvenirNext, _variables.GlobalColors.s5, _variables.GlobalColors.secondary_magenta);
-
-exports.Container = Container;

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

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

@@ -1,79 +0,0 @@
-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>
-  );
-};