[#923] Add email validation error on backup account page

We added a library to do the validation and we are calling the email validation
when the field changes the value.

with @FrailWords

3 files changed, 64 insertions, 28 deletions

diff --git a/web-ui/package.json b/web-ui/package.json
index 613613c4..81901c55 100644
--- a/web-ui/package.json
+++ b/web-ui/package.json
@@ -75,6 +75,7 @@
     "typeahead.js": "^0.11.1",
     "url-loader": "^0.5.7",
     "utf8": "^2.1.2",
+    "validator": "^7.0.0",
     "watch": "0.19.1",
     "webpack": "^1.14.0"
   },
diff --git a/web-ui/src/backup_account/page.js b/web-ui/src/backup_account/page.js
index cc93a560..1feb7546 100644
--- a/web-ui/src/backup_account/page.js
+++ b/web-ui/src/backup_account/page.js
@@ -22,40 +22,61 @@ import SubmitButton from 'src/common/submit_button/submit_button';
 import InputField from 'src/common/input_field/input_field';
 import Footer from 'src/common/footer/footer';
 import Header from 'src/common/header/header';
+import validator from 'validator';
 
 import 'font-awesome/scss/font-awesome.scss';
 import './page.scss';
 
-export const Page = ({ t }) => (
-  <DocumentTitle title={t('backup-account.page-title')}>
-    <div className='page'>
-      <Header />
-      <section>
-        <div className='container'>
-          <img
-            className='backup-account-image'
-            src='/public/images/forgot-my-password.svg'
-            alt={t('backup-account.image-description')}
-          />
-          <form>
-            <h1>{t('backup-account.title')}</h1>
-            <p>{t('backup-account.paragraph1')}</p>
-            <p>{t('backup-account.paragraph2')}</p>
-            <InputField name='email' label={t('backup-account.input-label')} />
-            <SubmitButton buttonText={t('backup-account.button')} />
-            <div>
-              <a href='/' className='link'>
-                <i className='fa fa-angle-left' aria-hidden='true' />
-                <span>{t('back-to-inbox')}</span>
-              </a>
+
+export class Page extends React.Component {
+
+  constructor(props) {
+    super(props);
+    this.state = { error: '' };
+    this.validateEmail = this.validateEmail.bind(this);
+  }
+
+  validateEmail(event) {
+    this.setState({
+      error: validator.isEmail(event.target.value) ? '' : 'Your email is invalid'
+    });
+  }
+
+  render() {
+    const t = this.props.t;
+    return (
+      <DocumentTitle title={t('backup-account.page-title')}>
+        <div className='page'>
+          <Header />
+          <section>
+            <div className='container'>
+              <img
+                className='backup-account-image'
+                src='/public/images/forgot-my-password.svg'
+                alt={t('backup-account.image-description')}
+              />
+              <form>
+                <h1>{t('backup-account.title')}</h1>
+                <p>{t('backup-account.paragraph1')}</p>
+                <p>{t('backup-account.paragraph2')}</p>
+                <InputField name='email' label={t('backup-account.input-label')} errorText={this.state.error} onChange={this.validateEmail} />
+                <SubmitButton buttonText={t('backup-account.button')} />
+                <div>
+                  <a href='/' className='link'>
+                    <i className='fa fa-angle-left' aria-hidden='true' />
+                    <span>{t('back-to-inbox')}</span>
+                  </a>
+                </div>
+              </form>
             </div>
-          </form>
+          </section>
+          <Footer />
         </div>
-      </section>
-      <Footer />
-    </div>
-  </DocumentTitle>
-);
+      </DocumentTitle>
+    );
+  }
+}
+
 
 Page.propTypes = {
   t: React.PropTypes.func.isRequired
diff --git a/web-ui/src/backup_account/page.spec.js b/web-ui/src/backup_account/page.spec.js
index ece61336..f9c5251a 100644
--- a/web-ui/src/backup_account/page.spec.js
+++ b/web-ui/src/backup_account/page.spec.js
@@ -22,4 +22,18 @@ describe('BackupAccount', () => {
   it('renders backup account submit button', () => {
     expect(page.find('SubmitButton').props().buttonText).toEqual('backup-account.button');
   });
+
+  describe('Email validation', () => {
+    it('should set error in state when email is invalid', () => {
+      var pageInstance = page.instance();
+      pageInstance.validateEmail({target: {value: 'test'}});
+      expect(pageInstance.state.error).toEqual('Your email is invalid');
+    });
+
+    it('should not set error in state when email is valid', () => {
+      var pageInstance = page.instance();
+      pageInstance.validateEmail({target: {value: 'test@test.com'}});
+      expect(pageInstance.state.error).toEqual('');
+    });
+  });
 });