diff --git a/CHANGELOG.md b/CHANGELOG.md
index 063eea13fc79..d224ca9ae049 100644
--- a/CHANGELOG.md
+++ b/CHANGELOG.md
@@ -1,6 +1,7 @@
# Changelog
## Current Develop Branch
+- [#7912](https://github.com/MetaMask/metamask-extension/pull/7912): Disable import button for empty string/file
## 0.0.4 Mon Jan 20 2020
- [#7823](https://github.com/Conflux-Chain/conflux-portal/pull/7823): Wait until element is clickable before clicking in e2e tests (#7823)
diff --git a/ui/app/pages/create-account/import-account/json.js b/ui/app/pages/create-account/import-account/json.js
index 87f1c5112437..0b0d3f4a834b 100644
--- a/ui/app/pages/create-account/import-account/json.js
+++ b/ui/app/pages/create-account/import-account/json.js
@@ -15,10 +15,14 @@ const HELP_LINK =
class JsonImportSubview extends Component {
state = {
fileContents: '',
+ isEmpty: true,
}
+ inputRef = React.createRef()
+
render () {
const { error } = this.props
+ const enabled = !this.state.isEmpty && this.state.fileContents !== ''
return (
@@ -43,6 +47,8 @@ class JsonImportSubview extends Component {
placeholder={this.context.t('enterPassword')}
id="json-password-box"
onKeyPress={this.createKeyringOnEnter.bind(this)}
+ onChange={() => this.checkInputEmpty()}
+ ref={this.inputRef}
/>
@@ -95,8 +102,7 @@ class JsonImportSubview extends Component {
return displayWarning(message)
}
- const passwordInput = document.getElementById('json-password-box')
- const password = passwordInput.value
+ const password = this.inputRef.current.value
importNewJsonAccount([fileContents, password])
.then(({ selectedAddress }) => {
@@ -124,6 +130,15 @@ class JsonImportSubview extends Component {
})
.catch(err => err && displayWarning(err.message || err))
}
+
+ checkInputEmpty () {
+ const password = this.inputRef.current.value
+ let isEmpty = true
+ if (password !== '') {
+ isEmpty = false
+ }
+ this.setState({ isEmpty })
+ }
}
JsonImportSubview.propTypes = {
diff --git a/ui/app/pages/create-account/import-account/private-key.js b/ui/app/pages/create-account/import-account/private-key.js
index 3876f3cf11af..82e2ea916afa 100644
--- a/ui/app/pages/create-account/import-account/private-key.js
+++ b/ui/app/pages/create-account/import-account/private-key.js
@@ -23,16 +23,13 @@ class PrivateKeyImportView extends Component {
error: PropTypes.node,
}
+ inputRef = React.createRef()
+
+ state = { isEmpty: true }
+
createNewKeychain () {
- const input = document.getElementById('private-key-box')
- const privateKey = input.value
- const {
- importNewAccount,
- history,
- displayWarning,
- setSelectedAddress,
- firstAddress,
- } = this.props
+ const privateKey = this.inputRef.current.value
+ const { importNewAccount, history, displayWarning, setSelectedAddress, firstAddress } = this.props
importNewAccount('Private Key', [privateKey])
.then(({ selectedAddress }) => {
@@ -68,6 +65,15 @@ class PrivateKeyImportView extends Component {
}
}
+ checkInputEmpty () {
+ const privateKey = this.inputRef.current.value
+ let isEmpty = true
+ if (privateKey !== '') {
+ isEmpty = false
+ }
+ this.setState({ isEmpty })
+ }
+
render () {
const { error, displayWarning } = this.props
@@ -82,6 +88,8 @@ class PrivateKeyImportView extends Component {
type="password"
id="private-key-box"
onKeyPress={e => this.createKeyringOnEnter(e)}
+ onChange={() => this.checkInputEmpty()}
+ ref={this.inputRef}
/>
@@ -101,6 +109,7 @@ class PrivateKeyImportView extends Component {
large
className="new-account-create-form__button"
onClick={() => this.createNewKeychain()}
+ disabled={this.state.isEmpty}
>
{this.context.t('import')}