[#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

3 files changed, 20 insertions, 14 deletions

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}