disable import button on Import Account screen for empty string/file (M…

…etaMask#7912) * disable import button on Import Account screen for empty string/file * use refs to access DOM for import-account
Conflux-Chain · Feb 10, 2020 · f8e310f · f8e310f
1 parent 5279a08
commit f8e310f
Show file tree

Hide file tree

Showing 3 changed files with 36 additions and 11 deletions.
diff --git 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
@@ -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 (
       <div className="new-account-import-form__json">
@@ -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}
         />
         <div className="new-account-create-form__buttons">
           <Button
@@ -58,6 +64,7 @@ class JsonImportSubview extends Component {
             large
             className="new-account-create-form__button"
             onClick={() => this.createNewKeychain()}
+            disabled={!enabled}
           >
             {this.context.t('import')}
           </Button>
@@ -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
@@ -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}
           />
         </div>
         <div className="new-account-import-form__buttons">
@@ -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')}
           </Button>