@plesk/ui-library 3.27.0 → 3.27.3

package/dist/plesk-ui-library.js

@@ -5753,6 +5753,7 @@ const Dialog = ({
   closable,
   onClose,
   closingConfirmation,
+  canClose,
   ...props
 }) => {
   const [isVisible, setIsVisible] = (0, _react.useState)(isOpen);
@@ -5863,8 +5864,8 @@ const Dialog = ({
     className: (0, _classnames.default)(baseClassName, className),
     isOpen: isVisible,
     onClose: onCloseWithConfirmation,
-    canCloseOnBackdropClick: closable,
-    canCloseOnEscapePress: closable,
+    canCloseOnBackdropClick: canClose && closable,
+    canCloseOnEscapePress: canClose && closable,
     size: size
   }, props), (title || subtitle || actions) && /*#__PURE__*/_react.default.createElement("header", {
     className: `${baseClassName}__header`
@@ -5887,6 +5888,7 @@ const Dialog = ({
     className: `${baseClassName}__header-actions`
   }, actions, closable && /*#__PURE__*/_react.default.createElement(_Button.default, {
     className: `${baseClassName}__header-close`,
+    disabled: !canClose,
     ghost: true,
     size: "lg",
     icon: "cross-mark",
@@ -5992,6 +5994,12 @@ Dialog.propTypes = {
    */
   closable: _propTypes.default.bool,
 
+  /**
+   * Disable close dialog button
+   * @since 4.0.0
+   */
+  canClose: _propTypes.default.bool,
+
   /**
    * On close event handler. Called immediately after dialog closed by "cancel" button or "Esc" key.
    * @since 0.0.68
@@ -6035,6 +6043,7 @@ Dialog.defaultProps = {
   form: undefined,
   size: 'md',
   closable: true,
+  canClose: true,
   onClose: undefined,
   closingConfirmation: undefined,
   children: undefined,
@@ -6521,6 +6530,20 @@ function _extends() { _extends = Object.assign || function (target) { for (var i
 
 function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
 
+const renderAdditionalButtons = buttons => {
+  const buttonProcessing = button => {
+    if ( /*#__PURE__*/(0, _react.isValidElement)(button) && button.type === _Button.default) {
+      return /*#__PURE__*/(0, _react.cloneElement)(button, {
+        size: 'lg'
+      });
+    }
+
+    return button;
+  };
+
+  return Array.isArray(buttons) ? buttons.map(buttonProcessing) : buttonProcessing(buttons);
+};
+
 class DrawerProgress extends _react.Component {
   constructor(...args) {
     super(...args);
@@ -6639,7 +6662,7 @@ class DrawerProgress extends _react.Component {
 
     const footer = hasFooter ? /*#__PURE__*/_react.default.createElement("div", {
       className: `${baseClassName}__footer`
-    }, buttons, canCancel && /*#__PURE__*/_react.default.createElement(_Button.default, {
+    }, renderAdditionalButtons(buttons), canCancel && /*#__PURE__*/_react.default.createElement(_Button.default, {
       onClick: this.handleCancel,
       size: "lg"
     }, /*#__PURE__*/_react.default.createElement(_Translate.default, {
@@ -8034,10 +8057,10 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
 
 /***/ }),
 
-/***/ "./components/FormFieldPassword/FormFieldPassword.js":
-/*!***********************************************************!*\
-  !*** ./components/FormFieldPassword/FormFieldPassword.js ***!
-  \***********************************************************/
+/***/ "./components/FormFieldPassword/FormFieldPassword.tsx":
+/*!************************************************************!*\
+  !*** ./components/FormFieldPassword/FormFieldPassword.tsx ***!
+  \************************************************************/
 /***/ ((__unused_webpack_module, exports, __webpack_require__) => {
 
 "use strict";
@@ -8046,12 +8069,10 @@ function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { de
 Object.defineProperty(exports, "__esModule", ({
   value: true
 }));
-exports.generatePassword = exports["default"] = void 0;
+exports["default"] = void 0;
 
 var _react = _interopRequireWildcard(__webpack_require__(/*! react */ "react"));
 
-var _propTypes = _interopRequireDefault(__webpack_require__(/*! prop-types */ "../node_modules/prop-types/index.js"));
-
 var _classnames = _interopRequireDefault(__webpack_require__(/*! classnames */ "../node_modules/classnames/index.js"));
 
 var _constants = __webpack_require__(/*! ../../constants */ "./constants.js");
@@ -8062,11 +8083,11 @@ var _FormField = _interopRequireDefault(__webpack_require__(/*! ../FormField */
 
 var _Input = _interopRequireDefault(__webpack_require__(/*! ../Input */ "./components/Input/index.tsx"));
 
-var _Popover = _interopRequireDefault(__webpack_require__(/*! ../Popover */ "./components/Popover/index.js"));
-
 var _Translate = _interopRequireDefault(__webpack_require__(/*! ../Translate */ "./components/Translate/index.js"));
 
-var _passwordScore = _interopRequireWildcard(__webpack_require__(/*! ./passwordScore */ "./components/FormFieldPassword/passwordScore.js"));
+var _PasswordMeter = _interopRequireDefault(__webpack_require__(/*! ./PasswordMeter */ "./components/FormFieldPassword/PasswordMeter.tsx"));
+
+var _generatePassword = _interopRequireDefault(__webpack_require__(/*! ./generatePassword */ "./components/FormFieldPassword/generatePassword.js"));
 
 var _enUS = _interopRequireDefault(__webpack_require__(/*! ./locale/en-US */ "./components/FormFieldPassword/locale/en-US.js"));
 
@@ -8082,25 +8103,10 @@ function _extends() { _extends = Object.assign || function (target) { for (var i
 
 function _defineProperty(obj, key, value) { if (key in obj) { Object.defineProperty(obj, key, { value: value, enumerable: true, configurable: true, writable: true }); } else { obj[key] = value; } return obj; }
 
-const symbolClasses = {
-  upper: 'ABCDEFGHIJKLMNOPQRSTUVWXYZ',
-  lower: 'abcdefghijklmnopqrstuvwxyz',
-  number: '0123456789',
-  special: '!@#$%^&*?_~'
-};
-
-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
  */
-
-
-exports.generatePassword = generatePassword;
-
 class FormFieldPassword extends _react.Component {
   constructor(...args) {
     super(...args);
@@ -8129,118 +8135,6 @@ class FormFieldPassword extends _react.Component {
     _defineProperty(this, "handleBlur", this.handleClosePasswordMeter);
   }
 
-  passwordScore(value) {
-    if (!value) {
-      return {
-        intent: null,
-        strength: null,
-        unusedRules: []
-      };
-    }
-
-    const {
-      passwordScoreRules
-    } = this.props;
-    const {
-      score,
-      unusedRules
-    } = (0, _passwordScore.default)(value, passwordScoreRules);
-    let intent = 'success';
-
-    let strength = /*#__PURE__*/_react.default.createElement(_Translate.default, {
-      content: "FormFieldPassword.strengthVeryStrong",
-      fallback: _enUS.default.strengthVeryStrong
-    });
-
-    if (score < 16) {
-      intent = 'danger';
-      strength = /*#__PURE__*/_react.default.createElement(_Translate.default, {
-        content: "FormFieldPassword.strengthVeryWeak",
-        fallback: _enUS.default.strengthVeryWeak
-      });
-    } else if (score < 25) {
-      intent = 'danger';
-      strength = /*#__PURE__*/_react.default.createElement(_Translate.default, {
-        content: "FormFieldPassword.strengthWeak",
-        fallback: _enUS.default.strengthWeak
-      });
-    } else if (score < 35) {
-      intent = 'warning';
-      strength = /*#__PURE__*/_react.default.createElement(_Translate.default, {
-        content: "FormFieldPassword.strengthMedium",
-        fallback: _enUS.default.strengthMedium
-      });
-    } else if (score < 45) {
-      intent = 'success';
-      strength = /*#__PURE__*/_react.default.createElement(_Translate.default, {
-        content: "FormFieldPassword.strengthStrong",
-        fallback: _enUS.default.strengthStrong
-      });
-    }
-
-    return {
-      intent,
-      strength,
-      unusedRules
-    };
-  }
-
-  renderPasswordMeter(value, target) {
-    const {
-      passwordMeterVisible
-    } = this.state;
-    const {
-      passwordMeterProps
-    } = this.props;
-    const {
-      intent,
-      strength,
-      unusedRules
-    } = this.passwordScore(value);
-    return /*#__PURE__*/_react.default.createElement(_Popover.default, _extends({
-      visible: passwordMeterVisible && !!value,
-      target: target,
-      targetRef: this.targetRef,
-      placement: "bottom-right",
-      intent: intent,
-      canCloseOnOutsideClick: false,
-      canCloseOnEscapePress: false,
-      onClose: this.handleClosePasswordMeter
-    }, passwordMeterProps), /*#__PURE__*/_react.default.createElement(_Translate.default, {
-      content: "FormFieldPassword.passwordStrength",
-      fallback: _enUS.default.passwordStrength,
-      params: {
-        strength: /*#__PURE__*/_react.default.createElement("b", null, strength)
-      }
-    }), /*#__PURE__*/_react.default.createElement("br", null), unusedRules.length ? /*#__PURE__*/_react.default.createElement(_react.Fragment, null, /*#__PURE__*/_react.default.createElement(_Translate.default, {
-      content: "FormFieldPassword.improvePassword",
-      fallback: _enUS.default.improvePassword
-    }), /*#__PURE__*/_react.default.createElement("br", null), /*#__PURE__*/_react.default.createElement("ul", null, unusedRules.slice(0, 3).map(({
-      rule
-    }, index) => {
-      const {
-        name
-      } = rule;
-      let {
-        message
-      } = rule;
-
-      if (name && !message) {
-        message = /*#__PURE__*/_react.default.createElement(_Translate.default, {
-          content: `FormFieldPassword.${name}`,
-          fallback: _enUS.default[name]
-        });
-      }
-
-      return /*#__PURE__*/_react.default.createElement("li", {
-        key: name || index.toString()
-      }, message);
-    }))) : /*#__PURE__*/_react.default.createElement(_Translate.default, {
-      content: "FormFieldPassword.yourPasswordIsStrong",
-      fallback: _enUS.default.yourPasswordIsStrong
-    }));
-  }
-
   renderGenerateButton({
     setValue,
     isDisabled
@@ -8251,7 +8145,7 @@ class FormFieldPassword extends _react.Component {
     } = this.props;
     const generateButtonProps = {
       className: `${baseClassName}__button--generate`,
-      onClick: () => setValue(generatePassword()),
+      onClick: () => setValue((0, _generatePassword.default)()),
       tooltip: /*#__PURE__*/_react.default.createElement(_Translate.default, {
         content: "FormFieldPassword.generateButtonHint",
         fallback: _enUS.default.generateButtonHint
@@ -8282,12 +8176,15 @@ class FormFieldPassword extends _react.Component {
       hideGenerateButton,
       hidePasswordMeter,
       passwordMeterProps,
-      passwordScoreRules,
       size,
       autoFocus,
       autoComplete,
       ...props
     } = this.props;
+    const {
+      visible,
+      passwordMeterVisible
+    } = this.state;
     return /*#__PURE__*/_react.default.createElement(_FormField.default, _extends({
       className: (0, _classnames.default)(baseClassName, className)
     }, props), ({
@@ -8297,18 +8194,19 @@ class FormFieldPassword extends _react.Component {
       setValue,
       isDisabled
     }) => {
+      const value = getValue('');
+
       const input = /*#__PURE__*/_react.default.createElement(_Input.default, {
         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,
@@ -8317,8 +8215,8 @@ class FormFieldPassword extends _react.Component {
         suffix: hideShowButton ? null : /*#__PURE__*/_react.default.createElement(_Button.default, {
           className: `${baseClassName}__button--show`,
           onClick: this.handleToggleClick,
-          icon: this.state.visible ? 'visible' : 'invisible',
-          tooltip: this.state.visible ? /*#__PURE__*/_react.default.createElement(_Translate.default, {
+          icon: visible ? 'visible' : 'invisible',
+          tooltip: visible ? /*#__PURE__*/_react.default.createElement(_Translate.default, {
             content: "FormFieldPassword.hidePassword",
             fallback: _enUS.default.hidePassword
           }) : /*#__PURE__*/_react.default.createElement(_Translate.default, {
@@ -8338,7 +8236,12 @@ class FormFieldPassword extends _react.Component {
         className: (0, _classnames.default)(`${baseClassName}__control`, `${baseClassName}__control--${size}`)
       }, /*#__PURE__*/_react.default.createElement("div", {
         className: (0, _classnames.default)(`${baseClassName}__field`, `${baseClassName}__field--${size}`)
-      }, hidePasswordMeter ? input : this.renderPasswordMeter(getValue(), input)), hideGenerateButton ? null : this.renderGenerateButton({
+      }, hidePasswordMeter ? input : /*#__PURE__*/_react.default.createElement(_PasswordMeter.default, _extends({
+        value: value,
+        targetRef: this.targetRef,
+        visible: passwordMeterVisible && value !== '',
+        onClose: this.handleClosePasswordMeter
+      }, passwordMeterProps), input)), hideGenerateButton ? null : this.renderGenerateButton({
         setValue,
         isDisabled
       }));
@@ -8347,98 +8250,28 @@ class FormFieldPassword extends _react.Component {
 
 }
 
-FormFieldPassword.propTypes = {
-  /**
-   * Is show button hidden?
-   * @since 0.0.59
-   */
-  hideShowButton: _propTypes.default.bool,
-
-  /**
-   * Is generate button hidden?
-   * @since 0.0.59
-   */
-  hideGenerateButton: _propTypes.default.bool,
-
-  /**
-   * Is password meter hidden?
-   * @since 0.0.59
-   */
-  hidePasswordMeter: _propTypes.default.bool,
-
-  /**
-   * Additional props for password meter. . See [Popover](#!/Popover) for more information.
-   * @since 1.5.6
-   */
-  passwordMeterProps: _propTypes.default.object,
-
-  /**
-   * A set of custom password score rules.
-   * @since 3.21.0
-   */
-  passwordScoreRules: _propTypes.default.arrayOf(_propTypes.default.shape({
-    name: _propTypes.default.string,
-    message: _propTypes.default.oneOfType([_propTypes.default.string, _propTypes.default.element]),
-    score: _propTypes.default.func.isRequired
-  })),
-
-  /**
-   * Size of the control
-   * @since 1.5.6
-   */
-  size: _propTypes.default.oneOf(['md', 'lg', 'xl', 'fill']),
-
-  /**
-   * The browser will automatically focus on the component upon rendering the screen
-   * @since 1.9.0
-   */
-  autoFocus: _propTypes.default.bool,
-
-  /**
-   * Prevent password autocompletion.
-   * @since 2.5.1
-   */
-  autoComplete: _propTypes.default.oneOf(['new-password']),
-
-  /**
-   * A render function for customizing the password generation button.
-   * @since 3.13.0
-   */
-  generateButton: _propTypes.default.func,
-
-  /**
-   * @ignore
-   */
-  className: _propTypes.default.string,
-
-  /**
-   * @ignore
-   */
-  baseClassName: _propTypes.default.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: `${_constants.CLS_PREFIX}form-field-password`
-};
-FormFieldPassword.PASSWORD_SCORE_RULES = _passwordScore.PASSWORD_SCORE_RULES;
+});
+
 var _default = FormFieldPassword;
 exports["default"] = _default;
 
 /***/ }),
 
-/***/ "./components/FormFieldPassword/index.js":
-/*!***********************************************!*\
-  !*** ./components/FormFieldPassword/index.js ***!
-  \***********************************************/
+/***/ "./components/FormFieldPassword/PasswordMeter.tsx":
+/*!********************************************************!*\
+  !*** ./components/FormFieldPassword/PasswordMeter.tsx ***!
+  \********************************************************/
 /***/ ((__unused_webpack_module, exports, __webpack_require__) => {
 
 "use strict";
@@ -8447,74 +8280,89 @@ exports["default"] = _default;
 Object.defineProperty(exports, "__esModule", ({
   value: true
 }));
-Object.defineProperty(exports, "default", ({
-  enumerable: true,
-  get: function () {
-    return _FormFieldPassword.default;
-  }
-}));
-Object.defineProperty(exports, "generatePassword", ({
-  enumerable: true,
-  get: function () {
-    return _FormFieldPassword.generatePassword;
-  }
-}));
+exports["default"] = void 0;
+
+var _react = _interopRequireWildcard(__webpack_require__(/*! react */ "react"));
 
-var _FormFieldPassword = _interopRequireWildcard(__webpack_require__(/*! ./FormFieldPassword */ "./components/FormFieldPassword/FormFieldPassword.js"));
+var _Popover = _interopRequireDefault(__webpack_require__(/*! ../Popover */ "./components/Popover/index.js"));
+
+var _Translate = _interopRequireDefault(__webpack_require__(/*! ../Translate */ "./components/Translate/index.js"));
+
+var _estimatePassword = _interopRequireWildcard(__webpack_require__(/*! ./estimatePassword */ "./components/FormFieldPassword/estimatePassword.tsx"));
+
+var _enUS = _interopRequireDefault(__webpack_require__(/*! ./locale/en-US */ "./components/FormFieldPassword/locale/en-US.js"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
 function _getRequireWildcardCache(nodeInterop) { if (typeof WeakMap !== "function") return null; var cacheBabelInterop = new WeakMap(); var cacheNodeInterop = new WeakMap(); return (_getRequireWildcardCache = function (nodeInterop) { return nodeInterop ? cacheNodeInterop : cacheBabelInterop; })(nodeInterop); }
 
 function _interopRequireWildcard(obj, nodeInterop) { if (!nodeInterop && obj && obj.__esModule) { return obj; } if (obj === null || typeof obj !== "object" && typeof obj !== "function") { return { default: obj }; } var cache = _getRequireWildcardCache(nodeInterop); if (cache && cache.has(obj)) { return cache.get(obj); } var newObj = {}; var hasPropertyDescriptor = Object.defineProperty && Object.getOwnPropertyDescriptor; for (var key in obj) { if (key !== "default" && Object.prototype.hasOwnProperty.call(obj, key)) { var desc = hasPropertyDescriptor ? Object.getOwnPropertyDescriptor(obj, key) : null; if (desc && (desc.get || desc.set)) { Object.defineProperty(newObj, key, desc); } else { newObj[key] = obj[key]; } } } newObj.default = obj; if (cache) { cache.set(obj, newObj); } return newObj; }
 
-/***/ }),
-
-/***/ "./components/FormFieldPassword/locale/en-US.js":
-/*!******************************************************!*\
-  !*** ./components/FormFieldPassword/locale/en-US.js ***!
-  \******************************************************/
-/***/ ((__unused_webpack_module, exports) => {
+function _extends() { _extends = Object.assign || function (target) { for (var i = 1; i < arguments.length; i++) { var source = arguments[i]; for (var key in source) { if (Object.prototype.hasOwnProperty.call(source, key)) { target[key] = source[key]; } } } return target; }; return _extends.apply(this, arguments); }
 
-"use strict";
+const strengthIntents = {
+  VeryWeak: 'danger',
+  Weak: 'danger',
+  Medium: 'warning',
+  Strong: 'success',
+  VeryStrong: 'success'
+};
 
+const PasswordMeter = ({
+  value,
+  visible,
+  onEstimate,
+  children,
+  ...props
+}) => {
+  const [result, setResult] = (0, _react.useState)(null);
+  (0, _react.useEffect)(() => {
+    if (!visible) {
+      return;
+    }
 
-Object.defineProperty(exports, "__esModule", ({
-  value: true
-}));
-exports["default"] = void 0;
-// Copyright 1999-2017. Plesk International GmbH. All rights reserved.
-var _default = {
-  improvePassword: 'To improve your password:',
-  passwordTooShort: 'Make the password longer.',
-  lettersLowerCase: 'Use at least one lower-case character.',
-  lettersUpperCase: 'Use at least one upper-case character.',
-  numbers1: 'Use at least one number.',
-  numbers3: 'Use at least three numbers.',
-  specialChar1: 'Use at least one special character (for example: !, @, #, $, % ,^, &, *, ?, _, ~).',
-  specialChar2: 'Use at least two special characters (for example: !, @, #, $, %, ^, &, *, ?, _, ~).',
-  comboUpperAndLower: 'Use both upper and lower-case characters.',
-  comboLettersAndNumbers: 'Use both numbers and characters.',
-  comboLettersNumbersSpecial: 'Use numbers, characters and special characters.',
-  yourPasswordIsStrong: 'You can make it even stronger by increasing its length.',
-  passwordStrength: 'The password strength is %%strength%%.',
-  strengthVeryStrong: 'VERY STRONG',
-  strengthStrong: 'STRONG',
-  strengthVeryWeak: 'VERY WEAK',
-  strengthWeak: 'WEAK',
-  strengthMedium: 'MEDIUM',
-  hidePassword: 'Hide password',
-  showPassword: 'Show password',
-  generateButton: 'Generate',
-  generateButtonHint: 'Generate a strong password'
+    Promise.resolve(onEstimate ? onEstimate(value, _estimatePassword.default, _estimatePassword.DEFAULT_RULES) : (0, _estimatePassword.default)(value)).then(result => {
+      setResult(result);
+    });
+  }, [visible, value, onEstimate]);
+  return /*#__PURE__*/_react.default.createElement(_Popover.default, _extends({
+    visible: visible && result !== null,
+    target: children,
+    placement: "bottom-right",
+    intent: result ? strengthIntents[result.strength] : undefined,
+    canCloseOnOutsideClick: false,
+    canCloseOnEscapePress: false
+  }, props), result !== null && result !== void 0 && result.strength ? /*#__PURE__*/_react.default.createElement(_Translate.default, {
+    component: "div",
+    content: "FormFieldPassword.passwordStrength",
+    fallback: _enUS.default.passwordStrength,
+    params: {
+      strength: /*#__PURE__*/_react.default.createElement("b", null, /*#__PURE__*/_react.default.createElement(_Translate.default, {
+        content: `FormFieldPassword.strength${result === null || result === void 0 ? void 0 : result.strength}`,
+        fallback: _enUS.default[`strength${result === null || result === void 0 ? void 0 : result.strength}`]
+      }))
+    }
+  }) : null, result !== null && result !== void 0 && result.suggestions.length ? /*#__PURE__*/_react.default.createElement(_react.Fragment, null, /*#__PURE__*/_react.default.createElement(_Translate.default, {
+    content: "FormFieldPassword.improvePassword",
+    fallback: _enUS.default.improvePassword
+  }), /*#__PURE__*/_react.default.createElement("br", null), /*#__PURE__*/_react.default.createElement("ul", null, result.suggestions.slice(0, 3).map((suggestion, index) => /*#__PURE__*/_react.default.createElement("li", {
+    key: index.toString()
+  }, suggestion)))) : /*#__PURE__*/_react.default.createElement(_Translate.default, {
+    content: "FormFieldPassword.yourPasswordIsStrong",
+    fallback: _enUS.default.yourPasswordIsStrong
+  }));
 };
+
+var _default = PasswordMeter;
 exports["default"] = _default;
 
 /***/ }),
 
-/***/ "./components/FormFieldPassword/passwordScore.js":
-/*!*******************************************************!*\
-  !*** ./components/FormFieldPassword/passwordScore.js ***!
-  \*******************************************************/
-/***/ ((__unused_webpack_module, exports) => {
+/***/ "./components/FormFieldPassword/estimatePassword.tsx":
+/*!***********************************************************!*\
+  !*** ./components/FormFieldPassword/estimatePassword.tsx ***!
+  \***********************************************************/
+/***/ ((__unused_webpack_module, exports, __webpack_require__) => {
 
 "use strict";
 
@@ -8522,32 +8370,23 @@ exports["default"] = _default;
 Object.defineProperty(exports, "__esModule", ({
   value: true
 }));
-exports["default"] = exports.PASSWORD_SCORE_RULES = void 0;
+exports["default"] = exports.DEFAULT_RULES = void 0;
 
-// Copyright 1999-2021. Plesk International GmbH. All rights reserved.
-const passwordScore = (password, rules = PASSWORD_SCORE_RULES) => {
-  const unusedRules = [];
-  let score = 0;
-  rules.forEach(rule => {
-    const mark = rule.score(password);
-
-    if (mark < 0) {
-      unusedRules.push({
-        rule,
-        value: -mark
-      });
-    } else {
-      score += mark;
-    }
-  });
-  return {
-    score,
-    unusedRules
-  };
-};
+var _react = _interopRequireDefault(__webpack_require__(/*! react */ "react"));
+
+var _Translate = _interopRequireDefault(__webpack_require__(/*! ../Translate */ "./components/Translate/index.js"));
+
+var _enUS = _interopRequireDefault(__webpack_require__(/*! ./locale/en-US */ "./components/FormFieldPassword/locale/en-US.js"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
 
-const PASSWORD_SCORE_RULES = [{
+// Copyright 1999-2022. Plesk International GmbH. All rights reserved.
+const DEFAULT_RULES = [{
   name: 'passwordTooShort',
+  suggestion: /*#__PURE__*/_react.default.createElement(_Translate.default, {
+    content: `FormFieldPassword.passwordTooShort`,
+    fallback: _enUS.default.passwordTooShort
+  }),
 
   score(passwd) {
     return passwd.length < 5 ? -1 : 0;
@@ -8574,6 +8413,10 @@ const PASSWORD_SCORE_RULES = [{
 
 }, {
   name: 'lettersLowerCase',
+  suggestion: /*#__PURE__*/_react.default.createElement(_Translate.default, {
+    content: `FormFieldPassword.lettersLowerCase`,
+    fallback: _enUS.default.lettersLowerCase
+  }),
 
   score(passwd) {
     // [verified] at least one lower case letter
@@ -8582,6 +8425,10 @@ const PASSWORD_SCORE_RULES = [{
 
 }, {
   name: 'lettersUpperCase',
+  suggestion: /*#__PURE__*/_react.default.createElement(_Translate.default, {
+    content: `FormFieldPassword.lettersUpperCase`,
+    fallback: _enUS.default.lettersUpperCase
+  }),
 
   score(passwd) {
     // [verified] at least one upper case letter
@@ -8590,6 +8437,10 @@ const PASSWORD_SCORE_RULES = [{
 
 }, {
   name: 'numbers1',
+  suggestion: /*#__PURE__*/_react.default.createElement(_Translate.default, {
+    content: `FormFieldPassword.numbers1`,
+    fallback: _enUS.default.numbers1
+  }),
 
   score(passwd) {
     // [verified] at least one number
@@ -8598,6 +8449,10 @@ const PASSWORD_SCORE_RULES = [{
 
 }, {
   name: 'numbers3',
+  suggestion: /*#__PURE__*/_react.default.createElement(_Translate.default, {
+    content: `FormFieldPassword.numbers3`,
+    fallback: _enUS.default.numbers3
+  }),
 
   score(passwd) {
     // [verified] at least three numbers
@@ -8606,6 +8461,10 @@ const PASSWORD_SCORE_RULES = [{
 
 }, {
   name: 'specialChar1',
+  suggestion: /*#__PURE__*/_react.default.createElement(_Translate.default, {
+    content: `FormFieldPassword.specialChar1`,
+    fallback: _enUS.default.specialChar1
+  }),
 
   score(passwd) {
     // [verified] at least one special character
@@ -8614,6 +8473,10 @@ const PASSWORD_SCORE_RULES = [{
 
 }, {
   name: 'specialChar2',
+  suggestion: /*#__PURE__*/_react.default.createElement(_Translate.default, {
+    content: `FormFieldPassword.specialChar2`,
+    fallback: _enUS.default.specialChar2
+  }),
 
   score(passwd) {
     // [verified] at least two special characters
@@ -8622,6 +8485,10 @@ const PASSWORD_SCORE_RULES = [{
 
 }, {
   name: 'comboUpperAndLower',
+  suggestion: /*#__PURE__*/_react.default.createElement(_Translate.default, {
+    content: `FormFieldPassword.comboUpperAndLower`,
+    fallback: _enUS.default.comboUpperAndLower
+  }),
 
   score(passwd) {
     // [verified] both upper and lower case
@@ -8630,6 +8497,10 @@ const PASSWORD_SCORE_RULES = [{
 
 }, {
   name: 'comboLettersAndNumbers',
+  suggestion: /*#__PURE__*/_react.default.createElement(_Translate.default, {
+    content: `FormFieldPassword.comboLettersAndNumbers`,
+    fallback: _enUS.default.comboLettersAndNumbers
+  }),
 
   score(passwd) {
     // [verified] both letters and numbers
@@ -8638,6 +8509,10 @@ const PASSWORD_SCORE_RULES = [{
 
 }, {
   name: 'comboLettersNumbersSpecial',
+  suggestion: /*#__PURE__*/_react.default.createElement(_Translate.default, {
+    content: `FormFieldPassword.comboLettersNumbersSpecial`,
+    fallback: _enUS.default.comboLettersNumbersSpecial
+  }),
 
   score(passwd) {
     // [verified] letters, numbers, and special characters
@@ -8645,8 +8520,159 @@ const PASSWORD_SCORE_RULES = [{
   }
 
 }];
-exports.PASSWORD_SCORE_RULES = PASSWORD_SCORE_RULES;
-var _default = passwordScore;
+exports.DEFAULT_RULES = DEFAULT_RULES;
+
+var _default = (password, rules = DEFAULT_RULES) => {
+  const suggestions = [];
+  let passwordScore = 0;
+  rules.forEach(({
+    suggestion,
+    score
+  }) => {
+    const ruleScore = score(password);
+
+    if (ruleScore < 0 && suggestion) {
+      suggestions.push(suggestion);
+    } else {
+      passwordScore += ruleScore;
+    }
+  });
+  let strength;
+
+  switch (true) {
+    case passwordScore < 16:
+      strength = 'VeryWeak';
+      break;
+
+    case passwordScore < 25:
+      strength = 'Weak';
+      break;
+
+    case passwordScore < 35:
+      strength = 'Medium';
+      break;
+
+    case passwordScore < 45:
+      strength = 'Strong';
+      break;
+
+    default:
+      strength = 'VeryStrong';
+      break;
+  }
+
+  return {
+    strength,
+    suggestions
+  };
+};
+
+exports["default"] = _default;
+
+/***/ }),
+
+/***/ "./components/FormFieldPassword/generatePassword.js":
+/*!**********************************************************!*\
+  !*** ./components/FormFieldPassword/generatePassword.js ***!
+  \**********************************************************/
+/***/ ((__unused_webpack_module, exports) => {
+
+"use strict";
+
+
+Object.defineProperty(exports, "__esModule", ({
+  value: true
+}));
+exports["default"] = void 0;
+// Copyright 1999-2022. Plesk International GmbH. All rights reserved.
+const symbolClasses = {
+  upper: 'ABCDEFGHIJKLMNOPQRSTUVWXYZ',
+  lower: 'abcdefghijklmnopqrstuvwxyz',
+  number: '0123456789',
+  special: '!@#$%^&*?_~'
+};
+
+const generatePassword = () => {
+  const password = ['upper', 'upper', 'upper', 'lower', 'lower', 'lower', 'lower', 'lower', 'lower', 'lower', 'lower', 'number', 'number', 'number', 'special', 'special'];
+  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('');
+};
+
+var _default = generatePassword;
+exports["default"] = _default;
+
+/***/ }),
+
+/***/ "./components/FormFieldPassword/index.tsx":
+/*!************************************************!*\
+  !*** ./components/FormFieldPassword/index.tsx ***!
+  \************************************************/
+/***/ ((__unused_webpack_module, exports, __webpack_require__) => {
+
+"use strict";
+
+
+Object.defineProperty(exports, "__esModule", ({
+  value: true
+}));
+Object.defineProperty(exports, "default", ({
+  enumerable: true,
+  get: function () {
+    return _FormFieldPassword.default;
+  }
+}));
+Object.defineProperty(exports, "generatePassword", ({
+  enumerable: true,
+  get: function () {
+    return _generatePassword.default;
+  }
+}));
+
+var _FormFieldPassword = _interopRequireDefault(__webpack_require__(/*! ./FormFieldPassword */ "./components/FormFieldPassword/FormFieldPassword.tsx"));
+
+var _generatePassword = _interopRequireDefault(__webpack_require__(/*! ./generatePassword */ "./components/FormFieldPassword/generatePassword.js"));
+
+function _interopRequireDefault(obj) { return obj && obj.__esModule ? obj : { default: obj }; }
+
+/***/ }),
+
+/***/ "./components/FormFieldPassword/locale/en-US.js":
+/*!******************************************************!*\
+  !*** ./components/FormFieldPassword/locale/en-US.js ***!
+  \******************************************************/
+/***/ ((__unused_webpack_module, exports) => {
+
+"use strict";
+
+
+Object.defineProperty(exports, "__esModule", ({
+  value: true
+}));
+exports["default"] = void 0;
+// Copyright 1999-2017. Plesk International GmbH. All rights reserved.
+var _default = {
+  improvePassword: 'To improve your password:',
+  passwordTooShort: 'Make the password longer.',
+  lettersLowerCase: 'Use at least one lower-case character.',
+  lettersUpperCase: 'Use at least one upper-case character.',
+  numbers1: 'Use at least one number.',
+  numbers3: 'Use at least three numbers.',
+  specialChar1: 'Use at least one special character (for example: !, @, #, $, % ,^, &, *, ?, _, ~).',
+  specialChar2: 'Use at least two special characters (for example: !, @, #, $, %, ^, &, *, ?, _, ~).',
+  comboUpperAndLower: 'Use both upper and lower-case characters.',
+  comboLettersAndNumbers: 'Use both numbers and characters.',
+  comboLettersNumbersSpecial: 'Use numbers, characters and special characters.',
+  yourPasswordIsStrong: 'You can make it even stronger by increasing its length.',
+  passwordStrength: 'The password strength is %%strength%%.',
+  strengthVeryStrong: 'VERY STRONG',
+  strengthStrong: 'STRONG',
+  strengthVeryWeak: 'VERY WEAK',
+  strengthWeak: 'WEAK',
+  strengthMedium: 'MEDIUM',
+  hidePassword: 'Hide password',
+  showPassword: 'Show password',
+  generateButton: 'Generate',
+  generateButtonHint: 'Generate a strong password'
+};
 exports["default"] = _default;
 
 /***/ }),
@@ -11234,7 +11260,7 @@ const Icon = ({
   }, props), newName ? /*#__PURE__*/_react.default.createElement("svg", {
     focusable: "false"
   }, /*#__PURE__*/_react.default.createElement("use", {
-    xlinkHref: getHref(newName, newSize)
+    href: getHref(newName, newSize)
   })) : src && /*#__PURE__*/_react.default.createElement("img", {
     src: src,
     alt: alt
@@ -15049,7 +15075,7 @@ class List extends _react.Component {
           [`${baseClassName}__table--vertical`]: vertical,
           [`${baseClassName}__table--reorderable`]: reorderable
         })
-      }, props, reorderableProps), hasTitle && /*#__PURE__*/_react.default.createElement("thead", null, /*#__PURE__*/_react.default.createElement("tr", {
+      }, reorderableProps), hasTitle && /*#__PURE__*/_react.default.createElement("thead", null, /*#__PURE__*/_react.default.createElement("tr", {
         className: (0, _classnames.default)(`${baseClassName}__table-thead`, {
           [`${baseClassName}__row--expanded`]: this.isAllRowsExpanded(data, this.state.expandedRows)
         })
@@ -19902,7 +19928,8 @@ class ProgressDialog extends _react.Component {
     }, props, {
       isOpen: isOpen,
       onClose: this.handleClose,
-      closable: canClose || canCancel
+      closable: canClose || canCancel,
+      canClose: canClose
     }), description && /*#__PURE__*/_react.default.createElement("div", {
       className: `${baseClassName}__description`
     }, description), /*#__PURE__*/_react.default.createElement(_Progress.default, {
@@ -28775,7 +28802,7 @@ var _FormField = _interopRequireDefault(__webpack_require__(/*! ./FormField */ "
 
 var _FormFieldCheckbox = _interopRequireDefault(__webpack_require__(/*! ./FormFieldCheckbox */ "./components/FormFieldCheckbox/index.js"));
 
-var _FormFieldPassword = _interopRequireWildcard(__webpack_require__(/*! ./FormFieldPassword */ "./components/FormFieldPassword/index.js"));
+var _FormFieldPassword = _interopRequireWildcard(__webpack_require__(/*! ./FormFieldPassword */ "./components/FormFieldPassword/index.tsx"));
 
 Object.keys(_FormFieldPassword).forEach(function (key) {
   if (key === "default" || key === "__esModule") return;
@@ -92252,7 +92279,7 @@ function _objectWithoutPropertiesLoose(source, excluded) {
 /***/ ((module) => {
 
 "use strict";
-module.exports = JSON.parse('{"name":"@plesk/ui-library","version":"3.27.0","description":"Plesk UI Library","main":"index.js","module":"esm/index.js","types":"./types/src","sideEffects":["cjs/index.js","esm/index.js","dist/*.js","dist/*.css"],"scripts":{"pretest":"yarn lint","test":"jest --ci --coverage --coverageReporters text-summary","test:vr":"cross-env VISUAL_REGRESSION=true jest","build":"yarn build:types && yarn build:umd && yarn build:esm && yarn build:cjs","build:umd":"webpack --config ./configs/build.config.js","build:esm":"cross-env NODE_ENV=esm node ./scripts/build.js","build:cjs":"cross-env NODE_ENV=cjs node ./scripts/build.js","build:types":"rimraf ./types && tsc --project ./configs/types-generator.config.json","create-svg-sprite":"node ./scripts/create-svg-sprite.js","lint":"yarn lint:es && yarn lint:types && yarn lint:style","lint:es":"eslint --ext js,md,tsx src configs scripts styleguidist","lint:types":"tsc","lint:style":"stylelint \\"src/**/*.less\\"","styleguide":"styleguidist server --config ./configs/styleguide.config.js","styleguide:build":"styleguidist build --config ./configs/styleguide.config.js","create-component":"node scripts/create-component.js","prepublishOnly":"yarn install && yarn test && yarn build && yarn styleguide:build","storybook":"webpack serve --config ./configs/storybook.config.js","postinstall":"node ./scripts/postinstall.js"},"files":["esm","cjs","dist","styleguide","types","/scripts/postinstall.js","/index.js"],"dependencies":{"@babel/runtime":"^7.15.4","@plesk/react-movable":"^2.6.0","@types/classnames":"2.2.7","@types/react":"16.8.13","@types/react-dom":"16.8.4","@types/react-measure":"2.0.8","@types/react-transition-group":"^4.4.4","@types/svg4everybody":"2.1.0","classnames":"^2.3.1","codemirror":"5.48.0","marked":"0.3.19","memoize-one":"^5.1.1","popper.js":"1.14.3","prop-types":"^15.7.2","react-measure":"2.3.0","react-sortable-hoc":"0.6.8","react-transition-group":"^4.4.2","scroll-into-view-if-needed":"^2.2.20","svg4everybody":"2.1.9","use-focus-visible":"^1.0.0"},"devDependencies":{"@babel/core":"^7.15.8","@babel/plugin-proposal-class-properties":"^7.14.5","@babel/plugin-syntax-dynamic-import":"^7.8.3","@babel/plugin-transform-runtime":"^7.15.8","@babel/preset-env":"^7.15.8","@babel/preset-react":"^7.14.5","@babel/preset-typescript":"^7.15.0","@plesk/eslint-config":"^1.1.0","@plesk/stylelint-config":"^0.0.6","@types/buble":"^0.19.2","@types/cheerio":"^0.22.30","@types/doctrine":"^0.0.3","@types/enzyme":"^3.10.9","@types/jest":"^23.3.12","@types/webpack-dev-server":"^3.10.1","@typescript-eslint/eslint-plugin":"^2.7.0","@typescript-eslint/parser":"^2.7.0","autoprefixer":"^10.3.7","babel-loader":"^8.2.3","babel-plugin-dynamic-import-node":"^2.3.3","babel-plugin-transform-require-ignore":"^0.1.1","clean-webpack-plugin":"^4.0.0","cross-env":"^5.2.0","css-loader":"^6.4.0","css-minimizer-webpack-plugin":"^3.1.1","enzyme":"^3.11.0","enzyme-adapter-react-16":"^1.15.6","enzyme-to-json":"^3.6.2","eslint-config-prettier":"^6.11.0","eslint-plugin-markdown":"^1.0.2","eslint-plugin-prettier":"^3.1.3","expect-puppeteer":"^4.4.0","fs-extra":"^7.0.0","html-webpack-plugin":"^5.5.0","inquirer":"^3.2.1","jest":"^24.9.0","jest-dev-server":"^4.4.0","jest-image-snapshot":"^4.0.2","less":"^4.1.2","less-loader":"^10.2.0","mini-css-extract-plugin":"^2.4.3","postcss":"^8.3.11","postcss-loader":"^6.2.0","postcss-logical":"^5.0.0","prettier":"^2.0.5","puppeteer-core":"^5.2.1","react":"^16.8.6","react-dom":"^16.8.6","react-styleguidist":"^11.1.7","react-test-renderer":"^16.8.6","rimraf":"^3.0.1","rtlcss":"^3.4.0","style-loader":"^3.3.1","stylelint-config-prettier":"^8.0.1","stylelint-prettier":"^1.1.2","svg-mixer":"^2.3.14","terser-webpack-plugin":"^5.2.4","typescript":"^3.7.2","webpack":"^5.60.0","webpack-cli":"^4.9.1"},"peerDependencies":{"react":"^16.8.6","react-dom":"^16.8.6"},"resolutions":{"@babel/types":"^7.15.6","@types/node":"^12.12.8","**/caniuse-lite":"1.0.30001274"},"browserslist":["last 2 versions",">1%","not op_mini all","not dead","not ie 11"],"author":"Plesk Developers <plesk-dev-leads@plesk.com> (https://www.plesk.com/)","license":"Apache-2.0"}');
+module.exports = JSON.parse('{"name":"@plesk/ui-library","version":"3.27.3","description":"Plesk UI Library","main":"index.js","module":"esm/index.js","types":"./types/src","sideEffects":["cjs/index.js","esm/index.js","dist/*.js","dist/*.css"],"scripts":{"pretest":"yarn lint","test":"jest --ci --coverage --coverageReporters text-summary","test:vr":"cross-env VISUAL_REGRESSION=true jest","build":"yarn build:types && yarn build:umd && yarn build:esm && yarn build:cjs","build:umd":"webpack --config ./configs/build.config.js","build:esm":"cross-env NODE_ENV=esm node ./scripts/build.js","build:cjs":"cross-env NODE_ENV=cjs node ./scripts/build.js","build:types":"rimraf ./types && tsc --project ./configs/types-generator.config.json","create-svg-sprite":"node ./scripts/create-svg-sprite.js","lint":"yarn lint:es && yarn lint:types && yarn lint:style","lint:es":"eslint --ext js,md,tsx src configs scripts styleguidist","lint:types":"tsc","lint:style":"stylelint \\"src/**/*.less\\"","styleguide":"styleguidist server --config ./configs/styleguide.config.js","styleguide:build":"styleguidist build --config ./configs/styleguide.config.js","create-component":"node scripts/create-component.js","prepublishOnly":"yarn install && yarn test && yarn build && yarn styleguide:build","storybook":"webpack serve --config ./configs/storybook.config.js","postinstall":"node ./scripts/postinstall.js"},"files":["esm","cjs","dist","styleguide","types","/scripts/postinstall.js","/index.js"],"dependencies":{"@babel/runtime":"^7.15.4","@plesk/react-movable":"^2.6.0","@types/classnames":"2.2.7","@types/react":"16.8.13","@types/react-dom":"16.8.4","@types/react-measure":"2.0.8","@types/react-transition-group":"^4.4.4","@types/svg4everybody":"2.1.0","classnames":"^2.3.1","codemirror":"5.48.0","marked":"0.3.19","memoize-one":"^5.1.1","popper.js":"1.14.3","prop-types":"^15.7.2","react-measure":"2.3.0","react-sortable-hoc":"0.6.8","react-transition-group":"^4.4.2","scroll-into-view-if-needed":"^2.2.20","svg4everybody":"2.1.9","use-focus-visible":"^1.0.0"},"devDependencies":{"@babel/core":"^7.15.8","@babel/plugin-proposal-class-properties":"^7.14.5","@babel/plugin-syntax-dynamic-import":"^7.8.3","@babel/plugin-transform-runtime":"^7.15.8","@babel/preset-env":"^7.15.8","@babel/preset-react":"^7.14.5","@babel/preset-typescript":"^7.15.0","@plesk/eslint-config":"^1.1.0","@plesk/stylelint-config":"^1.0.0","@types/buble":"^0.19.2","@types/cheerio":"^0.22.30","@types/doctrine":"^0.0.3","@types/enzyme":"^3.10.9","@types/jest":"^23.3.12","@types/webpack-dev-server":"^3.10.1","@typescript-eslint/eslint-plugin":"^2.7.0","@typescript-eslint/parser":"^2.7.0","autoprefixer":"^10.3.7","babel-loader":"^8.2.3","babel-plugin-dynamic-import-node":"^2.3.3","babel-plugin-transform-require-ignore":"^0.1.1","clean-webpack-plugin":"^4.0.0","cross-env":"^5.2.0","css-loader":"^6.4.0","css-minimizer-webpack-plugin":"^3.1.1","enzyme":"^3.11.0","enzyme-adapter-react-16":"^1.15.6","enzyme-to-json":"^3.6.2","eslint-config-prettier":"^6.11.0","eslint-plugin-markdown":"^1.0.2","eslint-plugin-prettier":"^3.1.3","expect-puppeteer":"^4.4.0","fs-extra":"^7.0.0","html-webpack-plugin":"^5.5.0","inquirer":"^3.2.1","jest":"^24.9.0","jest-dev-server":"^4.4.0","jest-image-snapshot":"^4.0.2","less":"^4.1.2","less-loader":"^10.2.0","mini-css-extract-plugin":"^2.4.3","postcss":"^8.4.6","postcss-less":"^6.0.0","postcss-loader":"^6.2.1","postcss-logical":"^5.0.3","prettier":"^2.0.5","puppeteer-core":"^5.2.1","react":"^16.8.6","react-dom":"^16.8.6","react-styleguidist":"^11.1.7","react-test-renderer":"^16.8.6","rimraf":"^3.0.1","rtlcss":"^3.4.0","style-loader":"^3.3.1","stylelint":"^14.3.0","stylelint-config-prettier":"^9.0.3","stylelint-declaration-block-no-ignored-properties":"^2.5.0","stylelint-no-unsupported-browser-features":"^5.0.2","stylelint-prettier":"^2.0.0","stylelint-use-logical-spec":"^3.2.2","svg-mixer":"^2.3.14","terser-webpack-plugin":"^5.2.4","typescript":"^3.7.2","webpack":"^5.60.0","webpack-cli":"^4.9.1"},"peerDependencies":{"react":"^16.8.6","react-dom":"^16.8.6"},"resolutions":{"@babel/types":"^7.15.6","@types/node":"^12.12.8","**/caniuse-lite":"1.0.30001307"},"browserslist":["last 2 versions",">1%","not op_mini all","not dead","not ie 11"],"author":"Plesk Developers <plesk-dev-leads@plesk.com> (https://www.plesk.com/)","license":"Apache-2.0"}');
 
 /***/ }),