[#923] Disable button when the email is invalid on the backup email page

with @FrailWords

5 files changed, 34 insertions, 18 deletions

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');
   });
 });