contentoh-components-library 21.0.43 → 21.0.46

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

@@ -75,13 +75,6 @@ var RegistrationFirstStep = function RegistrationFirstStep(props) {
       regError = _useState18[0],
       setRegError = _useState18[1];
 
-  var name = document.querySelector("#nameInput").value;
-  var lastName = document.querySelector("#lastNameInput").value;
-  var email = document.querySelector("#emailInput").value;
-  var job = document.querySelector("#jobInput").value;
-  var phone = document.querySelector("#phoneInput").value;
-  var country = document.querySelector("#countrySelect").value;
-  var countryCode = document.querySelector("#countryCodeSelect").value;
   (0, _react.useEffect)(function () {
     JSON.parse(sessionStorage.getItem("nuevoRegistro")).name === "" && sessionStorage.removeItem("registrationError");
     sessionStorage.getItem("registrationError") && setRegError(true);
@@ -99,6 +92,13 @@ var RegistrationFirstStep = function RegistrationFirstStep(props) {
   }, []);
 
   var validate = function validate(evt) {
+    var name = document.querySelector("#nameInput").value;
+    var lastName = document.querySelector("#lastNameInput").value;
+    var email = document.querySelector("#emailInput").value;
+    var job = document.querySelector("#jobInput").value;
+    var phone = document.querySelector("#phoneInput").value;
+    var country = document.querySelector("#countrySelect").value;
+    var countryCode = document.querySelector("#countryCodeSelect").value;
     var valid = true;
     evt.preventDefault();
     name === "" ? setEmptyName(true) : setEmptyName(false);
@@ -118,11 +118,6 @@ var RegistrationFirstStep = function RegistrationFirstStep(props) {
       valid = false;
     } else valid = true;
 
-    return valid;
-  };
-
-  var validateForm = function validateForm(evt, valid) {
-    evt.preventDefault();
     var nuevoUsuario = JSON.parse(sessionStorage.getItem("nuevoRegistro"));
 
     if (valid) {
@@ -274,8 +269,7 @@ var RegistrationFirstStep = function RegistrationFirstStep(props) {
       buttonType: "general-default-button",
       label: "Enviar",
       onClick: function onClick(e) {
-        var flag = validate(e);
-        validateForm(e, flag);
+        validate(e);
       }
     })
   }, "4"), /*#__PURE__*/(0, _jsxRuntime.jsxs)("div", {

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

@@ -124,8 +124,6 @@ var RegistrationSecondStep = function RegistrationSecondStep(props) {
     }), /*#__PURE__*/(0, _jsxRuntime.jsx)(_ScreenHeader.ScreenHeader, {
       text: "Todos los datos estan protegidos.",
       headerType: "date-header"
-    }), !termsCheck && !!privacyCheck && /*#__PURE__*/(0, _jsxRuntime.jsx)("label", {
-      children: "Seleccione los terminos y condiciones y el Aviso de privacidad"
     })]
   }, "7"), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
     className: "button-end",

package/dist/components/molecules/SignInLoginCreationApp/SignInLogin.stories.js

@@ -0,0 +1,28 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.default = exports.SignInLoginCreationAppDefault = void 0;
+
+var _objectSpread2 = _interopRequireDefault(require("@babel/runtime/helpers/esm/objectSpread2"));
+
+var _index = require("./index");
+
+var _jsxRuntime = require("react/jsx-runtime");
+
+var _default = {
+  title: "Components/molecules/SignInLoginCreationApp",
+  component: _index.SignInLoginCreationApp
+};
+exports.default = _default;
+
+var Template = function Template(args) {
+  return /*#__PURE__*/(0, _jsxRuntime.jsx)(_index.SignInLoginCreationApp, (0, _objectSpread2.default)({}, args));
+};
+
+var SignInLoginCreationAppDefault = Template.bind({});
+exports.SignInLoginCreationAppDefault = SignInLoginCreationAppDefault;
+SignInLoginCreationAppDefault.args = {};

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

@@ -0,0 +1,277 @@
+"use strict";
+
+var _interopRequireDefault = require("@babel/runtime/helpers/interopRequireDefault").default;
+
+Object.defineProperty(exports, "__esModule", {
+  value: true
+});
+exports.SignInLoginCreationApp = 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 _Loading = require("../../atoms/Loading");
+
+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) {
+  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 _useState7 = (0, _react.useState)(true),
+      _useState8 = (0, _slicedToArray2.default)(_useState7, 2),
+      showErrors = _useState8[0],
+      setShowErrors = _useState8[1];
+
+  var _useState9 = (0, _react.useState)(""),
+      _useState10 = (0, _slicedToArray2.default)(_useState9, 2),
+      signInError = _useState10[0],
+      setSignInError = _useState10[1];
+
+  var _useState11 = (0, _react.useState)(false),
+      _useState12 = (0, _slicedToArray2.default)(_useState11, 2),
+      loading = _useState12[0],
+      setLoading = _useState12[1];
+
+  var _useState13 = (0, _react.useState)(false),
+      _useState14 = (0, _slicedToArray2.default)(_useState13, 2),
+      upgradePlanRedirect = _useState14[0],
+      setUpgradePlanRedirect = _useState14[1];
+
+  var validate = /*#__PURE__*/function () {
+    var _ref = (0, _asyncToGenerator2.default)( /*#__PURE__*/_regenerator.default.mark(function _callee(e) {
+      var valid, email, password, session, userGroup, response, userGroupValue, user, company;
+      return _regenerator.default.wrap(function _callee$(_context) {
+        while (1) {
+          switch (_context.prev = _context.next) {
+            case 0:
+              setSignInError("");
+              setShowErrors(true);
+              e.preventDefault();
+              valid = true;
+              email = document.querySelector("#emailInput").value;
+              password = document.querySelector("#passwordInput").value;
+              !/^[a-zA-Z0-9.!#$%&'*+/=?^_`{|}~-]+@[a-zA-Z0-9-]+(?:\.[a-zA-Z0-9-]+)*$/.test(email) ? setInvalidEmail(true) : setInvalidEmail(false);
+
+              if (email === "") {
+                valid = false;
+                setEmptyEmail(true);
+              } else {
+                setEmptyEmail(false);
+              }
+
+              if (password === "") {
+                valid = false;
+                setEmptyPassword(true);
+              } else {
+                setEmptyPassword(false);
+              }
+
+              if (!valid) {
+                _context.next = 34;
+                break;
+              }
+
+              _context.prev = 10;
+              setLoading(true);
+              _context.next = 14;
+              return props.Auth.signIn(email, password);
+
+            case 14:
+              session = _context.sent;
+
+              if (!(session.challengeName === "NEW_PASSWORD_REQUIRED")) {
+                _context.next = 20;
+                break;
+              }
+
+              props.setUser(session);
+              props.setPaso(8);
+              _context.next = 26;
+              break;
+
+            case 20:
+              userGroup = session.signInUserSession.accessToken.payload["cognito:groups"];
+              _context.next = 23;
+              return _axios.default.get(process.env.REACT_APP_USER_ENDPOINT, {
+                headers: {
+                  Authorization: session.signInUserSession.idToken.jwtToken
+                }
+              });
+
+            case 23:
+              response = _context.sent;
+              userGroupValue = typeof userGroup === "string" ? userGroup : userGroup[0];
+
+              if (userGroupValue === "usuario_contentoh") {
+                sessionStorage.setItem("auth", true);
+                sessionStorage.setItem("jwt", session.signInUserSession.idToken.jwtToken);
+                user = JSON.parse(response.data.body).data[0];
+                company = JSON.parse(response.data.body).data[1];
+                caches.keys().then(function (names) {
+                  names.forEach(function (name) {
+                    caches.delete(name);
+                  });
+                });
+                user.src = "https://".concat(process.env.REACT_APP_IMAGES_PROFILE_BUCKET, ".s3.amazonaws.com/id-").concat(user.id_user, "/").concat(user.id_user, ".png?").concat(new Date().getTime());
+                sessionStorage.setItem("user", JSON.stringify(user));
+                sessionStorage.setItem("company", JSON.stringify(company));
+                setUpgradePlanRedirect(true);
+              } else {
+                setSignInError("NotAuthorizedException");
+                setLoading(false);
+              }
+
+            case 26:
+              _context.next = 34;
+              break;
+
+            case 28:
+              _context.prev = 28;
+              _context.t0 = _context["catch"](10);
+              console.log(_context.t0);
+              setLoading(false);
+              console.log("error 1");
+
+              if (_context.t0.code === "NotAuthorizedException") {
+                setSignInError("NotAuthorizedException");
+              } else if (_context.t0.code === "UserNotConfirmedException") {
+                sessionStorage.setItem("email", JSON.stringify(document.querySelector("#usernameInput").value.trim()));
+                sessionStorage.setItem("email", JSON.stringify(email));
+                props.setPaso(5);
+              } else {
+                setSignInError("Error");
+                console.log("error 2");
+              }
+
+            case 34:
+            case "end":
+              return _context.stop();
+          }
+        }
+      }, _callee, null, [[10, 28]]);
+    }));
+
+    return function validate(_x) {
+      return _ref.apply(this, arguments);
+    };
+  }();
+
+  (0, _react.useEffect)(function () {
+    sessionStorage.getItem("resetPasswordProcess") && sessionStorage.removeItem("resetPasswordProcess");
+  }, []);
+  (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
+      })
+    }), upgradePlanRedirect && /*#__PURE__*/(0, _jsxRuntime.jsx)(_reactRouterDom.Redirect, {
+      to: {
+        pathname: "/dashboard"
+      }
+    })]
+  });
+};
+
+exports.SignInLoginCreationApp = SignInLoginCreationApp;

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

@@ -0,0 +1,20 @@
+"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: 100vh;\n  width: 50%;\n"])));
+
+exports.Container = Container;

package/dist/components/molecules/VerificationCodeResetPasswordLogin/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  display: flex;\n  height: 100%;\n  width: 50%;\n  .button-center {\n    text-align: center;\n    .general-default-button {\n      width: 160px;\n    }\n  }\n  .reset-password {\n    text-align: center;\n    margin: 15px !important;\n    color: ", ";\n    cursor: pointer;\n    font-weight: bold;\n    font-family: ", ";\n    font-size: 13px;\n  }\n  .resend-code {\n    margin-top: 8px !important;\n    color: ", ";\n    font-family: ", ";\n    font-size: 11px;\n    text-decoration: underline rgb(228, 81, 172);\n    cursor: pointer;\n    & + * {\n      margin-top: 30px;\n    }\n  }\n  .verification-code {\n    display: flex;\n    text-align: center;\n    margin: auto;\n    margin-top: 10px;\n    input[type=\"number\"]::-webkit-inner-spin-button,\n    input[type=\"number\"]::-webkit-outer-spin-button {\n      -webkit-appearance: none;\n      margin: 0;\n    }\n    input {\n      width: 70%;\n      text-align: center;\n    }\n  }\n"])), _variables.GlobalColors.secondary_magenta, _variables.FontFamily.Raleway, _variables.GlobalColors.magenta_s2, _variables.FontFamily.AvenirNext);
+var Container = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  height: 100vh;\n  width: 50%;\n  align-items: center;\n  justify-content: center;\n  .button-center {\n    text-align: center;\n    .general-default-button {\n      width: 160px;\n    }\n  }\n  .reset-password {\n    text-align: center;\n    margin: 15px !important;\n    color: ", ";\n    cursor: pointer;\n    font-weight: bold;\n    font-family: ", ";\n    font-size: 13px;\n  }\n  .resend-code {\n    margin-top: 8px !important;\n    color: ", ";\n    font-family: ", ";\n    font-size: 11px;\n    text-decoration: underline rgb(228, 81, 172);\n    cursor: pointer;\n    & + * {\n      margin-top: 30px;\n    }\n  }\n  .verification-code {\n    display: flex;\n    text-align: center;\n    margin: auto;\n    margin-top: 10px;\n    input[type=\"number\"]::-webkit-inner-spin-button,\n    input[type=\"number\"]::-webkit-outer-spin-button {\n      -webkit-appearance: none;\n      margin: 0;\n    }\n    input {\n      width: 70%;\n      text-align: center;\n    }\n  }\n"])), _variables.GlobalColors.secondary_magenta, _variables.FontFamily.Raleway, _variables.GlobalColors.magenta_s2, _variables.FontFamily.AvenirNext);
 
 exports.Container = Container;

package/dist/components/organisms/ChangePassword/styles.js

@@ -13,6 +13,6 @@ var _styledComponents = _interopRequireDefault(require("styled-components"));
 
 var _templateObject;
 
-var Container = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  width: 50%;\n  height: 100vh;\n  .button-center {\n    position: absolute;\n    bottom: 10%;\n    left: 65%;\n    .general-default-button {\n      width: 160px;\n    }\n  }\n"])));
+var Container = _styledComponents.default.div(_templateObject || (_templateObject = (0, _taggedTemplateLiteral2.default)(["\n  display: flex;\n  width: 50%;\n  height: 100vh;\n  .button-center {\n    position: absolute;\n    bottom: 13%;\n    left: 18%;\n    .general-default-button {\n      width: 160px;\n    }\n  }\n"])));
 
 exports.Container = Container;

package/package.json

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

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

@@ -18,14 +18,7 @@ export const RegistrationFirstStep = (props) => {
   const [invalidEmail, setInvalidEmail] = useState(false);
   const [phoneFormatError, setPhoneFormatError] = useState(false);
   const [regError, setRegError] = useState(false);
-  const name = document.querySelector("#nameInput").value;
-  const lastName = document.querySelector("#lastNameInput").value;
-  const email = document.querySelector("#emailInput").value;
-  const job = document.querySelector("#jobInput").value;
-  const phone = document.querySelector("#phoneInput").value;
-  const country = document.querySelector("#countrySelect").value;
-  const countryCode = document.querySelector("#countryCodeSelect").value;
-  
+
   useEffect(() => {
     JSON.parse(sessionStorage.getItem("nuevoRegistro")).name === "" &&
       sessionStorage.removeItem("registrationError");
@@ -42,6 +35,13 @@ export const RegistrationFirstStep = (props) => {
       sessionStorage.getItem("resetPasswordProcess");
   }, []);
   const validate = (evt) => {
+    const name = document.querySelector("#nameInput").value;
+  const lastName = document.querySelector("#lastNameInput").value;
+  const email = document.querySelector("#emailInput").value;
+  const job = document.querySelector("#jobInput").value;
+  const phone = document.querySelector("#phoneInput").value;
+  const country = document.querySelector("#countrySelect").value;
+  const countryCode = document.querySelector("#countryCodeSelect").value;
     let valid = true;
     evt.preventDefault();
     name === "" ? setEmptyName(true) : setEmptyName(false);
@@ -78,11 +78,6 @@ export const RegistrationFirstStep = (props) => {
     ) {
       valid = false;
     } else valid = true;
-
-    return valid;
-  };
-  const validateForm = (evt, valid) => {
-    evt.preventDefault();
     let nuevoUsuario = JSON.parse(sessionStorage.getItem("nuevoRegistro"));
     if (valid) {
       sessionStorage.setItem("countryCode", JSON.stringify(countryCode));
@@ -198,8 +193,7 @@ export const RegistrationFirstStep = (props) => {
         buttonType={"general-default-button"}
         label={"Enviar"}
         onClick={(e) => {
-          let flag = validate(e);
-          validateForm(e, flag);
+          validate(e);
         }}
       />
     </div>,

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

@@ -46,7 +46,7 @@ export const RegistrationSecondStep = (props) => {
       password !== confirmPassword
     ) {
       valid = false;
-    } 
+    }
     return valid;
   };
   const loginRight = [
@@ -90,11 +90,6 @@ export const RegistrationSecondStep = (props) => {
         text={"Todos los datos estan protegidos."}
         headerType={"date-header"}
       />
-      {!termsCheck && !!privacyCheck && (
-        <label>
-          Seleccione los terminos y condiciones y el Aviso de privacidad
-        </label>
-      )}
     </div>,
     <div className="button-end" key="8">
       <Button

package/src/components/molecules/SignInLoginCreationApp/SignInLogin.stories.js

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

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

@@ -0,0 +1,192 @@
+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, 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);
+  const [invalidEmail, setInvalidEmail] = useState(false);
+  const [emptyPassword, setEmptyPassword] = useState(false);
+  const [showErrors, setShowErrors] = useState(true);
+  const [signInError, setSignInError] = useState("");
+  const [loading, setLoading] = useState(false);
+  const [upgradePlanRedirect, setUpgradePlanRedirect] = useState(false);
+  const validate = async (e) => {
+    setSignInError("");
+    setShowErrors(true);
+    e.preventDefault();
+    let valid = true;
+    const email = document.querySelector("#emailInput").value;
+    const password = document.querySelector("#passwordInput").value;
+    !/^[a-zA-Z0-9.!#$%&'*+/=?^_`{|}~-]+@[a-zA-Z0-9-]+(?:\.[a-zA-Z0-9-]+)*$/.test(
+      email
+    )
+      ? setInvalidEmail(true)
+      : setInvalidEmail(false);
+    if (email === "") {
+      valid = false;
+      setEmptyEmail(true);
+    } else {
+      setEmptyEmail(false);
+    }
+    if (password === "") {
+      valid = false;
+      setEmptyPassword(true);
+    } else {
+      setEmptyPassword(false);
+    }
+    if (valid) {
+      try {
+        setLoading(true);
+        const session = await props.Auth.signIn(email, password);
+        if (session.challengeName === "NEW_PASSWORD_REQUIRED") {
+          props.setUser(session);
+          props.setPaso(8);
+        } else {
+          const userGroup =
+            session.signInUserSession.accessToken.payload["cognito:groups"];
+          const response = await axios.get(
+            process.env.REACT_APP_USER_ENDPOINT,
+            {
+              headers: {
+                Authorization: session.signInUserSession.idToken.jwtToken,
+              },
+            }
+          );
+          const userGroupValue =
+            typeof userGroup === "string" ? userGroup : userGroup[0];
+          if (userGroupValue === "usuario_contentoh") {
+            sessionStorage.setItem("auth", true);
+            sessionStorage.setItem(
+              "jwt",
+              session.signInUserSession.idToken.jwtToken
+            );
+            const user = JSON.parse(response.data.body).data[0];
+            const company = JSON.parse(response.data.body).data[1];
+            caches.keys().then((names) => {
+              names.forEach((name) => {
+                caches.delete(name);
+              });
+            });
+            user.src = `https://${
+              process.env.REACT_APP_IMAGES_PROFILE_BUCKET
+            }.s3.amazonaws.com/id-${user.id_user}/${
+              user.id_user
+            }.png?${new Date().getTime()}`;
+            sessionStorage.setItem("user", JSON.stringify(user));
+            sessionStorage.setItem("company", JSON.stringify(company));
+            setUpgradePlanRedirect(true);
+          } else {
+            setSignInError("NotAuthorizedException");
+            setLoading(false);
+          }
+        }
+      } catch (error) {
+        console.log(error);
+        setLoading(false);
+        console.log("error 1");
+        if (error.code === "NotAuthorizedException") {
+          setSignInError("NotAuthorizedException");
+        } else if (error.code === "UserNotConfirmedException") {
+          sessionStorage.setItem(
+            "email",
+            JSON.stringify(
+              document.querySelector("#usernameInput").value.trim()
+            )
+          );
+          sessionStorage.setItem("email", JSON.stringify(email));
+          props.setPaso(5);
+        } else {
+          setSignInError("Error");
+          console.log("error 2");
+        }
+      }
+    }
+  };
+
+  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>
+      {upgradePlanRedirect && <Redirect to={{ pathname: "/dashboard" }} />}
+    </>
+  );
+};

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

@@ -0,0 +1,9 @@
+import styled from "styled-components";
+import { FontFamily, GlobalColors } from "../../../global-files/variables";
+
+export const Container = styled.div`
+  background: "white";
+  display: flex;
+  height: 100vh;
+  width: 50%;
+`;

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

@@ -3,8 +3,10 @@ import { FontFamily, GlobalColors } from "../../../global-files/variables";
 
 export const Container = styled.div`
   display: flex;
-  height: 100%;
+  height: 100vh;
   width: 50%;
+  align-items: center;
+  justify-content: center;
   .button-center {
     text-align: center;
     .general-default-button {

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

@@ -6,8 +6,8 @@ export const Container = styled.div`
   height: 100vh;
   .button-center {
     position: absolute;
-    bottom: 10%;
-    left: 65%;
+    bottom: 13%;
+    left: 18%;
     .general-default-button {
       width: 160px;
     }