Copy shares with Electron's Clipboard API

src/components/CopyButton.js

@@ -1,4 +1,5 @@
 import React, { Component } from 'react';
+const {clipboard} = require('electron');
 import PropTypes from 'prop-types';
 import Button from './Button';
 
@@ -16,23 +17,11 @@ export default class CopyButton extends Component {
   }
 
   handleClicked() {
-    let successful;
-    this.copyEl.select();
-    this.copyEl.setSelectionRange(0, this.copyEl.value.length);
+    clipboard.writeText(this.props.targetText);
 
-    try {
-      successful = document.execCommand('copy');
-    } catch (e) {
-      successful = false;
-    }
-
-    if (successful) {
-      this.setState({ copied: 'successful' });
-      if (this.props.onCopied) {
-        this.props.onCopied();
-      }
-    } else {
-      this.setState({ copied: 'error' });
+    this.setState({ copied: 'successful' });
+    if (this.props.onCopied) {
+      this.props.onCopied();
     }
 
     window.setTimeout(() => this.setState({ copied: null }), 5000);
@@ -45,26 +34,18 @@ export default class CopyButton extends Component {
 
     if (copied === 'successful') {
       copyText = 'Copied';
-    } else if (copied === 'error') {
-      copyText = 'Copy failed';
     } else {
       copyText = this.props.buttonText || 'Copy';
     }
 
     return (
       <Button type="default"
+        className="copy"
         icon="clipboard"
         onClick={this.handleClicked.bind(this)}
         {...this.props}>
         {copyText}
-        {/* hidden input for copy to clipboard functionality */}
-        <input type="text"
-          style={ { position: 'absolute', top: '-10000px', left: '-10000px' } }
-          readOnly
-          ref={(el) => (this.copyEl = el)}
-          value={this.props.targetText} />
       </Button>
-
     );
   }
 }

src/components/ShareRow.js

@@ -56,7 +56,7 @@ export default class ShareRow extends Component {
     }
 
     return (
-      <div className="share-row" key={share}>
+      <div className="share-row" key={share} id={`share-${index}`}>
         <div className="share-cell share-value">
           {`Share #${index}`}
           <span className="share-status">

test/e2e.js

@@ -7,7 +7,8 @@ const appPath = path.join(__dirname, '..');
 
 describe('main window', function spec() {
   this.timeout(5000);
-  let shares; // Store the generated shares for recovery
+
+  let shares = []; // Store the generated shares for recovery
   const quorum = 2;
   const numShares = 3;
   const secret = 'test secret';
@@ -49,9 +50,12 @@ describe('main window', function spec() {
     expect(shareEls.value).to.have.length(3);
   });
 
-  it('should find and store the share values', async () => {
-    // Depends on implementation of the copy button, less than ideal.
-    shares = await app.client.getAttribute('input[readonly]', 'value');
+  it('should copy the share values to the clipboard and store them', async () => {
+    for (let i = 0; i < quorum; i++) {
+      await app.client.element(`#share-${i+1} .copy`).click();
+      const share = await app.electron.clipboard.readText();
+      shares.push(share);
+    }
   });
 
   it('should go back to the home screen', async () => {
@@ -89,5 +93,14 @@ describe('main window', function spec() {
     await app.client.waitForVisible('.secret-view');
     const foundSecret = await app.client.getAttribute('.secret-view', 'value');
     expect(foundSecret).to.be.eql(secret);
+    await app.client.element('.btn*=Hide').click();
+  });
+
+  it('should be able to copy the recovered secret', async () => {
+    // Make sure the clipboard is clear before copying
+    await app.electron.clipboard.clear();
+    await app.client.element('.copy').click();
+    const copiedSecret = await app.electron.clipboard.readText();
+    expect(copiedSecret).to.be.eql(secret);
   });
 });