Only enable entropy collection when actually required (steemit#1353)

* Only add the entropy listener when actually required

* Delay <GeneratedPasswordInput key generation slightly, add a translated string

app/components/App.jsx

@@ -18,6 +18,17 @@ import { translate } from '../Translator.js';
 import PageViewsCounter from 'app/components/elements/PageViewsCounter';
 import {serverApiRecordEvent} from 'app/utils/ServerApiClient';
 import {key_utils} from 'steem/lib/auth/ecc';
+import resolveRoute from 'app/ResolveRoute';
+
+const pageRequiresEntropy = (path) => {
+    const {page} = resolveRoute(path);
+    const entropyPages = [
+        "ChangePassword", "RecoverAccountStep1", "RecoverAccountStep2",
+        "UserProfile", "CreateAccount"
+    ];
+    /* Returns true if that page requires the entropy collection listener */
+    return entropyPages.indexOf(page) !== -1
+}
 
 class App extends React.Component {
     constructor(props) {
@@ -26,6 +37,8 @@ class App extends React.Component {
         this.toggleOffCanvasMenu = this.toggleOffCanvasMenu.bind(this);
         this.signUp = this.signUp.bind(this);
         this.learnMore = this.learnMore.bind(this);
+        this.listenerActive = null;
+        this.onEntropyEvent = this.onEntropyEvent.bind(this);
         // this.shouldComponentUpdate = shouldComponentUpdate(this, 'App')
     }
 
@@ -36,6 +49,9 @@ class App extends React.Component {
 
     componentDidMount() {
         // setTimeout(() => this.setState({showCallout: false}), 15000);
+        if (pageRequiresEntropy(this.props.location.pathname)) {
+            this._addEntropyCollector();
+        }
     }
 
     componentWillReceiveProps(nextProps) {
@@ -45,6 +61,29 @@ class App extends React.Component {
         }
     }
 
+    componentWillReceiveProps(np) {
+        /* Add listener if the next page requires entropy and the current page didn't */
+        if (pageRequiresEntropy(np.location.pathname) && !pageRequiresEntropy(this.props.location.pathname)) {
+            this._addEntropyCollector();
+        } else if (!pageRequiresEntropy(np.location.pathname)) { // Remove if next page does not require entropy
+            this._removeEntropyCollector();
+        }
+    }
+
+    _addEntropyCollector() {
+        if (!this.listenerActive && this.refs.App_root) {
+            this.refs.App_root.addEventListener("mousemove", this.onEntropyEvent, {capture: false, passive: true});
+            this.listenerActive = true;
+        }
+    }
+
+    _removeEntropyCollector() {
+        if (this.listenerActive && this.refs.App_root) {
+            this.refs.App_root.removeEventListener("mousemove", this.onEntropyEvent);
+            this.listenerActive = null;
+        }
+    }
+
     shouldComponentUpdate(nextProps, nextState) {
         const p = this.props;
         const n = nextProps;
@@ -167,7 +206,8 @@ class App extends React.Component {
         }
 
         return <div className={'App' + (lp ? ' LP' : '') + (ip ? ' index-page' : '') + (miniHeader ? ' mini-header' : '')}
-                    onMouseMove={this.onEntropyEvent}>
+                    ref="App_root"
+                >
             <SidePanel ref="side_panel" alignment="right">
                 <TopRightMenu vertical navigate={this.navigate} />
                 <ul className="vertical menu">

app/components/elements/GeneratedPasswordInput.jsx

@@ -17,7 +17,7 @@ export default class GeneratedPasswordInput extends React.Component {
     constructor(props) {
         super(props);
         this.state = {
-            generatedPassword: 'P' + key_utils.get_random_key().toWif(),
+            generatedPassword: props.showPasswordString ? 'P' + key_utils.get_random_key().toWif() : null, // Only generate a password if it should be shown already here
             confirmPassword: '',
             confirmPasswordError: '',
             confirmCheckboxes: {box1: false, box2: false},
@@ -26,6 +26,19 @@ export default class GeneratedPasswordInput extends React.Component {
         this.confirmCheckChange = this.confirmCheckChange.bind(this);
     }
 
+    componentWillReceiveProps(np) {
+        /*
+        * By delaying the password generation until the user enters an account
+        * name (making showPasswordString = true), we allow more time for
+        * entropy collection via the App.jsx mousemove event listener
+        */
+        if (!this.state.generatedPassword && np.showPasswordString) {
+            this.setState({
+                generatedPassword: 'P' + key_utils.get_random_key().toWif()
+            });
+        }
+    }
+
     confirmCheckChange(e) {
         const confirmCheckboxes = this.state.confirmCheckboxes;
         confirmCheckboxes[e.target.name] = e.target.checked;
@@ -52,7 +65,7 @@ export default class GeneratedPasswordInput extends React.Component {
                     <label className="uppercase">{translate('generated_password')}<br />
                         <code className="GeneratedPasswordInput__generated_password">{showPasswordString ? generatedPassword : '-'}</code>
                         <div className="GeneratedPasswordInput__backup_text">
-                            {translate('backup_password_by_storing_it')}
+                            {showPasswordString ? translate('backup_password_by_storing_it') : translate('enter_account_show_password')}
                         </div>
                     </label>
                 </div>

app/locales/en.js

@@ -190,6 +190,7 @@ const en = 	{
 	age: 'age',
 	votes: 'votes',
 	backup_password_by_storing_it: 'Back it up by storing in your password manager or a text file',
+	enter_account_show_password: 'Enter a valid account name to show the password',
 	click_to_generate_password: 'Click to generate password',
 	re_enter_generate_password: 'Re-enter Generated Password',
 	understand_that_APP_NAME_cannot_recover_password: 'I understand that ' + APP_NAME + ' cannot recover lost passwords',

app/locales/es.js

@@ -173,6 +173,7 @@ const es = 	{
 	age: 'age',
 	votes: 'votes',
 	backup_password_by_storing_it: 'Back it up by storing in your password manager or a text file',
+	enter_account_show_password: 'Enter a valid account name to show the password',
 	click_to_generate_password: 'Click to generate password',
 	re_enter_generate_password: 'Re-enter Generated Password',
 	understand_that_steemit_cannot_recover_password: 'I understand that Steemit cannot recover lost passwords',

app/locales/es_AR.js

@@ -173,6 +173,7 @@ const es_AR = 	{
 	age: 'nueva',
 	votes: 'votes',
 	backup_password_by_storing_it: 'Asegurá esta contraseña almacenándola en un gestor de contraseñas, en un papel, y/o en un archivo de texto seguro',
+	enter_account_show_password: 'Enter a valid account name to show the password',
 	click_to_generate_password: 'Click para generar contraseña',
 	re_enter_generate_password: 'Re-ingresar constaseña generada',
 	understand_that_steemit_cannot_recover_password: 'Entiendo que Steemit no tiene forma de recuperar mi contraseña perdida',

app/locales/fr.js

@@ -173,6 +173,7 @@ const fr = 	{
 	age: 'nouveau',
 	votes: 'votes',
 	backup_password_by_storing_it: 'Gardez une copie de votre mot de passe dans votre gestionnaire de mot de passe ou dans un fichier texte',
+	enter_account_show_password: 'Enter a valid account name to show the password',
 	click_to_generate_password: 'Cliquez pour génerer un mot de passe',
 	re_enter_generate_password: 'Retaper le Mot de Passe Généré',
 	understand_that_steemit_cannot_recover_password: 'Je comprend que Steemit ne peux pas récuperer un mot de passe perdu',

app/locales/it.js

@@ -173,6 +173,7 @@ const it = 	{
 	age: 'nuovo',
 	votes: 'votes',
 	backup_password_by_storing_it: 'Fai un backup della tua password o scrivila su un foglio di carta',
+	enter_account_show_password: 'Enter a valid account name to show the password',
 	click_to_generate_password: 'Clicca per generare una password',
 	re_enter_generate_password: 'Riscrivi la Password generata',
 	understand_that_steemit_cannot_recover_password: 'Io capisco che Steemit non può recuperare le password smarrite',

app/locales/jp.js

@@ -173,6 +173,7 @@ const jp = 	{
 	age: 'age',
 	votes: 'votes',
 	backup_password_by_storing_it: 'パスワードマネジャーやテキストファイルでパスワードのバックアップを取ろう',
+	enter_account_show_password: 'Enter a valid account name to show the password',
 	click_to_generate_password: 'パスワードを生成する',
 	re_enter_generate_password: '生成されたパスワードで入室する',
 	understand_that_steemit_cannot_recover_password: '私は私が無くしたパスワードをSteemitでは復元できないということに同意します',