2020-07-21 12:02:32 +00:00
|
|
|
|
import React from "react";
|
|
|
|
|
import PropTypes from "prop-types";
|
2020-12-08 11:09:46 +00:00
|
|
|
|
import equal from "fast-deep-equal/react";
|
2019-09-05 07:20:12 +00:00
|
|
|
|
|
2020-07-21 12:02:32 +00:00
|
|
|
|
import InputBlock from "../input-block";
|
2021-02-15 09:10:20 +00:00
|
|
|
|
import { RefreshIcon } from "./svg";
|
2020-07-21 12:02:32 +00:00
|
|
|
|
import Link from "../link";
|
|
|
|
|
import Text from "../text";
|
2019-10-14 06:10:22 +00:00
|
|
|
|
import Tooltip from "../tooltip";
|
2021-02-25 21:19:45 +00:00
|
|
|
|
import Base from "../themes/base";
|
2021-02-15 09:10:20 +00:00
|
|
|
|
import {
|
|
|
|
|
Progress,
|
|
|
|
|
CopyLink,
|
|
|
|
|
NewPasswordButton,
|
|
|
|
|
PasswordProgress,
|
|
|
|
|
StyledInput,
|
2021-03-03 11:09:52 +00:00
|
|
|
|
TooltipStyle,
|
|
|
|
|
StyledTooltipContainer,
|
|
|
|
|
StyledTooltipItem,
|
2021-02-15 09:10:20 +00:00
|
|
|
|
} from "./styled-password-input";
|
2019-09-05 07:20:12 +00:00
|
|
|
|
|
2019-09-12 10:58:17 +00:00
|
|
|
|
class PasswordInput extends React.Component {
|
2019-09-05 07:20:12 +00:00
|
|
|
|
constructor(props) {
|
|
|
|
|
super(props);
|
|
|
|
|
|
2019-10-24 10:42:32 +00:00
|
|
|
|
const { inputValue, inputType, clipActionResource, emailInputName } = props;
|
2019-09-12 10:58:17 +00:00
|
|
|
|
|
2019-10-23 08:31:36 +00:00
|
|
|
|
this.ref = React.createRef();
|
|
|
|
|
this.refTooltip = React.createRef();
|
|
|
|
|
|
2019-09-05 07:20:12 +00:00
|
|
|
|
this.state = {
|
2019-09-12 10:58:17 +00:00
|
|
|
|
type: inputType,
|
2020-07-21 12:02:32 +00:00
|
|
|
|
progressColor: "transparent",
|
2019-09-05 07:20:12 +00:00
|
|
|
|
progressWidth: 0,
|
2019-09-12 10:58:17 +00:00
|
|
|
|
inputValue: inputValue,
|
2019-10-24 10:42:32 +00:00
|
|
|
|
copyLabel: clipActionResource,
|
|
|
|
|
disableCopyAction: emailInputName ? false : true,
|
2019-09-05 07:20:12 +00:00
|
|
|
|
displayTooltip: false,
|
|
|
|
|
validLength: false,
|
|
|
|
|
validDigits: false,
|
|
|
|
|
validCapital: false,
|
2020-10-16 13:16:01 +00:00
|
|
|
|
validSpecial: false,
|
2020-07-21 12:02:32 +00:00
|
|
|
|
};
|
2019-09-05 07:20:12 +00:00
|
|
|
|
}
|
|
|
|
|
|
2021-03-03 11:09:52 +00:00
|
|
|
|
hideTooltip = () => {
|
|
|
|
|
this.hideTooltip && this.refTooltip.current.hideTooltip();
|
|
|
|
|
};
|
|
|
|
|
|
2021-03-05 14:41:55 +00:00
|
|
|
|
onBlur = (e) => {
|
2021-03-10 07:57:42 +00:00
|
|
|
|
e.persist();
|
2021-03-03 11:09:52 +00:00
|
|
|
|
this.hideTooltip();
|
2021-03-05 14:41:55 +00:00
|
|
|
|
if (this.props.onBlur) this.props.onBlur(e);
|
|
|
|
|
};
|
|
|
|
|
|
|
|
|
|
onKeyDown = (e) => {
|
2021-03-10 07:57:42 +00:00
|
|
|
|
e.persist();
|
2021-03-05 14:41:55 +00:00
|
|
|
|
if (this.props.onKeyDown) this.props.onKeyDown(e);
|
2020-07-21 12:02:32 +00:00
|
|
|
|
};
|
2019-09-05 07:20:12 +00:00
|
|
|
|
|
|
|
|
|
changeInputType = () => {
|
2021-03-03 11:09:52 +00:00
|
|
|
|
this.hideTooltip();
|
2020-07-21 12:02:32 +00:00
|
|
|
|
const newType = this.state.type === "text" ? "password" : "text";
|
2019-09-05 07:20:12 +00:00
|
|
|
|
|
2020-07-21 12:02:32 +00:00
|
|
|
|
this.setState({
|
2020-10-16 13:16:01 +00:00
|
|
|
|
type: newType,
|
2020-07-21 12:02:32 +00:00
|
|
|
|
});
|
|
|
|
|
};
|
2019-09-05 07:20:12 +00:00
|
|
|
|
|
2020-10-16 13:16:01 +00:00
|
|
|
|
testStrength = (value) => {
|
2019-09-05 07:20:12 +00:00
|
|
|
|
const { generatorSpecial, passwordSettings } = this.props;
|
2020-07-21 12:02:32 +00:00
|
|
|
|
const specSymbols = new RegExp("[" + generatorSpecial + "]");
|
2019-09-05 07:20:12 +00:00
|
|
|
|
|
|
|
|
|
let capital;
|
|
|
|
|
let digits;
|
|
|
|
|
let special;
|
|
|
|
|
|
|
|
|
|
passwordSettings.upperCase
|
2020-07-21 12:02:32 +00:00
|
|
|
|
? (capital = /[A-Z]/.test(value))
|
|
|
|
|
: (capital = true);
|
2019-09-05 07:20:12 +00:00
|
|
|
|
|
2020-07-21 12:02:32 +00:00
|
|
|
|
passwordSettings.digits ? (digits = /\d/.test(value)) : (digits = true);
|
2019-09-05 07:20:12 +00:00
|
|
|
|
|
|
|
|
|
passwordSettings.specSymbols
|
2020-07-21 12:02:32 +00:00
|
|
|
|
? (special = specSymbols.test(value))
|
|
|
|
|
: (special = true);
|
2019-09-05 07:20:12 +00:00
|
|
|
|
|
|
|
|
|
return {
|
|
|
|
|
digits: digits,
|
|
|
|
|
capital: capital,
|
|
|
|
|
special: special,
|
2020-10-16 13:16:01 +00:00
|
|
|
|
length: value.trim().length >= passwordSettings.minLength,
|
2019-09-05 07:20:12 +00:00
|
|
|
|
};
|
2020-07-21 12:02:32 +00:00
|
|
|
|
};
|
2019-09-05 07:20:12 +00:00
|
|
|
|
|
2020-10-16 13:16:01 +00:00
|
|
|
|
checkPassword = (value) => {
|
2020-07-21 12:02:32 +00:00
|
|
|
|
const greenColor = "#44bb00";
|
|
|
|
|
const redColor = "#B40404";
|
2019-09-05 07:20:12 +00:00
|
|
|
|
const passwordValidation = this.testStrength(value);
|
2020-07-21 12:02:32 +00:00
|
|
|
|
const progressScore =
|
|
|
|
|
passwordValidation.digits &&
|
|
|
|
|
passwordValidation.capital &&
|
|
|
|
|
passwordValidation.special &&
|
|
|
|
|
passwordValidation.length;
|
|
|
|
|
const progressWidth =
|
|
|
|
|
(value.trim().length * 100) / this.props.passwordSettings.minLength;
|
2019-09-05 07:20:12 +00:00
|
|
|
|
const progressColor = progressScore
|
|
|
|
|
? greenColor
|
2020-07-21 12:02:32 +00:00
|
|
|
|
: value.length === 0
|
|
|
|
|
? "transparent"
|
|
|
|
|
: redColor;
|
2019-09-05 07:20:12 +00:00
|
|
|
|
|
2021-02-24 17:11:23 +00:00
|
|
|
|
this.props.onValidateInput &&
|
|
|
|
|
this.props.onValidateInput(progressScore, passwordValidation);
|
2019-09-06 12:06:51 +00:00
|
|
|
|
|
2019-09-05 07:20:12 +00:00
|
|
|
|
this.setState({
|
|
|
|
|
progressColor: progressColor,
|
|
|
|
|
progressWidth: progressWidth > 100 ? 100 : progressWidth,
|
|
|
|
|
inputValue: value,
|
|
|
|
|
validLength: passwordValidation.length,
|
|
|
|
|
validDigits: passwordValidation.digits,
|
|
|
|
|
validCapital: passwordValidation.capital,
|
2020-10-16 13:16:01 +00:00
|
|
|
|
validSpecial: passwordValidation.special,
|
2019-09-05 07:20:12 +00:00
|
|
|
|
});
|
2020-07-21 12:02:32 +00:00
|
|
|
|
};
|
2019-09-05 07:20:12 +00:00
|
|
|
|
|
2020-10-16 13:16:01 +00:00
|
|
|
|
onChangeAction = (e) => {
|
2019-09-05 07:20:12 +00:00
|
|
|
|
this.props.onChange && this.props.onChange(e);
|
2020-07-16 07:30:30 +00:00
|
|
|
|
|
|
|
|
|
if (this.props.simpleView) {
|
2020-07-21 12:02:32 +00:00
|
|
|
|
this.setState({
|
2020-10-16 13:16:01 +00:00
|
|
|
|
inputValue: e.target.value,
|
2020-07-21 12:02:32 +00:00
|
|
|
|
});
|
2020-07-16 07:30:30 +00:00
|
|
|
|
return;
|
|
|
|
|
}
|
|
|
|
|
|
2019-09-05 07:20:12 +00:00
|
|
|
|
this.checkPassword(e.target.value);
|
2020-07-21 12:02:32 +00:00
|
|
|
|
};
|
2019-09-05 07:20:12 +00:00
|
|
|
|
|
2020-10-16 13:16:01 +00:00
|
|
|
|
onGeneratePassword = (e) => {
|
2020-07-21 12:02:32 +00:00
|
|
|
|
if (this.props.isDisabled) return e.preventDefault();
|
2019-09-05 07:20:12 +00:00
|
|
|
|
|
|
|
|
|
const newPassword = this.getNewPassword();
|
2019-12-03 12:30:41 +00:00
|
|
|
|
|
2020-07-21 12:02:32 +00:00
|
|
|
|
if (this.state.type !== "text") {
|
2019-10-23 10:18:49 +00:00
|
|
|
|
this.setState({
|
2020-10-16 13:16:01 +00:00
|
|
|
|
type: "text",
|
2019-10-23 10:18:49 +00:00
|
|
|
|
});
|
|
|
|
|
}
|
2019-10-23 10:41:19 +00:00
|
|
|
|
|
2019-09-05 07:20:12 +00:00
|
|
|
|
this.checkPassword(newPassword);
|
2020-07-21 12:02:32 +00:00
|
|
|
|
this.props.onChange &&
|
|
|
|
|
this.props.onChange({ target: { value: newPassword } });
|
|
|
|
|
};
|
2019-09-05 07:20:12 +00:00
|
|
|
|
|
|
|
|
|
getNewPassword = () => {
|
|
|
|
|
const { passwordSettings, generatorSpecial } = this.props;
|
|
|
|
|
|
|
|
|
|
const length = passwordSettings.minLength;
|
2020-07-21 12:02:32 +00:00
|
|
|
|
const string = "abcdefghijklmnopqrstuvwxyz";
|
|
|
|
|
const numeric = "0123456789";
|
2019-09-05 07:20:12 +00:00
|
|
|
|
const special = generatorSpecial;
|
|
|
|
|
|
2020-07-21 12:02:32 +00:00
|
|
|
|
let password = "";
|
|
|
|
|
let character = "";
|
2019-09-05 07:20:12 +00:00
|
|
|
|
|
|
|
|
|
while (password.length < length) {
|
|
|
|
|
const a = Math.ceil(string.length * Math.random() * Math.random());
|
|
|
|
|
const b = Math.ceil(numeric.length * Math.random() * Math.random());
|
|
|
|
|
const c = Math.ceil(special.length * Math.random() * Math.random());
|
|
|
|
|
|
|
|
|
|
let hold = string.charAt(a);
|
|
|
|
|
|
|
|
|
|
if (passwordSettings.upperCase) {
|
2020-07-21 12:02:32 +00:00
|
|
|
|
hold = password.length % 2 == 0 ? hold.toUpperCase() : hold;
|
2019-09-05 07:20:12 +00:00
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
character += hold;
|
2019-09-06 12:06:51 +00:00
|
|
|
|
|
2019-09-05 07:20:12 +00:00
|
|
|
|
if (passwordSettings.digits) {
|
|
|
|
|
character += numeric.charAt(b);
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
if (passwordSettings.specSymbols) {
|
|
|
|
|
character += special.charAt(c);
|
|
|
|
|
}
|
2019-09-06 12:06:51 +00:00
|
|
|
|
|
2019-09-05 07:20:12 +00:00
|
|
|
|
password = character;
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
password = password
|
2020-07-21 12:02:32 +00:00
|
|
|
|
.split("")
|
2019-09-05 07:20:12 +00:00
|
|
|
|
.sort(() => 0.5 - Math.random())
|
2020-07-21 12:02:32 +00:00
|
|
|
|
.join("");
|
2019-09-05 07:20:12 +00:00
|
|
|
|
|
|
|
|
|
return password.substr(0, length);
|
2020-07-21 12:02:32 +00:00
|
|
|
|
};
|
2019-09-05 07:20:12 +00:00
|
|
|
|
|
2020-10-16 13:16:01 +00:00
|
|
|
|
copyToClipboard = (emailInputName) => {
|
2020-07-21 12:02:32 +00:00
|
|
|
|
const {
|
|
|
|
|
clipEmailResource,
|
|
|
|
|
clipPasswordResource,
|
|
|
|
|
clipActionResource,
|
|
|
|
|
clipCopiedResource,
|
|
|
|
|
isDisabled,
|
2020-10-16 13:16:01 +00:00
|
|
|
|
onCopyToClipboard,
|
2020-07-21 12:02:32 +00:00
|
|
|
|
} = this.props;
|
2019-10-24 10:42:32 +00:00
|
|
|
|
const { disableCopyAction, inputValue } = this.state;
|
2019-09-05 07:20:12 +00:00
|
|
|
|
|
2020-07-21 12:02:32 +00:00
|
|
|
|
if (isDisabled || disableCopyAction) return event.preventDefault();
|
2019-09-05 07:20:12 +00:00
|
|
|
|
|
2019-10-24 10:42:32 +00:00
|
|
|
|
this.setState({
|
|
|
|
|
disableCopyAction: true,
|
2020-10-16 13:16:01 +00:00
|
|
|
|
copyLabel: clipCopiedResource,
|
2020-07-21 12:02:32 +00:00
|
|
|
|
});
|
2019-10-24 10:42:32 +00:00
|
|
|
|
|
2020-07-21 12:02:32 +00:00
|
|
|
|
const textField = document.createElement("textarea");
|
2019-09-05 07:20:12 +00:00
|
|
|
|
const emailValue = document.getElementsByName(emailInputName)[0].value;
|
2020-07-21 12:02:32 +00:00
|
|
|
|
const formattedText =
|
|
|
|
|
clipEmailResource +
|
|
|
|
|
emailValue +
|
|
|
|
|
" | " +
|
|
|
|
|
clipPasswordResource +
|
|
|
|
|
inputValue;
|
2019-09-05 07:20:12 +00:00
|
|
|
|
|
2019-09-06 12:06:51 +00:00
|
|
|
|
textField.innerText = formattedText;
|
2019-09-05 07:20:12 +00:00
|
|
|
|
document.body.appendChild(textField);
|
|
|
|
|
textField.select();
|
2020-07-21 12:02:32 +00:00
|
|
|
|
document.execCommand("copy");
|
2019-09-05 07:20:12 +00:00
|
|
|
|
textField.remove();
|
2019-09-06 12:06:51 +00:00
|
|
|
|
|
|
|
|
|
onCopyToClipboard && onCopyToClipboard(formattedText);
|
2019-10-24 10:42:32 +00:00
|
|
|
|
|
|
|
|
|
setTimeout(() => {
|
|
|
|
|
this.setState({
|
|
|
|
|
disableCopyAction: false,
|
2020-10-16 13:16:01 +00:00
|
|
|
|
copyLabel: clipActionResource,
|
2020-07-21 12:02:32 +00:00
|
|
|
|
});
|
2019-10-24 10:42:32 +00:00
|
|
|
|
}, 2000);
|
2020-07-21 12:02:32 +00:00
|
|
|
|
};
|
2019-09-05 07:20:12 +00:00
|
|
|
|
|
2019-09-17 12:14:26 +00:00
|
|
|
|
shouldComponentUpdate(nextProps, nextState) {
|
2020-12-08 11:09:46 +00:00
|
|
|
|
return !equal(this.props, nextProps) || !equal(this.state, nextState);
|
2019-09-12 10:58:17 +00:00
|
|
|
|
}
|
|
|
|
|
|
2021-04-07 11:41:46 +00:00
|
|
|
|
componentDidUpdate(prevProps, prevState) {
|
|
|
|
|
if (
|
|
|
|
|
prevProps.clipActionResource !== this.props.clipActionResource &&
|
|
|
|
|
this.state.copyLabel !== this.props.clipCopiedResource
|
|
|
|
|
) {
|
|
|
|
|
this.setState({ copyLabel: this.props.clipActionResource });
|
|
|
|
|
}
|
|
|
|
|
}
|
|
|
|
|
|
2021-03-03 11:09:52 +00:00
|
|
|
|
renderTextTooltip = (settings, length, digits, capital, special) => {
|
|
|
|
|
return (
|
|
|
|
|
<>
|
|
|
|
|
<div className="break"></div>
|
|
|
|
|
<Text
|
|
|
|
|
className="text-tooltip"
|
|
|
|
|
fontSize="10px"
|
|
|
|
|
color="#A3A9AE"
|
|
|
|
|
as="span"
|
|
|
|
|
>
|
|
|
|
|
{settings.minLength ? length : null}{" "}
|
|
|
|
|
{settings.digits ? `, ${digits}` : null}{" "}
|
|
|
|
|
{settings.upperCase ? `, ${capital}` : null}{" "}
|
|
|
|
|
{settings.specSymbols ? `, ${special}` : null}
|
|
|
|
|
</Text>
|
|
|
|
|
<div className="break"></div>
|
|
|
|
|
</>
|
|
|
|
|
);
|
|
|
|
|
};
|
2021-02-03 11:51:10 +00:00
|
|
|
|
|
|
|
|
|
renderTextTooltip = () => {
|
|
|
|
|
const {
|
|
|
|
|
tooltipPasswordLength,
|
|
|
|
|
tooltipPasswordDigits,
|
|
|
|
|
tooltipPasswordCapital,
|
|
|
|
|
tooltipPasswordSpecial,
|
|
|
|
|
passwordSettings,
|
|
|
|
|
isTextTooltipVisible,
|
|
|
|
|
} = this.props;
|
|
|
|
|
return isTextTooltipVisible ? (
|
2020-07-22 10:16:50 +00:00
|
|
|
|
<>
|
2020-10-16 13:16:01 +00:00
|
|
|
|
<div className="break"></div>
|
|
|
|
|
<Text
|
|
|
|
|
className="text-tooltip"
|
|
|
|
|
fontSize="10px"
|
|
|
|
|
color="#A3A9AE"
|
|
|
|
|
as="span"
|
|
|
|
|
>
|
2021-02-03 11:51:10 +00:00
|
|
|
|
{passwordSettings.minLength ? tooltipPasswordLength : null}{" "}
|
|
|
|
|
{passwordSettings.digits ? `, ${tooltipPasswordDigits}` : null}{" "}
|
|
|
|
|
{passwordSettings.upperCase ? `, ${tooltipPasswordCapital}` : null}{" "}
|
|
|
|
|
{passwordSettings.specSymbols ? `, ${tooltipPasswordSpecial}` : null}
|
2020-10-16 13:16:01 +00:00
|
|
|
|
</Text>
|
|
|
|
|
<div className="break"></div>
|
2020-07-22 10:16:50 +00:00
|
|
|
|
</>
|
2021-02-03 11:51:10 +00:00
|
|
|
|
) : null;
|
2020-10-16 13:16:01 +00:00
|
|
|
|
};
|
2020-07-22 08:26:42 +00:00
|
|
|
|
|
2021-03-03 11:09:52 +00:00
|
|
|
|
renderTooltipContent = () =>
|
|
|
|
|
!this.props.isDisableTooltip && !this.props.isDisabled ? (
|
|
|
|
|
<StyledTooltipContainer
|
|
|
|
|
forwardedAs="div"
|
|
|
|
|
title={this.props.tooltipPasswordTitle}
|
|
|
|
|
>
|
|
|
|
|
{this.props.tooltipPasswordTitle}
|
|
|
|
|
<StyledTooltipItem
|
|
|
|
|
forwardedAs="div"
|
|
|
|
|
title={this.props.tooltipPasswordLength}
|
|
|
|
|
valid={this.validLength}
|
|
|
|
|
>
|
|
|
|
|
{this.props.tooltipPasswordLength}
|
|
|
|
|
</StyledTooltipItem>
|
|
|
|
|
{this.props.passwordSettings.digits && (
|
|
|
|
|
<StyledTooltipItem
|
|
|
|
|
forwardedAs="div"
|
|
|
|
|
title={this.props.tooltipPasswordDigits}
|
|
|
|
|
valid={this.validDigits}
|
|
|
|
|
>
|
|
|
|
|
{this.props.tooltipPasswordDigits}
|
|
|
|
|
</StyledTooltipItem>
|
|
|
|
|
)}
|
|
|
|
|
{this.props.passwordSettings.upperCase && (
|
|
|
|
|
<StyledTooltipItem
|
|
|
|
|
forwardedAs="div"
|
|
|
|
|
title={this.props.tooltipPasswordCapital}
|
|
|
|
|
valid={this.validCapital}
|
|
|
|
|
>
|
|
|
|
|
{this.props.tooltipPasswordCapital}
|
|
|
|
|
</StyledTooltipItem>
|
|
|
|
|
)}
|
|
|
|
|
{this.props.passwordSettings.specSymbols && (
|
|
|
|
|
<StyledTooltipItem
|
|
|
|
|
forwardedAs="div"
|
|
|
|
|
title={this.props.tooltipPasswordSpecial}
|
|
|
|
|
valid={this.validSpecial}
|
|
|
|
|
>
|
|
|
|
|
{this.props.tooltipPasswordSpecial}
|
|
|
|
|
</StyledTooltipItem>
|
|
|
|
|
)}
|
|
|
|
|
</StyledTooltipContainer>
|
|
|
|
|
) : null;
|
2021-02-03 11:51:10 +00:00
|
|
|
|
|
|
|
|
|
renderInputGroup = () => {
|
2019-09-05 07:20:12 +00:00
|
|
|
|
const {
|
|
|
|
|
inputName,
|
|
|
|
|
isDisabled,
|
|
|
|
|
scale,
|
|
|
|
|
size,
|
2019-09-05 12:30:25 +00:00
|
|
|
|
hasError,
|
|
|
|
|
hasWarning,
|
|
|
|
|
placeholder,
|
|
|
|
|
tabIndex,
|
2019-09-06 12:06:51 +00:00
|
|
|
|
maxLength,
|
2021-02-03 11:51:10 +00:00
|
|
|
|
theme,
|
2019-09-17 12:14:26 +00:00
|
|
|
|
id,
|
|
|
|
|
autoComplete,
|
2019-09-05 07:20:12 +00:00
|
|
|
|
} = this.props;
|
|
|
|
|
|
2021-02-03 11:51:10 +00:00
|
|
|
|
const { type, progressColor, progressWidth, inputValue } = this.state;
|
2021-02-24 17:11:23 +00:00
|
|
|
|
const iconName =
|
|
|
|
|
type === "password"
|
2021-03-01 09:29:59 +00:00
|
|
|
|
? "/static/images/eye.off.react.svg"
|
|
|
|
|
: "/static/images/eye.react.svg";
|
2019-09-05 07:20:12 +00:00
|
|
|
|
|
2021-02-03 11:51:10 +00:00
|
|
|
|
return (
|
2020-07-21 12:02:32 +00:00
|
|
|
|
<>
|
|
|
|
|
<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}
|
|
|
|
|
iconSize={16}
|
|
|
|
|
hoverColor={"#A3A9AE"}
|
|
|
|
|
isIconFill={true}
|
|
|
|
|
onBlur={this.onBlur}
|
2021-03-05 14:41:55 +00:00
|
|
|
|
onKeyDown={this.onKeyDown}
|
2020-07-21 12:02:32 +00:00
|
|
|
|
hasWarning={hasWarning}
|
|
|
|
|
placeholder={placeholder}
|
|
|
|
|
tabIndex={tabIndex}
|
|
|
|
|
maxLength={maxLength}
|
|
|
|
|
autoComplete={autoComplete}
|
2021-02-03 11:51:10 +00:00
|
|
|
|
theme={theme}
|
2020-07-21 12:02:32 +00:00
|
|
|
|
></InputBlock>
|
2021-03-03 11:09:52 +00:00
|
|
|
|
<TooltipStyle>
|
|
|
|
|
<Tooltip
|
|
|
|
|
id="tooltipContent"
|
|
|
|
|
effect="solid"
|
|
|
|
|
place="top"
|
|
|
|
|
offsetLeft={this.tooltipOffsetLeft}
|
|
|
|
|
reference={this.refTooltip}
|
|
|
|
|
>
|
|
|
|
|
{this.renderTooltipContent()}
|
|
|
|
|
</Tooltip>
|
|
|
|
|
</TooltipStyle>
|
2020-07-21 12:02:32 +00:00
|
|
|
|
<Progress
|
|
|
|
|
progressColor={progressColor}
|
|
|
|
|
progressWidth={progressWidth}
|
|
|
|
|
isDisabled={isDisabled}
|
|
|
|
|
/>
|
|
|
|
|
</>
|
|
|
|
|
);
|
2021-02-03 11:51:10 +00:00
|
|
|
|
};
|
|
|
|
|
render() {
|
|
|
|
|
//console.log('PasswordInput render()');
|
|
|
|
|
const {
|
|
|
|
|
emailInputName,
|
|
|
|
|
inputWidth,
|
|
|
|
|
onValidateInput,
|
|
|
|
|
className,
|
|
|
|
|
style,
|
|
|
|
|
simpleView,
|
|
|
|
|
hideNewPasswordButton,
|
2021-02-15 09:10:20 +00:00
|
|
|
|
isDisabled,
|
2021-05-05 12:48:19 +00:00
|
|
|
|
showCopyLink,
|
2021-02-03 11:51:10 +00:00
|
|
|
|
} = this.props;
|
2021-04-07 11:41:46 +00:00
|
|
|
|
|
2021-05-12 21:00:55 +00:00
|
|
|
|
const { copyLabel, disableCopyAction, type } = this.state;
|
2020-07-16 07:30:30 +00:00
|
|
|
|
|
2019-09-05 07:20:12 +00:00
|
|
|
|
return (
|
2020-07-21 12:02:32 +00:00
|
|
|
|
<StyledInput
|
|
|
|
|
onValidateInput={onValidateInput}
|
|
|
|
|
className={className}
|
|
|
|
|
style={style}
|
|
|
|
|
>
|
|
|
|
|
{simpleView ? (
|
2020-07-29 06:59:39 +00:00
|
|
|
|
<>
|
2021-02-03 11:51:10 +00:00
|
|
|
|
{this.renderInputGroup()}
|
|
|
|
|
{this.renderTextTooltip()}
|
2020-07-29 06:59:39 +00:00
|
|
|
|
</>
|
2020-07-21 12:02:32 +00:00
|
|
|
|
) : (
|
|
|
|
|
<>
|
2020-11-26 09:25:42 +00:00
|
|
|
|
<div className="password-field-wrapper">
|
|
|
|
|
<PasswordProgress
|
|
|
|
|
inputWidth={inputWidth}
|
|
|
|
|
data-for="tooltipContent"
|
|
|
|
|
data-tip=""
|
|
|
|
|
data-event="click"
|
|
|
|
|
ref={this.ref}
|
2021-02-15 09:10:20 +00:00
|
|
|
|
isDisabled={isDisabled}
|
2020-11-26 09:25:42 +00:00
|
|
|
|
>
|
2021-02-03 11:51:10 +00:00
|
|
|
|
{this.renderInputGroup()}
|
2020-11-26 09:25:42 +00:00
|
|
|
|
</PasswordProgress>
|
|
|
|
|
{!hideNewPasswordButton ? (
|
2021-11-25 09:11:22 +00:00
|
|
|
|
<NewPasswordButton
|
|
|
|
|
className="password-input_refresh"
|
|
|
|
|
isDisabled={isDisabled}
|
|
|
|
|
>
|
2021-02-15 09:10:20 +00:00
|
|
|
|
<RefreshIcon
|
2020-11-26 09:25:42 +00:00
|
|
|
|
size="medium"
|
|
|
|
|
onClick={this.onGeneratePassword}
|
|
|
|
|
/>
|
|
|
|
|
</NewPasswordButton>
|
|
|
|
|
) : null}
|
|
|
|
|
</div>
|
2021-02-03 11:51:10 +00:00
|
|
|
|
{this.renderTextTooltip()}
|
2021-05-05 12:48:19 +00:00
|
|
|
|
{showCopyLink && (
|
|
|
|
|
<CopyLink>
|
|
|
|
|
<Link
|
|
|
|
|
type="action"
|
|
|
|
|
isHovered={true}
|
|
|
|
|
fontSize="13px"
|
|
|
|
|
className="password-input_link"
|
|
|
|
|
isSemitransparent={disableCopyAction}
|
|
|
|
|
onClick={this.copyToClipboard.bind(this, emailInputName)}
|
|
|
|
|
>
|
|
|
|
|
{copyLabel}
|
|
|
|
|
</Link>
|
|
|
|
|
</CopyLink>
|
|
|
|
|
)}
|
2020-07-16 07:30:30 +00:00
|
|
|
|
</>
|
2020-07-21 12:02:32 +00:00
|
|
|
|
)}
|
2019-09-05 07:20:12 +00:00
|
|
|
|
</StyledInput>
|
|
|
|
|
);
|
2019-09-09 14:34:48 +00:00
|
|
|
|
}
|
|
|
|
|
}
|
2019-09-05 07:20:12 +00:00
|
|
|
|
|
|
|
|
|
PasswordInput.propTypes = {
|
2021-03-10 07:57:42 +00:00
|
|
|
|
/** Allows you to set the component id */
|
2019-10-23 10:41:19 +00:00
|
|
|
|
id: PropTypes.string,
|
2021-03-10 07:57:42 +00:00
|
|
|
|
/** Allows you to set the component auto-complete */
|
2019-10-23 10:41:19 +00:00
|
|
|
|
autoComplete: PropTypes.string,
|
2021-03-10 07:57:42 +00:00
|
|
|
|
/** It is necessary for correct display of values inside input */
|
2020-07-21 12:02:32 +00:00
|
|
|
|
inputType: PropTypes.oneOf(["text", "password"]),
|
2021-03-10 07:57:42 +00:00
|
|
|
|
/** Input name */
|
2019-09-05 07:20:12 +00:00
|
|
|
|
inputName: PropTypes.string,
|
2021-03-10 07:57:42 +00:00
|
|
|
|
/** Required to associate password field with email field */
|
2020-07-20 12:39:46 +00:00
|
|
|
|
emailInputName: PropTypes.string,
|
2021-03-10 07:57:42 +00:00
|
|
|
|
/** Input value */
|
2019-09-05 07:20:12 +00:00
|
|
|
|
inputValue: PropTypes.string,
|
2021-03-10 07:57:42 +00:00
|
|
|
|
/** Will be triggered whenever an PasswordInput typing */
|
2019-09-05 07:20:12 +00:00
|
|
|
|
onChange: PropTypes.func,
|
2021-03-05 14:41:55 +00:00
|
|
|
|
onKeyDown: PropTypes.func,
|
|
|
|
|
onBlur: PropTypes.func,
|
2021-03-10 07:57:42 +00:00
|
|
|
|
/** If you need to set input width manually */
|
2019-09-09 14:34:48 +00:00
|
|
|
|
inputWidth: PropTypes.string,
|
|
|
|
|
hasError: PropTypes.bool,
|
|
|
|
|
hasWarning: PropTypes.bool,
|
|
|
|
|
placeholder: PropTypes.string,
|
|
|
|
|
tabIndex: PropTypes.number,
|
|
|
|
|
maxLength: PropTypes.number,
|
2021-03-10 07:57:42 +00:00
|
|
|
|
/** Accepts class */
|
2019-09-17 12:14:26 +00:00
|
|
|
|
className: PropTypes.string,
|
2021-03-10 07:57:42 +00:00
|
|
|
|
/** Accepts css style */
|
2019-12-03 12:30:41 +00:00
|
|
|
|
style: PropTypes.oneOfType([PropTypes.object, PropTypes.array]),
|
2021-03-10 07:57:42 +00:00
|
|
|
|
/** Set input disabled */
|
2019-09-05 07:20:12 +00:00
|
|
|
|
isDisabled: PropTypes.bool,
|
2020-07-21 12:02:32 +00:00
|
|
|
|
size: PropTypes.oneOf(["base", "middle", "big", "huge", "large"]),
|
2019-09-05 07:20:12 +00:00
|
|
|
|
scale: PropTypes.bool,
|
2021-03-10 07:57:42 +00:00
|
|
|
|
/** Allows to hide NewPasswordButton */
|
2020-07-22 06:20:20 +00:00
|
|
|
|
hideNewPasswordButton: PropTypes.bool,
|
2021-03-10 07:57:42 +00:00
|
|
|
|
/** Allows to hide Tooltip */
|
2020-07-22 07:10:21 +00:00
|
|
|
|
isDisableTooltip: PropTypes.bool,
|
2021-03-10 07:57:42 +00:00
|
|
|
|
/** Allows to show text Tooltip */
|
2020-07-22 08:26:42 +00:00
|
|
|
|
isTextTooltipVisible: PropTypes.bool,
|
2021-03-10 07:57:42 +00:00
|
|
|
|
/** Translation of text for copying email data and password */
|
2019-09-05 07:20:12 +00:00
|
|
|
|
clipActionResource: PropTypes.string,
|
2021-03-10 07:57:42 +00:00
|
|
|
|
/** Text translation email to copy */
|
2019-09-05 07:20:12 +00:00
|
|
|
|
clipEmailResource: PropTypes.string,
|
2021-03-10 07:57:42 +00:00
|
|
|
|
/** Text translation password to copy */
|
2019-09-05 07:20:12 +00:00
|
|
|
|
clipPasswordResource: PropTypes.string,
|
2021-03-10 07:57:42 +00:00
|
|
|
|
/** Text translation copy action to copy */
|
2019-10-24 10:42:32 +00:00
|
|
|
|
clipCopiedResource: PropTypes.string,
|
2021-03-10 07:57:42 +00:00
|
|
|
|
/** Text translation tooltip */
|
2019-09-05 07:20:12 +00:00
|
|
|
|
tooltipPasswordTitle: PropTypes.string,
|
2021-03-10 07:57:42 +00:00
|
|
|
|
/** Password text translation is long tooltip */
|
2019-09-05 07:20:12 +00:00
|
|
|
|
tooltipPasswordLength: PropTypes.string,
|
2021-03-10 07:57:42 +00:00
|
|
|
|
/** Digit text translation tooltip */
|
2019-09-05 07:20:12 +00:00
|
|
|
|
tooltipPasswordDigits: PropTypes.string,
|
2021-03-10 07:57:42 +00:00
|
|
|
|
/** Capital text translation tooltip */
|
2019-09-05 07:20:12 +00:00
|
|
|
|
tooltipPasswordCapital: PropTypes.string,
|
2021-03-10 07:57:42 +00:00
|
|
|
|
/** Special text translation tooltip */
|
2019-09-05 07:20:12 +00:00
|
|
|
|
tooltipPasswordSpecial: PropTypes.string,
|
2021-03-10 07:57:42 +00:00
|
|
|
|
/** Set of special characters for password generator and validator */
|
2019-09-05 07:20:12 +00:00
|
|
|
|
generatorSpecial: PropTypes.string,
|
2020-07-09 11:12:53 +00:00
|
|
|
|
NewPasswordButtonVisible: PropTypes.bool,
|
2021-03-10 07:57:42 +00:00
|
|
|
|
/** Set of settings for password generator and validator */
|
2021-06-02 09:04:26 +00:00
|
|
|
|
passwordSettings: PropTypes.object,
|
2021-03-10 07:57:42 +00:00
|
|
|
|
/** Will be triggered whenever an PasswordInput typing, return bool value */
|
2019-09-06 12:06:51 +00:00
|
|
|
|
onValidateInput: PropTypes.func,
|
2021-03-10 07:57:42 +00:00
|
|
|
|
/** Will be triggered if you press copy button, return formatted value */
|
2019-10-23 08:31:36 +00:00
|
|
|
|
onCopyToClipboard: PropTypes.func,
|
|
|
|
|
|
2020-07-16 07:30:30 +00:00
|
|
|
|
tooltipOffsetLeft: PropTypes.number,
|
2021-03-10 07:57:42 +00:00
|
|
|
|
/** Set simple view of password input (without tooltips, password progress bar and several additional buttons (copy and generate password) */
|
2020-10-16 13:16:01 +00:00
|
|
|
|
simpleView: PropTypes.bool,
|
2021-05-05 12:48:19 +00:00
|
|
|
|
/** Sets the link to copy the password visible */
|
|
|
|
|
showCopyLink: PropTypes.bool,
|
2020-07-21 12:02:32 +00:00
|
|
|
|
};
|
2019-09-05 07:20:12 +00:00
|
|
|
|
|
|
|
|
|
PasswordInput.defaultProps = {
|
2020-07-21 12:02:32 +00:00
|
|
|
|
inputType: "password",
|
|
|
|
|
inputName: "passwordInput",
|
|
|
|
|
autoComplete: "new-password",
|
2021-02-03 11:51:10 +00:00
|
|
|
|
theme: Base,
|
2019-09-06 12:06:51 +00:00
|
|
|
|
isDisabled: false,
|
2020-07-21 12:02:32 +00:00
|
|
|
|
size: "base",
|
2019-09-05 07:20:12 +00:00
|
|
|
|
scale: true,
|
|
|
|
|
|
2020-07-22 06:20:20 +00:00
|
|
|
|
hideNewPasswordButton: false,
|
2020-07-22 07:10:21 +00:00
|
|
|
|
isDisableTooltip: false,
|
2020-07-22 08:26:42 +00:00
|
|
|
|
isTextTooltipVisible: false,
|
2019-09-05 07:20:12 +00:00
|
|
|
|
|
2020-07-21 12:02:32 +00:00
|
|
|
|
clipEmailResource: "E-mail ",
|
|
|
|
|
clipPasswordResource: "Password ",
|
|
|
|
|
clipCopiedResource: "Copied",
|
2019-09-05 07:20:12 +00:00
|
|
|
|
|
2020-07-21 12:02:32 +00:00
|
|
|
|
generatorSpecial: "!@#$%^&*",
|
|
|
|
|
className: "",
|
2020-07-16 07:30:30 +00:00
|
|
|
|
tooltipOffsetLeft: 110,
|
|
|
|
|
|
2020-10-16 13:16:01 +00:00
|
|
|
|
simpleView: false,
|
2020-11-26 09:25:42 +00:00
|
|
|
|
passwordSettings: {
|
|
|
|
|
minLength: 8,
|
|
|
|
|
upperCase: false,
|
|
|
|
|
digits: false,
|
|
|
|
|
specSymbols: false,
|
|
|
|
|
},
|
2021-05-05 12:48:19 +00:00
|
|
|
|
showCopyLink: true,
|
2020-07-21 12:02:32 +00:00
|
|
|
|
};
|
2019-09-05 07:20:12 +00:00
|
|
|
|
|
2020-10-16 13:16:01 +00:00
|
|
|
|
export default PasswordInput;
|