diff options
Diffstat (limited to 'web-ui/src')
-rw-r--r-- | web-ui/src/backup_account/backup_email/backup_email.js | 15 | ||||
-rw-r--r-- | web-ui/src/backup_account/backup_email/backup_email.scss | 75 | ||||
-rw-r--r-- | web-ui/src/backup_account/backup_email/backup_email.spec.js | 12 | ||||
-rw-r--r-- | web-ui/src/backup_account/confirmation/confirmation.js | 45 | ||||
-rw-r--r-- | web-ui/src/backup_account/confirmation/confirmation.scss | 60 | ||||
-rw-r--r-- | web-ui/src/backup_account/confirmation/confirmation.spec.js | 29 | ||||
-rw-r--r-- | web-ui/src/backup_account/page.js | 14 | ||||
-rw-r--r-- | web-ui/src/backup_account/page.scss | 62 | ||||
-rw-r--r-- | web-ui/src/backup_account/page.spec.js | 28 |
9 files changed, 280 insertions, 60 deletions
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 3d5df1b0..05cba35e 100644 --- a/web-ui/src/backup_account/backup_email/backup_email.js +++ b/web-ui/src/backup_account/backup_email/backup_email.js @@ -21,6 +21,7 @@ import SubmitButton from 'src/common/submit_button/submit_button'; import InputField from 'src/common/input_field/input_field'; import validator from 'validator'; +import './backup_email.scss'; export class BackupEmail extends React.Component { @@ -39,16 +40,23 @@ export class BackupEmail extends React.Component { }); } + submitHandler = (event) => { + event.preventDefault(); + if (typeof this.props.onSubmit === 'function') { + this.props.onSubmit(); + } + } + render() { const t = this.props.t; return ( - <div className='container'> + <div className='container backup-email-container'> <img className='backup-account-image' src='/public/images/forgot-my-password.svg' alt={t('backup-account.backup-email.image-description')} /> - <form> + <form onSubmit={this.submitHandler}> <h1>{t('backup-account.backup-email.title')}</h1> <p>{t('backup-account.backup-email.paragraph1')}</p> <p>{t('backup-account.backup-email.paragraph2')}</p> @@ -68,7 +76,8 @@ export class BackupEmail extends React.Component { BackupEmail.propTypes = { - t: React.PropTypes.func.isRequired + t: React.PropTypes.func.isRequired, + onSubmit: React.PropTypes.func.isRequired }; export default translate('', { wait: true })(BackupEmail); diff --git a/web-ui/src/backup_account/backup_email/backup_email.scss b/web-ui/src/backup_account/backup_email/backup_email.scss new file mode 100644 index 00000000..a7e09ba3 --- /dev/null +++ b/web-ui/src/backup_account/backup_email/backup_email.scss @@ -0,0 +1,75 @@ +/* + * 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/vendor/reset"; +@import "~scss/base/colors"; +@import "~scss/base/fonts"; + + +form { + width: 100%; +} + +.backup-email-container { + width: 84%; + padding: 6% 5%; + display: flex; + align-items: flex-start; + flex-direction: column; +} + +.backup-account-image { + width: 50%; + height: 100%; + align-self: center; +} + +@media only screen and (min-width : 500px) { + form { + display: flex; + flex-direction: column; + + .input-field-group, .submit-button, .link-content { + width: 70%; + align-self: center; + } + } +} + +@media only screen and (min-width : 960px) { + .backup-email-container{ + width: 60%; + max-width: 700px; + padding: 3em; + align-items: flex-start; + flex-direction: row; + + form { + margin-left: 2.5em; + min-height: 492px; + + .input-field-group, .submit-button, .link-content { + width: 300px; + align-self: flex-start; + } + } + } + + .backup-account-image { + width: 300px; + } +} 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 b2b297f4..8732003b 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 @@ -5,9 +5,10 @@ import { BackupEmail } from 'src/backup_account/backup_email/backup_email'; describe('BackupEmail', () => { let page; + let mockTranslations; beforeEach(() => { - const mockTranslations = key => key; + mockTranslations = key => key; page = shallow(<BackupEmail t={mockTranslations} />); }); @@ -23,6 +24,15 @@ describe('BackupEmail', () => { expect(page.find('SubmitButton').props().buttonText).toEqual('backup-account.backup-email.button'); }); + it('form submit should call parameter custom submit', () => { + const mockOnSubmit = expect.createSpy(); + const event = { preventDefault() {} }; + page = shallow(<BackupEmail t={mockTranslations} onSubmit={mockOnSubmit} />); + + page.instance().submitHandler(event); + expect(mockOnSubmit).toHaveBeenCalled(); + }); + describe('Email validation', () => { let pageInstance; diff --git a/web-ui/src/backup_account/confirmation/confirmation.js b/web-ui/src/backup_account/confirmation/confirmation.js new file mode 100644 index 00000000..41637dab --- /dev/null +++ b/web-ui/src/backup_account/confirmation/confirmation.js @@ -0,0 +1,45 @@ +/* + * 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 SubmitButton from 'src/common/submit_button/submit_button'; + +import './confirmation.scss'; + +export const Confirmation = ({ t }) => ( + <div className='container confirmation-container'> + <h1>{t('backup-account.confirmation.title1')} <br /> {t('backup-account.confirmation.title2')}</h1> + <p>{t('backup-account.confirmation.paragraph')}</p> + <img src='/public/images/sent-mail.svg' alt='Sent mail' /> + <form action='/'> + <SubmitButton buttonText={t('backup-account.confirmation.button')} type='submit' /> + </form> + <div className='link-content'> + <a href='/backup-account' className='link'> + <i className='fa fa-angle-left' aria-hidden='true' /> + <span>{t('backup-account.confirmation.retry-button')}</span> + </a> + </div> + </div> +); + +Confirmation.propTypes = { + t: React.PropTypes.func.isRequired +}; + +export default translate('', { wait: true })(Confirmation); diff --git a/web-ui/src/backup_account/confirmation/confirmation.scss b/web-ui/src/backup_account/confirmation/confirmation.scss new file mode 100644 index 00000000..241442ff --- /dev/null +++ b/web-ui/src/backup_account/confirmation/confirmation.scss @@ -0,0 +1,60 @@ +/* + * 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/vendor/reset"; +@import "~scss/base/colors"; +@import "~scss/base/fonts"; + +.confirmation-container { + width: 84%; + padding: 6% 5%; + display: flex; + align-items: center; + flex-direction: column; + + img { + padding: 2em 3.2em 2em 0; + } +} + + .submit-button { + align-self: center; + } + +@media only screen and (min-width : 500px) { + .confirmation-container { + width: 50%; + padding: 1em 2em; + } + + .submit-button { + width: 70%; + } +} + +@media only screen and (min-width : 960px) { + .confirmation-container { + width: 30%; + padding: 1em 2em; + display: flex; + flex-direction: column; + } + + .submit-button { + width: 65%; + } +} diff --git a/web-ui/src/backup_account/confirmation/confirmation.spec.js b/web-ui/src/backup_account/confirmation/confirmation.spec.js new file mode 100644 index 00000000..291d156d --- /dev/null +++ b/web-ui/src/backup_account/confirmation/confirmation.spec.js @@ -0,0 +1,29 @@ +import { shallow } from 'enzyme'; +import expect from 'expect'; +import React from 'react'; +import { Confirmation } from 'src/backup_account/confirmation/confirmation'; + +describe('Confirmation', () => { + let page; + + beforeEach(() => { + const mockTranslations = key => key; + page = shallow(<Confirmation t={mockTranslations} />); + }); + + it('renders confirmation title', () => { + expect(page.find('h1').text()).toContain('backup-account.confirmation.title1'); + }); + + it('renders confirmation submit button', () => { + expect(page.find('SubmitButton').props().buttonText).toEqual('backup-account.confirmation.button'); + }); + + it('renders confirmation retry button', () => { + expect(page.find('a').text()).toEqual('backup-account.confirmation.retry-button'); + }); + + it('retries button redirects to backup account', () => { + expect(page.find('a').props().href).toEqual('/backup-account'); + }); +}); diff --git a/web-ui/src/backup_account/page.js b/web-ui/src/backup_account/page.js index 5a75850a..221c6978 100644 --- a/web-ui/src/backup_account/page.js +++ b/web-ui/src/backup_account/page.js @@ -21,6 +21,7 @@ import DocumentTitle from 'react-document-title'; 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 'font-awesome/scss/font-awesome.scss'; import './page.scss'; @@ -33,6 +34,17 @@ export class Page extends React.Component { this.state = { status: '' }; } + saveBackupEmail = () => { + this.setState({ + status: 'success' + }); + } + + mainContent = () => { + if (this.state.status === 'success') return <Confirmation />; + return <BackupEmail onSubmit={this.saveBackupEmail} />; + }; + render() { const t = this.props.t; return ( @@ -40,7 +52,7 @@ export class Page extends React.Component { <div className='page'> <Header /> <section> - <BackupEmail /> + {this.mainContent()} </section> <Footer /> </div> diff --git a/web-ui/src/backup_account/page.scss b/web-ui/src/backup_account/page.scss index aa973fcd..71e3f074 100644 --- a/web-ui/src/backup_account/page.scss +++ b/web-ui/src/backup_account/page.scss @@ -31,6 +31,12 @@ a { text-decoration: none; } +.container { + background: $white; + margin: 3% auto; + box-shadow: 0 2px 3px 0 $shadow; +} + .page { font-family: "Open Sans", "Microsoft YaHei", "Hiragino Sans GB", "Hiragino Sans GB W3", "微软雅黑", "Helvetica Neue", Arial, sans-serif; background: $dark_blue; /* For browsers that do not support gradients */ @@ -48,10 +54,6 @@ section { flex: 1 0 auto; } -form { - width: 100%; -} - h1 { font-size: 1.3em; font-weight: 600; @@ -65,6 +67,7 @@ p { .link { color: $dark_blue; font-style: italic; + font-size: 0.8em; .fa { font-size: 1.6em; @@ -75,59 +78,8 @@ p { } -.container { - background: $white; - width: 84%; - margin: 3% auto; - padding: 6% 5%; - display: flex; - align-items: flex-start; - flex-direction: column; - box-shadow: 0 2px 3px 0 $shadow; -} - -.backup-account-image { - width: 50%; - height: 100%; - align-self: center; -} - @media only screen and (min-width : 500px) { body { font-size: 1.3em; } - - form { - display: flex; - flex-direction: column; - - .input-field-group, .submit-button, .link-content { - width: 70%; - align-self: center; - } - } -} - -@media only screen and (min-width : 960px) { - .container{ - width: 60%; - padding: 3em; - align-items: flex-start; - flex-direction: row; - max-width: 700px; - } - - form { - margin-left: 2.5em; - min-height: 492px; - - .input-field-group, .submit-button, .link-content { - width: 300px; - align-self: flex-start; - } - } - - .backup-account-image { - width: 300px; - } } diff --git a/web-ui/src/backup_account/page.spec.js b/web-ui/src/backup_account/page.spec.js index 2f4bc7c1..23c117a0 100644 --- a/web-ui/src/backup_account/page.spec.js +++ b/web-ui/src/backup_account/page.spec.js @@ -2,6 +2,8 @@ import { shallow } from 'enzyme'; import expect from 'expect'; 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'; describe('BackupAccount', () => { let page; @@ -14,4 +16,30 @@ describe('BackupAccount', () => { it('renders backup account page title', () => { expect(page.props().title).toEqual('backup-account.page-title'); }); + + describe('save backup email', () => { + let pageInstance; + + beforeEach(() => { + pageInstance = page.instance(); + }); + + it('verifies initial state', () => { + expect(pageInstance.state.status).toEqual(''); + }); + + it('changes state', () => { + pageInstance.saveBackupEmail(); + expect(pageInstance.state.status).toEqual('success'); + }); + + it('renders backup email component', () => { + expect(page.find(BackupEmail).length).toEqual(1); + }); + + it('renders confirmation component', () => { + pageInstance.saveBackupEmail(); + expect(page.find(Confirmation).length).toEqual(1); + }); + }); }); |