[#932] Adds back link to account recovery steps

7 files changed, 66 insertions, 25 deletions

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);
+    });
   });
 });