From dc982839a98e2b165832dc243ec17d7631dec769 Mon Sep 17 00:00:00 2001
From: Tayane Fernandes <tayane.rmf@gmail.com>
Date: Thu, 9 Mar 2017 17:44:34 -0300
Subject: [#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
---
 web-ui/package.json                    |  1 +
 web-ui/src/backup_account/page.js      | 77 +++++++++++++++++++++-------------
 web-ui/src/backup_account/page.spec.js | 14 +++++++
 3 files changed, 64 insertions(+), 28 deletions(-)

(limited to 'web-ui')

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('');
+    });
+  });
 });
-- 
cgit v1.2.3


From aad05a38511a8bdd9bd13d2d38092ce6b35ac46b Mon Sep 17 00:00:00 2001
From: Tayane Fernandes <tayane.rmf@gmail.com>
Date: Thu, 9 Mar 2017 18:54:10 -0300
Subject: [#923] Disable button when the email is invalid on the backup email
 page

with @FrailWords
---
 web-ui/src/backup_account/page.js                   |  8 +++++---
 web-ui/src/backup_account/page.spec.js              | 21 +++++++++++++++++----
 web-ui/src/common/submit_button/submit_button.js    | 14 +++++++++++---
 web-ui/src/common/submit_button/submit_button.scss  |  7 -------
 .../src/common/submit_button/submit_button.spec.js  |  2 +-
 5 files changed, 34 insertions(+), 18 deletions(-)

(limited to 'web-ui')

diff --git a/web-ui/src/backup_account/page.js b/web-ui/src/backup_account/page.js
index 1feb7546..73a5718b 100644
--- a/web-ui/src/backup_account/page.js
+++ b/web-ui/src/backup_account/page.js
@@ -32,13 +32,15 @@ export class Page extends React.Component {
 
   constructor(props) {
     super(props);
-    this.state = { error: '' };
+    this.state = { error: '', validEmail: false };
     this.validateEmail = this.validateEmail.bind(this);
   }
 
   validateEmail(event) {
+    const validEmail = validator.isEmail(event.target.value);
     this.setState({
-      error: validator.isEmail(event.target.value) ? '' : 'Your email is invalid'
+      error: validEmail ? '' : 'Your email is invalid',
+      validEmail
     });
   }
 
@@ -60,7 +62,7 @@ export class Page extends React.Component {
                 <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')} />
+                <SubmitButton buttonText={t('backup-account.button')} disabled={!this.state.validEmail} />
                 <div>
                   <a href='/' className='link'>
                     <i className='fa fa-angle-left' aria-hidden='true' />
diff --git a/web-ui/src/backup_account/page.spec.js b/web-ui/src/backup_account/page.spec.js
index f9c5251a..30aefc96 100644
--- a/web-ui/src/backup_account/page.spec.js
+++ b/web-ui/src/backup_account/page.spec.js
@@ -24,16 +24,29 @@ describe('BackupAccount', () => {
   });
 
   describe('Email validation', () => {
+    let pageInstance;
+
+    beforeEach(() => {
+      pageInstance = page.instance();
+    });
+
     it('should set error in state when email is invalid', () => {
-      var pageInstance = page.instance();
-      pageInstance.validateEmail({target: {value: 'test'}});
+      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'}});
+      pageInstance.validateEmail({ target: { value: 'test@test.com' } });
       expect(pageInstance.state.error).toEqual('');
     });
+
+    it('submit button should be disabled when email field is empty', () => {
+      expect(page.find('SubmitButton').props().disabled).toEqual(true);
+    });
+
+    it('submit button should be enabled when email field is valid', () => {
+      pageInstance.setState({ validEmail: true });
+      expect(page.find('SubmitButton').props().disabled).toEqual(false);
+    });
   });
 });
diff --git a/web-ui/src/common/submit_button/submit_button.js b/web-ui/src/common/submit_button/submit_button.js
index 4754e042..1e7da021 100644
--- a/web-ui/src/common/submit_button/submit_button.js
+++ b/web-ui/src/common/submit_button/submit_button.js
@@ -16,15 +16,23 @@
  */
 
 import React from 'react';
+import RaisedButton from 'material-ui/RaisedButton';
 
 import './submit_button.scss';
 
-const SubmitButton = ({ buttonText }) => (
-  <input type='submit' className='submit-button' value={buttonText} />
+const SubmitButton = ({ buttonText, disabled }) => (
+  <div className='submit-button'>
+    <RaisedButton primary label={buttonText} disabled={disabled} fullWidth labelStyle={{ textTransform: 'none' }} />
+  </div>
 );
 
 SubmitButton.propTypes = {
-  buttonText: React.PropTypes.string.isRequired
+  buttonText: React.PropTypes.string.isRequired,
+  disabled: React.PropTypes.boolean
+};
+
+SubmitButton.defaultProps = {
+  disabled: true
 };
 
 export default SubmitButton;
diff --git a/web-ui/src/common/submit_button/submit_button.scss b/web-ui/src/common/submit_button/submit_button.scss
index 13cb7607..ac1307a8 100644
--- a/web-ui/src/common/submit_button/submit_button.scss
+++ b/web-ui/src/common/submit_button/submit_button.scss
@@ -18,13 +18,6 @@
 @import "~scss/base/colors";
 
 .submit-button {
-  background: $dark_blue;
-  padding: 0.8em;
-  color: $white;
-  text-align: center;
-  border: none;
-  border-radius: 2px;
-  font-weight: 300;
   width: 100%;
   margin-bottom: 1em;
 }
diff --git a/web-ui/src/common/submit_button/submit_button.spec.js b/web-ui/src/common/submit_button/submit_button.spec.js
index 8279547c..d4308e6d 100644
--- a/web-ui/src/common/submit_button/submit_button.spec.js
+++ b/web-ui/src/common/submit_button/submit_button.spec.js
@@ -11,6 +11,6 @@ describe('SubmitButton', () => {
   });
 
   it('renders an input of type submit for add email', () => {
-    expect(submitButton.find('input[type="submit"]').props().value).toEqual('Add Email');
+    expect(submitButton.find('RaisedButton').props().label).toEqual('Add Email');
   });
 });
-- 
cgit v1.2.3


From 29a59d4ec216a895c8004fc0addbec1b329df200 Mon Sep 17 00:00:00 2001
From: Tayane Fernandes <tayane.rmf@gmail.com>
Date: Fri, 10 Mar 2017 14:29:27 -0300
Subject: [#923] Fix submit button style of material-ui

with @FrailWords
---
 web-ui/src/backup_account/page.js                  |  2 +-
 web-ui/src/backup_account/page.scss                |  4 ++--
 web-ui/src/common/submit_button/submit_button.js   | 26 ++++++++++++++++++----
 web-ui/src/common/submit_button/submit_button.scss |  1 +
 .../src/common/submit_button/submit_button.spec.js |  4 ++++
 5 files changed, 30 insertions(+), 7 deletions(-)

(limited to 'web-ui')

diff --git a/web-ui/src/backup_account/page.js b/web-ui/src/backup_account/page.js
index 73a5718b..91fb6863 100644
--- a/web-ui/src/backup_account/page.js
+++ b/web-ui/src/backup_account/page.js
@@ -63,7 +63,7 @@ export class Page extends React.Component {
                 <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.validEmail} />
-                <div>
+                <div className='link-content'>
                   <a href='/' className='link'>
                     <i className='fa fa-angle-left' aria-hidden='true' />
                     <span>{t('back-to-inbox')}</span>
diff --git a/web-ui/src/backup_account/page.scss b/web-ui/src/backup_account/page.scss
index 9d94c156..a4203d9b 100644
--- a/web-ui/src/backup_account/page.scss
+++ b/web-ui/src/backup_account/page.scss
@@ -101,7 +101,7 @@ p {
     display: flex;
     flex-direction: column;
 
-    div {
+    .input-field-group, .submit-button, .link-content {
       width: 70%;
       align-self: center;
     }
@@ -120,7 +120,7 @@ p {
   form {
     margin-left: 2.5em;
 
-    div {
+    .input-field-group, .submit-button, .link-content {
       width: 300px;
       align-self: flex-start;
     }
diff --git a/web-ui/src/common/submit_button/submit_button.js b/web-ui/src/common/submit_button/submit_button.js
index 1e7da021..73f9b21c 100644
--- a/web-ui/src/common/submit_button/submit_button.js
+++ b/web-ui/src/common/submit_button/submit_button.js
@@ -20,19 +20,37 @@ import RaisedButton from 'material-ui/RaisedButton';
 
 import './submit_button.scss';
 
-const SubmitButton = ({ buttonText, disabled }) => (
+const labelStyle = {
+  textTransform: 'none',
+  fontSize: '1em',
+  lineHeight: '48px'
+};
+
+const buttonStyle = {
+  height: '48px'
+};
+
+const SubmitButton = ({ buttonText, disabled=false }) => (
   <div className='submit-button'>
-    <RaisedButton primary label={buttonText} disabled={disabled} fullWidth labelStyle={{ textTransform: 'none' }} />
+    <RaisedButton type='submit'
+      label={buttonText}
+      disabled={disabled}
+      labelStyle={labelStyle}
+      buttonStyle={buttonStyle}
+      overlayStyle={buttonStyle}
+      fullWidth
+      primary
+    />
   </div>
 );
 
 SubmitButton.propTypes = {
   buttonText: React.PropTypes.string.isRequired,
-  disabled: React.PropTypes.boolean
+  disabled: React.PropTypes.bool
 };
 
 SubmitButton.defaultProps = {
-  disabled: true
+  disabled: false
 };
 
 export default SubmitButton;
diff --git a/web-ui/src/common/submit_button/submit_button.scss b/web-ui/src/common/submit_button/submit_button.scss
index ac1307a8..851899f7 100644
--- a/web-ui/src/common/submit_button/submit_button.scss
+++ b/web-ui/src/common/submit_button/submit_button.scss
@@ -20,6 +20,7 @@
 .submit-button {
   width: 100%;
   margin-bottom: 1em;
+  font-size: 1em;
 }
 
 @media only screen and (min-width : 500px) {
diff --git a/web-ui/src/common/submit_button/submit_button.spec.js b/web-ui/src/common/submit_button/submit_button.spec.js
index d4308e6d..0ba8137c 100644
--- a/web-ui/src/common/submit_button/submit_button.spec.js
+++ b/web-ui/src/common/submit_button/submit_button.spec.js
@@ -13,4 +13,8 @@ describe('SubmitButton', () => {
   it('renders an input of type submit for add email', () => {
     expect(submitButton.find('RaisedButton').props().label).toEqual('Add Email');
   });
+
+  it('renders button in enabled state', () => {
+    expect(submitButton.find('RaisedButton').props().disabled).toEqual(false);
+  });
 });
-- 
cgit v1.2.3


From 9e5dce775c51b44cf7b17d8ab564fdefc16a06c0 Mon Sep 17 00:00:00 2001
From: Tayane Fernandes <tayane.rmf@gmail.com>
Date: Fri, 10 Mar 2017 15:25:43 -0300
Subject: [#923] Fix the submit button when the email is empty

When the email is empty the button should be disabled, but we should not see
any error message

with @FrailWords
---
 web-ui/src/backup_account/page.js                |  9 +++++----
 web-ui/src/backup_account/page.spec.js           | 20 ++++++++++++--------
 web-ui/src/common/submit_button/submit_button.js |  5 +++--
 3 files changed, 20 insertions(+), 14 deletions(-)

(limited to 'web-ui')

diff --git a/web-ui/src/backup_account/page.js b/web-ui/src/backup_account/page.js
index 91fb6863..e8c353e1 100644
--- a/web-ui/src/backup_account/page.js
+++ b/web-ui/src/backup_account/page.js
@@ -32,15 +32,16 @@ export class Page extends React.Component {
 
   constructor(props) {
     super(props);
-    this.state = { error: '', validEmail: false };
+    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);
     this.setState({
-      error: validEmail ? '' : 'Your email is invalid',
-      validEmail
+      error: !emptyEmail && !validEmail  ? 'Your email is invalid' : '',
+      submitButtonDisabled: !validEmail || emptyEmail
     });
   }
 
@@ -62,7 +63,7 @@ export class Page extends React.Component {
                 <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.validEmail} />
+                <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' />
diff --git a/web-ui/src/backup_account/page.spec.js b/web-ui/src/backup_account/page.spec.js
index 30aefc96..9a79392c 100644
--- a/web-ui/src/backup_account/page.spec.js
+++ b/web-ui/src/backup_account/page.spec.js
@@ -30,23 +30,27 @@ describe('BackupAccount', () => {
       pageInstance = page.instance();
     });
 
-    it('should set error in state when email is invalid', () => {
+    it('verify initial state', () => {
+      expect(pageInstance.state.error).toEqual('');
+      expect(page.find('SubmitButton').props().disabled).toEqual(true);
+    });
+
+    it('should set error in state and disabled submit button when email is invalid', () => {
       pageInstance.validateEmail({ target: { value: 'test' } });
       expect(pageInstance.state.error).toEqual('Your email is invalid');
+      expect(page.find('SubmitButton').props().disabled).toEqual(true);
     });
 
-    it('should not set error in state when email is valid', () => {
+    it('should not set error in state and submit button is enabled when email is valid', () => {
       pageInstance.validateEmail({ target: { value: 'test@test.com' } });
       expect(pageInstance.state.error).toEqual('');
+      expect(page.find('SubmitButton').props().disabled).toEqual(false);
     });
 
-    it('submit button should be disabled when email field is empty', () => {
+    it('should not set error in state and disable submit button when email is empty', () => {
+      pageInstance.validateEmail({ target: { value: '' } });
+      expect(pageInstance.state.error).toEqual('');
       expect(page.find('SubmitButton').props().disabled).toEqual(true);
     });
-
-    it('submit button should be enabled when email field is valid', () => {
-      pageInstance.setState({ validEmail: true });
-      expect(page.find('SubmitButton').props().disabled).toEqual(false);
-    });
   });
 });
diff --git a/web-ui/src/common/submit_button/submit_button.js b/web-ui/src/common/submit_button/submit_button.js
index 73f9b21c..1224c7bd 100644
--- a/web-ui/src/common/submit_button/submit_button.js
+++ b/web-ui/src/common/submit_button/submit_button.js
@@ -30,9 +30,10 @@ const buttonStyle = {
   height: '48px'
 };
 
-const SubmitButton = ({ buttonText, disabled=false }) => (
+const SubmitButton = ({ buttonText, disabled = false }) => (
   <div className='submit-button'>
-    <RaisedButton type='submit'
+    <RaisedButton
+      type='submit'
       label={buttonText}
       disabled={disabled}
       labelStyle={labelStyle}
-- 
cgit v1.2.3


From 8b42d7b769807031e808e5212cd5c50097db333b Mon Sep 17 00:00:00 2001
From: Tayane Fernandes <tayane.rmf@gmail.com>
Date: Fri, 10 Mar 2017 15:35:24 -0300
Subject: [#923] Create integration test for the validation of backup account

with @FrailWords
---
 web-ui/src/backup_account/page.js              |  2 +-
 web-ui/test/integration/backup_account.spec.js | 35 ++++++++++++++++++++++++++
 2 files changed, 36 insertions(+), 1 deletion(-)
 create mode 100644 web-ui/test/integration/backup_account.spec.js

(limited to 'web-ui')

diff --git a/web-ui/src/backup_account/page.js b/web-ui/src/backup_account/page.js
index e8c353e1..07a36283 100644
--- a/web-ui/src/backup_account/page.js
+++ b/web-ui/src/backup_account/page.js
@@ -40,7 +40,7 @@ export class Page extends React.Component {
     const validEmail = validator.isEmail(event.target.value);
     const emptyEmail = validator.isEmpty(event.target.value);
     this.setState({
-      error: !emptyEmail && !validEmail  ? 'Your email is invalid' : '',
+      error: !emptyEmail && !validEmail ? 'Your email is invalid' : '',
       submitButtonDisabled: !validEmail || emptyEmail
     });
   }
diff --git a/web-ui/test/integration/backup_account.spec.js b/web-ui/test/integration/backup_account.spec.js
new file mode 100644
index 00000000..2a37442e
--- /dev/null
+++ b/web-ui/test/integration/backup_account.spec.js
@@ -0,0 +1,35 @@
+import { mount } from 'enzyme';
+import expect from 'expect';
+import React from 'react';
+import App from 'src/common/app';
+import BackupAccountPage from 'src/backup_account/page';
+import testI18n from './i18n';
+
+describe('Backup account email validation', () => {
+  context('Backup Account Page', () => {
+    let app, backupAccountPage;
+
+    beforeEach(() => {
+      app = mount(<App i18n={testI18n} child={<BackupAccountPage />} />);
+      backupAccountPage = app.find('Page');
+    });
+
+    it('shows no error and enables submit button when a valid email is entered', () => {
+      backupAccountPage.find('input').simulate('change', {target: {value: 'test@test.com'}});
+      expect(backupAccountPage.find('InputField').props().errorText).toEqual('');
+      expect(backupAccountPage.find('SubmitButton').props().disabled).toEqual(false);
+    });
+
+    it('shows error and disables submit button on invalid email', () => {
+      backupAccountPage.find('input').simulate('change', {target: {value: 'test'}});
+      expect(backupAccountPage.find('InputField').props().errorText).toEqual('Your email is invalid');
+      expect(backupAccountPage.find('SubmitButton').props().disabled).toEqual(true);
+    });
+
+    it('shows no error and disables submit button when email is empty', () => {
+      backupAccountPage.find('input').simulate('change', {target: {value: ''}});
+      expect(backupAccountPage.find('InputField').props().errorText).toEqual('');
+      expect(backupAccountPage.find('SubmitButton').props().disabled).toEqual(true);
+    });
+  });
+});
-- 
cgit v1.2.3


From bc947d268b55fb513101534bd06901f686f5f3cf Mon Sep 17 00:00:00 2001
From: Tayane Fernandes <tayane.rmf@gmail.com>
Date: Fri, 10 Mar 2017 15:54:29 -0300
Subject: [#923] Fix the form height

with @FrailWords
---
 web-ui/src/backup_account/page.scss | 1 +
 1 file changed, 1 insertion(+)

(limited to 'web-ui')

diff --git a/web-ui/src/backup_account/page.scss b/web-ui/src/backup_account/page.scss
index a4203d9b..aa973fcd 100644
--- a/web-ui/src/backup_account/page.scss
+++ b/web-ui/src/backup_account/page.scss
@@ -119,6 +119,7 @@ p {
 
   form {
     margin-left: 2.5em;
+    min-height: 492px;
 
     .input-field-group, .submit-button, .link-content {
       width: 300px;
-- 
cgit v1.2.3


From 3c1cf6548939d164c4296eeaf637ec4a9901b0f4 Mon Sep 17 00:00:00 2001
From: Tayane Fernandes <tayane.rmf@gmail.com>
Date: Fri, 10 Mar 2017 16:11:07 -0300
Subject: [#923] Add translation for the validation error

@FrailWords
---
 web-ui/app/locales/en_US/translation.json      | 5 ++++-
 web-ui/app/locales/pt_BR/translation.json      | 5 ++++-
 web-ui/src/backup_account/page.js              | 3 ++-
 web-ui/src/backup_account/page.spec.js         | 2 +-
 web-ui/test/integration/backup_account.spec.js | 2 +-
 5 files changed, 12 insertions(+), 5 deletions(-)

(limited to 'web-ui')

diff --git a/web-ui/app/locales/en_US/translation.json b/web-ui/app/locales/en_US/translation.json
index 3f050e67..9df1867e 100644
--- a/web-ui/app/locales/en_US/translation.json
+++ b/web-ui/app/locales/en_US/translation.json
@@ -86,7 +86,10 @@
       "paragraph1": "You will need a backup account. Choose an alternative email address you use regularly.",
       "paragraph2": "Instructions to recover your password will be sent to this email address, save it.",
       "input-label": "Type your backup account",
-      "button": "Add Account"
+      "button": "Add Account",
+      "error": {
+        "invalid-email": "Please enter a valid email address"
+      }
     },
     "back-to-inbox": "Back to my inbox",
     "footer-text": "Product in development. Feedback and issues to",
diff --git a/web-ui/app/locales/pt_BR/translation.json b/web-ui/app/locales/pt_BR/translation.json
index 431b8f82..ac4fe10d 100644
--- a/web-ui/app/locales/pt_BR/translation.json
+++ b/web-ui/app/locales/pt_BR/translation.json
@@ -86,7 +86,10 @@
       "paragraph1": "Informe outro e-mail que você usa regularmente. Esse será o seu e-mail de recuperação.",
       "paragraph2": "Instruções para recuperar sua senha serão enviadas para esse e-mail, guarde com carinho.",
       "input-label": "Digite seu e-mail de recuperação",
-      "button": "Adicionar e-mail"
+      "button": "Adicionar e-mail",
+      "error": {
+        "invalid-email": "Por favor informe um e-mail válido"
+      }
     },
     "back-to-inbox": "Voltar",
     "footer-text": "Produto em desenvolvimento. Reporte problemas através do",
diff --git a/web-ui/src/backup_account/page.js b/web-ui/src/backup_account/page.js
index 07a36283..c7554cfb 100644
--- a/web-ui/src/backup_account/page.js
+++ b/web-ui/src/backup_account/page.js
@@ -39,8 +39,9 @@ export class Page extends React.Component {
   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 ? 'Your email is invalid' : '',
+      error: !emptyEmail && !validEmail ? t('backup-account.error.invalid-email') : '',
       submitButtonDisabled: !validEmail || emptyEmail
     });
   }
diff --git a/web-ui/src/backup_account/page.spec.js b/web-ui/src/backup_account/page.spec.js
index 9a79392c..f3590ed8 100644
--- a/web-ui/src/backup_account/page.spec.js
+++ b/web-ui/src/backup_account/page.spec.js
@@ -37,7 +37,7 @@ describe('BackupAccount', () => {
 
     it('should set error in state and disabled submit button when email is invalid', () => {
       pageInstance.validateEmail({ target: { value: 'test' } });
-      expect(pageInstance.state.error).toEqual('Your email is invalid');
+      expect(pageInstance.state.error).toEqual('backup-account.error.invalid-email');
       expect(page.find('SubmitButton').props().disabled).toEqual(true);
     });
 
diff --git a/web-ui/test/integration/backup_account.spec.js b/web-ui/test/integration/backup_account.spec.js
index 2a37442e..eb247653 100644
--- a/web-ui/test/integration/backup_account.spec.js
+++ b/web-ui/test/integration/backup_account.spec.js
@@ -22,7 +22,7 @@ describe('Backup account email validation', () => {
 
     it('shows error and disables submit button on invalid email', () => {
       backupAccountPage.find('input').simulate('change', {target: {value: 'test'}});
-      expect(backupAccountPage.find('InputField').props().errorText).toEqual('Your email is invalid');
+      expect(backupAccountPage.find('InputField').props().errorText).toEqual('Please enter a valid email address');
       expect(backupAccountPage.find('SubmitButton').props().disabled).toEqual(true);
     });
 
-- 
cgit v1.2.3


From def51d0d4265e9a489d05ca8cb4bec6abb26073f Mon Sep 17 00:00:00 2001
From: Sriram Viswanathan <sriramv@thoughtworks.com>
Date: Fri, 10 Mar 2017 17:36:24 -0300
Subject: [#923] Separate out asserts into different tests

with @tayanefernandes
---
 web-ui/src/backup_account/page.spec.js         | 48 +++++++++++++++++++-------
 web-ui/test/integration/backup_account.spec.js | 48 +++++++++++++++++++-------
 2 files changed, 72 insertions(+), 24 deletions(-)

(limited to 'web-ui')

diff --git a/web-ui/src/backup_account/page.spec.js b/web-ui/src/backup_account/page.spec.js
index f3590ed8..334d3ba8 100644
--- a/web-ui/src/backup_account/page.spec.js
+++ b/web-ui/src/backup_account/page.spec.js
@@ -35,22 +35,46 @@ describe('BackupAccount', () => {
       expect(page.find('SubmitButton').props().disabled).toEqual(true);
     });
 
-    it('should set error in state and disabled submit button when email is invalid', () => {
-      pageInstance.validateEmail({ target: { value: 'test' } });
-      expect(pageInstance.state.error).toEqual('backup-account.error.invalid-email');
-      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);
+      });
     });
 
-    it('should not set error in state and submit button is enabled when email is valid', () => {
-      pageInstance.validateEmail({ target: { value: 'test@test.com' } });
-      expect(pageInstance.state.error).toEqual('');
-      expect(page.find('SubmitButton').props().disabled).toEqual(false);
+    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);
+      });
     });
 
-    it('should not set error in state and disable submit button when email is empty', () => {
-      pageInstance.validateEmail({ target: { value: '' } });
-      expect(pageInstance.state.error).toEqual('');
-      expect(page.find('SubmitButton').props().disabled).toEqual(true);
+    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/test/integration/backup_account.spec.js b/web-ui/test/integration/backup_account.spec.js
index eb247653..b44c3b2c 100644
--- a/web-ui/test/integration/backup_account.spec.js
+++ b/web-ui/test/integration/backup_account.spec.js
@@ -14,22 +14,46 @@ describe('Backup account email validation', () => {
       backupAccountPage = app.find('Page');
     });
 
-    it('shows no error and enables submit button when a valid email is entered', () => {
-      backupAccountPage.find('input').simulate('change', {target: {value: 'test@test.com'}});
-      expect(backupAccountPage.find('InputField').props().errorText).toEqual('');
-      expect(backupAccountPage.find('SubmitButton').props().disabled).toEqual(false);
+    context('with valid email', () => {
+      beforeEach(() => {
+        backupAccountPage.find('input').simulate('change', {target: {value: 'test@test.com'}});
+      });
+
+      it('shows no validation error', () => {
+        expect(backupAccountPage.find('InputField').props().errorText).toEqual('');
+      });
+
+      it('submit button is enabled', () => {
+        expect(backupAccountPage.find('SubmitButton').props().disabled).toEqual(false);
+      });
     });
 
-    it('shows error and disables submit button on invalid email', () => {
-      backupAccountPage.find('input').simulate('change', {target: {value: 'test'}});
-      expect(backupAccountPage.find('InputField').props().errorText).toEqual('Please enter a valid email address');
-      expect(backupAccountPage.find('SubmitButton').props().disabled).toEqual(true);
+    context('with invalid email', () => {
+      beforeEach(() => {
+        backupAccountPage.find('input').simulate('change', {target: {value: 'test'}});
+      });
+
+      it('shows validation error', () => {
+        expect(backupAccountPage.find('InputField').props().errorText).toEqual('Please enter a valid email address');
+      });
+
+      it('disables submit button', () => {
+        expect(backupAccountPage.find('SubmitButton').props().disabled).toEqual(true);
+      });
     });
 
-    it('shows no error and disables submit button when email is empty', () => {
-      backupAccountPage.find('input').simulate('change', {target: {value: ''}});
-      expect(backupAccountPage.find('InputField').props().errorText).toEqual('');
-      expect(backupAccountPage.find('SubmitButton').props().disabled).toEqual(true);
+    context('with empty email', () => {
+      beforeEach(() => {
+        backupAccountPage.find('input').simulate('change', {target: {value: ''}});
+      });
+
+      it('shows no validation error', () => {
+        expect(backupAccountPage.find('InputField').props().errorText).toEqual('');
+      });
+
+      it('disables submit button', () => {
+        expect(backupAccountPage.find('SubmitButton').props().disabled).toEqual(true);
+      });
     });
   });
 });
-- 
cgit v1.2.3


From 471b58e945613956db951b3a7b87c9c528b152a4 Mon Sep 17 00:00:00 2001
From: Tayane Fernandes <tayane.rmf@gmail.com>
Date: Fri, 10 Mar 2017 18:25:54 -0300
Subject: [#923] Make the label for the input text always blue

with @FrailWords
---
 web-ui/src/common/input_field/input_field.js | 1 +
 1 file changed, 1 insertion(+)

(limited to 'web-ui')

diff --git a/web-ui/src/common/input_field/input_field.js b/web-ui/src/common/input_field/input_field.js
index 438241e1..f50fc2b1 100644
--- a/web-ui/src/common/input_field/input_field.js
+++ b/web-ui/src/common/input_field/input_field.js
@@ -28,6 +28,7 @@ const InputField = ({ label, name, type = 'text', ...other }) => (
       name={name}
       type={type}
       fullWidth
+      floatingLabelFocusStyle={{ color: '#178ca6' }}
       {...other}
     />
   </div>
-- 
cgit v1.2.3