diff options
| -rw-r--r-- | web-ui/src/backup_account/page.js | 9 | ||||
| -rw-r--r-- | web-ui/src/backup_account/page.spec.js | 20 | ||||
| -rw-r--r-- | web-ui/src/common/submit_button/submit_button.js | 5 |
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} |