IlyaSobolev/DocSpace-buildtools
1
0
Fork 0
Code Issues Pull Requests Actions Packages Projects Releases Wiki Activity

web: Components: Added style property for PasswordInput component. Added tests.

Browse Source
This commit is contained in:
Ilya Oleshko 2019-12-03 15:30:41 +03:00
parent 5fe1613456
commit f08a44a5b2
3 changed files with 49 additions and 29 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

54
web/ASC.Web.Components/src/components/password-input/README.md
View File

@ -67,36 +67,38 @@ If emailInputName parameter value is empty, copy action will be disabled.
### Properties
| Props | Type | Required | Values | Default | Description |
| ------------------------ | :------- | :------: | :----------------: | :-------------: | --------------------------------------------------------------------- |
| `id` | `string` | - | - | - | Allows you to set the component id |
| `autoComplete` | `string` | - | - | `new-password` | Allows you to set the component auto-complete |
| `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 |
| `clipCopiedResource` | `string` | - | - | `Copied` | Text translation copy action 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 |
| Props | Type | Required | Values | Default | Description |
| ------------------------ | :------------- | :------: | :----------------: | :-------------: | --------------------------------------------------------------------- |
| `autoComplete` | `string` | - | - | `new-password` | Allows you to set the component auto-complete |
| `className` | `string` | - | - | - | Accepts class |
| `clipActionResource` | `string` | - | - | - | Translation of text for copying email data and password |
| `clipCopiedResource` | `string` | - | - | `Copied` | Text translation copy action to copy |
| `clipEmailResource` | `string` | - | - | `E-mail` | Text translation email to copy |
| `clipPasswordResource` | `string` | - | - | `Password` | Text translation password to copy |
| `emailInputName` | `string` | ✅ | - | - | Required to associate password field with email field |
| `generatorSpecial` | `string` | - | - | `!@#$%^&*` | Set of special characters for password generator and validator |
| `id` | `string` | - | - | - | Allows you to set the component id |
| `inputName` | `string` | - | - | `passwordInput` | Input name |
| `inputType` | `array` | - | `text`, `password` | `password` | It is necessary for correct display of values ​​inside input |
| `inputValue` | `string` | - | - | - | Input value |
| `inputWidth` | `string` | - | - | - | If you need to set input width manually |
| `isDisabled` | `bool` | - | - | `false` | Set input disabled |
| `onChange` | `func` | - | - | - | Will be triggered whenever an PasswordInput typing |
| `onCopyToClipboard` | `func` | - | - | - | Will be triggered if you press copy button, return formatted value |
| `onValidateInput` | `func` | - | - | - | Will be triggered whenever an PasswordInput typing, return bool value |
| `passwordSettings` | `object` | ✅ | - | - | Set of settings for password generator and validator |
| `style` | `obj`, `array` | - | - | - | Accepts css style |
| `tooltipPasswordCapital` | `string` | - | - | - | Capital text translation tooltip |
| `tooltipPasswordDigits` | `string` | - | - | - | Digit text translation tooltip |
| `tooltipPasswordLength` | `string` | - | - | - | Password text translation is long tooltip |
| `tooltipPasswordSpecial` | `string` | - | - | - | Special text translation tooltip |
| `tooltipPasswordTitle` | `string` | - | - | - | Text translation tooltip |
#### passwordSettings properties
| Props | Type | Required | Values | Default | Description |
| ------------- | :------: | :------: | :----: | :-----: | ------------------------------- |
| `minLength` | `number` | ✅ | - | - | Minimum password length |
| `upperCase` | `bool` | ✅ | - | - | Must contain uppercase letters |
| `digits` | `bool` | ✅ | - | - | Must contain digits |
| `minLength` | `number` | ✅ | - | - | Minimum password length |
| `specSymbols` | `bool` | ✅ | - | - | Must contain special characters |
| `upperCase` | `bool` | ✅ | - | - | Must contain uppercase letters |

8
web/ASC.Web.Components/src/components/password-input/index.js
View File

@ -186,7 +186,7 @@ class PasswordInput extends React.Component {
return e.preventDefault();
const newPassword = this.getNewPassword();
if (this.state.type !== 'text') {
this.setState({
type: 'text'
@ -302,7 +302,8 @@ class PasswordInput extends React.Component {
id,
autoComplete,
className,
tooltipOffsetLeft
tooltipOffsetLeft,
style
} = this.props;
const {
type,
@ -346,7 +347,7 @@ class PasswordInput extends React.Component {
);
return (
<StyledInput onValidateInput={onValidateInput} className={className}>
<StyledInput onValidateInput={onValidateInput} className={className} style={style}>
<PasswordProgress
inputWidth={inputWidth}
data-for="tooltipContent"
@ -430,6 +431,7 @@ PasswordInput.propTypes = {
tabIndex: PropTypes.number,
maxLength: PropTypes.number,
className: PropTypes.string,
style: PropTypes.oneOfType([PropTypes.object, PropTypes.array]),
isDisabled: PropTypes.bool,
size: PropTypes.oneOf(['base', 'middle', 'big', 'huge']),

16
web/ASC.Web.Components/src/components/password-input/password-input.test.js
View File

@ -204,4 +204,20 @@ describe('<PasswordInput />', () => {
expect(wrapper.state('type')).toBe('text');
expect(wrapper.state('progressWidth')).toBe(100);
});
it('accepts style', () => {
const wrapper = mount(
<PasswordInput {...baseProps} style={{ color: 'red' }} />
);
expect(wrapper.getDOMNode().style).toHaveProperty('color', 'red');
});
it('accepts className', () => {
const wrapper = mount(
<PasswordInput {...baseProps} className="test" />
);
expect(wrapper.prop('className')).toEqual('test');
});
});