From 9126652f2e8b5b612f894bbb6c46fb1ef7861d06 Mon Sep 17 00:00:00 2001
From: Dan Finlay <dan@danfinlay.com>
Date: Wed, 18 Jan 2017 16:09:21 -0800
Subject: Implement naieve JSON file importing

Doesn't work on any JSON file I have, it's a very naieve strategy provided by ethereumjs-wallet.  Will need to raise its sophistication before deploying to production.
---
 ui/app/accounts/import/json.js | 75 ++++++++++++++++++++++++++++++++++++++++--
 1 file changed, 73 insertions(+), 2 deletions(-)

(limited to 'ui/app/accounts/import/json.js')

diff --git a/ui/app/accounts/import/json.js b/ui/app/accounts/import/json.js
index 22cf95cfd..1c2b331d4 100644
--- a/ui/app/accounts/import/json.js
+++ b/ui/app/accounts/import/json.js
@@ -2,11 +2,15 @@ const inherits = require('util').inherits
 const Component = require('react').Component
 const h = require('react-hyperscript')
 const connect = require('react-redux').connect
+const actions = require('../../actions')
+const FileInput = require('react-simple-file-input').default
 
 module.exports = connect(mapStateToProps)(JsonImportSubview)
 
 function mapStateToProps (state) {
-  return {}
+  return {
+    error: state.appState.warning,
+  }
 }
 
 inherits(JsonImportSubview, Component)
@@ -15,13 +19,80 @@ function JsonImportSubview () {
 }
 
 JsonImportSubview.prototype.render = function () {
+  const { error } = this.props
+
   return (
     h('div', {
       style: {
+        display: 'flex',
+        flexDirection: 'column',
+        alignItems: 'center',
+        padding: '5px 15px 0px 15px',
       },
     }, [
-      `Upload your json file here!`,
+
+      h('p', 'Used by a variety of different clients'),
+
+      h(FileInput, {
+        readAs: 'text',
+        onLoad: this.onLoad.bind(this),
+        style: {
+          margin: '20px 0px 12px 20px',
+          fontSize: '15px',
+        },
+      }),
+
+      h('input.large-input.letter-spacey', {
+        type: 'password',
+        placeholder: 'Enter password',
+        id: 'json-password-box',
+        onKeyPress: this.createKeyringOnEnter.bind(this),
+        style: {
+          width: 260,
+          marginTop: 12,
+        },
+      }),
+
+      h('button.primary', {
+        onClick: this.createNewKeychain.bind(this),
+        style: {
+          margin: 12,
+        },
+      }, 'Import'),
+
+      error ? h('span.warning', error) : null,
     ])
   )
 }
 
+JsonImportSubview.prototype.onLoad = function (event, file) {
+  this.setState({file: file, fileContents: event.target.result})
+}
+
+JsonImportSubview.prototype.createKeyringOnEnter = function (event) {
+  if (event.key === 'Enter') {
+    event.preventDefault()
+    this.createNewKeychain()
+  }
+}
+
+JsonImportSubview.prototype.createNewKeychain = function () {
+  const state = this.state
+  const { fileContents } = state
+
+  if (!fileContents) {
+    const message = 'You must select a file to import.'
+    return this.props.dispatch(actions.displayWarning(message))
+  }
+
+  const passwordInput = document.getElementById('json-password-box')
+  const password = passwordInput.value
+
+  if (!password) {
+    const message = 'You must enter a password for the selected file.'
+    return this.props.dispatch(actions.displayWarning(message))
+  }
+
+  this.props.dispatch(actions.importNewAccount('JSON File', [ fileContents, password ]))
+}
+
-- 
cgit