Adjust private key confirmation style and logic.

ui/app/actions.js

@@ -698,7 +698,7 @@ function setRpcTarget (newRpc) {
   }
 }
 
-// Calls the addressBookController to add a new address. 
+// Calls the addressBookController to add a new address.
 function addToAddressBook (recipient, nickname) {
   log.debug(`background.addToAddressBook`)
   return (dispatch) => {
@@ -772,22 +772,30 @@ function requestExportAccount () {
   }
 }
 
-function exportAccount (address) {
+function exportAccount (password, address) {
   var self = this
 
   return function (dispatch) {
     dispatch(self.showLoadingIndication())
 
-    log.debug(`background.exportAccount`)
+    log.debug(`background.submitPassword`)
-    background.exportAccount(address, function (err, result) {
+    background.submitPassword(password, function (err) {
-      dispatch(self.hideLoadingIndication())
-
       if (err) {
-        log.error(err)
+        log.error('Error in submiting password.')
-        return dispatch(self.displayWarning('Had a problem exporting the account.'))
+        dispatch(self.hideLoadingIndication())
+        return dispatch(self.displayWarning('Incorrect Password.'))
       }
+      log.debug(`background.exportAccount`)
+      background.exportAccount(address, function (err, result) {
+        dispatch(self.hideLoadingIndication())
 
-      dispatch(self.showPrivateKey(result))
+        if (err) {
+          log.error(err)
+          return dispatch(self.displayWarning('Had a problem exporting the account.'))
+        }
+
+        dispatch(self.showPrivateKey(result))
+      })
     })
   }
 }

ui/app/components/account-export.js

@@ -4,14 +4,21 @@ const inherits = require('util').inherits
 const copyToClipboard = require('copy-to-clipboard')
 const actions = require('../actions')
 const ethUtil = require('ethereumjs-util')
+const connect = require('react-redux').connect
 
-module.exports = ExportAccountView
+module.exports = connect(mapStateToProps)(ExportAccountView)
 
 inherits(ExportAccountView, Component)
 function ExportAccountView () {
   Component.call(this)
 }
 
+function mapStateToProps (state) {
+  return {
+    warning: state.appState.warning,
+  }
+}
+
 ExportAccountView.prototype.render = function () {
   console.log('EXPORT VIEW')
   console.dir(this.props)
@@ -28,35 +35,57 @@ ExportAccountView.prototype.render = function () {
   if (notExporting) return h('div')
 
   if (exportRequested) {
-    var warning = `Exporting your private key is very dangerous,
+    var warning = `Export private keys at your own risk.`
-      and you should only do it if you know what you're doing.`
-    var confirmation = `If you're absolutely sure, type "I understand" below and
-                        submit.`
     return (
-
       h('div', {
-        key: 'exporting',
         style: {
-          margin: '0 20px',
+          display: 'inline-block',
+          textAlign: 'center',
         },
-      }, [
+      },
-        h('p.error', warning),
+        [
-        h('p', confirmation),
+          h('div', {
-        h('input#exportAccount.sizing-input', {
+            key: 'exporting',
-          onKeyPress: this.onExportKeyPress.bind(this),
+            style: {
-          style: {
+              margin: '0 20px',
-            position: 'relative',
+            },
-            top: '1.5px',
+          }, [
+            h('p.error', warning),
+            h('input#exportAccount.sizing-input', {
+              placeholder: 'confirm password',
+              onKeyPress: this.onExportKeyPress.bind(this),
+              style: {
+                position: 'relative',
+                top: '1.5px',
+                marginBottom: '7px',
+              },
+            }),
+          ]),
+          h('div', {
+            key: 'buttons',
+            style: {
+              margin: '0 20px',
+            },
           },
-        }),
+            [
-        h('button', {
+              h('button', {
-          onClick: () => this.onExportKeyPress({ key: 'Enter', preventDefault: () => {} }),
+                onClick: () => this.onExportKeyPress({ key: 'Enter', preventDefault: () => {} }),
-        }, 'Submit'),
+                style: {
-        h('button', {
+                  marginRight: '10px',
-          onClick: () => this.props.dispatch(actions.backToAccountDetail(this.props.address)),
+                },
-        }, 'Cancel'),
+              }, 'Submit'),
-      ])
+              h('button', {
-
+                onClick: () => this.props.dispatch(actions.backToAccountDetail(this.props.address)),
+              }, 'Cancel'),
+            ]),
+          (this.props.warning) && (
+          h('span.error', {
+            style: {
+              margin: '20px',
+            },
+          }, this.props.warning.split('-'))
+        ),
+        ])
     )
   }
 
@@ -89,15 +118,6 @@ ExportAccountView.prototype.onExportKeyPress = function (event) {
   if (event.key !== 'Enter') return
   event.preventDefault()
 
-  var input = document.getElementById('exportAccount')
+  var input = document.getElementById('exportAccount').value
-  if (input.value === 'I understand') {
+  this.props.dispatch(actions.exportAccount(input, this.props.address))
-    this.props.dispatch(actions.exportAccount(this.props.address))
-  } else {
-    input.value = ''
-    input.placeholder = 'Please retype "I understand" exactly.'
-  }
-}
-
-ExportAccountView.prototype.exportAccount = function (address) {
-  this.props.dispatch(actions.exportAccount(address))
 }

ui/app/css/index.css

@@ -266,8 +266,9 @@ app sections
 }
 
 .sizing-input{
-  font-size: 1em;
+  font-size: 14px;
   height: 30px;
+  padding-left: 5px;
 }
 .editable-label{
   display: flex;