ywana-core8 0.1.16 → 0.1.18

package/dist/index.cjs

@@ -276,7 +276,8 @@ var Tooltip = function Tooltip(props) {
  * 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,
@@ -297,9 +298,11 @@ var Icon = function Icon(_ref) {
   }
   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);
@@ -1363,7 +1366,9 @@ var TextField = function TextField(props) {
     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) {
@@ -1385,6 +1390,20 @@ var TextField = function TextField(props) {
   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";
@@ -1405,12 +1424,19 @@ var TextField = function TextField(props) {
     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);
@@ -1738,6 +1764,7 @@ var LoginBox = function LoginBox(_ref) {
     onEnter: ok,
     outlined: true
   }), /*#__PURE__*/React__default["default"].createElement(TextField, {
+    id: "loginbox-password",
     label: tx(passwordLabel),
     value: password,
     onChange: changePassword,
@@ -1769,37 +1796,37 @@ function validatePassword(contraseña) {
 
   // 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];
   }
 
@@ -1813,47 +1840,100 @@ function validatePassword(contraseña) {
  * 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() {
@@ -1861,30 +1941,34 @@ var ResetPasswordBox = function ResetPasswordBox(_ref) {
       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",
@@ -1892,8 +1976,11 @@ var ResetPasswordBox = function ResetPasswordBox(_ref) {
     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",
@@ -1901,8 +1988,11 @@ var ResetPasswordBox = function ResetPasswordBox(_ref) {
     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",
@@ -1910,12 +2000,9 @@ var ResetPasswordBox = function ResetPasswordBox(_ref) {
     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,