diff options
Diffstat (limited to 'web-ui/src')
21 files changed, 807 insertions, 73 deletions
diff --git a/web-ui/src/account_recovery/forms/admin_recovery_code_form.js b/web-ui/src/account_recovery/forms/admin_recovery_code_form.js new file mode 100644 index 00000000..3d97b191 --- /dev/null +++ b/web-ui/src/account_recovery/forms/admin_recovery_code_form.js @@ -0,0 +1,54 @@ +/* + * 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 { translate } from 'react-i18next'; + +import InputField from 'src/common/input_field/input_field'; +import SubmitButton from 'src/common/submit_button/submit_button'; + +import './forms.scss'; + +export const AdminRecoveryCodeForm = ({ t, next }) => ( + <form className='account-recovery-form admin-code' onSubmit={next}> + <img + className='account-recovery-progress' + src='/public/images/account-recovery/step_1.svg' + alt={t('account-recovery.admin-form.image-description')} + /> + <h1>{t('account-recovery.admin-form.title')}</h1> + <img + className='admin-codes-image' + src='/public/images/account-recovery/admins_contact.svg' + alt='' + /> + <ul> + <li>{t('account-recovery.admin-form.tip1')}</li> + <li>{t('account-recovery.admin-form.tip2')}</li> + <li>{t('account-recovery.admin-form.tip3')}</li> + </ul> + <InputField name='admin-code' label={t('account-recovery.admin-form.input-label')} /> + <SubmitButton buttonText={t('account-recovery.admin-form.button')} /> + </form> +); + +AdminRecoveryCodeForm.propTypes = { + t: React.PropTypes.func.isRequired, + next: React.PropTypes.func.isRequired +}; + +export default translate('', { wait: true })(AdminRecoveryCodeForm); diff --git a/web-ui/src/account_recovery/forms/admin_recovery_code_form.spec.js b/web-ui/src/account_recovery/forms/admin_recovery_code_form.spec.js new file mode 100644 index 00000000..0e922212 --- /dev/null +++ b/web-ui/src/account_recovery/forms/admin_recovery_code_form.spec.js @@ -0,0 +1,38 @@ +import { shallow } from 'enzyme'; +import expect from 'expect'; +import React from 'react'; +import { AdminRecoveryCodeForm } from 'src/account_recovery/forms/admin_recovery_code_form'; + +describe('AdminRecoveryCodeForm', () => { + let adminRecoveryCodeForm; + let mockNext; + + beforeEach(() => { + const mockTranslations = key => key; + mockNext = expect.createSpy(); + adminRecoveryCodeForm = shallow( + <AdminRecoveryCodeForm t={mockTranslations} next={mockNext} /> + ); + }); + + it('renders title for admin recovery code', () => { + expect(adminRecoveryCodeForm.find('h1').text()).toEqual('account-recovery.admin-form.title'); + }); + + it('renders tips for retrieving recovery code', () => { + expect(adminRecoveryCodeForm.find('li').length).toEqual(3); + }); + + it('renders input field for admin code', () => { + expect(adminRecoveryCodeForm.find('InputField').props().name).toEqual('admin-code'); + }); + + it('renders button for next step', () => { + expect(adminRecoveryCodeForm.find('SubmitButton').props().buttonText).toEqual('account-recovery.admin-form.button'); + }); + + it('submits form to next step', () => { + adminRecoveryCodeForm.find('form').simulate('submit'); + expect(mockNext).toHaveBeenCalled(); + }); +}); diff --git a/web-ui/src/account_recovery/forms/forms.scss b/web-ui/src/account_recovery/forms/forms.scss new file mode 100644 index 00000000..09d8f2ce --- /dev/null +++ b/web-ui/src/account_recovery/forms/forms.scss @@ -0,0 +1,92 @@ +/* + * 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/>. + */ + +.account-recovery-form { + display: flex; + flex-direction: column; + + img { + margin: 1em 0; + align-self: center; + } + + .user-code-form-content { + display: flex; + flex-direction: column; + align-items: center; + } + + .account-recovery-progress { + width: 100%; + } + + .admin-code-image { + height: 2.7em; + } + + .user-code-image { + height: 4em; + } + + .input-field-group { + margin-top: 0; + } +} + +.new-password { + .input-field-group:first-of-type { + margin-bottom: 0; + } +} + +@media only screen and (min-width : 500px) { + .account-recovery-form { + align-items: center; + + .account-recovery-progress, h1 { + width: 80%; + } + + .user-code-form-content { + flex-direction: row; + width: 80%; + + img { + margin: 1.6em; + } + } + } +} + +@media only screen and (min-width : 960px) { + .account-recovery-form { + .account-recovery-progress { + width: 80%; + margin-top: 0; + } + + h1 { + max-width: 80%; + width: auto; + } + + .input-field-group, .submit-button { + width: 60%; + align-self: center; + } + } +} diff --git a/web-ui/src/account_recovery/forms/new_password_form.js b/web-ui/src/account_recovery/forms/new_password_form.js new file mode 100644 index 00000000..114366b3 --- /dev/null +++ b/web-ui/src/account_recovery/forms/new_password_form.js @@ -0,0 +1,55 @@ +/* + * 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 { 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, previous }) => ( + <form className='account-recovery-form new-password'> + <img + className='account-recovery-progress' + src='/public/images/account-recovery/step_3.svg' + alt={t('account-recovery.new-password.image-description')} + /> + <h1>{t('account-recovery.new-password-form.title')}</h1> + <InputField + type='password' name='new-password' + label={t('account-recovery.new-password-form.input-label1')} + /> + <InputField + type='password' 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, + 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 new file mode 100644 index 00000000..5ac96b40 --- /dev/null +++ b/web-ui/src/account_recovery/forms/new_password_form.spec.js @@ -0,0 +1,45 @@ +import { shallow } from 'enzyme'; +import expect from 'expect'; +import React from 'react'; +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} previous={mockPrevious} /> + ); + }); + + it('renders title for new password form', () => { + expect(newPasswordForm.find('h1').text()).toEqual('account-recovery.new-password-form.title'); + }); + + it('renders input for new password', () => { + expect(newPasswordForm.find('InputField').at(0).props().type).toEqual('password'); + expect(newPasswordForm.find('InputField').at(0).props().label).toEqual('account-recovery.new-password-form.input-label1'); + }); + + it('renders input to confirm new password', () => { + expect(newPasswordForm.find('InputField').at(1).props().type).toEqual('password'); + expect(newPasswordForm.find('InputField').at(1).props().label).toEqual('account-recovery.new-password-form.input-label2'); + }); + + 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 new file mode 100644 index 00000000..30525cdf --- /dev/null +++ b/web-ui/src/account_recovery/forms/user_recovery_code_form.js @@ -0,0 +1,59 @@ +/* + * 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 { 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, previous, next }) => ( + <form className='account-recovery-form user-code' onSubmit={next}> + <img + className='account-recovery-progress' + src='/public/images/account-recovery/step_2.svg' + alt={t('account-recovery.user-form.image-description')} + /> + <h1>{t('account-recovery.user-form.title')}</h1> + <div className='user-code-form-content'> + <img + className='user-codes-image' + src='/public/images/account-recovery/codes.svg' + alt='' + /> + <p>{t('account-recovery.user-form.description')}</p> + </div> + <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 +}; + +export default translate('', { wait: true })(UserRecoveryCodeForm); 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 new file mode 100644 index 00000000..1aebb814 --- /dev/null +++ b/web-ui/src/account_recovery/forms/user_recovery_code_form.spec.js @@ -0,0 +1,52 @@ +import { shallow } from 'enzyme'; +import expect from 'expect'; +import React from 'react'; +import { UserRecoveryCodeForm } from 'src/account_recovery/forms/user_recovery_code_form'; + +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} previous={mockPrevious} + /> + ); + }); + + it('renders title for user recovery code', () => { + expect(userRecoveryCodeForm.find('h1').text()).toEqual('account-recovery.user-form.title'); + }); + + it('renders description', () => { + expect(userRecoveryCodeForm.find('p').text()).toEqual('account-recovery.user-form.description'); + }); + + it('renders input for user code', () => { + expect(userRecoveryCodeForm.find('InputField').props().label).toEqual('account-recovery.user-form.input-label'); + }); + + it('renders submit button', () => { + expect(userRecoveryCodeForm.find('SubmitButton').props().buttonText).toEqual('account-recovery.user-form.button'); + }); + + it('submits form to next step', () => { + 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 c77da0b6..3043a38b 100644 --- a/web-ui/src/account_recovery/page.js +++ b/web-ui/src/account_recovery/page.js @@ -18,22 +18,57 @@ import React from 'react'; import { translate } from 'react-i18next'; import DocumentTitle from 'react-document-title'; -import Footer from 'src/common/footer/footer'; import Header from 'src/common/header/header'; +import AdminRecoveryCodeForm from 'src/account_recovery/forms/admin_recovery_code_form'; +import UserRecoveryCodeForm from 'src/account_recovery/forms/user_recovery_code_form'; +import NewPasswordForm from 'src/account_recovery/forms/new_password_form'; +import Footer from 'src/common/footer/footer'; import 'font-awesome/scss/font-awesome.scss'; import './page.scss'; -export const Page = ({ t }) => ( - <DocumentTitle title={t('account-recovery.page-title')}> - <div className='page'> - <Header /> - <section /> - <Footer /> - </div> - </DocumentTitle> -); +export class Page extends React.Component { + + constructor(props) { + super(props); + this.state = { step: 0 }; + } + + nextStep = (event) => { + event.preventDefault(); + this.setState({ step: this.state.step + 1 }); + } + + previousStep = () => { + this.setState({ step: this.state.step - 1 }); + } + + steps = { + 0: <AdminRecoveryCodeForm next={this.nextStep} />, + 1: <UserRecoveryCodeForm previous={this.previousStep} next={this.nextStep} />, + 2: <NewPasswordForm previous={this.previousStep} /> + } + + mainContent = () => this.steps[this.state.step]; + + render() { + const t = this.props.t; + return ( + <DocumentTitle title={t('account-recovery.page-title')}> + <div className='page'> + <Header /> + <section> + <div className='container'> + {this.mainContent()} + </div> + </section> + <Footer /> + </div> + </DocumentTitle> + ); + } +} Page.propTypes = { t: React.PropTypes.func.isRequired diff --git a/web-ui/src/account_recovery/page.scss b/web-ui/src/account_recovery/page.scss index 71e3f074..20604b70 100644 --- a/web-ui/src/account_recovery/page.scss +++ b/web-ui/src/account_recovery/page.scss @@ -35,6 +35,8 @@ a { background: $white; margin: 3% auto; box-shadow: 0 2px 3px 0 $shadow; + width: 84%; + padding: 6% 5%; } .page { @@ -64,22 +66,16 @@ 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; } } + +@media only screen and (min-width : 960px) { + .container { + width: 60%; + max-width: 700px; + padding: 3em; + } +} diff --git a/web-ui/src/account_recovery/page.spec.js b/web-ui/src/account_recovery/page.spec.js index b34f0f32..32e1477c 100644 --- a/web-ui/src/account_recovery/page.spec.js +++ b/web-ui/src/account_recovery/page.spec.js @@ -1,7 +1,13 @@ import { shallow } from 'enzyme'; import expect from 'expect'; import React from 'react'; + import { Page } from 'src/account_recovery/page'; +import Header from 'src/common/header/header'; +import AdminRecoveryCodeForm from 'src/account_recovery/forms/admin_recovery_code_form'; +import UserRecoveryCodeForm from 'src/account_recovery/forms/user_recovery_code_form'; +import NewPasswordForm from 'src/account_recovery/forms/new_password_form'; +import Footer from 'src/common/footer/footer'; describe('Account Recovery Page', () => { let page; @@ -14,4 +20,54 @@ describe('Account Recovery Page', () => { it('renders account recovery page title', () => { expect(page.props().title).toEqual('account-recovery.page-title'); }); + + it('renders header', () => { + expect(page.find(Header).length).toEqual(1); + }); + + it('renders footer', () => { + expect(page.find(Footer).length).toEqual(1); + }); + + context('main content', () => { + let pageInstance; + + beforeEach(() => { + pageInstance = page.instance(); + }); + + it('renders admin recovery code form as default form', () => { + expect(page.find(AdminRecoveryCodeForm).length).toEqual(1); + expect(page.find(UserRecoveryCodeForm).length).toEqual(0); + expect(page.find(NewPasswordForm).length).toEqual(0); + }); + + it('renders user recovery code form when admin code submitted', () => { + pageInstance.nextStep({ preventDefault: () => {} }); + + expect(page.find(UserRecoveryCodeForm).length).toEqual(1); + }); + + 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(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..9d622d8d 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 { @@ -40,7 +42,7 @@ export class BackupEmail extends React.Component { error: !emptyEmail && !validEmail ? t('backup-account.backup-email.error.invalid-email') : '', submitButtonDisabled: !validEmail || emptyEmail }); - } + }; submitHandler = (event) => { event.preventDefault(); @@ -54,8 +56,14 @@ export class BackupEmail extends React.Component { body: JSON.stringify({ csrftoken: [browser.getCookie('XSRF-TOKEN')] }) - }).then(() => this.props.onSubmit('success')); - } + }).then((response) => { + if (response.ok) { + this.props.onSubmit('success'); + } else { + this.props.onSubmit('error'); + } + }); + }; render() { const t = this.props.t; @@ -72,12 +80,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/backup_email/backup_email.spec.js b/web-ui/src/backup_account/backup_email/backup_email.spec.js index 48199738..65fad608 100644 --- a/web-ui/src/backup_account/backup_email/backup_email.spec.js +++ b/web-ui/src/backup_account/backup_email/backup_email.spec.js @@ -87,39 +87,61 @@ describe('BackupEmail', () => { describe('Submit', () => { let preventDefaultSpy; - beforeEach((done) => { - mockOnSubmit = expect.createSpy().andCall(() => done()); + beforeEach(() => { preventDefaultSpy = expect.createSpy(); - expect.spyOn(browser, 'getCookie').andReturn('abc123'); + }); - backupEmail = shallow(<BackupEmail t={mockTranslations} onSubmit={mockOnSubmit} />); + context('on success', () => { + beforeEach((done) => { + mockOnSubmit = expect.createSpy().andCall(() => done()); + expect.spyOn(browser, 'getCookie').andReturn('abc123'); - fetchMock.post('/backup-account', 204); - backupEmail.find('form').simulate('submit', { preventDefault: preventDefaultSpy }); - }); + fetchMock.post('/backup-account', 204); + backupEmail = shallow(<BackupEmail t={mockTranslations} onSubmit={mockOnSubmit} />); + backupEmail.find('form').simulate('submit', { preventDefault: preventDefaultSpy }); + }); - it('posts backup email', () => { - expect(fetchMock.called('/backup-account')).toBe(true, 'Backup account POST was not called'); - }); + it('posts backup email', () => { + expect(fetchMock.called('/backup-account')).toBe(true, 'Backup account POST was not called'); + }); - it('sends csrftoken as content', () => { - expect(fetchMock.lastOptions('/backup-account').body).toContain('"csrftoken":["abc123"]'); - }); + it('sends csrftoken as content', () => { + expect(fetchMock.lastOptions('/backup-account').body).toContain('"csrftoken":["abc123"]'); + }); - it('sends content-type header', () => { - expect(fetchMock.lastOptions('/backup-account').headers['Content-Type']).toEqual('application/json'); - }); + it('sends content-type header', () => { + expect(fetchMock.lastOptions('/backup-account').headers['Content-Type']).toEqual('application/json'); + }); - it('sends same origin headers', () => { - expect(fetchMock.lastOptions('/backup-account').credentials).toEqual('same-origin'); - }); + it('sends same origin headers', () => { + expect(fetchMock.lastOptions('/backup-account').credentials).toEqual('same-origin'); + }); + + it('prevents default call to refresh page', () => { + expect(preventDefaultSpy).toHaveBeenCalled(); + }); - it('prevents default call to refresh page', () => { - expect(preventDefaultSpy).toHaveBeenCalled(); + it('calls onSubmit from props with success', () => { + expect(mockOnSubmit).toHaveBeenCalledWith('success'); + }); }); - it('calls onSubmit from props when success', () => { - expect(mockOnSubmit).toHaveBeenCalledWith('success'); + context('on error', () => { + beforeEach((done) => { + mockOnSubmit = expect.createSpy().andCall(() => done()); + + fetchMock.post('/backup-account', 500); + backupEmail = shallow(<BackupEmail t={mockTranslations} onSubmit={mockOnSubmit} />); + backupEmail.find('form').simulate('submit', { preventDefault: preventDefaultSpy }); + }); + + it('calls onSubmit from props with error', () => { + expect(mockOnSubmit).toHaveBeenCalledWith('error'); + }); }); }); + + afterEach(() => { + fetchMock.restore(); + }); }); diff --git a/web-ui/src/backup_account/page.js b/web-ui/src/backup_account/page.js index 49e4b316..be3bae36 100644 --- a/web-ui/src/backup_account/page.js +++ b/web-ui/src/backup_account/page.js @@ -22,6 +22,7 @@ import Footer from 'src/common/footer/footer'; import Header from 'src/common/header/header'; import BackupEmail from 'src/backup_account/backup_email/backup_email'; import Confirmation from 'src/backup_account/confirmation/confirmation'; +import SnackbarNotification from 'src/common/snackbar_notification/snackbar_notification'; import 'font-awesome/scss/font-awesome.scss'; import './page.scss'; @@ -36,13 +37,20 @@ export class Page extends React.Component { saveBackupEmail = (status) => { this.setState({ status }); - } + }; mainContent = () => { if (this.state.status === 'success') return <Confirmation />; return <BackupEmail onSubmit={this.saveBackupEmail} />; }; + showSnackbarOnError = (t) => { + if (this.state.status === 'error') { + return <SnackbarNotification message={t('backup-account.error.submit-error')} isError />; + } + return undefined; // To satisfy eslint error - consistent-return + }; + render() { const t = this.props.t; return ( @@ -52,6 +60,7 @@ export class Page extends React.Component { <section> {this.mainContent()} </section> + {this.showSnackbarOnError(t)} <Footer /> </div> </DocumentTitle> 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/backup_account/page.spec.js b/web-ui/src/backup_account/page.spec.js index bd7bb884..2933a64e 100644 --- a/web-ui/src/backup_account/page.spec.js +++ b/web-ui/src/backup_account/page.spec.js @@ -4,6 +4,7 @@ import React from 'react'; import { Page } from 'src/backup_account/page'; import BackupEmail from 'src/backup_account/backup_email/backup_email'; import Confirmation from 'src/backup_account/confirmation/confirmation'; +import SnackbarNotification from 'src/common/snackbar_notification/snackbar_notification'; describe('BackupAccount', () => { let page; @@ -41,5 +42,29 @@ describe('BackupAccount', () => { pageInstance.saveBackupEmail('success'); expect(page.find(Confirmation).length).toEqual(1); }); + + context('on submit error', () => { + beforeEach(() => { + pageInstance.saveBackupEmail('error'); + }); + + it('returns snackbar component on error', () => { + const snackbar = pageInstance.showSnackbarOnError(pageInstance.props.t); + expect(snackbar).toEqual(<SnackbarNotification message='backup-account.error.submit-error' isError />); + }); + + it('returns nothing when there is no error', () => { + pageInstance.saveBackupEmail('success'); + const snackbar = pageInstance.showSnackbarOnError(pageInstance.props.t); + expect(snackbar).toEqual(undefined); + }); + + it('renders snackbar notification on error', () => { + const snackbar = page.find(SnackbarNotification); + expect(snackbar).toExist(); + expect(snackbar.props().message).toEqual('backup-account.error.submit-error'); + expect(snackbar.props().isError).toEqual(true); + }); + }); }); }); 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('/'); + }); +}); diff --git a/web-ui/src/common/snackbar_notification/snackbar_notification.js b/web-ui/src/common/snackbar_notification/snackbar_notification.js new file mode 100644 index 00000000..8a7e5094 --- /dev/null +++ b/web-ui/src/common/snackbar_notification/snackbar_notification.js @@ -0,0 +1,65 @@ +/* + * 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 Snackbar from 'material-ui/Snackbar'; +import { red500, blue500 } from 'material-ui/styles/colors'; + +import './snackbar_notification.scss'; + +const notificationStyle = () => ({ + top: 0, + left: 'auto', + bottom: 'auto', + alignSelf: 'center', + transform: 'translate3d(0, 0px, 0)' +}); + +const contentStyle = { + textAlign: 'center' +}; + +const getStyleByType = (isError) => { + const style = { height: 'auto' }; + style.backgroundColor = isError ? red500 : blue500; + return style; +}; + +const SnackbarNotification = ({ message, isError = false, autoHideDuration = 5000 }) => ( + <Snackbar + id='snackbar' + open + bodyStyle={getStyleByType(isError)} + message={message} + autoHideDuration={autoHideDuration} + contentStyle={contentStyle} + style={notificationStyle()} + /> +); + +SnackbarNotification.propTypes = { + message: React.PropTypes.string.isRequired, + isError: React.PropTypes.bool, + autoHideDuration: React.PropTypes.number +}; + +SnackbarNotification.defaultProps = { + isError: false, + autoHideDuration: 5000 +}; + +export default SnackbarNotification; diff --git a/web-ui/src/common/snackbar_notification/snackbar_notification.scss b/web-ui/src/common/snackbar_notification/snackbar_notification.scss new file mode 100644 index 00000000..e37ba4ae --- /dev/null +++ b/web-ui/src/common/snackbar_notification/snackbar_notification.scss @@ -0,0 +1,22 @@ +/* + * 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/>. + */ + +//TODO: Refer to Issue - https://github.com/callemall/material-ui/issues/3860 +#snackbar > div { + line-height: 20px !important; + padding: 24px !important; +} diff --git a/web-ui/src/common/snackbar_notification/snackbar_notification.spec.js b/web-ui/src/common/snackbar_notification/snackbar_notification.spec.js new file mode 100644 index 00000000..24b79e71 --- /dev/null +++ b/web-ui/src/common/snackbar_notification/snackbar_notification.spec.js @@ -0,0 +1,31 @@ +import { shallow } from 'enzyme'; +import expect from 'expect'; +import React from 'react'; +import SnackbarNotification from 'src/common/snackbar_notification/snackbar_notification'; +import Snackbar from 'material-ui/Snackbar'; +import { red500 } from 'material-ui/styles/colors'; + +describe('SnackbarNotification', () => { + let snackbarNotification; + + beforeEach(() => { + snackbarNotification = shallow(<SnackbarNotification message={'Error Message'} isError />); + }); + + it('renders snackbar with error message', () => { + expect(snackbarNotification.find(Snackbar).props().message).toEqual('Error Message'); + }); + + it('renders snackbar with open as true', () => { + expect(snackbarNotification.find(Snackbar).props().open).toEqual(true); + }); + + it('renders snackbar with error body style', () => { + expect(snackbarNotification.find(Snackbar).props().bodyStyle) + .toEqual({ height: 'auto', backgroundColor: red500 }); + }); + + it('renders snackbar with default auto-hide duration', () => { + expect(snackbarNotification.find(Snackbar).props().autoHideDuration).toEqual(5000); + }); +}); |