diff options
| -rw-r--r-- | package.json | 1 | ||||
| -rw-r--r-- | ui/app/accounts/import/index.js | 6 | ||||
| -rw-r--r-- | ui/app/accounts/import/json.js | 75 |
3 files changed, 77 insertions, 5 deletions
diff --git a/package.json b/package.json index 2c0c30523..828828753 100644 --- a/package.json +++ b/package.json @@ -84,6 +84,7 @@ "react-markdown": "^2.3.0", "react-redux": "^4.4.5", "react-select": "^1.0.0-rc.2", + "react-simple-file-input": "^1.0.0", "react-tooltip-component": "^0.3.0", "readable-stream": "^2.1.2", "redux": "^3.0.5", diff --git a/ui/app/accounts/import/index.js b/ui/app/accounts/import/index.js index 18a6b985c..96350852a 100644 --- a/ui/app/accounts/import/index.js +++ b/ui/app/accounts/import/index.js @@ -6,11 +6,11 @@ import Select from 'react-select' // Subviews const JsonImportView = require('./json.js') -const SeedImportView = require('./seed.js') const PrivateKeyImportView = require('./private-key.js') const menuItems = [ 'Private Key', + 'JSON File', ] module.exports = connect(mapStateToProps)(AccountImportSubview) @@ -81,10 +81,10 @@ AccountImportSubview.prototype.renderImportView = function() { const current = type || menuItems[0] switch (current) { - case 'HD Key Tree': - return h(SeedImportView) case 'Private Key': return h(PrivateKeyImportView) + case 'JSON File': + return h(JsonImportView) default: return h(JsonImportView) } 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 ])) +} + |