[#971] Extract Backup email page to a new component

with @tuliocasagrande

4 files changed, 159 insertions, 100 deletions

diff --git a/web-ui/src/backup_account/backup_email/backup_email.js b/web-ui/src/backup_account/backup_email/backup_email.js
new file mode 100644
index 00000000..3d5df1b0
--- /dev/null
+++ b/web-ui/src/backup_account/backup_email/backup_email.js
@@ -0,0 +1,74 @@
+/*
+ * Copyright (c) 2017 ThoughtWorks, Inc.
+ *
+ * Pixelated is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Affero General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * Pixelated is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with Pixelated. If not, see <http://www.gnu.org/licenses/>.
+ */
+
+import React from 'react';
+import { translate } from 'react-i18next';
+import SubmitButton from 'src/common/submit_button/submit_button';
+import InputField from 'src/common/input_field/input_field';
+import validator from 'validator';
+
+
+export class BackupEmail extends React.Component {
+
+  constructor(props) {
+    super(props);
+    this.state = { error: '', submitButtonDisabled: true };
+  }
+
+  validateEmail = (event) => {
+    const validEmail = validator.isEmail(event.target.value);
+    const emptyEmail = validator.isEmpty(event.target.value);
+    const t = this.props.t;
+    this.setState({
+      error: !emptyEmail && !validEmail ? t('backup-account.backup-email.error.invalid-email') : '',
+      submitButtonDisabled: !validEmail || emptyEmail
+    });
+  }
+
+  render() {
+    const t = this.props.t;
+    return (
+      <div className='container'>
+        <img
+          className='backup-account-image'
+          src='/public/images/forgot-my-password.svg'
+          alt={t('backup-account.backup-email.image-description')}
+        />
+        <form>
+          <h1>{t('backup-account.backup-email.title')}</h1>
+          <p>{t('backup-account.backup-email.paragraph1')}</p>
+          <p>{t('backup-account.backup-email.paragraph2')}</p>
+          <InputField name='email' label={t('backup-account.backup-email.input-label')} errorText={this.state.error} onChange={this.validateEmail} />
+          <SubmitButton buttonText={t('backup-account.backup-email.button')} disabled={this.state.submitButtonDisabled} />
+          <div className='link-content'>
+            <a href='/' className='link'>
+              <i className='fa fa-angle-left' aria-hidden='true' />
+              <span>{t('back-to-inbox')}</span>
+            </a>
+          </div>
+        </form>
+      </div>
+    );
+  }
+}
+
+
+BackupEmail.propTypes = {
+  t: React.PropTypes.func.isRequired
+};
+
+export default translate('', { wait: true })(BackupEmail);
diff --git a/web-ui/src/backup_account/backup_email/backup_email.spec.js b/web-ui/src/backup_account/backup_email/backup_email.spec.js
new file mode 100644
index 00000000..b2b297f4
--- /dev/null
+++ b/web-ui/src/backup_account/backup_email/backup_email.spec.js
@@ -0,0 +1,80 @@
+import { shallow } from 'enzyme';
+import expect from 'expect';
+import React from 'react';
+import { BackupEmail } from 'src/backup_account/backup_email/backup_email';
+
+describe('BackupEmail', () => {
+  let page;
+
+  beforeEach(() => {
+    const mockTranslations = key => key;
+    page = shallow(<BackupEmail t={mockTranslations} />);
+  });
+
+  it('renders backup email title', () => {
+    expect(page.find('h1').text()).toEqual('backup-account.backup-email.title');
+  });
+
+  it('renders backup account email input field', () => {
+    expect(page.find('InputField').props().name).toEqual('email');
+  });
+
+  it('renders backup account submit button', () => {
+    expect(page.find('SubmitButton').props().buttonText).toEqual('backup-account.backup-email.button');
+  });
+
+  describe('Email validation', () => {
+    let pageInstance;
+
+    beforeEach(() => {
+      pageInstance = page.instance();
+    });
+
+    it('verify initial state', () => {
+      expect(pageInstance.state.error).toEqual('');
+      expect(page.find('SubmitButton').props().disabled).toEqual(true);
+    });
+
+    context('with invalid email', () => {
+      beforeEach(() => {
+        pageInstance.validateEmail({ target: { value: 'test' } });
+      });
+
+      it('sets error in state', () => {
+        expect(pageInstance.state.error).toEqual('backup-account.backup-email.error.invalid-email');
+      });
+
+      it('disables submit button', () => {
+        expect(page.find('SubmitButton').props().disabled).toEqual(true);
+      });
+    });
+
+    context('with valid email', () => {
+      beforeEach(() => {
+        pageInstance.validateEmail({ target: { value: 'test@test.com' } });
+      });
+
+      it('does not set error in state', () => {
+        expect(pageInstance.state.error).toEqual('');
+      });
+
+      it('submit button is enabled', () => {
+        expect(page.find('SubmitButton').props().disabled).toEqual(false);
+      });
+    });
+
+    context('with empty email', () => {
+      beforeEach(() => {
+        pageInstance.validateEmail({ target: { value: '' } });
+      });
+
+      it('not set error in state', () => {
+        expect(pageInstance.state.error).toEqual('');
+      });
+
+      it('disables submit button', () => {
+        expect(page.find('SubmitButton').props().disabled).toEqual(true);
+      });
+    });
+  });
+});
diff --git a/web-ui/src/backup_account/page.js b/web-ui/src/backup_account/page.js
index c7554cfb..5a75850a 100644
--- a/web-ui/src/backup_account/page.js
+++ b/web-ui/src/backup_account/page.js
@@ -18,11 +18,9 @@
 import React from 'react';
 import { translate } from 'react-i18next';
 import DocumentTitle from 'react-document-title';
-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 BackupEmail from 'src/backup_account/backup_email/backup_email';
 
 import 'font-awesome/scss/font-awesome.scss';
 import './page.scss';
@@ -32,18 +30,7 @@ export class Page extends React.Component {
 
   constructor(props) {
     super(props);
-    this.state = { error: '', submitButtonDisabled: true };
-    this.validateEmail = this.validateEmail.bind(this);
-  }
-
-  validateEmail(event) {
-    const validEmail = validator.isEmail(event.target.value);
-    const emptyEmail = validator.isEmpty(event.target.value);
-    const t = this.props.t;
-    this.setState({
-      error: !emptyEmail && !validEmail ? t('backup-account.error.invalid-email') : '',
-      submitButtonDisabled: !validEmail || emptyEmail
-    });
+    this.state = { status: '' };
   }
 
   render() {
@@ -53,26 +40,7 @@ export class Page extends React.Component {
         <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')} disabled={this.state.submitButtonDisabled} />
-                <div className='link-content'>
-                  <a href='/' className='link'>
-                    <i className='fa fa-angle-left' aria-hidden='true' />
-                    <span>{t('back-to-inbox')}</span>
-                  </a>
-                </div>
-              </form>
-            </div>
+            <BackupEmail />
           </section>
           <Footer />
         </div>
diff --git a/web-ui/src/backup_account/page.spec.js b/web-ui/src/backup_account/page.spec.js
index 334d3ba8..2f4bc7c1 100644
--- a/web-ui/src/backup_account/page.spec.js
+++ b/web-ui/src/backup_account/page.spec.js
@@ -11,70 +11,7 @@ describe('BackupAccount', () => {
     page = shallow(<Page t={mockTranslations} />);
   });
 
-  it('renders backup email page title', () => {
-    expect(page.find('h1').text()).toEqual('backup-account.title');
-  });
-
-  it('renders backup account email input field', () => {
-    expect(page.find('InputField').props().name).toEqual('email');
-  });
-
-  it('renders backup account submit button', () => {
-    expect(page.find('SubmitButton').props().buttonText).toEqual('backup-account.button');
-  });
-
-  describe('Email validation', () => {
-    let pageInstance;
-
-    beforeEach(() => {
-      pageInstance = page.instance();
-    });
-
-    it('verify initial state', () => {
-      expect(pageInstance.state.error).toEqual('');
-      expect(page.find('SubmitButton').props().disabled).toEqual(true);
-    });
-
-    context('with invalid email', () => {
-      beforeEach(() => {
-        pageInstance.validateEmail({ target: { value: 'test' } });
-      });
-
-      it('sets error in state', () => {
-        expect(pageInstance.state.error).toEqual('backup-account.error.invalid-email');
-      });
-
-      it('disables submit button', () => {
-        expect(page.find('SubmitButton').props().disabled).toEqual(true);
-      });
-    });
-
-    context('with valid email', () => {
-      beforeEach(() => {
-        pageInstance.validateEmail({ target: { value: 'test@test.com' } });
-      });
-
-      it('does not set error in state', () => {
-        expect(pageInstance.state.error).toEqual('');
-      });
-
-      it('submit button is enabled', () => {
-        expect(page.find('SubmitButton').props().disabled).toEqual(false);
-      });
-    });
-
-    context('with empty email', () => {
-      beforeEach(() => {
-        pageInstance.validateEmail({ target: { value: '' } });
-      });
-
-      it('not set error in state', () => {
-        expect(pageInstance.state.error).toEqual('');
-      });
-
-      it('disables submit button', () => {
-        expect(page.find('SubmitButton').props().disabled).toEqual(true);
-      });
-    });
+  it('renders backup account page title', () => {
+    expect(page.props().title).toEqual('backup-account.page-title');
   });
 });