1 files changed, 161 insertions, 0 deletions
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..de8d675e1
--- /dev/null
+++ b/mascara/src/app/first-time/import-seed-phrase-screen.js
@@ -0,0 +1,161 @@
+import React, { Component } from 'react'
+import PropTypes from 'prop-types'
+import {connect} from 'react-redux'
+import classnames from 'classnames'
+import {
+  createNewVaultAndRestore,
+  hideWarning,
+  displayWarning,
+  unMarkPasswordForgotten,
+} 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,
+    displayWarning: PropTypes.func,
+    leaveImportSeedScreenState: PropTypes.func,
+  };
+
+  state = {
+    seedPhrase: '',
+    password: '',
+    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 } = this.state
+    const {
+      createNewVaultAndRestore,
+      next,
+      displayWarning,
+      leaveImportSeedScreenState,
+    } = this.props
+
+    leaveImportSeedScreenState()
+    createNewVaultAndRestore(password, this.parseSeedPhrase(seedPhrase))
+      .then(next)
+  }
+
+  render () {
+    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: { warning } }) => ({ warning }),
+  dispatch => ({
+    leaveImportSeedScreenState: () => {
+      dispatch(unMarkPasswordForgotten())
+    },
+    createNewVaultAndRestore: (pw, seed) => dispatch(createNewVaultAndRestore(pw, seed)),
+    displayWarning: (warning) => dispatch(displayWarning(warning)),
+    hideWarning: () => dispatch(hideWarning()),
+  })
+)(ImportSeedPhraseScreen)