diff options
Diffstat (limited to 'web-ui/src/backup_account')
-rw-r--r-- | web-ui/src/backup_account/page.js | 81 | ||||
-rw-r--r-- | web-ui/src/backup_account/page.scss | 5 | ||||
-rw-r--r-- | web-ui/src/backup_account/page.spec.js | 55 |
3 files changed, 111 insertions, 30 deletions
diff --git a/web-ui/src/backup_account/page.js b/web-ui/src/backup_account/page.js index cc93a560..c7554cfb 100644 --- a/web-ui/src/backup_account/page.js +++ b/web-ui/src/backup_account/page.js @@ -22,40 +22,65 @@ 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 'font-awesome/scss/font-awesome.scss'; import './page.scss'; -export const Page = ({ t }) => ( - <DocumentTitle title={t('backup-account.page-title')}> - <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')} /> - <SubmitButton buttonText={t('backup-account.button')} /> - <div> - <a href='/' className='link'> - <i className='fa fa-angle-left' aria-hidden='true' /> - <span>{t('back-to-inbox')}</span> - </a> + +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 + }); + } + + render() { + const t = this.props.t; + return ( + <DocumentTitle title={t('backup-account.page-title')}> + <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> - </form> + </section> + <Footer /> </div> - </section> - <Footer /> - </div> - </DocumentTitle> -); + </DocumentTitle> + ); + } +} + Page.propTypes = { t: React.PropTypes.func.isRequired diff --git a/web-ui/src/backup_account/page.scss b/web-ui/src/backup_account/page.scss index 9d94c156..aa973fcd 100644 --- a/web-ui/src/backup_account/page.scss +++ b/web-ui/src/backup_account/page.scss @@ -101,7 +101,7 @@ p { display: flex; flex-direction: column; - div { + .input-field-group, .submit-button, .link-content { width: 70%; align-self: center; } @@ -119,8 +119,9 @@ p { form { margin-left: 2.5em; + min-height: 492px; - div { + .input-field-group, .submit-button, .link-content { width: 300px; align-self: flex-start; } diff --git a/web-ui/src/backup_account/page.spec.js b/web-ui/src/backup_account/page.spec.js index ece61336..334d3ba8 100644 --- a/web-ui/src/backup_account/page.spec.js +++ b/web-ui/src/backup_account/page.spec.js @@ -22,4 +22,59 @@ describe('BackupAccount', () => { 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); + }); + }); + }); }); |