diff options
Diffstat (limited to 'web-ui/src/account_recovery/forms')
4 files changed, 45 insertions, 5 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(); + }); }); |