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')}