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