conexys-elements 1.1.23 → 1.1.26

package/dist/index.js

@@ -41,8 +41,11 @@ 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 Visibility = require('@mui/icons-material/Visibility');
+var VisibilityOff = require('@mui/icons-material/VisibilityOff');
 var TextField = require('@mui/material/TextField');
 var InputLabel = require('@mui/material/InputLabel');
+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 +4191,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 +4215,7 @@ function AppFormFields({
       maxLength: block.maxlength,
       pattern: block.pattern
     },
+    showPasswordToggle: block.showPasswordToggle,
     items: block.items
   }, 'form')), children);
 }
@@ -4285,6 +4290,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 +4650,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 +4674,7 @@ function AppFormFieldsNoUser({
       maxLength: block.maxlength,
       pattern: block.pattern
     },
+    showPasswordToggle: block.showPasswordToggle,
     items: block.items
   }, 'nouser')), children);
 }
@@ -4820,6 +4828,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 +4860,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 +10322,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 +10375,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 +10385,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 +10495,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 +10519,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"
@@ -10783,6 +10820,11 @@ const InputPassword = ({
   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 +10858,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 +10867,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 +10883,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 +10891,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 +10917,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 +10927,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 +10943,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 +10952,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 +11117,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 +11211,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", {