1 files changed, 21 insertions, 22 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>
     );