summaryrefslogtreecommitdiff
path: root/web-ui
diff options
context:
space:
mode:
authorAnike Arni <aarni@thoughtworks.com>2017-03-28 15:33:55 -0300
committerAnike Arni <aarni@thoughtworks.com>2017-03-28 18:06:41 -0300
commit1ec36fb45d48cadd98ec7188414fa6de4d9455ad (patch)
treeab683719ccbe6a09de4fd1058009b148ec2d0f40 /web-ui
parent9f0b66ae8fa5daac158f7c74919c0636882a550f (diff)
[#932] Adds back link to account recovery steps
Diffstat (limited to 'web-ui')
-rw-r--r--web-ui/app/locales/en_US/translation.json3
-rw-r--r--web-ui/src/account_recovery/forms/new_password_form.js11
-rw-r--r--web-ui/src/account_recovery/forms/new_password_form.spec.js14
-rw-r--r--web-ui/src/account_recovery/forms/user_recovery_code_form.js9
-rw-r--r--web-ui/src/account_recovery/forms/user_recovery_code_form.spec.js16
-rw-r--r--web-ui/src/account_recovery/page.js8
-rw-r--r--web-ui/src/account_recovery/page.scss14
-rw-r--r--web-ui/src/account_recovery/page.spec.js19
-rw-r--r--web-ui/src/backup_account/backup_email/backup_email.js16
-rw-r--r--web-ui/src/backup_account/page.scss14
-rw-r--r--web-ui/src/common/back_link/back_link.js35
-rw-r--r--web-ui/src/common/back_link/back_link.scss31
-rw-r--r--web-ui/src/common/back_link/back_link.spec.js20
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('/');
+ });
+});