2 files changed, 342 insertions, 0 deletions
diff --git a/ui/app/components/pages/keychains/restore-vault.js b/ui/app/components/pages/keychains/restore-vault.js
new file mode 100644
index 000000000..33575bfbb
--- /dev/null
+++ b/ui/app/components/pages/keychains/restore-vault.js
@@ -0,0 +1,178 @@
+const { withRouter } = require('react-router-dom')
+const PropTypes = require('prop-types')
+const { compose } = require('recompose')
+const PersistentForm = require('../../../../lib/persistent-form')
+const connect = require('../../../metamask-connect')
+const h = require('react-hyperscript')
+const { createNewVaultAndRestore, unMarkPasswordForgotten } = require('../../../actions')
+const { DEFAULT_ROUTE } = require('../../../routes')
+const log = require('loglevel')
+
+class RestoreVaultPage extends PersistentForm {
+  constructor (props) {
+    super(props)
+
+    this.state = {
+      error: null,
+    }
+  }
+
+  createOnEnter (event) {
+    if (event.key === 'Enter') {
+      this.createNewVaultAndRestore()
+    }
+  }
+
+  cancel () {
+    this.props.unMarkPasswordForgotten()
+      .then(this.props.history.push(DEFAULT_ROUTE))
+  }
+
+  createNewVaultAndRestore () {
+    this.setState({ error: null })
+
+    // check password
+    var passwordBox = document.getElementById('password-box')
+    var password = passwordBox.value
+    var passwordConfirmBox = document.getElementById('password-box-confirm')
+    var passwordConfirm = passwordConfirmBox.value
+
+    if (password.length < 8) {
+      this.setState({ error: 'Password not long enough' })
+      return
+    }
+
+    if (password !== passwordConfirm) {
+      this.setState({ error: 'Passwords don\'t match' })
+      return
+    }
+
+    // check seed
+    var seedBox = document.querySelector('textarea.twelve-word-phrase')
+    var seed = seedBox.value.trim()
+    if (seed.split(' ').length !== 12) {
+      this.setState({ error: 'Seed phrases are 12 words long' })
+      return
+    }
+
+    // submit
+    this.props.createNewVaultAndRestore(password, seed)
+      .then(() => this.props.history.push(DEFAULT_ROUTE))
+      .catch(({ message }) => {
+        this.setState({ error: message })
+        log.error(message)
+      })
+  }
+
+  render () {
+    const { error } = this.state
+    this.persistentFormParentId = 'restore-vault-form'
+
+    return (
+      h('.initialize-screen.flex-column.flex-center.flex-grow', [
+
+        h('h3.flex-center.text-transform-uppercase', {
+          style: {
+            background: '#EBEBEB',
+            color: '#AEAEAE',
+            marginBottom: 24,
+            width: '100%',
+            fontSize: '20px',
+            padding: 6,
+          },
+        }, [
+          this.props.t('restoreVault'),
+        ]),
+
+        // wallet seed entry
+        h('h3', 'Wallet Seed'),
+        h('textarea.twelve-word-phrase.letter-spacey', {
+          dataset: {
+            persistentFormId: 'wallet-seed',
+          },
+          placeholder: this.props.t('secretPhrase'),
+        }),
+
+        // password
+        h('input.large-input.letter-spacey', {
+          type: 'password',
+          id: 'password-box',
+          placeholder: this.props.t('newPassword8Chars'),
+          dataset: {
+            persistentFormId: 'password',
+          },
+          style: {
+            width: 260,
+            marginTop: 12,
+          },
+        }),
+
+        // confirm password
+        h('input.large-input.letter-spacey', {
+          type: 'password',
+          id: 'password-box-confirm',
+          placeholder: this.props.t('confirmPassword'),
+          onKeyPress: this.createOnEnter.bind(this),
+          dataset: {
+            persistentFormId: 'password-confirmation',
+          },
+          style: {
+            width: 260,
+            marginTop: 16,
+          },
+        }),
+
+        error && (
+          h('span.error.in-progress-notification', error)
+        ),
+
+        // submit
+        h('.flex-row.flex-space-between', {
+          style: {
+            marginTop: 30,
+            width: '50%',
+          },
+        }, [
+
+          // cancel
+          h('button.primary', {
+            onClick: () => this.cancel(),
+          }, this.props.t('cancel')),
+
+          // submit
+          h('button.primary', {
+            onClick: this.createNewVaultAndRestore.bind(this),
+          }, this.props.t('ok')),
+
+        ]),
+      ])
+    )
+  }
+}
+
+RestoreVaultPage.propTypes = {
+  history: PropTypes.object,
+}
+
+const mapStateToProps = state => {
+  const { appState: { warning, forgottenPassword } } = state
+
+  return {
+    warning,
+    forgottenPassword,
+  }
+}
+
+const mapDispatchToProps = dispatch => {
+  return {
+    createNewVaultAndRestore: (password, seed) => {
+      return dispatch(createNewVaultAndRestore(password, seed))
+    },
+    unMarkPasswordForgotten: () => dispatch(unMarkPasswordForgotten()),
+  }
+}
+
+module.exports = compose(
+  withRouter,
+  connect(mapStateToProps, mapDispatchToProps)
+)(RestoreVaultPage)
diff --git a/ui/app/components/pages/keychains/reveal-seed.js b/ui/app/components/pages/keychains/reveal-seed.js
new file mode 100644
index 000000000..685c81074
--- /dev/null
+++ b/ui/app/components/pages/keychains/reveal-seed.js
@@ -0,0 +1,164 @@
+const { Component } = require('react')
+const { connect } = require('react-redux')
+const PropTypes = require('prop-types')
+const h = require('react-hyperscript')
+const classnames = require('classnames')
+
+const { requestRevealSeedWords } = require('../../../actions')
+const { DEFAULT_ROUTE } = require('../../../routes')
+const ExportTextContainer = require('../../export-text-container')
+
+const PASSWORD_PROMPT_SCREEN = 'PASSWORD_PROMPT_SCREEN'
+const REVEAL_SEED_SCREEN = 'REVEAL_SEED_SCREEN'
+
+class RevealSeedPage extends Component {
+  constructor (props) {
+    super(props)
+
+    this.state = {
+      screen: PASSWORD_PROMPT_SCREEN,
+      password: '',
+      seedWords: null,
+      error: null,
+    }
+  }
+
+  componentDidMount () {
+    const passwordBox = document.getElementById('password-box')
+    if (passwordBox) {
+      passwordBox.focus()
+    }
+  }
+
+  handleSubmit (event) {
+    event.preventDefault()
+    this.setState({ seedWords: null, error: null })
+    this.props.requestRevealSeedWords(this.state.password)
+      .then(seedWords => this.setState({ seedWords, screen: REVEAL_SEED_SCREEN }))
+      .catch(error => this.setState({ error: error.message }))
+  }
+
+  renderWarning () {
+    return (
+      h('.page-container__warning-container', [
+        h('img.page-container__warning-icon', {
+          src: 'images/warning.svg',
+        }),
+        h('.page-container__warning-message', [
+          h('.page-container__warning-title', [this.context.t('revealSeedWordsWarningTitle')]),
+          h('div', [this.context.t('revealSeedWordsWarning')]),
+        ]),
+      ])
+    )
+  }
+
+  renderContent () {
+    return this.state.screen === PASSWORD_PROMPT_SCREEN
+      ? this.renderPasswordPromptContent()
+      : this.renderRevealSeedContent()
+  }
+
+  renderPasswordPromptContent () {
+    const { t } = this.context
+
+    return (
+      h('form', {
+        onSubmit: event => this.handleSubmit(event),
+      }, [
+        h('label.input-label', {
+          htmlFor: 'password-box',
+        }, t('enterPasswordContinue')),
+        h('.input-group', [
+          h('input.form-control', {
+            type: 'password',
+            placeholder: t('password'),
+            id: 'password-box',
+            value: this.state.password,
+            onChange: event => this.setState({ password: event.target.value }),
+            className: classnames({ 'form-control--error': this.state.error }),
+          }),
+        ]),
+        this.state.error && h('.reveal-seed__error', this.state.error),
+      ])
+    )
+  }
+
+  renderRevealSeedContent () {
+    const { t } = this.context
+
+    return (
+      h('div', [
+        h('label.reveal-seed__label', t('yourPrivateSeedPhrase')),
+        h(ExportTextContainer, {
+          text: this.state.seedWords,
+          filename: t('metamaskSeedWords'),
+        }),
+      ])
+    )
+  }
+
+  renderFooter () {
+    return this.state.screen === PASSWORD_PROMPT_SCREEN
+      ? this.renderPasswordPromptFooter()
+      : this.renderRevealSeedFooter()
+  }
+
+  renderPasswordPromptFooter () {
+    return (
+      h('.page-container__footer', [
+        h('button.btn-secondary--lg.page-container__footer-button', {
+          onClick: () => this.props.history.push(DEFAULT_ROUTE),
+        }, this.context.t('cancel')),
+        h('button.btn-primary--lg.page-container__footer-button', {
+          onClick: event => this.handleSubmit(event),
+          disabled: this.state.password === '',
+        }, this.context.t('next')),
+      ])
+    )
+  }
+
+  renderRevealSeedFooter () {
+    return (
+      h('.page-container__footer', [
+        h('button.btn-secondary--lg.page-container__footer-button', {
+          onClick: () => this.props.history.push(DEFAULT_ROUTE),
+        }, this.context.t('close')),
+      ])
+    )
+  }
+
+  render () {
+    return (
+      h('.page-container', [
+        h('.page-container__header', [
+          h('.page-container__title', this.context.t('revealSeedWordsTitle')),
+          h('.page-container__subtitle', this.context.t('revealSeedWordsDescription')),
+        ]),
+        h('.page-container__content', [
+          this.renderWarning(),
+          h('.reveal-seed__content', [
+            this.renderContent(),
+          ]),
+        ]),
+        this.renderFooter(),
+      ])
+    )
+  }
+}
+
+RevealSeedPage.propTypes = {
+  requestRevealSeedWords: PropTypes.func,
+  history: PropTypes.object,
+}
+
+RevealSeedPage.contextTypes = {
+  t: PropTypes.func,
+}
+
+const mapDispatchToProps = dispatch => {
+  return {
+    requestRevealSeedWords: password => dispatch(requestRevealSeedWords(password)),
+  }
+}
+
+module.exports = connect(null, mapDispatchToProps)(RevealSeedPage)