diff options
author | Alexander Tseung <alextsg@gmail.com> | 2018-05-13 11:53:40 +0800 |
---|---|---|
committer | Alexander Tseung <alextsg@gmail.com> | 2018-05-14 12:46:12 +0800 |
commit | 0bcfbc15446b01b3b87233715cd3ead42d2730e4 (patch) | |
tree | 8b39abffed694538464ff00c2471fdc0df25ecd8 /mascara/src/app/first-time/create-password-screen.js | |
parent | 6bd1b21d3b8f74c44214f814c3fe1c8770ab9e2d (diff) | |
download | tangerine-wallet-browser-0bcfbc15446b01b3b87233715cd3ead42d2730e4.tar.gz tangerine-wallet-browser-0bcfbc15446b01b3b87233715cd3ead42d2730e4.tar.zst tangerine-wallet-browser-0bcfbc15446b01b3b87233715cd3ead42d2730e4.zip |
Add error message when passwords don't match in first time flow. Change input field styling in first time flow
Diffstat (limited to 'mascara/src/app/first-time/create-password-screen.js')
-rw-r--r-- | mascara/src/app/first-time/create-password-screen.js | 133 |
1 files changed, 54 insertions, 79 deletions
diff --git a/mascara/src/app/first-time/create-password-screen.js b/mascara/src/app/first-time/create-password-screen.js index 6ec05e11d..99d210ed1 100644 --- a/mascara/src/app/first-time/create-password-screen.js +++ b/mascara/src/app/first-time/create-password-screen.js @@ -13,8 +13,13 @@ import { INITIALIZE_IMPORT_WITH_SEED_PHRASE_ROUTE, INITIALIZE_NOTICE_ROUTE, } from '../../../../ui/app/routes' +import TextField from '../../../../ui/app/components/text-field' class CreatePasswordScreen extends Component { + static contextTypes = { + t: PropTypes.func, + } + static propTypes = { isLoading: PropTypes.bool.isRequired, createAccount: PropTypes.func.isRequired, @@ -27,6 +32,8 @@ class CreatePasswordScreen extends Component { state = { password: '', confirmPassword: '', + passwordError: null, + confirmPasswordError: null, } constructor (props) { @@ -69,82 +76,37 @@ class CreatePasswordScreen extends Component { .then(() => history.push(INITIALIZE_UNIQUE_IMAGE_ROUTE)) } - renderFields () { - const { isMascara, history } = this.props + handlePasswordChange (password) { + const { confirmPassword } = this.state + let confirmPasswordError = null + let passwordError = null - return ( - <div className={classnames({ 'first-view-main-wrapper': !isMascara })}> - <div className={classnames({ - 'first-view-main': !isMascara, - 'first-view-main__mascara': isMascara, - })}> - {isMascara && <div className="mascara-info first-view-phone-invisible"> - <Mascot - animationEventEmitter={this.animationEventEmitter} - width="225" - height="225" - /> - <div className="info"> - MetaMask is a secure identity vault for Ethereum. - </div> - <div className="info"> - It allows you to hold ether & tokens, and interact with decentralized applications. - </div> - </div>} - <div className="create-password"> - <div className="create-password__title"> - Create Password - </div> - <input - className="first-time-flow__input" - type="password" - placeholder="New Password (min 8 characters)" - onChange={e => this.setState({password: e.target.value})} - /> - <input - className="first-time-flow__input create-password__confirm-input" - type="password" - placeholder="Confirm Password" - onChange={e => this.setState({confirmPassword: e.target.value})} - /> - <button - className="first-time-flow__button" - disabled={!this.isValid()} - onClick={this.createAccount} - > - Create - </button> - <a - href="" - className="first-time-flow__link create-password__import-link" - onClick={e => { - e.preventDefault() - history.push(INITIALIZE_IMPORT_WITH_SEED_PHRASE_ROUTE) - }} - > - Import with seed phrase - </a> - { /* } - <a - href="" - className="first-time-flow__link create-password__import-link" - onClick={e => { - e.preventDefault() - history.push(INITIALIZE_IMPORT_ACCOUNT_ROUTE) - }} - > - Import an account - </a> - { */ } - <Breadcrumbs total={3} currentIndex={0} /> - </div> - </div> - </div> - ) + if (password && password.length < 8) { + passwordError = this.context.t('passwordNotLongEnough') + } + + if (confirmPassword && password !== confirmPassword) { + confirmPasswordError = this.context.t('passwordsDontMatch') + } + + this.setState({ password, passwordError, confirmPasswordError }) + } + + handleConfirmPasswordChange (confirmPassword) { + const { password } = this.state + let confirmPasswordError = null + + if (password !== confirmPassword) { + confirmPasswordError = this.context.t('passwordsDontMatch') + } + + this.setState({ confirmPassword, confirmPasswordError }) } render () { const { history, isMascara } = this.props + const { passwordError, confirmPasswordError } = this.state + const { t } = this.context return ( <div className={classnames({ 'first-view-main-wrapper': !isMascara })}> @@ -169,17 +131,30 @@ class CreatePasswordScreen extends Component { <div className="create-password__title"> Create Password </div> - <input - className="first-time-flow__input" + <TextField + id="create-password" + label={t('newPassword')} type="password" - placeholder="New Password (min 8 characters)" - onChange={e => this.setState({password: e.target.value})} + className="first-time-flow__input" + value={this.state.password} + onChange={event => this.handlePasswordChange(event.target.value)} + error={passwordError} + autoFocus + autoComplete="new-password" + margin="normal" + fullWidth /> - <input - className="first-time-flow__input create-password__confirm-input" + <TextField + id="confirm-password" + label={t('confirmPassword')} type="password" - placeholder="Confirm Password" - onChange={e => this.setState({confirmPassword: e.target.value})} + className="first-time-flow__input" + value={this.state.confirmPassword} + onChange={event => this.handleConfirmPasswordChange(event.target.value)} + error={confirmPasswordError} + autoComplete="confirm-password" + margin="normal" + fullWidth /> <button className="first-time-flow__button" |