Merge pull request #50 from ONLYOFFICE/feature/password-input-simple-view
Feature/password input simple view
This commit is contained in:
GitHub
commit
f2413a5554
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "asc-web-components",
|
||||
"version": "1.0.364",
|
||||
"version": "1.0.365",
|
||||
"description": "Ascensio System SIA component library",
|
||||
"license": "AGPL-3.0",
|
||||
"main": "dist/asc-web-components.js",
|
||||
|
||||
@ -1 +1,3 @@
|
||||
<svg xmlns="http://www.w3.org/2000/svg" width="16" height="16" viewBox="0 0 16 16"><defs><style>.a{fill:#747474;}</style></defs><title>look_off</title><path class="a" d="M8,3a8.56,8.56,0,0,0-1.82.18L8,5a3,3,0,0,1,3,3l2.86,2.86A8.59,8.59,0,0,0,16,8,8.61,8.61,0,0,0,8,3Z"/><path class="a" d="M10.55,9.55,9.43,8.43A1.48,1.48,0,0,0,9.5,8,1.5,1.5,0,0,0,8,6.5a1.48,1.48,0,0,0-.43.07L6.45,5.45,4.63,3.63,2,1,1,2,3.3,4.3A8.54,8.54,0,0,0,0,8a8.61,8.61,0,0,0,8,5,8.56,8.56,0,0,0,3.37-.63L13,14l1-1-1.29-1.29ZM8,11A3,3,0,0,1,5,8a2.94,2.94,0,0,1,.45-1.55L6.57,7.57A1.48,1.48,0,0,0,6.5,8,1.5,1.5,0,0,0,8,9.5a1.48,1.48,0,0,0,.43-.07l1.12,1.12A2.94,2.94,0,0,1,8,11Z"/></svg>
|
||||
<svg width="16" height="6" viewBox="0 0 16 6" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M15.1508 1.0515L15.2658 0.969172C15.4895 0.801214 15.5421 0.469603 15.3872 0.228352C15.231 -0.0150493 14.9238 -0.0699825 14.7047 0.0956798C7.03837 5.91294 1.45783 0.381967 1.2234 0.144302C1.02556 -0.0566439 0.713815 -0.0464608 0.529595 0.166964C0.344449 0.381249 0.353435 0.716448 0.549285 0.918111C0.559858 0.929012 0.734431 1.10242 1.05305 1.35902L0.0710252 3.11676C-0.0690566 3.36747 0.00442013 3.69478 0.235555 3.84811C0.314582 3.89975 0.404314 3.92571 0.491138 3.92571C0.656197 3.92571 0.816894 3.83463 0.910326 3.67069L1.87055 1.95339C2.40894 2.3091 3.0993 2.69751 3.92182 3.02568L3.44858 4.74283C3.37021 5.02553 3.51677 5.32043 3.77566 5.40448L3.9168 5.42714C4.126 5.42714 4.32158 5.27797 4.38528 5.04719L4.85389 3.35356C5.61311 3.57889 6.46245 3.73107 7.37906 3.76722V5.46802C7.37906 5.76234 7.59804 6 7.86922 6C8.14013 6 8.35924 5.76234 8.35924 5.46802V3.75775C9.15903 3.71013 10.0067 3.56082 10.8917 3.28687L11.495 5.01348C11.5702 5.22619 11.7565 5.35643 11.9533 5.35643L12.1266 5.32286C12.3797 5.21845 12.508 4.91165 12.4118 4.63712L11.8244 2.95482C12.6303 2.62995 13.4632 2.20224 14.3236 1.63483L15.1177 2.78529C15.2144 2.92427 15.362 2.99886 15.5095 2.99886C15.6123 2.99886 15.715 2.96501 15.8031 2.892C16.0204 2.71558 16.0643 2.38211 15.9025 2.14731L15.1508 1.0515Z" fill="#A3A9AE"/>
|
||||
</svg>
|
||||
|
||||
|
Before Width: | Height: | Size: 659 B After Width: | Height: | Size: 1.4 KiB |
@ -87,6 +87,7 @@ If emailInputName parameter value is empty, copy action will be disabled.
|
||||
| `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 |
|
||||
| `simpleView` | `bool` | - | - | `false` | Set simple view of password input (without tooltips, password progress bar and several additional buttons (copy and generate password) |
|
||||
| `style` | `obj`, `array` | - | - | - | Accepts css style |
|
||||
| `tooltipPasswordCapital` | `string` | - | - | - | Capital text translation tooltip |
|
||||
| `tooltipPasswordDigits` | `string` | - | - | - | Digit text translation tooltip |
|
||||
|
||||
@ -28,6 +28,10 @@ const StyledInput = styled(SimpleInput)`
|
||||
@media ${tablet} {
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
|
||||
.append {
|
||||
padding-right: 8px;
|
||||
}
|
||||
`;
|
||||
|
||||
const PasswordProgress = styled.div`
|
||||
@ -126,12 +130,12 @@ class PasswordInput extends React.Component {
|
||||
}
|
||||
|
||||
changeInputType = () => {
|
||||
this.refTooltip.current.hideTooltip();
|
||||
const newType = this.state.type === 'text' ? 'password' : 'text';
|
||||
this.refTooltip.current.hideTooltip();
|
||||
const newType = this.state.type === 'text' ? 'password' : 'text';
|
||||
|
||||
this.setState({
|
||||
type: newType
|
||||
});
|
||||
this.setState({
|
||||
type: newType
|
||||
});
|
||||
}
|
||||
|
||||
testStrength = value => {
|
||||
@ -192,6 +196,16 @@ class PasswordInput extends React.Component {
|
||||
|
||||
onChangeAction = (e) => {
|
||||
this.props.onChange && this.props.onChange(e);
|
||||
|
||||
if (this.props.simpleView) {
|
||||
this.setState(
|
||||
{
|
||||
inputValue: e.target.value
|
||||
}
|
||||
);
|
||||
return;
|
||||
}
|
||||
|
||||
this.checkPassword(e.target.value);
|
||||
}
|
||||
|
||||
@ -317,7 +331,8 @@ class PasswordInput extends React.Component {
|
||||
autoComplete,
|
||||
className,
|
||||
tooltipOffsetLeft,
|
||||
style
|
||||
style,
|
||||
simpleView
|
||||
} = this.props;
|
||||
const {
|
||||
type,
|
||||
@ -333,7 +348,7 @@ class PasswordInput extends React.Component {
|
||||
} = this.state;
|
||||
|
||||
const iconsColor = isDisabled ? '#D0D5DA' : '#A3A9AE';
|
||||
const iconName = type === 'password' ? 'EyeOffIcon' : 'EyeIcon' ;
|
||||
const iconName = type === 'password' ? 'EyeOffIcon' : 'EyeIcon';
|
||||
|
||||
const tooltipContent = (
|
||||
<StyledTooltipContainer forwardedAs='div' title={tooltipPasswordTitle}>
|
||||
@ -359,71 +374,81 @@ class PasswordInput extends React.Component {
|
||||
</StyledTooltipContainer>
|
||||
);
|
||||
|
||||
const inputGroup = <>
|
||||
<InputBlock
|
||||
className="input-relative"
|
||||
id={id}
|
||||
name={inputName}
|
||||
hasError={hasError}
|
||||
isDisabled={isDisabled}
|
||||
iconName={iconName}
|
||||
value={inputValue}
|
||||
onIconClick={this.changeInputType}
|
||||
onChange={this.onChangeAction}
|
||||
scale={scale}
|
||||
size={size}
|
||||
type={type}
|
||||
iconColor={`${iconsColor} !important`}
|
||||
iconSize={16}
|
||||
hoverColor={"#A3A9AE"}
|
||||
isIconFill={true}
|
||||
onBlur={this.onBlur}
|
||||
hasWarning={hasWarning}
|
||||
placeholder={placeholder}
|
||||
tabIndex={tabIndex}
|
||||
maxLength={maxLength}
|
||||
autoComplete={autoComplete}
|
||||
>
|
||||
</InputBlock>
|
||||
<TooltipStyle>
|
||||
<Tooltip
|
||||
id="tooltipContent"
|
||||
effect="solid"
|
||||
place="top"
|
||||
offsetLeft={tooltipOffsetLeft}
|
||||
reference={this.refTooltip}
|
||||
>
|
||||
{tooltipContent}
|
||||
</Tooltip>
|
||||
</TooltipStyle>
|
||||
<Progress progressColor={progressColor} progressWidth={progressWidth} isDisabled={isDisabled} />
|
||||
</>
|
||||
|
||||
return (
|
||||
<StyledInput onValidateInput={onValidateInput} className={className} style={style}>
|
||||
<PasswordProgress
|
||||
inputWidth={inputWidth}
|
||||
data-for="tooltipContent"
|
||||
data-tip=""
|
||||
data-event="click"
|
||||
ref={this.ref}
|
||||
>
|
||||
<InputBlock
|
||||
className="input-relative"
|
||||
id={id}
|
||||
name={inputName}
|
||||
hasError={hasError}
|
||||
isDisabled={isDisabled}
|
||||
iconName={iconName}
|
||||
value={inputValue}
|
||||
onIconClick={this.changeInputType}
|
||||
onChange={this.onChangeAction}
|
||||
scale={scale}
|
||||
size={size}
|
||||
type={type}
|
||||
iconColor={`${iconsColor} !important`}
|
||||
isIconFill={true}
|
||||
onBlur={this.onBlur}
|
||||
hasWarning={hasWarning}
|
||||
placeholder={placeholder}
|
||||
tabIndex={tabIndex}
|
||||
maxLength={maxLength}
|
||||
autoComplete={autoComplete}
|
||||
{simpleView
|
||||
? inputGroup
|
||||
: <><PasswordProgress
|
||||
inputWidth={inputWidth}
|
||||
data-for="tooltipContent"
|
||||
data-tip=""
|
||||
data-event="click"
|
||||
ref={this.ref}
|
||||
>
|
||||
</InputBlock>
|
||||
<TooltipStyle>
|
||||
<Tooltip
|
||||
id="tooltipContent"
|
||||
effect="solid"
|
||||
place="top"
|
||||
offsetLeft={tooltipOffsetLeft}
|
||||
reference={this.refTooltip}
|
||||
>
|
||||
{tooltipContent}
|
||||
</Tooltip>
|
||||
</TooltipStyle>
|
||||
<Progress progressColor={progressColor} progressWidth={progressWidth} isDisabled={isDisabled} />
|
||||
</PasswordProgress>
|
||||
<NewPasswordButton>
|
||||
<Icons.RefreshIcon
|
||||
size="medium"
|
||||
color={iconsColor}
|
||||
isfill={true}
|
||||
onClick={this.onGeneratePassword}
|
||||
/>
|
||||
</NewPasswordButton>
|
||||
<CopyLink>
|
||||
<Link
|
||||
type="action"
|
||||
isHovered={true}
|
||||
fontSize='13px'
|
||||
color={iconsColor}
|
||||
isSemitransparent={disableCopyAction}
|
||||
onClick={this.copyToClipboard.bind(this, emailInputName)}
|
||||
>
|
||||
{copyLabel}
|
||||
</Link>
|
||||
</CopyLink>
|
||||
{inputGroup}
|
||||
</PasswordProgress>
|
||||
<NewPasswordButton>
|
||||
<Icons.RefreshIcon
|
||||
size="medium"
|
||||
color={iconsColor}
|
||||
isfill={true}
|
||||
onClick={this.onGeneratePassword}
|
||||
/>
|
||||
</NewPasswordButton>
|
||||
<CopyLink>
|
||||
<Link
|
||||
type="action"
|
||||
isHovered={true}
|
||||
fontSize='13px'
|
||||
color={iconsColor}
|
||||
isSemitransparent={disableCopyAction}
|
||||
onClick={this.copyToClipboard.bind(this, emailInputName)}
|
||||
>
|
||||
{copyLabel}
|
||||
</Link>
|
||||
</CopyLink>
|
||||
</>
|
||||
}
|
||||
</StyledInput>
|
||||
);
|
||||
}
|
||||
@ -467,7 +492,9 @@ PasswordInput.propTypes = {
|
||||
onValidateInput: PropTypes.func,
|
||||
onCopyToClipboard: PropTypes.func,
|
||||
|
||||
tooltipOffsetLeft: PropTypes.number
|
||||
tooltipOffsetLeft: PropTypes.number,
|
||||
|
||||
simpleView: PropTypes.bool
|
||||
}
|
||||
|
||||
PasswordInput.defaultProps = {
|
||||
@ -485,7 +512,9 @@ PasswordInput.defaultProps = {
|
||||
|
||||
generatorSpecial: '!@#$%^&*',
|
||||
className: '',
|
||||
tooltipOffsetLeft: 110
|
||||
tooltipOffsetLeft: 110,
|
||||
|
||||
simpleView: false
|
||||
}
|
||||
|
||||
export default PasswordInput;
|
||||
|
||||
@ -16,6 +16,7 @@ storiesOf('Components|Input', module)
|
||||
const settingsUpperCase = boolean('settingsUpperCase', false);
|
||||
const settingsDigits = boolean('settingsDigits', false);
|
||||
const settingsSpecSymbols = boolean('settingsSpecSymbols', false);
|
||||
const simpleView = boolean('simpleView', false);
|
||||
|
||||
const fakeSettings = {
|
||||
minLength: 6,
|
||||
@ -28,7 +29,7 @@ storiesOf('Components|Input', module)
|
||||
|
||||
return (
|
||||
<Section>
|
||||
<div style={{height: '110px'}}></div>
|
||||
<div style={{ height: '110px' }}></div>
|
||||
<TextInput
|
||||
name='demoEmailInput'
|
||||
size='base'
|
||||
@ -41,6 +42,7 @@ storiesOf('Components|Input', module)
|
||||
<StringValue>
|
||||
{({ value, set }) => (
|
||||
<PasswordInput
|
||||
simpleView={simpleView}
|
||||
inputName='demoPasswordInput'
|
||||
emailInputName='demoEmailInput'
|
||||
inputValue={value}
|
||||
@ -63,7 +65,7 @@ storiesOf('Components|Input', module)
|
||||
maxLength={30}
|
||||
onValidateInput={(a) => console.log(a)}
|
||||
onCopyToClipboard={(b) => console.log('Data ' + b + ' copied to clipboard')}
|
||||
//tooltipOffsetLeft={150}
|
||||
//tooltipOffsetLeft={150}
|
||||
/>
|
||||
)}
|
||||
</StringValue>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user