summaryrefslogtreecommitdiff
diff options
context:
space:
mode:
-rw-r--r--web-ui/src/backup_account/page.js9
-rw-r--r--web-ui/src/backup_account/page.spec.js20
-rw-r--r--web-ui/src/common/submit_button/submit_button.js5
3 files changed, 20 insertions, 14 deletions
diff --git a/web-ui/src/backup_account/page.js b/web-ui/src/backup_account/page.js
index 91fb6863..e8c353e1 100644
--- a/web-ui/src/backup_account/page.js
+++ b/web-ui/src/backup_account/page.js
@@ -32,15 +32,16 @@ export class Page extends React.Component {
constructor(props) {
super(props);
- this.state = { error: '', validEmail: false };
+ 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);
this.setState({
- error: validEmail ? '' : 'Your email is invalid',
- validEmail
+ error: !emptyEmail && !validEmail ? 'Your email is invalid' : '',
+ submitButtonDisabled: !validEmail || emptyEmail
});
}
@@ -62,7 +63,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')} disabled={!this.state.validEmail} />
+ <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' />
diff --git a/web-ui/src/backup_account/page.spec.js b/web-ui/src/backup_account/page.spec.js
index 30aefc96..9a79392c 100644
--- a/web-ui/src/backup_account/page.spec.js
+++ b/web-ui/src/backup_account/page.spec.js
@@ -30,23 +30,27 @@ describe('BackupAccount', () => {
pageInstance = page.instance();
});
- it('should set error in state when email is invalid', () => {
+ it('verify initial state', () => {
+ expect(pageInstance.state.error).toEqual('');
+ expect(page.find('SubmitButton').props().disabled).toEqual(true);
+ });
+
+ it('should set error in state and disabled submit button when email is invalid', () => {
pageInstance.validateEmail({ target: { value: 'test' } });
expect(pageInstance.state.error).toEqual('Your email is invalid');
+ expect(page.find('SubmitButton').props().disabled).toEqual(true);
});
- it('should not set error in state when email is valid', () => {
+ it('should not set error in state and submit button is enabled when email is valid', () => {
pageInstance.validateEmail({ target: { value: 'test@test.com' } });
expect(pageInstance.state.error).toEqual('');
+ expect(page.find('SubmitButton').props().disabled).toEqual(false);
});
- it('submit button should be disabled when email field is empty', () => {
+ it('should not set error in state and disable submit button when email is empty', () => {
+ pageInstance.validateEmail({ target: { value: '' } });
+ expect(pageInstance.state.error).toEqual('');
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 73f9b21c..1224c7bd 100644
--- a/web-ui/src/common/submit_button/submit_button.js
+++ b/web-ui/src/common/submit_button/submit_button.js
@@ -30,9 +30,10 @@ const buttonStyle = {
height: '48px'
};
-const SubmitButton = ({ buttonText, disabled=false }) => (
+const SubmitButton = ({ buttonText, disabled = false }) => (
<div className='submit-button'>
- <RaisedButton type='submit'
+ <RaisedButton
+ type='submit'
label={buttonText}
disabled={disabled}
labelStyle={labelStyle}