ywana-core8 0.1.16 → 0.1.18

package/dist/index.umd.js

@@ -269,7 +269,8 @@
      * Icon 
      */
     var Icon = function Icon(_ref) {
-      var icon = _ref.icon,
+      var id = _ref.id,
+        icon = _ref.icon,
         _ref$size = _ref.size,
         size = _ref$size === void 0 ? "normal" : _ref$size,
         tooltip = _ref.tooltip,
@@ -290,9 +291,11 @@
       }
       var style = disabled ? "disabled" : clickable ? "clickable" : "";
       return tooltip ? /*#__PURE__*/React__default["default"].createElement(Tooltip, tooltip, /*#__PURE__*/React__default["default"].createElement("i", {
+        id: id,
         className: "icon " + size + " " + style + " " + className + " material-icons",
         onClick: click
       }, icon)) : /*#__PURE__*/React__default["default"].createElement("i", {
+        id: id,
         className: "icon " + size + " " + style + " " + className + " material-icons",
         onClick: click
       }, icon);
@@ -1356,7 +1359,9 @@
         onEnter = props.onEnter,
         onClick = props.onClick,
         onFocus = props.onFocus,
-        onBlur = props.onBlur;
+        onBlur = props.onBlur,
+        _props$autoComplete = props.autoComplete,
+        autoComplete = _props$autoComplete === void 0 ? false : _props$autoComplete;
       function onKeyPress(event) {
         var key = event.charCode ? event.charCode : event.keyCode ? event.keyCode : 0;
         if (key == 13) {
@@ -1378,6 +1383,20 @@
       function clear() {
         if (onChange) onChange(id, "");
       }
+      function toggle() {
+        var input = document.getElementById(id);
+        var icon = document.getElementById(id + "-visibility");
+        if (input) {
+          var _type = input.getAttribute("type");
+          if (_type === "password") {
+            input.setAttribute("type", "text");
+            icon.setHTMLUnsafe("visibility");
+          } else {
+            input.setAttribute("type", "password");
+            icon.setHTMLUnsafe("visibility_off");
+          }
+        }
+      }
       var borderStyle = outlined ? "textfield-outlined" : "textfield";
       var labelStyle = label ? "" : "no-label";
       var labelPositionStyle = labelPosition == 'left' ? "label-left" : "label-top";
@@ -1398,12 +1417,19 @@
         onFocus: focus,
         onBlur: blur,
         readOnly: readOnly,
-        step: "any"
+        step: "any",
+        autoComplete: autoComplete
       }), readOnly === false && canClear && value && value.length > 0 ? /*#__PURE__*/React__default["default"].createElement(Icon, {
         icon: "close",
         clickable: true,
         size: "small",
         action: clear
+      }) : null, type === "password" ? /*#__PURE__*/React__default["default"].createElement(Icon, {
+        id: id + "-visibility",
+        icon: "visibility_off",
+        clickable: true,
+        size: "small",
+        action: toggle
       }) : null, /*#__PURE__*/React__default["default"].createElement("span", {
         className: "bar"
       }), label ? /*#__PURE__*/React__default["default"].createElement("label", null, labelTxt) : null);
@@ -1731,6 +1757,7 @@
         onEnter: ok,
         outlined: true
       }), /*#__PURE__*/React__default["default"].createElement(TextField, {
+        id: "loginbox-password",
         label: tx(passwordLabel),
         value: password,
         onChange: changePassword,
@@ -1762,37 +1789,37 @@
 
       // Verificar longitud mínima y máxima
       if (contraseña.length < 15 || contraseña.length > 50) {
-        error = 'La contraseña debe tener entre 15 y 50 caracteres.';
+        error = 'The password must be between 15 and 50 characters.';
         return [false, error];
       }
 
       // Verificar al menos una letra (mayúscula o minúscula)
       if (!/[A-Za-z]/.test(contraseña)) {
-        error = 'La contraseña debe contener al menos una letra (A-Z o a-z).';
+        error = 'The password must contain at least one letter (A-Z or a-z).';
         return [false, error];
       }
 
       // Verificar al menos un número
       if (!/[0-9]/.test(contraseña)) {
-        error = 'La contraseña debe contener al menos un número (0-9).';
+        error = 'The password must contain at least one number (0-9).';
         return [false, error];
       }
 
       // Verificar al menos una minúscula
       if (!/[a-z]/.test(contraseña)) {
-        error = 'La contraseña debe contener al menos una letra en minúscula (a-z).';
+        error = 'The password must contain at least one lowercase letter (a-z).';
         return [false, error];
       }
 
       // Verificar al menos una mayúscula
       if (!/[A-Z]/.test(contraseña)) {
-        error = 'La contraseña debe contener al menos una letra en mayúscula (A-Z).';
+        error = 'The password must contain at least one uppercase letter (A-Z).';
         return [false, error];
       }
 
       // Verificar al menos un carácter especial
       if (!/[<>+&!?*\-_%\.:=]/.test(contraseña)) {
-        error = 'La contraseña debe contener al menos un carácter especial (< > + & ! ? * - _ % . : =).';
+        error = 'The password must contain at least one special character (< > + & ! ? * - _ % . : =).';
         return [false, error];
       }
 
@@ -1806,47 +1833,100 @@
      * Reset Password
      */
     var ResetPasswordBox = function ResetPasswordBox(_ref) {
-      var logo = _ref.logo,
-        title = _ref.title,
+      var title = _ref.title,
         _ref$userRequired = _ref.userRequired,
         userRequired = _ref$userRequired === void 0 ? true : _ref$userRequired,
         _ref$oldPwdRequired = _ref.oldPwdRequired,
         oldPwdRequired = _ref$oldPwdRequired === void 0 ? false : _ref$oldPwdRequired,
-        _ref$lang = _ref.lang,
-        lang = _ref$lang === void 0 ? "EN" : _ref$lang,
+        validator = _ref.validator,
         children = _ref.children,
-        onOK = _ref.onOK,
-        onClose = _ref.onClose;
-      var _useState = React.useState({}),
+        onOK = _ref.onOK;
+      var _useState = React.useState({
+          user: "",
+          oldPassword: "",
+          password1: "",
+          password2: ""
+        }),
         form = _useState[0],
         setForm = _useState[1];
       var _useState2 = React.useState(false),
         isValid = _useState2[0],
         setIsValid = _useState2[1];
-      var _useState3 = React.useState(),
-        error = _useState3[0],
-        setError = _useState3[1];
-      React.useEffect(function () {
-        var _validate = validate(),
-          valid = _validate[0],
-          error = _validate[1];
-        setIsValid(valid);
-        setError(error);
-      }, [form.password1, form.password2, form.oldPassword]);
-      function validate() {
-        var hasRequiredUser = userRequired ? form.user && form.user.length > 0 : true;
-        var hasRequiredOldPwd = oldPwdRequired ? form.oldPassword && form.oldPassword.length > 0 : true;
-        var hasPassword1 = form.password1 && form.password1.length > 0;
-        var _ref2 = hasPassword1 ? validatePassword(form.password1) : [false, "La contraseña es requerida."],
+      var _useState3 = React.useState({}),
+        errors = _useState3[0],
+        setErrors = _useState3[1];
+      function validateUser(user) {
+        var error = "";
+        var isValid = user && user.length > 0;
+        error = /*#__PURE__*/React__default["default"].createElement(Text, null, "User is required.");
+        return [isValid, error];
+      }
+      function validateOldPassword(oldPassword) {
+        var error = "";
+        var isValid = oldPassword && oldPassword.length > 0;
+        error = /*#__PURE__*/React__default["default"].createElement(Text, null, "Old password is required.");
+        return [isValid, error];
+      }
+      function validateNewPassword(password) {
+        var hasPassword = password && password.length > 0;
+        if (!hasPassword) {
+          var _error = /*#__PURE__*/React__default["default"].createElement(Text, null, "Password is required");
+          return [false, _error];
+        }
+        var _ref2 = validator && typeof validator === 'function' ? validator(password) : validatePassword(password),
           isValid = _ref2[0],
           error = _ref2[1];
-        var areEqual = form.password1 === form.password2;
-        if (isValid && !areEqual) error = "Las contraseñas no coinciden.";
-        return [hasRequiredUser && hasRequiredOldPwd && areEqual && isValid, error];
+        if (!isValid) {
+          return [false, error];
+        }
+        return [true, ""];
+      }
+      function validatePasswordsMatch(password1, password2) {
+        var error = "";
+        var isValid = password1 === password2;
+        error = /*#__PURE__*/React__default["default"].createElement(Text, null, "Passwords do not match.");
+        return [isValid, error];
+      }
+      function validate(form) {
+        var isValid = true;
+        var nextErrors = Object.assign({}, errors);
+        if (userRequired) {
+          var _validateUser = validateUser(form.user),
+            validation = _validateUser[0],
+            error = _validateUser[1];
+          if (isValid) isValid = validation;
+          nextErrors.user = error;
+        }
+        if (oldPwdRequired) {
+          var _validateOldPassword = validateOldPassword(form.oldPassword),
+            _validation = _validateOldPassword[0],
+            _error2 = _validateOldPassword[1];
+          if (isValid) isValid = _validation;
+          nextErrors.oldPassword = _error2;
+        }
+        var _validateNewPassword = validateNewPassword(form.password1),
+          pwdValidation = _validateNewPassword[0],
+          pwdError = _validateNewPassword[1];
+        if (isValid) isValid = pwdValidation;
+        nextErrors.password1 = pwdError;
+        var _validateNewPassword2 = validateNewPassword(form.password2),
+          pwd2Validation = _validateNewPassword2[0],
+          pwd2Error = _validateNewPassword2[1];
+        var _validatePasswordsMat = validatePasswordsMatch(form.password1, form.password2),
+          matchValidation = _validatePasswordsMat[0],
+          matchError = _validatePasswordsMat[1];
+        if (isValid) isValid = matchValidation && pwd2Validation;
+        nextErrors.password2 = matchError || pwd2Error;
+        return [isValid, nextErrors];
       }
       function changeField(id, value) {
         var _Object$assign;
         var next = Object.assign({}, form, (_Object$assign = {}, _Object$assign[id] = value, _Object$assign));
+        var _validate = validate(next),
+          isValid = _validate[0],
+          errors = _validate[1];
+        setIsValid(isValid);
+        setErrors(errors);
         setForm(next);
       }
       function ok() {
@@ -1854,30 +1934,34 @@
           onOK(form);
         }
       }
-      function close() {
-        if (onClose) onClose();
-      }
-      var userLabel = lang === "EN" ? "User" : "Usuario";
-      var passwordLabel = lang === "EN" ? "New Password" : "Nueva Clave";
-      var password2Label = lang === "EN" ? "Confirm New Password" : "Confirmar Nueva Clave";
-      var okLabel = lang === "EN" ? "OK" : "Aceptar";
-      var cancelLabel = lang === "EN" ? "Cancel" : "Cancelar";
+      var userLabel = /*#__PURE__*/React__default["default"].createElement(Text, null, "User");
+      var passwordLabel = /*#__PURE__*/React__default["default"].createElement(Text, null, "New Password");
+      var password2Label = /*#__PURE__*/React__default["default"].createElement(Text, null, "Confirm New Password");
+      var okLabel = /*#__PURE__*/React__default["default"].createElement(Text, null, "OK");
+      var userStyle = errors.user ? "error" : "";
+      var oldPasswordStyle = errors.oldPassword ? "error" : "";
+      var password1Style = errors.password1 ? "error" : "";
+      var password2Style = errors.password2 ? "error" : "";
       return /*#__PURE__*/React__default["default"].createElement("div", {
         className: "reset-password-box"
-      }, /*#__PURE__*/React__default["default"].createElement("header", null, logo ? /*#__PURE__*/React__default["default"].createElement("img", {
-        src: logo
-      }) : null, title ? /*#__PURE__*/React__default["default"].createElement("div", {
+      }, /*#__PURE__*/React__default["default"].createElement("header", null, title ? /*#__PURE__*/React__default["default"].createElement("div", {
         className: "title"
-      }, /*#__PURE__*/React__default["default"].createElement(Text, null, title)) : null, children), /*#__PURE__*/React__default["default"].createElement("main", null, userRequired ? /*#__PURE__*/React__default["default"].createElement(TextField, {
+      }, /*#__PURE__*/React__default["default"].createElement(Text, null, title)) : null), /*#__PURE__*/React__default["default"].createElement("main", {
+        className: "reset-password-form"
+      }, userRequired ? /*#__PURE__*/React__default["default"].createElement(TextField, {
         id: "user",
+        className: userStyle,
         outlined: true,
         icon: "person",
         label: userLabel,
         lapse: 100,
         onChange: changeField,
         onEnter: ok
-      }) : null, oldPwdRequired ? /*#__PURE__*/React__default["default"].createElement(TextField, {
+      }) : null, userRequired ? errors.user ? /*#__PURE__*/React__default["default"].createElement("div", {
+        className: "error-message"
+      }, errors.user) : null : null, oldPwdRequired ? /*#__PURE__*/React__default["default"].createElement(TextField, {
         id: "oldPassword",
+        className: oldPasswordStyle,
         outlined: true,
         icon: "lock",
         type: "password",
@@ -1885,8 +1969,11 @@
         lapse: 100,
         onChange: changeField,
         onEnter: ok
-      }) : null, /*#__PURE__*/React__default["default"].createElement(TextField, {
+      }) : null, oldPwdRequired ? errors.oldPassword ? /*#__PURE__*/React__default["default"].createElement("div", {
+        className: "error-message"
+      }, errors.oldPassword) : null : null, /*#__PURE__*/React__default["default"].createElement(TextField, {
         id: "password1",
+        className: password1Style,
         outlined: true,
         icon: "lock",
         type: "password",
@@ -1894,8 +1981,11 @@
         lapse: 100,
         onChange: changeField,
         onEnter: ok
-      }), /*#__PURE__*/React__default["default"].createElement(TextField, {
+      }), errors.password1 ? /*#__PURE__*/React__default["default"].createElement("div", {
+        className: "error-message"
+      }, errors.password1) : null, children, /*#__PURE__*/React__default["default"].createElement(TextField, {
         id: "password2",
+        className: password2Style,
         outlined: true,
         icon: "lock",
         type: "password",
@@ -1903,12 +1993,9 @@
         lapse: 100,
         onChange: changeField,
         onEnter: ok
-      }), error ? /*#__PURE__*/React__default["default"].createElement("div", {
-        className: "error"
-      }, error) : null), /*#__PURE__*/React__default["default"].createElement("footer", null, /*#__PURE__*/React__default["default"].createElement(Button, {
-        label: cancelLabel,
-        action: close
-      }), /*#__PURE__*/React__default["default"].createElement(Button, {
+      }), errors.password2 ? /*#__PURE__*/React__default["default"].createElement("div", {
+        className: "error-message"
+      }, errors.password2) : null), /*#__PURE__*/React__default["default"].createElement("footer", null, /*#__PURE__*/React__default["default"].createElement(Button, {
         label: okLabel,
         raised: true,
         disabled: !isValid,