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 93c3f9203..de8d675e1 100644
--- a/mascara/src/app/first-time/import-seed-phrase-screen.js
+++ b/mascara/src/app/first-time/import-seed-phrase-screen.js
@@ -1,13 +1,12 @@
import React, { Component } from 'react'
import PropTypes from 'prop-types'
import {connect} from 'react-redux'
-import LoadingScreen from './loading-screen'
+import classnames from 'classnames'
import {
createNewVaultAndRestore,
hideWarning,
displayWarning,
unMarkPasswordForgotten,
- clearNotices,
} from '../../../../ui/app/actions'
class ImportSeedPhraseScreen extends Component {
@@ -17,8 +16,8 @@ class ImportSeedPhraseScreen extends Component {
next: PropTypes.func.isRequired,
createNewVaultAndRestore: PropTypes.func.isRequired,
hideWarning: PropTypes.func.isRequired,
- isLoading: PropTypes.bool.isRequired,
displayWarning: PropTypes.func,
+ leaveImportSeedScreenState: PropTypes.func,
};
state = {
@@ -27,98 +26,130 @@ class ImportSeedPhraseScreen extends Component {
confirmPassword: '',
}
- onClick = () => {
- const { password, seedPhrase, confirmPassword } = this.state
- const { createNewVaultAndRestore, next, displayWarning, leaveImportSeedScreenState } = this.props
+ parseSeedPhrase = (seedPhrase) => {
+ return seedPhrase
+ .match(/\w+/g)
+ .join(' ')
+ }
- if (seedPhrase.split(' ').length !== 12) {
- this.warning = 'Seed Phrases are 12 words long'
- displayWarning(this.warning)
- return
- }
+ onChange = ({ seedPhrase, password, confirmPassword }) => {
+ const {
+ password: prevPassword,
+ confirmPassword: prevConfirmPassword,
+ } = this.state
+ const { displayWarning, hideWarning } = this.props
+
+ let warning = null
- if (password.length < 8) {
- this.warning = 'Passwords require a mimimum length of 8'
- displayWarning(this.warning)
- return
+ if (seedPhrase && this.parseSeedPhrase(seedPhrase).split(' ').length !== 12) {
+ warning = 'Seed Phrases are 12 words long'
+ } else if (password && password.length < 8) {
+ warning = 'Passwords require a mimimum length of 8'
+ } else if ((password || prevPassword) !== (confirmPassword || prevConfirmPassword)) {
+ warning = 'Confirmed password does not match'
}
- if (password !== confirmPassword) {
- this.warning = 'Confirmed password does not match'
- displayWarning(this.warning)
- return
+ if (warning) {
+ displayWarning(warning)
+ } else {
+ hideWarning()
}
- this.warning = null
+
+ seedPhrase && this.setState({ seedPhrase })
+ password && this.setState({ password })
+ confirmPassword && this.setState({ confirmPassword })
+ }
+
+ onClick = () => {
+ const { password, seedPhrase } = this.state
+ const {
+ createNewVaultAndRestore,
+ next,
+ displayWarning,
+ leaveImportSeedScreenState,
+ } = this.props
+
leaveImportSeedScreenState()
- createNewVaultAndRestore(password, seedPhrase)
+ createNewVaultAndRestore(password, this.parseSeedPhrase(seedPhrase))
.then(next)
}
render () {
- return this.props.isLoading
- ?