diff --git a/CHANGELOG.md b/CHANGELOG.md
index 65b25c13d786..f4bb4f3fc714 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
## 7.7.0 Thu Nov 28 2019
- [#7004](https://github.com/MetaMask/metamask-extension/pull/7004): Connect distinct accounts per site
diff --git a/ui/app/pages/create-account/import-account/json.js b/ui/app/pages/create-account/import-account/json.js
index 46a14c1a95c7..ffe895a72550 100644
--- a/ui/app/pages/create-account/import-account/json.js
+++ b/ui/app/pages/create-account/import-account/json.js
@@ -14,10 +14,14 @@ const HELP_LINK = 'https://metamask.zendesk.com/hc/en-us/articles/360015489351-I
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 (
@@ -40,6 +44,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}
/>
@@ -90,8 +97,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 }) => {
@@ -119,6 +125,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 988c42e6be9c..c42755621023 100644
--- a/ui/app/pages/create-account/import-account/private-key.js
+++ b/ui/app/pages/create-account/import-account/private-key.js
@@ -23,10 +23,12 @@ 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 privateKey = this.inputRef.current.value
const { importNewAccount, history, displayWarning, setSelectedAddress, firstAddress } = this.props
importNewAccount('Private Key', [ privateKey ])
@@ -63,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
@@ -77,6 +88,8 @@ class PrivateKeyImportView extends Component {
type="password"
id="private-key-box"
onKeyPress={e => this.createKeyringOnEnter(e)}
+ onChange={() => this.checkInputEmpty()}
+ ref={this.inputRef}
/>
@@ -96,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')}