@plesk/ui-library 3.27.2 → 3.27.3

package/esm/components/FormFieldPassword/PasswordMeter.js

@@ -0,0 +1,61 @@
+import _extends from "@babel/runtime/helpers/extends";
+// Copyright 1999-2022. Plesk International GmbH. All rights reserved.
+import React, { Fragment, useState, useEffect } from 'react';
+import Popover from '../Popover';
+import Translate from '../Translate';
+import estimatePassword, { DEFAULT_RULES } from './estimatePassword';
+import locale from './locale/en-US';
+const strengthIntents = {
+  VeryWeak: 'danger',
+  Weak: 'danger',
+  Medium: 'warning',
+  Strong: 'success',
+  VeryStrong: 'success'
+};
+
+const PasswordMeter = ({
+  value,
+  visible,
+  onEstimate,
+  children,
+  ...props
+}) => {
+  const [result, setResult] = useState(null);
+  useEffect(() => {
+    if (!visible) {
+      return;
+    }
+
+    Promise.resolve(onEstimate ? onEstimate(value, estimatePassword, DEFAULT_RULES) : estimatePassword(value)).then(result => {
+      setResult(result);
+    });
+  }, [visible, value, onEstimate]);
+  return /*#__PURE__*/React.createElement(Popover, _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.createElement(Translate, {
+    component: "div",
+    content: "FormFieldPassword.passwordStrength",
+    fallback: locale.passwordStrength,
+    params: {
+      strength: /*#__PURE__*/React.createElement("b", null, /*#__PURE__*/React.createElement(Translate, {
+        content: `FormFieldPassword.strength${result === null || result === void 0 ? void 0 : result.strength}`,
+        fallback: locale[`strength${result === null || result === void 0 ? void 0 : result.strength}`]
+      }))
+    }
+  }) : null, result !== null && result !== void 0 && result.suggestions.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, result.suggestions.slice(0, 3).map((suggestion, index) => /*#__PURE__*/React.createElement("li", {
+    key: index.toString()
+  }, suggestion)))) : /*#__PURE__*/React.createElement(Translate, {
+    content: "FormFieldPassword.yourPasswordIsStrong",
+    fallback: locale.yourPasswordIsStrong
+  }));
+};
+
+export default PasswordMeter;

package/esm/components/FormFieldPassword/estimatePassword.js

@@ -0,0 +1,187 @@
+// Copyright 1999-2022. Plesk International GmbH. All rights reserved.
+import React from 'react';
+import Translate from '../Translate';
+import locale from './locale/en-US';
+export const DEFAULT_RULES = [{
+  name: 'passwordTooShort',
+  suggestion: /*#__PURE__*/React.createElement(Translate, {
+    content: `FormFieldPassword.passwordTooShort`,
+    fallback: locale.passwordTooShort
+  }),
+
+  score(passwd) {
+    return passwd.length < 5 ? -1 : 0;
+  }
+
+}, {
+  name: 'passwordLength',
+
+  score(passwd) {
+    if (passwd.length < 5) {
+      return 3;
+    }
+
+    if (passwd.length > 4 && passwd.length < 8) {
+      return 6;
+    }
+
+    if (passwd.length > 7 && passwd.length < 16) {
+      return 12;
+    }
+
+    return 18;
+  }
+
+}, {
+  name: 'lettersLowerCase',
+  suggestion: /*#__PURE__*/React.createElement(Translate, {
+    content: `FormFieldPassword.lettersLowerCase`,
+    fallback: locale.lettersLowerCase
+  }),
+
+  score(passwd) {
+    // [verified] at least one lower case letter
+    return passwd.match(/[a-z]/) ? 1 : -1;
+  }
+
+}, {
+  name: 'lettersUpperCase',
+  suggestion: /*#__PURE__*/React.createElement(Translate, {
+    content: `FormFieldPassword.lettersUpperCase`,
+    fallback: locale.lettersUpperCase
+  }),
+
+  score(passwd) {
+    // [verified] at least one upper case letter
+    return passwd.match(/[A-Z]/) ? 5 : -1;
+  }
+
+}, {
+  name: 'numbers1',
+  suggestion: /*#__PURE__*/React.createElement(Translate, {
+    content: `FormFieldPassword.numbers1`,
+    fallback: locale.numbers1
+  }),
+
+  score(passwd) {
+    // [verified] at least one number
+    return passwd.match(/\d+/) ? 5 : -1;
+  }
+
+}, {
+  name: 'numbers3',
+  suggestion: /*#__PURE__*/React.createElement(Translate, {
+    content: `FormFieldPassword.numbers3`,
+    fallback: locale.numbers3
+  }),
+
+  score(passwd) {
+    // [verified] at least three numbers
+    return passwd.match(/(.*[0-9].*[0-9].*[0-9])/) ? 5 : -1;
+  }
+
+}, {
+  name: 'specialChar1',
+  suggestion: /*#__PURE__*/React.createElement(Translate, {
+    content: `FormFieldPassword.specialChar1`,
+    fallback: locale.specialChar1
+  }),
+
+  score(passwd) {
+    // [verified] at least one special character
+    return passwd.match(/[!@#$%^&*?_~]/) ? 5 : -1;
+  }
+
+}, {
+  name: 'specialChar2',
+  suggestion: /*#__PURE__*/React.createElement(Translate, {
+    content: `FormFieldPassword.specialChar2`,
+    fallback: locale.specialChar2
+  }),
+
+  score(passwd) {
+    // [verified] at least two special characters
+    return passwd.match(/(.*[!@#$%^&*?_~].*[!@#$%^&*?_~])/) ? 5 : -1;
+  }
+
+}, {
+  name: 'comboUpperAndLower',
+  suggestion: /*#__PURE__*/React.createElement(Translate, {
+    content: `FormFieldPassword.comboUpperAndLower`,
+    fallback: locale.comboUpperAndLower
+  }),
+
+  score(passwd) {
+    // [verified] both upper and lower case
+    return passwd.match(/([a-z].*[A-Z])|([A-Z].*[a-z])/) ? 2 : -1;
+  }
+
+}, {
+  name: 'comboLettersAndNumbers',
+  suggestion: /*#__PURE__*/React.createElement(Translate, {
+    content: `FormFieldPassword.comboLettersAndNumbers`,
+    fallback: locale.comboLettersAndNumbers
+  }),
+
+  score(passwd) {
+    // [verified] both letters and numbers
+    return passwd.match(/([a-zA-Z])/) && passwd.match(/([0-9])/) ? 2 : -1;
+  }
+
+}, {
+  name: 'comboLettersNumbersSpecial',
+  suggestion: /*#__PURE__*/React.createElement(Translate, {
+    content: `FormFieldPassword.comboLettersNumbersSpecial`,
+    fallback: locale.comboLettersNumbersSpecial
+  }),
+
+  score(passwd) {
+    // [verified] letters, numbers, and special characters
+    return passwd.match(/([a-zA-Z0-9].*[!@#$%^&*?_~])|([!@#$%^&*?_~].*[a-zA-Z0-9])/) ? 2 : -1;
+  }
+
+}];
+export 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
+  };
+});

package/esm/components/FormFieldPassword/generatePassword.js

@@ -0,0 +1,14 @@
+// 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('');
+};
+
+export default generatePassword;

package/esm/components/FormFieldPassword/index.js

@@ -1,2 +1,3 @@
-// Copyright 1999-2017. Plesk International GmbH. All rights reserved.
-export { default, generatePassword } from './FormFieldPassword';
+// Copyright 1999-2022. Plesk International GmbH. All rights reserved.
+export { default } from './FormFieldPassword';
+export { default as generatePassword } from './generatePassword';

package/esm/components/FormFieldRadioButtons/FormFieldRadioButtons.js

@@ -10,9 +10,9 @@ import FormField from '../FormField';
 import Hint from '../Hint';
 import Radio from '../Radio';
 
-/**
- * `FormFieldRadioButtons` is used for making a choice among a set of mutually exclusive, related options. Only one option can be chosen.
- * @since 0.2.0
+/**
+ * `FormFieldRadioButtons` is used for making a choice among a set of mutually exclusive, related options. Only one option can be chosen.
+ * @since 0.2.0
  */
 class FormFieldRadioButtons extends Component {
   render() {
@@ -74,68 +74,68 @@ class FormFieldRadioButtons extends Component {
 }
 
 FormFieldRadioButtons.propTypes = {
-  /**
-   * Options definition.
-   * @since 0.2.0
+  /**
+   * Options definition.
+   * @since 0.2.0
    */
   options: PropTypes.arrayOf(PropTypes.shape({
-    /**
-     * Option value.
+    /**
+     * Option value.
      */
     value: PropTypes.string.isRequired,
 
-    /**
-     * Option label.
+    /**
+     * Option label.
      */
     label: PropTypes.node.isRequired,
 
-    /**
-     * Text hint located below option for providing additional information.
+    /**
+     * Text hint located below option for providing additional information.
      */
     description: PropTypes.node,
 
-    /**
-     * Set true if option is not available to choice.
+    /**
+     * Set true if option is not available to choice.
      */
     disabled: PropTypes.bool,
 
-    /**
-     * Optional array of `FormField` components under this option.
+    /**
+     * Optional array of `FormField` components under this option.
      */
     indentFields: PropTypes.array
   })).isRequired,
 
-  /**
-   * Value of current chosen option.
-   * @deprecated Use [Form](#!/Form) values.
-   * @since 0.2.0
+  /**
+   * Value of current chosen option.
+   * @deprecated Use [Form](#!/Form) values.
+   * @since 0.2.0
    */
   value: PropTypes.string,
 
-  /**
-   * Disabled state of field.
-   * @since 0.2.0
+  /**
+   * Disabled state of field.
+   * @since 0.2.0
    */
   disabled: PropTypes.bool,
 
-  /**
-   * 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
    */
   className: PropTypes.string,
 
-  /**
-   * @ignore
+  /**
+   * @ignore
    */
   baseClassName: PropTypes.string
 };

package/esm/components/FormFieldSelect/FormFieldSelect.js

@@ -6,10 +6,10 @@ import { CLS_PREFIX } from '../../constants';
 import FormField from '../FormField';
 import Select from '../Select';
 
-/**
- * `FormFieldSelect` componentis is used for making a choice among a set of related options.
- * See description of `Select` for [the full list of properties](#!/Select) of this component.
- * @since 1.12.3
+/**
+ * `FormFieldSelect` componentis is used for making a choice among a set of related options.
+ * See description of `Select` for [the full list of properties](#!/Select) of this component.
+ * @since 1.12.3
  */
 const FormFieldSelect = ({
   size,

package/esm/components/FormFieldText/FormFieldText.js

@@ -10,11 +10,11 @@ import FormField from '../FormField';
 import Input from '../Input';
 import TextArea from '../TextArea';
 
-/**
- * `FormFieldText` component is used for entering of user data in text format.
- *
- * [FormField](#!/FormField) with [InputNumber](#!/InputNumber) can be used for entering of integer numbers.
- * @since 0.0.58
+/**
+ * `FormFieldText` component is used for entering of user data in text format.
+ *
+ * [FormField](#!/FormField) with [InputNumber](#!/InputNumber) can be used for entering of integer numbers.
+ * @since 0.0.58
  */
 class FormFieldText extends Component {
   render() {
@@ -69,70 +69,70 @@ class FormFieldText extends Component {
 }
 
 FormFieldText.propTypes = {
-  /**
-   * Size of the input
-   * @since 0.0.58
+  /**
+   * Size of the input
+   * @since 0.0.58
    */
   size: PropTypes.oneOf(['sm', 'md', 'lg', 'xl', 'fill']),
 
-  /**
-   * If `true`, a textarea element will be rendered.
-   * @since 1.3.0
+  /**
+   * If `true`, a textarea element will be rendered.
+   * @since 1.3.0
    */
   multiline: PropTypes.bool,
 
-  /**
-   * Number of rows to display when multiline option is set to true.
-   * @since 1.3.0
+  /**
+   * Number of rows to display when multiline option is set to true.
+   * @since 1.3.0
    */
   rows: PropTypes.oneOfType([PropTypes.number.isRequired, PropTypes.shape({
     min: PropTypes.number.isRequired,
     max: PropTypes.number.isRequired
   })]),
 
-  /**
-   * Placeholder of the input
-   * @since 0.0.58
+  /**
+   * Placeholder of the input
+   * @since 0.0.58
    */
   placeholder: PropTypes.string,
 
-  /**
-   * Disabled state of field.
-   * @since 0.2.0
+  /**
+   * Disabled state of field.
+   * @since 0.2.0
    */
   disabled: PropTypes.bool,
 
-  /**
-   * 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,
 
-  /**
-   * Whether the value of the control can be automatically completed by the browser or not.
-   * @since 2.5.1
+  /**
+   * Whether the value of the control can be automatically completed by the browser or not.
+   * @since 2.5.1
    */
   autoComplete: PropTypes.oneOf(['on', 'off']),
 
-  /**
-   * If 'true', a field will be multiple
-   * @since 1.12.0
+  /**
+   * If 'true', a field will be multiple
+   * @since 1.12.0
    */
   multi: PropTypes.bool,
 
-  /**
-   * @ignore
+  /**
+   * @ignore
    */
   className: PropTypes.string,
 
-  /**
-   * @ignore
+  /**
+   * @ignore
    */
   baseClassName: PropTypes.string,
 
-  /**
-   * Adjust height automatically when multiline option is set to true.
-   * @since 1.9.0
+  /**
+   * Adjust height automatically when multiline option is set to true.
+   * @since 1.9.0
    */
   autoheight: PropTypes.bool
 };

package/esm/components/Grid/Grid.js

@@ -7,9 +7,9 @@ import classNames from 'classnames';
 import Measure from 'react-measure';
 import { CLS_PREFIX } from '../../constants';
 
-/**
- * `Grid` component is used to layout and align content based on 12-column system.
- * @since 0.0.48
+/**
+ * `Grid` component is used to layout and align content based on 12-column system.
+ * @since 0.0.48
  */
 class Grid extends Component {
   constructor(...args) {
@@ -116,73 +116,73 @@ class Grid extends Component {
 }
 
 Grid.propTypes = {
-  /**
-   * Content of the `Grid`.
-   * @since 0.0.48
+  /**
+   * Content of the `Grid`.
+   * @since 0.0.48
    */
   children: PropTypes.node,
 
-  /**
-   * @ignore
+  /**
+   * @ignore
    */
   className: PropTypes.string,
 
-  /**
-   * @ignore
+  /**
+   * @ignore
    */
   baseClassName: PropTypes.string,
 
-  /**
-   * Minimal column width
-   * @since 0.0.50
+  /**
+   * Minimal column width
+   * @since 0.0.50
    */
   minColumnWidth: PropTypes.number,
 
-  /**
-   * Maximum columns number
-   * @since 0.0.53
+  /**
+   * Maximum columns number
+   * @since 0.0.53
    */
   maxColumnsNumber: PropTypes.oneOfType([PropTypes.number, PropTypes.func]),
 
-  /**
-   * Number of columns for `xs` breakpoint
-   * @since 0.0.53
+  /**
+   * Number of columns for `xs` breakpoint
+   * @since 0.0.53
    */
   xs: PropTypes.PropTypes.oneOf([1, 2, 3, 4, 5, 6, 'auto']),
 
-  /**
-   * Number of columns for `sm` breakpoint
-   * @since 0.0.48
+  /**
+   * Number of columns for `sm` breakpoint
+   * @since 0.0.48
    */
   sm: PropTypes.oneOf([1, 2, 3, 4, 5, 6, 'auto']),
 
-  /**
-   * Number of columns for `md` breakpoint
-   * @since 0.0.48
+  /**
+   * Number of columns for `md` breakpoint
+   * @since 0.0.48
    */
   md: PropTypes.oneOf([1, 2, 3, 4, 5, 6, 'auto']),
 
-  /**
-   * Number of columns for `lg` breakpoint
-   * @since 0.0.48
+  /**
+   * Number of columns for `lg` breakpoint
+   * @since 0.0.48
    */
   lg: PropTypes.oneOf([1, 2, 3, 4, 5, 6, 'auto']),
 
-  /**
-   * Number of columns for `xl` breakpoint
-   * @since 0.0.48
+  /**
+   * Number of columns for `xl` breakpoint
+   * @since 0.0.48
    */
   xl: PropTypes.oneOf([1, 2, 3, 4, 5, 6, 'auto']),
 
-  /**
-   * Specifying the gutters between grid items
-   * @since 0.0.53
+  /**
+   * Specifying the gutters between grid items
+   * @since 0.0.53
    */
   gap: PropTypes.oneOf(['xs', 'sm', 'md', 'lg', 'xl']),
 
-  /**
-   * Columns number change notifier
-   * @since 0.0.50
+  /**
+   * Columns number change notifier
+   * @since 0.0.50
    */
   onColumnsChange: PropTypes.func
 };