Added fingerprint functions to main file

frontend/src/components/FingerprintBlock.js

@@ -1,65 +1,32 @@
 /* eslint-disable no-unused-vars */
 import { useState, useEffect } from 'react';
-import axios from 'axios';
 import ScanBlock from './ScanBlock';
 import Table from './Table';
-import { getHash, getHardware, getWebGL, getBattery } from './main';
+import {
+  getHardware,
+  getWebGL,
+  getSoftware,
+  getFingerprint,
+  getHash,
+  getName,
+  handleSave,
+} from './main';
 
 const FingerprintBlock = () => {
-  const [data, setData] = useState([]);
   const [name, setName] = useState('');
   const [saved, setSaved] = useState('');
-  const [display, setDisplay] = useState('none');
-
-  useEffect(() => {
-    setData([...getHardware(), ...getWebGL()]);
-
-    axios
-      .get(`https://api.vytal.io/fingerprint/?hash=${hash}`)
-      .then((response) => {
-        if (response.data.length !== 0) {
-          setName(response.data[response.data.length - 1].name);
-        }
-        setDisplay('block');
-      });
-  }, []);
-
-  const handleSave = (e) => {
-    e.preventDefault();
-    axios.post('https://api.vytal.io/fingerprint/', {
-      name: e.target[0].value,
-      hash,
-    });
-    setSaved(true);
-  };
-
-  const hash = getHash(data);
-
-  const tableData = [
-    {
-      key: 'name',
-      title: 'Name',
-      value: name,
-    },
-    {
-      key: 'hash',
-      title: 'Hash',
-      value: hash,
-    },
-  ];
-
+  const hash = getHash([...getHardware(), ...getWebGL(), ...getSoftware()]);
+  getName(hash, setName);
   return (
     <ScanBlock>
       <h1>Fingerprint</h1>
-      <div style={{ display }}>
-        {name ? (
-          <Table data={tableData} />
-        ) : (
-          <div className="boxWrap">
-            <div className="hash">{hash}</div>
-          </div>
-        )}
-      </div>
+      {name ? (
+        <Table data={getFingerprint(name, hash)} />
+      ) : (
+        <div className="boxWrap">
+          <div className="hash">{hash}</div>
+        </div>
+      )}
       <p>
         <b>Explanation:</b> This is a unique identifier that can be used to
         follow you around the web. Even if you clear cookies, change your IP or
@@ -71,7 +38,7 @@ const FingerprintBlock = () => {
       ) : (
         <form
           onSubmit={(e) => {
-            handleSave(e);
+            handleSave(e, hash, setSaved);
           }}
         >
           <input type="text" id="name" name="name" placeholder="Enter name" />

frontend/src/components/SoftwareBlock.js

@@ -2,7 +2,7 @@ import ScanBlock from './ScanBlock';
 import Table from './Table';
 import { getSoftware } from './main';
 
-const HardwareBlock = () => (
+const SoftwareBlock = () => (
   <ScanBlock>
     <h1>Software</h1>
     <Table data={getSoftware()} />
@@ -13,4 +13,4 @@ const HardwareBlock = () => (
   </ScanBlock>
 );
 
-export default HardwareBlock;
+export default SoftwareBlock;

frontend/src/components/main.js

@@ -1,5 +1,6 @@
 import md5 from 'crypto-js/md5';
 import Bowser from 'bowser';
+import axios from 'axios';
 
 const getHardware = () => {
   const data = [
@@ -192,67 +193,50 @@ const sortPlugins = (data) => {
   return list;
 };
 
-// const getFingerprint = () => {
-//   const data = [
-//     {
-//       key: 'name',
-//       title: 'Name',
-//       value: name,
-//     },
-//     {
-//       key: 'hash',
-//       title: 'Hash',
-//       value: hash,
-//     },
-//   ];
-//   return data;
-
-// const data = [
-// {
-//   key: 'platform',
-//   value: navigator.platform,
-// },
-// {
-//   key: 'userAgent',
-//   value: navigator.userAgent,
-// },
-// {
-//   key: 'preferredLanguage',
-//   value: navigator.language,
-// },
-// {
-//   key: 'languages',
-//   title: 'Languages',
-//   value: navigator.languages,
-// },
-// {
-//   key: 'timezone',
-//   value: Intl.DateTimeFormat().resolvedOptions().timeZone || 'N/A',
-// },
-// {
-//   key: 'cookiesEnabled',
-//   value: navigator.cookieEnabled,
-// },
-// {
-//   key: 'javaEnabled',
-//   value: navigator.javaEnabled(),
-// },
-// {
-//   key: 'dntHeader',
-//   value: navigator.doNotTrack,
-// },
-// {
-//   key: 'automatedBrowser',
-//   value: navigator.webdriver,
-// },
-// {
-//   key: 'plugins',
-//   value: navigator.plugins,
-// },
-// ];
-//   return data;
-// };
+const getFingerprint = (name, hash) => {
+  const data = [
+    {
+      key: 'name',
+      title: 'Name',
+      value: name,
+    },
+    {
+      key: 'hash',
+      title: 'Hash',
+      value: hash,
+    },
+  ];
+  return data;
+};
 
 const getHash = (data) => md5(JSON.stringify(data)).toString();
 
-export { getHash, getSoftware, getHardware, getWebGL, getBattery };
+const getName = (hash, setName) => {
+  axios
+    .get(`https://api.vytal.io/fingerprint/?hash=${hash}`)
+    .then((response) => {
+      if (response.data.length !== 0) {
+        setName(response.data[response.data.length - 1].name);
+      }
+    });
+};
+
+const handleSave = (e, hash, setSaved) => {
+  e.preventDefault();
+  axios.post('https://api.vytal.io/fingerprint/', {
+    name: e.target[0].value,
+    hash,
+  });
+  setSaved(true);
+};
+
+export {
+  getSoftware,
+  getHardware,
+  getWebGL,
+  getBattery,
+  getFingerprint,
+  getHash,
+  getName,
+  handleSave,
+};