disable import button on Import Account screen for empty string/file (#7912)

* disable import button on Import Account screen for empty string/file
* use refs to access DOM for import-account

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

ui/app/pages/create-account/import-account/json.js

@@ -14,10 +14,14 @@ const HELP_LINK = 'https://metamask.zendesk.com/hc/en-us/articles/360015489331-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 (
       <div className="new-account-import-form__json">
@@ -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}
         />
         <div className="new-account-create-form__buttons">
           <Button
@@ -55,6 +61,7 @@ class JsonImportSubview extends Component {
             large
             className="new-account-create-form__button"
             onClick={() => this.createNewKeychain()}
+            disabled={!enabled}
           >
             {this.context.t('import')}
           </Button>
@@ -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 = {

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}
           />
         </div>
         <div className="new-account-import-form__buttons">
@@ -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')}
           </Button>