2017-12-28 19:54:07 +00:00
|
|
|
import React, { Component } from 'react';
|
2018-02-02 06:01:30 +00:00
|
|
|
import zxcvbn, { ZXCVBNResult } from 'zxcvbn';
|
2018-01-26 22:11:52 +00:00
|
|
|
import translate, { translateRaw } from 'translations';
|
2018-01-20 20:06:28 +00:00
|
|
|
import { MINIMUM_PASSWORD_LENGTH } from 'config';
|
2018-02-02 06:01:30 +00:00
|
|
|
import { Spinner } from 'components/ui';
|
2017-12-28 19:54:07 +00:00
|
|
|
import Template from '../Template';
|
2018-01-26 22:11:52 +00:00
|
|
|
import './EnterPassword.scss';
|
2018-03-01 17:53:29 +00:00
|
|
|
import { TogglablePassword } from 'components';
|
2017-12-28 19:54:07 +00:00
|
|
|
|
|
|
|
interface Props {
|
2018-02-02 06:01:30 +00:00
|
|
|
isGenerating: boolean;
|
2017-12-28 19:54:07 +00:00
|
|
|
continue(pw: string): void;
|
|
|
|
}
|
|
|
|
|
|
|
|
interface State {
|
|
|
|
password: string;
|
2018-02-02 06:01:30 +00:00
|
|
|
confirmedPassword: string;
|
|
|
|
passwordValidation: ZXCVBNResult | null;
|
|
|
|
feedback: string;
|
2017-12-28 19:54:07 +00:00
|
|
|
}
|
|
|
|
export default class EnterPassword extends Component<Props, State> {
|
2018-02-02 06:01:30 +00:00
|
|
|
public state: State = {
|
2017-12-28 19:54:07 +00:00
|
|
|
password: '',
|
2018-02-02 06:01:30 +00:00
|
|
|
confirmedPassword: '',
|
|
|
|
passwordValidation: null,
|
|
|
|
feedback: ''
|
2017-12-28 19:54:07 +00:00
|
|
|
};
|
|
|
|
|
|
|
|
public render() {
|
2018-02-02 06:01:30 +00:00
|
|
|
const { isGenerating } = this.props;
|
|
|
|
const { password, confirmedPassword, feedback } = this.state;
|
|
|
|
const passwordValidity = this.getPasswordValidity();
|
|
|
|
const isPasswordValid = passwordValidity === 'valid';
|
|
|
|
const isConfirmValid = confirmedPassword ? password === confirmedPassword : undefined;
|
|
|
|
const canSubmit = isPasswordValid && isConfirmValid && !isGenerating;
|
2017-12-28 19:54:07 +00:00
|
|
|
return (
|
|
|
|
<Template>
|
2018-02-02 06:01:30 +00:00
|
|
|
<form className="EnterPw" onSubmit={canSubmit ? this.handleSubmit : undefined}>
|
2017-12-28 19:54:07 +00:00
|
|
|
<h1 className="EnterPw-title" aria-live="polite">
|
2018-03-22 03:50:25 +00:00
|
|
|
{translate('GENERATE_KEYSTORE_TITLE')}
|
2017-12-28 19:54:07 +00:00
|
|
|
</h1>
|
|
|
|
|
2018-03-01 17:53:29 +00:00
|
|
|
<div className="input-group-wrapper EnterPw-password">
|
|
|
|
<label className="input-group">
|
2018-03-22 03:50:25 +00:00
|
|
|
<div className="input-group-header">{translate('INPUT_PASSWORD_LABEL')}</div>
|
2018-03-01 17:53:29 +00:00
|
|
|
<TogglablePassword
|
2018-03-22 03:50:25 +00:00
|
|
|
isValid={isPasswordValid && password.length > 0}
|
2018-03-01 17:53:29 +00:00
|
|
|
value={password}
|
2018-03-22 03:50:25 +00:00
|
|
|
placeholder={translateRaw('INPUT_PASSWORD_PLACEHOLDER', {
|
|
|
|
$pass_length: MINIMUM_PASSWORD_LENGTH.toString()
|
|
|
|
})}
|
2018-03-01 17:53:29 +00:00
|
|
|
onChange={this.onPasswordChange}
|
|
|
|
onBlur={this.showFeedback}
|
|
|
|
/>
|
|
|
|
{!isPasswordValid &&
|
|
|
|
feedback && (
|
|
|
|
<p className={`EnterPw-password-feedback help-block is-${passwordValidity}`}>
|
|
|
|
{feedback}
|
|
|
|
</p>
|
|
|
|
)}
|
|
|
|
</label>
|
|
|
|
</div>
|
2018-02-02 06:01:30 +00:00
|
|
|
|
2018-03-01 17:53:29 +00:00
|
|
|
<div className="input-group-wrapper EnterPw-password">
|
|
|
|
<label className="input-group">
|
2018-03-22 03:50:25 +00:00
|
|
|
<div className="input-group-header">{translate('INPUT_CONFIRM_PASSWORD_LABEL')}</div>
|
2018-03-01 17:53:29 +00:00
|
|
|
<TogglablePassword
|
2018-03-22 03:50:25 +00:00
|
|
|
isValid={isConfirmValid && password.length > 0}
|
2018-03-01 17:53:29 +00:00
|
|
|
value={confirmedPassword}
|
2018-03-22 03:50:25 +00:00
|
|
|
placeholder={translateRaw('GEN_PLACEHOLDER_1')}
|
2018-03-01 17:53:29 +00:00
|
|
|
onChange={this.onConfirmChange}
|
|
|
|
/>
|
|
|
|
</label>
|
|
|
|
</div>
|
2017-12-28 19:54:07 +00:00
|
|
|
|
2018-02-02 06:01:30 +00:00
|
|
|
<button disabled={!canSubmit} className="EnterPw-submit btn btn-primary btn-lg btn-block">
|
2018-03-22 03:50:25 +00:00
|
|
|
{isGenerating ? <Spinner light={true} /> : translate('NAV_GENERATEWALLET')}
|
2017-12-28 19:54:07 +00:00
|
|
|
</button>
|
|
|
|
|
2018-03-22 03:50:25 +00:00
|
|
|
<p className="EnterPw-warning">{translate('X_PASSWORDDESC')}</p>
|
2018-02-02 06:01:30 +00:00
|
|
|
</form>
|
2017-12-28 19:54:07 +00:00
|
|
|
</Template>
|
|
|
|
);
|
|
|
|
}
|
2018-02-02 06:01:30 +00:00
|
|
|
|
|
|
|
private getPasswordValidity(): 'valid' | 'invalid' | 'semivalid' | undefined {
|
|
|
|
const { password, passwordValidation } = this.state;
|
|
|
|
|
|
|
|
if (!password) {
|
|
|
|
return undefined;
|
|
|
|
}
|
|
|
|
|
|
|
|
if (password.length < MINIMUM_PASSWORD_LENGTH) {
|
|
|
|
return 'invalid';
|
|
|
|
}
|
|
|
|
|
|
|
|
if (passwordValidation && passwordValidation.score < 3) {
|
|
|
|
return 'semivalid';
|
|
|
|
}
|
|
|
|
|
|
|
|
return 'valid';
|
|
|
|
}
|
|
|
|
|
|
|
|
private getFeedback() {
|
2018-03-22 03:50:25 +00:00
|
|
|
let feedback: string = '';
|
2018-02-02 06:01:30 +00:00
|
|
|
const validity = this.getPasswordValidity();
|
|
|
|
|
|
|
|
if (validity !== 'valid') {
|
|
|
|
const { password, passwordValidation } = this.state;
|
|
|
|
|
|
|
|
if (password.length < MINIMUM_PASSWORD_LENGTH) {
|
2018-03-22 03:50:25 +00:00
|
|
|
feedback = translateRaw('INPUT_PASSWORD_PLACEHOLDER', {
|
|
|
|
$pass_length: MINIMUM_PASSWORD_LENGTH.toString()
|
|
|
|
});
|
2018-02-02 06:01:30 +00:00
|
|
|
} else if (passwordValidation && passwordValidation.feedback) {
|
2018-03-22 03:50:25 +00:00
|
|
|
feedback = translateRaw('WEAK_PASSWORD') + ' ' + passwordValidation.feedback.warning;
|
2018-02-02 06:01:30 +00:00
|
|
|
} else {
|
2018-03-22 03:50:25 +00:00
|
|
|
feedback = translateRaw('INVALID_PASSWORD');
|
2018-02-02 06:01:30 +00:00
|
|
|
}
|
|
|
|
}
|
|
|
|
|
|
|
|
return feedback;
|
|
|
|
}
|
|
|
|
|
|
|
|
private handleSubmit = (ev: React.FormEvent<HTMLFormElement>) => {
|
|
|
|
ev.preventDefault();
|
2017-12-28 19:54:07 +00:00
|
|
|
this.props.continue(this.state.password);
|
|
|
|
};
|
|
|
|
|
2018-02-02 06:01:30 +00:00
|
|
|
private onPasswordChange = (e: React.FormEvent<HTMLInputElement>) => {
|
|
|
|
const password = e.currentTarget.value;
|
|
|
|
const passwordValidation = password ? zxcvbn(password) : null;
|
|
|
|
|
|
|
|
this.setState(
|
|
|
|
{
|
|
|
|
password,
|
|
|
|
passwordValidation,
|
|
|
|
feedback: ''
|
|
|
|
},
|
|
|
|
() => {
|
|
|
|
if (password.length >= MINIMUM_PASSWORD_LENGTH) {
|
|
|
|
this.showFeedback();
|
|
|
|
}
|
|
|
|
}
|
|
|
|
);
|
|
|
|
};
|
|
|
|
|
|
|
|
private onConfirmChange = (e: React.FormEvent<HTMLInputElement>) => {
|
|
|
|
this.setState({ confirmedPassword: e.currentTarget.value });
|
|
|
|
};
|
|
|
|
|
|
|
|
private showFeedback = () => {
|
|
|
|
const { password, passwordValidation } = this.state;
|
|
|
|
if (!password) {
|
|
|
|
return;
|
|
|
|
}
|
|
|
|
|
|
|
|
const feedback = this.getFeedback();
|
|
|
|
this.setState({ passwordValidation, feedback });
|
2017-12-28 19:54:07 +00:00
|
|
|
};
|
|
|
|
}
|