diff --git a/web/ASC.Web.Components/src/components/password-input/index.js b/web/ASC.Web.Components/src/components/password-input/index.js
index f0bde1f1c2..f6302d9d1d 100644
--- a/web/ASC.Web.Components/src/components/password-input/index.js
+++ b/web/ASC.Web.Components/src/components/password-input/index.js
@@ -9,7 +9,9 @@ import Link from '../link'
import { Text } from '../text'
import DropDown from '../drop-down'
-const StyledInput = styled.div`
+const SimpleInput = ({ onValidateInput, onCopyToClipboard, ...props }) =>
;
+
+const StyledInput = styled(SimpleInput)`
display: flex;
align-items: center;
line-height: 32px;
@@ -120,7 +122,7 @@ class PasswordInput extends React.PureComponent {
digits: digits,
capital: capital,
special: special,
- length: value.length >= passwordSettings.minLength
+ length: value.trim().length >= passwordSettings.minLength
};
}
@@ -132,13 +134,15 @@ class PasswordInput extends React.PureComponent {
&& passwordValidation.capital
&& passwordValidation.special
&& passwordValidation.length;
- const progressWidth = value.length * 100 / this.props.passwordSettings.minLength;
+ const progressWidth = value.trim().length * 100 / this.props.passwordSettings.minLength;
const progressColor = progressScore
? greenColor
: (value.length === 0)
? 'transparent'
: redColor;
+ this.props.onValidateInput && this.props.onValidateInput(progressScore);
+
this.setState({
progressColor: progressColor,
progressWidth: progressWidth > 100 ? 100 : progressWidth,
@@ -183,12 +187,12 @@ class PasswordInput extends React.PureComponent {
if (passwordSettings.upperCase) {
hold = (password.length % 2 == 0)
- ? (hold.toUpperCase())
- : (hold);
+ ? (hold.toUpperCase())
+ : (hold);
}
character += hold;
-
+
if (passwordSettings.digits) {
character += numeric.charAt(b);
}
@@ -196,7 +200,7 @@ class PasswordInput extends React.PureComponent {
if (passwordSettings.specSymbols) {
character += special.charAt(c);
}
-
+
password = character;
}
@@ -209,23 +213,26 @@ class PasswordInput extends React.PureComponent {
}
copyToClipboard = emailInputName => {
- const { clipEmailResource, clipPasswordResource, isDisabled } = this.props;
+ const { clipEmailResource, clipPasswordResource, isDisabled, onCopyToClipboard } = this.props;
if (isDisabled)
return event.preventDefault();
const textField = document.createElement('textarea');
const emailValue = document.getElementsByName(emailInputName)[0].value;
+ const formattedText = clipEmailResource + emailValue + ' | ' + clipPasswordResource + this.state.inputValue;
- textField.innerText = clipEmailResource + emailValue + ' | ' + clipPasswordResource + this.state.inputValue;
-
+ textField.innerText = formattedText;
document.body.appendChild(textField);
textField.select();
document.execCommand('copy');
textField.remove();
+
+ onCopyToClipboard && onCopyToClipboard(formattedText);
}
render() {
+ //console.log('PasswordInput render()');
const {
inputName,
isDisabled,
@@ -244,7 +251,8 @@ class PasswordInput extends React.PureComponent {
hasWarning,
placeholder,
tabIndex,
- maxLength
+ maxLength,
+ onValidateInput
} = this.props;
const {
type,
@@ -272,20 +280,20 @@ class PasswordInput extends React.PureComponent {
}
{passwordSettings.upperCase &&
-
- {tooltipPasswordCapital}
-
+
+ {tooltipPasswordCapital}
+
}
{passwordSettings.specSymbols &&
-
- {tooltipPasswordSpecial}
-
+
+ {tooltipPasswordSpecial}
+
}
);
return (
-
+
console.log(a)}
+ onCopyToClipboard={b => console.log("Data " + b + " copied to clipboard")}
/>;
```
#### Properties
-| Props | Type | Required | Values | Default | Description |
-| ------------------- | --------- | :------: | ------------------ | --------- | --------------------------------------------------------- |
-| `inputType` | `array` | - | `text`, `password` | `password`| It is necessary for correct display of values inside input|
-| `inputName` | `string` | - | - | `passwordInput`| Input name |
-| `emailInputName` | `string` | ✅ | - | - | Required to associate password field with email field |
-| `inputValue` | `string` | - | - | - | Input value |
-| `onChange` | `func` | - | - | - | Will be triggered whenever an PasswordInput typing |
-| `clipActionResource`| `string` | - | - | - | Translation of text for copying email data and password |
-| `clipEmailResource` | `string` | - | - | `E-mail` | Text translation email to copy |
-| `clipPasswordResource`| `string` | - | - | `Password`| Text translation password to copy |
-| `tooltipPasswordTitle`| `string` | - | - | - | Text translation tooltip |
-| `tooltipPasswordLength`| `string` | - | - | - | Password text translation is long tooltip |
-| `tooltipPasswordDigits`| `string` | - | - | - | Digit text translation tooltip |
-| `tooltipPasswordCapital`| `string` |- | - | - | Capital text translation tooltip |
-| `tooltipPasswordSpecial`| `string` |- | - | - | Special text translation tooltip |
-| `generatorSpecial` | `string` | - | - | `!@#$%^&*`| Set of special characters for password generator and validator|
-| `passwordSettings` | `object` | ✅ | - | - | Set of settings for password generator and validator |
-| `isDisabled` | `bool` | - | - | `false` | Set input disabled |
-| `inputWidth` | `string` | - | - | - | If you need to set input width manually |
\ No newline at end of file
+| Props | Type | Required | Values | Default | Description |
+| ------------------------ | -------- | :------: | ------------------ | --------------- | -------------------------------------------------------------- |
+| `inputType` | `array` | - | `text`, `password` | `password` | It is necessary for correct display of values inside input |
+| `inputName` | `string` | - | - | `passwordInput` | Input name |
+| `emailInputName` | `string` | ✅ | - | - | Required to associate password field with email field |
+| `inputValue` | `string` | - | - | - | Input value |
+| `onChange` | `func` | - | - | - | Will be triggered whenever an PasswordInput typing |
+| `clipActionResource` | `string` | - | - | - | Translation of text for copying email data and password |
+| `clipEmailResource` | `string` | - | - | `E-mail` | Text translation email to copy |
+| `clipPasswordResource` | `string` | - | - | `Password` | Text translation password to copy |
+| `tooltipPasswordTitle` | `string` | - | - | - | Text translation tooltip |
+| `tooltipPasswordLength` | `string` | - | - | - | Password text translation is long tooltip |
+| `tooltipPasswordDigits` | `string` | - | - | - | Digit text translation tooltip |
+| `tooltipPasswordCapital` | `string` | - | - | - | Capital text translation tooltip |
+| `tooltipPasswordSpecial` | `string` | - | - | - | Special text translation tooltip |
+| `generatorSpecial` | `string` | - | - | `!@#$%^&*` | Set of special characters for password generator and validator |
+| `passwordSettings` | `object` | ✅ | - | - | Set of settings for password generator and validator |
+| `isDisabled` | `bool` | - | - | `false` | Set input disabled |
+| `inputWidth` | `string` | - | - | - | If you need to set input width manually |
+| `onValidateInput` | `func` | - | - | - | Will be triggered whenever an PasswordInput typing, return bool value|
+| `onCopyToClipboard` | `func` | - | - | - | Will be triggered if you press copy button, return formatted value|
\ No newline at end of file
diff --git a/web/ASC.Web.Storybook/stories/input/password/index.stories.js b/web/ASC.Web.Storybook/stories/input/password/index.stories.js
index 132f91fc1d..7a02b30b94 100644
--- a/web/ASC.Web.Storybook/stories/input/password/index.stories.js
+++ b/web/ASC.Web.Storybook/stories/input/password/index.stories.js
@@ -60,6 +60,8 @@ storiesOf('Components|Input', module)
isDisabled={isDisabled}
placeholder='password'
maxLength={30}
+ onValidateInput={(a) => console.log(a)}
+ onCopyToClipboard={(b) => console.log('Data ' + b + ' copied to clipboard')}
/>
)}