aboutsummaryrefslogtreecommitdiffstats
path: root/ui
diff options
context:
space:
mode:
authorAlexander Tseung <alextsg@users.noreply.github.com>2018-03-09 23:30:31 +0800
committerGitHub <noreply@github.com>2018-03-09 23:30:31 +0800
commit4b2e52795d52cfcf227ee56fba9f975e057e846d (patch)
treeb5dadbd4ac3b48329646eeb3de404d2a91920c8a /ui
parentf28bbe5b0392a9ae45f7f17fbc979ef796b27d16 (diff)
downloadtangerine-wallet-browser-4b2e52795d52cfcf227ee56fba9f975e057e846d.tar
tangerine-wallet-browser-4b2e52795d52cfcf227ee56fba9f975e057e846d.tar.gz
tangerine-wallet-browser-4b2e52795d52cfcf227ee56fba9f975e057e846d.tar.bz2
tangerine-wallet-browser-4b2e52795d52cfcf227ee56fba9f975e057e846d.tar.lz
tangerine-wallet-browser-4b2e52795d52cfcf227ee56fba9f975e057e846d.tar.xz
tangerine-wallet-browser-4b2e52795d52cfcf227ee56fba9f975e057e846d.tar.zst
tangerine-wallet-browser-4b2e52795d52cfcf227ee56fba9f975e057e846d.zip
Explicitly define state in import account from json component (#3491)
Diffstat (limited to 'ui')
-rw-r--r--ui/app/accounts/import/json.js180
-rw-r--r--ui/app/css/itcss/components/new-account.scss2
2 files changed, 103 insertions, 79 deletions
diff --git a/ui/app/accounts/import/json.js b/ui/app/accounts/import/json.js
index dd5dfad22..c13622166 100644
--- a/ui/app/accounts/import/json.js
+++ b/ui/app/accounts/import/json.js
@@ -1,5 +1,5 @@
-const inherits = require('util').inherits
const Component = require('react').Component
+const PropTypes = require('prop-types')
const h = require('react-hyperscript')
const connect = require('react-redux').connect
const actions = require('../../actions')
@@ -7,100 +7,124 @@ const FileInput = require('react-simple-file-input').default
const HELP_LINK = 'https://support.metamask.io/kb/article/7-importing-accounts'
-module.exports = connect(mapStateToProps)(JsonImportSubview)
+class JsonImportSubview extends Component {
+ constructor (props) {
+ super(props)
-function mapStateToProps (state) {
- return {
- error: state.appState.warning,
+ this.state = {
+ file: null,
+ fileContents: '',
+ }
}
-}
-inherits(JsonImportSubview, Component)
-function JsonImportSubview () {
- Component.call(this)
-}
+ render () {
+ const { error } = this.props
+
+ return (
+ h('div.new-account-import-form__json', [
+
+ h('p', 'Used by a variety of different clients'),
+ h('a.warning', {
+ href: HELP_LINK,
+ target: '_blank',
+ }, 'File import not working? Click here!'),
+
+ h(FileInput, {
+ readAs: 'text',
+ onLoad: this.onLoad.bind(this),
+ style: {
+ margin: '20px 0px 12px 34%',
+ fontSize: '15px',
+ display: 'flex',
+ justifyContent: 'center',
+ },
+ }),
+
+ h('input.new-account-import-form__input-password', {
+ type: 'password',
+ placeholder: 'Enter password',
+ id: 'json-password-box',
+ onKeyPress: this.createKeyringOnEnter.bind(this),
+ }),
+
+ h('div.new-account-create-form__buttons', {}, [
+
+ h('button.new-account-create-form__button-cancel', {
+ onClick: () => this.props.goHome(),
+ }, [
+ 'CANCEL',
+ ]),
+
+ h('button.new-account-create-form__button-create', {
+ onClick: () => this.createNewKeychain(),
+ }, [
+ 'IMPORT',
+ ]),
-JsonImportSubview.prototype.render = function () {
- const { error } = this.props
-
- return (
- h('div.new-account-import-form__json', [
-
- h('p', 'Used by a variety of different clients'),
- h('a.warning', { href: HELP_LINK, target: '_blank' }, 'File import not working? Click here!'),
-
- h(FileInput, {
- readAs: 'text',
- onLoad: this.onLoad.bind(this),
- style: {
- margin: '20px 0px 12px 34%',
- fontSize: '15px',
- display: 'flex',
- justifyContent: 'center',
- },
- }),
-
- h('input.new-account-import-form__input-password', {
- type: 'password',
- placeholder: 'Enter password',
- id: 'json-password-box',
- onKeyPress: this.createKeyringOnEnter.bind(this),
- }),
-
- h('div.new-account-create-form__buttons', {}, [
-
- h('button.new-account-create-form__button-cancel', {
- onClick: () => this.props.goHome(),
- }, [
- 'CANCEL',
]),
- h('button.new-account-create-form__button-create', {
- onClick: () => this.createNewKeychain.bind(this),
- }, [
- 'IMPORT',
- ]),
+ error ? h('span.error', error) : null,
+ ])
+ )
+ }
- ]),
+ onLoad (event, file) {
+ this.setState({file: file, fileContents: event.target.result})
+ }
- error ? h('span.error', error) : null,
- ])
- )
-}
+ createKeyringOnEnter (event) {
+ if (event.key === 'Enter') {
+ event.preventDefault()
+ this.createNewKeychain()
+ }
+ }
-JsonImportSubview.prototype.onLoad = function (event, file) {
- this.setState({file: file, fileContents: event.target.result})
-}
+ createNewKeychain () {
+ const state = this.state
-JsonImportSubview.prototype.createKeyringOnEnter = function (event) {
- if (event.key === 'Enter') {
- event.preventDefault()
- this.createNewKeychain()
- }
-}
+ if (!state) {
+ const message = 'You must select a valid file to import.'
+ return this.props.displayWarning(message)
+ }
-JsonImportSubview.prototype.createNewKeychain = function () {
- const state = this.state
+ const { fileContents } = state
- if (!state) {
- const message = 'You must select a valid file to import.'
- return this.props.dispatch(actions.displayWarning(message))
- }
+ if (!fileContents) {
+ const message = 'You must select a file to import.'
+ return this.props.displayWarning(message)
+ }
+
+ const passwordInput = document.getElementById('json-password-box')
+ const password = passwordInput.value
- const { fileContents } = state
+ if (!password) {
+ const message = 'You must enter a password for the selected file.'
+ return this.props.displayWarning(message)
+ }
- if (!fileContents) {
- const message = 'You must select a file to import.'
- return this.props.dispatch(actions.displayWarning(message))
+ this.props.importNewJsonAccount([ fileContents, password ])
}
+}
- const passwordInput = document.getElementById('json-password-box')
- const password = passwordInput.value
+JsonImportSubview.propTypes = {
+ error: PropTypes.string,
+ goHome: PropTypes.func,
+ displayWarning: PropTypes.func,
+ importNewJsonAccount: PropTypes.func,
+}
- if (!password) {
- const message = 'You must enter a password for the selected file.'
- return this.props.dispatch(actions.displayWarning(message))
+const mapStateToProps = state => {
+ return {
+ error: state.appState.warning,
}
+}
- this.props.dispatch(actions.importNewAccount('JSON File', [ fileContents, password ]))
+const mapDispatchToProps = dispatch => {
+ return {
+ goHome: () => dispatch(actions.goHome()),
+ displayWarning: warning => dispatch(actions.displayWarning(warning)),
+ importNewJsonAccount: options => dispatch(actions.importNewAccount('JSON File', options)),
+ }
}
+
+module.exports = connect(mapStateToProps, mapDispatchToProps)(JsonImportSubview)
diff --git a/ui/app/css/itcss/components/new-account.scss b/ui/app/css/itcss/components/new-account.scss
index c6c254ede..08cff867d 100644
--- a/ui/app/css/itcss/components/new-account.scss
+++ b/ui/app/css/itcss/components/new-account.scss
@@ -190,7 +190,7 @@
margin-top: 39px;
display: flex;
width: 100%;
- justify-content: space-evenly;
+ justify-content: space-between;
}
&__button-cancel,