Fix click to copy for private key not working (#2360)

3 files changed, 11 insertions, 7 deletions

diff --git a/ui/app/components/modals/export-private-key-modal.js b/ui/app/components/modals/export-private-key-modal.js
index ddc7f1352..302596eda 100644
--- a/ui/app/components/modals/export-private-key-modal.js
+++ b/ui/app/components/modals/export-private-key-modal.js
@@ -7,6 +7,7 @@ const actions = require('../../actions')
 const AccountModalContainer = require('./account-modal-container')
 const { getSelectedIdentity } = require('../../selectors')
 const ReadOnlyInput = require('../readonly-input')
+const copyToClipboard = require('copy-to-clipboard')
 
 function mapStateToProps (state) {
   return {
@@ -61,11 +62,12 @@ ExportPrivateKeyModal.prototype.renderPasswordInput = function (privateKey) {
         inputClass: 'private-key-password-display-textarea',
         textarea: true,
         value: plainKey,
+        onClick: () => copyToClipboard(plainKey),
       })
     : h('input.private-key-password-input', {
       type: 'password',
       placeholder: 'Type password',
-      onChange: event => this.setState({ password: event.target.value })
+      onChange: event => this.setState({ password: event.target.value }),
     })
 }
 
@@ -115,7 +117,7 @@ ExportPrivateKeyModal.prototype.render = function () {
       }),
 
       h('div.account-modal-divider'),
-      
+
       h('span.modal-body-title', 'Download Private Keys'),
 
       h('div.private-key-password', {}, [
@@ -132,6 +134,6 @@ ExportPrivateKeyModal.prototype.render = function () {
       ),
 
       this.renderButtons(privateKey, this.state.password, address, hideModal),
-      
+
   ])
 }
diff --git a/ui/app/components/readonly-input.js b/ui/app/components/readonly-input.js
index 33b93b5a0..fcf05fb9e 100644
--- a/ui/app/components/readonly-input.js
+++ b/ui/app/components/readonly-input.js
@@ -15,6 +15,7 @@ ReadOnlyInput.prototype.render = function () {
     inputClass = '',
     value,
     textarea,
+    onClick,
   } = this.props
 
   const inputType = textarea ? 'textarea' : 'input'
@@ -25,6 +26,7 @@ ReadOnlyInput.prototype.render = function () {
       value,
       readOnly: true,
       onFocus: event => event.target.select(),
+      onClick,
     }),
   ])
 }
diff --git a/ui/app/css/itcss/components/modal.scss b/ui/app/css/itcss/components/modal.scss
index 556f14389..1ffea58a9 100644
--- a/ui/app/css/itcss/components/modal.scss
+++ b/ui/app/css/itcss/components/modal.scss
@@ -356,18 +356,18 @@
 .private-key-password-display-wrapper {
   height: 80px;
   width: 291px;
-  border: 1px solid $silver; 
+  border: 1px solid $silver;
   border-radius: 2px;
 }
 
 .private-key-password-display-textarea {
   color: $crimson;
-  font-family: Roboto; 
-  font-size: 16px; 
+  font-family: Roboto;
+  font-size: 16px;
   line-height: 21px;
   border: none;
   height: 75px;
-  width: 253px;
+  width: 100%;
   overflow: hidden;
   resize: none;
   padding: 9px 13px 8px;