summaryrefslogtreecommitdiff
path: root/web-ui/src/backup_account
diff options
context:
space:
mode:
Diffstat (limited to 'web-ui/src/backup_account')
-rw-r--r--web-ui/src/backup_account/backup_email/backup_email.js12
-rw-r--r--web-ui/src/backup_account/backup_email/backup_email.spec.js13
-rw-r--r--web-ui/src/backup_account/confirmation/confirmation.js43
-rw-r--r--web-ui/src/backup_account/confirmation/confirmation.scss44
-rw-r--r--web-ui/src/backup_account/confirmation/confirmation.spec.js29
-rw-r--r--web-ui/src/backup_account/page.js14
-rw-r--r--web-ui/src/backup_account/page.spec.js17
7 files changed, 168 insertions, 4 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..2ef76ecf 100644
--- a/web-ui/src/backup_account/backup_email/backup_email.js
+++ b/web-ui/src/backup_account/backup_email/backup_email.js
@@ -39,6 +39,13 @@ 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 (
@@ -48,7 +55,7 @@ export class BackupEmail extends React.Component {
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 +75,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.spec.js b/web-ui/src/backup_account/backup_email/backup_email.spec.js
index b2b297f4..d6e3e4e7 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
@@ -1,13 +1,15 @@
import { shallow } from 'enzyme';
import expect from 'expect';
+import sinon from 'sinon';
import React from 'react';
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 +25,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 = sinon.spy();
+ const event = { preventDefault() {} };
+ page = shallow(<BackupEmail t={mockTranslations} onSubmit={mockOnSubmit} />);
+
+ page.instance().submitHandler(event);
+ sinon.assert.calledOnce(mockOnSubmit);
+ });
+
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..324d46ba
--- /dev/null
+++ b/web-ui/src/backup_account/confirmation/confirmation.js
@@ -0,0 +1,43 @@
+/*
+ * 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='confirmation'>
+ <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' />
+ <SubmitButton buttonText={t('backup-account.confirmation.button')} />
+ <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..44f3fa8a
--- /dev/null
+++ b/web-ui/src/backup_account/confirmation/confirmation.scss
@@ -0,0 +1,44 @@
+/*
+ * 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 {
+ background: $white;
+ width: 84%;
+ margin: 3% auto;
+ padding: 6% 5%;
+ box-shadow: 0 2px 3px 0 $shadow;
+}
+
+@media only screen and (min-width : 500px) {
+
+}
+
+@media only screen and (min-width : 960px) {
+ .confirmation{
+ width: 60%;
+ padding: 3em;
+ align-items: flex-start;
+ flex-direction: row;
+ max-width: 700px;
+ }
+}
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..c0ff7df2
--- /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('retry 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..a32824d4 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(t)}
</section>
<Footer />
</div>
diff --git a/web-ui/src/backup_account/page.spec.js b/web-ui/src/backup_account/page.spec.js
index 2f4bc7c1..0868c671 100644
--- a/web-ui/src/backup_account/page.spec.js
+++ b/web-ui/src/backup_account/page.spec.js
@@ -14,4 +14,21 @@ 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('verify initial state', () => {
+ expect(pageInstance.state.status).toEqual('');
+ });
+
+ it('changes state', () => {
+ pageInstance.saveBackupEmail();
+ expect(pageInstance.state.status).toEqual('success');
+ });
+ });
});