Only display the first zxcvbn warning/suggestion

As per comment

Fixes https://github.com/vector-im/riot-web/issues/12150
This commit is contained in:
David Baker 2020-01-31 10:59:35 +00:00
parent 68b2454920
commit 96d5fb5ce3

View file

@ -453,14 +453,19 @@ export default class CreateSecretStorageDialog extends React.PureComponent {
if (this.state.zxcvbnResult.score >= PASSWORD_MIN_SCORE) { if (this.state.zxcvbnResult.score >= PASSWORD_MIN_SCORE) {
helpText = _t("Great! This passphrase looks strong enough."); helpText = _t("Great! This passphrase looks strong enough.");
} else { } else {
const suggestions = []; // We take the warning from zxcvbn or failing that, the first
for (let i = 0; i < this.state.zxcvbnResult.feedback.suggestions.length; ++i) { // suggestion. In practice The first is generally the most relevant
suggestions.push(<div key={i}>{this.state.zxcvbnResult.feedback.suggestions[i]}</div>); // and it's probably better to present the user with one thing to
} // improve about their password than a whole collection - it can
const suggestionBlock = <div>{suggestions.length > 0 ? suggestions : _t("Keep going...")}</div>; // spit out a warning and multiple suggestions which starts getting
// very information-dense.
const suggestion = (
this.state.zxcvbnResult.feedback.warning ||
this.state.zxcvbnResult.feedback.suggestions[0]
);
const suggestionBlock = <div>{suggestion || _t("Keep going...")}</div>;
helpText = <div> helpText = <div>
{this.state.zxcvbnResult.feedback.warning}
{suggestionBlock} {suggestionBlock}
</div>; </div>;
} }