mirror of
https://github.com/kremalicious/metamask-extension.git
synced 2024-10-22 11:22:43 +02:00
Explicitly define state in import account from json component (#3491)
This commit is contained in:
Alexander Tseung
GitHub
parent
f28bbe5b03
commit
4b2e52795d
@ -1,100 +1,122 @@
|
||||
const inherits = require('util').inherits
|
||||
const Component = require('react').Component
|
||||
const h = require('react-hyperscript')
|
||||
const connect = require('react-redux').connect
|
||||
const actions = require('../../../../ui/app/actions')
|
||||
const FileInput = require('react-simple-file-input').default
|
||||
const PropTypes = require('prop-types')
|
||||
|
||||
const HELP_LINK = 'https://github.com/MetaMask/faq/blob/master/README.md#q-i-cant-use-the-import-feature-for-uploading-a-json-file-the-window-keeps-closing-when-i-try-to-select-a-file'
|
||||
|
||||
module.exports = connect(mapStateToProps)(JsonImportSubview)
|
||||
class JsonImportSubview extends Component {
|
||||
constructor (props) {
|
||||
super(props)
|
||||
|
||||
function mapStateToProps (state) {
|
||||
this.state = {
|
||||
file: null,
|
||||
fileContents: '',
|
||||
}
|
||||
}
|
||||
|
||||
render () {
|
||||
const { error } = this.props
|
||||
|
||||
return (
|
||||
h('div', {
|
||||
style: {
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
alignItems: 'center',
|
||||
padding: '5px 15px 0px 15px',
|
||||
},
|
||||
}, [
|
||||
|
||||
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 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.error', error) : null,
|
||||
])
|
||||
)
|
||||
}
|
||||
|
||||
onLoad (event, file) {
|
||||
this.setState({file: file, fileContents: event.target.result})
|
||||
}
|
||||
|
||||
createKeyringOnEnter (event) {
|
||||
if (event.key === 'Enter') {
|
||||
event.preventDefault()
|
||||
this.createNewKeychain()
|
||||
}
|
||||
}
|
||||
|
||||
createNewKeychain () {
|
||||
const { fileContents } = this.state
|
||||
|
||||
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
|
||||
|
||||
if (!password) {
|
||||
const message = 'You must enter a password for the selected file.'
|
||||
return this.props.displayWarning(message)
|
||||
}
|
||||
|
||||
this.props.importNewAccount([ fileContents, password ])
|
||||
}
|
||||
}
|
||||
|
||||
JsonImportSubview.propTypes = {
|
||||
error: PropTypes.string,
|
||||
displayWarning: PropTypes.func,
|
||||
importNewAccount: PropTypes.func,
|
||||
}
|
||||
|
||||
const mapStateToProps = state => {
|
||||
return {
|
||||
error: state.appState.warning,
|
||||
}
|
||||
}
|
||||
|
||||
inherits(JsonImportSubview, Component)
|
||||
function JsonImportSubview () {
|
||||
Component.call(this)
|
||||
}
|
||||
|
||||
JsonImportSubview.prototype.render = function () {
|
||||
const { error } = this.props
|
||||
|
||||
return (
|
||||
h('div', {
|
||||
style: {
|
||||
display: 'flex',
|
||||
flexDirection: 'column',
|
||||
alignItems: 'center',
|
||||
padding: '5px 15px 0px 15px',
|
||||
},
|
||||
}, [
|
||||
|
||||
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 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.error', 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()
|
||||
const mapDispatchToProps = dispatch => {
|
||||
return {
|
||||
goHome: () => dispatch(actions.goHome()),
|
||||
displayWarning: warning => dispatch(actions.displayWarning(warning)),
|
||||
importNewAccount: options => dispatch(actions.importNewAccount('JSON File', options)),
|
||||
}
|
||||
}
|
||||
|
||||
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 ]))
|
||||
}
|
||||
module.exports = connect(mapStateToProps, mapDispatchToProps)(JsonImportSubview)
|
||||
|
||||
@ -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) {
|
||||
this.state = {
|
||||
file: null,
|
||||
fileContents: '',
|
||||
}
|
||||
}
|
||||
|
||||
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',
|
||||
]),
|
||||
|
||||
]),
|
||||
|
||||
error ? h('span.error', error) : null,
|
||||
])
|
||||
)
|
||||
}
|
||||
|
||||
onLoad (event, file) {
|
||||
this.setState({file: file, fileContents: event.target.result})
|
||||
}
|
||||
|
||||
createKeyringOnEnter (event) {
|
||||
if (event.key === 'Enter') {
|
||||
event.preventDefault()
|
||||
this.createNewKeychain()
|
||||
}
|
||||
}
|
||||
|
||||
createNewKeychain () {
|
||||
const state = this.state
|
||||
|
||||
if (!state) {
|
||||
const message = 'You must select a valid file to import.'
|
||||
return this.props.displayWarning(message)
|
||||
}
|
||||
|
||||
const { fileContents } = state
|
||||
|
||||
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
|
||||
|
||||
if (!password) {
|
||||
const message = 'You must enter a password for the selected file.'
|
||||
return this.props.displayWarning(message)
|
||||
}
|
||||
|
||||
this.props.importNewJsonAccount([ fileContents, password ])
|
||||
}
|
||||
}
|
||||
|
||||
JsonImportSubview.propTypes = {
|
||||
error: PropTypes.string,
|
||||
goHome: PropTypes.func,
|
||||
displayWarning: PropTypes.func,
|
||||
importNewJsonAccount: PropTypes.func,
|
||||
}
|
||||
|
||||
const mapStateToProps = state => {
|
||||
return {
|
||||
error: state.appState.warning,
|
||||
}
|
||||
}
|
||||
|
||||
inherits(JsonImportSubview, Component)
|
||||
function JsonImportSubview () {
|
||||
Component.call(this)
|
||||
}
|
||||
|
||||
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,
|
||||
])
|
||||
)
|
||||
}
|
||||
|
||||
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()
|
||||
const mapDispatchToProps = dispatch => {
|
||||
return {
|
||||
goHome: () => dispatch(actions.goHome()),
|
||||
displayWarning: warning => dispatch(actions.displayWarning(warning)),
|
||||
importNewJsonAccount: options => dispatch(actions.importNewAccount('JSON File', options)),
|
||||
}
|
||||
}
|
||||
|
||||
JsonImportSubview.prototype.createNewKeychain = function () {
|
||||
const state = this.state
|
||||
|
||||
if (!state) {
|
||||
const message = 'You must select a valid file to import.'
|
||||
return this.props.dispatch(actions.displayWarning(message))
|
||||
}
|
||||
|
||||
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 ]))
|
||||
}
|
||||
module.exports = connect(mapStateToProps, mapDispatchToProps)(JsonImportSubview)
|
||||
|
||||
@ -190,7 +190,7 @@
|
||||
margin-top: 39px;
|
||||
display: flex;
|
||||
width: 100%;
|
||||
justify-content: space-evenly;
|
||||
justify-content: space-between;
|
||||
}
|
||||
|
||||
&__button-cancel,
|
||||
|
||||
Loading…
Reference in New Issue
Block a user