@plesk/ui-library 3.27.2 → 3.27.3

package/esm/components/FormField/FormField.js

@@ -22,11 +22,11 @@ import VerticalContext from '../VerticalContext';
 import ScrollableElementFormContext from '../Form/ScrollableElementFormContext';
 import DisabledContext from '../Form/DisabledContext';
 const defaultValue = undefined;
-/**
- * Simple helper to handle situations when we expecting only array
- * @param value
- * @param nonEmpty
- * @returns {Array}
+/**
+ * Simple helper to handle situations when we expecting only array
+ * @param value
+ * @param nonEmpty
+ * @returns {Array}
  */
 
 const getArrayHelper = (value, nonEmpty = false) => {
@@ -48,8 +48,8 @@ const isControlled = props => props.value !== undefined;
 const isEmpty = value => {
   return !value && value !== 0 || Array.isArray(value) && value.length === 0 || !Array.isArray(value) && typeof value === 'object' && Object.values(value).filter(t => Boolean(t)).length === 0;
 };
-/**
- * @since 0.0.54
+/**
+ * @since 0.0.54
  */
 
 
@@ -415,10 +415,10 @@ class FormField extends Component {
 
     clearTimeout(this.focusTimer);
   }
-  /**
-   * Field API provided to field
-   * @param index
-   * @returns {Object}
+  /**
+   * Field API provided to field
+   * @param index
+   * @returns {Object}
    */
 
 
@@ -442,127 +442,127 @@ class FormField extends Component {
 }
 
 const propTypes = {
-  /**
-   * Field ID.
-   * @since 0.0.59
+  /**
+   * Field ID.
+   * @since 0.0.59
    */
   id: PropTypes.string,
 
-  /**
-   * Field name.
-   * @since 0.0.54
+  /**
+   * Field name.
+   * @since 0.0.54
    */
   name: PropTypes.string,
 
-  /**
-   * Field value.
-   * @deprecated Use [Form](#!/Form) values.
-   * @since 0.0.57
+  /**
+   * Field value.
+   * @deprecated Use [Form](#!/Form) values.
+   * @since 0.0.57
    */
   value: PropTypes.any,
 
-  /**
-   * A callback function, can be executed when the value is changing.
-   * @since 0.4.1
+  /**
+   * A callback function, can be executed when the value is changing.
+   * @since 0.4.1
    */
   onChange: PropTypes.func,
 
-  /**
-   * Field label.
-   * @since 0.0.54
+  /**
+   * Field label.
+   * @since 0.0.54
    */
   label: PropTypes.any,
 
-  /**
-   * Field description.
-   * @since 0.0.57
+  /**
+   * Field description.
+   * @since 0.0.57
    */
   description: PropTypes.any,
 
-  /**
-   * Show long descriptions in popover after clicking on "( i )" icon
-   * @since 3.14.0
+  /**
+   * Show long descriptions in popover after clicking on "( i )" icon
+   * @since 3.14.0
    */
   fullDescription: PropTypes.node,
 
-  /**
-   * Field errors.
-   *  @deprecated Use [Form](#!/Form) errors.
-   * @since 0.0.57
+  /**
+   * Field errors.
+   *  @deprecated Use [Form](#!/Form) errors.
+   * @since 0.0.57
    */
   errors: PropTypes.oneOfType([PropTypes.object, PropTypes.array]),
 
-  /**
-   * Indicates whether field is required.
-   * @since 0.0.54
+  /**
+   * Indicates whether field is required.
+   * @since 0.0.54
    */
   required: PropTypes.bool,
 
-  /**
-   * Content of the `FormField`.
-   * @since 0.0.54
+  /**
+   * Content of the `FormField`.
+   * @since 0.0.54
    */
   children: PropTypes.oneOfType([PropTypes.node, PropTypes.func]),
 
-  /**
-   * If 'true', a field will be multiple. You can also limit the number of fields with a value like { max: 5 }.
-   * @since 1.12.0
+  /**
+   * If 'true', a field will be multiple. You can also limit the number of fields with a value like { max: 5 }.
+   * @since 1.12.0
    */
   multi: PropTypes.oneOfType([PropTypes.bool, PropTypes.shape({
     max: PropTypes.number.isRequired
   })]),
 
-  /**
-   * @ignore Disabled state of multiple field.
+  /**
+   * @ignore Disabled state of multiple field.
    */
   disabled: PropTypes.bool,
 
-  /**
-   * Localization messages
-   * @since 1.12.0
+  /**
+   * Localization messages
+   * @since 1.12.0
    */
   locale: PropTypes.shape({
     addMore: PropTypes.node,
     remove: PropTypes.node
   }),
 
-  /**
-   * Callback which called for all values. If it returns 'true' a pseudo-link 'Add more' will be disabled
-   * @ignore
-   * @deprecated
+  /**
+   * Callback which called for all values. If it returns 'true' a pseudo-link 'Add more' will be disabled
+   * @ignore
+   * @deprecated
    */
   addMoreValidator: PropTypes.func,
 
-  /**
-   * A callback function, can be executed when the row is removed.
-   * @since 1.12.0
+  /**
+   * A callback function, can be executed when the row is removed.
+   * @since 1.12.0
    */
   onRemoveRow: PropTypes.func,
 
-  /**
-   * @ignore
+  /**
+   * @ignore
    */
   className: PropTypes.string,
 
-  /**
-   * @ignore
+  /**
+   * @ignore
    */
   baseClassName: PropTypes.string,
 
-  /**
-   * @ignore
+  /**
+   * @ignore
    */
   form: PropTypes.object,
 
-  /**
-   * Vertical or horizontal field view.
-   * If it is not defined explicitly, the vertical mode will use from Form or Section components.
-   * @since 3.13.0
+  /**
+   * Vertical or horizontal field view.
+   * If it is not defined explicitly, the vertical mode will use from Form or Section components.
+   * @since 3.13.0
    */
   vertical: PropTypes.bool,
 
-  /**
-   * @ignore
+  /**
+   * @ignore
    */
   scrollableElement: PropTypes.oneOfType([PropTypes.instanceOf(Element), PropTypes.instanceOf(Window)])
 };
@@ -590,14 +590,14 @@ const defaultProps = {
 };
 FormField.propTypes = propTypes;
 FormField.defaultProps = defaultProps;
-/**
- * `FormField` component is used for showing of parameter values in Form or
- * for entering of user data with any form elements.
- *
- * For the most cases the following form elements can be used:
- * * [FormFieldText](#!/FormFieldText) for entering text,
- * * [FormFieldSelect](#!/FormFieldSelect), [FormFieldCheckbox](#!/FormFieldCheckbox),
- * [FormFieldRadioButtons](#!/FormFieldRadioButtons) for selecting options.
+/**
+ * `FormField` component is used for showing of parameter values in Form or
+ * for entering of user data with any form elements.
+ *
+ * For the most cases the following form elements can be used:
+ * * [FormFieldText](#!/FormFieldText) for entering text,
+ * * [FormFieldSelect](#!/FormFieldSelect), [FormFieldCheckbox](#!/FormFieldCheckbox),
+ * [FormFieldRadioButtons](#!/FormFieldRadioButtons) for selecting options.
  */
 
 const FormFieldWrapper = props => {

package/esm/components/FormFieldCheckbox/FormFieldCheckbox.js

@@ -7,10 +7,10 @@ import { CLS_PREFIX } from '../../constants';
 import Checkbox from '../Checkbox';
 import FormField from '../FormField';
 
-/**
- * `FormFieldCheckbox` component component is used for turning an option on or off
- * and selecting or deselecting an item.
- * @since 0.0.58
+/**
+ * `FormFieldCheckbox` component component is used for turning an option on or off
+ * and selecting or deselecting an item.
+ * @since 0.0.58
  */
 const FormFieldCheckbox = ({
   baseClassName,
@@ -52,52 +52,52 @@ const FormFieldCheckbox = ({
 }, label)));
 
 FormFieldCheckbox.propTypes = {
-  /**
-   * Disabled state of field.
-   * @since 0.1.0
+  /**
+   * Disabled state of field.
+   * @since 0.1.0
    */
   disabled: PropTypes.bool,
 
-  /**
-   * Custom checked value. Default is boolean true.
-   * @since 0.0.59
+  /**
+   * Custom checked value. Default is boolean true.
+   * @since 0.0.59
    */
   checkedValue: PropTypes.oneOfType([PropTypes.bool, PropTypes.string]),
 
-  /**
-   * Custom unchecked value. Default is boolean false.
-   * @since 0.0.59
+  /**
+   * Custom unchecked value. Default is boolean false.
+   * @since 0.0.59
    */
   uncheckedValue: PropTypes.oneOfType([PropTypes.bool, PropTypes.string]),
 
-  /**
-   * The browser will automatically focus on the component upon rendering the screen
-   * @since 1.9.0
+  /**
+   * The browser will automatically focus on the component upon rendering the screen
+   * @since 1.9.0
    */
   autoFocus: PropTypes.bool,
 
-  /**
-   * @ignore Field cannot be multiple
+  /**
+   * @ignore Field cannot be multiple
    */
   multi: PropTypes.bool,
 
-  /**
-   * @ignore
+  /**
+   * @ignore
    */
   label: PropTypes.any,
 
-  /**
-   * @ignore
+  /**
+   * @ignore
    */
   required: PropTypes.bool,
 
-  /**
-   * @ignore
+  /**
+   * @ignore
    */
   className: PropTypes.string,
 
-  /**
-   * @ignore
+  /**
+   * @ignore
    */
   baseClassName: PropTypes.string,
   fullDescription: PropTypes.string

package/esm/components/FormFieldPassword/FormFieldPassword.js

@@ -1,49 +1,30 @@
 import _extends from "@babel/runtime/helpers/extends";
 import _defineProperty from "@babel/runtime/helpers/defineProperty";
-// Copyright 1999-2021. Plesk International GmbH. All rights reserved.
+// Copyright 1999-2022. Plesk International GmbH. All rights reserved.
 import React, { Component, Fragment, createRef } from 'react';
-import PropTypes from 'prop-types';
 import classNames from 'classnames';
 import { CLS_PREFIX } from '../../constants';
 import Button from '../Button';
 import FormField from '../FormField';
 import Input from '../Input';
-import Popover from '../Popover';
 import Translate from '../Translate';
-import passwordScore, { PASSWORD_SCORE_RULES } from './passwordScore';
+import PasswordMeter from './PasswordMeter';
+import generatePassword from './generatePassword';
 import locale from './locale/en-US';
-const symbolClasses = {
-  upper: 'ABCDEFGHIJKLMNOPQRSTUVWXYZ',
-  lower: 'abcdefghijklmnopqrstuvwxyz',
-  number: '0123456789',
-  special: '!@#$%^&*?_~'
-};
-export const generatePassword = () => {
-  const password = ['upper', 'lower', 'lower', 'lower', 'number', 'number', 'special', 'number', 'upper', 'upper', 'lower', 'lower', 'lower', 'lower', 'lower', 'lower'];
-  return password.sort((a, b) => Math.floor(b.length * Math.random()) - Math.floor(a.length * Math.random())).map(symbolClass => symbolClasses[symbolClass][Math.floor(symbolClasses[symbolClass].length * Math.random())]).join('');
-};
-/**
- * `FormFieldPassword` component provides secure way to enter a password.
- * @since 0.0.58
- */
 
+/**
+ * `FormFieldPassword` component provides secure way to enter a password.
+ * @since 0.0.58
+ */
 class FormFieldPassword extends Component {
   constructor(...args) {
     super(...args);
 
     _defineProperty(this, "state", {
       visible: false,
-      passwordMeterVisible: false,
-      scoreResult: {
-        password: null,
-        intent: null,
-        strength: null,
-        unusedRules: []
-      }
+      passwordMeterVisible: false
     });
 
-    _defineProperty(this, "passwordOnScoring", null);
-
     _defineProperty(this, "targetRef", /*#__PURE__*/createRef());
 
     _defineProperty(this, "handleToggleClick", () => {
@@ -63,134 +44,6 @@ class FormFieldPassword extends Component {
     _defineProperty(this, "handleBlur", this.handleClosePasswordMeter);
   }
 
-  async passwordScore(value) {
-    if (!value) {
-      return {
-        password: null,
-        intent: null,
-        strength: null,
-        unusedRules: []
-      };
-    }
-
-    const {
-      passwordScoreRules
-    } = this.props;
-    const {
-      password,
-      score,
-      unusedRules
-    } = await passwordScore(value, passwordScoreRules);
-    let intent = 'success';
-    let strength = /*#__PURE__*/React.createElement(Translate, {
-      content: "FormFieldPassword.strengthVeryStrong",
-      fallback: locale.strengthVeryStrong
-    });
-
-    if (score < 16) {
-      intent = 'danger';
-      strength = /*#__PURE__*/React.createElement(Translate, {
-        content: "FormFieldPassword.strengthVeryWeak",
-        fallback: locale.strengthVeryWeak
-      });
-    } else if (score < 25) {
-      intent = 'danger';
-      strength = /*#__PURE__*/React.createElement(Translate, {
-        content: "FormFieldPassword.strengthWeak",
-        fallback: locale.strengthWeak
-      });
-    } else if (score < 35) {
-      intent = 'warning';
-      strength = /*#__PURE__*/React.createElement(Translate, {
-        content: "FormFieldPassword.strengthMedium",
-        fallback: locale.strengthMedium
-      });
-    } else if (score < 45) {
-      intent = 'success';
-      strength = /*#__PURE__*/React.createElement(Translate, {
-        content: "FormFieldPassword.strengthStrong",
-        fallback: locale.strengthStrong
-      });
-    }
-
-    return {
-      password,
-      intent,
-      strength,
-      unusedRules
-    };
-  }
-
-  renderPasswordMeter(value, target) {
-    const {
-      passwordMeterVisible
-    } = this.state;
-    const {
-      passwordMeterProps
-    } = this.props;
-    const {
-      password,
-      intent,
-      strength,
-      unusedRules
-    } = this.state.scoreResult;
-
-    if (!!value && value !== password && value !== this.passwordOnScoring) {
-      this.passwordOnScoring = value;
-      this.passwordScore(value).then(scoreResult => {
-        if (this.passwordOnScoring === scoreResult.password) {
-          this.passwordOnScoring = null;
-          this.setState({
-            scoreResult
-          });
-        }
-      });
-    }
-
-    return /*#__PURE__*/React.createElement(Popover, _extends({
-      visible: passwordMeterVisible && !!value,
-      target: target,
-      targetRef: this.targetRef,
-      placement: "bottom-right",
-      intent: intent,
-      canCloseOnOutsideClick: false,
-      canCloseOnEscapePress: false,
-      onClose: this.handleClosePasswordMeter
-    }, passwordMeterProps), /*#__PURE__*/React.createElement(Translate, {
-      content: "FormFieldPassword.passwordStrength",
-      fallback: locale.passwordStrength,
-      params: {
-        strength: /*#__PURE__*/React.createElement("b", null, strength)
-      }
-    }), /*#__PURE__*/React.createElement("br", null), unusedRules.length ? /*#__PURE__*/React.createElement(Fragment, null, /*#__PURE__*/React.createElement(Translate, {
-      content: "FormFieldPassword.improvePassword",
-      fallback: locale.improvePassword
-    }), /*#__PURE__*/React.createElement("br", null), /*#__PURE__*/React.createElement("ul", null, unusedRules.slice(0, 3).map(({
-      rule
-    }, index) => {
-      const {
-        name
-      } = rule;
-      let {
-        message
-      } = rule;
-
-      if (name && !message) {
-        message = /*#__PURE__*/React.createElement(Translate, {
-          content: `FormFieldPassword.${name}`,
-          fallback: locale[name]
-        });
-      }
-
-      return /*#__PURE__*/React.createElement("li", {
-        key: name || index.toString()
-      }, message);
-    }))) : /*#__PURE__*/React.createElement(Translate, {
-      content: "FormFieldPassword.yourPasswordIsStrong",
-      fallback: locale.yourPasswordIsStrong
-    }));
-  }
-
   renderGenerateButton({
     setValue,
     isDisabled
@@ -232,12 +85,15 @@ class FormFieldPassword extends Component {
       hideGenerateButton,
       hidePasswordMeter,
       passwordMeterProps,
-      passwordScoreRules,
       size,
       autoFocus,
       autoComplete,
       ...props
     } = this.props;
+    const {
+      visible,
+      passwordMeterVisible
+    } = this.state;
     return /*#__PURE__*/React.createElement(FormField, _extends({
       className: classNames(baseClassName, className)
     }, props), ({
@@ -247,18 +103,18 @@ class FormFieldPassword extends Component {
       setValue,
       isDisabled
     }) => {
+      const value = getValue('');
       const input = /*#__PURE__*/React.createElement(Input, {
         id: getId(),
         name: getName(),
-        type: this.state.visible ? 'text' : 'password',
-        value: getValue(''),
+        type: visible ? 'text' : 'password',
+        value: value,
         onChange: e => {
           setValue(e.target.value);
           this.setState({
             passwordMeterVisible: true
           });
         },
-        onFocus: this.handleFocus,
         onBlur: this.handleBlur,
         autoFocus: autoFocus,
         autoComplete: autoComplete,
@@ -267,8 +123,8 @@ class FormFieldPassword extends Component {
         suffix: hideShowButton ? null : /*#__PURE__*/React.createElement(Button, {
           className: `${baseClassName}__button--show`,
           onClick: this.handleToggleClick,
-          icon: this.state.visible ? 'visible' : 'invisible',
-          tooltip: this.state.visible ? /*#__PURE__*/React.createElement(Translate, {
+          icon: visible ? 'visible' : 'invisible',
+          tooltip: visible ? /*#__PURE__*/React.createElement(Translate, {
             content: "FormFieldPassword.hidePassword",
             fallback: locale.hidePassword
           }) : /*#__PURE__*/React.createElement(Translate, {
@@ -287,7 +143,12 @@ class FormFieldPassword extends Component {
         className: classNames(`${baseClassName}__control`, `${baseClassName}__control--${size}`)
       }, /*#__PURE__*/React.createElement("div", {
         className: classNames(`${baseClassName}__field`, `${baseClassName}__field--${size}`)
-      }, hidePasswordMeter ? input : this.renderPasswordMeter(getValue(), input)), hideGenerateButton ? null : this.renderGenerateButton({
+      }, hidePasswordMeter ? input : /*#__PURE__*/React.createElement(PasswordMeter, _extends({
+        value: value,
+        targetRef: this.targetRef,
+        visible: passwordMeterVisible && value !== '',
+        onClose: this.handleClosePasswordMeter
+      }, passwordMeterProps), input)), hideGenerateButton ? null : this.renderGenerateButton({
         setValue,
         isDisabled
       }));
@@ -296,87 +157,17 @@ class FormFieldPassword extends Component {
 
 }
 
-FormFieldPassword.propTypes = {
-  /**
-   * Is show button hidden?
-   * @since 0.0.59
-   */
-  hideShowButton: PropTypes.bool,
-
-  /**
-   * Is generate button hidden?
-   * @since 0.0.59
-   */
-  hideGenerateButton: PropTypes.bool,
-
-  /**
-   * Is password meter hidden?
-   * @since 0.0.59
-   */
-  hidePasswordMeter: PropTypes.bool,
-
-  /**
-   * Additional props for password meter. . See [Popover](#!/Popover) for more information.
-   * @since 1.5.6
-   */
-  passwordMeterProps: PropTypes.object,
-
-  /**
-   * A set of custom password score rules.
-   * @since 3.21.0
-   */
-  passwordScoreRules: PropTypes.arrayOf(PropTypes.shape({
-    name: PropTypes.string,
-    message: PropTypes.oneOfType([PropTypes.string, PropTypes.element]),
-    score: PropTypes.func.isRequired
-  })),
-
-  /**
-   * Size of the control
-   * @since 1.5.6
-   */
-  size: PropTypes.oneOf(['md', 'lg', 'xl', 'fill']),
-
-  /**
-   * The browser will automatically focus on the component upon rendering the screen
-   * @since 1.9.0
-   */
-  autoFocus: PropTypes.bool,
-
-  /**
-   * Prevent password autocompletion.
-   * @since 2.5.1
-   */
-  autoComplete: PropTypes.oneOf(['new-password']),
-
-  /**
-   * A render function for customizing the password generation button.
-   * @since 3.13.0
-   */
-  generateButton: PropTypes.func,
-
-  /**
-   * @ignore
-   */
-  className: PropTypes.string,
-
-  /**
-   * @ignore
-   */
-  baseClassName: PropTypes.string
-};
-FormFieldPassword.defaultProps = {
+_defineProperty(FormFieldPassword, "defaultProps", {
   hideShowButton: false,
   generateButton: undefined,
   hideGenerateButton: false,
   hidePasswordMeter: false,
   passwordMeterProps: {},
-  passwordScoreRules: undefined,
   size: 'md',
   autoFocus: undefined,
   autoComplete: undefined,
   className: undefined,
   baseClassName: `${CLS_PREFIX}form-field-password`
-};
-FormFieldPassword.PASSWORD_SCORE_RULES = PASSWORD_SCORE_RULES;
+});
+
 export default FormFieldPassword;