[#927] Implements sending recovery code by email.

with @tayanefernandes

2 files changed, 27 insertions, 5 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 9d622d8d..8fa71191 100644
--- a/web-ui/src/backup_account/backup_email/backup_email.js
+++ b/web-ui/src/backup_account/backup_email/backup_email.js
@@ -31,7 +31,7 @@ export class BackupEmail extends React.Component {
 
   constructor(props) {
     super(props);
-    this.state = { error: '', submitButtonDisabled: true };
+    this.state = { error: '', submitButtonDisabled: true, backupEmail: '' };
   }
 
   validateEmail = (event) => {
@@ -54,7 +54,8 @@ export class BackupEmail extends React.Component {
         'Content-Type': 'application/json'
       },
       body: JSON.stringify({
-        csrftoken: [browser.getCookie('XSRF-TOKEN')]
+        csrftoken: [browser.getCookie('XSRF-TOKEN')],
+        backupEmail: this.state.backupEmail
       })
     }).then((response) => {
       if (response.ok) {
@@ -65,6 +66,11 @@ export class BackupEmail extends React.Component {
     });
   };
 
+  handleChange = (event) => {
+    this.setState({ backupEmail: event.target.value });
+    this.validateEmail(event);
+  }
+
   render() {
     const t = this.props.t;
     return (
@@ -78,7 +84,7 @@ export class BackupEmail extends React.Component {
           <h1>{t('backup-account.backup-email.title')}</h1>
           <p>{t('backup-account.backup-email.paragraph1')}</p>
           <p>{t('backup-account.backup-email.paragraph2')}</p>
-          <InputField name='email' label={t('backup-account.backup-email.input-label')} errorText={this.state.error} onChange={this.validateEmail} />
+          <InputField name='email' value={this.state.backupEmail} label={t('backup-account.backup-email.input-label')} errorText={this.state.error} onChange={this.handleChange} />
           <SubmitButton buttonText={t('backup-account.backup-email.button')} disabled={this.state.submitButtonDisabled} />
           <BackLink
             href='/'
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 65fad608..b23aadaa 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
@@ -9,6 +9,7 @@ describe('BackupEmail', () => {
   let backupEmail;
   let mockOnSubmit;
   let mockTranslations;
+  let backupEmailInstance;
 
   beforeEach(() => {
     mockOnSubmit = expect.createSpy();
@@ -30,8 +31,6 @@ describe('BackupEmail', () => {
   });
 
   describe('Email validation', () => {
-    let backupEmailInstance;
-
     beforeEach(() => {
       backupEmailInstance = backupEmail.instance();
     });
@@ -84,6 +83,17 @@ describe('BackupEmail', () => {
     });
   });
 
+  describe('Email changing handler', () => {
+    beforeEach(() => {
+      backupEmailInstance = backupEmail.instance();
+    });
+
+    it('sets user backup email in the state', () => {
+      backupEmailInstance.handleChange({ target: { value: 'test@test.com' } });
+      expect(backupEmailInstance.state.backupEmail).toEqual('test@test.com');
+    });
+  });
+
   describe('Submit', () => {
     let preventDefaultSpy;
 
@@ -98,6 +108,8 @@ describe('BackupEmail', () => {
 
         fetchMock.post('/backup-account', 204);
         backupEmail = shallow(<BackupEmail t={mockTranslations} onSubmit={mockOnSubmit} />);
+
+        backupEmail.find('InputField').simulate('change', { target: { value: 'test@test.com' } });
         backupEmail.find('form').simulate('submit', { preventDefault: preventDefaultSpy });
       });
 
@@ -109,6 +121,10 @@ describe('BackupEmail', () => {
         expect(fetchMock.lastOptions('/backup-account').body).toContain('"csrftoken":["abc123"]');
       });
 
+      it('sends user email as content', () => {
+        expect(fetchMock.lastOptions('/backup-account').body).toContain('"backupEmail":"test@test.com"');
+      });
+
       it('sends content-type header', () => {
         expect(fetchMock.lastOptions('/backup-account').headers['Content-Type']).toEqual('application/json');
       });