diff --git a/mascara/src/app/first-time/import-seed-phrase-screen.js b/mascara/src/app/first-time/import-seed-phrase-screen.js index d2eed61b7..d9a9dc835 100644 --- a/mascara/src/app/first-time/import-seed-phrase-screen.js +++ b/mascara/src/app/first-time/import-seed-phrase-screen.js @@ -1,7 +1,7 @@ import React, {Component, PropTypes} from 'react' import {connect} from 'react-redux' import LoadingScreen from './loading-screen' -import {createNewVaultAndRestore, hideWarning} from '../../../../ui/app/actions' +import {createNewVaultAndRestore, hideWarning, displayWarning} from '../../../../ui/app/actions' class ImportSeedPhraseScreen extends Component { static propTypes = { @@ -11,6 +11,7 @@ class ImportSeedPhraseScreen extends Component { createNewVaultAndRestore: PropTypes.func.isRequired, hideWarning: PropTypes.func.isRequired, isLoading: PropTypes.bool.isRequired, + displayWarning: PropTypes.func, }; state = { @@ -20,29 +21,29 @@ class ImportSeedPhraseScreen extends Component { } onClick = () => { - const { password, seedPhrase } = this.state - const { createNewVaultAndRestore, next } = this.props - - createNewVaultAndRestore(password, seedPhrase) - .then(next) - } - - isValid () { - const { seedPhrase, password, confirmPassword } = this.state + const { password, seedPhrase, confirmPassword } = this.state + const { createNewVaultAndRestore, next, displayWarning } = this.props if (seedPhrase.split(' ').length !== 12) { - return false + this.warning = 'Seed Phrases are 12 words long' + displayWarning(this.warning) + return } if (password.length < 8) { - return false + this.warning = 'Passwords require a mimimum length of 8' + displayWarning(this.warning) + return } if (password !== confirmPassword) { - return false + this.warning = 'Confirmed password does not match' + displayWarning(this.warning) + return } - - return true + this.warning = null + createNewVaultAndRestore(password, seedPhrase) + .then(next) } render () { @@ -70,6 +71,11 @@ class ImportSeedPhraseScreen extends Component { className="import-account__secret-phrase" onChange={e => this.setState({seedPhrase: e.target.value})} /> + + {this.props.warning} + Import @@ -98,6 +103,7 @@ export default connect( ({ appState: { isLoading, warning } }) => ({ isLoading, warning }), dispatch => ({ createNewVaultAndRestore: (pw, seed) => dispatch(createNewVaultAndRestore(pw, seed)), + displayWarning: (warning) => dispatch(displayWarning(warning)), hideWarning: () => dispatch(hideWarning()), }) )(ImportSeedPhraseScreen) diff --git a/ui/app/css/index.css b/ui/app/css/index.css index 49b432a1f..0630c4c12 100644 --- a/ui/app/css/index.css +++ b/ui/app/css/index.css @@ -235,7 +235,8 @@ app sections /* unlock */ .error { - color: #E20202; + color: #f7861c; + margin-bottom: 9px; } .warning {