diff options
author | Tayane Fernandes <tayane.rmf@gmail.com> | 2017-03-13 14:04:59 -0300 |
---|---|---|
committer | GitHub <noreply@github.com> | 2017-03-13 14:04:59 -0300 |
commit | ed15fdb62afb97af406fe35cc17da5d3790b7bd4 (patch) | |
tree | 34dad5108dce0b96d940792a98cb572646e5db35 /web-ui/src/backup_account/page.js | |
parent | 67d7d84fea07d64800a2b04a379aaa2a103b4a39 (diff) | |
parent | 471b58e945613956db951b3a7b87c9c528b152a4 (diff) |
Merge pull request #1006 from pixelated/validate-email
Email validation on the backup account page
Diffstat (limited to 'web-ui/src/backup_account/page.js')
-rw-r--r-- | web-ui/src/backup_account/page.js | 81 |
1 files changed, 53 insertions, 28 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 |