From f503120b82c108efae0a4fc1282a43721d961ca2 Mon Sep 17 00:00:00 2001
From: Chi Kei Chan <chikeichan@gmail.com>
Date: Fri, 20 Oct 2017 22:31:59 -0700
Subject: Add Import With Seed Phrase

---
 .../app/first-time/import-seed-phrase-screen.js    | 103 +++++++++++++++++++++
 1 file changed, 103 insertions(+)
 create mode 100644 mascara/src/app/first-time/import-seed-phrase-screen.js

(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
new file mode 100644
index 000000000..d2eed61b7
--- /dev/null
+++ b/mascara/src/app/first-time/import-seed-phrase-screen.js
@@ -0,0 +1,103 @@
+import React, {Component, PropTypes} from 'react'
+import {connect} from 'react-redux'
+import LoadingScreen from './loading-screen'
+import {createNewVaultAndRestore, hideWarning} from '../../../../ui/app/actions'
+
+class ImportSeedPhraseScreen extends Component {
+  static propTypes = {
+    warning: PropTypes.string,
+    back: PropTypes.func.isRequired,
+    next: PropTypes.func.isRequired,
+    createNewVaultAndRestore: PropTypes.func.isRequired,
+    hideWarning: PropTypes.func.isRequired,
+    isLoading: PropTypes.bool.isRequired,
+  };
+
+  state = {
+    seedPhrase: '',
+    password: '',
+    confirmPassword: '',
+  }
+
+  onClick = () => {
+    const { password, seedPhrase } = this.state
+    const { createNewVaultAndRestore, next } = this.props
+
+    createNewVaultAndRestore(password, seedPhrase)
+      .then(next)
+  }
+
+  isValid () {
+    const { seedPhrase, password, confirmPassword } = this.state
+
+    if (seedPhrase.split(' ').length !== 12) {
+      return false
+    }
+
+    if (password.length < 8) {
+      return false
+    }
+
+    if (password !== confirmPassword) {
+      return false
+    }
+
+    return true
+  }
+
+  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>
+          <textarea
+            className="import-account__secret-phrase"
+            onChange={e => this.setState({seedPhrase: e.target.value})}
+          />
+          <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"
+            onClick={this.onClick}
+            disabled={!this.isValid()}
+          >
+            Import
+          </button>
+        </div>
+      )
+  }
+}
+
+export default connect(
+  ({ appState: { isLoading, warning } }) => ({ isLoading, warning }),
+  dispatch => ({
+    createNewVaultAndRestore: (pw, seed) => dispatch(createNewVaultAndRestore(pw, seed)),
+    hideWarning: () => dispatch(hideWarning()),
+  })
+)(ImportSeedPhraseScreen)
-- 
cgit 


From 099078d13b7f8c3c9c4ca1e4d9e775f480b0ad8d Mon Sep 17 00:00:00 2001
From: tmashuang <tmashuang@gmail.com>
Date: Tue, 24 Oct 2017 08:40:07 -0700
Subject: Add error messages when importing an account

---
 .../app/first-time/import-seed-phrase-screen.js    | 38 +++++++++++++---------
 1 file changed, 22 insertions(+), 16 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 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})}
           />
+          <span
+            className="error"
+          >
+            {this.props.warning}
+          </span>
           <input
             className="first-time-flow__input"
             type="password"
@@ -85,7 +91,6 @@ class ImportSeedPhraseScreen extends Component {
           <button
             className="first-time-flow__button"
             onClick={this.onClick}
-            disabled={!this.isValid()}
           >
             Import
           </button>
@@ -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)
-- 
cgit