Implement seed word confirmation page.

Remove logs.
Move HD render files to ui/app.

3 files changed, 369 insertions, 0 deletions

diff --git a/ui/app/keychains/hd/create-vault-complete.js b/ui/app/keychains/hd/create-vault-complete.js
new file mode 100644
index 000000000..7272ebdbd
--- /dev/null
+++ b/ui/app/keychains/hd/create-vault-complete.js
@@ -0,0 +1,73 @@
+const inherits = require('util').inherits
+const Component = require('react').Component
+const connect = require('react-redux').connect
+const h = require('react-hyperscript')
+const actions = require('../../actions')
+
+module.exports = connect(mapStateToProps)(CreateVaultCompleteScreen)
+
+inherits(CreateVaultCompleteScreen, Component)
+function CreateVaultCompleteScreen () {
+  Component.call(this)
+}
+
+function mapStateToProps (state) {
+  return {
+    seed: state.appState.currentView.seedWords,
+    cachedSeed: state.metamask.seedWords,
+  }
+}
+
+CreateVaultCompleteScreen.prototype.render = function () {
+  var state = this.props
+  var seed = state.seed || state.cachedSeed
+
+  return (
+
+    h('.initialize-screen.flex-column.flex-center.flex-grow', [
+
+      // // subtitle and nav
+      // h('.section-title.flex-row.flex-center', [
+      //   h('h2.page-subtitle', 'Vault Created'),
+      // ]),
+
+      h('h3.flex-center.text-transform-uppercase', {
+        style: {
+          background: '#EBEBEB',
+          color: '#AEAEAE',
+          marginTop: 36,
+          marginBottom: 8,
+          width: '100%',
+          fontSize: '20px',
+          padding: 6,
+        },
+      }, [
+        'Vault Created',
+      ]),
+
+      h('span.error', { // Error for the right red
+        style: {
+          padding: '12px 20px 0px 20px',
+          textAlign: 'center',
+        },
+      }, 'These 12 words can restore all of your MetaMask accounts for this vault.\nSave them somewhere safe and secret.'),
+
+      h('textarea.twelve-word-phrase', {
+        readOnly: true,
+        value: seed,
+      }),
+
+      h('button.primary', {
+        onClick: () => this.confirmSeedWords(),
+        style: {
+          margin: '24px',
+          fontSize: '0.9em',
+        },
+      }, 'I\'ve copied it somewhere safe'),
+    ])
+  )
+}
+
+CreateVaultCompleteScreen.prototype.confirmSeedWords = function () {
+  this.props.dispatch(actions.confirmSeedWords())
+}
diff --git a/ui/app/keychains/hd/recover-seed/confirmation.js b/ui/app/keychains/hd/recover-seed/confirmation.js
new file mode 100644
index 000000000..55b18025f
--- /dev/null
+++ b/ui/app/keychains/hd/recover-seed/confirmation.js
@@ -0,0 +1,148 @@
+const inherits = require('util').inherits
+
+const Component = require('react').Component
+const connect = require('react-redux').connect
+const h = require('react-hyperscript')
+const actions = require('../actions')
+
+module.exports = connect(mapStateToProps)(RevealSeedConfirmatoin)
+
+inherits(RevealSeedConfirmatoin, Component)
+function RevealSeedConfirmatoin () {
+  Component.call(this)
+}
+
+function mapStateToProps (state) {
+  return {
+    warning: state.appState.warning,
+  }
+}
+
+RevealSeedConfirmatoin.prototype.confirmationPhrase = 'I understand'
+
+RevealSeedConfirmatoin.prototype.render = function () {
+  const props = this.props
+  const state = this.state
+
+  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,
+        },
+      }, [
+        'Reveal Seed Words',
+      ]),
+
+      h('.div', {
+        style: {
+          display: 'flex',
+          flexDirection: 'column',
+          padding: '20px',
+          justifyContent: 'center',
+        },
+      }, [
+
+        h('h4', 'Do not recover your seed words in a public place! These words can be used to steal all your accounts.'),
+
+        // confirmation
+        h('input.large-input.letter-spacey', {
+          type: 'password',
+          id: 'password-box',
+          placeholder: 'Enter your password to confirm',
+          onKeyPress: this.checkConfirmation.bind(this),
+          style: {
+            width: 260,
+            marginTop: '12px',
+          },
+        }),
+
+        h(`h4${state && state.confirmationWrong ? '.error' : ''}`, {
+          style: {
+            marginTop: '12px',
+          },
+        }, 'Enter the phrase "I understand" to proceed.'),
+
+        // confirm confirmation
+        h('input.large-input.letter-spacey', {
+          type: 'text',
+          id: 'confirm-box',
+          placeholder: this.confirmationPhrase,
+          onKeyPress: this.checkConfirmation.bind(this),
+          style: {
+            width: 260,
+            marginTop: 16,
+          },
+        }),
+
+        h('.flex-row.flex-space-between', {
+          style: {
+            marginTop: 30,
+            width: '50%',
+          },
+        }, [
+// cancel
+          h('button.primary', {
+            onClick: this.goHome.bind(this),
+          }, 'CANCEL'),
+
+          // submit
+          h('button.primary', {
+            onClick: this.revealSeedWords.bind(this),
+          }, 'OK'),
+
+        ]),
+
+        (props.warning) && (
+          h('span.error', {
+            style: {
+              margin: '20px',
+            },
+          }, props.warning.split('-'))
+        ),
+
+        props.inProgress && (
+          h('span.in-progress-notification', 'Generating Seed...')
+        ),
+      ]),
+    ])
+  )
+}
+
+RevealSeedConfirmatoin.prototype.componentDidMount = function () {
+  document.getElementById('password-box').focus()
+}
+
+RevealSeedConfirmatoin.prototype.goHome = function () {
+  this.props.dispatch(actions.showConfigPage(false))
+}
+
+// create vault
+
+RevealSeedConfirmatoin.prototype.checkConfirmation = function (event) {
+  if (event.key === 'Enter') {
+    event.preventDefault()
+    this.revealSeedWords()
+  }
+}
+
+RevealSeedConfirmatoin.prototype.revealSeedWords = function () {
+  this.setState({ confirmationWrong: false })
+
+  const confirmBox = document.getElementById('confirm-box')
+  const confirmation = confirmBox.value
+  if (confirmation !== this.confirmationPhrase) {
+    confirmBox.value = ''
+    return this.setState({ confirmationWrong: true })
+  }
+
+  var password = document.getElementById('password-box').value
+  this.props.dispatch(actions.requestRevealSeed(password))
+}
diff --git a/ui/app/keychains/hd/restore-vault.js b/ui/app/keychains/hd/restore-vault.js
new file mode 100644
index 000000000..4c1f21008
--- /dev/null
+++ b/ui/app/keychains/hd/restore-vault.js
@@ -0,0 +1,148 @@
+const inherits = require('util').inherits
+const PersistentForm = require('../../lib/persistent-form')
+const connect = require('react-redux').connect
+const h = require('react-hyperscript')
+const actions = require('../actions')
+
+module.exports = connect(mapStateToProps)(RestoreVaultScreen)
+
+inherits(RestoreVaultScreen, PersistentForm)
+function RestoreVaultScreen () {
+  PersistentForm.call(this)
+}
+
+function mapStateToProps (state) {
+  return {
+    warning: state.appState.warning,
+  }
+}
+
+RestoreVaultScreen.prototype.render = function () {
+  var state = this.props
+  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,
+        },
+      }, [
+        'Restore Vault',
+      ]),
+
+      // wallet seed entry
+      h('h3', 'Wallet Seed'),
+      h('textarea.twelve-word-phrase.letter-spacey', {
+        dataset: {
+          persistentFormId: 'wallet-seed',
+        },
+        placeholder: 'Enter your secret twelve word phrase here to restore your vault.',
+      }),
+
+      // password
+      h('input.large-input.letter-spacey', {
+        type: 'password',
+        id: 'password-box',
+        placeholder: 'New Password (min 8 chars)',
+        dataset: {
+          persistentFormId: 'password',
+        },
+        style: {
+          width: 260,
+          marginTop: 12,
+        },
+      }),
+
+      // confirm password
+      h('input.large-input.letter-spacey', {
+        type: 'password',
+        id: 'password-box-confirm',
+        placeholder: 'Confirm Password',
+        onKeyPress: this.onMaybeCreate.bind(this),
+        dataset: {
+          persistentFormId: 'password-confirmation',
+        },
+        style: {
+          width: 260,
+          marginTop: 16,
+        },
+      }),
+
+      (state.warning) && (
+        h('span.error.in-progress-notification', state.warning)
+      ),
+
+      // submit
+
+      h('.flex-row.flex-space-between', {
+        style: {
+          marginTop: 30,
+          width: '50%',
+        },
+      }, [
+
+        // cancel
+        h('button.primary', {
+          onClick: this.showInitializeMenu.bind(this),
+        }, 'CANCEL'),
+
+        // submit
+        h('button.primary', {
+          onClick: this.restoreVault.bind(this),
+        }, 'OK'),
+
+      ]),
+
+    ])
+
+  )
+}
+
+RestoreVaultScreen.prototype.showInitializeMenu = function () {
+  this.props.dispatch(actions.showInitializeMenu())
+}
+
+RestoreVaultScreen.prototype.onMaybeCreate = function (event) {
+  if (event.key === 'Enter') {
+    this.restoreVault()
+  }
+}
+
+RestoreVaultScreen.prototype.restoreVault = function () {
+  // 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.warning = 'Password not long enough'
+
+    this.props.dispatch(actions.displayWarning(this.warning))
+    return
+  }
+  if (password !== passwordConfirm) {
+    this.warning = 'Passwords don\'t match'
+    this.props.dispatch(actions.displayWarning(this.warning))
+    return
+  }
+  // check seed
+  var seedBox = document.querySelector('textarea.twelve-word-phrase')
+  var seed = seedBox.value.trim()
+  if (seed.split(' ').length !== 12) {
+    this.warning = 'seed phrases are 12 words long'
+    this.props.dispatch(actions.displayWarning(this.warning))
+    return
+  }
+  // submit
+  this.warning = null
+  this.props.dispatch(actions.displayWarning(this.warning))
+  this.props.dispatch(actions.recoverFromSeed(password, seed))
+}