conexys-elements 1.1.23 → 1.1.27

package/dist/index.js

@@ -41,8 +41,15 @@ var Checkboxmui = require('@mui/material/Checkbox');
 var FormControlLabel = require('@mui/material/FormControlLabel');
 var reactHookForm = require('react-hook-form');
 var Button$3 = require('@mui/material/Button');
-var TextField = require('@mui/material/TextField');
+var Visibility = require('@mui/icons-material/Visibility');
+var VisibilityOff = require('@mui/icons-material/VisibilityOff');
+var AdapterDayjs = require('@mui/x-date-pickers/AdapterDayjs');
+var LocalizationProvider = require('@mui/x-date-pickers/LocalizationProvider');
+var DatePicker = require('@mui/x-date-pickers/DatePicker');
 var InputLabel = require('@mui/material/InputLabel');
+var dayjs = require('dayjs');
+var TextField = require('@mui/material/TextField');
+var InputAdornment = require('@mui/material/InputAdornment');
 var JoditEditor = require('jodit-react');
 var Radio = require('@mui/material/Radio');
 var RadioGroup = require('@mui/material/RadioGroup');
@@ -4188,6 +4195,7 @@ function AppFormFields({
       maxLength: block.maxlength,
       pattern: block.pattern
     },
+    showPasswordToggle: block.showPasswordToggle,
     items: block.items
   }, 'form')), additionalfields1.content.body.map(block => RenderForm({
     component: block.component,
@@ -4211,6 +4219,7 @@ function AppFormFields({
       maxLength: block.maxlength,
       pattern: block.pattern
     },
+    showPasswordToggle: block.showPasswordToggle,
     items: block.items
   }, 'form')), children);
 }
@@ -4285,6 +4294,7 @@ function AppFormFieldsFromConfig({
       maxLength: block.maxlength || block.validate && block.validate.maxLength,
       pattern: block.pattern || block.validate && block.validate.pattern
     },
+    showPasswordToggle: block.showPasswordToggle,
     items: block.items || []
   }, nouser || 'user')));
 }
@@ -4644,6 +4654,7 @@ function AppFormFieldsNoUser({
       maxLength: block.maxlength,
       pattern: block.pattern
     },
+    showPasswordToggle: block.showPasswordToggle,
     items: block.items
   }, 'nouser')), additionalfields1.content.body.map(block => RenderForm({
     component: block.component,
@@ -4667,6 +4678,7 @@ function AppFormFieldsNoUser({
       maxLength: block.maxlength,
       pattern: block.pattern
     },
+    showPasswordToggle: block.showPasswordToggle,
     items: block.items
   }, 'nouser')), children);
 }
@@ -4820,6 +4832,7 @@ function AppFormFieldsTable({
       maxLength: block.maxlength || block.validate && block.validate.maxLength,
       pattern: block.pattern || block.validate && block.validate.pattern
     },
+    showPasswordToggle: block.showPasswordToggle,
     items: block.items || [],
     itemID: id1,
     adminCheck: show === 'admin'
@@ -4851,6 +4864,7 @@ function AppFormFieldsTable({
       maxLength: block.maxlength || block.validate && block.validate.maxLength,
       pattern: block.pattern || block.validate && block.validate.pattern
     },
+    showPasswordToggle: block.showPasswordToggle,
     items: block.items || [],
     itemID: id1,
     adminCheck: show === 'admin'
@@ -10312,6 +10326,11 @@ const FormLogin = ({
   const [trigger1, setTrigger1] = React.useState(0);
   const [trigger2, setTrigger2] = React.useState(0);
   const [isChecked, setIsChecked] = React.useState(false);
+  const showToggle = block.showPasswordToggle === true;
+  const [showPassword, setShowPassword] = React.useState(false);
+  const [showConfirmation, setShowConfirmation] = React.useState(false);
+  const handleTogglePassword = () => setShowPassword(v => !v);
+  const handleToggleConfirmation = () => setShowConfirmation(v => !v);
   const handleChange = () => {
     setIsChecked(current => !current);
   };
@@ -10360,7 +10379,7 @@ const FormLogin = ({
     }, block.label)), /*#__PURE__*/React.createElement("div", {
       className: "input-group"
     }, /*#__PURE__*/React.createElement("input", {
-      type: block.type,
+      type: showToggle && showPassword ? 'text' : block.type,
       value: block.value || '',
       name: block.name,
       onChange: block.onChange,
@@ -10370,7 +10389,13 @@ const FormLogin = ({
       className: "input-group-text"
     }, /*#__PURE__*/React.createElement("i", {
       className: "bx bx-lock text-4"
-    }))), /*#__PURE__*/React.createElement(reactRouterDom.NavLink, {
+    })), showToggle && (/*#__PURE__*/React.createElement("button", {
+      type: "button",
+      className: "input-group-text password-toggle-btn",
+      onClick: handleTogglePassword,
+      "aria-label": t('System.show_password'),
+      tabIndex: -1
+    }, showPassword ? /*#__PURE__*/React.createElement(VisibilityOff, null) : /*#__PURE__*/React.createElement(Visibility, null)))), /*#__PURE__*/React.createElement(reactRouterDom.NavLink, {
       to: forgot_passworddir,
       className: "float-end"
     }, t('login.recover_password')));
@@ -10474,15 +10499,23 @@ const FormLogin = ({
       className: "col-sm-6 mb-3"
     }, /*#__PURE__*/React.createElement("label", null, labels[1]), /*#__PURE__*/React.createElement("span", {
       className: "required"
-    }, "*"), /*#__PURE__*/React.createElement("input", {
+    }, "*"), /*#__PURE__*/React.createElement("div", {
+      className: "input-group"
+    }, /*#__PURE__*/React.createElement("input", {
       id: ids[1],
-      type: "password",
+      type: showToggle && showPassword ? 'text' : 'password',
       className: errors.password ? 'form-control form-control-lg is-invalid' : 'form-control form-control-lg',
       ...register('password', {
         required: true,
         minLength: 5
       })
-    }), errors.password?.type === 'required' && (/*#__PURE__*/React.createElement("em", {
+    }), showToggle && (/*#__PURE__*/React.createElement("button", {
+      type: "button",
+      className: "input-group-text password-toggle-btn",
+      onClick: handleTogglePassword,
+      "aria-label": t('System.show_password'),
+      tabIndex: -1
+    }, showPassword ? /*#__PURE__*/React.createElement(VisibilityOff, null) : /*#__PURE__*/React.createElement(Visibility, null)))), errors.password?.type === 'required' && (/*#__PURE__*/React.createElement("em", {
       className: "error invalid-feedback"
     }, t('error.please_enter_password'))), errors.password?.type === 'minLength' && (/*#__PURE__*/React.createElement("em", {
       className: "error invalid-feedback"
@@ -10490,16 +10523,24 @@ const FormLogin = ({
       className: "col-sm-6 mb-3"
     }, /*#__PURE__*/React.createElement("label", null, labels[2]), /*#__PURE__*/React.createElement("span", {
       className: "required"
-    }, "*"), /*#__PURE__*/React.createElement("input", {
+    }, "*"), /*#__PURE__*/React.createElement("div", {
+      className: "input-group"
+    }, /*#__PURE__*/React.createElement("input", {
       id: ids[2],
-      type: "password",
+      type: showToggle && showConfirmation ? 'text' : 'password',
       className: errors.password_confirmation ? 'form-control form-control-lg is-invalid' : 'form-control form-control-lg',
       ...register('password_confirmation', {
         required: true,
         minLength: 5,
         validate: value => value === password.current || t('error.passwords_do_not_match')
       })
-    }), errors.password_confirmation?.type === 'required' && (/*#__PURE__*/React.createElement("em", {
+    }), showToggle && (/*#__PURE__*/React.createElement("button", {
+      type: "button",
+      className: "input-group-text password-toggle-btn",
+      onClick: handleToggleConfirmation,
+      "aria-label": t('System.show_password'),
+      tabIndex: -1
+    }, showConfirmation ? /*#__PURE__*/React.createElement(VisibilityOff, null) : /*#__PURE__*/React.createElement(Visibility, null)))), errors.password_confirmation?.type === 'required' && (/*#__PURE__*/React.createElement("em", {
       className: "error invalid-feedback"
     }, t('error.repeat_password'))), errors.password_confirmation?.type === 'minLength' && (/*#__PURE__*/React.createElement("em", {
       className: "error invalid-feedback"
@@ -10778,11 +10819,78 @@ const InputFile = ({
   }, fileName))));
 };
 
+const toDayjsValue = raw => {
+  if (raw == null || raw === '') return null;
+  if (dayjs.isDayjs(raw)) return raw;
+  if (typeof raw === 'string') {
+    const parsed = dayjs(raw.trim());
+    if (parsed.isValid()) return parsed;
+    const fromDisplay = dayjs(raw.trim(), 'DD/MM/YYYY');
+    if (fromDisplay.isValid()) return fromDisplay;
+    return null;
+  }
+  return null;
+};
+const InputDate = /*#__PURE__*/React.memo(({
+  block
+}) => {
+  const configLogs = useConexysConfig();
+  const [t] = reactI18next.useTranslation('global');
+  const currentValue = toDayjsValue(block.value);
+  const handleChange = newValue => {
+    if (!block.onChange) return;
+    const syntheticEvent = {
+      target: {
+        name: block.name,
+        value: newValue ? newValue.format('YYYY-MM-DD') : ''
+      }
+    };
+    block.onChange(syntheticEvent);
+  };
+  const handleError = err => {
+    const error = err;
+    if (error?.response?.status === 401) Uservalidationerror(configLogs);
+  };
+  return /*#__PURE__*/React.createElement("div", {
+    className: `form-group ${block.ref ?? ''}`
+  }, /*#__PURE__*/React.createElement(InputLabel, {
+    htmlFor: block.id
+  }, block.label, block.validate?.required && /*#__PURE__*/React.createElement("span", {
+    className: "required"
+  }, "*")), /*#__PURE__*/React.createElement("div", null, /*#__PURE__*/React.createElement(LocalizationProvider.LocalizationProvider, {
+    dateAdapter: AdapterDayjs.AdapterDayjs
+  }, /*#__PURE__*/React.createElement(DatePicker.DatePicker, {
+    label: block.placeholder ?? block.label,
+    value: currentValue,
+    onChange: handleChange,
+    slotProps: {
+      textField: {
+        id: block.id,
+        name: block.name,
+        size: 'small',
+        fullWidth: true,
+        required: block.validate?.required,
+        error: Boolean(block.error),
+        helperText: block.helperText
+      }
+    },
+    format: "DD/MM/YYYY",
+    onError: handleError
+  }))));
+}, (prevProps, nextProps) => {
+  return prevProps.block.value === nextProps.block.value && prevProps.block.name === nextProps.block.name && prevProps.block.label === nextProps.block.label && prevProps.block.onChange === nextProps.block.onChange;
+});
+
 const InputPassword = ({
   block,
   inParagraph = false
 }) => {
   const [t] = reactI18next.useTranslation('global');
+  const showToggle = block.showPasswordToggle === true;
+  const [showPassword, setShowPassword] = React.useState(false);
+  const [showConfirmation, setShowConfirmation] = React.useState(false);
+  const handleTogglePassword = () => setShowPassword(v => !v);
+  const handleToggleConfirmation = () => setShowConfirmation(v => !v);
   const {
     register,
     formState: {
@@ -10816,7 +10924,7 @@ const InputPassword = ({
     }, block.label, block.validate.required && /*#__PURE__*/React.createElement("span", {
       className: "required"
     }, "*")), /*#__PURE__*/React.createElement("input", {
-      type: "password",
+      type: showToggle && showPassword ? 'text' : 'password',
       id: block.id,
       className: errors.password ? `${block.className} is-invalid` : block.className,
       ...register(block.name, {
@@ -10825,7 +10933,13 @@ const InputPassword = ({
         maxLength: block.validate.maxLength
       }),
       required: true
-    }), errors.password && (/*#__PURE__*/React.createElement("span", {
+    }), showToggle && (/*#__PURE__*/React.createElement("button", {
+      type: "button",
+      className: "password-toggle-btn",
+      onClick: handleTogglePassword,
+      "aria-label": t('System.show_password'),
+      tabIndex: -1
+    }, showPassword ? /*#__PURE__*/React.createElement(VisibilityOff, null) : /*#__PURE__*/React.createElement(Visibility, null))), errors.password && (/*#__PURE__*/React.createElement("span", {
       className: "error invalid-feedback"
     }, errors.password.type === 'required' && t('error.please_enter_password'), errors.password.type === 'minLength' && `${t('error.password_minimum')} ${block.validate.minLength} ${t('characters')}`, errors.password.type === 'maxLength' && `${t('error.password_maximum')} ${block.validate.maxLength} ${t('characters')}`)))) : (/*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(InputLabel, {
       htmlFor: block.id
@@ -10835,7 +10949,7 @@ const InputPassword = ({
       hiddenLabel: true,
       size: "small",
       id: block.id,
-      type: "password",
+      type: showToggle && showPassword ? 'text' : 'password',
       value: resetvalue,
       className: errors.password ? `${block.className} is-invalid` : block.className,
       ...register(block.name, {
@@ -10843,7 +10957,19 @@ const InputPassword = ({
         minLength: block.validate.minLength,
         maxLength: block.validate.maxLength
       }),
-      required: true
+      required: true,
+      slotProps: showToggle ? {
+        input: {
+          endAdornment: (/*#__PURE__*/React.createElement(InputAdornment, {
+            position: "end"
+          }, /*#__PURE__*/React.createElement(IconButton, {
+            "aria-label": t('System.show_password'),
+            onClick: handleTogglePassword,
+            edge: "end",
+            tabIndex: -1
+          }, showPassword ? /*#__PURE__*/React.createElement(VisibilityOff, null) : /*#__PURE__*/React.createElement(Visibility, null))))
+        }
+      } : undefined
     }), errors.password?.type === 'required' && (/*#__PURE__*/React.createElement("em", {
       className: "error invalid-feedback"
     }, t('error.please_enter_password'))), errors.password?.type === 'minLength' && (/*#__PURE__*/React.createElement("em", {
@@ -10857,7 +10983,7 @@ const InputPassword = ({
     }, t('System.repeat'), " ", block.label, block.validate.required && /*#__PURE__*/React.createElement("span", {
       className: "required"
     }, "*")), /*#__PURE__*/React.createElement("input", {
-      type: "password",
+      type: showToggle && showConfirmation ? 'text' : 'password',
       id: block.id + 100,
       className: errors.password_confirmation ? `${block.className} is-invalid` : block.className,
       ...register(`${block.name}_confirmation`, {
@@ -10867,7 +10993,13 @@ const InputPassword = ({
         validate: value => value === password.current || t('error.passwords_do_not_match')
       }),
       required: true
-    }), errors.password_confirmation && (/*#__PURE__*/React.createElement("span", {
+    }), showToggle && (/*#__PURE__*/React.createElement("button", {
+      type: "button",
+      className: "password-toggle-btn",
+      onClick: handleToggleConfirmation,
+      "aria-label": t('System.show_password'),
+      tabIndex: -1
+    }, showConfirmation ? /*#__PURE__*/React.createElement(VisibilityOff, null) : /*#__PURE__*/React.createElement(Visibility, null))), errors.password_confirmation && (/*#__PURE__*/React.createElement("span", {
       className: "error invalid-feedback"
     }, errors.password_confirmation.type === 'required' && t('error.repeat_password'), errors.password_confirmation.type === 'minLength' && `${t('error.password_minimum')} ${block.validate.minLength} ${t('characters')}`, errors.password_confirmation.type === 'maxLength' && `${t('error.password_maximum')} ${block.validate.maxLength} ${t('characters')}`, errors.password_confirmation.type === 'validate' && t('error.password_not_match'))))) : (/*#__PURE__*/React.createElement(React.Fragment, null, /*#__PURE__*/React.createElement(InputLabel, {
       htmlFor: block.id + 100
@@ -10877,7 +11009,7 @@ const InputPassword = ({
       hiddenLabel: true,
       size: "small",
       id: block.id + 100,
-      type: "password",
+      type: showToggle && showConfirmation ? 'text' : 'password',
       value: resetvalue,
       className: errors.password_confirmation ? `${block.className} is-invalid` : block.className,
       ...register(`${block.name}_confirmation`, {
@@ -10886,7 +11018,19 @@ const InputPassword = ({
         maxLength: block.validate.maxLength,
         validate: value => value === password.current || t('error.passwords_do_not_match')
       }),
-      required: true
+      required: true,
+      slotProps: showToggle ? {
+        input: {
+          endAdornment: (/*#__PURE__*/React.createElement(InputAdornment, {
+            position: "end"
+          }, /*#__PURE__*/React.createElement(IconButton, {
+            "aria-label": t('System.show_password'),
+            onClick: handleToggleConfirmation,
+            edge: "end",
+            tabIndex: -1
+          }, showConfirmation ? /*#__PURE__*/React.createElement(VisibilityOff, null) : /*#__PURE__*/React.createElement(Visibility, null))))
+        }
+      } : undefined
     }), errors.password_confirmation?.type === 'required' && (/*#__PURE__*/React.createElement("em", {
       className: "error invalid-feedback"
     }, t('error.repeat_password'))), errors.password_confirmation?.type === 'minLength' && (/*#__PURE__*/React.createElement("em", {
@@ -11039,6 +11183,9 @@ const InputText = /*#__PURE__*/React.memo(({
   const [t] = reactI18next.useTranslation('global');
   const [errors, setError] = React.useState(false);
   const [texterror, setTextError] = React.useState('');
+  const showToggle = block.showPasswordToggle === true;
+  const [showPassword, setShowPassword] = React.useState(false);
+  const handleTogglePassword = () => setShowPassword(v => !v);
   const handleInputBlur = React.useCallback(async event => {
     const session = authStorage.getSessionId(configLogs) || '';
     const value = event.target.value;
@@ -11130,14 +11277,26 @@ const InputText = /*#__PURE__*/React.memo(({
     size: "small",
     name: block.name,
     id: block.id,
-    type: block.type,
+    type: showToggle && showPassword ? 'text' : block.type,
     placeholder: block.placeholder,
     value: block.value || '',
     onChange: block.onChange,
     onBlur: handleInputBlur,
     autoComplete: block.autocomplete,
     className: errors ? `${block.className} is-invalid` : block.className,
-    required: block.validate.required
+    required: block.validate.required,
+    slotProps: showToggle ? {
+      input: {
+        endAdornment: (/*#__PURE__*/React.createElement(InputAdornment, {
+          position: "end"
+        }, /*#__PURE__*/React.createElement(IconButton, {
+          "aria-label": t('System.show_password'),
+          onClick: handleTogglePassword,
+          edge: "end",
+          tabIndex: -1
+        }, showPassword ? /*#__PURE__*/React.createElement(VisibilityOff, null) : /*#__PURE__*/React.createElement(Visibility, null))))
+      }
+    } : undefined
   }));
   if (block.style === 'login') {
     return /*#__PURE__*/React.createElement("div", {
@@ -11530,6 +11689,7 @@ const Components = {
   info: Info,
   inputwysiwyg: InputWYSIWYG,
   inputfile: InputFile,
+  inputdate: InputDate,
   formlogin: FormLogin,
   inputpassword: InputPassword,
   text: Text,
@@ -13968,6 +14128,7 @@ exports.GenerateRandomPassword = GenerateRandomPassword;
 exports.Heading = Heading;
 exports.Image = Image;
 exports.Info = Info;
+exports.InputDate = InputDate;
 exports.InputFile = InputFile;
 exports.InputPassword = InputPassword;
 exports.InputText = InputText;