From 8b90b1d1b12bdae4f1fa06caec5cd5619dc83437 Mon Sep 17 00:00:00 2001
From: Alexander Tseung <alextsg@gmail.com>
Date: Tue, 6 Feb 2018 22:03:37 -0800
Subject: Remove accessing PropTypes from main React package

---
 mascara/src/app/first-time/import-seed-phrase-screen.js | 3 ++-
 1 file changed, 2 insertions(+), 1 deletion(-)

(limited to 'mascara/src/app/first-time/import-seed-phrase-screen.js')

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 2b01fa75d..181151ca9 100644
--- a/mascara/src/app/first-time/import-seed-phrase-screen.js
+++ b/mascara/src/app/first-time/import-seed-phrase-screen.js
@@ -1,4 +1,5 @@
-import React, {Component, PropTypes} from 'react'
+import React, { Component } from 'react'
+import PropTypes from 'prop-types'
 import {connect} from 'react-redux'
 import LoadingScreen from './loading-screen'
 import {createNewVaultAndRestore, hideWarning, displayWarning} from '../../../../ui/app/actions'
-- 
cgit 


From c26e0d555b7cb89e88713041714206abd8f4275e Mon Sep 17 00:00:00 2001
From: Dan <danjm.com@gmail.com>
Date: Mon, 19 Feb 2018 22:46:18 -0330
Subject: Fix Import Existing DEN in popup New UI first time flow.

---
 mascara/src/app/first-time/import-seed-phrase-screen.js | 14 ++++++++++++--
 1 file changed, 12 insertions(+), 2 deletions(-)

(limited to 'mascara/src/app/first-time/import-seed-phrase-screen.js')

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 181151ca9..a03a16329 100644
--- a/mascara/src/app/first-time/import-seed-phrase-screen.js
+++ b/mascara/src/app/first-time/import-seed-phrase-screen.js
@@ -2,7 +2,13 @@ import React, { Component } from 'react'
 import PropTypes from 'prop-types'
 import {connect} from 'react-redux'
 import LoadingScreen from './loading-screen'
-import {createNewVaultAndRestore, hideWarning, displayWarning} from '../../../../ui/app/actions'
+import {
+  createNewVaultAndRestore,
+  hideWarning,
+  displayWarning,
+  unMarkPasswordForgotten,
+  clearNotices,
+} from '../../../../ui/app/actions'
 
 class ImportSeedPhraseScreen extends Component {
   static propTypes = {
@@ -23,7 +29,7 @@ class ImportSeedPhraseScreen extends Component {
 
   onClick = () => {
     const { password, seedPhrase, confirmPassword } = this.state
-    const { createNewVaultAndRestore, next, displayWarning } = this.props
+    const { createNewVaultAndRestore, next, displayWarning, leaveImportSeedSreenState } = this.props
 
     if (seedPhrase.split(' ').length !== 12) {
       this.warning = 'Seed Phrases are 12 words long'
@@ -43,6 +49,7 @@ class ImportSeedPhraseScreen extends Component {
       return
     }
     this.warning = null
+    leaveImportSeedSreenState()
     createNewVaultAndRestore(password, seedPhrase)
       .then(next)
   }
@@ -113,6 +120,9 @@ class ImportSeedPhraseScreen extends Component {
 export default connect(
   ({ appState: { isLoading, warning } }) => ({ isLoading, warning }),
   dispatch => ({
+    leaveImportSeedSreenState: () => {
+      dispatch(unMarkPasswordForgotten())
+    },
     createNewVaultAndRestore: (pw, seed) => dispatch(createNewVaultAndRestore(pw, seed)),
     displayWarning: (warning) => dispatch(displayWarning(warning)),
     hideWarning: () => dispatch(hideWarning()),
-- 
cgit 


From 00c5dd2736cd389c6658778bb5238eefb2d2f926 Mon Sep 17 00:00:00 2001
From: Dan <danjm.com@gmail.com>
Date: Tue, 20 Feb 2018 14:00:35 -0330
Subject: Fix variable spelling error.

---
 mascara/src/app/first-time/import-seed-phrase-screen.js | 6 +++---
 1 file changed, 3 insertions(+), 3 deletions(-)

(limited to 'mascara/src/app/first-time/import-seed-phrase-screen.js')

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 a03a16329..93c3f9203 100644
--- a/mascara/src/app/first-time/import-seed-phrase-screen.js
+++ b/mascara/src/app/first-time/import-seed-phrase-screen.js
@@ -29,7 +29,7 @@ class ImportSeedPhraseScreen extends Component {
 
   onClick = () => {
     const { password, seedPhrase, confirmPassword } = this.state
-    const { createNewVaultAndRestore, next, displayWarning, leaveImportSeedSreenState } = this.props
+    const { createNewVaultAndRestore, next, displayWarning, leaveImportSeedScreenState } = this.props
 
     if (seedPhrase.split(' ').length !== 12) {
       this.warning = 'Seed Phrases are 12 words long'
@@ -49,7 +49,7 @@ class ImportSeedPhraseScreen extends Component {
       return
     }
     this.warning = null
-    leaveImportSeedSreenState()
+    leaveImportSeedScreenState()
     createNewVaultAndRestore(password, seedPhrase)
       .then(next)
   }
@@ -120,7 +120,7 @@ class ImportSeedPhraseScreen extends Component {
 export default connect(
   ({ appState: { isLoading, warning } }) => ({ isLoading, warning }),
   dispatch => ({
-    leaveImportSeedSreenState: () => {
+    leaveImportSeedScreenState: () => {
       dispatch(unMarkPasswordForgotten())
     },
     createNewVaultAndRestore: (pw, seed) => dispatch(createNewVaultAndRestore(pw, seed)),
-- 
cgit 


From 5f8a632fec0e83b148e4e0b7fc95339fb870d804 Mon Sep 17 00:00:00 2001
From: Alexander Tseung <alextsg@users.noreply.github.com>
Date: Tue, 6 Mar 2018 09:14:57 -0800
Subject: 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.
---
 .../app/first-time/import-seed-phrase-screen.js    | 191 ++++++++++++---------
 1 file changed, 111 insertions(+), 80 deletions(-)

(limited to 'mascara/src/app/first-time/import-seed-phrase-screen.js')

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
-      ? <LoadingScreen loadingMessage="Creating your new account" />
-      : (
-        <div className="import-account">
-          <a
-            className="import-account__back-button"
-            onClick={e => {
-              e.preventDefault()
-              this.props.back()
-            }}
-            href="#"
-          >
-            {`< Back`}
-          </a>
-          <div className="import-account__title">
-            Import an Account with Seed Phrase
-          </div>
-          <div className="import-account__selector-label">
-            Enter your secret twelve word phrase here to restore your vault.
-          </div>
-          <div className="import-account__input-wrapper">
-            <label className="import-account__input-label">Wallet Seed</label>
-            <textarea
-              className="import-account__secret-phrase"
-              onChange={e => this.setState({seedPhrase: e.target.value})}
-              placeholder="Separate each word with a single space"
-            />
-          </div>
-          <span
-            className="error"
-          >
-            {this.props.warning}
-          </span>
-          <div className="import-account__input-wrapper">
-            <label className="import-account__input-label">New Password</label>
-            <input
-              className="first-time-flow__input"
-              type="password"
-              placeholder="New Password (min 8 characters)"
-              onChange={e => this.setState({password: e.target.value})}
-            />
-          </div>
-          <div className="import-account__input-wrapper">
-            <label className="import-account__input-label">Confirm Password</label>
-            <input
-              className="first-time-flow__input"
-              type="password"
-              placeholder="Confirm Password"
-              onChange={e => this.setState({confirmPassword: e.target.value})}
-            />
-          </div>
-          <button
-            className="first-time-flow__button"
-            onClick={this.onClick}
-          >
-            Import
-          </button>
+    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"
+          onClick={e => {
+            e.preventDefault()
+            this.props.back()
+          }}
+          href="#"
+        >
+          {`< Back`}
+        </a>
+        <div className="import-account__title">
+          Import an Account with Seed Phrase
+        </div>
+        <div className="import-account__selector-label">
+          Enter your secret twelve word phrase here to restore your vault.
+        </div>
+        <div className="import-account__input-wrapper">
+          <label className="import-account__input-label">Wallet Seed</label>
+          <textarea
+            className="import-account__secret-phrase"
+            onChange={e => this.onChange({seedPhrase: e.target.value})}
+            value={this.state.seedPhrase}
+            placeholder="Separate each word with a single space"
+          />
+        </div>
+        <span
+          className="error"
+        >
+          {this.props.warning}
+        </span>
+        <div className="import-account__input-wrapper">
+          <label className="import-account__input-label">New Password</label>
+          <input
+            className="first-time-flow__input"
+            type="password"
+            placeholder="New Password (min 8 characters)"
+            onChange={e => this.onChange({password: e.target.value})}
+          />
+        </div>
+        <div className="import-account__input-wrapper">
+          <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={classnames('first-time-flow__input', {
+              'first-time-flow__input__disabled': password.length < 8,
+            })}
+            type="password"
+            placeholder="Confirm Password"
+            onChange={e => this.onChange({confirmPassword: e.target.value})}
+            disabled={password.length < 8}
+          />
         </div>
-      )
+        <button
+          className="first-time-flow__button"
+          onClick={() => !importDisabled && this.onClick()}
+          disabled={importDisabled}
+        >
+          Import
+        </button>
+      </div>
+    )
   }
 }
 
 export default connect(
-  ({ appState: { isLoading, warning } }) => ({ isLoading, warning }),
+  ({ appState: { warning } }) => ({ warning }),
   dispatch => ({
     leaveImportSeedScreenState: () => {
       dispatch(unMarkPasswordForgotten())
-- 
cgit 


From 7fb27cf0c7a5c8eb2aa492ced603873996537c81 Mon Sep 17 00:00:00 2001
From: Alexander Tseung <alextsg@users.noreply.github.com>
Date: Fri, 16 Mar 2018 08:50:21 -0700
Subject: Update margins for consistency in first time flow (#3588)

---
 .../app/first-time/import-seed-phrase-screen.js    | 129 +++++++++++----------
 1 file changed, 66 insertions(+), 63 deletions(-)

(limited to 'mascara/src/app/first-time/import-seed-phrase-screen.js')

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 de8d675e1..86f02ceac 100644
--- a/mascara/src/app/first-time/import-seed-phrase-screen.js
+++ b/mascara/src/app/first-time/import-seed-phrase-screen.js
@@ -79,70 +79,73 @@ class ImportSeedPhraseScreen extends Component {
     const { warning } = this.props
     const importDisabled = warning || !seedPhrase || !password || !confirmPassword
     return (
-      <div className="import-account">
-        <a
-          className="import-account__back-button"
-          onClick={e => {
-            e.preventDefault()
-            this.props.back()
-          }}
-          href="#"
-        >
-          {`< Back`}
-        </a>
-        <div className="import-account__title">
-          Import an Account with Seed Phrase
+      <div className="first-view-main-wrapper">
+        <div className="first-view-main">
+          <div className="import-account">
+            <a
+              className="import-account__back-button"
+              onClick={e => {
+                e.preventDefault()
+                this.props.back()
+              }}
+              href="#"
+            >
+              {`< Back`}
+            </a>
+            <div className="import-account__title">
+              Import an Account with Seed Phrase
+            </div>
+            <div className="import-account__selector-label">
+              Enter your secret twelve word phrase here to restore your vault.
+            </div>
+            <div className="import-account__input-wrapper">
+              <label className="import-account__input-label">Wallet Seed</label>
+              <textarea
+                className="import-account__secret-phrase"
+                onChange={e => this.onChange({seedPhrase: e.target.value})}
+                value={this.state.seedPhrase}
+                placeholder="Separate each word with a single space"
+              />
+            </div>
+            <span
+              className="error"
+            >
+              {this.props.warning}
+            </span>
+            <div className="import-account__input-wrapper">
+              <label className="import-account__input-label">New Password</label>
+              <input
+                className="first-time-flow__input"
+                type="password"
+                placeholder="New Password (min 8 characters)"
+                onChange={e => this.onChange({password: e.target.value})}
+              />
+            </div>
+            <div className="import-account__input-wrapper">
+              <label
+                className={classnames('import-account__input-label', {
+                  'import-account__input-label__disabled': password.length < 8,
+                })}
+              >Confirm Password</label>
+              <input
+                className={classnames('first-time-flow__input', {
+                  'first-time-flow__input__disabled': password.length < 8,
+                })}
+                type="password"
+                placeholder="Confirm Password"
+                onChange={e => this.onChange({confirmPassword: e.target.value})}
+                disabled={password.length < 8}
+              />
+            </div>
+            <button
+              className="first-time-flow__button"
+              onClick={() => !importDisabled && this.onClick()}
+              disabled={importDisabled}
+            >
+              Import
+            </button>
+          </div>
         </div>
-        <div className="import-account__selector-label">
-          Enter your secret twelve word phrase here to restore your vault.
-        </div>
-        <div className="import-account__input-wrapper">
-          <label className="import-account__input-label">Wallet Seed</label>
-          <textarea
-            className="import-account__secret-phrase"
-            onChange={e => this.onChange({seedPhrase: e.target.value})}
-            value={this.state.seedPhrase}
-            placeholder="Separate each word with a single space"
-          />
-        </div>
-        <span
-          className="error"
-        >
-          {this.props.warning}
-        </span>
-        <div className="import-account__input-wrapper">
-          <label className="import-account__input-label">New Password</label>
-          <input
-            className="first-time-flow__input"
-            type="password"
-            placeholder="New Password (min 8 characters)"
-            onChange={e => this.onChange({password: e.target.value})}
-          />
-        </div>
-        <div className="import-account__input-wrapper">
-          <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={classnames('first-time-flow__input', {
-              'first-time-flow__input__disabled': password.length < 8,
-            })}
-            type="password"
-            placeholder="Confirm Password"
-            onChange={e => this.onChange({confirmPassword: e.target.value})}
-            disabled={password.length < 8}
-          />
-        </div>
-        <button
-          className="first-time-flow__button"
-          onClick={() => !importDisabled && this.onClick()}
-          disabled={importDisabled}
-        >
-          Import
-        </button>
       </div>
     )
   }
-- 
cgit