From 1ec36fb45d48cadd98ec7188414fa6de4d9455ad Mon Sep 17 00:00:00 2001 From: Anike Arni Date: Tue, 28 Mar 2017 15:33:55 -0300 Subject: [#932] Adds back link to account recovery steps --- web-ui/app/locales/en_US/translation.json | 3 +- .../account_recovery/forms/new_password_form.js | 11 +++++-- .../forms/new_password_form.spec.js | 14 ++++++++- .../forms/user_recovery_code_form.js | 9 +++++- .../forms/user_recovery_code_form.spec.js | 16 +++++++++- web-ui/src/account_recovery/page.js | 8 +++-- web-ui/src/account_recovery/page.scss | 14 --------- web-ui/src/account_recovery/page.spec.js | 19 +++++++++--- .../backup_account/backup_email/backup_email.js | 16 +++++----- web-ui/src/backup_account/page.scss | 14 --------- web-ui/src/common/back_link/back_link.js | 35 ++++++++++++++++++++++ web-ui/src/common/back_link/back_link.scss | 31 +++++++++++++++++++ web-ui/src/common/back_link/back_link.spec.js | 20 +++++++++++++ 13 files changed, 162 insertions(+), 48 deletions(-) create mode 100644 web-ui/src/common/back_link/back_link.js create mode 100644 web-ui/src/common/back_link/back_link.scss create mode 100644 web-ui/src/common/back_link/back_link.spec.js (limited to 'web-ui') 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 }) => (
( + ); 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( - + ); }); @@ -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 }) => (
(

{t('account-recovery.user-form.description')}

+ ); 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( - + ); }); @@ -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: , - 1: , - 2: + 1: , + 2: } 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 {

{t('backup-account.backup-email.paragraph2')}

-