Added copy button

package-lock.json

@@ -3939,6 +3939,14 @@
       "resolved": "https://registry.npmjs.org/copy-descriptor/-/copy-descriptor-0.1.1.tgz",
       "integrity": "sha1-Z29us8OZl8LuGsOpJP1hJHSPV40="
     },
+    "copy-to-clipboard": {
+      "version": "3.3.1",
+      "resolved": "https://registry.npmjs.org/copy-to-clipboard/-/copy-to-clipboard-3.3.1.tgz",
+      "integrity": "sha512-i13qo6kIHTTpCm8/Wup+0b1mVWETvu2kIMzKoK8FpkLkFxlt0znUAHcMzox+T8sPlqtZXq3CulEjQHsYiGFJUw==",
+      "requires": {
+        "toggle-selection": "^1.0.6"
+      }
+    },
     "core-js": {
       "version": "3.6.5",
       "resolved": "https://registry.npmjs.org/core-js/-/core-js-3.6.5.tgz",
@@ -10779,6 +10787,15 @@
         "whatwg-fetch": "^3.0.0"
       }
     },
+    "react-copy-to-clipboard": {
+      "version": "5.0.2",
+      "resolved": "https://registry.npmjs.org/react-copy-to-clipboard/-/react-copy-to-clipboard-5.0.2.tgz",
+      "integrity": "sha512-/2t5mLMMPuN5GmdXo6TebFa8IoFxZ+KTDDqYhcDm0PhkgEzSxVvIX26G20s1EB02A4h2UZgwtfymZ3lGJm0OLg==",
+      "requires": {
+        "copy-to-clipboard": "^3",
+        "prop-types": "^15.5.8"
+      }
+    },
     "react-dev-utils": {
       "version": "10.2.1",
       "resolved": "https://registry.npmjs.org/react-dev-utils/-/react-dev-utils-10.2.1.tgz",
@@ -12889,6 +12906,11 @@
         "repeat-string": "^1.6.1"
       }
     },
+    "toggle-selection": {
+      "version": "1.0.6",
+      "resolved": "https://registry.npmjs.org/toggle-selection/-/toggle-selection-1.0.6.tgz",
+      "integrity": "sha1-bkWxJj8gF/oKzH2J14sVuL932jI="
+    },
     "toidentifier": {
       "version": "1.0.0",
       "resolved": "https://registry.npmjs.org/toidentifier/-/toidentifier-1.0.0.tgz",

package.json

@@ -10,6 +10,7 @@
     "@testing-library/react": "^9.5.0",
     "@testing-library/user-event": "^7.2.1",
     "react": "^16.13.1",
+    "react-copy-to-clipboard": "^5.0.2",
     "react-dom": "^16.13.1",
     "react-dropzone": "^11.0.2",
     "react-scripts": "3.4.1"

src/ChecksumResolver.js

@@ -12,6 +12,13 @@ import Typography from '@material-ui/core/Typography';
 import Container from '@material-ui/core/Container';
 
 import Dropzone from 'react-dropzone'
+import IconButton from '@material-ui/core/IconButton';
+import FileCopyOutlined from '@material-ui/icons/FileCopyOutlined';
+// import Visibility from '@material-ui/icons/Visibility';
+// import VisibilityOff from '@material-ui/icons/VisibilityOff';
+
+import { CopyToClipboard } from 'react-copy-to-clipboard';
+
 
 const useStyles = theme => ({
     paper: {
@@ -77,6 +84,14 @@ class ChecksumResolver extends React.Component {
         return testResults;
     }
 
+    isInputInvalid = ()=>{
+        const { checksum } = this.state;
+        if(!checksum || checksum === ''){
+            return false;
+        }
+        return !this.isChecksumValid();
+    };
+
     requestActivationBytes = () => {
         const { checksum } = this.state;
 
@@ -107,9 +122,9 @@ class ChecksumResolver extends React.Component {
         return Array.prototype.map.call(new Uint8Array(buffer), x => ('00' + x.toString(16)).slice(-2)).join('');
     }
 
-    acceptFile = async files =>{
+    acceptFile = async files => {
         const file = files[0];
-        if(!file.name.endsWith(".aax")){
+        if (!file.name.endsWith(".aax")) {
             alert('FileType not supported!');
             return;
         }
@@ -144,15 +159,15 @@ class ChecksumResolver extends React.Component {
                                 console.log(acceptedFiles);
                                 this.acceptFile(acceptedFiles);
                                 //const file = document.getElementById('fileInput').files[0];
-                                
-                               
+
+
                             }}>
                             {({ getRootProps, getInputProps }) => (
                                 <section>
                                     <div {...getRootProps()}>
                                         <input {...getInputProps()} />
                                         <TextField
-                                            error={!this.isChecksumValid()}
+                                            error={this.isInputInvalid()}
                                             variant="outlined"
                                             margin="normal"
                                             required
@@ -195,7 +210,14 @@ class ChecksumResolver extends React.Component {
                             aria-readonly
 
                             InputProps={{
-                                readOnly: true
+                                readOnly: true,
+                                endAdornment: (
+                                    <CopyToClipboard text={activationBytes}>
+                                        <IconButton >
+                                            <FileCopyOutlined />
+                                        </IconButton>
+                                    </CopyToClipboard>
+                                )
                             }}
 
                         />
@@ -210,4 +232,6 @@ class ChecksumResolver extends React.Component {
     }
 }
 
-export default withStyles(useStyles)(ChecksumResolver);
+export default withStyles(useStyles)(ChecksumResolver);
+
+/*<YOUR_COPY_ICON_BUTTON /> */