From 96d5fb5ce322fd9a0a323a797fd22f196ea3b623 Mon Sep 17 00:00:00 2001
From: David Baker <dave@matrix.org>
Date: Fri, 31 Jan 2020 10:59:35 +0000
Subject: [PATCH] Only display the first zxcvbn warning/suggestion

As per comment

Fixes https://github.com/vector-im/riot-web/issues/12150
---
 .../secretstorage/CreateSecretStorageDialog.js  | 17 +++++++++++------
 1 file changed, 11 insertions(+), 6 deletions(-)

diff --git a/src/async-components/views/dialogs/secretstorage/CreateSecretStorageDialog.js b/src/async-components/views/dialogs/secretstorage/CreateSecretStorageDialog.js
index 64aff467a7..4f0db1eebe 100644
--- a/src/async-components/views/dialogs/secretstorage/CreateSecretStorageDialog.js
+++ b/src/async-components/views/dialogs/secretstorage/CreateSecretStorageDialog.js
@@ -453,14 +453,19 @@ export default class CreateSecretStorageDialog extends React.PureComponent {
             if (this.state.zxcvbnResult.score >= PASSWORD_MIN_SCORE) {
                 helpText = _t("Great! This passphrase looks strong enough.");
             } else {
-                const suggestions = [];
-                for (let i = 0; i < this.state.zxcvbnResult.feedback.suggestions.length; ++i) {
-                    suggestions.push(<div key={i}>{this.state.zxcvbnResult.feedback.suggestions[i]}</div>);
-                }
-                const suggestionBlock = <div>{suggestions.length > 0 ? suggestions : _t("Keep going...")}</div>;
+                // We take the warning from zxcvbn or failing that, the first
+                // suggestion. In practice The first is generally the most relevant
+                // and it's probably better to present the user with one thing to
+                // improve about their password than a whole collection - it can
+                // 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>
-                    {this.state.zxcvbnResult.feedback.warning}
                     {suggestionBlock}
                 </div>;
             }