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
commit
d192f50953
@ -322,7 +322,7 @@ namespace ASC.Core.Data
|
||||
return JsonSerializer.Deserialize<T>(data);
|
||||
}
|
||||
|
||||
private string Serialize(ISettings settings)
|
||||
private string Serialize<T>(T settings)
|
||||
{
|
||||
return JsonSerializer.Serialize(settings);
|
||||
}
|
||||
|
||||
@ -1,6 +1,6 @@
|
||||
{
|
||||
"name": "asc-web-components",
|
||||
"version": "1.0.367",
|
||||
"version": "1.0.368",
|
||||
"description": "Ascensio System SIA component library",
|
||||
"license": "AGPL-3.0",
|
||||
"main": "dist/asc-web-components.js",
|
||||
|
||||
@ -1,10 +1,10 @@
|
||||
import React from 'react';
|
||||
import PropTypes from 'prop-types';
|
||||
import styled from 'styled-components';
|
||||
import TextInput from '../text-input';
|
||||
import { Icons } from '../icons';
|
||||
import IconButton from '../icon-button';
|
||||
import commonInputStyle from '../text-input/common-input-styles';
|
||||
import React from "react";
|
||||
import PropTypes from "prop-types";
|
||||
import styled from "styled-components";
|
||||
import TextInput from "../text-input";
|
||||
import { Icons } from "../icons";
|
||||
import IconButton from "../icon-button";
|
||||
import commonInputStyle from "../text-input/common-input-styles";
|
||||
|
||||
const iconNames = Object.keys(Icons);
|
||||
|
||||
@ -17,7 +17,7 @@ const StyledIconBlock = styled.div`
|
||||
height: 100%;
|
||||
padding-right: 8px;
|
||||
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`
|
||||
@ -27,9 +27,14 @@ const StyledChildrenBlock = styled.div`
|
||||
`;
|
||||
|
||||
// eslint-disable-next-line react/prop-types, no-unused-vars
|
||||
const CustomInputGroup = ({ isIconFill, hasError, hasWarning, isDisabled, scale, ...props }) => (
|
||||
<div {...props}></div>
|
||||
);
|
||||
const CustomInputGroup = ({
|
||||
isIconFill,
|
||||
hasError,
|
||||
hasWarning,
|
||||
isDisabled,
|
||||
scale,
|
||||
...props
|
||||
}) => <div {...props}></div>;
|
||||
const StyledInputGroup = styled(CustomInputGroup)`
|
||||
display: flex;
|
||||
|
||||
@ -50,12 +55,13 @@ class InputBlock extends React.Component {
|
||||
constructor(props) {
|
||||
super(props);
|
||||
}
|
||||
onIconClick = (e) => {
|
||||
if (typeof this.props.onIconClick === "function" && !this.props.isDisabled) this.props.onIconClick(e);
|
||||
}
|
||||
onChange = (e) => {
|
||||
onIconClick = e => {
|
||||
if (typeof this.props.onIconClick === "function" && !this.props.isDisabled)
|
||||
this.props.onIconClick(e);
|
||||
};
|
||||
onChange = e => {
|
||||
if (typeof this.props.onChange === "function") this.props.onChange(e);
|
||||
}
|
||||
};
|
||||
|
||||
render() {
|
||||
let iconButtonSize = 0;
|
||||
@ -94,16 +100,16 @@ class InputBlock extends React.Component {
|
||||
iconButtonSize = iconSize;
|
||||
} else {
|
||||
switch (size) {
|
||||
case 'base':
|
||||
case "base":
|
||||
iconButtonSize = 15;
|
||||
break;
|
||||
case 'middle':
|
||||
case "middle":
|
||||
iconButtonSize = 18;
|
||||
break;
|
||||
case 'big':
|
||||
case "big":
|
||||
iconButtonSize = 21;
|
||||
break;
|
||||
case 'huge':
|
||||
case "huge":
|
||||
iconButtonSize = 24;
|
||||
break;
|
||||
}
|
||||
@ -120,9 +126,7 @@ class InputBlock extends React.Component {
|
||||
style={style}
|
||||
>
|
||||
<div className="prepend">
|
||||
<StyledChildrenBlock>
|
||||
{children}
|
||||
</StyledChildrenBlock>
|
||||
<StyledChildrenBlock>{children}</StyledChildrenBlock>
|
||||
</div>
|
||||
<TextInput
|
||||
id={id}
|
||||
@ -147,42 +151,41 @@ class InputBlock extends React.Component {
|
||||
mask={mask}
|
||||
keepCharPositions={keepCharPositions}
|
||||
/>
|
||||
{
|
||||
iconNames.includes(iconName) && (
|
||||
<div className="append">
|
||||
<StyledIconBlock
|
||||
{iconNames.includes(iconName) && (
|
||||
<div className="append">
|
||||
<StyledIconBlock
|
||||
isDisabled={isDisabled}
|
||||
onClick={this.onIconClick}
|
||||
isClickable={typeof onIconClick === "function"}
|
||||
>
|
||||
<IconButton
|
||||
size={iconButtonSize}
|
||||
color={iconColor}
|
||||
hoverColor={hoverColor}
|
||||
iconName={iconName}
|
||||
isFill={isIconFill}
|
||||
isDisabled={isDisabled}
|
||||
onClick={this.onIconClick}
|
||||
isClickable={typeof onIconClick === 'function'}>
|
||||
<IconButton
|
||||
size={iconButtonSize}
|
||||
color={iconColor}
|
||||
hoverColor={hoverColor}
|
||||
iconName={iconName}
|
||||
isFill={isIconFill}
|
||||
isDisabled={isDisabled}
|
||||
isClickable={typeof onIconClick === 'function'}
|
||||
/>
|
||||
</StyledIconBlock>
|
||||
</div>
|
||||
)}
|
||||
isClickable={typeof onIconClick === "function"}
|
||||
/>
|
||||
</StyledIconBlock>
|
||||
</div>
|
||||
)}
|
||||
</StyledInputGroup>
|
||||
);
|
||||
}
|
||||
}
|
||||
|
||||
InputBlock.propTypes = {
|
||||
|
||||
id: PropTypes.string,
|
||||
name: PropTypes.string,
|
||||
type: PropTypes.oneOf(['text', 'password']),
|
||||
type: PropTypes.oneOf(["text", "password"]),
|
||||
maxLength: PropTypes.number,
|
||||
placeholder: PropTypes.string,
|
||||
tabIndex: PropTypes.number,
|
||||
mask: PropTypes.oneOfType([PropTypes.array, PropTypes.func]),
|
||||
keepCharPositions: PropTypes.bool,
|
||||
|
||||
size: PropTypes.oneOf(['base', 'middle', 'big', 'huge', 'large']),
|
||||
size: PropTypes.oneOf(["base", "middle", "big", "huge", "large"]),
|
||||
scale: PropTypes.bool,
|
||||
|
||||
onChange: PropTypes.func,
|
||||
@ -210,26 +213,25 @@ InputBlock.propTypes = {
|
||||
|
||||
className: PropTypes.string,
|
||||
style: PropTypes.oneOfType([PropTypes.object, PropTypes.array])
|
||||
}
|
||||
};
|
||||
|
||||
InputBlock.defaultProps = {
|
||||
|
||||
type: 'text',
|
||||
type: "text",
|
||||
maxLength: 255,
|
||||
size: 'base',
|
||||
size: "base",
|
||||
scale: false,
|
||||
tabIndex: -1,
|
||||
hasError: false,
|
||||
hasWarning: false,
|
||||
autoComplete: 'off',
|
||||
autoComplete: "off",
|
||||
|
||||
value: '',
|
||||
value: "",
|
||||
iconName: "",
|
||||
iconColor: "#ffffff",
|
||||
hoverColor: "#ffffff",
|
||||
isIconFill: false,
|
||||
isDisabled: false,
|
||||
keepCharPositions: false
|
||||
}
|
||||
};
|
||||
|
||||
export default InputBlock
|
||||
export default InputBlock;
|
||||
|
||||
@ -1,22 +1,24 @@
|
||||
import React from 'react'
|
||||
import styled from 'styled-components'
|
||||
import PropTypes from 'prop-types'
|
||||
import React from "react";
|
||||
import styled from "styled-components";
|
||||
import PropTypes from "prop-types";
|
||||
import isEqual from "lodash/isEqual";
|
||||
|
||||
import { tablet } from '../../utils/device';
|
||||
import InputBlock from '../input-block'
|
||||
import { Icons } from '../icons'
|
||||
import Link from '../link'
|
||||
import Text from '../text'
|
||||
import { tablet } from "../../utils/device";
|
||||
import InputBlock from "../input-block";
|
||||
import { Icons } from "../icons";
|
||||
import Link from "../link";
|
||||
import Text from "../text";
|
||||
import Tooltip from "../tooltip";
|
||||
|
||||
// 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 = {
|
||||
onValidateInput: PropTypes.func,
|
||||
onCopyToClipboard: PropTypes.func
|
||||
}
|
||||
};
|
||||
|
||||
const StyledInput = styled(SimpleInput)`
|
||||
display: flex;
|
||||
@ -27,7 +29,7 @@ const StyledInput = styled(SimpleInput)`
|
||||
|
||||
@media ${tablet} {
|
||||
flex-wrap: wrap;
|
||||
}
|
||||
}
|
||||
|
||||
.append {
|
||||
padding-right: 8px;
|
||||
@ -35,7 +37,7 @@ const StyledInput = styled(SimpleInput)`
|
||||
`;
|
||||
|
||||
const PasswordProgress = styled.div`
|
||||
${props => props.inputWidth ? `width: ${props.inputWidth};` : `flex: auto;`}
|
||||
${props => (props.inputWidth ? `width: ${props.inputWidth};` : `flex: auto;`)}
|
||||
|
||||
.input-relative {
|
||||
position: relative;
|
||||
@ -55,7 +57,7 @@ const PasswordProgress = styled.div`
|
||||
|
||||
const NewPasswordButton = styled.div`
|
||||
margin: 0 16px;
|
||||
-webkit-tap-highlight-color: rgba(0,0,0,0);
|
||||
-webkit-tap-highlight-color: rgba(0, 0, 0, 0);
|
||||
|
||||
svg {
|
||||
overflow: hidden;
|
||||
@ -80,14 +82,17 @@ const CopyLink = styled.div`
|
||||
|
||||
const TooltipStyle = styled.div`
|
||||
.__react_component_tooltip {
|
||||
|
||||
}
|
||||
`;
|
||||
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;
|
||||
margin-top: -1px;
|
||||
width: ${props => props.progressWidth ? props.progressWidth + '%' : '0%'};
|
||||
width: ${props => (props.progressWidth ? props.progressWidth + "%" : "0%")};
|
||||
`;
|
||||
|
||||
const StyledTooltipContainer = styled(Text)`
|
||||
@ -97,11 +102,10 @@ const StyledTooltipContainer = styled(Text)`
|
||||
const StyledTooltipItem = styled(Text)`
|
||||
margin-left: 8px;
|
||||
height: 24px;
|
||||
color: ${props => props.valid ? '#44bb00' : '#B40404'};
|
||||
color: ${props => (props.valid ? "#44bb00" : "#B40404")};
|
||||
`;
|
||||
|
||||
class PasswordInput extends React.Component {
|
||||
|
||||
constructor(props) {
|
||||
super(props);
|
||||
|
||||
@ -112,7 +116,7 @@ class PasswordInput extends React.Component {
|
||||
|
||||
this.state = {
|
||||
type: inputType,
|
||||
progressColor: 'transparent',
|
||||
progressColor: "transparent",
|
||||
progressWidth: 0,
|
||||
inputValue: inputValue,
|
||||
copyLabel: clipActionResource,
|
||||
@ -122,41 +126,39 @@ class PasswordInput extends React.Component {
|
||||
validDigits: false,
|
||||
validCapital: false,
|
||||
validSpecial: false
|
||||
}
|
||||
};
|
||||
}
|
||||
|
||||
onBlur = () => {
|
||||
this.refTooltip.current.hideTooltip();
|
||||
}
|
||||
};
|
||||
|
||||
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 => {
|
||||
const { generatorSpecial, passwordSettings } = this.props;
|
||||
const specSymbols = new RegExp('[' + generatorSpecial + ']');
|
||||
const specSymbols = new RegExp("[" + generatorSpecial + "]");
|
||||
|
||||
let capital;
|
||||
let digits;
|
||||
let special;
|
||||
|
||||
passwordSettings.upperCase
|
||||
? capital = /[A-Z]/.test(value)
|
||||
: capital = true;
|
||||
? (capital = /[A-Z]/.test(value))
|
||||
: (capital = true);
|
||||
|
||||
passwordSettings.digits
|
||||
? digits = /\d/.test(value)
|
||||
: digits = true;
|
||||
passwordSettings.digits ? (digits = /\d/.test(value)) : (digits = true);
|
||||
|
||||
passwordSettings.specSymbols
|
||||
? special = specSymbols.test(value)
|
||||
: special = true;
|
||||
? (special = specSymbols.test(value))
|
||||
: (special = true);
|
||||
|
||||
return {
|
||||
digits: digits,
|
||||
@ -164,22 +166,24 @@ class PasswordInput extends React.Component {
|
||||
special: special,
|
||||
length: value.trim().length >= passwordSettings.minLength
|
||||
};
|
||||
}
|
||||
};
|
||||
|
||||
checkPassword = (value) => {
|
||||
const greenColor = '#44bb00';
|
||||
const redColor = '#B40404';
|
||||
checkPassword = value => {
|
||||
const greenColor = "#44bb00";
|
||||
const redColor = "#B40404";
|
||||
const passwordValidation = this.testStrength(value);
|
||||
const progressScore = passwordValidation.digits
|
||||
&& passwordValidation.capital
|
||||
&& passwordValidation.special
|
||||
&& passwordValidation.length;
|
||||
const progressWidth = value.trim().length * 100 / this.props.passwordSettings.minLength;
|
||||
const progressScore =
|
||||
passwordValidation.digits &&
|
||||
passwordValidation.capital &&
|
||||
passwordValidation.special &&
|
||||
passwordValidation.length;
|
||||
const progressWidth =
|
||||
(value.trim().length * 100) / this.props.passwordSettings.minLength;
|
||||
const progressColor = progressScore
|
||||
? greenColor
|
||||
: (value.length === 0)
|
||||
? 'transparent'
|
||||
: redColor;
|
||||
: value.length === 0
|
||||
? "transparent"
|
||||
: redColor;
|
||||
|
||||
this.props.onValidateInput && this.props.onValidateInput(progressScore);
|
||||
|
||||
@ -192,49 +196,47 @@ class PasswordInput extends React.Component {
|
||||
validCapital: passwordValidation.capital,
|
||||
validSpecial: passwordValidation.special
|
||||
});
|
||||
}
|
||||
};
|
||||
|
||||
onChangeAction = (e) => {
|
||||
onChangeAction = e => {
|
||||
this.props.onChange && this.props.onChange(e);
|
||||
|
||||
if (this.props.simpleView) {
|
||||
this.setState(
|
||||
{
|
||||
inputValue: e.target.value
|
||||
}
|
||||
);
|
||||
this.setState({
|
||||
inputValue: e.target.value
|
||||
});
|
||||
return;
|
||||
}
|
||||
|
||||
this.checkPassword(e.target.value);
|
||||
}
|
||||
};
|
||||
|
||||
onGeneratePassword = (e) => {
|
||||
if (this.props.isDisabled)
|
||||
return e.preventDefault();
|
||||
onGeneratePassword = e => {
|
||||
if (this.props.isDisabled) return e.preventDefault();
|
||||
|
||||
const newPassword = this.getNewPassword();
|
||||
|
||||
if (this.state.type !== 'text') {
|
||||
if (this.state.type !== "text") {
|
||||
this.setState({
|
||||
type: 'text'
|
||||
type: "text"
|
||||
});
|
||||
}
|
||||
|
||||
this.checkPassword(newPassword);
|
||||
this.props.onChange && this.props.onChange({ target: { value: newPassword } });
|
||||
}
|
||||
this.props.onChange &&
|
||||
this.props.onChange({ target: { value: newPassword } });
|
||||
};
|
||||
|
||||
getNewPassword = () => {
|
||||
const { passwordSettings, generatorSpecial } = this.props;
|
||||
|
||||
const length = passwordSettings.minLength;
|
||||
const string = 'abcdefghijklmnopqrstuvwxyz';
|
||||
const numeric = '0123456789';
|
||||
const string = "abcdefghijklmnopqrstuvwxyz";
|
||||
const numeric = "0123456789";
|
||||
const special = generatorSpecial;
|
||||
|
||||
let password = '';
|
||||
let character = '';
|
||||
let password = "";
|
||||
let character = "";
|
||||
|
||||
while (password.length < length) {
|
||||
const a = Math.ceil(string.length * Math.random() * Math.random());
|
||||
@ -244,9 +246,7 @@ class PasswordInput extends React.Component {
|
||||
let hold = string.charAt(a);
|
||||
|
||||
if (passwordSettings.upperCase) {
|
||||
hold = (password.length % 2 == 0)
|
||||
? (hold.toUpperCase())
|
||||
: (hold);
|
||||
hold = password.length % 2 == 0 ? hold.toUpperCase() : hold;
|
||||
}
|
||||
|
||||
character += hold;
|
||||
@ -263,33 +263,44 @@ class PasswordInput extends React.Component {
|
||||
}
|
||||
|
||||
password = password
|
||||
.split('')
|
||||
.split("")
|
||||
.sort(() => 0.5 - Math.random())
|
||||
.join('');
|
||||
.join("");
|
||||
|
||||
return password.substr(0, length);
|
||||
}
|
||||
};
|
||||
|
||||
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;
|
||||
|
||||
if (isDisabled || disableCopyAction)
|
||||
return event.preventDefault();
|
||||
if (isDisabled || disableCopyAction) return event.preventDefault();
|
||||
|
||||
this.setState({
|
||||
disableCopyAction: true,
|
||||
copyLabel: clipCopiedResource
|
||||
})
|
||||
});
|
||||
|
||||
const textField = document.createElement('textarea');
|
||||
const textField = document.createElement("textarea");
|
||||
const emailValue = document.getElementsByName(emailInputName)[0].value;
|
||||
const formattedText = clipEmailResource + emailValue + ' | ' + clipPasswordResource + inputValue;
|
||||
const formattedText =
|
||||
clipEmailResource +
|
||||
emailValue +
|
||||
" | " +
|
||||
clipPasswordResource +
|
||||
inputValue;
|
||||
|
||||
textField.innerText = formattedText;
|
||||
document.body.appendChild(textField);
|
||||
textField.select();
|
||||
document.execCommand('copy');
|
||||
document.execCommand("copy");
|
||||
textField.remove();
|
||||
|
||||
onCopyToClipboard && onCopyToClipboard(formattedText);
|
||||
@ -298,9 +309,9 @@ class PasswordInput extends React.Component {
|
||||
this.setState({
|
||||
disableCopyAction: false,
|
||||
copyLabel: clipActionResource
|
||||
})
|
||||
});
|
||||
}, 2000);
|
||||
}
|
||||
};
|
||||
|
||||
shouldComponentUpdate(nextProps, nextState) {
|
||||
return !isEqual(this.props, nextProps) || !isEqual(this.state, nextState);
|
||||
@ -347,86 +358,113 @@ class PasswordInput extends React.Component {
|
||||
disableCopyAction
|
||||
} = this.state;
|
||||
|
||||
const iconsColor = isDisabled ? '#D0D5DA' : '#A3A9AE';
|
||||
const iconName = type === 'password' ? 'EyeOffIcon' : 'EyeIcon';
|
||||
const iconsColor = isDisabled ? "#D0D5DA" : "#A3A9AE";
|
||||
const iconName = type === "password" ? "EyeOffIcon" : "EyeIcon";
|
||||
|
||||
const tooltipContent = (
|
||||
<StyledTooltipContainer forwardedAs='div' title={tooltipPasswordTitle}>
|
||||
<StyledTooltipContainer forwardedAs="div" title={tooltipPasswordTitle}>
|
||||
{tooltipPasswordTitle}
|
||||
<StyledTooltipItem forwardedAs='div' title={tooltipPasswordLength} valid={validLength} >
|
||||
<StyledTooltipItem
|
||||
forwardedAs="div"
|
||||
title={tooltipPasswordLength}
|
||||
valid={validLength}
|
||||
>
|
||||
{tooltipPasswordLength}
|
||||
</StyledTooltipItem>
|
||||
{passwordSettings.digits &&
|
||||
<StyledTooltipItem forwardedAs='div' title={tooltipPasswordDigits} valid={validDigits} >
|
||||
{passwordSettings.digits && (
|
||||
<StyledTooltipItem
|
||||
forwardedAs="div"
|
||||
title={tooltipPasswordDigits}
|
||||
valid={validDigits}
|
||||
>
|
||||
{tooltipPasswordDigits}
|
||||
</StyledTooltipItem>
|
||||
}
|
||||
{passwordSettings.upperCase &&
|
||||
<StyledTooltipItem forwardedAs='div' title={tooltipPasswordCapital} valid={validCapital} >
|
||||
)}
|
||||
{passwordSettings.upperCase && (
|
||||
<StyledTooltipItem
|
||||
forwardedAs="div"
|
||||
title={tooltipPasswordCapital}
|
||||
valid={validCapital}
|
||||
>
|
||||
{tooltipPasswordCapital}
|
||||
</StyledTooltipItem>
|
||||
}
|
||||
{passwordSettings.specSymbols &&
|
||||
<StyledTooltipItem forwardedAs='div' title={tooltipPasswordSpecial} valid={validSpecial} >
|
||||
)}
|
||||
{passwordSettings.specSymbols && (
|
||||
<StyledTooltipItem
|
||||
forwardedAs="div"
|
||||
title={tooltipPasswordSpecial}
|
||||
valid={validSpecial}
|
||||
>
|
||||
{tooltipPasswordSpecial}
|
||||
</StyledTooltipItem>
|
||||
}
|
||||
)}
|
||||
</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} />
|
||||
</>
|
||||
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}>
|
||||
{simpleView
|
||||
? inputGroup
|
||||
: <><PasswordProgress
|
||||
inputWidth={inputWidth}
|
||||
data-for="tooltipContent"
|
||||
data-tip=""
|
||||
data-event="click"
|
||||
ref={this.ref}
|
||||
>
|
||||
{inputGroup}
|
||||
</PasswordProgress>
|
||||
<StyledInput
|
||||
onValidateInput={onValidateInput}
|
||||
className={className}
|
||||
style={style}
|
||||
>
|
||||
{simpleView ? (
|
||||
inputGroup
|
||||
) : (
|
||||
<>
|
||||
<PasswordProgress
|
||||
inputWidth={inputWidth}
|
||||
data-for="tooltipContent"
|
||||
data-tip=""
|
||||
data-event="click"
|
||||
ref={this.ref}
|
||||
>
|
||||
{inputGroup}
|
||||
</PasswordProgress>
|
||||
<NewPasswordButton>
|
||||
<Icons.RefreshIcon
|
||||
size="medium"
|
||||
@ -439,7 +477,7 @@ class PasswordInput extends React.Component {
|
||||
<Link
|
||||
type="action"
|
||||
isHovered={true}
|
||||
fontSize='13px'
|
||||
fontSize="13px"
|
||||
color={iconsColor}
|
||||
isSemitransparent={disableCopyAction}
|
||||
onClick={this.copyToClipboard.bind(this, emailInputName)}
|
||||
@ -448,7 +486,7 @@ class PasswordInput extends React.Component {
|
||||
</Link>
|
||||
</CopyLink>
|
||||
</>
|
||||
}
|
||||
)}
|
||||
</StyledInput>
|
||||
);
|
||||
}
|
||||
@ -457,7 +495,7 @@ class PasswordInput extends React.Component {
|
||||
PasswordInput.propTypes = {
|
||||
id: PropTypes.string,
|
||||
autoComplete: PropTypes.string,
|
||||
inputType: PropTypes.oneOf(['text', 'password']),
|
||||
inputType: PropTypes.oneOf(["text", "password"]),
|
||||
inputName: PropTypes.string,
|
||||
emailInputName: PropTypes.string,
|
||||
inputValue: PropTypes.string,
|
||||
@ -472,7 +510,7 @@ PasswordInput.propTypes = {
|
||||
style: PropTypes.oneOfType([PropTypes.object, PropTypes.array]),
|
||||
|
||||
isDisabled: PropTypes.bool,
|
||||
size: PropTypes.oneOf(['base', 'middle', 'big', 'huge', 'large']),
|
||||
size: PropTypes.oneOf(["base", "middle", "big", "huge", "large"]),
|
||||
scale: PropTypes.bool,
|
||||
|
||||
clipActionResource: PropTypes.string,
|
||||
@ -495,26 +533,26 @@ PasswordInput.propTypes = {
|
||||
tooltipOffsetLeft: PropTypes.number,
|
||||
|
||||
simpleView: PropTypes.bool
|
||||
}
|
||||
};
|
||||
|
||||
PasswordInput.defaultProps = {
|
||||
inputType: 'password',
|
||||
inputName: 'passwordInput',
|
||||
autoComplete: 'new-password',
|
||||
inputType: "password",
|
||||
inputName: "passwordInput",
|
||||
autoComplete: "new-password",
|
||||
|
||||
isDisabled: false,
|
||||
size: 'base',
|
||||
size: "base",
|
||||
scale: true,
|
||||
|
||||
clipEmailResource: 'E-mail ',
|
||||
clipPasswordResource: 'Password ',
|
||||
clipCopiedResource: 'Copied',
|
||||
clipEmailResource: "E-mail ",
|
||||
clipPasswordResource: "Password ",
|
||||
clipCopiedResource: "Copied",
|
||||
|
||||
generatorSpecial: '!@#$%^&*',
|
||||
className: '',
|
||||
generatorSpecial: "!@#$%^&*",
|
||||
className: "",
|
||||
tooltipOffsetLeft: 110,
|
||||
|
||||
simpleView: false
|
||||
}
|
||||
};
|
||||
|
||||
export default PasswordInput;
|
||||
|
||||
Loading…
Reference in New Issue
Block a user