diff --git a/res/css/_components.scss b/res/css/_components.scss
index b871045fa1..0faf971786 100644
--- a/res/css/_components.scss
+++ b/res/css/_components.scss
@@ -121,7 +121,6 @@
@import "./views/elements/_Tooltip.scss";
@import "./views/elements/_TooltipButton.scss";
@import "./views/elements/_Validation.scss";
-@import "./views/elements/_ZxcvbnProgressBar.scss";
@import "./views/emojipicker/_EmojiPicker.scss";
@import "./views/globals/_MatrixToolbar.scss";
@import "./views/groups/_GroupPublicityToggle.scss";
diff --git a/res/css/views/dialogs/keybackup/_CreateKeyBackupDialog.scss b/res/css/views/dialogs/keybackup/_CreateKeyBackupDialog.scss
index b9babd05f5..9be98e25b2 100644
--- a/res/css/views/dialogs/keybackup/_CreateKeyBackupDialog.scss
+++ b/res/css/views/dialogs/keybackup/_CreateKeyBackupDialog.scss
@@ -35,17 +35,6 @@ limitations under the License.
align-items: flex-start;
}
-.mx_CreateKeyBackupDialog_passPhraseHelp {
- flex: 1;
- height: 85px;
- margin-left: 20px;
- font-size: 80%;
-}
-
-.mx_CreateKeyBackupDialog_passPhraseHelp progress {
- width: 100%;
-}
-
.mx_CreateKeyBackupDialog_passPhraseInput {
flex: none;
width: 250px;
diff --git a/src/async-components/views/dialogs/keybackup/CreateKeyBackupDialog.js b/src/async-components/views/dialogs/keybackup/CreateKeyBackupDialog.js
index df2a81263d..532b2f960f 100644
--- a/src/async-components/views/dialogs/keybackup/CreateKeyBackupDialog.js
+++ b/src/async-components/views/dialogs/keybackup/CreateKeyBackupDialog.js
@@ -15,18 +15,17 @@ See the License for the specific language governing permissions and
limitations under the License.
*/
-import React from 'react';
+import React, {createRef} from 'react';
import FileSaver from 'file-saver';
import * as sdk from '../../../../index';
import {MatrixClientPeg} from '../../../../MatrixClientPeg';
import PropTypes from 'prop-types';
-import { scorePassword } from '../../../../utils/PasswordScorer';
-import { _t } from '../../../../languageHandler';
+import {_t, _td} from '../../../../languageHandler';
import { accessSecretStorage } from '../../../../CrossSigningManager';
import SettingsStore from '../../../../settings/SettingsStore';
import AccessibleButton from "../../../../components/views/elements/AccessibleButton";
import {copyNode} from "../../../../utils/strings";
-import ZxcvbnProgressBar from "../../../../components/views/elements/ZxcvbnProgressBar";
+import PassphraseField from "../../../../components/views/auth/PassphraseField";
const PHASE_PASSPHRASE = 0;
const PHASE_PASSPHRASE_CONFIRM = 1;
@@ -37,7 +36,6 @@ const PHASE_DONE = 5;
const PHASE_OPTOUT_CONFIRM = 6;
const PASSWORD_MIN_SCORE = 4; // So secure, many characters, much complex, wow, etc, etc.
-const PASSPHRASE_FEEDBACK_DELAY = 500; // How long after keystroke to offer passphrase feedback, ms.
/*
* Walks the user through the process of creating an e2e key backup
@@ -53,17 +51,18 @@ export default class CreateKeyBackupDialog extends React.PureComponent {
this._recoveryKeyNode = null;
this._keyBackupInfo = null;
- this._setZxcvbnResultTimeout = null;
this.state = {
secureSecretStorage: null,
phase: PHASE_PASSPHRASE,
passPhrase: '',
+ passPhraseValid: false,
passPhraseConfirm: '',
copied: false,
downloaded: false,
- zxcvbnResult: null,
};
+
+ this._passphraseField = createRef();
}
async componentDidMount() {
@@ -82,12 +81,6 @@ export default class CreateKeyBackupDialog extends React.PureComponent {
}
}
- componentWillUnmount() {
- if (this._setZxcvbnResultTimeout !== null) {
- clearTimeout(this._setZxcvbnResultTimeout);
- }
- }
-
_collectRecoveryKeyNode = (n) => {
this._recoveryKeyNode = n;
}
@@ -181,22 +174,16 @@ export default class CreateKeyBackupDialog extends React.PureComponent {
_onPassPhraseNextClick = async (e) => {
e.preventDefault();
+ if (!this._passphraseField.current) return; // unmounting
- // If we're waiting for the timeout before updating the result at this point,
- // skip ahead and do it now, otherwise we'll deny the attempt to proceed
- // even if the user entered a valid passphrase
- if (this._setZxcvbnResultTimeout !== null) {
- clearTimeout(this._setZxcvbnResultTimeout);
- this._setZxcvbnResultTimeout = null;
- await new Promise((resolve) => {
- this.setState({
- zxcvbnResult: scorePassword(this.state.passPhrase),
- }, resolve);
- });
- }
- if (this._passPhraseIsValid()) {
- this.setState({phase: PHASE_PASSPHRASE_CONFIRM});
+ await this._passphraseField.current.validate({ allowEmpty: false });
+ if (!this._passphraseField.current.state.valid) {
+ this._passphraseField.current.focus();
+ this._passphraseField.current.validate({ allowEmpty: false, focused: true });
+ return;
}
+
+ this.setState({phase: PHASE_PASSPHRASE_CONFIRM});
};
_onPassPhraseConfirmNextClick = async (e) => {
@@ -215,9 +202,9 @@ export default class CreateKeyBackupDialog extends React.PureComponent {
_onSetAgainClick = () => {
this.setState({
passPhrase: '',
+ passPhraseValid: false,
passPhraseConfirm: '',
phase: PHASE_PASSPHRASE,
- zxcvbnResult: null,
});
}
@@ -227,23 +214,16 @@ export default class CreateKeyBackupDialog extends React.PureComponent {
});
}
+ _onPassPhraseValidate = (result) => {
+ this.setState({
+ passPhraseValid: result.valid,
+ });
+ };
+
_onPassPhraseChange = (e) => {
this.setState({
passPhrase: e.target.value,
});
-
- if (this._setZxcvbnResultTimeout !== null) {
- clearTimeout(this._setZxcvbnResultTimeout);
- }
- this._setZxcvbnResultTimeout = setTimeout(() => {
- this._setZxcvbnResultTimeout = null;
- this.setState({
- // precompute this and keep it in state: zxcvbn is fast but
- // we use it in a couple of different places so no point recomputing
- // it unnecessarily.
- zxcvbnResult: scorePassword(this.state.passPhrase),
- });
- }, PASSPHRASE_FEEDBACK_DELAY);
}
_onPassPhraseConfirmChange = (e) => {
@@ -252,35 +232,9 @@ export default class CreateKeyBackupDialog extends React.PureComponent {
});
}
- _passPhraseIsValid() {
- return this.state.zxcvbnResult && this.state.zxcvbnResult.score >= PASSWORD_MIN_SCORE;
- }
-
_renderPhasePassPhrase() {
const DialogButtons = sdk.getComponent('views.elements.DialogButtons');
- let strengthMeter;
- let helpText;
- if (this.state.zxcvbnResult) {
- if (this.state.zxcvbnResult.score >= PASSWORD_MIN_SCORE) {
- helpText = _t("Great! This recovery passphrase looks strong enough.");
- } else {
- const suggestions = [];
- for (let i = 0; i < this.state.zxcvbnResult.feedback.suggestions.length; ++i) {
- suggestions.push({this.state.zxcvbnResult.feedback.suggestions[i]}
);
- }
- const suggestionBlock = {suggestions.length > 0 ? suggestions : _t("Keep going...")}
;
-
- helpText =
- {this.state.zxcvbnResult.feedback.warning}
- {suggestionBlock}
-
;
- }
- strengthMeter =
-
-
;
- }
-
return