From 6cfce24e630b6e4f83a6da1ca5715a5dc906fabe Mon Sep 17 00:00:00 2001
From: Brandon Lucas <thebrandonlucas@gmail.com>
Date: Sun, 26 Jan 2020 22:21:41 -0600
Subject: [PATCH 1/3] disable import button on Import Account screen for empty
 string/file

---
 ui/app/pages/create-account/import-account/json.js | 14 ++++++++++++++
 .../create-account/import-account/private-key.js   | 13 +++++++++++++
 2 files changed, 27 insertions(+)

diff --git a/ui/app/pages/create-account/import-account/json.js b/ui/app/pages/create-account/import-account/json.js
index 46a14c1a95c7..a145fd1ddac9 100644
--- a/ui/app/pages/create-account/import-account/json.js
+++ b/ui/app/pages/create-account/import-account/json.js
@@ -14,10 +14,12 @@ const HELP_LINK = 'https://metamask.zendesk.com/hc/en-us/articles/360015489351-I
 class JsonImportSubview extends Component {
   state = {
     fileContents: '',
+    isEmpty: true,
   }
 
   render () {
     const { error } = this.props
+    const enabled = !this.state.isEmpty && this.state.fileContents !== ''
 
     return (
       <div className="new-account-import-form__json">
@@ -40,6 +42,7 @@ class JsonImportSubview extends Component {
           placeholder={this.context.t('enterPassword')}
           id="json-password-box"
           onKeyPress={this.createKeyringOnEnter.bind(this)}
+          onChange={() => this.checkInputEmpty()}
         />
         <div className="new-account-create-form__buttons">
           <Button
@@ -55,6 +58,7 @@ class JsonImportSubview extends Component {
             large
             className="new-account-create-form__button"
             onClick={() => this.createNewKeychain()}
+            disabled={!enabled}
           >
             {this.context.t('import')}
           </Button>
@@ -119,6 +123,16 @@ class JsonImportSubview extends Component {
       })
       .catch(err => err && displayWarning(err.message || err))
   }
+
+  checkInputEmpty () {
+    const input = document.getElementById('json-password-box')
+    const password = input.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..b6cc8bf24330 100644
--- a/ui/app/pages/create-account/import-account/private-key.js
+++ b/ui/app/pages/create-account/import-account/private-key.js
@@ -23,6 +23,7 @@ class PrivateKeyImportView extends Component {
     error: PropTypes.node,
   }
 
+  state = { isEmpty: true }
 
   createNewKeychain () {
     const input = document.getElementById('private-key-box')
@@ -63,6 +64,16 @@ class PrivateKeyImportView extends Component {
     }
   }
 
+  checkInputEmpty () {
+    const input = document.getElementById('private-key-box')
+    const privateKey = input.value
+    let isEmpty = true
+    if (privateKey !== '') {
+      isEmpty = false
+    }
+    this.setState({ isEmpty })
+  }
+
   render () {
     const { error, displayWarning } = this.props
 
@@ -77,6 +88,7 @@ class PrivateKeyImportView extends Component {
             type="password"
             id="private-key-box"
             onKeyPress={e => this.createKeyringOnEnter(e)}
+            onChange={() => this.checkInputEmpty()}
           />
         </div>
         <div className="new-account-import-form__buttons">
@@ -96,6 +108,7 @@ class PrivateKeyImportView extends Component {
             large
             className="new-account-create-form__button"
             onClick={() => this.createNewKeychain()}
+            disabled={this.state.isEmpty}
           >
             {this.context.t('import')}
           </Button>

From 308252eaa45cc2a806057ebf2540213eff967560 Mon Sep 17 00:00:00 2001
From: Brandon Lucas <38222767+thebrandonlucas@users.noreply.github.com>
Date: Sun, 26 Jan 2020 22:56:55 -0600
Subject: [PATCH 2/3] update changelog

---
 CHANGELOG.md | 1 +
 1 file changed, 1 insertion(+)

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

From d9ad97f13c7c08b506a1ec5e45e435cceba105f0 Mon Sep 17 00:00:00 2001
From: Brandon Lucas <thebrandonlucas@gmail.com>
Date: Mon, 27 Jan 2020 18:20:56 -0600
Subject: [PATCH 3/3] use refs to access DOM for import-account

---
 ui/app/pages/create-account/import-account/json.js       | 9 +++++----
 .../pages/create-account/import-account/private-key.js   | 9 +++++----
 2 files changed, 10 insertions(+), 8 deletions(-)

diff --git a/ui/app/pages/create-account/import-account/json.js b/ui/app/pages/create-account/import-account/json.js
index a145fd1ddac9..ffe895a72550 100644
--- a/ui/app/pages/create-account/import-account/json.js
+++ b/ui/app/pages/create-account/import-account/json.js
@@ -17,6 +17,8 @@ class JsonImportSubview extends Component {
     isEmpty: true,
   }
 
+  inputRef = React.createRef()
+
   render () {
     const { error } = this.props
     const enabled = !this.state.isEmpty && this.state.fileContents !== ''
@@ -43,6 +45,7 @@ class JsonImportSubview extends Component {
           id="json-password-box"
           onKeyPress={this.createKeyringOnEnter.bind(this)}
           onChange={() => this.checkInputEmpty()}
+          ref={this.inputRef}
         />
         <div className="new-account-create-form__buttons">
           <Button
@@ -94,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 }) => {
@@ -125,8 +127,7 @@ class JsonImportSubview extends Component {
   }
 
   checkInputEmpty () {
-    const input = document.getElementById('json-password-box')
-    const password = input.value
+    const password = this.inputRef.current.value
     let isEmpty = true
     if (password !== '') {
       isEmpty = false
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 b6cc8bf24330..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,11 +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 ])
@@ -65,8 +66,7 @@ class PrivateKeyImportView extends Component {
   }
 
   checkInputEmpty () {
-    const input = document.getElementById('private-key-box')
-    const privateKey = input.value
+    const privateKey = this.inputRef.current.value
     let isEmpty = true
     if (privateKey !== '') {
       isEmpty = false
@@ -89,6 +89,7 @@ class PrivateKeyImportView extends Component {
             id="private-key-box"
             onKeyPress={e => this.createKeyringOnEnter(e)}
             onChange={() => this.checkInputEmpty()}
+            ref={this.inputRef}
           />
         </div>
         <div className="new-account-import-form__buttons">