npm - contentoh-components-library - Versions diffs - 21.0.22 → 21.0.23 - Mend

contentoh-components-library 21.0.22 → 21.0.23

This diff represents the content of publicly available package versions that have been released to one of the supported registries. The information contained in this diff is provided for informational purposes only and reflects changes between package versions as they appear in their respective public registries.

Files changed (5) hide show

package/dist/components/molecules/Login/index.js +66 -3
package/dist/components/molecules/Login/styles.js +1 -1
package/package.json +1 -1
package/src/components/molecules/Login/index.js +22 -0
package/src/components/molecules/Login/styles.js +4 -0

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

@@ -1,10 +1,18 @@
 "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");
@@ -19,9 +27,53 @@ 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", {
@@ -38,15 +90,23 @@ var Login = function Login() {
         children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_TagAndInput.TagAndInput, {
           inputType: "text",
           label: "Nombre de usuario",
-          inputPlaceHolder: "username@contentoh.com"
+          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"
+          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, {
@@ -61,7 +121,10 @@ var Login = function Login() {
         className: "button-right",
         children: /*#__PURE__*/(0, _jsxRuntime.jsx)(_index3.Button, {
           buttonType: "general-default-button",
-          label: "Iniciar sesión"
+          label: "Iniciar sesión",
+          onClick: function onClick(e) {
+            return validate(e);
+          }
         })
       }), /*#__PURE__*/(0, _jsxRuntime.jsx)("div", {
         className: "new-login",

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

@@ -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: 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\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      }\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);
+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/package.json CHANGED Viewed

@@ -1,6 +1,6 @@
 {
   "name": "contentoh-components-library",
-  "version": "21.0.22",
+  "version": "21.0.23",
   "dependencies": {
     "@babel/runtime": "^7.17.2",
     "@storybook/addon-postcss": "^2.0.0",

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

@@ -5,8 +5,24 @@ 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">
@@ -23,15 +39,20 @@ export const Login = () => {
             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"}
@@ -44,6 +65,7 @@ export const Login = () => {
           <Button
             buttonType={"general-default-button"}
             label={"Iniciar sesión"}
+            onClick={(e) => validate(e)}
           />
         </div>
         <div className="new-login">

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

@@ -13,6 +13,9 @@ export const Container = styled.div`
     margin-left: 15px;
     font-family: ${FontFamily.Raleway_700};
     font-size: 11px;
+    & + * {
+      margin-top: 12px;
+    }
   }
   &.home-login {
@@ -41,6 +44,7 @@ export const Container = styled.div`
         line-height: 24px;
         letter-spacing: -0.015em;
         color: ${GlobalColors.s5};
+        cursor: pointer;
       }
       & + * {
         margin-top: 50px;