[#938] Adds backup account step to forgot password flow

with @anikarni

2 files changed, 15 insertions, 3 deletions

diff --git a/web-ui/src/account_recovery/new_password_form/new_password_form.js b/web-ui/src/account_recovery/new_password_form/new_password_form.js
index 4c418900..e7f689e8 100644
--- a/web-ui/src/account_recovery/new_password_form/new_password_form.js
+++ b/web-ui/src/account_recovery/new_password_form/new_password_form.js
@@ -28,11 +28,12 @@ import './new_password_form.scss';
 
 export class NewPasswordForm extends React.Component {
   submitHandler = (event) => {
+    event.preventDefault();
     submitForm(event, '/account-recovery', {
       userCode: this.props.userCode,
       password: this.state.password,
       confirmation: this.state.confirmation
-    });
+    }).then(() => this.props.next());
   }
 
   handlePasswordChange = (event) => {
@@ -72,6 +73,7 @@ export class NewPasswordForm extends React.Component {
 
 NewPasswordForm.propTypes = {
   t: React.PropTypes.func.isRequired,
+  next: React.PropTypes.func.isRequired,
   previous: React.PropTypes.func.isRequired,
   userCode: React.PropTypes.string.isRequired
 };
diff --git a/web-ui/src/account_recovery/new_password_form/new_password_form.spec.js b/web-ui/src/account_recovery/new_password_form/new_password_form.spec.js
index 26b8651c..b57dd42e 100644
--- a/web-ui/src/account_recovery/new_password_form/new_password_form.spec.js
+++ b/web-ui/src/account_recovery/new_password_form/new_password_form.spec.js
@@ -7,9 +7,11 @@ import { NewPasswordForm } from './new_password_form';
 describe('NewPasswordForm', () => {
   let newPasswordForm;
   let mockPrevious;
+  let mockNext;
+  let mockTranslations;
 
   beforeEach(() => {
-    const mockTranslations = key => key;
+    mockTranslations = key => key;
     mockPrevious = expect.createSpy();
     newPasswordForm = shallow(
       <NewPasswordForm t={mockTranslations} previous={mockPrevious} userCode='def234' />
@@ -40,7 +42,11 @@ describe('NewPasswordForm', () => {
   });
 
   describe('Submit', () => {
-    beforeEach(() => {
+    beforeEach((done) => {
+      mockNext = expect.createSpy().andCall(() => done());
+      newPasswordForm = shallow(
+        <NewPasswordForm t={mockTranslations} previous={mockPrevious} userCode='def234' next={mockNext} />
+      );
       fetchMock.post('/account-recovery', 200);
       newPasswordForm.find('InputField[name="new-password"]').simulate('change', { target: { value: '123' } });
       newPasswordForm.find('InputField[name="confirm-password"]').simulate('change', { target: { value: '456' } });
@@ -62,5 +68,9 @@ describe('NewPasswordForm', () => {
     it('sends password confirmation as content', () => {
       expect(fetchMock.lastOptions('/account-recovery').body).toContain('"confirmation":"456"');
     });
+
+    it('calls next handler on success', () => {
+      expect(mockNext).toHaveBeenCalled();
+    });
   });
 });