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')} /> )}