[#932] Adds back link to account recovery steps

13 files changed, 162 insertions, 48 deletions

diff --git a/web-ui/app/locales/en_US/translation.json b/web-ui/app/locales/en_US/translation.json
index 22f533c0..14da9050 100644
--- a/web-ui/app/locales/en_US/translation.json
+++ b/web-ui/app/locales/en_US/translation.json
@@ -105,7 +105,8 @@
         "input-label1": "create new password",
         "input-label2": "confirm your new password",
         "button": "Next"
-      }
+      },
+      "back": "Back to previous step"
     },
     "backup-account": {
       "page-title": "Pixelated Backup Account",
diff --git a/web-ui/src/account_recovery/forms/new_password_form.js b/web-ui/src/account_recovery/forms/new_password_form.js
index 71239cfa..2d94f474 100644
--- a/web-ui/src/account_recovery/forms/new_password_form.js
+++ b/web-ui/src/account_recovery/forms/new_password_form.js
@@ -20,8 +20,9 @@ import { translate } from 'react-i18next';
 
 import InputField from 'src/common/input_field/input_field';
 import SubmitButton from 'src/common/submit_button/submit_button';
+import BackLink from 'src/common/back_link/back_link';
 
-export const NewPasswordForm = ({ t }) => (
+export const NewPasswordForm = ({ t, previous }) => (
   <form>
     <img
       className='account-recovery-progress'
@@ -32,11 +33,17 @@ export const NewPasswordForm = ({ t }) => (
     <InputField name='new-password' label={t('account-recovery.new-password-form.input-label1')} />
     <InputField name='confirm-password' label={t('account-recovery.new-password-form.input-label2')} />
     <SubmitButton buttonText={t('account-recovery.new-password-form.button')} />
+    <BackLink
+      text={t('account-recovery.back')}
+      onClick={previous} onKeyDown={previous}
+      role='button'
+    />
   </form>
 );
 
 NewPasswordForm.propTypes = {
-  t: React.PropTypes.func.isRequired
+  t: React.PropTypes.func.isRequired,
+  previous: React.PropTypes.func.isRequired
 };
 
 export default translate('', { wait: true })(NewPasswordForm);
diff --git a/web-ui/src/account_recovery/forms/new_password_form.spec.js b/web-ui/src/account_recovery/forms/new_password_form.spec.js
index a2986165..f9e54cc8 100644
--- a/web-ui/src/account_recovery/forms/new_password_form.spec.js
+++ b/web-ui/src/account_recovery/forms/new_password_form.spec.js
@@ -5,11 +5,13 @@ import { NewPasswordForm } from 'src/account_recovery/forms/new_password_form';
 
 describe('NewPasswordForm', () => {
   let newPasswordForm;
+  let mockPrevious;
 
   beforeEach(() => {
     const mockTranslations = key => key;
+    mockPrevious = expect.createSpy();
     newPasswordForm = shallow(
-      <NewPasswordForm t={mockTranslations} />
+      <NewPasswordForm t={mockTranslations} previous={mockPrevious} />
     );
   });
 
@@ -28,4 +30,14 @@ describe('NewPasswordForm', () => {
   it('renders submit button', () => {
     expect(newPasswordForm.find('SubmitButton').props().buttonText).toEqual('account-recovery.new-password-form.button');
   });
+
+  it('returns to previous step on link click', () => {
+    newPasswordForm.find('BackLink').simulate('click');
+    expect(mockPrevious).toHaveBeenCalled();
+  });
+
+  it('returns to previous step on key down', () => {
+    newPasswordForm.find('BackLink').simulate('keyDown');
+    expect(mockPrevious).toHaveBeenCalled();
+  });
 });
diff --git a/web-ui/src/account_recovery/forms/user_recovery_code_form.js b/web-ui/src/account_recovery/forms/user_recovery_code_form.js
index aaefd75d..008fa64f 100644
--- a/web-ui/src/account_recovery/forms/user_recovery_code_form.js
+++ b/web-ui/src/account_recovery/forms/user_recovery_code_form.js
@@ -20,10 +20,11 @@ import { translate } from 'react-i18next';
 
 import InputField from 'src/common/input_field/input_field';
 import SubmitButton from 'src/common/submit_button/submit_button';
+import BackLink from 'src/common/back_link/back_link';
 
 import './forms.scss';
 
-export const UserRecoveryCodeForm = ({ t, next }) => (
+export const UserRecoveryCodeForm = ({ t, previous, next }) => (
   <form className='user-code-form' onSubmit={next}>
     <img
       className='account-recovery-progress'
@@ -34,11 +35,17 @@ export const UserRecoveryCodeForm = ({ t, next }) => (
     <p>{t('account-recovery.user-form.description')}</p>
     <InputField name='admin-code' label={t('account-recovery.user-form.input-label')} />
     <SubmitButton buttonText={t('account-recovery.user-form.button')} />
+    <BackLink
+      text={t('account-recovery.back')}
+      onClick={previous} onKeyDown={previous}
+      role='button'
+    />
   </form>
 );
 
 UserRecoveryCodeForm.propTypes = {
   t: React.PropTypes.func.isRequired,
+  previous: React.PropTypes.func.isRequired,
   next: React.PropTypes.func.isRequired
 };
 
diff --git a/web-ui/src/account_recovery/forms/user_recovery_code_form.spec.js b/web-ui/src/account_recovery/forms/user_recovery_code_form.spec.js
index a20d3b7b..1aebb814 100644
--- a/web-ui/src/account_recovery/forms/user_recovery_code_form.spec.js
+++ b/web-ui/src/account_recovery/forms/user_recovery_code_form.spec.js
@@ -6,12 +6,16 @@ import { UserRecoveryCodeForm } from 'src/account_recovery/forms/user_recovery_c
 describe('UserRecoveryCodeForm', () => {
   let userRecoveryCodeForm;
   let mockNext;
+  let mockPrevious;
 
   beforeEach(() => {
     const mockTranslations = key => key;
     mockNext = expect.createSpy();
+    mockPrevious = expect.createSpy();
     userRecoveryCodeForm = shallow(
-      <UserRecoveryCodeForm t={mockTranslations} next={mockNext} />
+      <UserRecoveryCodeForm
+        t={mockTranslations} next={mockNext} previous={mockPrevious}
+      />
     );
   });
 
@@ -35,4 +39,14 @@ describe('UserRecoveryCodeForm', () => {
     userRecoveryCodeForm.find('form').simulate('submit');
     expect(mockNext).toHaveBeenCalled();
   });
+
+  it('returns to previous step on link click', () => {
+    userRecoveryCodeForm.find('BackLink').simulate('click');
+    expect(mockPrevious).toHaveBeenCalled();
+  });
+
+  it('returns to previous step on key down', () => {
+    userRecoveryCodeForm.find('BackLink').simulate('keyDown');
+    expect(mockPrevious).toHaveBeenCalled();
+  });
 });
diff --git a/web-ui/src/account_recovery/page.js b/web-ui/src/account_recovery/page.js
index f867fcd5..3043a38b 100644
--- a/web-ui/src/account_recovery/page.js
+++ b/web-ui/src/account_recovery/page.js
@@ -40,10 +40,14 @@ export class Page extends React.Component {
     this.setState({ step: this.state.step + 1 });
   }
 
+  previousStep = () => {
+    this.setState({ step: this.state.step - 1 });
+  }
+
   steps = {
     0: <AdminRecoveryCodeForm next={this.nextStep} />,
-    1: <UserRecoveryCodeForm next={this.nextStep} />,
-    2: <NewPasswordForm />
+    1: <UserRecoveryCodeForm previous={this.previousStep} next={this.nextStep} />,
+    2: <NewPasswordForm previous={this.previousStep} />
   }
 
   mainContent = () => this.steps[this.state.step];
diff --git a/web-ui/src/account_recovery/page.scss b/web-ui/src/account_recovery/page.scss
index a5d62e01..e7fa1ebb 100644
--- a/web-ui/src/account_recovery/page.scss
+++ b/web-ui/src/account_recovery/page.scss
@@ -66,20 +66,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/account_recovery/page.spec.js b/web-ui/src/account_recovery/page.spec.js
index f5e52c85..32e1477c 100644
--- a/web-ui/src/account_recovery/page.spec.js
+++ b/web-ui/src/account_recovery/page.spec.js
@@ -45,18 +45,29 @@ describe('Account Recovery Page', () => {
     it('renders user recovery code form when admin code submitted', () => {
       pageInstance.nextStep({ preventDefault: () => {} });
 
-      expect(page.find(AdminRecoveryCodeForm).length).toEqual(0);
       expect(page.find(UserRecoveryCodeForm).length).toEqual(1);
-      expect(page.find(NewPasswordForm).length).toEqual(0);
+    });
+
+    it('returns to admin code form on user code form back link', () => {
+      pageInstance.nextStep({ preventDefault: () => {} });
+      pageInstance.previousStep();
+
+      expect(page.find(AdminRecoveryCodeForm).length).toEqual(1);
     });
 
     it('renders new password form when user code submitted', () => {
       pageInstance.nextStep({ preventDefault: () => {} });
       pageInstance.nextStep({ preventDefault: () => {} });
 
-      expect(page.find(AdminRecoveryCodeForm).length).toEqual(0);
-      expect(page.find(UserRecoveryCodeForm).length).toEqual(0);
       expect(page.find(NewPasswordForm).length).toEqual(1);
     });
+
+    it('returns to user code form on new password form back link', () => {
+      pageInstance.nextStep({ preventDefault: () => {} });
+      pageInstance.nextStep({ preventDefault: () => {} });
+      pageInstance.previousStep();
+
+      expect(page.find(UserRecoveryCodeForm).length).toEqual(1);
+    });
   });
 });
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..b54386ac 100644
--- a/web-ui/src/backup_account/backup_email/backup_email.js
+++ b/web-ui/src/backup_account/backup_email/backup_email.js
@@ -18,11 +18,13 @@
 import 'isomorphic-fetch';
 import React from 'react';
 import { translate } from 'react-i18next';
-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 SubmitButton from 'src/common/submit_button/submit_button';
+import InputField from 'src/common/input_field/input_field';
+import BackLink from 'src/common/back_link/back_link';
+
 import './backup_email.scss';
 
 export class BackupEmail extends React.Component {
@@ -72,12 +74,10 @@ export class BackupEmail extends React.Component {
           <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} />
           <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/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/common/back_link/back_link.js b/web-ui/src/common/back_link/back_link.js
new file mode 100644
index 00000000..f3bdb2b5
--- /dev/null
+++ b/web-ui/src/common/back_link/back_link.js
@@ -0,0 +1,35 @@
+/*
+ * Copyright (c) 2017 ThoughtWorks, Inc.
+ *
+ * Pixelated is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Affero General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * Pixelated is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with Pixelated. If not, see <http://www.gnu.org/licenses/>.
+ */
+
+import React from 'react';
+
+import './back_link.scss';
+
+const BackLink = ({ text, ...other }) => (
+  <div className='link-content'>
+    <a className='link' tabIndex='0' {...other}>
+      <i className='fa fa-angle-left' aria-hidden='true' />
+      <span>{text}</span>
+    </a>
+  </div>
+);
+
+BackLink.propTypes = {
+  text: React.PropTypes.string.isRequired
+};
+
+export default BackLink;
diff --git a/web-ui/src/common/back_link/back_link.scss b/web-ui/src/common/back_link/back_link.scss
new file mode 100644
index 00000000..a799a710
--- /dev/null
+++ b/web-ui/src/common/back_link/back_link.scss
@@ -0,0 +1,31 @@
+/*
+ * Copyright (c) 2017 ThoughtWorks, Inc.
+ *
+ * Pixelated is free software: you can redistribute it and/or modify
+ * it under the terms of the GNU Affero General Public License as published by
+ * the Free Software Foundation, either version 3 of the License, or
+ * (at your option) any later version.
+ *
+ * Pixelated is distributed in the hope that it will be useful,
+ * but WITHOUT ANY WARRANTY; without even the implied warranty of
+ * MERCHANTABILITY or FITNESS FOR A PARTICULAR PURPOSE.  See the
+ * GNU Affero General Public License for more details.
+ *
+ * You should have received a copy of the GNU Affero General Public License
+ * along with Pixelated. If not, see <http://www.gnu.org/licenses/>.
+ */
+
+@import "~scss/base/colors";
+
+.link {
+  color: $dark_blue;
+  font-style: italic;
+  font-size: 0.8em;
+
+  .fa {
+    font-size: 1.6em;
+    position: relative;
+    top: 3px;
+    margin-right: 0.3em;
+  }
+}
diff --git a/web-ui/src/common/back_link/back_link.spec.js b/web-ui/src/common/back_link/back_link.spec.js
new file mode 100644
index 00000000..ee659267
--- /dev/null
+++ b/web-ui/src/common/back_link/back_link.spec.js
@@ -0,0 +1,20 @@
+import { shallow } from 'enzyme';
+import expect from 'expect';
+import React from 'react';
+import BackLink from 'src/common/back_link/back_link';
+
+describe('BackLink', () => {
+  let backLink;
+
+  beforeEach(() => {
+    backLink = shallow(<BackLink text='Back to inbox' href='/' />);
+  });
+
+  it('renders link with text', () => {
+    expect(backLink.find('a').text()).toEqual('Back to inbox');
+  });
+
+  it('adds link action', () => {
+    expect(backLink.find('a').props().href).toEqual('/');
+  });
+});