Merge branch 'master' into feature/new-login-page

# Conflicts:
#	web/ASC.Web.Components/src/components/input-block/index.js
#	web/ASC.Web.Components/src/components/password-input/index.js
This commit is contained in:
Vladislav Makhov 2020-07-22 15:51:48 +03:00
commit d192f50953
4 changed files with 254 additions and 214 deletions

View File

@ -322,7 +322,7 @@ namespace ASC.Core.Data
return JsonSerializer.Deserialize<T>(data); return JsonSerializer.Deserialize<T>(data);
} }
private string Serialize(ISettings settings) private string Serialize<T>(T settings)
{ {
return JsonSerializer.Serialize(settings); return JsonSerializer.Serialize(settings);
} }

View File

@ -1,6 +1,6 @@
{ {
"name": "asc-web-components", "name": "asc-web-components",
"version": "1.0.367", "version": "1.0.368",
"description": "Ascensio System SIA component library", "description": "Ascensio System SIA component library",
"license": "AGPL-3.0", "license": "AGPL-3.0",
"main": "dist/asc-web-components.js", "main": "dist/asc-web-components.js",

View File

@ -1,10 +1,10 @@
import React from 'react'; import React from "react";
import PropTypes from 'prop-types'; import PropTypes from "prop-types";
import styled from 'styled-components'; import styled from "styled-components";
import TextInput from '../text-input'; import TextInput from "../text-input";
import { Icons } from '../icons'; import { Icons } from "../icons";
import IconButton from '../icon-button'; import IconButton from "../icon-button";
import commonInputStyle from '../text-input/common-input-styles'; import commonInputStyle from "../text-input/common-input-styles";
const iconNames = Object.keys(Icons); const iconNames = Object.keys(Icons);
@ -17,7 +17,7 @@ const StyledIconBlock = styled.div`
height: 100%; height: 100%;
padding-right: 8px; padding-right: 8px;
padding-left: 1px; padding-left: 1px;
-webkit-tap-highlight-color: rgba(0,0,0,0); -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
`; `;
const StyledChildrenBlock = styled.div` const StyledChildrenBlock = styled.div`
@ -27,9 +27,14 @@ const StyledChildrenBlock = styled.div`
`; `;
// eslint-disable-next-line react/prop-types, no-unused-vars // eslint-disable-next-line react/prop-types, no-unused-vars
const CustomInputGroup = ({ isIconFill, hasError, hasWarning, isDisabled, scale, ...props }) => ( const CustomInputGroup = ({
<div {...props}></div> isIconFill,
); hasError,
hasWarning,
isDisabled,
scale,
...props
}) => <div {...props}></div>;
const StyledInputGroup = styled(CustomInputGroup)` const StyledInputGroup = styled(CustomInputGroup)`
display: flex; display: flex;
@ -50,12 +55,13 @@ class InputBlock extends React.Component {
constructor(props) { constructor(props) {
super(props); super(props);
} }
onIconClick = (e) => { onIconClick = e => {
if (typeof this.props.onIconClick === "function" && !this.props.isDisabled) this.props.onIconClick(e); if (typeof this.props.onIconClick === "function" && !this.props.isDisabled)
} this.props.onIconClick(e);
onChange = (e) => { };
onChange = e => {
if (typeof this.props.onChange === "function") this.props.onChange(e); if (typeof this.props.onChange === "function") this.props.onChange(e);
} };
render() { render() {
let iconButtonSize = 0; let iconButtonSize = 0;
@ -94,16 +100,16 @@ class InputBlock extends React.Component {
iconButtonSize = iconSize; iconButtonSize = iconSize;
} else { } else {
switch (size) { switch (size) {
case 'base': case "base":
iconButtonSize = 15; iconButtonSize = 15;
break; break;
case 'middle': case "middle":
iconButtonSize = 18; iconButtonSize = 18;
break; break;
case 'big': case "big":
iconButtonSize = 21; iconButtonSize = 21;
break; break;
case 'huge': case "huge":
iconButtonSize = 24; iconButtonSize = 24;
break; break;
} }
@ -120,9 +126,7 @@ class InputBlock extends React.Component {
style={style} style={style}
> >
<div className="prepend"> <div className="prepend">
<StyledChildrenBlock> <StyledChildrenBlock>{children}</StyledChildrenBlock>
{children}
</StyledChildrenBlock>
</div> </div>
<TextInput <TextInput
id={id} id={id}
@ -147,42 +151,41 @@ class InputBlock extends React.Component {
mask={mask} mask={mask}
keepCharPositions={keepCharPositions} keepCharPositions={keepCharPositions}
/> />
{ {iconNames.includes(iconName) && (
iconNames.includes(iconName) && ( <div className="append">
<div className="append"> <StyledIconBlock
<StyledIconBlock isDisabled={isDisabled}
onClick={this.onIconClick}
isClickable={typeof onIconClick === "function"}
>
<IconButton
size={iconButtonSize}
color={iconColor}
hoverColor={hoverColor}
iconName={iconName}
isFill={isIconFill}
isDisabled={isDisabled} isDisabled={isDisabled}
onClick={this.onIconClick} isClickable={typeof onIconClick === "function"}
isClickable={typeof onIconClick === 'function'}> />
<IconButton </StyledIconBlock>
size={iconButtonSize} </div>
color={iconColor} )}
hoverColor={hoverColor}
iconName={iconName}
isFill={isIconFill}
isDisabled={isDisabled}
isClickable={typeof onIconClick === 'function'}
/>
</StyledIconBlock>
</div>
)}
</StyledInputGroup> </StyledInputGroup>
); );
} }
} }
InputBlock.propTypes = { InputBlock.propTypes = {
id: PropTypes.string, id: PropTypes.string,
name: PropTypes.string, name: PropTypes.string,
type: PropTypes.oneOf(['text', 'password']), type: PropTypes.oneOf(["text", "password"]),
maxLength: PropTypes.number, maxLength: PropTypes.number,
placeholder: PropTypes.string, placeholder: PropTypes.string,
tabIndex: PropTypes.number, tabIndex: PropTypes.number,
mask: PropTypes.oneOfType([PropTypes.array, PropTypes.func]), mask: PropTypes.oneOfType([PropTypes.array, PropTypes.func]),
keepCharPositions: PropTypes.bool, keepCharPositions: PropTypes.bool,
size: PropTypes.oneOf(['base', 'middle', 'big', 'huge', 'large']), size: PropTypes.oneOf(["base", "middle", "big", "huge", "large"]),
scale: PropTypes.bool, scale: PropTypes.bool,
onChange: PropTypes.func, onChange: PropTypes.func,
@ -210,26 +213,25 @@ InputBlock.propTypes = {
className: PropTypes.string, className: PropTypes.string,
style: PropTypes.oneOfType([PropTypes.object, PropTypes.array]) style: PropTypes.oneOfType([PropTypes.object, PropTypes.array])
} };
InputBlock.defaultProps = { InputBlock.defaultProps = {
type: "text",
type: 'text',
maxLength: 255, maxLength: 255,
size: 'base', size: "base",
scale: false, scale: false,
tabIndex: -1, tabIndex: -1,
hasError: false, hasError: false,
hasWarning: false, hasWarning: false,
autoComplete: 'off', autoComplete: "off",
value: '', value: "",
iconName: "", iconName: "",
iconColor: "#ffffff", iconColor: "#ffffff",
hoverColor: "#ffffff", hoverColor: "#ffffff",
isIconFill: false, isIconFill: false,
isDisabled: false, isDisabled: false,
keepCharPositions: false keepCharPositions: false
} };
export default InputBlock export default InputBlock;

View File

@ -1,22 +1,24 @@
import React from 'react' import React from "react";
import styled from 'styled-components' import styled from "styled-components";
import PropTypes from 'prop-types' import PropTypes from "prop-types";
import isEqual from "lodash/isEqual"; import isEqual from "lodash/isEqual";
import { tablet } from '../../utils/device'; import { tablet } from "../../utils/device";
import InputBlock from '../input-block' import InputBlock from "../input-block";
import { Icons } from '../icons' import { Icons } from "../icons";
import Link from '../link' import Link from "../link";
import Text from '../text' import Text from "../text";
import Tooltip from "../tooltip"; import Tooltip from "../tooltip";
// eslint-disable-next-line no-unused-vars // eslint-disable-next-line no-unused-vars
const SimpleInput = ({ onValidateInput, onCopyToClipboard, ...props }) => <div {...props}></div>; const SimpleInput = ({ onValidateInput, onCopyToClipboard, ...props }) => (
<div {...props}></div>
);
SimpleInput.propTypes = { SimpleInput.propTypes = {
onValidateInput: PropTypes.func, onValidateInput: PropTypes.func,
onCopyToClipboard: PropTypes.func onCopyToClipboard: PropTypes.func
} };
const StyledInput = styled(SimpleInput)` const StyledInput = styled(SimpleInput)`
display: flex; display: flex;
@ -27,7 +29,7 @@ const StyledInput = styled(SimpleInput)`
@media ${tablet} { @media ${tablet} {
flex-wrap: wrap; flex-wrap: wrap;
} }
.append { .append {
padding-right: 8px; padding-right: 8px;
@ -35,7 +37,7 @@ const StyledInput = styled(SimpleInput)`
`; `;
const PasswordProgress = styled.div` const PasswordProgress = styled.div`
${props => props.inputWidth ? `width: ${props.inputWidth};` : `flex: auto;`} ${props => (props.inputWidth ? `width: ${props.inputWidth};` : `flex: auto;`)}
.input-relative { .input-relative {
position: relative; position: relative;
@ -55,7 +57,7 @@ const PasswordProgress = styled.div`
const NewPasswordButton = styled.div` const NewPasswordButton = styled.div`
margin: 0 16px; margin: 0 16px;
-webkit-tap-highlight-color: rgba(0,0,0,0); -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
svg { svg {
overflow: hidden; overflow: hidden;
@ -80,14 +82,17 @@ const CopyLink = styled.div`
const TooltipStyle = styled.div` const TooltipStyle = styled.div`
.__react_component_tooltip { .__react_component_tooltip {
} }
`; `;
const Progress = styled.div` const Progress = styled.div`
border: 1.5px solid ${props => (!props.isDisabled && props.progressColor) ? props.progressColor : 'transparent'}; border: 1.5px solid
${props =>
!props.isDisabled && props.progressColor
? props.progressColor
: "transparent"};
border-radius: 2px; border-radius: 2px;
margin-top: -1px; margin-top: -1px;
width: ${props => props.progressWidth ? props.progressWidth + '%' : '0%'}; width: ${props => (props.progressWidth ? props.progressWidth + "%" : "0%")};
`; `;
const StyledTooltipContainer = styled(Text)` const StyledTooltipContainer = styled(Text)`
@ -97,11 +102,10 @@ const StyledTooltipContainer = styled(Text)`
const StyledTooltipItem = styled(Text)` const StyledTooltipItem = styled(Text)`
margin-left: 8px; margin-left: 8px;
height: 24px; height: 24px;
color: ${props => props.valid ? '#44bb00' : '#B40404'}; color: ${props => (props.valid ? "#44bb00" : "#B40404")};
`; `;
class PasswordInput extends React.Component { class PasswordInput extends React.Component {
constructor(props) { constructor(props) {
super(props); super(props);
@ -112,7 +116,7 @@ class PasswordInput extends React.Component {
this.state = { this.state = {
type: inputType, type: inputType,
progressColor: 'transparent', progressColor: "transparent",
progressWidth: 0, progressWidth: 0,
inputValue: inputValue, inputValue: inputValue,
copyLabel: clipActionResource, copyLabel: clipActionResource,
@ -122,41 +126,39 @@ class PasswordInput extends React.Component {
validDigits: false, validDigits: false,
validCapital: false, validCapital: false,
validSpecial: false validSpecial: false
} };
} }
onBlur = () => { onBlur = () => {
this.refTooltip.current.hideTooltip(); this.refTooltip.current.hideTooltip();
} };
changeInputType = () => { changeInputType = () => {
this.refTooltip.current.hideTooltip(); this.refTooltip.current.hideTooltip();
const newType = this.state.type === 'text' ? 'password' : 'text'; const newType = this.state.type === "text" ? "password" : "text";
this.setState({ this.setState({
type: newType type: newType
}); });
} };
testStrength = value => { testStrength = value => {
const { generatorSpecial, passwordSettings } = this.props; const { generatorSpecial, passwordSettings } = this.props;
const specSymbols = new RegExp('[' + generatorSpecial + ']'); const specSymbols = new RegExp("[" + generatorSpecial + "]");
let capital; let capital;
let digits; let digits;
let special; let special;
passwordSettings.upperCase passwordSettings.upperCase
? capital = /[A-Z]/.test(value) ? (capital = /[A-Z]/.test(value))
: capital = true; : (capital = true);
passwordSettings.digits passwordSettings.digits ? (digits = /\d/.test(value)) : (digits = true);
? digits = /\d/.test(value)
: digits = true;
passwordSettings.specSymbols passwordSettings.specSymbols
? special = specSymbols.test(value) ? (special = specSymbols.test(value))
: special = true; : (special = true);
return { return {
digits: digits, digits: digits,
@ -164,22 +166,24 @@ class PasswordInput extends React.Component {
special: special, special: special,
length: value.trim().length >= passwordSettings.minLength length: value.trim().length >= passwordSettings.minLength
}; };
} };
checkPassword = (value) => { checkPassword = value => {
const greenColor = '#44bb00'; const greenColor = "#44bb00";
const redColor = '#B40404'; const redColor = "#B40404";
const passwordValidation = this.testStrength(value); const passwordValidation = this.testStrength(value);
const progressScore = passwordValidation.digits const progressScore =
&& passwordValidation.capital passwordValidation.digits &&
&& passwordValidation.special passwordValidation.capital &&
&& passwordValidation.length; passwordValidation.special &&
const progressWidth = value.trim().length * 100 / this.props.passwordSettings.minLength; passwordValidation.length;
const progressWidth =
(value.trim().length * 100) / this.props.passwordSettings.minLength;
const progressColor = progressScore const progressColor = progressScore
? greenColor ? greenColor
: (value.length === 0) : value.length === 0
? 'transparent' ? "transparent"
: redColor; : redColor;
this.props.onValidateInput && this.props.onValidateInput(progressScore); this.props.onValidateInput && this.props.onValidateInput(progressScore);
@ -192,49 +196,47 @@ class PasswordInput extends React.Component {
validCapital: passwordValidation.capital, validCapital: passwordValidation.capital,
validSpecial: passwordValidation.special validSpecial: passwordValidation.special
}); });
} };
onChangeAction = (e) => { onChangeAction = e => {
this.props.onChange && this.props.onChange(e); this.props.onChange && this.props.onChange(e);
if (this.props.simpleView) { if (this.props.simpleView) {
this.setState( this.setState({
{ inputValue: e.target.value
inputValue: e.target.value });
}
);
return; return;
} }
this.checkPassword(e.target.value); this.checkPassword(e.target.value);
} };
onGeneratePassword = (e) => { onGeneratePassword = e => {
if (this.props.isDisabled) if (this.props.isDisabled) return e.preventDefault();
return e.preventDefault();
const newPassword = this.getNewPassword(); const newPassword = this.getNewPassword();
if (this.state.type !== 'text') { if (this.state.type !== "text") {
this.setState({ this.setState({
type: 'text' type: "text"
}); });
} }
this.checkPassword(newPassword); this.checkPassword(newPassword);
this.props.onChange && this.props.onChange({ target: { value: newPassword } }); this.props.onChange &&
} this.props.onChange({ target: { value: newPassword } });
};
getNewPassword = () => { getNewPassword = () => {
const { passwordSettings, generatorSpecial } = this.props; const { passwordSettings, generatorSpecial } = this.props;
const length = passwordSettings.minLength; const length = passwordSettings.minLength;
const string = 'abcdefghijklmnopqrstuvwxyz'; const string = "abcdefghijklmnopqrstuvwxyz";
const numeric = '0123456789'; const numeric = "0123456789";
const special = generatorSpecial; const special = generatorSpecial;
let password = ''; let password = "";
let character = ''; let character = "";
while (password.length < length) { while (password.length < length) {
const a = Math.ceil(string.length * Math.random() * Math.random()); const a = Math.ceil(string.length * Math.random() * Math.random());
@ -244,9 +246,7 @@ class PasswordInput extends React.Component {
let hold = string.charAt(a); let hold = string.charAt(a);
if (passwordSettings.upperCase) { if (passwordSettings.upperCase) {
hold = (password.length % 2 == 0) hold = password.length % 2 == 0 ? hold.toUpperCase() : hold;
? (hold.toUpperCase())
: (hold);
} }
character += hold; character += hold;
@ -263,33 +263,44 @@ class PasswordInput extends React.Component {
} }
password = password password = password
.split('') .split("")
.sort(() => 0.5 - Math.random()) .sort(() => 0.5 - Math.random())
.join(''); .join("");
return password.substr(0, length); return password.substr(0, length);
} };
copyToClipboard = emailInputName => { copyToClipboard = emailInputName => {
const { clipEmailResource, clipPasswordResource, clipActionResource, clipCopiedResource, isDisabled, onCopyToClipboard } = this.props; const {
clipEmailResource,
clipPasswordResource,
clipActionResource,
clipCopiedResource,
isDisabled,
onCopyToClipboard
} = this.props;
const { disableCopyAction, inputValue } = this.state; const { disableCopyAction, inputValue } = this.state;
if (isDisabled || disableCopyAction) if (isDisabled || disableCopyAction) return event.preventDefault();
return event.preventDefault();
this.setState({ this.setState({
disableCopyAction: true, disableCopyAction: true,
copyLabel: clipCopiedResource copyLabel: clipCopiedResource
}) });
const textField = document.createElement('textarea'); const textField = document.createElement("textarea");
const emailValue = document.getElementsByName(emailInputName)[0].value; const emailValue = document.getElementsByName(emailInputName)[0].value;
const formattedText = clipEmailResource + emailValue + ' | ' + clipPasswordResource + inputValue; const formattedText =
clipEmailResource +
emailValue +
" | " +
clipPasswordResource +
inputValue;
textField.innerText = formattedText; textField.innerText = formattedText;
document.body.appendChild(textField); document.body.appendChild(textField);
textField.select(); textField.select();
document.execCommand('copy'); document.execCommand("copy");
textField.remove(); textField.remove();
onCopyToClipboard && onCopyToClipboard(formattedText); onCopyToClipboard && onCopyToClipboard(formattedText);
@ -298,9 +309,9 @@ class PasswordInput extends React.Component {
this.setState({ this.setState({
disableCopyAction: false, disableCopyAction: false,
copyLabel: clipActionResource copyLabel: clipActionResource
}) });
}, 2000); }, 2000);
} };
shouldComponentUpdate(nextProps, nextState) { shouldComponentUpdate(nextProps, nextState) {
return !isEqual(this.props, nextProps) || !isEqual(this.state, nextState); return !isEqual(this.props, nextProps) || !isEqual(this.state, nextState);
@ -347,86 +358,113 @@ class PasswordInput extends React.Component {
disableCopyAction disableCopyAction
} = this.state; } = this.state;
const iconsColor = isDisabled ? '#D0D5DA' : '#A3A9AE'; const iconsColor = isDisabled ? "#D0D5DA" : "#A3A9AE";
const iconName = type === 'password' ? 'EyeOffIcon' : 'EyeIcon'; const iconName = type === "password" ? "EyeOffIcon" : "EyeIcon";
const tooltipContent = ( const tooltipContent = (
<StyledTooltipContainer forwardedAs='div' title={tooltipPasswordTitle}> <StyledTooltipContainer forwardedAs="div" title={tooltipPasswordTitle}>
{tooltipPasswordTitle} {tooltipPasswordTitle}
<StyledTooltipItem forwardedAs='div' title={tooltipPasswordLength} valid={validLength} > <StyledTooltipItem
forwardedAs="div"
title={tooltipPasswordLength}
valid={validLength}
>
{tooltipPasswordLength} {tooltipPasswordLength}
</StyledTooltipItem> </StyledTooltipItem>
{passwordSettings.digits && {passwordSettings.digits && (
<StyledTooltipItem forwardedAs='div' title={tooltipPasswordDigits} valid={validDigits} > <StyledTooltipItem
forwardedAs="div"
title={tooltipPasswordDigits}
valid={validDigits}
>
{tooltipPasswordDigits} {tooltipPasswordDigits}
</StyledTooltipItem> </StyledTooltipItem>
} )}
{passwordSettings.upperCase && {passwordSettings.upperCase && (
<StyledTooltipItem forwardedAs='div' title={tooltipPasswordCapital} valid={validCapital} > <StyledTooltipItem
forwardedAs="div"
title={tooltipPasswordCapital}
valid={validCapital}
>
{tooltipPasswordCapital} {tooltipPasswordCapital}
</StyledTooltipItem> </StyledTooltipItem>
} )}
{passwordSettings.specSymbols && {passwordSettings.specSymbols && (
<StyledTooltipItem forwardedAs='div' title={tooltipPasswordSpecial} valid={validSpecial} > <StyledTooltipItem
forwardedAs="div"
title={tooltipPasswordSpecial}
valid={validSpecial}
>
{tooltipPasswordSpecial} {tooltipPasswordSpecial}
</StyledTooltipItem> </StyledTooltipItem>
} )}
</StyledTooltipContainer> </StyledTooltipContainer>
); );
const inputGroup = <> const inputGroup = (
<InputBlock <>
className="input-relative" <InputBlock
id={id} className="input-relative"
name={inputName} id={id}
hasError={hasError} name={inputName}
isDisabled={isDisabled} hasError={hasError}
iconName={iconName} isDisabled={isDisabled}
value={inputValue} iconName={iconName}
onIconClick={this.changeInputType} value={inputValue}
onChange={this.onChangeAction} onIconClick={this.changeInputType}
scale={scale} onChange={this.onChangeAction}
size={size} scale={scale}
type={type} size={size}
iconColor={`${iconsColor} !important`} type={type}
iconSize={16} iconColor={`${iconsColor} !important`}
hoverColor={"#A3A9AE"} iconSize={16}
isIconFill={true} hoverColor={"#A3A9AE"}
onBlur={this.onBlur} isIconFill={true}
hasWarning={hasWarning} onBlur={this.onBlur}
placeholder={placeholder} hasWarning={hasWarning}
tabIndex={tabIndex} placeholder={placeholder}
maxLength={maxLength} tabIndex={tabIndex}
autoComplete={autoComplete} maxLength={maxLength}
> autoComplete={autoComplete}
</InputBlock> ></InputBlock>
<TooltipStyle> <TooltipStyle>
<Tooltip <Tooltip
id="tooltipContent" id="tooltipContent"
effect="solid" effect="solid"
place="top" place="top"
offsetLeft={tooltipOffsetLeft} offsetLeft={tooltipOffsetLeft}
reference={this.refTooltip} reference={this.refTooltip}
> >
{tooltipContent} {tooltipContent}
</Tooltip> </Tooltip>
</TooltipStyle> </TooltipStyle>
<Progress progressColor={progressColor} progressWidth={progressWidth} isDisabled={isDisabled} /> <Progress
</> progressColor={progressColor}
progressWidth={progressWidth}
isDisabled={isDisabled}
/>
</>
);
return ( return (
<StyledInput onValidateInput={onValidateInput} className={className} style={style}> <StyledInput
{simpleView onValidateInput={onValidateInput}
? inputGroup className={className}
: <><PasswordProgress style={style}
inputWidth={inputWidth} >
data-for="tooltipContent" {simpleView ? (
data-tip="" inputGroup
data-event="click" ) : (
ref={this.ref} <>
> <PasswordProgress
{inputGroup} inputWidth={inputWidth}
</PasswordProgress> data-for="tooltipContent"
data-tip=""
data-event="click"
ref={this.ref}
>
{inputGroup}
</PasswordProgress>
<NewPasswordButton> <NewPasswordButton>
<Icons.RefreshIcon <Icons.RefreshIcon
size="medium" size="medium"
@ -439,7 +477,7 @@ class PasswordInput extends React.Component {
<Link <Link
type="action" type="action"
isHovered={true} isHovered={true}
fontSize='13px' fontSize="13px"
color={iconsColor} color={iconsColor}
isSemitransparent={disableCopyAction} isSemitransparent={disableCopyAction}
onClick={this.copyToClipboard.bind(this, emailInputName)} onClick={this.copyToClipboard.bind(this, emailInputName)}
@ -448,7 +486,7 @@ class PasswordInput extends React.Component {
</Link> </Link>
</CopyLink> </CopyLink>
</> </>
} )}
</StyledInput> </StyledInput>
); );
} }
@ -457,7 +495,7 @@ class PasswordInput extends React.Component {
PasswordInput.propTypes = { PasswordInput.propTypes = {
id: PropTypes.string, id: PropTypes.string,
autoComplete: PropTypes.string, autoComplete: PropTypes.string,
inputType: PropTypes.oneOf(['text', 'password']), inputType: PropTypes.oneOf(["text", "password"]),
inputName: PropTypes.string, inputName: PropTypes.string,
emailInputName: PropTypes.string, emailInputName: PropTypes.string,
inputValue: PropTypes.string, inputValue: PropTypes.string,
@ -472,7 +510,7 @@ PasswordInput.propTypes = {
style: PropTypes.oneOfType([PropTypes.object, PropTypes.array]), style: PropTypes.oneOfType([PropTypes.object, PropTypes.array]),
isDisabled: PropTypes.bool, isDisabled: PropTypes.bool,
size: PropTypes.oneOf(['base', 'middle', 'big', 'huge', 'large']), size: PropTypes.oneOf(["base", "middle", "big", "huge", "large"]),
scale: PropTypes.bool, scale: PropTypes.bool,
clipActionResource: PropTypes.string, clipActionResource: PropTypes.string,
@ -495,26 +533,26 @@ PasswordInput.propTypes = {
tooltipOffsetLeft: PropTypes.number, tooltipOffsetLeft: PropTypes.number,
simpleView: PropTypes.bool simpleView: PropTypes.bool
} };
PasswordInput.defaultProps = { PasswordInput.defaultProps = {
inputType: 'password', inputType: "password",
inputName: 'passwordInput', inputName: "passwordInput",
autoComplete: 'new-password', autoComplete: "new-password",
isDisabled: false, isDisabled: false,
size: 'base', size: "base",
scale: true, scale: true,
clipEmailResource: 'E-mail ', clipEmailResource: "E-mail ",
clipPasswordResource: 'Password ', clipPasswordResource: "Password ",
clipCopiedResource: 'Copied', clipCopiedResource: "Copied",
generatorSpecial: '!@#$%^&*', generatorSpecial: "!@#$%^&*",
className: '', className: "",
tooltipOffsetLeft: 110, tooltipOffsetLeft: 110,
simpleView: false simpleView: false
} };
export default PasswordInput; export default PasswordInput;