summaryrefslogtreecommitdiff
path: root/web-ui
diff options
context:
space:
mode:
Diffstat (limited to 'web-ui')
-rw-r--r--web-ui/src/backup_account/page.js8
-rw-r--r--web-ui/src/backup_account/page.spec.js21
-rw-r--r--web-ui/src/common/submit_button/submit_button.js14
-rw-r--r--web-ui/src/common/submit_button/submit_button.scss7
-rw-r--r--web-ui/src/common/submit_button/submit_button.spec.js2
5 files changed, 34 insertions, 18 deletions
diff --git a/web-ui/src/backup_account/page.js b/web-ui/src/backup_account/page.js
index 1feb7546..73a5718b 100644
--- a/web-ui/src/backup_account/page.js
+++ b/web-ui/src/backup_account/page.js
@@ -32,13 +32,15 @@ export class Page extends React.Component {
constructor(props) {
super(props);
- this.state = { error: '' };
+ this.state = { error: '', validEmail: false };
this.validateEmail = this.validateEmail.bind(this);
}
validateEmail(event) {
+ const validEmail = validator.isEmail(event.target.value);
this.setState({
- error: validator.isEmail(event.target.value) ? '' : 'Your email is invalid'
+ error: validEmail ? '' : 'Your email is invalid',
+ validEmail
});
}
@@ -60,7 +62,7 @@ export class Page extends React.Component {
<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')} />
+ <SubmitButton buttonText={t('backup-account.button')} disabled={!this.state.validEmail} />
<div>
<a href='/' className='link'>
<i className='fa fa-angle-left' aria-hidden='true' />
diff --git a/web-ui/src/backup_account/page.spec.js b/web-ui/src/backup_account/page.spec.js
index f9c5251a..30aefc96 100644
--- a/web-ui/src/backup_account/page.spec.js
+++ b/web-ui/src/backup_account/page.spec.js
@@ -24,16 +24,29 @@ describe('BackupAccount', () => {
});
describe('Email validation', () => {
+ let pageInstance;
+
+ beforeEach(() => {
+ pageInstance = page.instance();
+ });
+
it('should set error in state when email is invalid', () => {
- var pageInstance = page.instance();
- pageInstance.validateEmail({target: {value: 'test'}});
+ pageInstance.validateEmail({ target: { value: 'test' } });
expect(pageInstance.state.error).toEqual('Your email is invalid');
});
it('should not set error in state when email is valid', () => {
- var pageInstance = page.instance();
- pageInstance.validateEmail({target: {value: 'test@test.com'}});
+ pageInstance.validateEmail({ target: { value: 'test@test.com' } });
expect(pageInstance.state.error).toEqual('');
});
+
+ it('submit button should be disabled when email field is empty', () => {
+ expect(page.find('SubmitButton').props().disabled).toEqual(true);
+ });
+
+ it('submit button should be enabled when email field is valid', () => {
+ pageInstance.setState({ validEmail: true });
+ expect(page.find('SubmitButton').props().disabled).toEqual(false);
+ });
});
});
diff --git a/web-ui/src/common/submit_button/submit_button.js b/web-ui/src/common/submit_button/submit_button.js
index 4754e042..1e7da021 100644
--- a/web-ui/src/common/submit_button/submit_button.js
+++ b/web-ui/src/common/submit_button/submit_button.js
@@ -16,15 +16,23 @@
*/
import React from 'react';
+import RaisedButton from 'material-ui/RaisedButton';
import './submit_button.scss';
-const SubmitButton = ({ buttonText }) => (
- <input type='submit' className='submit-button' value={buttonText} />
+const SubmitButton = ({ buttonText, disabled }) => (
+ <div className='submit-button'>
+ <RaisedButton primary label={buttonText} disabled={disabled} fullWidth labelStyle={{ textTransform: 'none' }} />
+ </div>
);
SubmitButton.propTypes = {
- buttonText: React.PropTypes.string.isRequired
+ buttonText: React.PropTypes.string.isRequired,
+ disabled: React.PropTypes.boolean
+};
+
+SubmitButton.defaultProps = {
+ disabled: true
};
export default SubmitButton;
diff --git a/web-ui/src/common/submit_button/submit_button.scss b/web-ui/src/common/submit_button/submit_button.scss
index 13cb7607..ac1307a8 100644
--- a/web-ui/src/common/submit_button/submit_button.scss
+++ b/web-ui/src/common/submit_button/submit_button.scss
@@ -18,13 +18,6 @@
@import "~scss/base/colors";
.submit-button {
- background: $dark_blue;
- padding: 0.8em;
- color: $white;
- text-align: center;
- border: none;
- border-radius: 2px;
- font-weight: 300;
width: 100%;
margin-bottom: 1em;
}
diff --git a/web-ui/src/common/submit_button/submit_button.spec.js b/web-ui/src/common/submit_button/submit_button.spec.js
index 8279547c..d4308e6d 100644
--- a/web-ui/src/common/submit_button/submit_button.spec.js
+++ b/web-ui/src/common/submit_button/submit_button.spec.js
@@ -11,6 +11,6 @@ describe('SubmitButton', () => {
});
it('renders an input of type submit for add email', () => {
- expect(submitButton.find('input[type="submit"]').props().value).toEqual('Add Email');
+ expect(submitButton.find('RaisedButton').props().label).toEqual('Add Email');
});
});