contentoh-components-library 21.0.46 → 21.0.47

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

@@ -35,8 +35,6 @@ var _reactRouterDom = require("react-router-dom");
 
 var _axios = _interopRequireDefault(require("axios"));
 
-var _index5 = require("../../atoms/GradientPanel/index");
-
 var _jsxRuntime = require("react/jsx-runtime");
 
 var SignInLoginCreationApp = function SignInLoginCreationApp(props) {
@@ -200,71 +198,91 @@ var SignInLoginCreationApp = function SignInLoginCreationApp(props) {
   (0, _react.useEffect)(function () {
     if (upgradePlanRedirect) setLoading(false);
   }, [upgradePlanRedirect]);
-  var loginRight = [/*#__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.jsxs)("div", {
-      className: "user",
-      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_TagAndInput.TagAndInput, {
-        inputType: "text",
-        label: "Nombre de usuario",
-        inputPlaceHolder: "username@contentoh.com",
-        inputId: "emailInput"
-      }), showErrors && 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.jsxs)("div", {
-      className: "password",
-      children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_TagAndInput.TagAndInput, {
-        inputType: "password",
-        label: "Contraseña",
-        inputPlaceHolder: "Escribe tu contraseña",
-        inputId: "passwordInput"
-      }), showErrors && 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", {
-        onClick: function onClick() {
-          return props.setPaso(10);
-        },
-        className: "active-right",
-        children: "Olvide mi contrase\xF1a"
-      }), showErrors && signInError === "NotAuthorizedException" && /*#__PURE__*/(0, _jsxRuntime.jsx)("label", {
-        children: "Correo o contrase\xF1a incorrectos"
-      }), showErrors && signInError === "Error" && /*#__PURE__*/(0, _jsxRuntime.jsx)("label", {
-        children: "Ha habido un problema al iniciar sesi\xF3n"
-      })]
-    }), /*#__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);
-        }
-      })
-    })]
-  })];
   return loading ? /*#__PURE__*/(0, _jsxRuntime.jsx)(_Loading.Loading, {}) : /*#__PURE__*/(0, _jsxRuntime.jsxs)(_jsxRuntime.Fragment, {
     children: [/*#__PURE__*/(0, _jsxRuntime.jsx)(_styles.Container, {
-      children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_index5.GradientPanel, {
-        componentsArray: loginRight,
-        panelType: "home-login",
-        panelColor: _variables.GlobalColors.white
+      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"
+          })
+        }), showErrors && 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: "password",
+            label: "Contraseña",
+            inputPlaceHolder: "Escribe tu contraseña",
+            inputId: "passwordInput"
+          })
+        }), showErrors && 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", {
+            onClick: function onClick() {
+              return props.setPaso(10);
+            },
+            className: "active-right",
+            children: "Olvide mi contrase\xF1a"
+          })]
+        }), showErrors && signInError === "NotAuthorizedException" && /*#__PURE__*/(0, _jsxRuntime.jsx)("label", {
+          children: "Correo o contrase\xF1a incorrectos"
+        }), showErrors && signInError === "Error" && /*#__PURE__*/(0, _jsxRuntime.jsx)("label", {
+          children: "Ha habido un problema al iniciar sesi\xF3n"
+        }), /*#__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",
+            onClick: function onClick() {
+              props.setPaso(1);
+              sessionStorage.setItem("nuevoRegistro", JSON.stringify({
+                name: "",
+                lastName: "",
+                email: "",
+                position: "",
+                country: "",
+                phone: "",
+                commercialName: "",
+                companyName: "",
+                rfc: "",
+                adress: ""
+              }));
+              sessionStorage.setItem("countryCode", JSON.stringify("+52"));
+            },
+            children: ["\xBFA\xFAn no tienes cuenta?", /*#__PURE__*/(0, _jsxRuntime.jsx)("span", {
+              children: " Reg\xEDstrate"
+            })]
+          })
+        })]
       })
     }), upgradePlanRedirect && /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactRouterDom.Redirect, {
       to: {

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

@@ -15,6 +15,6 @@ 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: 100vh;\n  width: 50%;\n"])));
+var Container = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  background: \"white\";\n  display: flex;\n  height: 100vh;\n  width: 50%;\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        cursor: pointer;\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/package.json

@@ -1,6 +1,6 @@
 {
   "name": "contentoh-components-library",
-  "version": "21.0.46",
+  "version": "21.0.47",
   "dependencies": {
     "@aws-amplify/auth": "^4.5.3",
     "@aws-amplify/datastore": "^3.11.0",

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

@@ -9,7 +9,6 @@ import { useState, useEffect } from "react";
 import { Loading } from "../../atoms/Loading";
 import { Redirect } from "react-router-dom";
 import axios from "axios";
-import { GradientPanel } from "../../atoms/GradientPanel/index";
 
 export const SignInLoginCreationApp = (props) => {
   const [emptyEmail, setEmptyEmail] = useState(false);
@@ -111,80 +110,98 @@ export const SignInLoginCreationApp = (props) => {
       }
     }
   };
-
   useEffect(() => {
     sessionStorage.getItem("resetPasswordProcess") &&
       sessionStorage.removeItem("resetPasswordProcess");
   }, []);
-
   useEffect(() => {
     if (upgradePlanRedirect) setLoading(false);
   }, [upgradePlanRedirect]);
-
-  const loginRight = [
-    <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"}
-        />
-        {showErrors && emptyEmail && <label>Ingrese su correo</label>}
-        {invalidEmail && !emptyEmail && <label>Ingrese un correo válido</label>}
-      </div>
-      <div className="password">
-        <TagAndInput
-          inputType={"password"}
-          label={"Contraseña"}
-          inputPlaceHolder={"Escribe tu contraseña"}
-          inputId={"passwordInput"}
-        />
-        {showErrors && emptyPassword && <label>Ingrese su contraseña</label>}
-      </div>
-      <div className="select">
-        <CheckBox
-          label={"Mantener sesión activada"}
-          id={"chk-default"}
-          className="active-left"
-        />
-        <p onClick={() => props.setPaso(10)} className="active-right">
-          Olvide mi contraseña
-        </p>
-        {showErrors && signInError === "NotAuthorizedException" && (
-          <label>Correo o contraseña incorrectos</label>
-        )}
-        {showErrors && signInError === "Error" && (
-          <label>Ha habido un problema al iniciar sesión</label>
-        )}
-      </div>
-      <div className="button-right">
-        <Button
-          buttonType={"general-default-button"}
-          label={"Iniciar sesión"}
-          onClick={(e) => validate(e)}
-        />
-      </div>
-    </div>,
-  ];
   return loading ? (
     <Loading />
   ) : (
     <>
-      <Container>
-        <GradientPanel
-          componentsArray={loginRight}
-          panelType={"home-login"}
-          panelColor={GlobalColors.white}
-        />
+      <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>
+          {showErrors && emptyEmail && <label>Ingrese su correo</label>}
+          {invalidEmail && !emptyEmail && (
+            <label>Ingrese un correo válido</label>
+          )}
+          <div className="password">
+            <TagAndInput
+              inputType={"password"}
+              label={"Contraseña"}
+              inputPlaceHolder={"Escribe tu contraseña"}
+              inputId={"passwordInput"}
+            />
+          </div>
+          {showErrors && emptyPassword && <label>Ingrese su contraseña</label>}
+          <div className="select">
+            <CheckBox
+              label={"Mantener sesión activada"}
+              id={"chk-default"}
+              className="active-left"
+            />
+            <p onClick={() => props.setPaso(10)} className="active-right">
+              Olvide mi contraseña
+            </p>
+          </div>
+          {showErrors && signInError === "NotAuthorizedException" && (
+            <label>Correo o contraseña incorrectos</label>
+          )}
+          {showErrors && signInError === "Error" && (
+            <label>Ha habido un problema al iniciar sesión</label>
+          )}
+          <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"
+              onClick={() => {
+                props.setPaso(1);
+                sessionStorage.setItem(
+                  "nuevoRegistro",
+                  JSON.stringify({
+                    name: "",
+                    lastName: "",
+                    email: "",
+                    position: "",
+                    country: "",
+                    phone: "",
+                    commercialName: "",
+                    companyName: "",
+                    rfc: "",
+                    adress: "",
+                  })
+                );
+                sessionStorage.setItem("countryCode", JSON.stringify("+52"));
+              }}
+            >
+              ¿Aún no tienes cuenta?<span> Regístrate</span>
+            </p>
+          </div>
+        </div>
       </Container>
       {upgradePlanRedirect && <Redirect to={{ pathname: "/dashboard" }} />}
     </>

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

@@ -6,4 +6,74 @@ export const Container = styled.div`
   display: flex;
   height: 100vh;
   width: 50%;
+  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};
+        cursor: pointer;
+        span {
+          color: ${GlobalColors.secondary_magenta};
+        }
+      }
+    }
+  }
+  .main-container {
+    max-width: 80%;
+    max-height: 80%;
+  }
 `;