Add password strength meter to backup creation UI

https://github.com/vector-im/riot-meta/issues/227

package.json

@@ -96,7 +96,8 @@
     "text-encoding-utf-8": "^1.0.1",
     "url": "^0.11.0",
     "velocity-vector": "github:vector-im/velocity#059e3b2",
-    "whatwg-fetch": "^1.1.1"
+    "whatwg-fetch": "^1.1.1",
+    "zxcvbn": "^4.4.2"
   },
   "devDependencies": {
     "babel-cli": "^6.26.0",

res/css/views/dialogs/keybackup/_CreateKeyBackupDialog.scss

@@ -19,8 +19,26 @@ limitations under the License.
     padding: 20px
 }
 
+.mx_CreateKeyBackupDialog_primaryContainer::after {
+    content: "";
+    clear: both;
+    display: block;
+}
+
+.mx_CreateKeyBackupDialog_passPhraseHelp {
+    float: right;
+    width: 230px;
+    height: 85px;
+    margin-left: 20px;
+    font-size: 80%;
+}
+
+.mx_CreateKeyBackupDialog_passPhraseHelp progress {
+    width: 100%;
+}
+
 .mx_CreateKeyBackupDialog_passPhraseInput {
-    width: 300px;
+    width: 250px;
     border: 1px solid $accent-color;
     border-radius: 5px;
     padding: 10px;

src/async-components/views/dialogs/keybackup/CreateKeyBackupDialog.js

@@ -17,6 +17,7 @@ limitations under the License.
 import React from 'react';
 import sdk from '../../../../index';
 import MatrixClientPeg from '../../../../MatrixClientPeg';
+import { scorePassword } from '../../../../utils/PasswordScorer';
 
 import FileSaver from 'file-saver';
 
@@ -30,6 +31,8 @@ const PHASE_BACKINGUP = 4;
 const PHASE_DONE = 5;
 const PHASE_OPTOUT_CONFIRM = 6;
 
+const PASSWORD_MIN_SCORE = 4; // So secure, many characters, much complex, wow, etc, etc.
+
 // XXX: copied from ShareDialog: factor out into utils
 function selectText(target) {
     const range = document.createRange();
@@ -52,6 +55,7 @@ export default React.createClass({
             passPhraseConfirm: '',
             copied: false,
             downloaded: false,
+            zxcvbnResult: null,
         };
     },
 
@@ -173,6 +177,10 @@ export default React.createClass({
     _onPassPhraseChange: function(e) {
         this.setState({
             passPhrase: e.target.value,
+            // precompute this and keep it in state: zxcvbn is fast but
+            // we use it in a couple of different places so so point recomputing
+            // it unnecessarily.
+            zxcvbnResult: scorePassword(e.target.value),
         });
     },
 
@@ -183,17 +191,46 @@ export default React.createClass({
     },
 
     _passPhraseIsValid: function() {
-        return this.state.passPhrase !== '';
+        return this.state.zxcvbnResult && this.state.zxcvbnResult.score >= PASSWORD_MIN_SCORE;
     },
 
     _renderPhasePassPhrase: function() {
         const DialogButtons = sdk.getComponent('views.elements.DialogButtons');
         const AccessibleButton = sdk.getComponent('elements.AccessibleButton');
+
+        let strengthMeter;
+        let helpText;
+        if (this.state.zxcvbnResult) {
+            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 = suggestions.length > 0 ? <div>
+                    {suggestions}
+                </div> : null;
+
+                helpText = <div>
+                    {this.state.zxcvbnResult.feedback.warning}
+                    {suggestionBlock}
+                </div>;
+            }
+            strengthMeter = <div>
+                <progress max={PASSWORD_MIN_SCORE} value={this.state.zxcvbnResult.score} />
+            </div>;
+        }
+
         return <div>
             <p>{_t("Secure your encrypted message history with a Recovery Passphrase.")}</p>
             <p>{_t("You'll need it if you log out or lose access to this device.")}</p>
 
             <div className="mx_CreateKeyBackupDialog_primaryContainer">
+                <div className="mx_CreateKeyBackupDialog_passPhraseHelp">
+                    {strengthMeter}
+                    {helpText}
+                </div>
                 <input type="password"
                     onChange={this._onPassPhraseChange}
                     onKeyPress={this._onPassPhraseKeyPress}

src/i18n/strings/en_EN.json

@@ -82,6 +82,7 @@
     "Failed to invite users to community": "Failed to invite users to community",
     "Failed to invite users to %(groupId)s": "Failed to invite users to %(groupId)s",
     "Failed to add the following rooms to %(groupId)s:": "Failed to add the following rooms to %(groupId)s:",
+    "Error": "Error",
     "Unable to load! Check your network connectivity and try again.": "Unable to load! Check your network connectivity and try again.",
     "Dismiss": "Dismiss",
     "Riot does not have permission to send you notifications - please check your browser settings": "Riot does not have permission to send you notifications - please check your browser settings",
@@ -220,6 +221,31 @@
     "Your browser does not support the required cryptography extensions": "Your browser does not support the required cryptography extensions",
     "Not a valid Riot keyfile": "Not a valid Riot keyfile",
     "Authentication check failed: incorrect password?": "Authentication check failed: incorrect password?",
+    "Use a few words, avoid common phrases": "Use a few words, avoid common phrases",
+    "No need for symbols, digits, or uppercase letters": "No need for symbols, digits, or uppercase letters",
+    "Use a longer keyboard pattern with more turns": "Use a longer keyboard pattern with more turns",
+    "Avoid repeated words and characters": "Avoid repeated words and characters",
+    "Avoid sequences": "Avoid sequences",
+    "Avoid recent years": "Avoid recent years",
+    "Avoid years that are associated with you": "Avoid years that are associated with you",
+    "Avoid dates and years that are associated with you": "Avoid dates and years that are associated with you",
+    "Capitalization doesn't help very much": "Capitalization doesn't help very much",
+    "All-uppercase is almost as easy to guess as all-lowercase": "All-uppercase is almost as easy to guess as all-lowercase",
+    "Reversed words aren't much harder to guess": "Reversed words aren't much harder to guess",
+    "Predictable substitutions like '@' instead of 'a' don't help very much": "Predictable substitutions like '@' instead of 'a' don't help very much",
+    "Add another word or two. Uncommon words are better.": "Add another word or two. Uncommon words are better.",
+    "Repeats like \"aaa\" are easy to guess": "Repeats like \"aaa\" are easy to guess",
+    "Repeats like \"abcabcabc\" are only slightly harder to guess than \"abc\"": "Repeats like \"abcabcabc\" are only slightly harder to guess than \"abc\"",
+    "Sequences like abc or 6543 are easy to guess": "Sequences like abc or 6543 are easy to guess",
+    "Recent years are easy to guess": "Recent years are easy to guess",
+    "Dates are often easy to guess": "Dates are often easy to guess",
+    "This is a top-10 common password": "This is a top-10 common password",
+    "This is a top-100 common password": "This is a top-100 common password",
+    "This is a very common password": "This is a very common password",
+    "This is similar to a commonly used password": "This is similar to a commonly used password",
+    "A word by itself is easy to guess": "A word by itself is easy to guess",
+    "Names and surnames by themselves are easy to guess": "Names and surnames by themselves are easy to guess",
+    "Common names and surnames are easy to guess": "Common names and surnames are easy to guess",
     "Sorry, your homeserver is too old to participate in this room.": "Sorry, your homeserver is too old to participate in this room.",
     "Please contact your homeserver administrator.": "Please contact your homeserver administrator.",
     "Failed to join room": "Failed to join room",
@@ -275,7 +301,6 @@
     "Incoming call from %(name)s": "Incoming call from %(name)s",
     "Decline": "Decline",
     "Accept": "Accept",
-    "Error": "Error",
     "A text message has been sent to +%(msisdn)s. Please enter the verification code it contains": "A text message has been sent to +%(msisdn)s. Please enter the verification code it contains",
     "Incorrect verification code": "Incorrect verification code",
     "Enter Code": "Enter Code",
@@ -973,41 +998,6 @@
     "Room contains unknown devices": "Room contains unknown devices",
     "\"%(RoomName)s\" contains devices that you haven't seen before.": "\"%(RoomName)s\" contains devices that you haven't seen before.",
     "Unknown devices": "Unknown devices",
-    "Secure your encrypted message history with a Recovery Passphrase.": "Secure your encrypted message history with a Recovery Passphrase.",
-    "You'll need it if you log out or lose access to this device.": "You'll need it if you log out or lose access to this device.",
-    "Enter a passphrase...": "Enter a passphrase...",
-    "Next": "Next",
-    "If you don't want encrypted message history to be availble on other devices, <button>opt out</button>.": "If you don't want encrypted message history to be availble on other devices, <button>opt out</button>.",
-    "Or, if you don't want to create a Recovery Passphrase, skip this step and <button>download a recovery key</button>.": "Or, if you don't want to create a Recovery Passphrase, skip this step and <button>download a recovery key</button>.",
-    "That matches!": "That matches!",
-    "That doesn't match.": "That doesn't match.",
-    "Go back to set it again.": "Go back to set it again.",
-    "Type in your Recovery Passphrase to confirm you remember it. If it helps, add it to your password manager or store it somewhere safe.": "Type in your Recovery Passphrase to confirm you remember it. If it helps, add it to your password manager or store it somewhere safe.",
-    "Repeat your passphrase...": "Repeat your passphrase...",
-    "Make a copy of this Recovery Key and keep it safe.": "Make a copy of this Recovery Key and keep it safe.",
-    "As a safety net, you can use it to restore your encrypted message history if you forget your Recovery Passphrase.": "As a safety net, you can use it to restore your encrypted message history if you forget your Recovery Passphrase.",
-    "Your Recovery Key": "Your Recovery Key",
-    "Copy to clipboard": "Copy to clipboard",
-    "Download": "Download",
-    "I've made a copy": "I've made a copy",
-    "Your Recovery Key has been <b>copied to your clipboard</b>, paste it to:": "Your Recovery Key has been <b>copied to your clipboard</b>, paste it to:",
-    "Your Recovery Key is in your <b>Downloads</b> folder.": "Your Recovery Key is in your <b>Downloads</b> folder.",
-    "<b>Print it</b> and store it somewhere safe": "<b>Print it</b> and store it somewhere safe",
-    "<b>Save it</b> on a USB key or backup drive": "<b>Save it</b> on a USB key or backup drive",
-    "<b>Copy it</b> to your personal cloud storage": "<b>Copy it</b> to your personal cloud storage",
-    "Got it": "Got it",
-    "Backup created": "Backup created",
-    "Your encryption keys are now being backed up to your Homeserver.": "Your encryption keys are now being backed up to your Homeserver.",
-    "Without setting up Secure Message Recovery, you won't be able to restore your encrypted message history if you log out or use another device.": "Without setting up Secure Message Recovery, you won't be able to restore your encrypted message history if you log out or use another device.",
-    "Set up Secure Message Recovery": "Set up Secure Message Recovery",
-    "Create a Recovery Passphrase": "Create a Recovery Passphrase",
-    "Confirm Recovery Passphrase": "Confirm Recovery Passphrase",
-    "Recovery Key": "Recovery Key",
-    "Keep it safe": "Keep it safe",
-    "Backing up...": "Backing up...",
-    "Create Key Backup": "Create Key Backup",
-    "Unable to create key backup": "Unable to create key backup",
-    "Retry": "Retry",
     "Unable to load backup status": "Unable to load backup status",
     "Unable to restore backup": "Unable to restore backup",
     "No backup found!": "No backup found!",
@@ -1016,6 +1006,7 @@
     "Restored %(sessionCount)s session keys": "Restored %(sessionCount)s session keys",
     "Enter Recovery Passphrase": "Enter Recovery Passphrase",
     "Access your secure message history and set up secure messaging by entering your recovery passphrase.": "Access your secure message history and set up secure messaging by entering your recovery passphrase.",
+    "Next": "Next",
     "If you've forgotten your recovery passphrase you can <button1>use your recovery key</button1> or <button2>set up new recovery options</button2>": "If you've forgotten your recovery passphrase you can <button1>use your recovery key</button1> or <button2>set up new recovery options</button2>",
     "Enter Recovery Key": "Enter Recovery Key",
     "This looks like a valid recovery key!": "This looks like a valid recovery key!",
@@ -1346,6 +1337,41 @@
     "The export file will be protected with a passphrase. You should enter the passphrase here, to decrypt the file.": "The export file will be protected with a passphrase. You should enter the passphrase here, to decrypt the file.",
     "File to import": "File to import",
     "Import": "Import",
+    "Great! This passphrase looks strong enough.": "Great! This passphrase looks strong enough.",
+    "Secure your encrypted message history with a Recovery Passphrase.": "Secure your encrypted message history with a Recovery Passphrase.",
+    "You'll need it if you log out or lose access to this device.": "You'll need it if you log out or lose access to this device.",
+    "Enter a passphrase...": "Enter a passphrase...",
+    "If you don't want encrypted message history to be availble on other devices, <button>opt out</button>.": "If you don't want encrypted message history to be availble on other devices, <button>opt out</button>.",
+    "Or, if you don't want to create a Recovery Passphrase, skip this step and <button>download a recovery key</button>.": "Or, if you don't want to create a Recovery Passphrase, skip this step and <button>download a recovery key</button>.",
+    "That matches!": "That matches!",
+    "That doesn't match.": "That doesn't match.",
+    "Go back to set it again.": "Go back to set it again.",
+    "Type in your Recovery Passphrase to confirm you remember it. If it helps, add it to your password manager or store it somewhere safe.": "Type in your Recovery Passphrase to confirm you remember it. If it helps, add it to your password manager or store it somewhere safe.",
+    "Repeat your passphrase...": "Repeat your passphrase...",
+    "Make a copy of this Recovery Key and keep it safe.": "Make a copy of this Recovery Key and keep it safe.",
+    "As a safety net, you can use it to restore your encrypted message history if you forget your Recovery Passphrase.": "As a safety net, you can use it to restore your encrypted message history if you forget your Recovery Passphrase.",
+    "Your Recovery Key": "Your Recovery Key",
+    "Copy to clipboard": "Copy to clipboard",
+    "Download": "Download",
+    "I've made a copy": "I've made a copy",
+    "Your Recovery Key has been <b>copied to your clipboard</b>, paste it to:": "Your Recovery Key has been <b>copied to your clipboard</b>, paste it to:",
+    "Your Recovery Key is in your <b>Downloads</b> folder.": "Your Recovery Key is in your <b>Downloads</b> folder.",
+    "<b>Print it</b> and store it somewhere safe": "<b>Print it</b> and store it somewhere safe",
+    "<b>Save it</b> on a USB key or backup drive": "<b>Save it</b> on a USB key or backup drive",
+    "<b>Copy it</b> to your personal cloud storage": "<b>Copy it</b> to your personal cloud storage",
+    "Got it": "Got it",
+    "Backup created": "Backup created",
+    "Your encryption keys are now being backed up to your Homeserver.": "Your encryption keys are now being backed up to your Homeserver.",
+    "Without setting up Secure Message Recovery, you won't be able to restore your encrypted message history if you log out or use another device.": "Without setting up Secure Message Recovery, you won't be able to restore your encrypted message history if you log out or use another device.",
+    "Set up Secure Message Recovery": "Set up Secure Message Recovery",
+    "Create a Recovery Passphrase": "Create a Recovery Passphrase",
+    "Confirm Recovery Passphrase": "Confirm Recovery Passphrase",
+    "Recovery Key": "Recovery Key",
+    "Keep it safe": "Keep it safe",
+    "Backing up...": "Backing up...",
+    "Create Key Backup": "Create Key Backup",
+    "Unable to create key backup": "Unable to create key backup",
+    "Retry": "Retry",
     "Failed to set direct chat tag": "Failed to set direct chat tag",
     "Failed to remove tag %(tagName)s from room": "Failed to remove tag %(tagName)s from room",
     "Failed to add tag %(tagName)s to room": "Failed to add tag %(tagName)s to room"

src/utils/PasswordScorer.js

@@ -0,0 +1,84 @@
+/*
+Copyright 2018 New Vector Ltd
+
+Licensed under the Apache License, Version 2.0 (the "License");
+you may not use this file except in compliance with the License.
+You may obtain a copy of the License at
+
+    http://www.apache.org/licenses/LICENSE-2.0
+
+Unless required by applicable law or agreed to in writing, software
+distributed under the License is distributed on an "AS IS" BASIS,
+WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+See the License for the specific language governing permissions and
+limitations under the License.
+*/
+
+import Zxcvbn from 'zxcvbn';
+
+import MatrixClientPeg from '../MatrixClientPeg';
+import { _t, _td } from '../languageHandler';
+
+const ZXCVBN_USER_INPUTS = [
+    'riot',
+    'matrix',
+];
+
+// Translations for zxcvbn's suggestion strings
+_td("Use a few words, avoid common phrases");
+_td("No need for symbols, digits, or uppercase letters");
+_td("Use a longer keyboard pattern with more turns");
+_td("Avoid repeated words and characters");
+_td("Avoid sequences");
+_td("Avoid recent years");
+_td("Avoid years that are associated with you");
+_td("Avoid dates and years that are associated with you");
+_td("Capitalization doesn't help very much");
+_td("All-uppercase is almost as easy to guess as all-lowercase");
+_td("Reversed words aren't much harder to guess");
+_td("Predictable substitutions like '@' instead of 'a' don't help very much");
+_td("Add another word or two. Uncommon words are better.");
+
+// and warnings
+_td("Repeats like \"aaa\" are easy to guess");
+_td("Repeats like \"abcabcabc\" are only slightly harder to guess than \"abc\"");
+_td("Sequences like abc or 6543 are easy to guess");
+_td("Recent years are easy to guess");
+_td("Dates are often easy to guess");
+_td("This is a top-10 common password");
+_td("This is a top-100 common password");
+_td("This is a very common password");
+_td("This is similar to a commonly used password");
+_td("A word by itself is easy to guess");
+_td("Names and surnames by themselves are easy to guess");
+_td("Common names and surnames are easy to guess");
+
+/**
+ * Wrapper around zxcvbn password strength estimation
+ * Include this only from async components: it pulls in zxcvbn
+ * (obviously) which is large.
+ */
+export function scorePassword(password) {
+    if (password.length === 0) return null;
+
+    const userInputs = ZXCVBN_USER_INPUTS.slice();
+    userInputs.push(MatrixClientPeg.get().getUserIdLocalpart());
+
+    let zxcvbnResult = Zxcvbn(password, userInputs);
+    // Work around https://github.com/dropbox/zxcvbn/issues/216
+    if (password.includes(' ')) {
+        const resultNoSpaces = Zxcvbn(password.replace(/ /g, ''), userInputs);
+        if (resultNoSpaces.score < zxcvbnResult.score) zxcvbnResult = resultNoSpaces;
+    }
+
+    for (let i = 0; i < zxcvbnResult.feedback.suggestions.length; ++i) {
+        // translate suggestions
+        zxcvbnResult.feedback.suggestions[i] = _t(zxcvbnResult.feedback.suggestions[i]);
+    }
+    // and warning, if any
+    if (zxcvbnResult.feedback.warning) {
+        zxcvbnResult.feedback.warning = _t(zxcvbnResult.feedback.warning);
+    }
+
+    return zxcvbnResult;
+}