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:
commit
d192f50953
@ -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);
|
||||||
}
|
}
|
||||||
|
@ -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",
|
||||||
|
@ -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;
|
||||||
|
@ -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;
|
||||||
|
Loading…
Reference in New Issue
Block a user