Fix seed phrase validation clearing form (#3417)

* Fix seed phrase validation clearing form

* Make new ui import seed error feedback live, and allow newlines with and without carriage returns.

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,37 +26,59 @@ class ImportSeedPhraseScreen extends Component {
     confirmPassword: '',
   }
 
+  parseSeedPhrase = (seedPhrase) => {
+    return seedPhrase
+      .match(/\w+/g)
+      .join(' ')
+  }
+
+  onChange = ({ seedPhrase, password, confirmPassword }) => {
+    const {
+      password: prevPassword,
+      confirmPassword: prevConfirmPassword,
+    } = this.state
+    const { displayWarning, hideWarning } = this.props
+
+    let warning = null
+
+    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 (warning) {
+      displayWarning(warning)
+    } else {
+      hideWarning()
+    }
+
+    seedPhrase && this.setState({ seedPhrase })
+    password && this.setState({ password })
+    confirmPassword && this.setState({ confirmPassword })
+  }
+
   onClick = () => {
-    const { password, seedPhrase, confirmPassword } = this.state
-    const { createNewVaultAndRestore, next, displayWarning, leaveImportSeedScreenState } = this.props
+    const { password, seedPhrase } = this.state
+    const {
+      createNewVaultAndRestore,
+      next,
+      displayWarning,
+      leaveImportSeedScreenState,
+    } = this.props
 
-    if (seedPhrase.split(' ').length !== 12) {
-      this.warning = 'Seed Phrases are 12 words long'
-      displayWarning(this.warning)
-      return
-    }
-
-    if (password.length < 8) {
-      this.warning = 'Passwords require a mimimum length of 8'
-      displayWarning(this.warning)
-      return
-    }
-
-    if (password !== confirmPassword) {
-      this.warning = 'Confirmed password does not match'
-      displayWarning(this.warning)
-      return
-    }
-    this.warning = null
     leaveImportSeedScreenState()
-    createNewVaultAndRestore(password, seedPhrase)
+    createNewVaultAndRestore(password, this.parseSeedPhrase(seedPhrase))
       .then(next)
   }
 
   render () {
-    return this.props.isLoading
-      ? <LoadingScreen loadingMessage="Creating your new account" />
-      : (
+    const { seedPhrase, password, confirmPassword } = this.state
+    const { warning } = this.props
+    const importDisabled = warning || !seedPhrase || !password || !confirmPassword
+    return (
       <div className="import-account">
         <a
           className="import-account__back-button"
@@ -79,7 +100,8 @@ class ImportSeedPhraseScreen extends Component {
           <label className="import-account__input-label">Wallet Seed</label>
           <textarea
             className="import-account__secret-phrase"
-              onChange={e => this.setState({seedPhrase: e.target.value})}
+            onChange={e => this.onChange({seedPhrase: e.target.value})}
+            value={this.state.seedPhrase}
             placeholder="Separate each word with a single space"
           />
         </div>
@@ -94,21 +116,30 @@ class ImportSeedPhraseScreen extends Component {
             className="first-time-flow__input"
             type="password"
             placeholder="New Password (min 8 characters)"
-              onChange={e => this.setState({password: e.target.value})}
+            onChange={e => this.onChange({password: e.target.value})}
           />
         </div>
         <div className="import-account__input-wrapper">
-            <label className="import-account__input-label">Confirm Password</label>
+          <label
+            className="import-account__input-label"
+            className={classnames('import-account__input-label', {
+              'import-account__input-label__disabled': password.length < 8,
+            })}
+          >Confirm Password</label>
           <input
-              className="first-time-flow__input"
+            className={classnames('first-time-flow__input', {
+              'first-time-flow__input__disabled': password.length < 8,
+            })}
             type="password"
             placeholder="Confirm Password"
-              onChange={e => this.setState({confirmPassword: e.target.value})}
+            onChange={e => this.onChange({confirmPassword: e.target.value})}
+            disabled={password.length < 8}
           />
         </div>
         <button
           className="first-time-flow__button"
-            onClick={this.onClick}
+          onClick={() => !importDisabled && this.onClick()}
+          disabled={importDisabled}
         >
           Import
         </button>
@@ -118,7 +149,7 @@ class ImportSeedPhraseScreen extends Component {
 }
 
 export default connect(
-  ({ appState: { isLoading, warning } }) => ({ isLoading, warning }),
+  ({ appState: { warning } }) => ({ warning }),
   dispatch => ({
     leaveImportSeedScreenState: () => {
       dispatch(unMarkPasswordForgotten())

mascara/src/app/first-time/index.css

@@ -1,11 +1,11 @@
 
 .first-time-flow {
-  height: 100vh;
   width: 100vw;
-  background-color: #FFF;
+  background-color: #fff;
   overflow: auto;
   display: flex;
   justify-content: center;
+  flex: 1 0 auto;
 }
 
 .alpha-warning {
@@ -45,12 +45,12 @@
 .buy-ether {
   display: flex;
   flex-flow: column nowrap;
-  margin: 67px 0 50px 146px;
+  margin: 67px 0 50px;
   max-width: 35rem;
 }
 
 .create-password {
-  margin: 67px 0 50px 0px;
+  margin: 67px 0 50px;
 }
 
 .import-account {
@@ -418,6 +418,10 @@ button.backup-phrase__confirm-seed-option:hover {
   line-height: 23px;
 }
 
+.import-account__input-label__disabled {
+  opacity: 0.5;
+}
+
 .import-account__input {
   width: 325px !important;
 }
@@ -564,6 +568,10 @@ button.backup-phrase__confirm-seed-option:hover {
   background-color: #FFFFFF;
 }
 
+.first-time-flow__input__disabled {
+  opacity: 0.5;
+}
+
 .first-time-flow__input::placeholder {
   color: #9B9B9B;
   font-weight: 200;

ui/app/app.js

@@ -288,10 +288,10 @@ App.prototype.renderAppBar = function () {
             }),
 
             // metamask name
+            h('.flex-row', [
               h('h1', 'MetaMask'),
-
               h('div.beta-label', 'BETA'),
-
+            ]),
           ]),
 
           h('div.header__right-actions', [

ui/app/css/itcss/components/header.scss

@@ -80,11 +80,10 @@
   font-family: Roboto;
   text-transform: uppercase;
   font-weight: 500;
-  font-size: 0.8rem;
-  padding-left: 9px;
+  font-size: .8rem;
   color: $buttercup;
-  align-self: flex-start;
-  margin-top: 10px;
+  margin-left: 5px;
+  line-height: initial;
 
   @media screen and (max-width: 575px) {
     display: none;