summaryrefslogtreecommitdiff
path: root/web-ui
diff options
context:
space:
mode:
Diffstat (limited to 'web-ui')
-rw-r--r--web-ui/.eslintrc.json2
-rw-r--r--web-ui/app/locales/en_US/translation.json18
-rw-r--r--web-ui/app/locales/pt_BR/translation.json18
-rw-r--r--web-ui/package.json3
-rw-r--r--web-ui/src/backup_account/backup_email/backup_email.js74
-rw-r--r--web-ui/src/backup_account/backup_email/backup_email.spec.js80
-rw-r--r--web-ui/src/backup_account/page.js38
-rw-r--r--web-ui/src/backup_account/page.spec.js67
8 files changed, 183 insertions, 117 deletions
diff --git a/web-ui/.eslintrc.json b/web-ui/.eslintrc.json
index 554498f9..6ffa2e2e 100644
--- a/web-ui/.eslintrc.json
+++ b/web-ui/.eslintrc.json
@@ -6,7 +6,9 @@
"jsx-a11y",
"import"
],
+ "parser": "babel-eslint",
"rules": {
+ "strict": 0,
"import/no-extraneous-dependencies": ["off"],
"import/extensions": ["off"],
"import/no-unresolved": ["off"],
diff --git a/web-ui/app/locales/en_US/translation.json b/web-ui/app/locales/en_US/translation.json
index 9df1867e..25d406b2 100644
--- a/web-ui/app/locales/en_US/translation.json
+++ b/web-ui/app/locales/en_US/translation.json
@@ -81,14 +81,16 @@
},
"backup-account": {
"page-title": "Pixelated Backup Account",
- "image-description": "Forgot my password!",
- "title": "What if you forget your password?",
- "paragraph1": "You will need a backup account. Choose an alternative email address you use regularly.",
- "paragraph2": "Instructions to recover your password will be sent to this email address, save it.",
- "input-label": "Type your backup account",
- "button": "Add Account",
- "error": {
- "invalid-email": "Please enter a valid email address"
+ "backup-email": {
+ "image-description": "Forgot my password!",
+ "title": "What if you forget your password?",
+ "paragraph1": "You will need a backup account. Choose an alternative email address you use regularly.",
+ "paragraph2": "Instructions to recover your password will be sent to this email address, save it.",
+ "input-label": "Type your backup account",
+ "button": "Add Account",
+ "error": {
+ "invalid-email": "Please enter a valid email address"
+ }
}
},
"back-to-inbox": "Back to my inbox",
diff --git a/web-ui/app/locales/pt_BR/translation.json b/web-ui/app/locales/pt_BR/translation.json
index ac4fe10d..ec353ff1 100644
--- a/web-ui/app/locales/pt_BR/translation.json
+++ b/web-ui/app/locales/pt_BR/translation.json
@@ -81,14 +81,16 @@
},
"backup-account": {
"page-title": "Pixelated E-mail de Recuperação",
- "image-description": "Esqueci minha senha!",
- "title": "E se você esquecer sua senha?",
- "paragraph1": "Informe outro e-mail que você usa regularmente. Esse será o seu e-mail de recuperação.",
- "paragraph2": "Instruções para recuperar sua senha serão enviadas para esse e-mail, guarde com carinho.",
- "input-label": "Digite seu e-mail de recuperação",
- "button": "Adicionar e-mail",
- "error": {
- "invalid-email": "Por favor informe um e-mail válido"
+ "backup-email": {
+ "image-description": "Esqueci minha senha!",
+ "title": "E se você esquecer sua senha?",
+ "paragraph1": "Informe outro e-mail que você usa regularmente. Esse será o seu e-mail de recuperação.",
+ "paragraph2": "Instruções para recuperar sua senha serão enviadas para esse e-mail, guarde com carinho.",
+ "input-label": "Digite seu e-mail de recuperação",
+ "button": "Adicionar e-mail",
+ "error": {
+ "invalid-email": "Por favor informe um e-mail válido"
+ }
}
},
"back-to-inbox": "Voltar",
diff --git a/web-ui/package.json b/web-ui/package.json
index 20b06ffd..5a5375e6 100644
--- a/web-ui/package.json
+++ b/web-ui/package.json
@@ -8,6 +8,7 @@
"babel": "^6.5.2",
"babel-cli": "^6.22.2",
"babel-core": "^6.21.0",
+ "babel-eslint": "^7.1.1",
"babel-loader": "^6.2.10",
"babel-plugin-istanbul": "^3.1.2",
"babel-preset-es2015": "^6.18.0",
@@ -18,7 +19,7 @@
"css-loader": "^0.26.1",
"dompurify": "^0.8.4",
"enzyme": "^2.7.1",
- "eslint": "^3.15.0",
+ "eslint": "^3.17.1",
"eslint-config-airbnb": "^14.1.0",
"eslint-plugin-import": "^2.2.0",
"eslint-plugin-jsx-a11y": "^4.0.0",
diff --git a/web-ui/src/backup_account/backup_email/backup_email.js b/web-ui/src/backup_account/backup_email/backup_email.js
new file mode 100644
index 00000000..3d5df1b0
--- /dev/null
+++ b/web-ui/src/backup_account/backup_email/backup_email.js
@@ -0,0 +1,74 @@
+/*
+ * 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 InputField from 'src/common/input_field/input_field';
+import validator from 'validator';
+
+
+export class BackupEmail extends React.Component {
+
+ constructor(props) {
+ super(props);
+ this.state = { error: '', submitButtonDisabled: true };
+ }
+
+ validateEmail = (event) => {
+ const validEmail = validator.isEmail(event.target.value);
+ const emptyEmail = validator.isEmpty(event.target.value);
+ const t = this.props.t;
+ this.setState({
+ error: !emptyEmail && !validEmail ? t('backup-account.backup-email.error.invalid-email') : '',
+ submitButtonDisabled: !validEmail || emptyEmail
+ });
+ }
+
+ render() {
+ const t = this.props.t;
+ return (
+ <div className='container'>
+ <img
+ className='backup-account-image'
+ src='/public/images/forgot-my-password.svg'
+ alt={t('backup-account.backup-email.image-description')}
+ />
+ <form>
+ <h1>{t('backup-account.backup-email.title')}</h1>
+ <p>{t('backup-account.backup-email.paragraph1')}</p>
+ <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>
+ </form>
+ </div>
+ );
+ }
+}
+
+
+BackupEmail.propTypes = {
+ t: 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
new file mode 100644
index 00000000..b2b297f4
--- /dev/null
+++ b/web-ui/src/backup_account/backup_email/backup_email.spec.js
@@ -0,0 +1,80 @@
+import { shallow } from 'enzyme';
+import expect from 'expect';
+import React from 'react';
+import { BackupEmail } from 'src/backup_account/backup_email/backup_email';
+
+describe('BackupEmail', () => {
+ let page;
+
+ beforeEach(() => {
+ const mockTranslations = key => key;
+ page = shallow(<BackupEmail t={mockTranslations} />);
+ });
+
+ it('renders backup email title', () => {
+ expect(page.find('h1').text()).toEqual('backup-account.backup-email.title');
+ });
+
+ it('renders backup account email input field', () => {
+ expect(page.find('InputField').props().name).toEqual('email');
+ });
+
+ it('renders backup account submit button', () => {
+ expect(page.find('SubmitButton').props().buttonText).toEqual('backup-account.backup-email.button');
+ });
+
+ describe('Email validation', () => {
+ let pageInstance;
+
+ beforeEach(() => {
+ pageInstance = page.instance();
+ });
+
+ it('verify initial state', () => {
+ expect(pageInstance.state.error).toEqual('');
+ expect(page.find('SubmitButton').props().disabled).toEqual(true);
+ });
+
+ context('with invalid email', () => {
+ beforeEach(() => {
+ pageInstance.validateEmail({ target: { value: 'test' } });
+ });
+
+ it('sets error in state', () => {
+ expect(pageInstance.state.error).toEqual('backup-account.backup-email.error.invalid-email');
+ });
+
+ it('disables submit button', () => {
+ expect(page.find('SubmitButton').props().disabled).toEqual(true);
+ });
+ });
+
+ context('with valid email', () => {
+ beforeEach(() => {
+ pageInstance.validateEmail({ target: { value: 'test@test.com' } });
+ });
+
+ it('does not set error in state', () => {
+ expect(pageInstance.state.error).toEqual('');
+ });
+
+ it('submit button is enabled', () => {
+ expect(page.find('SubmitButton').props().disabled).toEqual(false);
+ });
+ });
+
+ context('with empty email', () => {
+ beforeEach(() => {
+ pageInstance.validateEmail({ target: { value: '' } });
+ });
+
+ it('not set error in state', () => {
+ expect(pageInstance.state.error).toEqual('');
+ });
+
+ it('disables submit button', () => {
+ expect(page.find('SubmitButton').props().disabled).toEqual(true);
+ });
+ });
+ });
+});
diff --git a/web-ui/src/backup_account/page.js b/web-ui/src/backup_account/page.js
index c7554cfb..5a75850a 100644
--- a/web-ui/src/backup_account/page.js
+++ b/web-ui/src/backup_account/page.js
@@ -18,11 +18,9 @@
import React from 'react';
import { translate } from 'react-i18next';
import DocumentTitle from 'react-document-title';
-import SubmitButton from 'src/common/submit_button/submit_button';
-import InputField from 'src/common/input_field/input_field';
import Footer from 'src/common/footer/footer';
import Header from 'src/common/header/header';
-import validator from 'validator';
+import BackupEmail from 'src/backup_account/backup_email/backup_email';
import 'font-awesome/scss/font-awesome.scss';
import './page.scss';
@@ -32,18 +30,7 @@ export class Page extends React.Component {
constructor(props) {
super(props);
- this.state = { error: '', submitButtonDisabled: true };
- this.validateEmail = this.validateEmail.bind(this);
- }
-
- validateEmail(event) {
- const validEmail = validator.isEmail(event.target.value);
- const emptyEmail = validator.isEmpty(event.target.value);
- const t = this.props.t;
- this.setState({
- error: !emptyEmail && !validEmail ? t('backup-account.error.invalid-email') : '',
- submitButtonDisabled: !validEmail || emptyEmail
- });
+ this.state = { status: '' };
}
render() {
@@ -53,26 +40,7 @@ export class Page extends React.Component {
<div className='page'>
<Header />
<section>
- <div className='container'>
- <img
- className='backup-account-image'
- src='/public/images/forgot-my-password.svg'
- alt={t('backup-account.image-description')}
- />
- <form>
- <h1>{t('backup-account.title')}</h1>
- <p>{t('backup-account.paragraph1')}</p>
- <p>{t('backup-account.paragraph2')}</p>
- <InputField name='email' label={t('backup-account.input-label')} errorText={this.state.error} onChange={this.validateEmail} />
- <SubmitButton buttonText={t('backup-account.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>
- </form>
- </div>
+ <BackupEmail />
</section>
<Footer />
</div>
diff --git a/web-ui/src/backup_account/page.spec.js b/web-ui/src/backup_account/page.spec.js
index 334d3ba8..2f4bc7c1 100644
--- a/web-ui/src/backup_account/page.spec.js
+++ b/web-ui/src/backup_account/page.spec.js
@@ -11,70 +11,7 @@ describe('BackupAccount', () => {
page = shallow(<Page t={mockTranslations} />);
});
- it('renders backup email page title', () => {
- expect(page.find('h1').text()).toEqual('backup-account.title');
- });
-
- it('renders backup account email input field', () => {
- expect(page.find('InputField').props().name).toEqual('email');
- });
-
- it('renders backup account submit button', () => {
- expect(page.find('SubmitButton').props().buttonText).toEqual('backup-account.button');
- });
-
- describe('Email validation', () => {
- let pageInstance;
-
- beforeEach(() => {
- pageInstance = page.instance();
- });
-
- it('verify initial state', () => {
- expect(pageInstance.state.error).toEqual('');
- expect(page.find('SubmitButton').props().disabled).toEqual(true);
- });
-
- context('with invalid email', () => {
- beforeEach(() => {
- pageInstance.validateEmail({ target: { value: 'test' } });
- });
-
- it('sets error in state', () => {
- expect(pageInstance.state.error).toEqual('backup-account.error.invalid-email');
- });
-
- it('disables submit button', () => {
- expect(page.find('SubmitButton').props().disabled).toEqual(true);
- });
- });
-
- context('with valid email', () => {
- beforeEach(() => {
- pageInstance.validateEmail({ target: { value: 'test@test.com' } });
- });
-
- it('does not set error in state', () => {
- expect(pageInstance.state.error).toEqual('');
- });
-
- it('submit button is enabled', () => {
- expect(page.find('SubmitButton').props().disabled).toEqual(false);
- });
- });
-
- context('with empty email', () => {
- beforeEach(() => {
- pageInstance.validateEmail({ target: { value: '' } });
- });
-
- it('not set error in state', () => {
- expect(pageInstance.state.error).toEqual('');
- });
-
- it('disables submit button', () => {
- expect(page.find('SubmitButton').props().disabled).toEqual(true);
- });
- });
+ it('renders backup account page title', () => {
+ expect(page.props().title).toEqual('backup-account.page-title');
});
});
generated by cgit v1.2.3 (git 2.25.1) at 2024-10-30 10:42:48 +0000