[#971] Add backup account confirmation page

with @tuliocasagrande

2 files changed, 22 insertions, 3 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
index 3d5df1b0..2ef76ecf 100644
--- a/web-ui/src/backup_account/backup_email/backup_email.js
+++ b/web-ui/src/backup_account/backup_email/backup_email.js
@@ -39,6 +39,13 @@ export class BackupEmail extends React.Component {
     });
   }
 
+  submitHandler = (event) => {
+    event.preventDefault();
+    if (typeof this.props.onSubmit === 'function') {
+      this.props.onSubmit();
+    }
+  }
+
   render() {
     const t = this.props.t;
     return (
@@ -48,7 +55,7 @@ export class BackupEmail extends React.Component {
           src='/public/images/forgot-my-password.svg'
           alt={t('backup-account.backup-email.image-description')}
         />
-        <form>
+        <form onSubmit={this.submitHandler}>
           <h1>{t('backup-account.backup-email.title')}</h1>
           <p>{t('backup-account.backup-email.paragraph1')}</p>
           <p>{t('backup-account.backup-email.paragraph2')}</p>
@@ -68,7 +75,8 @@ export class BackupEmail extends React.Component {
 
 
 BackupEmail.propTypes = {
-  t: React.PropTypes.func.isRequired
+  t: React.PropTypes.func.isRequired,
+  onSubmit: 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
index b2b297f4..d6e3e4e7 100644
--- a/web-ui/src/backup_account/backup_email/backup_email.spec.js
+++ b/web-ui/src/backup_account/backup_email/backup_email.spec.js
@@ -1,13 +1,15 @@
 import { shallow } from 'enzyme';
 import expect from 'expect';
+import sinon from 'sinon';
 import React from 'react';
 import { BackupEmail } from 'src/backup_account/backup_email/backup_email';
 
 describe('BackupEmail', () => {
   let page;
+  let mockTranslations;
 
   beforeEach(() => {
-    const mockTranslations = key => key;
+    mockTranslations = key => key;
     page = shallow(<BackupEmail t={mockTranslations} />);
   });
 
@@ -23,6 +25,15 @@ describe('BackupEmail', () => {
     expect(page.find('SubmitButton').props().buttonText).toEqual('backup-account.backup-email.button');
   });
 
+  it('form submit should call parameter custom submit', () => {
+    const mockOnSubmit = sinon.spy();
+    const event = { preventDefault() {} };
+    page = shallow(<BackupEmail t={mockTranslations} onSubmit={mockOnSubmit} />);
+
+    page.instance().submitHandler(event);
+    sinon.assert.calledOnce(mockOnSubmit);
+  });
+
   describe('Email validation', () => {
     let pageInstance;