7 files changed, 115 insertions, 72 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 09863950..ac64f02e 100644
--- a/web-ui/src/backup_account/backup_email/backup_email.js
+++ b/web-ui/src/backup_account/backup_email/backup_email.js
@@ -18,10 +18,12 @@
 import 'isomorphic-fetch';
 import React from 'react';
 import { translate } from 'react-i18next';
+import validator from 'validator';
+
+import { submitForm } from 'src/common/util';
 import SubmitButton from 'src/common/submit_button/submit_button';
 import InputField from 'src/common/input_field/input_field';
-import validator from 'validator';
-import browser from 'helpers/browser';
+import BackLink from 'src/common/back_link/back_link';
 
 import './backup_email.scss';
 
@@ -29,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) => {
@@ -40,21 +42,20 @@ export class BackupEmail extends React.Component {
       error: !emptyEmail && !validEmail ? t('backup-account.backup-email.error.invalid-email') : '',
       submitButtonDisabled: !validEmail || emptyEmail
     });
-  }
+  };
 
   submitHandler = (event) => {
-    event.preventDefault();
+    submitForm(event, '/backup-account', {
+      backupEmail: this.state.backupEmail
+    }).then((response) => {
+      if (response.ok) this.props.onSubmit('success');
+      else this.props.onSubmit('error');
+    });
+  };
 
-    fetch('/backup-account', {
-      credentials: 'same-origin',
-      method: 'POST',
-      headers: {
-        'Content-Type': 'application/json'
-      },
-      body: JSON.stringify({
-        csrftoken: [browser.getCookie('XSRF-TOKEN')]
-      })
-    }).then(() => this.props.onSubmit('success'));
+  handleChange = (event) => {
+    this.setState({ backupEmail: event.target.value });
+    this.validateEmail(event);
   }
 
   render() {
@@ -70,14 +71,12 @@ 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} />
-          <div className='link-content'>
-            <a href='/' className='link'>
-              <i className='fa fa-angle-left' aria-hidden='true' />
-              <span>{t('back-to-inbox')}</span>
-            </a>
-          </div>
+          <BackLink
+            href='/'
+            text={t('back-to-inbox')}
+          />
         </form>
       </div>
     );
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 48199738..a34afa06 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
@@ -3,12 +3,12 @@ import expect from 'expect';
 import React from 'react';
 import fetchMock from 'fetch-mock';
 import { BackupEmail } from 'src/backup_account/backup_email/backup_email';
-import browser from 'helpers/browser';
 
 describe('BackupEmail', () => {
   let backupEmail;
   let mockOnSubmit;
   let mockTranslations;
+  let backupEmailInstance;
 
   beforeEach(() => {
     mockOnSubmit = expect.createSpy();
@@ -30,8 +30,6 @@ describe('BackupEmail', () => {
   });
 
   describe('Email validation', () => {
-    let backupEmailInstance;
-
     beforeEach(() => {
       backupEmailInstance = backupEmail.instance();
     });
@@ -84,42 +82,64 @@ 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;
 
-    beforeEach((done) => {
-      mockOnSubmit = expect.createSpy().andCall(() => done());
+    beforeEach(() => {
       preventDefaultSpy = expect.createSpy();
-      expect.spyOn(browser, 'getCookie').andReturn('abc123');
+    });
 
-      backupEmail = shallow(<BackupEmail t={mockTranslations} onSubmit={mockOnSubmit} />);
+    context('on success', () => {
+      beforeEach((done) => {
+        mockOnSubmit = expect.createSpy().andCall(() => done());
 
-      fetchMock.post('/backup-account', 204);
-      backupEmail.find('form').simulate('submit', { preventDefault: preventDefaultSpy });
-    });
+        fetchMock.post('/backup-account', 204);
+        backupEmail = shallow(<BackupEmail t={mockTranslations} onSubmit={mockOnSubmit} />);
 
-    it('posts backup email', () => {
-      expect(fetchMock.called('/backup-account')).toBe(true, 'Backup account POST was not called');
-    });
+        backupEmail.find('InputField').simulate('change', { target: { value: 'test@test.com' } });
+        backupEmail.find('form').simulate('submit', { preventDefault: preventDefaultSpy });
+      });
 
-    it('sends csrftoken as content', () => {
-      expect(fetchMock.lastOptions('/backup-account').body).toContain('"csrftoken":["abc123"]');
-    });
+      it('posts backup email', () => {
+        expect(fetchMock.called('/backup-account')).toBe(true, 'Backup account POST was not called');
+      });
 
-    it('sends content-type header', () => {
-      expect(fetchMock.lastOptions('/backup-account').headers['Content-Type']).toEqual('application/json');
-    });
+      it('sends user email as content', () => {
+        expect(fetchMock.lastOptions('/backup-account').body).toContain('"backupEmail":"test@test.com"');
+      });
 
-    it('sends same origin headers', () => {
-      expect(fetchMock.lastOptions('/backup-account').credentials).toEqual('same-origin');
+      it('calls onSubmit from props with success', () => {
+        expect(mockOnSubmit).toHaveBeenCalledWith('success');
+      });
     });
 
-    it('prevents default call to refresh page', () => {
-      expect(preventDefaultSpy).toHaveBeenCalled();
-    });
+    context('on error', () => {
+      beforeEach((done) => {
+        mockOnSubmit = expect.createSpy().andCall(() => done());
+
+        fetchMock.post('/backup-account', 500);
+        backupEmail = shallow(<BackupEmail t={mockTranslations} onSubmit={mockOnSubmit} />);
+        backupEmail.find('form').simulate('submit', { preventDefault: preventDefaultSpy });
+      });
 
-    it('calls onSubmit from props when success', () => {
-      expect(mockOnSubmit).toHaveBeenCalledWith('success');
+      it('calls onSubmit from props with error', () => {
+        expect(mockOnSubmit).toHaveBeenCalledWith('error');
+      });
     });
   });
+
+  afterEach(() => {
+    fetchMock.restore();
+  });
 });
diff --git a/web-ui/src/backup_account/confirmation/confirmation.js b/web-ui/src/backup_account/confirmation/confirmation.js
index 41637dab..49b0d19c 100644
--- a/web-ui/src/backup_account/confirmation/confirmation.js
+++ b/web-ui/src/backup_account/confirmation/confirmation.js
@@ -18,6 +18,7 @@
 import React from 'react';
 import { translate } from 'react-i18next';
 import SubmitButton from 'src/common/submit_button/submit_button';
+import BackLink from 'src/common/back_link/back_link';
 
 import './confirmation.scss';
 
@@ -29,12 +30,10 @@ export const Confirmation = ({ t }) => (
     <form action='/'>
       <SubmitButton buttonText={t('backup-account.confirmation.button')} type='submit' />
     </form>
-    <div className='link-content'>
-      <a href='/backup-account' className='link'>
-        <i className='fa fa-angle-left' aria-hidden='true' />
-        <span>{t('backup-account.confirmation.retry-button')}</span>
-      </a>
-    </div>
+    <BackLink
+      href='/backup-account'
+      text={t('backup-account.confirmation.retry-button')}
+    />
   </div>
 );
 
diff --git a/web-ui/src/backup_account/confirmation/confirmation.spec.js b/web-ui/src/backup_account/confirmation/confirmation.spec.js
index 291d156d..7a6f38ca 100644
--- a/web-ui/src/backup_account/confirmation/confirmation.spec.js
+++ b/web-ui/src/backup_account/confirmation/confirmation.spec.js
@@ -20,10 +20,10 @@ describe('Confirmation', () => {
   });
 
   it('renders confirmation retry button', () => {
-    expect(page.find('a').text()).toEqual('backup-account.confirmation.retry-button');
+    expect(page.find('BackLink').props().text).toEqual('backup-account.confirmation.retry-button');
   });
 
   it('retries button redirects to backup account', () => {
-    expect(page.find('a').props().href).toEqual('/backup-account');
+    expect(page.find('BackLink').props().href).toEqual('/backup-account');
   });
 });
diff --git a/web-ui/src/backup_account/page.js b/web-ui/src/backup_account/page.js
index 49e4b316..e7663205 100644
--- a/web-ui/src/backup_account/page.js
+++ b/web-ui/src/backup_account/page.js
@@ -22,6 +22,7 @@ import Footer from 'src/common/footer/footer';
 import Header from 'src/common/header/header';
 import BackupEmail from 'src/backup_account/backup_email/backup_email';
 import Confirmation from 'src/backup_account/confirmation/confirmation';
+import SnackbarNotification from 'src/common/snackbar_notification/snackbar_notification';
 
 import 'font-awesome/scss/font-awesome.scss';
 import './page.scss';
@@ -36,22 +37,30 @@ export class Page extends React.Component {
 
   saveBackupEmail = (status) => {
     this.setState({ status });
-  }
+  };
 
   mainContent = () => {
     if (this.state.status === 'success') return <Confirmation />;
     return <BackupEmail onSubmit={this.saveBackupEmail} />;
   };
 
+  showSnackbarOnError = (t) => {
+    if (this.state.status === 'error') {
+      return <SnackbarNotification message={t('backup-account.error.submit-error')} isError />;
+    }
+    return undefined; // To satisfy eslint error - consistent-return
+  };
+
   render() {
     const t = this.props.t;
     return (
       <DocumentTitle title={t('backup-account.page-title')}>
         <div className='page'>
-          <Header />
+          <Header renderLogout />
           <section>
             {this.mainContent()}
           </section>
+          {this.showSnackbarOnError(t)}
           <Footer />
         </div>
       </DocumentTitle>
diff --git a/web-ui/src/backup_account/page.scss b/web-ui/src/backup_account/page.scss
index 71e3f074..d4f1f887 100644
--- a/web-ui/src/backup_account/page.scss
+++ b/web-ui/src/backup_account/page.scss
@@ -64,20 +64,6 @@ p {
   margin-bottom: 0.5em;
 }
 
-.link {
-  color: $dark_blue;
-  font-style: italic;
-  font-size: 0.8em;
-
-  .fa {
-    font-size: 1.6em;
-    position: relative;
-    top: 3px;
-    margin-right: 0.3em;
-  }
-
-}
-
 @media only screen and (min-width : 500px) {
   body {
     font-size: 1.3em;
diff --git a/web-ui/src/backup_account/page.spec.js b/web-ui/src/backup_account/page.spec.js
index bd7bb884..8c014ee4 100644
--- a/web-ui/src/backup_account/page.spec.js
+++ b/web-ui/src/backup_account/page.spec.js
@@ -4,6 +4,8 @@ import React from 'react';
 import { Page } from 'src/backup_account/page';
 import BackupEmail from 'src/backup_account/backup_email/backup_email';
 import Confirmation from 'src/backup_account/confirmation/confirmation';
+import SnackbarNotification from 'src/common/snackbar_notification/snackbar_notification';
+import Header from 'src/common/header/header';
 
 describe('BackupAccount', () => {
   let page;
@@ -17,6 +19,10 @@ describe('BackupAccount', () => {
     expect(page.props().title).toEqual('backup-account.page-title');
   });
 
+  it('renders header with logout button', () => {
+    expect(page.find(Header).props().renderLogout).toEqual(true);
+  });
+
   describe('save backup email', () => {
     let pageInstance;
 
@@ -41,5 +47,29 @@ describe('BackupAccount', () => {
       pageInstance.saveBackupEmail('success');
       expect(page.find(Confirmation).length).toEqual(1);
     });
+
+    context('on submit error', () => {
+      beforeEach(() => {
+        pageInstance.saveBackupEmail('error');
+      });
+
+      it('returns snackbar component on error', () => {
+        const snackbar = pageInstance.showSnackbarOnError(pageInstance.props.t);
+        expect(snackbar).toEqual(<SnackbarNotification message='backup-account.error.submit-error' isError />);
+      });
+
+      it('returns nothing when there is no error', () => {
+        pageInstance.saveBackupEmail('success');
+        const snackbar = pageInstance.showSnackbarOnError(pageInstance.props.t);
+        expect(snackbar).toEqual(undefined);
+      });
+
+      it('renders snackbar notification on error', () => {
+        const snackbar = page.find(SnackbarNotification);
+        expect(snackbar).toExist();
+        expect(snackbar.props().message).toEqual('backup-account.error.submit-error');
+        expect(snackbar.props().isError).toEqual(true);
+      });
+    });
   });
 });