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

with @FrailWords

2 files changed, 22 insertions, 7 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);
+    });
   });
 });