From 7cc46234c185e1c07348810007c01e6aeadf7aa7 Mon Sep 17 00:00:00 2001
From: Kuba Suder <jakub.suder@gmail.com>
Date: Mon, 2 Oct 2017 19:51:39 +0000
Subject: [PATCH] Show a warning if passphrase contains extra whitespace

---
 src/components/passphraseInput/index.js | 28 ++++++++++++++++++++++++-
 1 file changed, 27 insertions(+), 1 deletion(-)

diff --git a/src/components/passphraseInput/index.js b/src/components/passphraseInput/index.js
index 4dd21db0c..27d85a48f 100644
--- a/src/components/passphraseInput/index.js
+++ b/src/components/passphraseInput/index.js
@@ -19,11 +19,18 @@ class PassphraseInput extends React.Component {
 
   handleValueChange(value) {
     let error;
+    let warning;
+
     if (!value) {
       error = 'Required';
     } else if (!isValidPassphrase(value)) {
       error = this.getPassphraseValidationError(value);
+    } else if (this.hasExtraWhitespace(value)) {
+      const warningMessage = this.getPasshraseWhitespaceWarning(value);
+      warning = warningMessage ? `Warning: ${warningMessage}` : null;
     }
+
+    this.setState({ warning });
     this.props.onChange(value, error);
   }
 
@@ -47,6 +54,25 @@ class PassphraseInput extends React.Component {
     return 'Passphrase is not valid';
   }
 
+  // eslint-disable-next-line class-methods-use-this
+  hasExtraWhitespace(passphrase) {
+    const normalizedValue = passphrase.replace(/ +/g, ' ').trim();
+    return normalizedValue !== passphrase;
+  }
+
+  // eslint-disable-next-line class-methods-use-this
+  getPasshraseWhitespaceWarning(passphrase) {
+    if (passphrase.replace(/^\s+/, '') !== passphrase) {
+      return 'Passphrase contains unnecessary whitespace at the beginning';
+    } else if (passphrase.replace(/\s+$/, '') !== passphrase) {
+      return 'Passphrase contains unnecessary whitespace at the end';
+    } else if (passphrase.replace(/\s+/g, ' ') !== passphrase) {
+      return 'Passphrase contains extra whitespace between words';
+    }
+
+    return null;
+  }
+
   toggleInputType() {
     this.setState({ inputType: this.state.inputType === 'password' ? 'text' : 'password' });
   }
@@ -56,7 +82,7 @@ class PassphraseInput extends React.Component {
       <div className={styles.wrapper}>
         <Input label={this.props.label} required={true}
           className={this.props.className}
-          error={this.props.error}
+          error={this.props.error || this.state.warning}
           value={this.props.value || ''}
           type={this.state.inputType}
           theme={this.props.theme}