From 539261dd8ffa4220a4c13fc08130e7878ca8a149 Mon Sep 17 00:00:00 2001
From: z0ccc <z0cccccccc@gmail.com>
Date: Wed, 1 Sep 2021 11:45:39 -0400
Subject: [PATCH 01/54] Added navigator file

---
 frontend/src/components/NavigatorBlock.js | 30 +++++++++++++++++++++++
 frontend/src/components/NewTable.js       | 17 +++++++++++++
 frontend/src/components/ScanBlocks.js     |  2 ++
 frontend/src/components/navigator.js      | 23 +++++++++++++++++
 4 files changed, 72 insertions(+)
 create mode 100644 frontend/src/components/NavigatorBlock.js
 create mode 100644 frontend/src/components/NewTable.js
 create mode 100644 frontend/src/components/navigator.js

diff --git a/frontend/src/components/NavigatorBlock.js b/frontend/src/components/NavigatorBlock.js
new file mode 100644
index 0000000..f4e3851
--- /dev/null
+++ b/frontend/src/components/NavigatorBlock.js
@@ -0,0 +1,30 @@
+/* eslint-disable no-unused-vars */
+/* eslint-disable arrow-body-style */
+import { useState, useEffect } from 'react';
+import ScanBlock from './ScanBlock';
+import NewTable from './NewTable';
+import { getHardware, getWebGL, getBattery } from './main';
+import { getNavigator } from './navigator';
+
+const NavigatorBlock = () => {
+  // const [data, setData] = useState([]);
+
+  // useEffect(() => {
+  //   getBattery().then((batteryInfo) => {
+  //     setData([...getHardware(), ...getWebGL(), ...batteryInfo]);
+  //   });
+  // }, []);
+
+  return (
+    <ScanBlock>
+      <h1>Hardware</h1>
+      <NewTable data={getNavigator()} />
+      <p>
+        <b>Explanation:</b> JavaScript can be used to find information about
+        your hardware. This information can be used to create a fingerprint.
+      </p>
+    </ScanBlock>
+  );
+};
+
+export default NavigatorBlock;
diff --git a/frontend/src/components/NewTable.js b/frontend/src/components/NewTable.js
new file mode 100644
index 0000000..b98fe4e
--- /dev/null
+++ b/frontend/src/components/NewTable.js
@@ -0,0 +1,17 @@
+const Table = ({ data }) => (
+  <div className="tableWrap">
+    <table>
+      {data.map((item) => (
+        <tbody key={item.title}>
+          <tr>
+            <td>{item.title}</td>
+            <td>{item.value}</td>
+            <td>{item.test}</td>
+          </tr>
+        </tbody>
+      ))}
+    </table>
+  </div>
+);
+
+export default Table;
diff --git a/frontend/src/components/ScanBlocks.js b/frontend/src/components/ScanBlocks.js
index b9ae1e3..3fc17e2 100644
--- a/frontend/src/components/ScanBlocks.js
+++ b/frontend/src/components/ScanBlocks.js
@@ -1,3 +1,4 @@
+import NavigatorBlock from './NavigatorBlock';
 import FingerprintBlock from './FingerprintBlock';
 import LocationBlock from './LocationBlock';
 import HardwareBlock from './HardwareBlock';
@@ -8,6 +9,7 @@ import FiltersBlock from './FiltersBlock';
 
 const ScanBlocks = () => (
   <>
+    <NavigatorBlock />
     <FingerprintBlock />
     <LocationBlock />
     <ConnectionBlock />
diff --git a/frontend/src/components/navigator.js b/frontend/src/components/navigator.js
new file mode 100644
index 0000000..590fe5b
--- /dev/null
+++ b/frontend/src/components/navigator.js
@@ -0,0 +1,23 @@
+/* eslint-disable import/prefer-default-export */
+export { getNavigator };
+
+const getNavigator = () => {
+  const data = [
+    {
+      key: 'deviceMemory',
+      title: 'Device memory',
+      value: navigator.deviceMemory ? `${navigator.deviceMemory}GB` : 'N/A',
+      test:
+        checkUndefinedProperties('deviceMemory') &&
+        'failed undefined properties',
+    },
+  ];
+  return data;
+};
+
+const checkUndefinedProperties = (property) => {
+  if (Object.getOwnPropertyDescriptor(navigator, property) !== undefined) {
+    return true;
+  }
+  return false;
+};

From 990a94bced5026c7ff921be1b207a7cae51d1b01 Mon Sep 17 00:00:00 2001
From: z0ccc <z0cccccccc@gmail.com>
Date: Wed, 1 Sep 2021 15:49:55 -0400
Subject: [PATCH 02/54] Catching basic object tampering

---
 frontend/src/components/NavigatorBlock.js |   2 +-
 frontend/src/components/NewTable.js       |   6 +-
 frontend/src/components/ScanBlocks.js     |   5 +-
 frontend/src/components/navigator.js      | 136 ++++++++++++++++++++--
 frontend/src/styles/App.css               |   2 +-
 5 files changed, 136 insertions(+), 15 deletions(-)

diff --git a/frontend/src/components/NavigatorBlock.js b/frontend/src/components/NavigatorBlock.js
index f4e3851..d66d35a 100644
--- a/frontend/src/components/NavigatorBlock.js
+++ b/frontend/src/components/NavigatorBlock.js
@@ -17,7 +17,7 @@ const NavigatorBlock = () => {
 
   return (
     <ScanBlock>
-      <h1>Hardware</h1>
+      <h1>Navigator</h1>
       <NewTable data={getNavigator()} />
       <p>
         <b>Explanation:</b> JavaScript can be used to find information about
diff --git a/frontend/src/components/NewTable.js b/frontend/src/components/NewTable.js
index b98fe4e..b7ee48e 100644
--- a/frontend/src/components/NewTable.js
+++ b/frontend/src/components/NewTable.js
@@ -1,12 +1,14 @@
+import { checkUndefinedProperties } from './navigator';
+
 const Table = ({ data }) => (
   <div className="tableWrap">
     <table>
       {data.map((item) => (
-        <tbody key={item.title}>
+        <tbody key={item.key}>
           <tr>
             <td>{item.title}</td>
             <td>{item.value}</td>
-            <td>{item.test}</td>
+            <td>{checkUndefinedProperties(item)}</td>
           </tr>
         </tbody>
       ))}
diff --git a/frontend/src/components/ScanBlocks.js b/frontend/src/components/ScanBlocks.js
index 3fc17e2..9a92af2 100644
--- a/frontend/src/components/ScanBlocks.js
+++ b/frontend/src/components/ScanBlocks.js
@@ -1,3 +1,4 @@
+/* eslint-disable no-unused-vars */
 import NavigatorBlock from './NavigatorBlock';
 import FingerprintBlock from './FingerprintBlock';
 import LocationBlock from './LocationBlock';
@@ -10,12 +11,12 @@ import FiltersBlock from './FiltersBlock';
 const ScanBlocks = () => (
   <>
     <NavigatorBlock />
-    <FingerprintBlock />
+    {/* <FingerprintBlock />
     <LocationBlock />
     <ConnectionBlock />
     <FiltersBlock />
     <SoftwareBlock />
-    <HardwareBlock />
+    <HardwareBlock /> */}
     {/* <FontsBlock /> */}
   </>
 );
diff --git a/frontend/src/components/navigator.js b/frontend/src/components/navigator.js
index 590fe5b..c74557c 100644
--- a/frontend/src/components/navigator.js
+++ b/frontend/src/components/navigator.js
@@ -1,5 +1,4 @@
-/* eslint-disable import/prefer-default-export */
-export { getNavigator };
+export { getNavigator, checkUndefinedProperties };
 
 const getNavigator = () => {
   const data = [
@@ -7,17 +6,136 @@ const getNavigator = () => {
       key: 'deviceMemory',
       title: 'Device memory',
       value: navigator.deviceMemory ? `${navigator.deviceMemory}GB` : 'N/A',
-      test:
-        checkUndefinedProperties('deviceMemory') &&
-        'failed undefined properties',
+    },
+    {
+      key: 'hardwareConcurrency',
+      title: 'Hardware Concurrency',
+      value: navigator.hardwareConcurrency || 'N/A',
+    },
+    {
+      key: 'maxTouchPoints',
+      title: 'Max touchpoints',
+      value: navigator.maxTouchPoints || 'N/A',
+    },
+    {
+      key: 'platform',
+      title: 'Platform',
+      value: navigator.platform || 'N/A',
+    },
+    {
+      key: 'userAgent',
+      title: 'User agent',
+      value: navigator.userAgent || 'N/A',
+    },
+    {
+      key: 'language',
+      title: 'Language',
+      value: navigator.language || 'N/A',
+    },
+    {
+      key: 'languages',
+      title: 'Languages',
+      value: navigator.languages || 'N/A',
+    },
+    {
+      key: 'cookieEnabled',
+      title: 'Cookies enabled',
+      value: navigator.cookieEnabled ? 'True' : 'False',
+    },
+    {
+      key: 'doNotTrack',
+      title: 'Do not track header',
+      value: navigator.doNotTrack ? 'True' : 'False',
+    },
+    {
+      key: 'webdriver',
+      title: 'Webdriver',
+      value: navigator.webdriver ? 'True' : 'False',
+    },
+    {
+      key: 'plugins',
+      title: 'Plugins',
+      value: sortPlugins(navigator.plugins) || 'N/A',
+    },
+    // {
+    //   key: 'connection',
+    //   title: 'Connection',
+    //   value: JSON.stringify(navigator.connection) || 'N/A',
+    //       prototype: Navigator.prototype.hardwareConcurrency,
+    // },
+    // {
+    //   key: 'geolocation',
+    //   title: 'Geolocation',
+    //   value: navigator.geolocation || 'N/A',
+    //       prototype: Navigator.prototype.hardwareConcurrency,
+    // },
+    // {
+    //   key: 'hid',
+    //   title: 'Hid',
+    //   value: navigator.hid || 'N/A',
+    //       prototype: Navigator.prototype.hardwareConcurrency,
+    // },
+    // {
+    //   key: 'keyboard',
+    //   title: 'Keyboard',
+    //   value: navigator.keyboard || 'N/A',
+    //       prototype: Navigator.prototype.hardwareConcurrency,
+    // },
+    {
+      key: 'onLine',
+      title: 'Online',
+      value: navigator.onLine ? 'True' : 'False',
+    },
+    {
+      key: 'vendor',
+      title: 'Vendor',
+      value: navigator.vendor || 'N/A',
+    },
+    {
+      key: 'appVersion',
+      title: 'App version',
+      value: navigator.appVersion || 'N/A',
+    },
+    {
+      key: 'productSub',
+      title: 'Product sub',
+      value: navigator.productSub || 'N/A',
+    },
+    {
+      key: 'vendorSub',
+      title: 'Vendor sub',
+      value: navigator.vendorSub || 'N/A',
     },
   ];
   return data;
 };
 
-const checkUndefinedProperties = (property) => {
-  if (Object.getOwnPropertyDescriptor(navigator, property) !== undefined) {
-    return true;
+// sorts plugins object into comma separated list
+const sortPlugins = (data) => {
+  const { length } = data;
+
+  let list = '';
+  for (let i = 0; i < length; i++) {
+    if (i !== 0) list += ', ';
+    list += data[i].name;
   }
-  return false;
+  return list;
+};
+
+const checkUndefinedProperties = (obj) => {
+  const list = [];
+  if (Object.getOwnPropertyDescriptor(navigator, obj.key) !== undefined) {
+    list.push('Failed undefined properties');
+  }
+  if (
+    Object.getOwnPropertyDescriptor(Navigator.prototype, obj.key).value !==
+    undefined
+  ) {
+    list.push('Failed descriptor.value undefined');
+  }
+  // console.log(obj.prototype.constructor.name);
+  // if (obj.prototype.constructor.name === 'Number') {
+  //   list.push('Failed constructor name');
+  // }
+  return list;
 };
diff --git a/frontend/src/styles/App.css b/frontend/src/styles/App.css
index d194a2c..2f7b94c 100644
--- a/frontend/src/styles/App.css
+++ b/frontend/src/styles/App.css
@@ -41,7 +41,7 @@
 }
 
 .centerBlockInner {
-  width: 650px;
+  width: 800px;
   margin: 24px 0 0 0;
 }
 

From c150fa384f5a75c08ce8d313f3273f51a28cce36 Mon Sep 17 00:00:00 2001
From: z0ccc <z0cccccccc@gmail.com>
Date: Wed, 1 Sep 2021 20:42:31 -0400
Subject: [PATCH 03/54] Added webworker

---
 frontend/package.json                |  1 +
 frontend/public/worker.js            |  1 +
 frontend/src/components/NewTable.js  |  3 +-
 frontend/src/components/navigator.js | 35 +++++++++--
 frontend/yarn.lock                   | 89 ++++++++++++++++++++++++++++
 5 files changed, 123 insertions(+), 6 deletions(-)
 create mode 100644 frontend/public/worker.js

diff --git a/frontend/package.json b/frontend/package.json
index b528610..596bfcf 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -12,6 +12,7 @@
     "bowser": "^2.11.0",
     "crypto-js": "^4.0.0",
     "emailjs-com": "^3.1.0",
+    "html-react-parser": "^1.2.8",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
     "react-scripts": "4.0.3",
diff --git a/frontend/public/worker.js b/frontend/public/worker.js
new file mode 100644
index 0000000..ffd23fa
--- /dev/null
+++ b/frontend/public/worker.js
@@ -0,0 +1 @@
+postMessage('hello');
diff --git a/frontend/src/components/NewTable.js b/frontend/src/components/NewTable.js
index b7ee48e..40644e1 100644
--- a/frontend/src/components/NewTable.js
+++ b/frontend/src/components/NewTable.js
@@ -1,3 +1,4 @@
+import parse from 'html-react-parser';
 import { checkUndefinedProperties } from './navigator';
 
 const Table = ({ data }) => (
@@ -8,7 +9,7 @@ const Table = ({ data }) => (
           <tr>
             <td>{item.title}</td>
             <td>{item.value}</td>
-            <td>{checkUndefinedProperties(item)}</td>
+            <td>{parse(checkUndefinedProperties(item))}</td>
           </tr>
         </tbody>
       ))}
diff --git a/frontend/src/components/navigator.js b/frontend/src/components/navigator.js
index c74557c..1642798 100644
--- a/frontend/src/components/navigator.js
+++ b/frontend/src/components/navigator.js
@@ -1,3 +1,4 @@
+/* eslint-disable dot-notation */
 export { getNavigator, checkUndefinedProperties };
 
 const getNavigator = () => {
@@ -5,7 +6,7 @@ const getNavigator = () => {
     {
       key: 'deviceMemory',
       title: 'Device memory',
-      value: navigator.deviceMemory ? `${navigator.deviceMemory}GB` : 'N/A',
+      value: navigator.deviceMemory || 'N/A',
     },
     {
       key: 'hardwareConcurrency',
@@ -133,9 +134,33 @@ const checkUndefinedProperties = (obj) => {
   ) {
     list.push('Failed descriptor.value undefined');
   }
-  // console.log(obj.prototype.constructor.name);
-  // if (obj.prototype.constructor.name === 'Number') {
-  //   list.push('Failed constructor name');
+  try {
+    // eslint-disable-next-line no-unused-vars
+    const check = Navigator.prototype[obj.key];
+    list.push('Failed Navigator.prototype');
+  } catch (err) {
+    // eslint-disable-next-line no-unused-vars
+    const check = '';
+  }
+  // let frame = document.getElementById('testFrame');
+  // if (!frame) {
+  //   frame = document.createElement('iframe');
+  //   frame.setAttribute('id', 'testFrame');
+  //   document.body.appendChild(frame);
   // }
-  return list;
+  // console.log(navigator.hardwareConcurrency);
+  let w;
+  if (typeof Worker !== 'undefined') {
+    if (typeof w === 'undefined') {
+      w = new Worker('/worker.js');
+    }
+    w.onmessage = (event) => {
+      console.log(event);
+    };
+  } else {
+    document.getElementById('result').innerHTML =
+      'Sorry! No Web Worker support.';
+  }
+
+  return list.toString().split(',').join('<br />');
 };
diff --git a/frontend/yarn.lock b/frontend/yarn.lock
index 015e27a..12c79a4 100644
--- a/frontend/yarn.lock
+++ b/frontend/yarn.lock
@@ -4046,6 +4046,15 @@ dom-serializer@0:
     domelementtype "^2.0.1"
     entities "^2.0.0"
 
+dom-serializer@^1.0.1:
+  version "1.3.2"
+  resolved "https://registry.yarnpkg.com/dom-serializer/-/dom-serializer-1.3.2.tgz#6206437d32ceefaec7161803230c7a20bc1b4d91"
+  integrity sha512-5c54Bk5Dw4qAxNOI1pFEizPSjVsx5+bpJKmL2kPn8JhBUq2q09tTCa3mjijun2NfK78NMouDYNMBkOrPZiS+ig==
+  dependencies:
+    domelementtype "^2.0.1"
+    domhandler "^4.2.0"
+    entities "^2.0.0"
+
 domain-browser@^1.1.1:
   version "1.2.0"
   resolved "https://registry.yarnpkg.com/domain-browser/-/domain-browser-1.2.0.tgz#3d31f50191a6749dd1375a7f522e823d42e54eda"
@@ -4061,6 +4070,11 @@ domelementtype@^2.0.1:
   resolved "https://registry.npmjs.org/domelementtype/-/domelementtype-2.1.0.tgz"
   integrity sha512-LsTgx/L5VpD+Q8lmsXSHW2WpA+eBlZ9HPf3erD1IoPF00/3JKHZ3BknUVA2QGDNu69ZNmyFmCWBSO45XjYKC5w==
 
+domelementtype@^2.2.0:
+  version "2.2.0"
+  resolved "https://registry.yarnpkg.com/domelementtype/-/domelementtype-2.2.0.tgz#9a0b6c2782ed6a1c7323d42267183df9bd8b1d57"
+  integrity sha512-DtBMo82pv1dFtUmHyr48beiuq792Sxohr+8Hm9zoxklYPfa6n0Z3Byjj2IV7bmr2IyqClnqEQhfgHJJ5QF0R5A==
+
 domexception@^2.0.1:
   version "2.0.1"
   resolved "https://registry.npmjs.org/domexception/-/domexception-2.0.1.tgz"
@@ -4068,6 +4082,13 @@ domexception@^2.0.1:
   dependencies:
     webidl-conversions "^5.0.0"
 
+domhandler@4.2.0:
+  version "4.2.0"
+  resolved "https://registry.yarnpkg.com/domhandler/-/domhandler-4.2.0.tgz#f9768a5f034be60a89a27c2e4d0f74eba0d8b059"
+  integrity sha512-zk7sgt970kzPks2Bf+dwT/PLzghLnsivb9CcxkvR8Mzr66Olr0Ofd8neSbglHJHaHa2MadfoSdNlKYAaafmWfA==
+  dependencies:
+    domelementtype "^2.2.0"
+
 domhandler@^2.3.0:
   version "2.4.2"
   resolved "https://registry.npmjs.org/domhandler/-/domhandler-2.4.2.tgz"
@@ -4075,6 +4096,13 @@ domhandler@^2.3.0:
   dependencies:
     domelementtype "1"
 
+domhandler@^4.0.0, domhandler@^4.2.0:
+  version "4.2.2"
+  resolved "https://registry.yarnpkg.com/domhandler/-/domhandler-4.2.2.tgz#e825d721d19a86b8c201a35264e226c678ee755f"
+  integrity sha512-PzE9aBMsdZO8TK4BnuJwH0QT41wgMbRzuZrHUcpYncEjmQazq8QEaBWgLG7ZyC/DAZKEgglpIA6j4Qn/HmxS3w==
+  dependencies:
+    domelementtype "^2.2.0"
+
 domutils@^1.5.1, domutils@^1.7.0:
   version "1.7.0"
   resolved "https://registry.npmjs.org/domutils/-/domutils-1.7.0.tgz"
@@ -4083,6 +4111,15 @@ domutils@^1.5.1, domutils@^1.7.0:
     dom-serializer "0"
     domelementtype "1"
 
+domutils@^2.5.2:
+  version "2.8.0"
+  resolved "https://registry.yarnpkg.com/domutils/-/domutils-2.8.0.tgz#4437def5db6e2d1f5d6ee859bd95ca7d02048135"
+  integrity sha512-w96Cjofp72M5IIhpjgobBimYEfoPjx1Vx0BSX9P30WBdZW2WIKU0T1Bd0kz2eNZ9ikjKgHbEyKx8BB6H1L3h3A==
+  dependencies:
+    dom-serializer "^1.0.1"
+    domelementtype "^2.2.0"
+    domhandler "^4.2.0"
+
 dot-case@^3.0.4:
   version "3.0.4"
   resolved "https://registry.npmjs.org/dot-case/-/dot-case-3.0.4.tgz"
@@ -5423,6 +5460,14 @@ html-comment-regex@^1.1.0:
   resolved "https://registry.npmjs.org/html-comment-regex/-/html-comment-regex-1.1.2.tgz"
   integrity sha512-P+M65QY2JQ5Y0G9KKdlDpo0zK+/OHptU5AaBwUfAIDJZk1MYf32Frm84EcOytfJE0t5JvkAnKlmjsXDnWzCJmQ==
 
+html-dom-parser@1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/html-dom-parser/-/html-dom-parser-1.0.1.tgz#5d147fed6656c12918edbcea4a423eefe8d0e715"
+  integrity sha512-uKXISKlHzB/l9A08jrs2wseQJ9b864ZfEdmIZskj10cuP6HxCOMHSK0RdluV8NVQaWs0PwefN7d8wqG3jR0IbQ==
+  dependencies:
+    domhandler "4.2.0"
+    htmlparser2 "6.1.0"
+
 html-encoding-sniffer@^2.0.1:
   version "2.0.1"
   resolved "https://registry.npmjs.org/html-encoding-sniffer/-/html-encoding-sniffer-2.0.1.tgz"
@@ -5453,6 +5498,16 @@ html-minifier-terser@^5.0.1:
     relateurl "^0.2.7"
     terser "^4.6.3"
 
+html-react-parser@^1.2.8:
+  version "1.2.8"
+  resolved "https://registry.yarnpkg.com/html-react-parser/-/html-react-parser-1.2.8.tgz#6806984a5056417de38fc4b52145bd56b1b32d73"
+  integrity sha512-fPPbnMNbVuceyJARZTCu2/Ai7XbVsfncwVUl3IFpgV8BG7lv6hm+Z8NWXRgc2r1DXTf1wRnLaPDL4unbln/r+g==
+  dependencies:
+    domhandler "4.2.0"
+    html-dom-parser "1.0.1"
+    react-property "1.0.1"
+    style-to-js "1.1.0"
+
 html-webpack-plugin@4.5.0:
   version "4.5.0"
   resolved "https://registry.npmjs.org/html-webpack-plugin/-/html-webpack-plugin-4.5.0.tgz"
@@ -5468,6 +5523,16 @@ html-webpack-plugin@4.5.0:
     tapable "^1.1.3"
     util.promisify "1.0.0"
 
+htmlparser2@6.1.0:
+  version "6.1.0"
+  resolved "https://registry.yarnpkg.com/htmlparser2/-/htmlparser2-6.1.0.tgz#c4d762b6c3371a05dbe65e94ae43a9f845fb8fb7"
+  integrity sha512-gyyPk6rgonLFEDGoeRgQNaEUvdJ4ktTmmUh/h2t7s+M8oPpIPxgNACWa+6ESR57kXstwqPiCut0V8NRpcwgU7A==
+  dependencies:
+    domelementtype "^2.0.1"
+    domhandler "^4.0.0"
+    domutils "^2.5.2"
+    entities "^2.0.0"
+
 htmlparser2@^3.10.1:
   version "3.10.1"
   resolved "https://registry.npmjs.org/htmlparser2/-/htmlparser2-3.10.1.tgz"
@@ -5700,6 +5765,11 @@ ini@^1.3.5:
   resolved "https://registry.npmjs.org/ini/-/ini-1.3.8.tgz"
   integrity sha512-JV/yugV2uzW5iMRSiZAyDtQd+nxtUnjeLt0acNdw98kKLrvuRVyB80tsREOE7yvGVgalhZ6RNXCmEHkUKBKxew==
 
+inline-style-parser@0.1.1:
+  version "0.1.1"
+  resolved "https://registry.yarnpkg.com/inline-style-parser/-/inline-style-parser-0.1.1.tgz#ec8a3b429274e9c0a1f1c4ffa9453a7fef72cea1"
+  integrity sha512-7NXolsK4CAS5+xvdj5OMMbI962hU/wvwoxk+LWR9Ek9bVtyuuYScDN6eS0rUm6TxApFpw7CX1o4uJzcd4AyD3Q==
+
 internal-ip@^4.3.0:
   version "4.3.0"
   resolved "https://registry.npmjs.org/internal-ip/-/internal-ip-4.3.0.tgz"
@@ -8979,6 +9049,11 @@ react-is@^17.0.1:
   resolved "https://registry.npmjs.org/react-is/-/react-is-17.0.1.tgz"
   integrity sha512-NAnt2iGDXohE5LI7uBnLnqvLQMtzhkiAOLXTmv+qnF9Ky7xAPcX8Up/xWIhxvLVGJvuLiNc4xQLtuqDRzb4fSA==
 
+react-property@1.0.1:
+  version "1.0.1"
+  resolved "https://registry.yarnpkg.com/react-property/-/react-property-1.0.1.tgz#4ae4211557d0a0ae050a71aa8ad288c074bea4e6"
+  integrity sha512-1tKOwxFn3dXVomH6pM9IkLkq2Y8oh+fh/lYW3MJ/B03URswUTqttgckOlbxY2XHF3vPG6uanSc4dVsLW/wk3wQ==
+
 react-refresh@^0.8.3:
   version "0.8.3"
   resolved "https://registry.npmjs.org/react-refresh/-/react-refresh-0.8.3.tgz"
@@ -10237,6 +10312,20 @@ style-loader@1.3.0:
     loader-utils "^2.0.0"
     schema-utils "^2.7.0"
 
+style-to-js@1.1.0:
+  version "1.1.0"
+  resolved "https://registry.yarnpkg.com/style-to-js/-/style-to-js-1.1.0.tgz#631cbb20fce204019b3aa1fcb5b69d951ceac4ac"
+  integrity sha512-1OqefPDxGrlMwcbfpsTVRyzwdhr4W0uxYQzeA2F1CBc8WG04udg2+ybRnvh3XYL4TdHQrCahLtax2jc8xaE6rA==
+  dependencies:
+    style-to-object "0.3.0"
+
+style-to-object@0.3.0:
+  version "0.3.0"
+  resolved "https://registry.yarnpkg.com/style-to-object/-/style-to-object-0.3.0.tgz#b1b790d205991cc783801967214979ee19a76e46"
+  integrity sha512-CzFnRRXhzWIdItT3OmF8SQfWyahHhjq3HwcMNCNLn+N7klOOqPjMeG/4JSu77D7ypZdGvSzvkrbyeTMizz2VrA==
+  dependencies:
+    inline-style-parser "0.1.1"
+
 stylehacks@^4.0.0:
   version "4.0.3"
   resolved "https://registry.npmjs.org/stylehacks/-/stylehacks-4.0.3.tgz"

From 5b7a28fd6170179ef0c7a2d30ad3ae9a83c41b56 Mon Sep 17 00:00:00 2001
From: z0ccc <z0cccccccc@gmail.com>
Date: Thu, 2 Sep 2021 16:02:02 -0400
Subject: [PATCH 04/54] Fixed web worker

---
 frontend/package.json                |  1 +
 frontend/public/worker.js            |  6 ++-
 frontend/src/components/Issues.js    | 23 ++++++++++
 frontend/src/components/NewTable.js  | 37 +++++++++-------
 frontend/src/components/navigator.js | 66 ++++++++++++++--------------
 frontend/yarn.lock                   |  5 +++
 6 files changed, 89 insertions(+), 49 deletions(-)
 create mode 100644 frontend/src/components/Issues.js

diff --git a/frontend/package.json b/frontend/package.json
index 596bfcf..b36d4b4 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -17,6 +17,7 @@
     "react-dom": "^17.0.2",
     "react-scripts": "4.0.3",
     "react-tsparticles": "^1.28.0",
+    "react-webworker": "^2.1.0",
     "tslib": "^2.2.0"
   },
   "scripts": {
diff --git a/frontend/public/worker.js b/frontend/public/worker.js
index ffd23fa..617e62f 100644
--- a/frontend/public/worker.js
+++ b/frontend/public/worker.js
@@ -1 +1,5 @@
-postMessage('hello');
+/* eslint-disable import/prefer-default-export */
+onmessage = (e) => {
+  console.log(e.data, navigator[e.data]);
+  postMessage(navigator[e.data]);
+};
diff --git a/frontend/src/components/Issues.js b/frontend/src/components/Issues.js
new file mode 100644
index 0000000..746f786
--- /dev/null
+++ b/frontend/src/components/Issues.js
@@ -0,0 +1,23 @@
+/* eslint-disable no-unused-vars */
+import parse from 'html-react-parser';
+import { useState, useEffect } from 'react';
+import { checkUndefinedProperties, checkWebWorker } from './navigator';
+
+const Issues = ({ item }) => {
+  const [workerData, setWorkerData] = useState();
+  useEffect(() => {
+    checkWebWorker(item, setWorkerData);
+  }, []);
+
+  return (
+    <td>
+      {parse(checkUndefinedProperties(item))}
+      <br />
+      <>{workerData}</>
+    </td>
+  );
+
+  // return <td>{parse(checkUndefinedProperties(item), workerData)}</td>;
+};
+
+export default Issues;
diff --git a/frontend/src/components/NewTable.js b/frontend/src/components/NewTable.js
index 40644e1..cdb0608 100644
--- a/frontend/src/components/NewTable.js
+++ b/frontend/src/components/NewTable.js
@@ -1,20 +1,27 @@
+/* eslint-disable no-unused-vars */
 import parse from 'html-react-parser';
+import { useState, useEffect } from 'react';
 import { checkUndefinedProperties } from './navigator';
+import Issues from './Issues';
 
-const Table = ({ data }) => (
-  <div className="tableWrap">
-    <table>
-      {data.map((item) => (
-        <tbody key={item.key}>
-          <tr>
-            <td>{item.title}</td>
-            <td>{item.value}</td>
-            <td>{parse(checkUndefinedProperties(item))}</td>
-          </tr>
-        </tbody>
-      ))}
-    </table>
-  </div>
-);
+const Table = ({ data }) => {
+  const [workerData, setWorkerData] = useState();
+
+  return (
+    <div className="tableWrap">
+      <table>
+        {data.map((item) => (
+          <tbody key={item.key}>
+            <tr>
+              <td>{item.title}</td>
+              <td>{item.value}</td>
+              <Issues item={item} />
+            </tr>
+          </tbody>
+        ))}
+      </table>
+    </div>
+  );
+};
 
 export default Table;
diff --git a/frontend/src/components/navigator.js b/frontend/src/components/navigator.js
index 1642798..19bb444 100644
--- a/frontend/src/components/navigator.js
+++ b/frontend/src/components/navigator.js
@@ -1,42 +1,42 @@
 /* eslint-disable dot-notation */
-export { getNavigator, checkUndefinedProperties };
+export { getNavigator, checkUndefinedProperties, checkWebWorker };
 
 const getNavigator = () => {
   const data = [
     {
       key: 'deviceMemory',
       title: 'Device memory',
-      value: navigator.deviceMemory || 'N/A',
+      value: navigator.deviceMemory,
     },
     {
       key: 'hardwareConcurrency',
       title: 'Hardware Concurrency',
-      value: navigator.hardwareConcurrency || 'N/A',
+      value: navigator.hardwareConcurrency,
     },
     {
       key: 'maxTouchPoints',
       title: 'Max touchpoints',
-      value: navigator.maxTouchPoints || 'N/A',
+      value: navigator.maxTouchPoints,
     },
     {
       key: 'platform',
       title: 'Platform',
-      value: navigator.platform || 'N/A',
+      value: navigator.platform,
     },
     {
       key: 'userAgent',
       title: 'User agent',
-      value: navigator.userAgent || 'N/A',
+      value: navigator.userAgent,
     },
     {
       key: 'language',
       title: 'Language',
-      value: navigator.language || 'N/A',
+      value: navigator.language,
     },
     {
       key: 'languages',
       title: 'Languages',
-      value: navigator.languages || 'N/A',
+      value: navigator.languages,
     },
     {
       key: 'cookieEnabled',
@@ -56,30 +56,30 @@ const getNavigator = () => {
     {
       key: 'plugins',
       title: 'Plugins',
-      value: sortPlugins(navigator.plugins) || 'N/A',
+      value: sortPlugins(navigator.plugins),
     },
     // {
     //   key: 'connection',
     //   title: 'Connection',
-    //   value: JSON.stringify(navigator.connection) || 'N/A',
+    //   value: JSON.stringify(navigator.connection),
     //       prototype: Navigator.prototype.hardwareConcurrency,
     // },
     // {
     //   key: 'geolocation',
     //   title: 'Geolocation',
-    //   value: navigator.geolocation || 'N/A',
+    //   value: navigator.geolocation,
     //       prototype: Navigator.prototype.hardwareConcurrency,
     // },
     // {
     //   key: 'hid',
     //   title: 'Hid',
-    //   value: navigator.hid || 'N/A',
+    //   value: navigator.hid,
     //       prototype: Navigator.prototype.hardwareConcurrency,
     // },
     // {
     //   key: 'keyboard',
     //   title: 'Keyboard',
-    //   value: navigator.keyboard || 'N/A',
+    //   value: navigator.keyboard,
     //       prototype: Navigator.prototype.hardwareConcurrency,
     // },
     {
@@ -90,22 +90,17 @@ const getNavigator = () => {
     {
       key: 'vendor',
       title: 'Vendor',
-      value: navigator.vendor || 'N/A',
+      value: navigator.vendor,
     },
     {
       key: 'appVersion',
       title: 'App version',
-      value: navigator.appVersion || 'N/A',
+      value: navigator.appVersion,
     },
     {
       key: 'productSub',
       title: 'Product sub',
-      value: navigator.productSub || 'N/A',
-    },
-    {
-      key: 'vendorSub',
-      title: 'Vendor sub',
-      value: navigator.vendorSub || 'N/A',
+      value: navigator.productSub,
     },
   ];
   return data;
@@ -149,18 +144,23 @@ const checkUndefinedProperties = (obj) => {
   //   document.body.appendChild(frame);
   // }
   // console.log(navigator.hardwareConcurrency);
-  let w;
-  if (typeof Worker !== 'undefined') {
-    if (typeof w === 'undefined') {
-      w = new Worker('/worker.js');
-    }
-    w.onmessage = (event) => {
-      console.log(event);
-    };
-  } else {
-    document.getElementById('result').innerHTML =
-      'Sorry! No Web Worker support.';
-  }
 
   return list.toString().split(',').join('<br />');
 };
+
+const checkWebWorker = (obj, setWorkerData) => {
+  let w;
+  if (typeof w === 'undefined') {
+    w = new Worker('/worker.js');
+  }
+  w.postMessage(obj.key);
+  w.onmessage = (event) => {
+    if (
+      event.data !== undefined &&
+      event.data.toString() !== navigator[obj.key].toString()
+    ) {
+      console.log(event.data, navigator[obj.key]);
+      setWorkerData('Did not match web worker');
+    }
+  };
+};
diff --git a/frontend/yarn.lock b/frontend/yarn.lock
index 12c79a4..eff3e31 100644
--- a/frontend/yarn.lock
+++ b/frontend/yarn.lock
@@ -9134,6 +9134,11 @@ react-tsparticles@^1.28.0:
     tslib "^2.2.0"
     tsparticles "^1.28.0"
 
+react-webworker@^2.1.0:
+  version "2.1.0"
+  resolved "https://registry.yarnpkg.com/react-webworker/-/react-webworker-2.1.0.tgz#6bfe5d74d3f3e5bae89f316b8760b3e8cc551420"
+  integrity sha512-Rl0LeJa7zAQHAZ5KpyWQ/7aHcdy6AKJcJI7UIGlFo2e2sJw7u87hg4ck1cWb70DO0PrW0NwNZrMCgTi23g09JQ==
+
 react@^17.0.2:
   version "17.0.2"
   resolved "https://registry.npmjs.org/react/-/react-17.0.2.tgz"

From 46236137a4fef6c2eb050bfab84fd92663ae2230 Mon Sep 17 00:00:00 2001
From: z0ccc <z0cccccccc@gmail.com>
Date: Fri, 3 Sep 2021 15:53:08 -0400
Subject: [PATCH 05/54] Added screen block

---
 frontend/public/worker.js                 |   2 -
 frontend/src/components/Issues.js         |  23 ----
 frontend/src/components/NavigatorBlock.js |  36 ++----
 frontend/src/components/NewTable.js       |  27 ----
 frontend/src/components/OldTable.js       |  16 +++
 frontend/src/components/ScanBlocks.js     |   2 +
 frontend/src/components/ScreenBlock.js    |  16 +++
 frontend/src/components/Table.js          |  34 ++---
 frontend/src/components/TableRow.js       |  40 ++++++
 frontend/src/components/navigator.js      | 146 +++++++++++++++-------
 frontend/src/styles/App.css               |  10 +-
 11 files changed, 215 insertions(+), 137 deletions(-)
 delete mode 100644 frontend/src/components/Issues.js
 delete mode 100644 frontend/src/components/NewTable.js
 create mode 100644 frontend/src/components/OldTable.js
 create mode 100644 frontend/src/components/ScreenBlock.js
 create mode 100644 frontend/src/components/TableRow.js

diff --git a/frontend/public/worker.js b/frontend/public/worker.js
index 617e62f..cf665fc 100644
--- a/frontend/public/worker.js
+++ b/frontend/public/worker.js
@@ -1,5 +1,3 @@
-/* eslint-disable import/prefer-default-export */
 onmessage = (e) => {
-  console.log(e.data, navigator[e.data]);
   postMessage(navigator[e.data]);
 };
diff --git a/frontend/src/components/Issues.js b/frontend/src/components/Issues.js
deleted file mode 100644
index 746f786..0000000
--- a/frontend/src/components/Issues.js
+++ /dev/null
@@ -1,23 +0,0 @@
-/* eslint-disable no-unused-vars */
-import parse from 'html-react-parser';
-import { useState, useEffect } from 'react';
-import { checkUndefinedProperties, checkWebWorker } from './navigator';
-
-const Issues = ({ item }) => {
-  const [workerData, setWorkerData] = useState();
-  useEffect(() => {
-    checkWebWorker(item, setWorkerData);
-  }, []);
-
-  return (
-    <td>
-      {parse(checkUndefinedProperties(item))}
-      <br />
-      <>{workerData}</>
-    </td>
-  );
-
-  // return <td>{parse(checkUndefinedProperties(item), workerData)}</td>;
-};
-
-export default Issues;
diff --git a/frontend/src/components/NavigatorBlock.js b/frontend/src/components/NavigatorBlock.js
index d66d35a..8161572 100644
--- a/frontend/src/components/NavigatorBlock.js
+++ b/frontend/src/components/NavigatorBlock.js
@@ -1,30 +1,16 @@
-/* eslint-disable no-unused-vars */
-/* eslint-disable arrow-body-style */
-import { useState, useEffect } from 'react';
 import ScanBlock from './ScanBlock';
-import NewTable from './NewTable';
-import { getHardware, getWebGL, getBattery } from './main';
+import Table from './Table';
 import { getNavigator } from './navigator';
 
-const NavigatorBlock = () => {
-  // const [data, setData] = useState([]);
-
-  // useEffect(() => {
-  //   getBattery().then((batteryInfo) => {
-  //     setData([...getHardware(), ...getWebGL(), ...batteryInfo]);
-  //   });
-  // }, []);
-
-  return (
-    <ScanBlock>
-      <h1>Navigator</h1>
-      <NewTable data={getNavigator()} />
-      <p>
-        <b>Explanation:</b> JavaScript can be used to find information about
-        your hardware. This information can be used to create a fingerprint.
-      </p>
-    </ScanBlock>
-  );
-};
+const NavigatorBlock = () => (
+  <ScanBlock>
+    <h1>Navigator</h1>
+    <Table type="navigator" data={getNavigator()} />
+    <p>
+      <b>Explanation:</b> JavaScript can be used to find information about your
+      hardware. This information can be used to create a fingerprint.
+    </p>
+  </ScanBlock>
+);
 
 export default NavigatorBlock;
diff --git a/frontend/src/components/NewTable.js b/frontend/src/components/NewTable.js
deleted file mode 100644
index cdb0608..0000000
--- a/frontend/src/components/NewTable.js
+++ /dev/null
@@ -1,27 +0,0 @@
-/* eslint-disable no-unused-vars */
-import parse from 'html-react-parser';
-import { useState, useEffect } from 'react';
-import { checkUndefinedProperties } from './navigator';
-import Issues from './Issues';
-
-const Table = ({ data }) => {
-  const [workerData, setWorkerData] = useState();
-
-  return (
-    <div className="tableWrap">
-      <table>
-        {data.map((item) => (
-          <tbody key={item.key}>
-            <tr>
-              <td>{item.title}</td>
-              <td>{item.value}</td>
-              <Issues item={item} />
-            </tr>
-          </tbody>
-        ))}
-      </table>
-    </div>
-  );
-};
-
-export default Table;
diff --git a/frontend/src/components/OldTable.js b/frontend/src/components/OldTable.js
new file mode 100644
index 0000000..cb8c3b4
--- /dev/null
+++ b/frontend/src/components/OldTable.js
@@ -0,0 +1,16 @@
+const Table = ({ data }) => (
+  <div className="tableWrap">
+    <table>
+      {data.map((item) => (
+        <tbody key={item.title}>
+          <tr>
+            <td>{item.title}</td>
+            <td>{item.value}</td>
+          </tr>
+        </tbody>
+      ))}
+    </table>
+  </div>
+);
+
+export default Table;
diff --git a/frontend/src/components/ScanBlocks.js b/frontend/src/components/ScanBlocks.js
index 9a92af2..997f6ec 100644
--- a/frontend/src/components/ScanBlocks.js
+++ b/frontend/src/components/ScanBlocks.js
@@ -1,5 +1,6 @@
 /* eslint-disable no-unused-vars */
 import NavigatorBlock from './NavigatorBlock';
+import ScreenBlock from './ScreenBlock';
 import FingerprintBlock from './FingerprintBlock';
 import LocationBlock from './LocationBlock';
 import HardwareBlock from './HardwareBlock';
@@ -10,6 +11,7 @@ import FiltersBlock from './FiltersBlock';
 
 const ScanBlocks = () => (
   <>
+    <ScreenBlock />
     <NavigatorBlock />
     {/* <FingerprintBlock />
     <LocationBlock />
diff --git a/frontend/src/components/ScreenBlock.js b/frontend/src/components/ScreenBlock.js
new file mode 100644
index 0000000..885cb4d
--- /dev/null
+++ b/frontend/src/components/ScreenBlock.js
@@ -0,0 +1,16 @@
+import ScanBlock from './ScanBlock';
+import Table from './Table';
+import { getScreen } from './navigator';
+
+const ScreenBlock = () => (
+  <ScanBlock>
+    <h1>Screen</h1>
+    <Table type="screen" data={getScreen()} />
+    <p>
+      <b>Explanation:</b> JavaScript can be used to find information about your
+      hardware. This information can be used to create a fingerprint.
+    </p>
+  </ScanBlock>
+);
+
+export default ScreenBlock;
diff --git a/frontend/src/components/Table.js b/frontend/src/components/Table.js
index cb8c3b4..f4b97e7 100644
--- a/frontend/src/components/Table.js
+++ b/frontend/src/components/Table.js
@@ -1,16 +1,22 @@
-const Table = ({ data }) => (
-  <div className="tableWrap">
-    <table>
-      {data.map((item) => (
-        <tbody key={item.title}>
-          <tr>
-            <td>{item.title}</td>
-            <td>{item.value}</td>
-          </tr>
-        </tbody>
-      ))}
-    </table>
-  </div>
-);
+/* eslint-disable no-unused-vars */
+import parse from 'html-react-parser';
+import { useState, useEffect } from 'react';
+import Issues from './TableRow';
+
+const Table = ({ data }) => {
+  const [workerData, setWorkerData] = useState();
+
+  return (
+    <div className="tableWrap">
+      <table>
+        {data.map((item) => (
+          <tbody key={item.key}>
+            <Issues item={item} />
+          </tbody>
+        ))}
+      </table>
+    </div>
+  );
+};
 
 export default Table;
diff --git a/frontend/src/components/TableRow.js b/frontend/src/components/TableRow.js
new file mode 100644
index 0000000..9682ad4
--- /dev/null
+++ b/frontend/src/components/TableRow.js
@@ -0,0 +1,40 @@
+/* eslint-disable no-unused-vars */
+import parse from 'html-react-parser';
+import { useState, useEffect } from 'react';
+import {
+  checkNavigatorProperties,
+  checkWebWorker,
+  checkScreenProperties,
+} from './navigator';
+
+const TableRow = ({ item }) => {
+  const [workerData, setWorkerData] = useState('');
+  const [issues, setIssues] = useState(false);
+
+  useEffect(() => {
+    if (item.issues !== '' || workerData !== '') {
+      setIssues(true);
+    }
+    checkWebWorker(item, setWorkerData);
+  }, []);
+
+  useEffect(() => {
+    if (workerData !== '') {
+      setIssues(true);
+    }
+  }, [workerData]);
+
+  return (
+    <tr className={issues ? 'issue' : ''}>
+      <td>{item.title}</td>
+      <td>{item.value}</td>
+      <td>{parse(item.issues || '')}</td>
+      {/* <td> */}
+      {/* <>{parse(properties)}</> */}
+      {/* <>{parse(workerData)}</> */}
+      {/* </td> */}
+    </tr>
+  );
+};
+
+export default TableRow;
diff --git a/frontend/src/components/navigator.js b/frontend/src/components/navigator.js
index 19bb444..2e09944 100644
--- a/frontend/src/components/navigator.js
+++ b/frontend/src/components/navigator.js
@@ -1,5 +1,11 @@
 /* eslint-disable dot-notation */
-export { getNavigator, checkUndefinedProperties, checkWebWorker };
+export {
+  getNavigator,
+  checkNavigatorProperties,
+  checkWebWorker,
+  getScreen,
+  checkScreenProperties,
+};
 
 const getNavigator = () => {
   const data = [
@@ -7,100 +13,85 @@ const getNavigator = () => {
       key: 'deviceMemory',
       title: 'Device memory',
       value: navigator.deviceMemory,
+      issues: checkNavigatorProperties('deviceMemory'),
     },
     {
       key: 'hardwareConcurrency',
       title: 'Hardware Concurrency',
       value: navigator.hardwareConcurrency,
+      issues: checkNavigatorProperties('hardwareConcurrency'),
     },
     {
       key: 'maxTouchPoints',
       title: 'Max touchpoints',
       value: navigator.maxTouchPoints,
+      issues: checkNavigatorProperties('maxTouchPoints'),
     },
     {
       key: 'platform',
       title: 'Platform',
       value: navigator.platform,
+      issues: checkNavigatorProperties('platform'),
     },
     {
       key: 'userAgent',
       title: 'User agent',
       value: navigator.userAgent,
+      issues: checkNavigatorProperties('userAgent'),
     },
     {
       key: 'language',
       title: 'Language',
-      value: navigator.language,
+      value: navigator.userAgent,
+      issues: checkNavigatorProperties('userAgent'),
     },
     {
       key: 'languages',
       title: 'Languages',
       value: navigator.languages,
+      issues: checkNavigatorProperties('languages'),
     },
     {
       key: 'cookieEnabled',
       title: 'Cookies enabled',
       value: navigator.cookieEnabled ? 'True' : 'False',
+      issues: checkNavigatorProperties('cookieEnabled'),
     },
     {
       key: 'doNotTrack',
       title: 'Do not track header',
       value: navigator.doNotTrack ? 'True' : 'False',
+      issues: checkNavigatorProperties('doNotTrack'),
     },
     {
       key: 'webdriver',
       title: 'Webdriver',
       value: navigator.webdriver ? 'True' : 'False',
+      issues: checkNavigatorProperties('webdriver'),
     },
     {
       key: 'plugins',
       title: 'Plugins',
       value: sortPlugins(navigator.plugins),
-    },
-    // {
-    //   key: 'connection',
-    //   title: 'Connection',
-    //   value: JSON.stringify(navigator.connection),
-    //       prototype: Navigator.prototype.hardwareConcurrency,
-    // },
-    // {
-    //   key: 'geolocation',
-    //   title: 'Geolocation',
-    //   value: navigator.geolocation,
-    //       prototype: Navigator.prototype.hardwareConcurrency,
-    // },
-    // {
-    //   key: 'hid',
-    //   title: 'Hid',
-    //   value: navigator.hid,
-    //       prototype: Navigator.prototype.hardwareConcurrency,
-    // },
-    // {
-    //   key: 'keyboard',
-    //   title: 'Keyboard',
-    //   value: navigator.keyboard,
-    //       prototype: Navigator.prototype.hardwareConcurrency,
-    // },
-    {
-      key: 'onLine',
-      title: 'Online',
-      value: navigator.onLine ? 'True' : 'False',
+      issues: checkNavigatorProperties('plugins'),
     },
     {
       key: 'vendor',
       title: 'Vendor',
       value: navigator.vendor,
+      issues: checkNavigatorProperties('vendor'),
     },
     {
       key: 'appVersion',
       title: 'App version',
       value: navigator.appVersion,
+      issues: checkNavigatorProperties('appVersion'),
     },
     {
       key: 'productSub',
       title: 'Product sub',
       value: navigator.productSub,
+      issues: checkNavigatorProperties('productSub'),
     },
   ];
   return data;
@@ -118,33 +109,25 @@ const sortPlugins = (data) => {
   return list;
 };
 
-const checkUndefinedProperties = (obj) => {
+const checkNavigatorProperties = (key) => {
   const list = [];
-  if (Object.getOwnPropertyDescriptor(navigator, obj.key) !== undefined) {
+  if (Object.getOwnPropertyDescriptor(navigator, key) !== undefined) {
     list.push('Failed undefined properties');
   }
   if (
-    Object.getOwnPropertyDescriptor(Navigator.prototype, obj.key).value !==
+    Object.getOwnPropertyDescriptor(Navigator.prototype, key).value !==
     undefined
   ) {
     list.push('Failed descriptor.value undefined');
   }
   try {
     // eslint-disable-next-line no-unused-vars
-    const check = Navigator.prototype[obj.key];
+    const check = Navigator.prototype[key];
     list.push('Failed Navigator.prototype');
   } catch (err) {
     // eslint-disable-next-line no-unused-vars
     const check = '';
   }
-  // let frame = document.getElementById('testFrame');
-  // if (!frame) {
-  //   frame = document.createElement('iframe');
-  //   frame.setAttribute('id', 'testFrame');
-  //   document.body.appendChild(frame);
-  // }
-  // console.log(navigator.hardwareConcurrency);
-
   return list.toString().split(',').join('<br />');
 };
 
@@ -159,8 +142,81 @@ const checkWebWorker = (obj, setWorkerData) => {
       event.data !== undefined &&
       event.data.toString() !== navigator[obj.key].toString()
     ) {
-      console.log(event.data, navigator[obj.key]);
-      setWorkerData('Did not match web worker');
+      setWorkerData('<br />Did not match web worker');
     }
   };
 };
+
+const getScreen = () => {
+  const data = [
+    {
+      key: 'width',
+      title: 'Width',
+      value: window.screen.width,
+      issues: checkScreenProperties('width'),
+    },
+    // {
+    //   key: 'outerWidth',
+    //   title: 'Outer width',
+    //   value: window.outerWidth,
+    // },
+    {
+      key: 'availWidth',
+      title: 'Avail width',
+      value: window.screen.availWidth,
+      issues: checkScreenProperties('availWidth'),
+    },
+    {
+      key: 'height',
+      title: 'Height',
+      value: window.screen.height,
+      issues: checkScreenProperties('height'),
+    },
+    // {
+    //   key: 'outerHeight',
+    //   title: 'Outer height',
+    //   value: window.outerHeight,
+    // },
+    {
+      key: 'availHeight',
+      title: 'Avail height',
+      value: window.screen.availHeight,
+      issues: checkScreenProperties('availHeight'),
+    },
+    {
+      key: 'pixelDepth',
+      title: 'Pixel depth',
+      value: window.screen.pixelDepth,
+      issues: checkScreenProperties('pixelDepth'),
+    },
+    {
+      key: 'colorDepth',
+      title: 'Color depth',
+      value: window.screen.colorDepth,
+      issues: checkScreenProperties('colorDepth'),
+    },
+  ];
+  return data;
+};
+
+const checkScreenProperties = (key) => {
+  const list = [];
+  if (Object.getOwnPropertyDescriptor(window.screen, key) !== undefined) {
+    list.push('Failed undefined properties');
+  }
+  if (
+    Object.getOwnPropertyDescriptor(Screen.prototype, key).value !== undefined
+  ) {
+    list.push('Failed descriptor.value undefined');
+  }
+  try {
+    // eslint-disable-next-line no-unused-vars
+    const check = Screen.prototype[key];
+    list.push('Failed Navigator.prototype');
+  } catch (err) {
+    // eslint-disable-next-line no-unused-vars
+    const check = '';
+  }
+
+  return list.toString().split(',').join('<br />');
+};
diff --git a/frontend/src/styles/App.css b/frontend/src/styles/App.css
index 2f7b94c..0d9b93d 100644
--- a/frontend/src/styles/App.css
+++ b/frontend/src/styles/App.css
@@ -3,6 +3,9 @@
   --grey: #9fa6b2;
   --text: #4b5563;
   --border: #ddd;
+  --issueBackground: #f8d7da;
+  --issueBorder: #f5c6cb;
+  --issueText: #721c24;
 }
 
 .App {
@@ -148,7 +151,6 @@ tr:hover {
 td {
   vertical-align: top;
   padding: 12px;
-  word-break: break-all;
 }
 
 td:first-child {
@@ -205,6 +207,12 @@ input[type='text'] {
   background-color: var(--border);
 }
 
+.issue {
+  background-color: var(--issueBackground);
+  color: var(--issueText);
+  border: 1px solid var(--issueBorder);
+}
+
 @media screen and (max-width: 500px) {
   .github {
     width: 24px;

From ceecbf32b6a28b67eb0c90438c50ece3636c58b2 Mon Sep 17 00:00:00 2001
From: z0ccc <z0cccccccc@gmail.com>
Date: Sun, 5 Sep 2021 21:11:36 -0400
Subject: [PATCH 06/54] Renamed navigator to main

---
 frontend/src/components/ConnectionBlock.js  |   2 +-
 frontend/src/components/FingerprintBlock.js |   2 +-
 frontend/src/components/HardwareBlock.js    |   2 +-
 frontend/src/components/LocationBlock.js    |   2 +-
 frontend/src/components/NavigatorBlock.js   |   2 +-
 frontend/src/components/ScreenBlock.js      |   2 +-
 frontend/src/components/SoftwareBlock.js    |   2 +-
 frontend/src/components/TableRow.js         |  13 +-
 frontend/src/components/main.js             | 433 +++++++-------------
 frontend/src/components/mainOld.js          | 349 ++++++++++++++++
 frontend/src/components/navigator.js        | 222 ----------
 11 files changed, 515 insertions(+), 516 deletions(-)
 create mode 100644 frontend/src/components/mainOld.js
 delete mode 100644 frontend/src/components/navigator.js

diff --git a/frontend/src/components/ConnectionBlock.js b/frontend/src/components/ConnectionBlock.js
index cf22cbd..c75e11a 100644
--- a/frontend/src/components/ConnectionBlock.js
+++ b/frontend/src/components/ConnectionBlock.js
@@ -1,7 +1,7 @@
 import { useState, useEffect } from 'react';
 import ScanBlock from './ScanBlock';
 import Table from './Table';
-import { fetchAPI, getConnection } from './main';
+import { fetchAPI, getConnection } from './mainOld';
 
 const ConnectionBlock = () => {
   const [data, setData] = useState('');
diff --git a/frontend/src/components/FingerprintBlock.js b/frontend/src/components/FingerprintBlock.js
index bdb2327..6db3228 100644
--- a/frontend/src/components/FingerprintBlock.js
+++ b/frontend/src/components/FingerprintBlock.js
@@ -9,7 +9,7 @@ import {
   getHash,
   getName,
   handleSave,
-} from './main';
+} from './mainOld';
 
 const FingerprintBlock = () => {
   const [name, setName] = useState('');
diff --git a/frontend/src/components/HardwareBlock.js b/frontend/src/components/HardwareBlock.js
index dce3ee0..02e5b92 100644
--- a/frontend/src/components/HardwareBlock.js
+++ b/frontend/src/components/HardwareBlock.js
@@ -1,7 +1,7 @@
 import { useState, useEffect } from 'react';
 import ScanBlock from './ScanBlock';
 import Table from './Table';
-import { getHardware, getWebGL, getBattery } from './main';
+import { getHardware, getWebGL, getBattery } from './mainOld';
 
 const HardwareBlock = () => {
   const [data, setData] = useState([]);
diff --git a/frontend/src/components/LocationBlock.js b/frontend/src/components/LocationBlock.js
index 5768911..53da3c9 100644
--- a/frontend/src/components/LocationBlock.js
+++ b/frontend/src/components/LocationBlock.js
@@ -1,7 +1,7 @@
 import { useState, useEffect } from 'react';
 import ScanBlock from './ScanBlock';
 import Table from './Table';
-import { fetchAPI, getLocation, getMap } from './main';
+import { fetchAPI, getLocation, getMap } from './mainOld';
 
 const LocationBlock = () => {
   const [data, setData] = useState([]);
diff --git a/frontend/src/components/NavigatorBlock.js b/frontend/src/components/NavigatorBlock.js
index 8161572..863672b 100644
--- a/frontend/src/components/NavigatorBlock.js
+++ b/frontend/src/components/NavigatorBlock.js
@@ -1,6 +1,6 @@
 import ScanBlock from './ScanBlock';
 import Table from './Table';
-import { getNavigator } from './navigator';
+import { getNavigator } from './main';
 
 const NavigatorBlock = () => (
   <ScanBlock>
diff --git a/frontend/src/components/ScreenBlock.js b/frontend/src/components/ScreenBlock.js
index 885cb4d..1bcef8a 100644
--- a/frontend/src/components/ScreenBlock.js
+++ b/frontend/src/components/ScreenBlock.js
@@ -1,6 +1,6 @@
 import ScanBlock from './ScanBlock';
 import Table from './Table';
-import { getScreen } from './navigator';
+import { getScreen } from './main';
 
 const ScreenBlock = () => (
   <ScanBlock>
diff --git a/frontend/src/components/SoftwareBlock.js b/frontend/src/components/SoftwareBlock.js
index 1a678d7..cc2a713 100644
--- a/frontend/src/components/SoftwareBlock.js
+++ b/frontend/src/components/SoftwareBlock.js
@@ -1,6 +1,6 @@
 import ScanBlock from './ScanBlock';
 import Table from './Table';
-import { getSoftware } from './main';
+import { getSoftware } from './mainOld';
 
 const SoftwareBlock = () => (
   <ScanBlock>
diff --git a/frontend/src/components/TableRow.js b/frontend/src/components/TableRow.js
index 9682ad4..9653f7f 100644
--- a/frontend/src/components/TableRow.js
+++ b/frontend/src/components/TableRow.js
@@ -5,7 +5,7 @@ import {
   checkNavigatorProperties,
   checkWebWorker,
   checkScreenProperties,
-} from './navigator';
+} from './main';
 
 const TableRow = ({ item }) => {
   const [workerData, setWorkerData] = useState('');
@@ -15,7 +15,7 @@ const TableRow = ({ item }) => {
     if (item.issues !== '' || workerData !== '') {
       setIssues(true);
     }
-    checkWebWorker(item, setWorkerData);
+    checkWebWorker(item.key, setWorkerData);
   }, []);
 
   useEffect(() => {
@@ -28,11 +28,10 @@ const TableRow = ({ item }) => {
     <tr className={issues ? 'issue' : ''}>
       <td>{item.title}</td>
       <td>{item.value}</td>
-      <td>{parse(item.issues || '')}</td>
-      {/* <td> */}
-      {/* <>{parse(properties)}</> */}
-      {/* <>{parse(workerData)}</> */}
-      {/* </td> */}
+      <td>
+        {parse(item.issues || '')}
+        {parse(workerData)}
+      </td>
     </tr>
   );
 };
diff --git a/frontend/src/components/main.js b/frontend/src/components/main.js
index aecbd9d..f5130f2 100644
--- a/frontend/src/components/main.js
+++ b/frontend/src/components/main.js
@@ -1,303 +1,102 @@
-import md5 from 'crypto-js/md5';
-import Bowser from 'bowser';
-import axios from 'axios';
-
+/* eslint-disable dot-notation */
 export {
-  fetchAPI,
-  getLocation,
-  getMap,
-  getConnection,
-  detectTor,
-  getSoftware,
-  getHardware,
-  getWebGL,
-  getBattery,
-  getFingerprint,
-  getHash,
-  getName,
-  handleSave,
+  getNavigator,
+  checkNavigatorProperties,
+  checkWebWorker,
+  getScreen,
+  checkScreenProperties,
 };
 
-const fetchAPI = (setData, setDisplay) => {
-  fetch('https://api.vytal.io/ip/')
-    .then((response) => response.json())
-    .then((json) => {
-      setData(json);
-      setDisplay(1);
-    })
-    .catch(() => {
-      setDisplay(0);
-    });
-};
-
-const getLocation = (json) => {
+const getNavigator = () => {
   const data = [
-    {
-      key: 'country',
-      title: 'Country',
-      value: json.country,
-    },
-    {
-      key: 'regionName',
-      title: 'Region',
-      value: json.regionName,
-    },
-    {
-      key: 'lat',
-      title: 'City',
-      value: json.city,
-    },
-    {
-      key: 'zip',
-      title: 'Zip code',
-      value: json.zip,
-    },
-    {
-      key: 'lat',
-      title: 'Latitude',
-      value: json.lat,
-    },
-    {
-      key: 'lon',
-      title: 'Longitude',
-      value: json.lon,
-    },
-  ];
-  return data;
-};
-
-const getMap = (data) =>
-  `https://maps.googleapis.com/maps/api/staticmap?center=${data.lat},${data.lon}&markers=color:red%7Clabel:%7C${data.lat},${data.lon}&size=500x200&zoom=10&key=AIzaSyB-YN-X8PGBSPd7NOaQu4csVhgJUnF3ZGk`;
-
-const getConnection = (json) => {
-  const data = [
-    {
-      key: 'ipAddress',
-      title: 'IP address',
-      value: json.query,
-    },
-    {
-      key: 'isp',
-      title: 'ISP',
-      value: json.isp,
-    },
-    {
-      key: 'org',
-      title: 'Organization',
-      value: json.org,
-    },
-    {
-      key: 'asn',
-      title: 'ASN',
-      value: json.as,
-    },
-    {
-      key: 'tor',
-      title: 'Tor browser detected',
-      value: detectTor() ? 'True' : 'False',
-    },
-  ];
-  return data;
-};
-
-const detectTor = () => {
-  const date = new Date();
-  if (
-    navigator.plugins.length === 0 &&
-    date.getTimezoneOffset() === 0 &&
-    window.outerWidth === window.screen.availWidth &&
-    window.outerHeight === window.screen.availHeight
-  ) {
-    return true;
-  }
-  return false;
-};
-
-const getHardware = () => {
-  const data = [
-    {
-      key: 'screenResolution',
-      title: 'Screen resolution',
-      value: `${window.screen.width}x${window.screen.height}`,
-    },
-    {
-      key: 'colorResolution',
-      title: 'Color Resolution',
-      value: window.screen.colorDepth,
-    },
     {
       key: 'deviceMemory',
       title: 'Device memory',
-      value: navigator.deviceMemory ? `${navigator.deviceMemory}GB` : 'N/A',
+      value: navigator.deviceMemory,
+      issues: checkNavigatorProperties('deviceMemory'),
     },
     {
-      key: 'cpuCores',
-      title: '# of CPU cores',
-      value: navigator.hardwareConcurrency || 'N/A',
+      key: 'hardwareConcurrency',
+      title: 'Hardware Concurrency',
+      value: navigator.hardwareConcurrency,
+      issues: checkNavigatorProperties('hardwareConcurrency'),
     },
     {
-      key: 'maxTouchpoints',
+      key: 'maxTouchPoints',
       title: 'Max touchpoints',
-      value: navigator.maxTouchPoints || 0,
-    },
-  ];
-  return data;
-};
-
-const getBattery = async () => {
-  let level, status;
-  if ('getBattery' in navigator) {
-    await navigator.getBattery().then((res) => {
-      level = `${Math.round(res.level * 100)}%`;
-      status = res.charging ? 'Charging' : 'Not charging';
-    });
-  } else {
-    level = 'N/A';
-    status = 'N/A';
-  }
-  const data = [
-    {
-      key: 'batteryLevel',
-      title: 'Battery level',
-      value: level,
-    },
-    {
-      key: 'batteryStatus',
-      title: 'Battery status',
-      value: status,
-    },
-  ];
-  return data;
-};
-
-const getWebGL = () => {
-  const gl = document.createElement('canvas').getContext('webgl');
-  let ext;
-  if (gl) {
-    ext = gl.getExtension('WEBGL_debug_renderer_info');
-  } else {
-    ext = null;
-  }
-
-  const data = [
-    {
-      key: 'webGLVendor',
-      title: 'WebGL vendor',
-      value: ext ? gl.getParameter(ext.UNMASKED_VENDOR_WEBGL) : 'N/A',
-    },
-    {
-      key: 'webglRenderer',
-      title: 'WebGL renderer',
-      value: ext ? gl.getParameter(ext.UNMASKED_RENDERER_WEBGL) : 'N/A',
-    },
-  ];
-  return data;
-};
-
-const getSoftware = () => {
-  const uaResult = Bowser.parse(navigator.userAgent);
-  const date = new Date();
-  const data = [
-    {
-      key: 'browser',
-      title: 'Browser',
-      value: uaResult.browser.name,
-    },
-    {
-      key: 'browserVersion',
-      title: 'Browser version',
-      value: uaResult.browser.version,
-    },
-    {
-      key: 'browserEngine',
-      title: 'Browser engine',
-      value: uaResult.browser.engine || 'N/A',
-    },
-    {
-      key: 'os',
-      title: 'OS',
-      value: `${uaResult.os.name} ${uaResult.os.versionName}`,
-    },
-    {
-      key: 'osVersion',
-      title: 'OS version',
-      value: uaResult.os.version,
+      value: navigator.maxTouchPoints,
+      issues: checkNavigatorProperties('maxTouchPoints'),
     },
     {
       key: 'platform',
       title: 'Platform',
       value: navigator.platform,
-    },
-    {
-      key: 'systemType',
-      title: 'System type',
-      value: uaResult.platform.type,
+      issues: checkNavigatorProperties('platform'),
     },
     {
       key: 'userAgent',
       title: 'User agent',
-      value: navigator.userAgent || 'N/A',
+      value: navigator.userAgent,
+      issues: checkNavigatorProperties('userAgent'),
     },
     {
-      key: 'preferredLanguage',
-      title: 'Preferred language',
-      value: navigator.language || 'N/A',
-    },
-    // {
-    //   key: 'languages',
-    //   title: 'Languages',
-    //   value: sortArr(navigator.languages) || 'N/A',
-    // },
-    {
-      key: 'timezone',
-      title: 'Timezone',
-      value: Intl.DateTimeFormat().resolvedOptions().timeZone || 'N/A',
+      key: 'language',
+      title: 'Language',
+      value: navigator.userAgent,
+      issues: checkNavigatorProperties('userAgent'),
     },
     {
-      key: 'timezoneOffset',
-      title: 'Timezone offset',
-      value: date.getTimezoneOffset() || 'N/A',
+      key: 'languages',
+      title: 'Languages',
+      value: navigator.languages,
+      issues: checkNavigatorProperties('languages'),
     },
     {
-      key: 'cookiesEnabled',
+      key: 'cookieEnabled',
       title: 'Cookies enabled',
       value: navigator.cookieEnabled ? 'True' : 'False',
+      issues: checkNavigatorProperties('cookieEnabled'),
     },
     {
-      key: 'javaEnabled',
-      title: 'Java enabled',
-      value: navigator.javaEnabled() ? 'True' : 'False',
-    },
-    {
-      key: 'dntHeader',
-      title: 'DNT header enabled',
+      key: 'doNotTrack',
+      title: 'Do not track header',
       value: navigator.doNotTrack ? 'True' : 'False',
+      issues: checkNavigatorProperties('doNotTrack'),
     },
     {
-      key: 'automatedBrowser',
-      title: 'Automated browser',
+      key: 'webdriver',
+      title: 'Webdriver',
       value: navigator.webdriver ? 'True' : 'False',
+      issues: checkNavigatorProperties('webdriver'),
     },
     {
       key: 'plugins',
       title: 'Plugins',
-      value: sortPlugins(navigator.plugins) || 'N/A',
+      value: sortPlugins(navigator.plugins),
+      issues: checkNavigatorProperties('plugins'),
+    },
+    {
+      key: 'vendor',
+      title: 'Vendor',
+      value: navigator.vendor,
+      issues: checkNavigatorProperties('vendor'),
+    },
+    {
+      key: 'appVersion',
+      title: 'App version',
+      value: navigator.appVersion,
+      issues: checkNavigatorProperties('appVersion'),
+    },
+    {
+      key: 'productSub',
+      title: 'Product sub',
+      value: navigator.productSub,
+      issues: checkNavigatorProperties('productSub'),
     },
   ];
   return data;
 };
 
-// sorts array into comma separated list
-// const sortArr = (arr) => {
-//   const arrLength = arr.length;
-//   let list = '';
-//   for (let i = 0; i < arrLength; i++) {
-//     if (i !== 0) list += ', ';
-//     list += arr[i];
-//   }
-//   return list;
-// };
-
 // sorts plugins object into comma separated list
 const sortPlugins = (data) => {
   const { length } = data;
@@ -310,40 +109,114 @@ const sortPlugins = (data) => {
   return list;
 };
 
-const getFingerprint = (name, hash) => {
+const checkNavigatorProperties = (key) => {
+  const list = [];
+  if (Object.getOwnPropertyDescriptor(navigator, key) !== undefined) {
+    list.push('Failed undefined properties');
+  }
+  if (
+    Object.getOwnPropertyDescriptor(Navigator.prototype, key).value !==
+    undefined
+  ) {
+    list.push('Failed descriptor.value undefined');
+  }
+  try {
+    // eslint-disable-next-line no-unused-vars
+    const check = Navigator.prototype[key];
+    list.push('Failed Navigator.prototype');
+  } catch (err) {
+    // eslint-disable-next-line no-unused-vars
+    const check = '';
+  }
+  return list.toString().split(',').join('<br />');
+};
+
+const getScreen = () => {
   const data = [
     {
-      key: 'name',
-      title: 'Name',
-      value: name,
+      key: 'width',
+      title: 'Width',
+      value: window.screen.width,
+      issues: checkScreenProperties('width'),
+    },
+    // {
+    //   key: 'outerWidth',
+    //   title: 'Outer width',
+    //   value: window.outerWidth,
+    // },
+    {
+      key: 'availWidth',
+      title: 'Avail width',
+      value: window.screen.availWidth,
+      issues: checkScreenProperties('availWidth'),
     },
     {
-      key: 'hash',
-      title: 'Hash',
-      value: hash,
+      key: 'height',
+      title: 'Height',
+      value: window.screen.height,
+      issues: checkScreenProperties('height'),
+    },
+    // {
+    //   key: 'outerHeight',
+    //   title: 'Outer height',
+    //   value: window.outerHeight,
+    // },
+    {
+      key: 'availHeight',
+      title: 'Avail height',
+      value: window.screen.availHeight,
+      issues: checkScreenProperties('availHeight'),
+    },
+    {
+      key: 'pixelDepth',
+      title: 'Pixel depth',
+      value: window.screen.pixelDepth,
+      issues: checkScreenProperties('pixelDepth'),
+    },
+    {
+      key: 'colorDepth',
+      title: 'Color depth',
+      value: window.screen.colorDepth,
+      issues: checkScreenProperties('colorDepth'),
     },
   ];
   return data;
 };
 
-const getHash = (data) => md5(JSON.stringify(data)).toString();
+const checkScreenProperties = (key) => {
+  const list = [];
+  if (Object.getOwnPropertyDescriptor(window.screen, key) !== undefined) {
+    list.push('Failed undefined properties');
+  }
+  if (
+    Object.getOwnPropertyDescriptor(Screen.prototype, key).value !== undefined
+  ) {
+    list.push('Failed descriptor.value undefined');
+  }
+  try {
+    // eslint-disable-next-line no-unused-vars
+    const check = Screen.prototype[key];
+    list.push('Failed Navigator.prototype');
+  } catch (err) {
+    // eslint-disable-next-line no-unused-vars
+    const check = '';
+  }
 
-const getName = (hash, setName, setLoad) => {
-  axios
-    .get(`https://api.vytal.io/fingerprint/?hash=${hash}`)
-    .then((response) => {
-      if (response.data.length !== 0) {
-        setName(response.data[response.data.length - 1].name);
-      }
-      setLoad(true);
-    });
+  return list.toString().split(',').join('<br />');
 };
 
-const handleSave = (e, hash, setSaved) => {
-  e.preventDefault();
-  axios.post('https://api.vytal.io/fingerprint/', {
-    name: e.target[0].value,
-    hash,
-  });
-  setSaved(true);
+const checkWebWorker = (key, setWorkerData) => {
+  let w;
+  if (typeof w === 'undefined') {
+    w = new Worker('/worker.js');
+  }
+  w.postMessage(key);
+  w.onmessage = (event) => {
+    if (
+      event.data !== undefined &&
+      event.data.toString() !== navigator[key].toString()
+    ) {
+      setWorkerData('<br />Did not match web worker');
+    }
+  };
 };
diff --git a/frontend/src/components/mainOld.js b/frontend/src/components/mainOld.js
new file mode 100644
index 0000000..aecbd9d
--- /dev/null
+++ b/frontend/src/components/mainOld.js
@@ -0,0 +1,349 @@
+import md5 from 'crypto-js/md5';
+import Bowser from 'bowser';
+import axios from 'axios';
+
+export {
+  fetchAPI,
+  getLocation,
+  getMap,
+  getConnection,
+  detectTor,
+  getSoftware,
+  getHardware,
+  getWebGL,
+  getBattery,
+  getFingerprint,
+  getHash,
+  getName,
+  handleSave,
+};
+
+const fetchAPI = (setData, setDisplay) => {
+  fetch('https://api.vytal.io/ip/')
+    .then((response) => response.json())
+    .then((json) => {
+      setData(json);
+      setDisplay(1);
+    })
+    .catch(() => {
+      setDisplay(0);
+    });
+};
+
+const getLocation = (json) => {
+  const data = [
+    {
+      key: 'country',
+      title: 'Country',
+      value: json.country,
+    },
+    {
+      key: 'regionName',
+      title: 'Region',
+      value: json.regionName,
+    },
+    {
+      key: 'lat',
+      title: 'City',
+      value: json.city,
+    },
+    {
+      key: 'zip',
+      title: 'Zip code',
+      value: json.zip,
+    },
+    {
+      key: 'lat',
+      title: 'Latitude',
+      value: json.lat,
+    },
+    {
+      key: 'lon',
+      title: 'Longitude',
+      value: json.lon,
+    },
+  ];
+  return data;
+};
+
+const getMap = (data) =>
+  `https://maps.googleapis.com/maps/api/staticmap?center=${data.lat},${data.lon}&markers=color:red%7Clabel:%7C${data.lat},${data.lon}&size=500x200&zoom=10&key=AIzaSyB-YN-X8PGBSPd7NOaQu4csVhgJUnF3ZGk`;
+
+const getConnection = (json) => {
+  const data = [
+    {
+      key: 'ipAddress',
+      title: 'IP address',
+      value: json.query,
+    },
+    {
+      key: 'isp',
+      title: 'ISP',
+      value: json.isp,
+    },
+    {
+      key: 'org',
+      title: 'Organization',
+      value: json.org,
+    },
+    {
+      key: 'asn',
+      title: 'ASN',
+      value: json.as,
+    },
+    {
+      key: 'tor',
+      title: 'Tor browser detected',
+      value: detectTor() ? 'True' : 'False',
+    },
+  ];
+  return data;
+};
+
+const detectTor = () => {
+  const date = new Date();
+  if (
+    navigator.plugins.length === 0 &&
+    date.getTimezoneOffset() === 0 &&
+    window.outerWidth === window.screen.availWidth &&
+    window.outerHeight === window.screen.availHeight
+  ) {
+    return true;
+  }
+  return false;
+};
+
+const getHardware = () => {
+  const data = [
+    {
+      key: 'screenResolution',
+      title: 'Screen resolution',
+      value: `${window.screen.width}x${window.screen.height}`,
+    },
+    {
+      key: 'colorResolution',
+      title: 'Color Resolution',
+      value: window.screen.colorDepth,
+    },
+    {
+      key: 'deviceMemory',
+      title: 'Device memory',
+      value: navigator.deviceMemory ? `${navigator.deviceMemory}GB` : 'N/A',
+    },
+    {
+      key: 'cpuCores',
+      title: '# of CPU cores',
+      value: navigator.hardwareConcurrency || 'N/A',
+    },
+    {
+      key: 'maxTouchpoints',
+      title: 'Max touchpoints',
+      value: navigator.maxTouchPoints || 0,
+    },
+  ];
+  return data;
+};
+
+const getBattery = async () => {
+  let level, status;
+  if ('getBattery' in navigator) {
+    await navigator.getBattery().then((res) => {
+      level = `${Math.round(res.level * 100)}%`;
+      status = res.charging ? 'Charging' : 'Not charging';
+    });
+  } else {
+    level = 'N/A';
+    status = 'N/A';
+  }
+  const data = [
+    {
+      key: 'batteryLevel',
+      title: 'Battery level',
+      value: level,
+    },
+    {
+      key: 'batteryStatus',
+      title: 'Battery status',
+      value: status,
+    },
+  ];
+  return data;
+};
+
+const getWebGL = () => {
+  const gl = document.createElement('canvas').getContext('webgl');
+  let ext;
+  if (gl) {
+    ext = gl.getExtension('WEBGL_debug_renderer_info');
+  } else {
+    ext = null;
+  }
+
+  const data = [
+    {
+      key: 'webGLVendor',
+      title: 'WebGL vendor',
+      value: ext ? gl.getParameter(ext.UNMASKED_VENDOR_WEBGL) : 'N/A',
+    },
+    {
+      key: 'webglRenderer',
+      title: 'WebGL renderer',
+      value: ext ? gl.getParameter(ext.UNMASKED_RENDERER_WEBGL) : 'N/A',
+    },
+  ];
+  return data;
+};
+
+const getSoftware = () => {
+  const uaResult = Bowser.parse(navigator.userAgent);
+  const date = new Date();
+  const data = [
+    {
+      key: 'browser',
+      title: 'Browser',
+      value: uaResult.browser.name,
+    },
+    {
+      key: 'browserVersion',
+      title: 'Browser version',
+      value: uaResult.browser.version,
+    },
+    {
+      key: 'browserEngine',
+      title: 'Browser engine',
+      value: uaResult.browser.engine || 'N/A',
+    },
+    {
+      key: 'os',
+      title: 'OS',
+      value: `${uaResult.os.name} ${uaResult.os.versionName}`,
+    },
+    {
+      key: 'osVersion',
+      title: 'OS version',
+      value: uaResult.os.version,
+    },
+    {
+      key: 'platform',
+      title: 'Platform',
+      value: navigator.platform,
+    },
+    {
+      key: 'systemType',
+      title: 'System type',
+      value: uaResult.platform.type,
+    },
+    {
+      key: 'userAgent',
+      title: 'User agent',
+      value: navigator.userAgent || 'N/A',
+    },
+    {
+      key: 'preferredLanguage',
+      title: 'Preferred language',
+      value: navigator.language || 'N/A',
+    },
+    // {
+    //   key: 'languages',
+    //   title: 'Languages',
+    //   value: sortArr(navigator.languages) || 'N/A',
+    // },
+    {
+      key: 'timezone',
+      title: 'Timezone',
+      value: Intl.DateTimeFormat().resolvedOptions().timeZone || 'N/A',
+    },
+    {
+      key: 'timezoneOffset',
+      title: 'Timezone offset',
+      value: date.getTimezoneOffset() || 'N/A',
+    },
+    {
+      key: 'cookiesEnabled',
+      title: 'Cookies enabled',
+      value: navigator.cookieEnabled ? 'True' : 'False',
+    },
+    {
+      key: 'javaEnabled',
+      title: 'Java enabled',
+      value: navigator.javaEnabled() ? 'True' : 'False',
+    },
+    {
+      key: 'dntHeader',
+      title: 'DNT header enabled',
+      value: navigator.doNotTrack ? 'True' : 'False',
+    },
+    {
+      key: 'automatedBrowser',
+      title: 'Automated browser',
+      value: navigator.webdriver ? 'True' : 'False',
+    },
+    {
+      key: 'plugins',
+      title: 'Plugins',
+      value: sortPlugins(navigator.plugins) || 'N/A',
+    },
+  ];
+  return data;
+};
+
+// sorts array into comma separated list
+// const sortArr = (arr) => {
+//   const arrLength = arr.length;
+//   let list = '';
+//   for (let i = 0; i < arrLength; i++) {
+//     if (i !== 0) list += ', ';
+//     list += arr[i];
+//   }
+//   return list;
+// };
+
+// sorts plugins object into comma separated list
+const sortPlugins = (data) => {
+  const { length } = data;
+
+  let list = '';
+  for (let i = 0; i < length; i++) {
+    if (i !== 0) list += ', ';
+    list += data[i].name;
+  }
+  return list;
+};
+
+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();
+
+const getName = (hash, setName, setLoad) => {
+  axios
+    .get(`https://api.vytal.io/fingerprint/?hash=${hash}`)
+    .then((response) => {
+      if (response.data.length !== 0) {
+        setName(response.data[response.data.length - 1].name);
+      }
+      setLoad(true);
+    });
+};
+
+const handleSave = (e, hash, setSaved) => {
+  e.preventDefault();
+  axios.post('https://api.vytal.io/fingerprint/', {
+    name: e.target[0].value,
+    hash,
+  });
+  setSaved(true);
+};
diff --git a/frontend/src/components/navigator.js b/frontend/src/components/navigator.js
deleted file mode 100644
index 2e09944..0000000
--- a/frontend/src/components/navigator.js
+++ /dev/null
@@ -1,222 +0,0 @@
-/* eslint-disable dot-notation */
-export {
-  getNavigator,
-  checkNavigatorProperties,
-  checkWebWorker,
-  getScreen,
-  checkScreenProperties,
-};
-
-const getNavigator = () => {
-  const data = [
-    {
-      key: 'deviceMemory',
-      title: 'Device memory',
-      value: navigator.deviceMemory,
-      issues: checkNavigatorProperties('deviceMemory'),
-    },
-    {
-      key: 'hardwareConcurrency',
-      title: 'Hardware Concurrency',
-      value: navigator.hardwareConcurrency,
-      issues: checkNavigatorProperties('hardwareConcurrency'),
-    },
-    {
-      key: 'maxTouchPoints',
-      title: 'Max touchpoints',
-      value: navigator.maxTouchPoints,
-      issues: checkNavigatorProperties('maxTouchPoints'),
-    },
-    {
-      key: 'platform',
-      title: 'Platform',
-      value: navigator.platform,
-      issues: checkNavigatorProperties('platform'),
-    },
-    {
-      key: 'userAgent',
-      title: 'User agent',
-      value: navigator.userAgent,
-      issues: checkNavigatorProperties('userAgent'),
-    },
-    {
-      key: 'language',
-      title: 'Language',
-      value: navigator.userAgent,
-      issues: checkNavigatorProperties('userAgent'),
-    },
-    {
-      key: 'languages',
-      title: 'Languages',
-      value: navigator.languages,
-      issues: checkNavigatorProperties('languages'),
-    },
-    {
-      key: 'cookieEnabled',
-      title: 'Cookies enabled',
-      value: navigator.cookieEnabled ? 'True' : 'False',
-      issues: checkNavigatorProperties('cookieEnabled'),
-    },
-    {
-      key: 'doNotTrack',
-      title: 'Do not track header',
-      value: navigator.doNotTrack ? 'True' : 'False',
-      issues: checkNavigatorProperties('doNotTrack'),
-    },
-    {
-      key: 'webdriver',
-      title: 'Webdriver',
-      value: navigator.webdriver ? 'True' : 'False',
-      issues: checkNavigatorProperties('webdriver'),
-    },
-    {
-      key: 'plugins',
-      title: 'Plugins',
-      value: sortPlugins(navigator.plugins),
-      issues: checkNavigatorProperties('plugins'),
-    },
-    {
-      key: 'vendor',
-      title: 'Vendor',
-      value: navigator.vendor,
-      issues: checkNavigatorProperties('vendor'),
-    },
-    {
-      key: 'appVersion',
-      title: 'App version',
-      value: navigator.appVersion,
-      issues: checkNavigatorProperties('appVersion'),
-    },
-    {
-      key: 'productSub',
-      title: 'Product sub',
-      value: navigator.productSub,
-      issues: checkNavigatorProperties('productSub'),
-    },
-  ];
-  return data;
-};
-
-// sorts plugins object into comma separated list
-const sortPlugins = (data) => {
-  const { length } = data;
-
-  let list = '';
-  for (let i = 0; i < length; i++) {
-    if (i !== 0) list += ', ';
-    list += data[i].name;
-  }
-  return list;
-};
-
-const checkNavigatorProperties = (key) => {
-  const list = [];
-  if (Object.getOwnPropertyDescriptor(navigator, key) !== undefined) {
-    list.push('Failed undefined properties');
-  }
-  if (
-    Object.getOwnPropertyDescriptor(Navigator.prototype, key).value !==
-    undefined
-  ) {
-    list.push('Failed descriptor.value undefined');
-  }
-  try {
-    // eslint-disable-next-line no-unused-vars
-    const check = Navigator.prototype[key];
-    list.push('Failed Navigator.prototype');
-  } catch (err) {
-    // eslint-disable-next-line no-unused-vars
-    const check = '';
-  }
-  return list.toString().split(',').join('<br />');
-};
-
-const checkWebWorker = (obj, setWorkerData) => {
-  let w;
-  if (typeof w === 'undefined') {
-    w = new Worker('/worker.js');
-  }
-  w.postMessage(obj.key);
-  w.onmessage = (event) => {
-    if (
-      event.data !== undefined &&
-      event.data.toString() !== navigator[obj.key].toString()
-    ) {
-      setWorkerData('<br />Did not match web worker');
-    }
-  };
-};
-
-const getScreen = () => {
-  const data = [
-    {
-      key: 'width',
-      title: 'Width',
-      value: window.screen.width,
-      issues: checkScreenProperties('width'),
-    },
-    // {
-    //   key: 'outerWidth',
-    //   title: 'Outer width',
-    //   value: window.outerWidth,
-    // },
-    {
-      key: 'availWidth',
-      title: 'Avail width',
-      value: window.screen.availWidth,
-      issues: checkScreenProperties('availWidth'),
-    },
-    {
-      key: 'height',
-      title: 'Height',
-      value: window.screen.height,
-      issues: checkScreenProperties('height'),
-    },
-    // {
-    //   key: 'outerHeight',
-    //   title: 'Outer height',
-    //   value: window.outerHeight,
-    // },
-    {
-      key: 'availHeight',
-      title: 'Avail height',
-      value: window.screen.availHeight,
-      issues: checkScreenProperties('availHeight'),
-    },
-    {
-      key: 'pixelDepth',
-      title: 'Pixel depth',
-      value: window.screen.pixelDepth,
-      issues: checkScreenProperties('pixelDepth'),
-    },
-    {
-      key: 'colorDepth',
-      title: 'Color depth',
-      value: window.screen.colorDepth,
-      issues: checkScreenProperties('colorDepth'),
-    },
-  ];
-  return data;
-};
-
-const checkScreenProperties = (key) => {
-  const list = [];
-  if (Object.getOwnPropertyDescriptor(window.screen, key) !== undefined) {
-    list.push('Failed undefined properties');
-  }
-  if (
-    Object.getOwnPropertyDescriptor(Screen.prototype, key).value !== undefined
-  ) {
-    list.push('Failed descriptor.value undefined');
-  }
-  try {
-    // eslint-disable-next-line no-unused-vars
-    const check = Screen.prototype[key];
-    list.push('Failed Navigator.prototype');
-  } catch (err) {
-    // eslint-disable-next-line no-unused-vars
-    const check = '';
-  }
-
-  return list.toString().split(',').join('<br />');
-};

From 05bc9c2190a55ad065f928d7bb29426d1d2b5b37 Mon Sep 17 00:00:00 2001
From: z0ccc <z0cccccccc@gmail.com>
Date: Sun, 5 Sep 2021 22:03:15 -0400
Subject: [PATCH 07/54] Added individual navigator functions

---
 frontend/src/components/main.js | 203 ++++++++++++++++++--------------
 1 file changed, 114 insertions(+), 89 deletions(-)

diff --git a/frontend/src/components/main.js b/frontend/src/components/main.js
index f5130f2..31f7f8b 100644
--- a/frontend/src/components/main.js
+++ b/frontend/src/components/main.js
@@ -7,95 +7,120 @@ export {
   checkScreenProperties,
 };
 
-const getNavigator = () => {
-  const data = [
-    {
-      key: 'deviceMemory',
-      title: 'Device memory',
-      value: navigator.deviceMemory,
-      issues: checkNavigatorProperties('deviceMemory'),
-    },
-    {
-      key: 'hardwareConcurrency',
-      title: 'Hardware Concurrency',
-      value: navigator.hardwareConcurrency,
-      issues: checkNavigatorProperties('hardwareConcurrency'),
-    },
-    {
-      key: 'maxTouchPoints',
-      title: 'Max touchpoints',
-      value: navigator.maxTouchPoints,
-      issues: checkNavigatorProperties('maxTouchPoints'),
-    },
-    {
-      key: 'platform',
-      title: 'Platform',
-      value: navigator.platform,
-      issues: checkNavigatorProperties('platform'),
-    },
-    {
-      key: 'userAgent',
-      title: 'User agent',
-      value: navigator.userAgent,
-      issues: checkNavigatorProperties('userAgent'),
-    },
-    {
-      key: 'language',
-      title: 'Language',
-      value: navigator.userAgent,
-      issues: checkNavigatorProperties('userAgent'),
-    },
-    {
-      key: 'languages',
-      title: 'Languages',
-      value: navigator.languages,
-      issues: checkNavigatorProperties('languages'),
-    },
-    {
-      key: 'cookieEnabled',
-      title: 'Cookies enabled',
-      value: navigator.cookieEnabled ? 'True' : 'False',
-      issues: checkNavigatorProperties('cookieEnabled'),
-    },
-    {
-      key: 'doNotTrack',
-      title: 'Do not track header',
-      value: navigator.doNotTrack ? 'True' : 'False',
-      issues: checkNavigatorProperties('doNotTrack'),
-    },
-    {
-      key: 'webdriver',
-      title: 'Webdriver',
-      value: navigator.webdriver ? 'True' : 'False',
-      issues: checkNavigatorProperties('webdriver'),
-    },
-    {
-      key: 'plugins',
-      title: 'Plugins',
-      value: sortPlugins(navigator.plugins),
-      issues: checkNavigatorProperties('plugins'),
-    },
-    {
-      key: 'vendor',
-      title: 'Vendor',
-      value: navigator.vendor,
-      issues: checkNavigatorProperties('vendor'),
-    },
-    {
-      key: 'appVersion',
-      title: 'App version',
-      value: navigator.appVersion,
-      issues: checkNavigatorProperties('appVersion'),
-    },
-    {
-      key: 'productSub',
-      title: 'Product sub',
-      value: navigator.productSub,
-      issues: checkNavigatorProperties('productSub'),
-    },
-  ];
-  return data;
-};
+const getDeviceMemory = () => ({
+  key: 'deviceMemory',
+  title: 'Device memory',
+  value: navigator.deviceMemory,
+  issues: checkNavigatorProperties('deviceMemory'),
+});
+
+const getHardwareConcurrency = () => ({
+  key: 'hardwareConcurrency',
+  title: 'Hardware Concurrency',
+  value: navigator.hardwareConcurrency,
+  issues: checkNavigatorProperties('hardwareConcurrency'),
+});
+
+const getMaxTouchPoints = () => ({
+  key: 'maxTouchPoints',
+  title: 'Max touchpoints',
+  value: navigator.maxTouchPoints,
+  issues: checkNavigatorProperties('maxTouchPoints'),
+});
+
+const getPlatform = () => ({
+  key: 'platform',
+  title: 'Platform',
+  value: navigator.platform,
+  issues: checkNavigatorProperties('platform'),
+});
+
+const getUserAgent = () => ({
+  key: 'userAgent',
+  title: 'User agent',
+  value: navigator.userAgent,
+  issues: checkNavigatorProperties('userAgent'),
+});
+
+const getLanguage = () => ({
+  key: 'userAgent',
+  title: 'User agent',
+  value: navigator.userAgent,
+  issues: checkNavigatorProperties('userAgent'),
+});
+
+const getLanguages = () => ({
+  key: 'languages',
+  title: 'Languages',
+  value: navigator.languages,
+  issues: checkNavigatorProperties('languages'),
+});
+
+const getCookieEnabled = () => ({
+  key: 'cookieEnabled',
+  title: 'Cookies enabled',
+  value: navigator.cookieEnabled ? 'True' : 'False',
+  issues: checkNavigatorProperties('cookieEnabled'),
+});
+
+const getDoNotTrack = () => ({
+  key: 'doNotTrack',
+  title: 'Do not track header',
+  value: navigator.doNotTrack ? 'True' : 'False',
+  issues: checkNavigatorProperties('doNotTrack'),
+});
+
+const getWebDriver = () => ({
+  key: 'webdriver',
+  title: 'Webdriver',
+  value: navigator.webdriver ? 'True' : 'False',
+  issues: checkNavigatorProperties('webdriver'),
+});
+
+const getPlugins = () => ({
+  key: 'plugins',
+  title: 'Plugins',
+  value: sortPlugins(navigator.plugins),
+  issues: checkNavigatorProperties('plugins'),
+});
+
+const getVendor = () => ({
+  key: 'vendor',
+  title: 'Vendor',
+  value: navigator.vendor,
+  issues: checkNavigatorProperties('vendor'),
+});
+
+const getAppVersion = () => ({
+  key: 'vendor',
+  title: 'Vendor',
+  value: navigator.vendor,
+  issues: checkNavigatorProperties('vendor'),
+});
+
+const getProductSub = () => ({
+  key: 'productSub',
+  title: 'Product sub',
+  value: navigator.productSub,
+  issues: checkNavigatorProperties('productSub'),
+});
+
+const getNavigator = () => [
+  getDeviceMemory(),
+  getHardwareConcurrency(),
+  getMaxTouchPoints(),
+  getPlatform(),
+  getUserAgent(),
+  getLanguage(),
+  getLanguages(),
+  getCookieEnabled(),
+  getDoNotTrack(),
+  getWebDriver(),
+  getPlugins(),
+  getVendor(),
+  getAppVersion(),
+  getProductSub(),
+];
 
 // sorts plugins object into comma separated list
 const sortPlugins = (data) => {

From 960175790202508baf55bd5a320879b62bb3ecb3 Mon Sep 17 00:00:00 2001
From: z0ccc <z0cccccccc@gmail.com>
Date: Sun, 5 Sep 2021 22:36:29 -0400
Subject: [PATCH 08/54] Added individual screen functions

---
 frontend/src/components/main.js | 135 ++++++++++++++++++--------------
 1 file changed, 75 insertions(+), 60 deletions(-)

diff --git a/frontend/src/components/main.js b/frontend/src/components/main.js
index 31f7f8b..04fabb5 100644
--- a/frontend/src/components/main.js
+++ b/frontend/src/components/main.js
@@ -43,10 +43,10 @@ const getUserAgent = () => ({
 });
 
 const getLanguage = () => ({
-  key: 'userAgent',
-  title: 'User agent',
-  value: navigator.userAgent,
-  issues: checkNavigatorProperties('userAgent'),
+  key: 'language',
+  title: 'Language',
+  value: navigator.language,
+  issues: checkNavigatorProperties('language'),
 });
 
 const getLanguages = () => ({
@@ -92,10 +92,10 @@ const getVendor = () => ({
 });
 
 const getAppVersion = () => ({
-  key: 'vendor',
-  title: 'Vendor',
-  value: navigator.vendor,
-  issues: checkNavigatorProperties('vendor'),
+  key: 'appVersion',
+  title: 'App Version',
+  value: navigator.appVersion,
+  issues: checkNavigatorProperties('appVersion'),
 });
 
 const getProductSub = () => ({
@@ -105,6 +105,62 @@ const getProductSub = () => ({
   issues: checkNavigatorProperties('productSub'),
 });
 
+const getWidth = () => ({
+  key: 'width',
+  title: 'Width',
+  value: window.screen.width,
+  issues: checkScreenProperties('width'),
+});
+
+const getOuterWidth = () => ({
+  key: 'outerWidth',
+  title: 'Outer width',
+  value: window.outerWidth,
+  issues: '',
+});
+
+const getAvailWidth = () => ({
+  key: 'availWidth',
+  title: 'Avail width',
+  value: window.screen.availWidth,
+  issues: checkScreenProperties('availWidth'),
+});
+
+const getHeight = () => ({
+  key: 'height',
+  title: 'Height',
+  value: window.screen.height,
+  issues: checkScreenProperties('height'),
+});
+
+const getOuterHeight = () => ({
+  key: 'outerHeight',
+  title: 'Outer height',
+  value: window.outerHeight,
+  issues: '',
+});
+
+const getAvailHeight = () => ({
+  key: 'availHeight',
+  title: 'Avail height',
+  value: window.screen.availHeight,
+  issues: checkScreenProperties('availHeight'),
+});
+
+const getPixelDepth = () => ({
+  key: 'pixelDepth',
+  title: 'Pixel depth',
+  value: window.screen.pixelDepth,
+  issues: checkScreenProperties('pixelDepth'),
+});
+
+const getColorDepth = () => ({
+  key: 'colorDepth',
+  title: 'Color depth',
+  value: window.screen.colorDepth,
+  issues: checkScreenProperties('colorDepth'),
+});
+
 const getNavigator = () => [
   getDeviceMemory(),
   getHardwareConcurrency(),
@@ -122,6 +178,17 @@ const getNavigator = () => [
   getProductSub(),
 ];
 
+const getScreen = () => [
+  getWidth(),
+  getAvailWidth(),
+  getOuterWidth(),
+  getHeight(),
+  getAvailHeight(),
+  getOuterHeight(),
+  getPixelDepth(),
+  getColorDepth(),
+];
+
 // sorts plugins object into comma separated list
 const sortPlugins = (data) => {
   const { length } = data;
@@ -156,58 +223,6 @@ const checkNavigatorProperties = (key) => {
   return list.toString().split(',').join('<br />');
 };
 
-const getScreen = () => {
-  const data = [
-    {
-      key: 'width',
-      title: 'Width',
-      value: window.screen.width,
-      issues: checkScreenProperties('width'),
-    },
-    // {
-    //   key: 'outerWidth',
-    //   title: 'Outer width',
-    //   value: window.outerWidth,
-    // },
-    {
-      key: 'availWidth',
-      title: 'Avail width',
-      value: window.screen.availWidth,
-      issues: checkScreenProperties('availWidth'),
-    },
-    {
-      key: 'height',
-      title: 'Height',
-      value: window.screen.height,
-      issues: checkScreenProperties('height'),
-    },
-    // {
-    //   key: 'outerHeight',
-    //   title: 'Outer height',
-    //   value: window.outerHeight,
-    // },
-    {
-      key: 'availHeight',
-      title: 'Avail height',
-      value: window.screen.availHeight,
-      issues: checkScreenProperties('availHeight'),
-    },
-    {
-      key: 'pixelDepth',
-      title: 'Pixel depth',
-      value: window.screen.pixelDepth,
-      issues: checkScreenProperties('pixelDepth'),
-    },
-    {
-      key: 'colorDepth',
-      title: 'Color depth',
-      value: window.screen.colorDepth,
-      issues: checkScreenProperties('colorDepth'),
-    },
-  ];
-  return data;
-};
-
 const checkScreenProperties = (key) => {
   const list = [];
   if (Object.getOwnPropertyDescriptor(window.screen, key) !== undefined) {

From db248be3020a6e93e94a545913b9fe93935ee52e Mon Sep 17 00:00:00 2001
From: z0ccc <z0cccccccc@gmail.com>
Date: Mon, 6 Sep 2021 19:38:36 -0400
Subject: [PATCH 09/54] Display webworker value

---
 frontend/src/components/main.js | 25 ++++++++++++++++++++++++-
 1 file changed, 24 insertions(+), 1 deletion(-)

diff --git a/frontend/src/components/main.js b/frontend/src/components/main.js
index 04fabb5..9c84a9b 100644
--- a/frontend/src/components/main.js
+++ b/frontend/src/components/main.js
@@ -116,6 +116,7 @@ const getOuterWidth = () => ({
   key: 'outerWidth',
   title: 'Outer width',
   value: window.outerWidth,
+  // issues: checkWindowProperties('outerWidth'),
   issues: '',
 });
 
@@ -137,6 +138,7 @@ const getOuterHeight = () => ({
   key: 'outerHeight',
   title: 'Outer height',
   value: window.outerHeight,
+  // issues: checkWindowProperties('outerHeight'),
   issues: '',
 });
 
@@ -245,6 +247,25 @@ const checkScreenProperties = (key) => {
   return list.toString().split(',').join('<br />');
 };
 
+// const checkWindowProperties = (key) => {
+//   const list = [];
+//   if (
+//     Object.getOwnPropertyDescriptor(Window.prototype, key).value !== undefined
+//   ) {
+//     list.push('Failed descriptor.value undefined');
+//   }
+//   // try {
+//   //   // eslint-disable-next-line no-unused-vars
+//   //   const check = Window.prototype[key];
+//   //   list.push('Failed Navigator.prototype');
+//   // } catch (err) {
+//   //   // eslint-disable-next-line no-unused-vars
+//   //   const check = '';
+//   // }
+
+//   return list.toString().split(',').join('<br />');
+// };
+
 const checkWebWorker = (key, setWorkerData) => {
   let w;
   if (typeof w === 'undefined') {
@@ -256,7 +277,9 @@ const checkWebWorker = (key, setWorkerData) => {
       event.data !== undefined &&
       event.data.toString() !== navigator[key].toString()
     ) {
-      setWorkerData('<br />Did not match web worker');
+      setWorkerData(
+        `<br />Did not match web worker (${event.data.toString()})`
+      );
     }
   };
 };

From cf939c2bd34182e2372619aa2bd6374c5f4bc5a4 Mon Sep 17 00:00:00 2001
From: z0ccc <z0cccccccc@gmail.com>
Date: Tue, 7 Sep 2021 01:13:53 -0400
Subject: [PATCH 10/54] Comparing availwidth vs width

---
 frontend/src/components/ScanBlocks.js |  2 ++
 frontend/src/components/main.js       | 11 +++++++++--
 2 files changed, 11 insertions(+), 2 deletions(-)

diff --git a/frontend/src/components/ScanBlocks.js b/frontend/src/components/ScanBlocks.js
index 997f6ec..12341a9 100644
--- a/frontend/src/components/ScanBlocks.js
+++ b/frontend/src/components/ScanBlocks.js
@@ -13,6 +13,8 @@ const ScanBlocks = () => (
   <>
     <ScreenBlock />
     <NavigatorBlock />
+    {/* <LocationBlock />
+    <ConnectionBlock /> */}
     {/* <FingerprintBlock />
     <LocationBlock />
     <ConnectionBlock />
diff --git a/frontend/src/components/main.js b/frontend/src/components/main.js
index 9c84a9b..692fa8f 100644
--- a/frontend/src/components/main.js
+++ b/frontend/src/components/main.js
@@ -109,7 +109,7 @@ const getWidth = () => ({
   key: 'width',
   title: 'Width',
   value: window.screen.width,
-  issues: checkScreenProperties('width'),
+  issues: checkScreenProperties('width') + checkWidth(),
 });
 
 const getOuterWidth = () => ({
@@ -124,7 +124,7 @@ const getAvailWidth = () => ({
   key: 'availWidth',
   title: 'Avail width',
   value: window.screen.availWidth,
-  issues: checkScreenProperties('availWidth'),
+  issues: checkScreenProperties('availWidth') + checkWidth(),
 });
 
 const getHeight = () => ({
@@ -266,6 +266,13 @@ const checkScreenProperties = (key) => {
 //   return list.toString().split(',').join('<br />');
 // };
 
+const checkWidth = () => {
+  if (window.screen.availWidth > window.screen.width) {
+    return '<br />Avail width is wider then width';
+  }
+  return '';
+};
+
 const checkWebWorker = (key, setWorkerData) => {
   let w;
   if (typeof w === 'undefined') {

From fc5edc6c221140e4baece8dae4ad269befeb591b Mon Sep 17 00:00:00 2001
From: z0ccc <z0cccccccc@gmail.com>
Date: Tue, 7 Sep 2021 14:32:43 -0400
Subject: [PATCH 11/54] Printing out array on newline instead of using <br/>

---
 frontend/src/components/ScanBlocks.js |  2 +-
 frontend/src/components/TableRow.js   |  4 +-
 frontend/src/components/main.js       | 64 ++++++++++++++++++++-------
 frontend/src/styles/App.css           |  4 ++
 4 files changed, 57 insertions(+), 17 deletions(-)

diff --git a/frontend/src/components/ScanBlocks.js b/frontend/src/components/ScanBlocks.js
index 12341a9..9dd7683 100644
--- a/frontend/src/components/ScanBlocks.js
+++ b/frontend/src/components/ScanBlocks.js
@@ -12,7 +12,7 @@ import FiltersBlock from './FiltersBlock';
 const ScanBlocks = () => (
   <>
     <ScreenBlock />
-    <NavigatorBlock />
+    {/* <NavigatorBlock /> */}
     {/* <LocationBlock />
     <ConnectionBlock /> */}
     {/* <FingerprintBlock />
diff --git a/frontend/src/components/TableRow.js b/frontend/src/components/TableRow.js
index 9653f7f..5852c89 100644
--- a/frontend/src/components/TableRow.js
+++ b/frontend/src/components/TableRow.js
@@ -29,7 +29,9 @@ const TableRow = ({ item }) => {
       <td>{item.title}</td>
       <td>{item.value}</td>
       <td>
-        {parse(item.issues || '')}
+        {item.issues.map((ele) => (
+          <div className="newline">{ele}</div>
+        ))}
         {parse(workerData)}
       </td>
     </tr>
diff --git a/frontend/src/components/main.js b/frontend/src/components/main.js
index 692fa8f..124ecbb 100644
--- a/frontend/src/components/main.js
+++ b/frontend/src/components/main.js
@@ -1,3 +1,4 @@
+/* eslint-disable no-unused-vars */
 /* eslint-disable dot-notation */
 export {
   getNavigator,
@@ -109,7 +110,12 @@ const getWidth = () => ({
   key: 'width',
   title: 'Width',
   value: window.screen.width,
-  issues: checkScreenProperties('width') + checkWidth(),
+  issues: [
+    checkScreenProperties('width'),
+    checkScreenValue('width'),
+    checkScreenPrototype('width'),
+    checkWidth(),
+  ],
 });
 
 const getOuterWidth = () => ({
@@ -182,13 +188,13 @@ const getNavigator = () => [
 
 const getScreen = () => [
   getWidth(),
-  getAvailWidth(),
-  getOuterWidth(),
-  getHeight(),
-  getAvailHeight(),
-  getOuterHeight(),
-  getPixelDepth(),
-  getColorDepth(),
+  // getAvailWidth(),
+  // getOuterWidth(),
+  // getHeight(),
+  // getAvailHeight(),
+  // getOuterHeight(),
+  // getPixelDepth(),
+  // getColorDepth(),
 ];
 
 // sorts plugins object into comma separated list
@@ -225,26 +231,54 @@ const checkNavigatorProperties = (key) => {
   return list.toString().split(',').join('<br />');
 };
 
+// const checkScreenProperties = (key) => {
+//   const list = [];
+//   if (Object.getOwnPropertyDescriptor(window.screen, key) !== undefined) {
+//     list.push('Failed undefined properties');
+//   }
+//   if (
+//     Object.getOwnPropertyDescriptor(Screen.prototype, key).value !== undefined
+//   ) {
+//     list.push('Failed descriptor.value undefined');
+//   }
+//   try {
+//     // eslint-disable-next-line no-unused-vars
+//     const check = Screen.prototype[key];
+//     list.push('Failed Navigator.prototype');
+//   } catch (err) {
+//     // eslint-disable-next-line no-unused-vars
+//     const check = '';
+//   }
+
+//   return list.toString().split(',').join('<br />');
+// };
+
 const checkScreenProperties = (key) => {
-  const list = [];
   if (Object.getOwnPropertyDescriptor(window.screen, key) !== undefined) {
-    list.push('Failed undefined properties');
+    return 'Failed undefined properties';
   }
+  return null;
+};
+
+const checkScreenValue = (key) => {
   if (
     Object.getOwnPropertyDescriptor(Screen.prototype, key).value !== undefined
   ) {
-    list.push('Failed descriptor.value undefined');
+    return 'Failed descriptor.value undefined';
   }
+  return null;
+};
+
+const checkScreenPrototype = (key) => {
   try {
     // eslint-disable-next-line no-unused-vars
     const check = Screen.prototype[key];
-    list.push('Failed Navigator.prototype');
+    return 'Failed Navigator.prototype';
   } catch (err) {
     // eslint-disable-next-line no-unused-vars
     const check = '';
   }
-
-  return list.toString().split(',').join('<br />');
+  return null;
 };
 
 // const checkWindowProperties = (key) => {
@@ -268,7 +302,7 @@ const checkScreenProperties = (key) => {
 
 const checkWidth = () => {
   if (window.screen.availWidth > window.screen.width) {
-    return '<br />Avail width is wider then width';
+    return 'Avail width is wider then width';
   }
   return '';
 };
diff --git a/frontend/src/styles/App.css b/frontend/src/styles/App.css
index 0d9b93d..d153256 100644
--- a/frontend/src/styles/App.css
+++ b/frontend/src/styles/App.css
@@ -213,6 +213,10 @@ input[type='text'] {
   border: 1px solid var(--issueBorder);
 }
 
+.newline {
+  display: block;
+}
+
 @media screen and (max-width: 500px) {
   .github {
     width: 24px;

From 5aa08c53c32664a659666c5465fd9460382c2352 Mon Sep 17 00:00:00 2001
From: z0ccc <z0cccccccc@gmail.com>
Date: Tue, 7 Sep 2021 16:30:59 -0400
Subject: [PATCH 12/54] Fixed issues handling

---
 frontend/.eslintrc.js                 |   1 +
 frontend/src/components/ScanBlocks.js |   2 +-
 frontend/src/components/TableRow.js   |  10 +-
 frontend/src/components/main.js       | 186 ++++++++++++++++++--------
 4 files changed, 135 insertions(+), 64 deletions(-)

diff --git a/frontend/.eslintrc.js b/frontend/.eslintrc.js
index d2bcd7e..417a8b0 100644
--- a/frontend/.eslintrc.js
+++ b/frontend/.eslintrc.js
@@ -38,5 +38,6 @@ module.exports = {
     'react/prop-types': 'off',
     'react/react-in-jsx-scope': 'off',
     'no-bitwise': 'off',
+    'react/no-array-index-key': 'off',
   },
 };
diff --git a/frontend/src/components/ScanBlocks.js b/frontend/src/components/ScanBlocks.js
index 9dd7683..12341a9 100644
--- a/frontend/src/components/ScanBlocks.js
+++ b/frontend/src/components/ScanBlocks.js
@@ -12,7 +12,7 @@ import FiltersBlock from './FiltersBlock';
 const ScanBlocks = () => (
   <>
     <ScreenBlock />
-    {/* <NavigatorBlock /> */}
+    <NavigatorBlock />
     {/* <LocationBlock />
     <ConnectionBlock /> */}
     {/* <FingerprintBlock />
diff --git a/frontend/src/components/TableRow.js b/frontend/src/components/TableRow.js
index 5852c89..8724afe 100644
--- a/frontend/src/components/TableRow.js
+++ b/frontend/src/components/TableRow.js
@@ -12,7 +12,7 @@ const TableRow = ({ item }) => {
   const [issues, setIssues] = useState(false);
 
   useEffect(() => {
-    if (item.issues !== '' || workerData !== '') {
+    if (item.issues.filter(Boolean).length !== 0) {
       setIssues(true);
     }
     checkWebWorker(item.key, setWorkerData);
@@ -29,10 +29,12 @@ const TableRow = ({ item }) => {
       <td>{item.title}</td>
       <td>{item.value}</td>
       <td>
-        {item.issues.map((ele) => (
-          <div className="newline">{ele}</div>
+        {item.issues.map((ele, index) => (
+          <div className="newline" key={index}>
+            {ele}
+          </div>
         ))}
-        {parse(workerData)}
+        <div className="newline">{workerData}</div>
       </td>
     </tr>
   );
diff --git a/frontend/src/components/main.js b/frontend/src/components/main.js
index 124ecbb..787c81c 100644
--- a/frontend/src/components/main.js
+++ b/frontend/src/components/main.js
@@ -12,98 +12,154 @@ const getDeviceMemory = () => ({
   key: 'deviceMemory',
   title: 'Device memory',
   value: navigator.deviceMemory,
-  issues: checkNavigatorProperties('deviceMemory'),
+  issues: [
+    checkNavigatorProperties('deviceMemory'),
+    checkNavigatorValue('deviceMemory'),
+    checkNavigatorPrototype('deviceMemory'),
+  ],
 });
 
 const getHardwareConcurrency = () => ({
   key: 'hardwareConcurrency',
   title: 'Hardware Concurrency',
   value: navigator.hardwareConcurrency,
-  issues: checkNavigatorProperties('hardwareConcurrency'),
+  issues: [
+    checkNavigatorProperties('hardwareConcurrency'),
+    checkNavigatorValue('hardwareConcurrency'),
+    checkNavigatorPrototype('hardwareConcurrency'),
+  ],
 });
 
 const getMaxTouchPoints = () => ({
   key: 'maxTouchPoints',
   title: 'Max touchpoints',
   value: navigator.maxTouchPoints,
-  issues: checkNavigatorProperties('maxTouchPoints'),
+  issues: [
+    checkNavigatorProperties('maxTouchPoints'),
+    checkNavigatorValue('maxTouchPoints'),
+    checkNavigatorPrototype('maxTouchPoints'),
+  ],
 });
 
 const getPlatform = () => ({
   key: 'platform',
   title: 'Platform',
   value: navigator.platform,
-  issues: checkNavigatorProperties('platform'),
+  issues: [
+    checkNavigatorProperties('platform'),
+    checkNavigatorValue('platform'),
+    checkNavigatorPrototype('platform'),
+  ],
 });
 
 const getUserAgent = () => ({
   key: 'userAgent',
   title: 'User agent',
   value: navigator.userAgent,
-  issues: checkNavigatorProperties('userAgent'),
+  issues: [
+    checkNavigatorProperties('userAgent'),
+    checkNavigatorValue('userAgent'),
+    checkNavigatorPrototype('userAgent'),
+  ],
 });
 
 const getLanguage = () => ({
   key: 'language',
   title: 'Language',
   value: navigator.language,
-  issues: checkNavigatorProperties('language'),
+  issues: [
+    checkNavigatorProperties('language'),
+    checkNavigatorValue('language'),
+    checkNavigatorPrototype('language'),
+  ],
 });
 
 const getLanguages = () => ({
   key: 'languages',
   title: 'Languages',
   value: navigator.languages,
-  issues: checkNavigatorProperties('languages'),
+  issues: [
+    checkNavigatorProperties('languages'),
+    checkNavigatorValue('languages'),
+    checkNavigatorPrototype('languages'),
+  ],
 });
 
 const getCookieEnabled = () => ({
   key: 'cookieEnabled',
   title: 'Cookies enabled',
   value: navigator.cookieEnabled ? 'True' : 'False',
-  issues: checkNavigatorProperties('cookieEnabled'),
+  issues: [
+    checkNavigatorProperties('cookieEnabled'),
+    checkNavigatorValue('cookieEnabled'),
+    checkNavigatorPrototype('cookieEnabled'),
+  ],
 });
 
 const getDoNotTrack = () => ({
   key: 'doNotTrack',
   title: 'Do not track header',
   value: navigator.doNotTrack ? 'True' : 'False',
-  issues: checkNavigatorProperties('doNotTrack'),
+  issues: [
+    checkNavigatorProperties('doNotTrack'),
+    checkNavigatorValue('doNotTrack'),
+    checkNavigatorPrototype('doNotTrack'),
+  ],
 });
 
 const getWebDriver = () => ({
   key: 'webdriver',
   title: 'Webdriver',
   value: navigator.webdriver ? 'True' : 'False',
-  issues: checkNavigatorProperties('webdriver'),
+  issues: [
+    checkNavigatorProperties('webdriver'),
+    checkNavigatorValue('webdriver'),
+    checkNavigatorPrototype('webdriver'),
+  ],
 });
 
 const getPlugins = () => ({
   key: 'plugins',
   title: 'Plugins',
   value: sortPlugins(navigator.plugins),
-  issues: checkNavigatorProperties('plugins'),
+  issues: [
+    checkNavigatorProperties('plugins'),
+    checkNavigatorValue('plugins'),
+    checkNavigatorPrototype('plugins'),
+  ],
 });
 
 const getVendor = () => ({
   key: 'vendor',
   title: 'Vendor',
   value: navigator.vendor,
-  issues: checkNavigatorProperties('vendor'),
+  issues: [
+    checkNavigatorProperties('vendor'),
+    checkNavigatorValue('vendor'),
+    checkNavigatorPrototype('vendor'),
+  ],
 });
 
 const getAppVersion = () => ({
   key: 'appVersion',
   title: 'App Version',
   value: navigator.appVersion,
-  issues: checkNavigatorProperties('appVersion'),
+  issues: [
+    checkNavigatorProperties('appVersion'),
+    checkNavigatorValue('appVersion'),
+    checkNavigatorPrototype('appVersion'),
+  ],
 });
 
 const getProductSub = () => ({
   key: 'productSub',
   title: 'Product sub',
   value: navigator.productSub,
-  issues: checkNavigatorProperties('productSub'),
+  issues: [
+    checkNavigatorProperties('productSub'),
+    checkNavigatorValue('productSub'),
+    checkNavigatorPrototype('productSub'),
+  ],
 });
 
 const getWidth = () => ({
@@ -123,21 +179,30 @@ const getOuterWidth = () => ({
   title: 'Outer width',
   value: window.outerWidth,
   // issues: checkWindowProperties('outerWidth'),
-  issues: '',
+  issues: [],
 });
 
 const getAvailWidth = () => ({
   key: 'availWidth',
   title: 'Avail width',
   value: window.screen.availWidth,
-  issues: checkScreenProperties('availWidth') + checkWidth(),
+  issues: [
+    checkScreenProperties('availWidth'),
+    checkScreenValue('availWidth'),
+    checkScreenPrototype('availWidth'),
+    checkWidth(),
+  ],
 });
 
 const getHeight = () => ({
   key: 'height',
   title: 'Height',
   value: window.screen.height,
-  issues: checkScreenProperties('height'),
+  issues: [
+    checkScreenProperties('height'),
+    checkScreenValue('height'),
+    checkScreenPrototype('height'),
+  ],
 });
 
 const getOuterHeight = () => ({
@@ -145,28 +210,41 @@ const getOuterHeight = () => ({
   title: 'Outer height',
   value: window.outerHeight,
   // issues: checkWindowProperties('outerHeight'),
-  issues: '',
+  issues: [],
 });
 
 const getAvailHeight = () => ({
   key: 'availHeight',
   title: 'Avail height',
   value: window.screen.availHeight,
-  issues: checkScreenProperties('availHeight'),
+  issues: [
+    checkScreenProperties('availHeight'),
+    checkScreenValue('availHeight'),
+    checkScreenPrototype('availHeight'),
+    checkHeight(),
+  ],
 });
 
 const getPixelDepth = () => ({
   key: 'pixelDepth',
   title: 'Pixel depth',
   value: window.screen.pixelDepth,
-  issues: checkScreenProperties('pixelDepth'),
+  issues: [
+    checkScreenProperties('pixelDepth'),
+    checkScreenValue('pixelDepth'),
+    checkScreenPrototype('pixelDepth'),
+  ],
 });
 
 const getColorDepth = () => ({
   key: 'colorDepth',
   title: 'Color depth',
   value: window.screen.colorDepth,
-  issues: checkScreenProperties('colorDepth'),
+  issues: [
+    checkScreenProperties('colorDepth'),
+    checkScreenValue('colorDepth'),
+    checkScreenPrototype('colorDepth'),
+  ],
 });
 
 const getNavigator = () => [
@@ -188,13 +266,13 @@ const getNavigator = () => [
 
 const getScreen = () => [
   getWidth(),
-  // getAvailWidth(),
-  // getOuterWidth(),
-  // getHeight(),
-  // getAvailHeight(),
-  // getOuterHeight(),
-  // getPixelDepth(),
-  // getColorDepth(),
+  getAvailWidth(),
+  getOuterWidth(),
+  getHeight(),
+  getAvailHeight(),
+  getOuterHeight(),
+  getPixelDepth(),
+  getColorDepth(),
 ];
 
 // sorts plugins object into comma separated list
@@ -210,49 +288,34 @@ const sortPlugins = (data) => {
 };
 
 const checkNavigatorProperties = (key) => {
-  const list = [];
   if (Object.getOwnPropertyDescriptor(navigator, key) !== undefined) {
-    list.push('Failed undefined properties');
+    return 'Failed undefined properties';
   }
+  return null;
+};
+
+const checkNavigatorValue = (key) => {
   if (
     Object.getOwnPropertyDescriptor(Navigator.prototype, key).value !==
     undefined
   ) {
-    list.push('Failed descriptor.value undefined');
+    return 'Failed descriptor.value undefined';
   }
+  return null;
+};
+
+const checkNavigatorPrototype = (key) => {
   try {
     // eslint-disable-next-line no-unused-vars
     const check = Navigator.prototype[key];
-    list.push('Failed Navigator.prototype');
+    return 'Failed Navigator.prototype';
   } catch (err) {
     // eslint-disable-next-line no-unused-vars
     const check = '';
   }
-  return list.toString().split(',').join('<br />');
+  return null;
 };
 
-// const checkScreenProperties = (key) => {
-//   const list = [];
-//   if (Object.getOwnPropertyDescriptor(window.screen, key) !== undefined) {
-//     list.push('Failed undefined properties');
-//   }
-//   if (
-//     Object.getOwnPropertyDescriptor(Screen.prototype, key).value !== undefined
-//   ) {
-//     list.push('Failed descriptor.value undefined');
-//   }
-//   try {
-//     // eslint-disable-next-line no-unused-vars
-//     const check = Screen.prototype[key];
-//     list.push('Failed Navigator.prototype');
-//   } catch (err) {
-//     // eslint-disable-next-line no-unused-vars
-//     const check = '';
-//   }
-
-//   return list.toString().split(',').join('<br />');
-// };
-
 const checkScreenProperties = (key) => {
   if (Object.getOwnPropertyDescriptor(window.screen, key) !== undefined) {
     return 'Failed undefined properties';
@@ -304,7 +367,14 @@ const checkWidth = () => {
   if (window.screen.availWidth > window.screen.width) {
     return 'Avail width is wider then width';
   }
-  return '';
+  return null;
+};
+
+const checkHeight = () => {
+  if (window.screen.availHeight > window.screen.height) {
+    return 'Avail height is wider then height';
+  }
+  return null;
 };
 
 const checkWebWorker = (key, setWorkerData) => {
@@ -318,9 +388,7 @@ const checkWebWorker = (key, setWorkerData) => {
       event.data !== undefined &&
       event.data.toString() !== navigator[key].toString()
     ) {
-      setWorkerData(
-        `<br />Did not match web worker (${event.data.toString()})`
-      );
+      setWorkerData(`Did not match web worker (${event.data.toString()})`);
     }
   };
 };

From e7d44b099d863d82ffd8af3f7852381c9549427a Mon Sep 17 00:00:00 2001
From: z0ccc <z0cccccccc@gmail.com>
Date: Wed, 8 Sep 2021 19:16:17 -0400
Subject: [PATCH 13/54] Detecting tor browser

---
 frontend/src/components/DataBlock.js  | 46 +++++++++++++++++++++++++++
 frontend/src/components/ScanBlocks.js |  2 ++
 frontend/src/components/TableRow.js   |  4 ++-
 frontend/src/components/main.js       | 31 +++++++-----------
 4 files changed, 62 insertions(+), 21 deletions(-)
 create mode 100644 frontend/src/components/DataBlock.js

diff --git a/frontend/src/components/DataBlock.js b/frontend/src/components/DataBlock.js
new file mode 100644
index 0000000..4919869
--- /dev/null
+++ b/frontend/src/components/DataBlock.js
@@ -0,0 +1,46 @@
+/* eslint-disable no-unused-vars */
+import { useState, useEffect } from 'react';
+import Bowser from 'bowser';
+import ScanBlock from './ScanBlock';
+import Table from './Table';
+import {
+  checkNavigatorProperties,
+  checkWebWorker,
+  checkScreenProperties,
+  getBrowser,
+} from './main';
+
+const NavigatorBlock = () => {
+  const [firstRender, setfirstRender] = useState(true);
+  const [workerData, setWorkerData] = useState('');
+  const [userAgent, setUserAgent] = useState();
+
+  useEffect(() => {
+    checkWebWorker('userAgent', setWorkerData);
+  }, []);
+
+  useEffect(() => {
+    if (!workerData) {
+      setUserAgent(Bowser.parse(navigator.userAgent));
+    } else {
+      setUserAgent(Bowser.parse(workerData));
+    }
+  }, [workerData]);
+
+  return (
+    <ScanBlock>
+      <h1>Data</h1>
+      {userAgent && (
+        <div className="boxWrap">
+          {getBrowser(userAgent.browser.name)} {userAgent.browser.version}
+        </div>
+      )}
+      <p>
+        <b>Explanation:</b> JavaScript can be used to find information about
+        your hardware. This information can be used to create a fingerprint.
+      </p>
+    </ScanBlock>
+  );
+};
+
+export default NavigatorBlock;
diff --git a/frontend/src/components/ScanBlocks.js b/frontend/src/components/ScanBlocks.js
index 12341a9..282d608 100644
--- a/frontend/src/components/ScanBlocks.js
+++ b/frontend/src/components/ScanBlocks.js
@@ -1,4 +1,5 @@
 /* eslint-disable no-unused-vars */
+import DataBlock from './DataBlock';
 import NavigatorBlock from './NavigatorBlock';
 import ScreenBlock from './ScreenBlock';
 import FingerprintBlock from './FingerprintBlock';
@@ -11,6 +12,7 @@ import FiltersBlock from './FiltersBlock';
 
 const ScanBlocks = () => (
   <>
+    <DataBlock />
     <ScreenBlock />
     <NavigatorBlock />
     {/* <LocationBlock />
diff --git a/frontend/src/components/TableRow.js b/frontend/src/components/TableRow.js
index 8724afe..4010de2 100644
--- a/frontend/src/components/TableRow.js
+++ b/frontend/src/components/TableRow.js
@@ -34,7 +34,9 @@ const TableRow = ({ item }) => {
             {ele}
           </div>
         ))}
-        <div className="newline">{workerData}</div>
+        <div className="newline">
+          {workerData && <>{`Did not match web worker (${workerData})`}</>}
+        </div>
       </td>
     </tr>
   );
diff --git a/frontend/src/components/main.js b/frontend/src/components/main.js
index 787c81c..330520f 100644
--- a/frontend/src/components/main.js
+++ b/frontend/src/components/main.js
@@ -1,11 +1,14 @@
 /* eslint-disable no-unused-vars */
 /* eslint-disable dot-notation */
+// import Bowser from 'bowser';
+
 export {
   getNavigator,
   checkNavigatorProperties,
   checkWebWorker,
   getScreen,
   checkScreenProperties,
+  getBrowser,
 };
 
 const getDeviceMemory = () => ({
@@ -344,25 +347,6 @@ const checkScreenPrototype = (key) => {
   return null;
 };
 
-// const checkWindowProperties = (key) => {
-//   const list = [];
-//   if (
-//     Object.getOwnPropertyDescriptor(Window.prototype, key).value !== undefined
-//   ) {
-//     list.push('Failed descriptor.value undefined');
-//   }
-//   // try {
-//   //   // eslint-disable-next-line no-unused-vars
-//   //   const check = Window.prototype[key];
-//   //   list.push('Failed Navigator.prototype');
-//   // } catch (err) {
-//   //   // eslint-disable-next-line no-unused-vars
-//   //   const check = '';
-//   // }
-
-//   return list.toString().split(',').join('<br />');
-// };
-
 const checkWidth = () => {
   if (window.screen.availWidth > window.screen.width) {
     return 'Avail width is wider then width';
@@ -388,7 +372,14 @@ const checkWebWorker = (key, setWorkerData) => {
       event.data !== undefined &&
       event.data.toString() !== navigator[key].toString()
     ) {
-      setWorkerData(`Did not match web worker (${event.data.toString()})`);
+      setWorkerData(event.data.toString());
     }
   };
 };
+
+const getBrowser = (userAgent) => {
+  if (navigator.brave) {
+    return 'Brave';
+  }
+  return userAgent;
+};

From e660655864921f21d3d0c537f216f86b775c238b Mon Sep 17 00:00:00 2001
From: z0ccc <z0cccccccc@gmail.com>
Date: Wed, 8 Sep 2021 21:07:47 -0400
Subject: [PATCH 14/54] Renamed DataBlock to PredictionBlock

---
 .../components/{DataBlock.js => PredictionBlock.js}   | 11 ++++++++---
 frontend/src/components/ScanBlocks.js                 |  4 ++--
 2 files changed, 10 insertions(+), 5 deletions(-)
 rename frontend/src/components/{DataBlock.js => PredictionBlock.js} (77%)

diff --git a/frontend/src/components/DataBlock.js b/frontend/src/components/PredictionBlock.js
similarity index 77%
rename from frontend/src/components/DataBlock.js
rename to frontend/src/components/PredictionBlock.js
index 4919869..1b3793e 100644
--- a/frontend/src/components/DataBlock.js
+++ b/frontend/src/components/PredictionBlock.js
@@ -10,7 +10,7 @@ import {
   getBrowser,
 } from './main';
 
-const NavigatorBlock = () => {
+const PredictionBlock = () => {
   const [firstRender, setfirstRender] = useState(true);
   const [workerData, setWorkerData] = useState('');
   const [userAgent, setUserAgent] = useState();
@@ -32,7 +32,12 @@ const NavigatorBlock = () => {
       <h1>Data</h1>
       {userAgent && (
         <div className="boxWrap">
-          {getBrowser(userAgent.browser.name)} {userAgent.browser.version}
+          <div className="newline">
+            {getBrowser(userAgent.browser.name)} {userAgent.browser.version}
+          </div>
+          <div className="newline">
+            {userAgent.os.name} {userAgent.os.versionName}
+          </div>
         </div>
       )}
       <p>
@@ -43,4 +48,4 @@ const NavigatorBlock = () => {
   );
 };
 
-export default NavigatorBlock;
+export default PredictionBlock;
diff --git a/frontend/src/components/ScanBlocks.js b/frontend/src/components/ScanBlocks.js
index 282d608..62f2f27 100644
--- a/frontend/src/components/ScanBlocks.js
+++ b/frontend/src/components/ScanBlocks.js
@@ -1,5 +1,5 @@
 /* eslint-disable no-unused-vars */
-import DataBlock from './DataBlock';
+import PredictionBlock from './PredictionBlock';
 import NavigatorBlock from './NavigatorBlock';
 import ScreenBlock from './ScreenBlock';
 import FingerprintBlock from './FingerprintBlock';
@@ -12,7 +12,7 @@ import FiltersBlock from './FiltersBlock';
 
 const ScanBlocks = () => (
   <>
-    <DataBlock />
+    <PredictionBlock />
     <ScreenBlock />
     <NavigatorBlock />
     {/* <LocationBlock />

From 2a4b4c4453f8c7bfca2543cab93f72ab26604fb2 Mon Sep 17 00:00:00 2001
From: z0ccc <z0cccccccc@gmail.com>
Date: Thu, 9 Sep 2021 17:17:48 -0400
Subject: [PATCH 15/54] Added no issues message

---
 .../{PredictionBlock.js => OtherBlock.js}     | 13 ++++++-----
 frontend/src/components/ScanBlocks.js         |  4 ++--
 frontend/src/components/TableRow.js           | 22 ++++++++++++-------
 frontend/src/components/main.js               |  3 +++
 4 files changed, 26 insertions(+), 16 deletions(-)
 rename frontend/src/components/{PredictionBlock.js => OtherBlock.js} (84%)

diff --git a/frontend/src/components/PredictionBlock.js b/frontend/src/components/OtherBlock.js
similarity index 84%
rename from frontend/src/components/PredictionBlock.js
rename to frontend/src/components/OtherBlock.js
index 1b3793e..b28a1c5 100644
--- a/frontend/src/components/PredictionBlock.js
+++ b/frontend/src/components/OtherBlock.js
@@ -7,10 +7,10 @@ import {
   checkNavigatorProperties,
   checkWebWorker,
   checkScreenProperties,
-  getBrowser,
+  getUserAgentData,
 } from './main';
 
-const PredictionBlock = () => {
+const OtherBlock = () => {
   const [firstRender, setfirstRender] = useState(true);
   const [workerData, setWorkerData] = useState('');
   const [userAgent, setUserAgent] = useState();
@@ -29,12 +29,13 @@ const PredictionBlock = () => {
 
   return (
     <ScanBlock>
-      <h1>Data</h1>
+      <h1>Other</h1>
       {userAgent && (
         <div className="boxWrap">
-          <div className="newline">
+          {/* <Table type="screen" data={getUserAgentData()} /> */}
+          {/* <div className="newline">
             {getBrowser(userAgent.browser.name)} {userAgent.browser.version}
-          </div>
+          </div> */}
           <div className="newline">
             {userAgent.os.name} {userAgent.os.versionName}
           </div>
@@ -48,4 +49,4 @@ const PredictionBlock = () => {
   );
 };
 
-export default PredictionBlock;
+export default OtherBlock;
diff --git a/frontend/src/components/ScanBlocks.js b/frontend/src/components/ScanBlocks.js
index 62f2f27..b8aa7d2 100644
--- a/frontend/src/components/ScanBlocks.js
+++ b/frontend/src/components/ScanBlocks.js
@@ -1,5 +1,5 @@
 /* eslint-disable no-unused-vars */
-import PredictionBlock from './PredictionBlock';
+import OtherBlock from './OtherBlock';
 import NavigatorBlock from './NavigatorBlock';
 import ScreenBlock from './ScreenBlock';
 import FingerprintBlock from './FingerprintBlock';
@@ -12,7 +12,7 @@ import FiltersBlock from './FiltersBlock';
 
 const ScanBlocks = () => (
   <>
-    <PredictionBlock />
+    <OtherBlock />
     <ScreenBlock />
     <NavigatorBlock />
     {/* <LocationBlock />
diff --git a/frontend/src/components/TableRow.js b/frontend/src/components/TableRow.js
index 4010de2..2c90ec7 100644
--- a/frontend/src/components/TableRow.js
+++ b/frontend/src/components/TableRow.js
@@ -29,14 +29,20 @@ const TableRow = ({ item }) => {
       <td>{item.title}</td>
       <td>{item.value}</td>
       <td>
-        {item.issues.map((ele, index) => (
-          <div className="newline" key={index}>
-            {ele}
-          </div>
-        ))}
-        <div className="newline">
-          {workerData && <>{`Did not match web worker (${workerData})`}</>}
-        </div>
+        {issues ? (
+          <>
+            {item.issues.map((ele, index) => (
+              <div className="newline" key={index}>
+                {ele}
+              </div>
+            ))}
+            <div className="newline">
+              {workerData && <>{`Did not match web worker (${workerData})`}</>}
+            </div>
+          </>
+        ) : (
+          'No issues'
+        )}
       </td>
     </tr>
   );
diff --git a/frontend/src/components/main.js b/frontend/src/components/main.js
index 330520f..125affc 100644
--- a/frontend/src/components/main.js
+++ b/frontend/src/components/main.js
@@ -9,6 +9,7 @@ export {
   getScreen,
   checkScreenProperties,
   getBrowser,
+  getUserAgentData,
 };
 
 const getDeviceMemory = () => ({
@@ -278,6 +279,8 @@ const getScreen = () => [
   getColorDepth(),
 ];
 
+const getUserAgentData = () => [getBrowser()];
+
 // sorts plugins object into comma separated list
 const sortPlugins = (data) => {
   const { length } = data;

From de768f53cc19ede030e493a98500a340ea2b57de Mon Sep 17 00:00:00 2001
From: z0ccc <z0cccccccc@gmail.com>
Date: Sat, 11 Sep 2021 01:09:26 -0400
Subject: [PATCH 16/54] Added userAgentBlock

---
 frontend/src/components/ConnectionBlock.js |  2 +-
 frontend/src/components/LocationBlock.js   |  2 +-
 frontend/src/components/ScanBlocks.js      |  6 +-
 frontend/src/components/Table.js           |  4 +-
 frontend/src/components/UserAgentBlock.js  | 87 ++++++++++++++++++++++
 frontend/src/components/main.js            | 31 ++++++--
 6 files changed, 119 insertions(+), 13 deletions(-)
 create mode 100644 frontend/src/components/UserAgentBlock.js

diff --git a/frontend/src/components/ConnectionBlock.js b/frontend/src/components/ConnectionBlock.js
index c75e11a..64de5ea 100644
--- a/frontend/src/components/ConnectionBlock.js
+++ b/frontend/src/components/ConnectionBlock.js
@@ -1,6 +1,6 @@
 import { useState, useEffect } from 'react';
 import ScanBlock from './ScanBlock';
-import Table from './Table';
+import Table from './OldTable';
 import { fetchAPI, getConnection } from './mainOld';
 
 const ConnectionBlock = () => {
diff --git a/frontend/src/components/LocationBlock.js b/frontend/src/components/LocationBlock.js
index 53da3c9..d03077e 100644
--- a/frontend/src/components/LocationBlock.js
+++ b/frontend/src/components/LocationBlock.js
@@ -1,6 +1,6 @@
 import { useState, useEffect } from 'react';
 import ScanBlock from './ScanBlock';
-import Table from './Table';
+import Table from './OldTable';
 import { fetchAPI, getLocation, getMap } from './mainOld';
 
 const LocationBlock = () => {
diff --git a/frontend/src/components/ScanBlocks.js b/frontend/src/components/ScanBlocks.js
index b8aa7d2..4f45389 100644
--- a/frontend/src/components/ScanBlocks.js
+++ b/frontend/src/components/ScanBlocks.js
@@ -1,4 +1,5 @@
 /* eslint-disable no-unused-vars */
+import UserAgentBlock from './UserAgentBlock';
 import OtherBlock from './OtherBlock';
 import NavigatorBlock from './NavigatorBlock';
 import ScreenBlock from './ScreenBlock';
@@ -12,11 +13,12 @@ import FiltersBlock from './FiltersBlock';
 
 const ScanBlocks = () => (
   <>
+    <UserAgentBlock />
     <OtherBlock />
     <ScreenBlock />
     <NavigatorBlock />
-    {/* <LocationBlock />
-    <ConnectionBlock /> */}
+    <LocationBlock />
+    <ConnectionBlock />
     {/* <FingerprintBlock />
     <LocationBlock />
     <ConnectionBlock />
diff --git a/frontend/src/components/Table.js b/frontend/src/components/Table.js
index f4b97e7..1295b6a 100644
--- a/frontend/src/components/Table.js
+++ b/frontend/src/components/Table.js
@@ -1,7 +1,7 @@
 /* eslint-disable no-unused-vars */
 import parse from 'html-react-parser';
 import { useState, useEffect } from 'react';
-import Issues from './TableRow';
+import TableRow from './TableRow';
 
 const Table = ({ data }) => {
   const [workerData, setWorkerData] = useState();
@@ -11,7 +11,7 @@ const Table = ({ data }) => {
       <table>
         {data.map((item) => (
           <tbody key={item.key}>
-            <Issues item={item} />
+            <TableRow item={item} />
           </tbody>
         ))}
       </table>
diff --git a/frontend/src/components/UserAgentBlock.js b/frontend/src/components/UserAgentBlock.js
new file mode 100644
index 0000000..707ca78
--- /dev/null
+++ b/frontend/src/components/UserAgentBlock.js
@@ -0,0 +1,87 @@
+/* eslint-disable no-unused-vars */
+import { useState, useEffect } from 'react';
+import Bowser from 'bowser';
+import ScanBlock from './ScanBlock';
+import Table from './Table';
+import {
+  checkNavigatorProperties,
+  checkWebWorker,
+  checkScreenProperties,
+  getUserAgentData,
+} from './main';
+
+const UserAgentBlock = () => {
+  const [firstRender, setfirstRender] = useState(true);
+  const [workerData, setWorkerData] = useState('');
+  const [userAgent, setUserAgent] = useState();
+
+  useEffect(() => {
+    checkWebWorker('userAgent', setWorkerData);
+  }, []);
+
+  useEffect(() => {
+    if (!workerData) {
+      setUserAgent(Bowser.parse(navigator.userAgent));
+    } else {
+      setUserAgent(Bowser.parse(workerData));
+    }
+  }, [workerData]);
+
+  return (
+    <ScanBlock>
+      <h1>User Agent</h1>
+      {userAgent && (
+        <div className="tableWrap">
+          <table>
+            <tbody>
+              <tr>
+                <td>Browser</td>
+                <td>{userAgent.browser.name}</td>
+              </tr>
+            </tbody>
+            <tbody>
+              <tr>
+                <td>Browser version</td>
+                <td>{userAgent.browser.version}</td>
+              </tr>
+            </tbody>
+            <tbody>
+              <tr>
+                <td>OS</td>
+                <td>
+                  {userAgent.os.name} {userAgent.os.versionName}
+                </td>
+              </tr>
+            </tbody>
+            <tbody>
+              <tr>
+                <td>OS version</td>
+                <td>{userAgent.os.version}</td>
+              </tr>
+            </tbody>
+            <tbody>
+              <tr>
+                <td>Engine</td>
+                <td>
+                  {userAgent.engine.name} {userAgent.engine.version}
+                </td>
+              </tr>
+            </tbody>
+            <tbody>
+              <tr>
+                <td>Platform type</td>
+                <td>{userAgent.platform.type}</td>
+              </tr>
+            </tbody>
+          </table>
+        </div>
+      )}
+      <p>
+        <b>Explanation:</b> JavaScript can be used to find information about
+        your hardware. This information can be used to create a fingerprint.
+      </p>
+    </ScanBlock>
+  );
+};
+
+export default UserAgentBlock;
diff --git a/frontend/src/components/main.js b/frontend/src/components/main.js
index 125affc..bc8b584 100644
--- a/frontend/src/components/main.js
+++ b/frontend/src/components/main.js
@@ -279,7 +279,24 @@ const getScreen = () => [
   getColorDepth(),
 ];
 
-const getUserAgentData = () => [getBrowser()];
+const getUserAgentData = (userAgent) => {
+  // getBrowser();
+  console.log(userAgent);
+};
+
+// const getBrowser = (userAgent) => {
+//   if (navigator.brave) {
+//     return 'Brave';
+//   }
+//   return userAgent;
+// };
+
+const getBrowser = () => ({
+  key: 'Browser',
+  title: 'Color depth',
+  value: window.screen.colorDepth,
+  issues: [],
+});
 
 // sorts plugins object into comma separated list
 const sortPlugins = (data) => {
@@ -380,9 +397,9 @@ const checkWebWorker = (key, setWorkerData) => {
   };
 };
 
-const getBrowser = (userAgent) => {
-  if (navigator.brave) {
-    return 'Brave';
-  }
-  return userAgent;
-};
+// const getBrowser = (userAgent) => {
+//   if (navigator.brave) {
+//     return 'Brave';
+//   }
+//   return userAgent;
+// };

From c9d7254c4d913e1c592cda6419d19479abcd3788 Mon Sep 17 00:00:00 2001
From: z0ccc <z0cccccccc@gmail.com>
Date: Sat, 11 Sep 2021 12:42:29 -0400
Subject: [PATCH 17/54] Detect brave and tor browser

---
 frontend/src/components/OtherBlock.js | 14 ++------
 frontend/src/components/ScanBlocks.js |  2 +-
 frontend/src/components/main.js       | 52 ++++++++++++++-------------
 3 files changed, 30 insertions(+), 38 deletions(-)

diff --git a/frontend/src/components/OtherBlock.js b/frontend/src/components/OtherBlock.js
index b28a1c5..c7082c2 100644
--- a/frontend/src/components/OtherBlock.js
+++ b/frontend/src/components/OtherBlock.js
@@ -7,7 +7,7 @@ import {
   checkNavigatorProperties,
   checkWebWorker,
   checkScreenProperties,
-  getUserAgentData,
+  getOther,
 } from './main';
 
 const OtherBlock = () => {
@@ -30,17 +30,7 @@ const OtherBlock = () => {
   return (
     <ScanBlock>
       <h1>Other</h1>
-      {userAgent && (
-        <div className="boxWrap">
-          {/* <Table type="screen" data={getUserAgentData()} /> */}
-          {/* <div className="newline">
-            {getBrowser(userAgent.browser.name)} {userAgent.browser.version}
-          </div> */}
-          <div className="newline">
-            {userAgent.os.name} {userAgent.os.versionName}
-          </div>
-        </div>
-      )}
+      <Table type="screen" data={getOther()} />
       <p>
         <b>Explanation:</b> JavaScript can be used to find information about
         your hardware. This information can be used to create a fingerprint.
diff --git a/frontend/src/components/ScanBlocks.js b/frontend/src/components/ScanBlocks.js
index 4f45389..9d46739 100644
--- a/frontend/src/components/ScanBlocks.js
+++ b/frontend/src/components/ScanBlocks.js
@@ -13,8 +13,8 @@ import FiltersBlock from './FiltersBlock';
 
 const ScanBlocks = () => (
   <>
-    <UserAgentBlock />
     <OtherBlock />
+    <UserAgentBlock />
     <ScreenBlock />
     <NavigatorBlock />
     <LocationBlock />
diff --git a/frontend/src/components/main.js b/frontend/src/components/main.js
index bc8b584..8a098f1 100644
--- a/frontend/src/components/main.js
+++ b/frontend/src/components/main.js
@@ -8,8 +8,7 @@ export {
   checkWebWorker,
   getScreen,
   checkScreenProperties,
-  getBrowser,
-  getUserAgentData,
+  getOther,
 };
 
 const getDeviceMemory = () => ({
@@ -279,25 +278,35 @@ const getScreen = () => [
   getColorDepth(),
 ];
 
-const getUserAgentData = (userAgent) => {
-  // getBrowser();
-  console.log(userAgent);
-};
-
-// const getBrowser = (userAgent) => {
-//   if (navigator.brave) {
-//     return 'Brave';
-//   }
-//   return userAgent;
-// };
-
-const getBrowser = () => ({
-  key: 'Browser',
-  title: 'Color depth',
-  value: window.screen.colorDepth,
+const getBrave = () => ({
+  key: 'brave',
+  title: 'Brave browser',
+  value: navigator.brave ? 'True' : 'False',
   issues: [],
 });
 
+const detectTor = () => {
+  const date = new Date();
+  if (
+    navigator.plugins.length === 0 &&
+    date.getTimezoneOffset() === 0 &&
+    window.outerWidth === window.screen.availWidth &&
+    window.outerHeight === window.screen.availHeight
+  ) {
+    return true;
+  }
+  return false;
+};
+
+const getTor = () => ({
+  key: 'tor',
+  title: 'Tor browser',
+  value: detectTor() ? 'True' : 'False',
+  issues: [],
+});
+
+const getOther = () => [getBrave(), getTor()];
+
 // sorts plugins object into comma separated list
 const sortPlugins = (data) => {
   const { length } = data;
@@ -396,10 +405,3 @@ const checkWebWorker = (key, setWorkerData) => {
     }
   };
 };
-
-// const getBrowser = (userAgent) => {
-//   if (navigator.brave) {
-//     return 'Brave';
-//   }
-//   return userAgent;
-// };

From 80cd80d49314eac128dc6e5eb9085f9d1a12e5c9 Mon Sep 17 00:00:00 2001
From: z0ccc <z0cccccccc@gmail.com>
Date: Sat, 11 Sep 2021 13:11:03 -0400
Subject: [PATCH 18/54] Removed tor detecteing from connection block

---
 frontend/src/components/mainOld.js | 19 -------------------
 1 file changed, 19 deletions(-)

diff --git a/frontend/src/components/mainOld.js b/frontend/src/components/mainOld.js
index aecbd9d..33e9d3b 100644
--- a/frontend/src/components/mainOld.js
+++ b/frontend/src/components/mainOld.js
@@ -7,7 +7,6 @@ export {
   getLocation,
   getMap,
   getConnection,
-  detectTor,
   getSoftware,
   getHardware,
   getWebGL,
@@ -91,28 +90,10 @@ const getConnection = (json) => {
       title: 'ASN',
       value: json.as,
     },
-    {
-      key: 'tor',
-      title: 'Tor browser detected',
-      value: detectTor() ? 'True' : 'False',
-    },
   ];
   return data;
 };
 
-const detectTor = () => {
-  const date = new Date();
-  if (
-    navigator.plugins.length === 0 &&
-    date.getTimezoneOffset() === 0 &&
-    window.outerWidth === window.screen.availWidth &&
-    window.outerHeight === window.screen.availHeight
-  ) {
-    return true;
-  }
-  return false;
-};
-
 const getHardware = () => {
   const data = [
     {

From 43555f5466a15aa78ab1aea9892cecdcc5fe9b15 Mon Sep 17 00:00:00 2001
From: z0ccc <z0cccccccc@gmail.com>
Date: Sat, 11 Sep 2021 17:31:58 -0400
Subject: [PATCH 19/54] Detect adblock

---
 frontend/src/components/OtherBlock.js | 47 ++++++++++++++++++---------
 frontend/src/components/main.js       | 37 ++++++++++++---------
 2 files changed, 54 insertions(+), 30 deletions(-)

diff --git a/frontend/src/components/OtherBlock.js b/frontend/src/components/OtherBlock.js
index c7082c2..8cd7553 100644
--- a/frontend/src/components/OtherBlock.js
+++ b/frontend/src/components/OtherBlock.js
@@ -1,3 +1,4 @@
+/* eslint-disable arrow-body-style */
 /* eslint-disable no-unused-vars */
 import { useState, useEffect } from 'react';
 import Bowser from 'bowser';
@@ -7,30 +8,47 @@ import {
   checkNavigatorProperties,
   checkWebWorker,
   checkScreenProperties,
-  getOther,
+  detectTor,
 } from './main';
 
 const OtherBlock = () => {
-  const [firstRender, setfirstRender] = useState(true);
-  const [workerData, setWorkerData] = useState('');
-  const [userAgent, setUserAgent] = useState();
+  const [adBlockDetected, setAdBlockDetected] = useState(false);
 
   useEffect(() => {
-    checkWebWorker('userAgent', setWorkerData);
+    fetch('https://www3.doubleclick.net', {
+      method: 'HEAD',
+      mode: 'no-cors',
+      cache: 'no-store',
+    }).catch(() => {
+      setAdBlockDetected(true);
+    });
   }, []);
 
-  useEffect(() => {
-    if (!workerData) {
-      setUserAgent(Bowser.parse(navigator.userAgent));
-    } else {
-      setUserAgent(Bowser.parse(workerData));
-    }
-  }, [workerData]);
-
   return (
     <ScanBlock>
       <h1>Other</h1>
-      <Table type="screen" data={getOther()} />
+      <div className="tableWrap">
+        <table>
+          <tbody>
+            <tr>
+              <td>Brave browser</td>
+              <td>{navigator.brave ? 'True' : 'False'}</td>
+            </tr>
+          </tbody>
+          <tbody>
+            <tr>
+              <td>Tor Browser</td>
+              <td>{detectTor() ? 'True' : 'False'}</td>
+            </tr>
+          </tbody>
+          <tbody>
+            <tr>
+              <td>Adblock</td>
+              <td>{adBlockDetected ? 'True' : 'False'}</td>
+            </tr>
+          </tbody>
+        </table>
+      </div>
       <p>
         <b>Explanation:</b> JavaScript can be used to find information about
         your hardware. This information can be used to create a fingerprint.
@@ -38,5 +56,4 @@ const OtherBlock = () => {
     </ScanBlock>
   );
 };
-
 export default OtherBlock;
diff --git a/frontend/src/components/main.js b/frontend/src/components/main.js
index 8a098f1..1466fb5 100644
--- a/frontend/src/components/main.js
+++ b/frontend/src/components/main.js
@@ -8,7 +8,7 @@ export {
   checkWebWorker,
   getScreen,
   checkScreenProperties,
-  getOther,
+  detectTor,
 };
 
 const getDeviceMemory = () => ({
@@ -278,13 +278,6 @@ const getScreen = () => [
   getColorDepth(),
 ];
 
-const getBrave = () => ({
-  key: 'brave',
-  title: 'Brave browser',
-  value: navigator.brave ? 'True' : 'False',
-  issues: [],
-});
-
 const detectTor = () => {
   const date = new Date();
   if (
@@ -298,14 +291,28 @@ const detectTor = () => {
   return false;
 };
 
-const getTor = () => ({
-  key: 'tor',
-  title: 'Tor browser',
-  value: detectTor() ? 'True' : 'False',
-  issues: [],
-});
+// const getTor = () => ({
+//   key: 'tor',
+//   title: 'Tor browser',
+//   value: detectTor() ? 'True' : 'False',
+//   issues: [],
+// });
 
-const getOther = () => [getBrave(), getTor()];
+// const getAdblock = () => ({
+//   key: 'adblock',
+//   title: 'Adblock',
+//   value: Promise.resolve(detectAdblock()),
+//   issues: [],
+// });
+
+// const detectAdblock = () =>
+//   fetch('https://www3.doubleclick.net', {
+//     method: 'HEAD',
+//     mode: 'no-cors',
+//     cache: 'no-store',
+//   });
+
+// const getOther = () => [getBrave(), getTor(), getAdblock()];
 
 // sorts plugins object into comma separated list
 const sortPlugins = (data) => {

From fa69e2ec340445e0229e66cc7b757652fc0fbca4 Mon Sep 17 00:00:00 2001
From: z0ccc <z0cccccccc@gmail.com>
Date: Sat, 11 Sep 2021 17:49:01 -0400
Subject: [PATCH 20/54] Added battery api to other block

---
 frontend/src/components/OtherBlock.js | 28 +++++++++++++++++++--------
 1 file changed, 20 insertions(+), 8 deletions(-)

diff --git a/frontend/src/components/OtherBlock.js b/frontend/src/components/OtherBlock.js
index 8cd7553..6c0a049 100644
--- a/frontend/src/components/OtherBlock.js
+++ b/frontend/src/components/OtherBlock.js
@@ -1,18 +1,13 @@
 /* eslint-disable arrow-body-style */
 /* eslint-disable no-unused-vars */
 import { useState, useEffect } from 'react';
-import Bowser from 'bowser';
 import ScanBlock from './ScanBlock';
-import Table from './Table';
-import {
-  checkNavigatorProperties,
-  checkWebWorker,
-  checkScreenProperties,
-  detectTor,
-} from './main';
+import { detectTor } from './main';
 
 const OtherBlock = () => {
   const [adBlockDetected, setAdBlockDetected] = useState(false);
+  const [batteryLevel, setBatteryLevel] = useState();
+  const [batteryStatus, setBatteryStatus] = useState();
 
   useEffect(() => {
     fetch('https://www3.doubleclick.net', {
@@ -22,6 +17,11 @@ const OtherBlock = () => {
     }).catch(() => {
       setAdBlockDetected(true);
     });
+
+    navigator.getBattery().then((res) => {
+      setBatteryLevel(`${Math.round(res.level * 100)}%`);
+      setBatteryStatus(res.charging ? 'Charging' : 'Not charging');
+    });
   }, []);
 
   return (
@@ -47,6 +47,18 @@ const OtherBlock = () => {
               <td>{adBlockDetected ? 'True' : 'False'}</td>
             </tr>
           </tbody>
+          <tbody>
+            <tr>
+              <td>Battery level</td>
+              <td>{batteryLevel}</td>
+            </tr>
+          </tbody>
+          <tbody>
+            <tr>
+              <td>Battery status</td>
+              <td>{batteryStatus}</td>
+            </tr>
+          </tbody>
         </table>
       </div>
       <p>

From b6314363ac4ce1ebbdf0e28aa75c435b9e23b4b3 Mon Sep 17 00:00:00 2001
From: z0ccc <z0cccccccc@gmail.com>
Date: Sun, 12 Sep 2021 15:26:10 -0400
Subject: [PATCH 21/54] Added issue buttons

---
 frontend/src/components/TableRow.js | 25 ++++++++++++++-----------
 frontend/src/images/checkCircle.svg |  5 +++++
 frontend/src/images/xCircle.svg     |  5 +++++
 frontend/src/styles/App.css         | 19 +++++++++++++------
 4 files changed, 37 insertions(+), 17 deletions(-)
 create mode 100644 frontend/src/images/checkCircle.svg
 create mode 100644 frontend/src/images/xCircle.svg

diff --git a/frontend/src/components/TableRow.js b/frontend/src/components/TableRow.js
index 2c90ec7..8c89a83 100644
--- a/frontend/src/components/TableRow.js
+++ b/frontend/src/components/TableRow.js
@@ -6,6 +6,8 @@ import {
   checkWebWorker,
   checkScreenProperties,
 } from './main';
+import { ReactComponent as XCircle } from '../images/xCircle.svg';
+import { ReactComponent as CheckCircle } from '../images/checkCircle.svg';
 
 const TableRow = ({ item }) => {
   const [workerData, setWorkerData] = useState('');
@@ -30,18 +32,19 @@ const TableRow = ({ item }) => {
       <td>{item.value}</td>
       <td>
         {issues ? (
-          <>
-            {item.issues.map((ele, index) => (
-              <div className="newline" key={index}>
-                {ele}
-              </div>
-            ))}
-            <div className="newline">
-              {workerData && <>{`Did not match web worker (${workerData})`}</>}
-            </div>
-          </>
+          <XCircle className="circleButton" />
         ) : (
-          'No issues'
+          // <>
+          //   {item.issues.map((ele, index) => (
+          //     <div className="newline" key={index}>
+          //       {ele}
+          //     </div>
+          //   ))}
+          //   <div className="newline">
+          //     {workerData && <>{`Did not match web worker (${workerData})`}</>}
+          //   </div>
+          // </>
+          <CheckCircle className="circleButton" />
         )}
       </td>
     </tr>
diff --git a/frontend/src/images/checkCircle.svg b/frontend/src/images/checkCircle.svg
new file mode 100644
index 0000000..b958876
--- /dev/null
+++ b/frontend/src/images/checkCircle.svg
@@ -0,0 +1,5 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
+  <g fill="#c3e6cb">
+    <path d="M504 256c0 136.967-111.033 248-248 248S8 392.967 8 256 119.033 8 256 8s248 111.033 248 248zM227.314 387.314l184-184c6.248-6.248 6.248-16.379 0-22.627l-22.627-22.627c-6.248-6.249-16.379-6.249-22.628 0L216 308.118l-70.059-70.059c-6.248-6.248-16.379-6.248-22.628 0l-22.627 22.627c-6.248 6.248-6.248 16.379 0 22.627l104 104c6.249 6.249 16.379 6.249 22.628.001z"/>
+  </g>
+</svg>
\ No newline at end of file
diff --git a/frontend/src/images/xCircle.svg b/frontend/src/images/xCircle.svg
new file mode 100644
index 0000000..98a6d05
--- /dev/null
+++ b/frontend/src/images/xCircle.svg
@@ -0,0 +1,5 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
+  <g fill="#721c24">
+    <path d="M256 8C119 8 8 119 8 256s111 248 248 248 248-111 248-248S393 8 256 8zm121.6 313.1c4.7 4.7 4.7 12.3 0 17L338 377.6c-4.7 4.7-12.3 4.7-17 0L256 312l-65.1 65.6c-4.7 4.7-12.3 4.7-17 0L134.4 338c-4.7-4.7-4.7-12.3 0-17l65.6-65-65.6-65.1c-4.7-4.7-4.7-12.3 0-17l39.6-39.6c4.7-4.7 12.3-4.7 17 0l65 65.7 65.1-65.6c4.7-4.7 12.3-4.7 17 0l39.6 39.6c4.7 4.7 4.7 12.3 0 17L312 256l65.6 65.1z"/>
+  </g>
+</svg>
\ No newline at end of file
diff --git a/frontend/src/styles/App.css b/frontend/src/styles/App.css
index d153256..36345ad 100644
--- a/frontend/src/styles/App.css
+++ b/frontend/src/styles/App.css
@@ -44,7 +44,7 @@
 }
 
 .centerBlockInner {
-  width: 800px;
+  width: 650px;
   margin: 24px 0 0 0;
 }
 
@@ -144,12 +144,8 @@ tbody:not(:last-child) {
   border-bottom: 1px solid var(--border);
 }
 
-tr:hover {
-  color: var(--main);
-}
-
 td {
-  vertical-align: top;
+  /* vertical-align: top; */
   padding: 12px;
 }
 
@@ -159,6 +155,17 @@ td:first-child {
   word-break: normal;
 }
 
+td:nth-child(3) {
+  width: 40px;
+  font-weight: 600;
+  word-break: normal;
+}
+
+.circleButton {
+  display: flex;
+  width: 20px;
+}
+
 p {
   margin: 12px 0 0 0;
 }

From 8ce91d8f122415b7db462e719f56fc27a1fc0e67 Mon Sep 17 00:00:00 2001
From: z0ccc <z0cccccccc@gmail.com>
Date: Mon, 13 Sep 2021 23:15:37 -0400
Subject: [PATCH 22/54] Added DateBlock

---
 frontend/src/components/DateBlock.js      | 16 ++++++++++++
 frontend/src/components/ScanBlocks.js     | 11 +++++---
 frontend/src/components/UserAgentBlock.js | 20 ++++++++++++++-
 frontend/src/components/main.js           | 31 +++++++++++++++++++++++
 4 files changed, 73 insertions(+), 5 deletions(-)
 create mode 100644 frontend/src/components/DateBlock.js

diff --git a/frontend/src/components/DateBlock.js b/frontend/src/components/DateBlock.js
new file mode 100644
index 0000000..aff261a
--- /dev/null
+++ b/frontend/src/components/DateBlock.js
@@ -0,0 +1,16 @@
+import ScanBlock from './ScanBlock';
+import Table from './Table';
+import { getDate } from './main';
+
+const DateBlock = () => (
+  <ScanBlock>
+    <h1>Date</h1>
+    <Table type="navigator" data={getDate()} />
+    <p>
+      <b>Explanation:</b> JavaScript can be used to find information about your
+      hardware. This information can be used to create a fingerprint.
+    </p>
+  </ScanBlock>
+);
+
+export default DateBlock;
diff --git a/frontend/src/components/ScanBlocks.js b/frontend/src/components/ScanBlocks.js
index 9d46739..15d2e6b 100644
--- a/frontend/src/components/ScanBlocks.js
+++ b/frontend/src/components/ScanBlocks.js
@@ -1,5 +1,6 @@
 /* eslint-disable no-unused-vars */
 import UserAgentBlock from './UserAgentBlock';
+import DateBlock from './DateBlock';
 import OtherBlock from './OtherBlock';
 import NavigatorBlock from './NavigatorBlock';
 import ScreenBlock from './ScreenBlock';
@@ -13,12 +14,14 @@ import FiltersBlock from './FiltersBlock';
 
 const ScanBlocks = () => (
   <>
-    <OtherBlock />
-    <UserAgentBlock />
-    <ScreenBlock />
-    <NavigatorBlock />
+    <DateBlock />
+    <FingerprintBlock />
     <LocationBlock />
     <ConnectionBlock />
+    <NavigatorBlock />
+    <UserAgentBlock />
+    <ScreenBlock />
+    <OtherBlock />
     {/* <FingerprintBlock />
     <LocationBlock />
     <ConnectionBlock />
diff --git a/frontend/src/components/UserAgentBlock.js b/frontend/src/components/UserAgentBlock.js
index 707ca78..cb954c7 100644
--- a/frontend/src/components/UserAgentBlock.js
+++ b/frontend/src/components/UserAgentBlock.js
@@ -7,8 +7,8 @@ import {
   checkNavigatorProperties,
   checkWebWorker,
   checkScreenProperties,
-  getUserAgentData,
 } from './main';
+import { ReactComponent as CheckCircle } from '../images/checkCircle.svg';
 
 const UserAgentBlock = () => {
   const [firstRender, setfirstRender] = useState(true);
@@ -37,12 +37,18 @@ const UserAgentBlock = () => {
               <tr>
                 <td>Browser</td>
                 <td>{userAgent.browser.name}</td>
+                <td>
+                  <CheckCircle className="circleButton" />
+                </td>
               </tr>
             </tbody>
             <tbody>
               <tr>
                 <td>Browser version</td>
                 <td>{userAgent.browser.version}</td>
+                <td>
+                  <CheckCircle className="circleButton" />
+                </td>
               </tr>
             </tbody>
             <tbody>
@@ -51,12 +57,18 @@ const UserAgentBlock = () => {
                 <td>
                   {userAgent.os.name} {userAgent.os.versionName}
                 </td>
+                <td>
+                  <CheckCircle className="circleButton" />
+                </td>
               </tr>
             </tbody>
             <tbody>
               <tr>
                 <td>OS version</td>
                 <td>{userAgent.os.version}</td>
+                <td>
+                  <CheckCircle className="circleButton" />
+                </td>
               </tr>
             </tbody>
             <tbody>
@@ -65,12 +77,18 @@ const UserAgentBlock = () => {
                 <td>
                   {userAgent.engine.name} {userAgent.engine.version}
                 </td>
+                <td>
+                  <CheckCircle className="circleButton" />
+                </td>
               </tr>
             </tbody>
             <tbody>
               <tr>
                 <td>Platform type</td>
                 <td>{userAgent.platform.type}</td>
+                <td>
+                  <CheckCircle className="circleButton" />
+                </td>
               </tr>
             </tbody>
           </table>
diff --git a/frontend/src/components/main.js b/frontend/src/components/main.js
index 1466fb5..96aabeb 100644
--- a/frontend/src/components/main.js
+++ b/frontend/src/components/main.js
@@ -9,6 +9,7 @@ export {
   getScreen,
   checkScreenProperties,
   detectTor,
+  getDate,
 };
 
 const getDeviceMemory = () => ({
@@ -278,6 +279,36 @@ const getScreen = () => [
   getColorDepth(),
 ];
 
+const getDateNow = () => ({
+  key: 'date',
+  title: 'Date',
+  value: Date.now(),
+  issues: [],
+});
+
+const getCalendar = () => ({
+  key: 'calendar',
+  title: 'Calendar',
+  value: Intl.DateTimeFormat().resolvedOptions().calendar,
+  issues: [],
+});
+
+const getTimezone = () => ({
+  key: 'timezone',
+  title: 'Timezone',
+  value: Intl.DateTimeFormat().resolvedOptions().timeZone,
+  issues: [],
+});
+
+const getTimezoneOffset = () => ({
+  key: 'timezoneOffset',
+  title: 'Timezone offset',
+  value: new Date().getTimezoneOffset(),
+  issues: [],
+});
+
+const getDate = () => [getCalendar(), getTimezone(), getTimezoneOffset()];
+
 const detectTor = () => {
   const date = new Date();
   if (

From 5f340ae7f11d264ee503fd042571eabebf30d9fe Mon Sep 17 00:00:00 2001
From: z0ccc <z0cccccccc@gmail.com>
Date: Mon, 13 Sep 2021 23:21:50 -0400
Subject: [PATCH 23/54] Capitalize first letter automatically

---
 frontend/src/styles/App.css | 5 ++++-
 1 file changed, 4 insertions(+), 1 deletion(-)

diff --git a/frontend/src/styles/App.css b/frontend/src/styles/App.css
index 36345ad..ad76799 100644
--- a/frontend/src/styles/App.css
+++ b/frontend/src/styles/App.css
@@ -145,10 +145,13 @@ tbody:not(:last-child) {
 }
 
 td {
-  /* vertical-align: top; */
   padding: 12px;
 }
 
+td:first-letter {
+  text-transform: uppercase;
+}
+
 td:first-child {
   width: 180px;
   font-weight: 600;

From 77e3ff68b7ab9600efa70afee2bcb1fac1046737 Mon Sep 17 00:00:00 2001
From: z0ccc <z0cccccccc@gmail.com>
Date: Tue, 14 Sep 2021 00:07:23 -0400
Subject: [PATCH 24/54] Changed dateBlock to ItnlBlock

---
 .../components/{DateBlock.js => IntlBlock.js} |  6 ++--
 frontend/src/components/ScanBlocks.js         |  4 +--
 frontend/src/components/main.js               | 28 +++++++++----------
 3 files changed, 19 insertions(+), 19 deletions(-)
 rename frontend/src/components/{DateBlock.js => IntlBlock.js} (76%)

diff --git a/frontend/src/components/DateBlock.js b/frontend/src/components/IntlBlock.js
similarity index 76%
rename from frontend/src/components/DateBlock.js
rename to frontend/src/components/IntlBlock.js
index aff261a..055e6c3 100644
--- a/frontend/src/components/DateBlock.js
+++ b/frontend/src/components/IntlBlock.js
@@ -1,11 +1,11 @@
 import ScanBlock from './ScanBlock';
 import Table from './Table';
-import { getDate } from './main';
+import { getIntl } from './main';
 
 const DateBlock = () => (
   <ScanBlock>
-    <h1>Date</h1>
-    <Table type="navigator" data={getDate()} />
+    <h1>Intl</h1>
+    <Table type="navigator" data={getIntl()} />
     <p>
       <b>Explanation:</b> JavaScript can be used to find information about your
       hardware. This information can be used to create a fingerprint.
diff --git a/frontend/src/components/ScanBlocks.js b/frontend/src/components/ScanBlocks.js
index 15d2e6b..b43c45c 100644
--- a/frontend/src/components/ScanBlocks.js
+++ b/frontend/src/components/ScanBlocks.js
@@ -1,6 +1,6 @@
 /* eslint-disable no-unused-vars */
 import UserAgentBlock from './UserAgentBlock';
-import DateBlock from './DateBlock';
+import IntlBlock from './IntlBlock';
 import OtherBlock from './OtherBlock';
 import NavigatorBlock from './NavigatorBlock';
 import ScreenBlock from './ScreenBlock';
@@ -14,7 +14,7 @@ import FiltersBlock from './FiltersBlock';
 
 const ScanBlocks = () => (
   <>
-    <DateBlock />
+    <IntlBlock />
     <FingerprintBlock />
     <LocationBlock />
     <ConnectionBlock />
diff --git a/frontend/src/components/main.js b/frontend/src/components/main.js
index 96aabeb..6251a78 100644
--- a/frontend/src/components/main.js
+++ b/frontend/src/components/main.js
@@ -9,7 +9,7 @@ export {
   getScreen,
   checkScreenProperties,
   detectTor,
-  getDate,
+  getIntl,
 };
 
 const getDeviceMemory = () => ({
@@ -279,12 +279,12 @@ const getScreen = () => [
   getColorDepth(),
 ];
 
-const getDateNow = () => ({
-  key: 'date',
-  title: 'Date',
-  value: Date.now(),
-  issues: [],
-});
+// const getDateNow = () => ({
+//   key: 'date',
+//   title: 'Date',
+//   value: Date.now(),
+//   issues: [],
+// });
 
 const getCalendar = () => ({
   key: 'calendar',
@@ -300,14 +300,14 @@ const getTimezone = () => ({
   issues: [],
 });
 
-const getTimezoneOffset = () => ({
-  key: 'timezoneOffset',
-  title: 'Timezone offset',
-  value: new Date().getTimezoneOffset(),
-  issues: [],
-});
+// const getTimezoneOffset = () => ({
+//   key: 'timezoneOffset',
+//   title: 'Timezone offset',
+//   value: new Date().getTimezoneOffset(),
+//   issues: [],
+// });
 
-const getDate = () => [getCalendar(), getTimezone(), getTimezoneOffset()];
+const getIntl = () => [getCalendar(), getTimezone()];
 
 const detectTor = () => {
   const date = new Date();

From cc24fe936c1297668b5f3ad046a908c9d1c0f4c1 Mon Sep 17 00:00:00 2001
From: z0ccc <z0cccccccc@gmail.com>
Date: Tue, 14 Sep 2021 16:26:52 -0400
Subject: [PATCH 25/54] Finished intl block

---
 frontend/src/components/IntlBlock.js  | 19 ++++++++++++++-
 frontend/src/components/OtherBlock.js |  6 +++++
 frontend/src/components/TableRow.js   |  2 +-
 frontend/src/components/main.js       | 35 ++++++++++++++++-----------
 4 files changed, 46 insertions(+), 16 deletions(-)

diff --git a/frontend/src/components/IntlBlock.js b/frontend/src/components/IntlBlock.js
index 055e6c3..e8dd348 100644
--- a/frontend/src/components/IntlBlock.js
+++ b/frontend/src/components/IntlBlock.js
@@ -1,11 +1,28 @@
+/* eslint-disable no-unused-vars */
+import { useState, useEffect } from 'react';
 import ScanBlock from './ScanBlock';
 import Table from './Table';
 import { getIntl } from './main';
+import { ReactComponent as CheckCircle } from '../images/checkCircle.svg';
 
 const DateBlock = () => (
   <ScanBlock>
     <h1>Intl</h1>
-    <Table type="navigator" data={getIntl()} />
+    <div className="tableWrap">
+      <table>
+        {Object.entries(Intl.DateTimeFormat().resolvedOptions()).map((item) => (
+          <tbody key={item[0]}>
+            <tr>
+              <td>{item[0]}</td>
+              <td>{item[1]}</td>
+              <td>
+                <CheckCircle className="circleButton" />
+              </td>
+            </tr>
+          </tbody>
+        ))}
+      </table>
+    </div>
     <p>
       <b>Explanation:</b> JavaScript can be used to find information about your
       hardware. This information can be used to create a fingerprint.
diff --git a/frontend/src/components/OtherBlock.js b/frontend/src/components/OtherBlock.js
index 6c0a049..c73302c 100644
--- a/frontend/src/components/OtherBlock.js
+++ b/frontend/src/components/OtherBlock.js
@@ -47,6 +47,12 @@ const OtherBlock = () => {
               <td>{adBlockDetected ? 'True' : 'False'}</td>
             </tr>
           </tbody>
+          <tbody>
+            <tr>
+              <td>Timezone offset</td>
+              <td>{new Date().getTimezoneOffset()}</td>
+            </tr>
+          </tbody>
           <tbody>
             <tr>
               <td>Battery level</td>
diff --git a/frontend/src/components/TableRow.js b/frontend/src/components/TableRow.js
index 8c89a83..63b8b96 100644
--- a/frontend/src/components/TableRow.js
+++ b/frontend/src/components/TableRow.js
@@ -28,7 +28,7 @@ const TableRow = ({ item }) => {
 
   return (
     <tr className={issues ? 'issue' : ''}>
-      <td>{item.title}</td>
+      <td>{item.key}</td>
       <td>{item.value}</td>
       <td>
         {issues ? (
diff --git a/frontend/src/components/main.js b/frontend/src/components/main.js
index 6251a78..4a885f8 100644
--- a/frontend/src/components/main.js
+++ b/frontend/src/components/main.js
@@ -286,13 +286,6 @@ const getScreen = () => [
 //   issues: [],
 // });
 
-const getCalendar = () => ({
-  key: 'calendar',
-  title: 'Calendar',
-  value: Intl.DateTimeFormat().resolvedOptions().calendar,
-  issues: [],
-});
-
 const getTimezone = () => ({
   key: 'timezone',
   title: 'Timezone',
@@ -300,14 +293,21 @@ const getTimezone = () => ({
   issues: [],
 });
 
-// const getTimezoneOffset = () => ({
-//   key: 'timezoneOffset',
-//   title: 'Timezone offset',
-//   value: new Date().getTimezoneOffset(),
-//   issues: [],
-// });
+const getHourCycle = () => ({
+  key: 'hourCycle',
+  title: 'Hour cycle',
+  value: Intl.DateTimeFormat().resolvedOptions().hourCycle,
+  issues: [],
+});
 
-const getIntl = () => [getCalendar(), getTimezone()];
+const getCalendar = () => ({
+  key: 'calendar',
+  title: 'Calendar',
+  value: Intl.DateTimeFormat().resolvedOptions().calendar,
+  issues: [],
+});
+
+const getIntl = () => [getTimezone(), getHourCycle(), getCalendar()];
 
 const detectTor = () => {
   const date = new Date();
@@ -322,6 +322,13 @@ const detectTor = () => {
   return false;
 };
 
+// const getTimezoneOffset = () => ({
+//   key: 'timezoneOffset',
+//   title: 'Timezone offset',
+//   value: new Date().getTimezoneOffset(),
+//   issues: [],
+// });
+
 // const getTor = () => ({
 //   key: 'tor',
 //   title: 'Tor browser',

From 49136b199654e73c07e218f61553baeab065da36 Mon Sep 17 00:00:00 2001
From: z0ccc <z0cccccccc@gmail.com>
Date: Tue, 14 Sep 2021 20:44:02 -0400
Subject: [PATCH 26/54] Added issues popup

---
 frontend/package.json               |  1 +
 frontend/src/components/TableRow.js | 85 ++++++++++++++++++++++-------
 frontend/src/styles/App.css         |  2 +-
 frontend/yarn.lock                  | 29 +++++++++-
 4 files changed, 94 insertions(+), 23 deletions(-)

diff --git a/frontend/package.json b/frontend/package.json
index b36d4b4..8c267e1 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -15,6 +15,7 @@
     "html-react-parser": "^1.2.8",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
+    "react-modal": "^3.14.3",
     "react-scripts": "4.0.3",
     "react-tsparticles": "^1.28.0",
     "react-webworker": "^2.1.0",
diff --git a/frontend/src/components/TableRow.js b/frontend/src/components/TableRow.js
index 63b8b96..fe45a14 100644
--- a/frontend/src/components/TableRow.js
+++ b/frontend/src/components/TableRow.js
@@ -1,6 +1,10 @@
+/* eslint-disable react/button-has-type */
+/* eslint-disable react/jsx-indent-props */
+/* eslint-disable no-return-assign */
 /* eslint-disable no-unused-vars */
 import parse from 'html-react-parser';
 import { useState, useEffect } from 'react';
+import Modal from 'react-modal';
 import {
   checkNavigatorProperties,
   checkWebWorker,
@@ -9,9 +13,35 @@ import {
 import { ReactComponent as XCircle } from '../images/xCircle.svg';
 import { ReactComponent as CheckCircle } from '../images/checkCircle.svg';
 
+const customStyles = {
+  content: {
+    top: '50%',
+    left: '50%',
+    right: 'auto',
+    bottom: 'auto',
+    marginRight: '-50%',
+    transform: 'translate(-50%, -50%)',
+  },
+};
+
+Modal.setAppElement('#root');
+
 const TableRow = ({ item }) => {
   const [workerData, setWorkerData] = useState('');
   const [issues, setIssues] = useState(false);
+  const [modalIsOpen, setIsOpen] = useState(false);
+
+  function openModal() {
+    if (issues) setIsOpen(true);
+  }
+
+  function afterOpenModal() {
+    // references are now sync'd and can be accessed.
+  }
+
+  function closeModal() {
+    setIsOpen(false);
+  }
 
   useEffect(() => {
     if (item.issues.filter(Boolean).length !== 0) {
@@ -27,27 +57,40 @@ const TableRow = ({ item }) => {
   }, [workerData]);
 
   return (
-    <tr className={issues ? 'issue' : ''}>
-      <td>{item.key}</td>
-      <td>{item.value}</td>
-      <td>
-        {issues ? (
-          <XCircle className="circleButton" />
-        ) : (
-          // <>
-          //   {item.issues.map((ele, index) => (
-          //     <div className="newline" key={index}>
-          //       {ele}
-          //     </div>
-          //   ))}
-          //   <div className="newline">
-          //     {workerData && <>{`Did not match web worker (${workerData})`}</>}
-          //   </div>
-          // </>
-          <CheckCircle className="circleButton" />
-        )}
-      </td>
-    </tr>
+    <>
+      <tr className={issues ? 'issue' : ''} onClick={openModal}>
+        <td>{item.key}</td>
+        <td>{item.value}</td>
+        <td>
+          {issues ? (
+            <>
+              <XCircle className="circleButton" />
+            </>
+          ) : (
+            <CheckCircle className="circleButton" />
+          )}
+        </td>
+      </tr>
+      <Modal
+        isOpen={modalIsOpen}
+        onAfterOpen={afterOpenModal}
+        onRequestClose={closeModal}
+        style={customStyles}
+        contentLabel="Example Modal"
+      >
+        <button onClick={closeModal}>close</button>
+        <>
+          {item.issues.map((ele, index) => (
+            <div className="newline" key={index}>
+              {ele}
+            </div>
+          ))}
+          <div className="newline">
+            {workerData && <>{`Did not match web worker (${workerData})`}</>}
+          </div>
+        </>
+      </Modal>
+    </>
   );
 };
 
diff --git a/frontend/src/styles/App.css b/frontend/src/styles/App.css
index ad76799..b3bb655 100644
--- a/frontend/src/styles/App.css
+++ b/frontend/src/styles/App.css
@@ -148,7 +148,7 @@ td {
   padding: 12px;
 }
 
-td:first-letter {
+td:nth-child(2):first-letter {
   text-transform: uppercase;
 }
 
diff --git a/frontend/yarn.lock b/frontend/yarn.lock
index eff3e31..3585fcc 100644
--- a/frontend/yarn.lock
+++ b/frontend/yarn.lock
@@ -4714,6 +4714,11 @@ execa@^4.0.0:
     signal-exit "^3.0.2"
     strip-final-newline "^2.0.0"
 
+exenv@^1.2.0:
+  version "1.2.2"
+  resolved "https://registry.yarnpkg.com/exenv/-/exenv-1.2.2.tgz#2ae78e85d9894158670b03d47bec1f03bd91bb9d"
+  integrity sha1-KueOhdmJQVhnCwPUe+wfA72Ru50=
+
 exit@^0.1.2:
   version "0.1.2"
   resolved "https://registry.npmjs.org/exit/-/exit-0.1.2.tgz"
@@ -7006,7 +7011,7 @@ loglevel@^1.6.8:
   resolved "https://registry.npmjs.org/loglevel/-/loglevel-1.7.1.tgz"
   integrity sha512-Hesni4s5UkWkwCGJMQGAh71PaLUmKFM60dHvq0zi/vDhhrzuk+4GgNbTXJ12YYQJn6ZKBDNIjYcuQGKudvqrIw==
 
-loose-envify@^1.1.0, loose-envify@^1.4.0:
+loose-envify@^1.0.0, loose-envify@^1.1.0, loose-envify@^1.4.0:
   version "1.4.0"
   resolved "https://registry.npmjs.org/loose-envify/-/loose-envify-1.4.0.tgz"
   integrity sha512-lyuxPGr/Wfhrlem2CL/UcnUc1zcqKAImBDzukY7Y5F/yQiNdko6+fRLevlw1HgMySw7f611UIY408EtxRSoK3Q==
@@ -9049,6 +9054,21 @@ react-is@^17.0.1:
   resolved "https://registry.npmjs.org/react-is/-/react-is-17.0.1.tgz"
   integrity sha512-NAnt2iGDXohE5LI7uBnLnqvLQMtzhkiAOLXTmv+qnF9Ky7xAPcX8Up/xWIhxvLVGJvuLiNc4xQLtuqDRzb4fSA==
 
+react-lifecycles-compat@^3.0.0:
+  version "3.0.4"
+  resolved "https://registry.yarnpkg.com/react-lifecycles-compat/-/react-lifecycles-compat-3.0.4.tgz#4f1a273afdfc8f3488a8c516bfda78f872352362"
+  integrity sha512-fBASbA6LnOU9dOU2eW7aQ8xmYBSXUIWr+UmF9b1efZBazGNO+rcXT/icdKnYm2pTwcRylVUYwW7H1PHfLekVzA==
+
+react-modal@^3.14.3:
+  version "3.14.3"
+  resolved "https://registry.yarnpkg.com/react-modal/-/react-modal-3.14.3.tgz#7eb7c5ec85523e5843e2d4737cc17fc3f6aeb1c0"
+  integrity sha512-+C2KODVKyu20zHXPJxfOOcf571L1u/EpFlH+oS/3YDn8rgVE51QZuxuuIwabJ8ZFnOEHaD+r6XNjqwtxZnXO0g==
+  dependencies:
+    exenv "^1.2.0"
+    prop-types "^15.7.2"
+    react-lifecycles-compat "^3.0.0"
+    warning "^4.0.3"
+
 react-property@1.0.1:
   version "1.0.1"
   resolved "https://registry.yarnpkg.com/react-property/-/react-property-1.0.1.tgz#4ae4211557d0a0ae050a71aa8ad288c074bea4e6"
@@ -11015,6 +11035,13 @@ walker@^1.0.7, walker@~1.0.5:
   dependencies:
     makeerror "1.0.x"
 
+warning@^4.0.3:
+  version "4.0.3"
+  resolved "https://registry.yarnpkg.com/warning/-/warning-4.0.3.tgz#16e9e077eb8a86d6af7d64aa1e05fd85b4678ca3"
+  integrity sha512-rpJyN222KWIvHJ/F53XSZv0Zl/accqHR8et1kpaMTD/fLCRxtV8iX8czMzY7sVZupTI3zcUTg8eycS2kNF9l6w==
+  dependencies:
+    loose-envify "^1.0.0"
+
 watchpack-chokidar2@^2.0.1:
   version "2.0.1"
   resolved "https://registry.yarnpkg.com/watchpack-chokidar2/-/watchpack-chokidar2-2.0.1.tgz#38500072ee6ece66f3769936950ea1771be1c957"

From 75e3c33ba254128235e41dc03e6032d82182505b Mon Sep 17 00:00:00 2001
From: z0ccc <z0cccccccc@gmail.com>
Date: Wed, 15 Sep 2021 11:32:20 -0400
Subject: [PATCH 27/54] Switch intl block

---
 frontend/src/components/IntlBlock.js |  6 ++--
 frontend/src/components/TableRow.js  | 12 +++----
 frontend/src/components/main.js      | 53 +++++++++-------------------
 frontend/src/styles/App.css          |  6 ++++
 4 files changed, 32 insertions(+), 45 deletions(-)

diff --git a/frontend/src/components/IntlBlock.js b/frontend/src/components/IntlBlock.js
index e8dd348..651b9be 100644
--- a/frontend/src/components/IntlBlock.js
+++ b/frontend/src/components/IntlBlock.js
@@ -8,7 +8,9 @@ import { ReactComponent as CheckCircle } from '../images/checkCircle.svg';
 const DateBlock = () => (
   <ScanBlock>
     <h1>Intl</h1>
-    <div className="tableWrap">
+    <Table type="navigator" data={getIntl()} />
+
+    {/* <div className="tableWrap">
       <table>
         {Object.entries(Intl.DateTimeFormat().resolvedOptions()).map((item) => (
           <tbody key={item[0]}>
@@ -22,7 +24,7 @@ const DateBlock = () => (
           </tbody>
         ))}
       </table>
-    </div>
+    </div> */}
     <p>
       <b>Explanation:</b> JavaScript can be used to find information about your
       hardware. This information can be used to create a fingerprint.
diff --git a/frontend/src/components/TableRow.js b/frontend/src/components/TableRow.js
index fe45a14..39a5414 100644
--- a/frontend/src/components/TableRow.js
+++ b/frontend/src/components/TableRow.js
@@ -31,17 +31,15 @@ const TableRow = ({ item }) => {
   const [issues, setIssues] = useState(false);
   const [modalIsOpen, setIsOpen] = useState(false);
 
-  function openModal() {
+  const openModal = () => {
     if (issues) setIsOpen(true);
-  }
+  };
 
-  function afterOpenModal() {
-    // references are now sync'd and can be accessed.
-  }
+  const afterOpenModal = () => {};
 
-  function closeModal() {
+  const closeModal = () => {
     setIsOpen(false);
-  }
+  };
 
   useEffect(() => {
     if (item.issues.filter(Boolean).length !== 0) {
diff --git a/frontend/src/components/main.js b/frontend/src/components/main.js
index 4a885f8..2de55a1 100644
--- a/frontend/src/components/main.js
+++ b/frontend/src/components/main.js
@@ -14,7 +14,6 @@ export {
 
 const getDeviceMemory = () => ({
   key: 'deviceMemory',
-  title: 'Device memory',
   value: navigator.deviceMemory,
   issues: [
     checkNavigatorProperties('deviceMemory'),
@@ -25,7 +24,6 @@ const getDeviceMemory = () => ({
 
 const getHardwareConcurrency = () => ({
   key: 'hardwareConcurrency',
-  title: 'Hardware Concurrency',
   value: navigator.hardwareConcurrency,
   issues: [
     checkNavigatorProperties('hardwareConcurrency'),
@@ -36,7 +34,6 @@ const getHardwareConcurrency = () => ({
 
 const getMaxTouchPoints = () => ({
   key: 'maxTouchPoints',
-  title: 'Max touchpoints',
   value: navigator.maxTouchPoints,
   issues: [
     checkNavigatorProperties('maxTouchPoints'),
@@ -47,7 +44,6 @@ const getMaxTouchPoints = () => ({
 
 const getPlatform = () => ({
   key: 'platform',
-  title: 'Platform',
   value: navigator.platform,
   issues: [
     checkNavigatorProperties('platform'),
@@ -58,7 +54,6 @@ const getPlatform = () => ({
 
 const getUserAgent = () => ({
   key: 'userAgent',
-  title: 'User agent',
   value: navigator.userAgent,
   issues: [
     checkNavigatorProperties('userAgent'),
@@ -69,7 +64,6 @@ const getUserAgent = () => ({
 
 const getLanguage = () => ({
   key: 'language',
-  title: 'Language',
   value: navigator.language,
   issues: [
     checkNavigatorProperties('language'),
@@ -80,7 +74,6 @@ const getLanguage = () => ({
 
 const getLanguages = () => ({
   key: 'languages',
-  title: 'Languages',
   value: navigator.languages,
   issues: [
     checkNavigatorProperties('languages'),
@@ -91,7 +84,6 @@ const getLanguages = () => ({
 
 const getCookieEnabled = () => ({
   key: 'cookieEnabled',
-  title: 'Cookies enabled',
   value: navigator.cookieEnabled ? 'True' : 'False',
   issues: [
     checkNavigatorProperties('cookieEnabled'),
@@ -102,7 +94,6 @@ const getCookieEnabled = () => ({
 
 const getDoNotTrack = () => ({
   key: 'doNotTrack',
-  title: 'Do not track header',
   value: navigator.doNotTrack ? 'True' : 'False',
   issues: [
     checkNavigatorProperties('doNotTrack'),
@@ -113,7 +104,6 @@ const getDoNotTrack = () => ({
 
 const getWebDriver = () => ({
   key: 'webdriver',
-  title: 'Webdriver',
   value: navigator.webdriver ? 'True' : 'False',
   issues: [
     checkNavigatorProperties('webdriver'),
@@ -124,7 +114,6 @@ const getWebDriver = () => ({
 
 const getPlugins = () => ({
   key: 'plugins',
-  title: 'Plugins',
   value: sortPlugins(navigator.plugins),
   issues: [
     checkNavigatorProperties('plugins'),
@@ -135,7 +124,6 @@ const getPlugins = () => ({
 
 const getVendor = () => ({
   key: 'vendor',
-  title: 'Vendor',
   value: navigator.vendor,
   issues: [
     checkNavigatorProperties('vendor'),
@@ -146,7 +134,6 @@ const getVendor = () => ({
 
 const getAppVersion = () => ({
   key: 'appVersion',
-  title: 'App Version',
   value: navigator.appVersion,
   issues: [
     checkNavigatorProperties('appVersion'),
@@ -157,7 +144,6 @@ const getAppVersion = () => ({
 
 const getProductSub = () => ({
   key: 'productSub',
-  title: 'Product sub',
   value: navigator.productSub,
   issues: [
     checkNavigatorProperties('productSub'),
@@ -168,7 +154,6 @@ const getProductSub = () => ({
 
 const getWidth = () => ({
   key: 'width',
-  title: 'Width',
   value: window.screen.width,
   issues: [
     checkScreenProperties('width'),
@@ -180,7 +165,6 @@ const getWidth = () => ({
 
 const getOuterWidth = () => ({
   key: 'outerWidth',
-  title: 'Outer width',
   value: window.outerWidth,
   // issues: checkWindowProperties('outerWidth'),
   issues: [],
@@ -188,7 +172,6 @@ const getOuterWidth = () => ({
 
 const getAvailWidth = () => ({
   key: 'availWidth',
-  title: 'Avail width',
   value: window.screen.availWidth,
   issues: [
     checkScreenProperties('availWidth'),
@@ -200,7 +183,6 @@ const getAvailWidth = () => ({
 
 const getHeight = () => ({
   key: 'height',
-  title: 'Height',
   value: window.screen.height,
   issues: [
     checkScreenProperties('height'),
@@ -211,7 +193,6 @@ const getHeight = () => ({
 
 const getOuterHeight = () => ({
   key: 'outerHeight',
-  title: 'Outer height',
   value: window.outerHeight,
   // issues: checkWindowProperties('outerHeight'),
   issues: [],
@@ -219,7 +200,6 @@ const getOuterHeight = () => ({
 
 const getAvailHeight = () => ({
   key: 'availHeight',
-  title: 'Avail height',
   value: window.screen.availHeight,
   issues: [
     checkScreenProperties('availHeight'),
@@ -231,7 +211,6 @@ const getAvailHeight = () => ({
 
 const getPixelDepth = () => ({
   key: 'pixelDepth',
-  title: 'Pixel depth',
   value: window.screen.pixelDepth,
   issues: [
     checkScreenProperties('pixelDepth'),
@@ -242,7 +221,6 @@ const getPixelDepth = () => ({
 
 const getColorDepth = () => ({
   key: 'colorDepth',
-  title: 'Color depth',
   value: window.screen.colorDepth,
   issues: [
     checkScreenProperties('colorDepth'),
@@ -286,28 +264,31 @@ const getScreen = () => [
 //   issues: [],
 // });
 
+const getLocale = () => ({
+  key: 'locale',
+  value: Intl.DateTimeFormat().resolvedOptions().locale,
+  issues: [],
+});
+
 const getTimezone = () => ({
   key: 'timezone',
-  title: 'Timezone',
   value: Intl.DateTimeFormat().resolvedOptions().timeZone,
   issues: [],
 });
 
-const getHourCycle = () => ({
-  key: 'hourCycle',
-  title: 'Hour cycle',
-  value: Intl.DateTimeFormat().resolvedOptions().hourCycle,
-  issues: [],
-});
+// const getHourCycle = () => ({
+//   key: 'hourCycle',
+//   value: Intl.DateTimeFormat().resolvedOptions().hourCycle,
+//   issues: [],
+// });
 
-const getCalendar = () => ({
-  key: 'calendar',
-  title: 'Calendar',
-  value: Intl.DateTimeFormat().resolvedOptions().calendar,
-  issues: [],
-});
+// const getCalendar = () => ({
+//   key: 'calendar',
+//   value: Intl.DateTimeFormat().resolvedOptions().calendar,
+//   issues: [],
+// });
 
-const getIntl = () => [getTimezone(), getHourCycle(), getCalendar()];
+const getIntl = () => [getLocale(), getTimezone()];
 
 const detectTor = () => {
   const date = new Date();
diff --git a/frontend/src/styles/App.css b/frontend/src/styles/App.css
index b3bb655..1976c80 100644
--- a/frontend/src/styles/App.css
+++ b/frontend/src/styles/App.css
@@ -4,6 +4,7 @@
   --text: #4b5563;
   --border: #ddd;
   --issueBackground: #f8d7da;
+  --issueHover: #f4c1c6;
   --issueBorder: #f5c6cb;
   --issueText: #721c24;
 }
@@ -221,6 +222,11 @@ input[type='text'] {
   background-color: var(--issueBackground);
   color: var(--issueText);
   border: 1px solid var(--issueBorder);
+  cursor: pointer;
+}
+
+.issue:hover {
+  background-color: var(--issueHover);
 }
 
 .newline {

From c2633c1e50ead2fa3e740adccc32fb55d8f506af Mon Sep 17 00:00:00 2001
From: z0ccc <z0cccccccc@gmail.com>
Date: Tue, 21 Sep 2021 21:10:45 -0400
Subject: [PATCH 28/54] Updated meta tags

---
 frontend/public/index.html            | 17 ++++++++++++++++-
 frontend/src/components/MainColumn.js |  2 +-
 frontend/src/styles/App.css           |  1 +
 3 files changed, 18 insertions(+), 2 deletions(-)

diff --git a/frontend/public/index.html b/frontend/public/index.html
index 4c641ef..3a882cf 100644
--- a/frontend/public/index.html
+++ b/frontend/public/index.html
@@ -22,8 +22,23 @@
     <meta name="theme-color" content="#000000" />
     <meta
       name="description"
-      content="Web site created using create-react-app"
+      content="Vytal shows you what traces your browser leaves behind while surfing the web."
     />
+    <meta name="author" content="z0ccc" />
+    <meta property="og:title" content="Vytal" />
+    <meta property="og:url" content="https://vytal.io" />
+    <meta property="og:img" content="https://vytal.io/vytal.png" />
+    <meta
+      property="og:description"
+      content="Vytal shows you what traces your browser leaves behind while surfing the web."
+    />
+    <meta name="twitter:card" content="summary_large_image" />
+    <meta name="twitter:title" content="Vytal" />
+    <meta
+      name="twitter:description"
+      content="Vytal shows you what traces your browser leaves behind while surfing the web."
+    />
+    <meta name="twitter:image" content="https://vytal.io/vytal.png" />
     <link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
     <title>Vytal</title>
   </head>
diff --git a/frontend/src/components/MainColumn.js b/frontend/src/components/MainColumn.js
index d06c105..ec4862e 100644
--- a/frontend/src/components/MainColumn.js
+++ b/frontend/src/components/MainColumn.js
@@ -9,7 +9,7 @@ const MainColumn = () => {
     <div className="centerBlockOuter">
       <div className="centerBlockInner">
         <Logo />
-        {scan ? <ScanBlocks /> : <StartBlock scan={scan} setScan={setScan} />}
+        {scan ? <ScanBlocks /> : <StartBlock setScan={setScan} />}
       </div>
     </div>
   );
diff --git a/frontend/src/styles/App.css b/frontend/src/styles/App.css
index 1976c80..34e0fda 100644
--- a/frontend/src/styles/App.css
+++ b/frontend/src/styles/App.css
@@ -118,6 +118,7 @@ h2 {
   margin: 24px 0 0 0;
   font-family: inherit;
   font-size: inherit;
+  -webkit-appearance: none;
 }
 
 #scanButton:hover {

From 8f075645ddbb495f68b14b188e7f28148648c076 Mon Sep 17 00:00:00 2001
From: z0ccc <z0cccccccc@gmail.com>
Date: Sat, 25 Sep 2021 22:17:25 -0400
Subject: [PATCH 29/54] Removed particles background

---
 frontend/package.json          |  1 -
 frontend/src/components/App.js |  4 +-
 frontend/src/particles.json    | 73 ----------------------------------
 frontend/src/styles/App.css    |  4 +-
 frontend/yarn.lock             | 21 ----------
 5 files changed, 3 insertions(+), 100 deletions(-)
 delete mode 100644 frontend/src/particles.json

diff --git a/frontend/package.json b/frontend/package.json
index 8c267e1..5f24c63 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -17,7 +17,6 @@
     "react-dom": "^17.0.2",
     "react-modal": "^3.14.3",
     "react-scripts": "4.0.3",
-    "react-tsparticles": "^1.28.0",
     "react-webworker": "^2.1.0",
     "tslib": "^2.2.0"
   },
diff --git a/frontend/src/components/App.js b/frontend/src/components/App.js
index 41c43de..f062a95 100644
--- a/frontend/src/components/App.js
+++ b/frontend/src/components/App.js
@@ -1,5 +1,3 @@
-import Particles from 'react-tsparticles';
-import particlesOptions from '../particles.json';
 import Github from './Github';
 import MainColumn from './MainColumn';
 import '../styles/App.css';
@@ -7,7 +5,7 @@ import '../styles/App.css';
 const App = () => (
   <div className="App">
     <Github />
-    <Particles options={particlesOptions} />
+    <div className="background" />
     <MainColumn />
   </div>
 );
diff --git a/frontend/src/particles.json b/frontend/src/particles.json
deleted file mode 100644
index f79086e..0000000
--- a/frontend/src/particles.json
+++ /dev/null
@@ -1,73 +0,0 @@
-{
-  "fpsLimit": 30,
-  "interactivity": {
-    "detectsOn": "window",
-    "events": {
-      "onClick": {
-        "enable": false,
-        "mode": "push"
-      },
-      "onHover": {
-        "enable": true,
-        "mode": "bubble"
-      },
-      "resize": true
-    },
-    "modes": {
-      "bubble": {
-        "distance": 150,
-        "duration": 2,
-        "opacity": 0.5,
-        "size": 15
-      },
-      "push": {
-        "quantity": 4
-      },
-      "repulse": {
-        "distance": 200,
-        "duration": 0.4
-      }
-    }
-  },
-  "particles": {
-    "color": {
-      "value": "#ffffff"
-    },
-    "links": {
-      "color": "#ffffff",
-      "distance": 150,
-      "enable": true,
-      "opacity": 0.2,
-      "width": 1
-    },
-    "collisions": {
-      "enable": true
-    },
-    "move": {
-      "direction": "none",
-      "enable": true,
-      "outMode": "bounce",
-      "random": false,
-      "speed": 0.2,
-      "straight": false
-    },
-    "number": {
-      "density": {
-        "enable": true,
-        "value_area": 800
-      },
-      "value": 70
-    },
-    "opacity": {
-      "value": 0.4
-    },
-    "shape": {
-      "type": "circle"
-    },
-    "size": {
-      "random": true,
-      "value": 5
-    }
-  },
-  "detectRetina": true
-}
diff --git a/frontend/src/styles/App.css b/frontend/src/styles/App.css
index 34e0fda..1feff72 100644
--- a/frontend/src/styles/App.css
+++ b/frontend/src/styles/App.css
@@ -15,11 +15,10 @@
   flex-direction: column;
 }
 
-#tsparticles {
+.background {
   position: fixed;
   width: 100%;
   height: 100%;
-  z-index: -1;
   background: rgb(87, 35, 117);
   background: linear-gradient(
     165deg,
@@ -27,6 +26,7 @@
     rgba(148, 62, 197, 1) 55%,
     rgba(211, 176, 231, 1) 100%
   );
+  z-index: -1;
 }
 
 .github {
diff --git a/frontend/yarn.lock b/frontend/yarn.lock
index 3585fcc..b4f7e82 100644
--- a/frontend/yarn.lock
+++ b/frontend/yarn.lock
@@ -7964,11 +7964,6 @@ path-type@^4.0.0:
   resolved "https://registry.npmjs.org/path-type/-/path-type-4.0.0.tgz"
   integrity sha512-gDKb8aZMDeD/tZWs9P6+q0J9Mwkdl6xMV8TjnGP3qJVJ06bdMgkbBlLU8IdfOsIsFz2BW1rNVT3XuNEl8zPAvw==
 
-pathseg@^1.2.0:
-  version "1.2.0"
-  resolved "https://registry.npmjs.org/pathseg/-/pathseg-1.2.0.tgz"
-  integrity sha512-+pQS7lTaoVIXhaCW7R3Wd/165APzZHWzYVqe7dxzdupxQwebgpBaCmf0/XZwmoA/rkDq3qvzO0qv4d5oFVrBRw==
-
 pbkdf2@^3.0.3:
   version "3.1.2"
   resolved "https://registry.yarnpkg.com/pbkdf2/-/pbkdf2-3.1.2.tgz#dd822aa0887580e52f1a039dc3eda108efae3075"
@@ -9145,15 +9140,6 @@ react-scripts@4.0.3:
   optionalDependencies:
     fsevents "^2.1.3"
 
-react-tsparticles@^1.28.0:
-  version "1.28.0"
-  resolved "https://registry.npmjs.org/react-tsparticles/-/react-tsparticles-1.28.0.tgz"
-  integrity sha512-3GSvD/1sHlpyhpzdWcP/uSy5AeoEKr+9ZZjaHGubCHualpSu2UilNunpw49J5AQq6AzsP4WFGI9bVulj3Uw0iw==
-  dependencies:
-    fast-deep-equal "^3.1.3"
-    tslib "^2.2.0"
-    tsparticles "^1.28.0"
-
 react-webworker@^2.1.0:
   version "2.1.0"
   resolved "https://registry.yarnpkg.com/react-webworker/-/react-webworker-2.1.0.tgz#6bfe5d74d3f3e5bae89f316b8760b3e8cc551420"
@@ -10667,13 +10653,6 @@ tslib@^2.0.3, tslib@^2.2.0:
   resolved "https://registry.npmjs.org/tslib/-/tslib-2.3.0.tgz"
   integrity sha512-N82ooyxVNm6h1riLCoyS9e3fuJ3AMG2zIZs2Gd1ATcSFjSA23Q0fzjjZeh0jbJvWVDZ0cJT8yaNNaaXHzueNjg==
 
-tsparticles@^1.28.0:
-  version "1.28.0"
-  resolved "https://registry.npmjs.org/tsparticles/-/tsparticles-1.28.0.tgz"
-  integrity sha512-JDKNxuG99J64vF6cTfQ3S+lnhwK+LKHJYn46j9SX2Mae0gog34T0fm6cM0b1CRkB/MeCJ3mF0KaLRh5OdSEV1Q==
-  optionalDependencies:
-    pathseg "^1.2.0"
-
 tsutils@^3.17.1:
   version "3.20.0"
   resolved "https://registry.npmjs.org/tsutils/-/tsutils-3.20.0.tgz"

From 5fa27e0906e2b5ace33b9399db027893079e54e6 Mon Sep 17 00:00:00 2001
From: z0ccc <z0cccccccc@gmail.com>
Date: Sun, 26 Sep 2021 01:07:19 -0400
Subject: [PATCH 30/54] Removed startBlock

---
 frontend/src/components/MainColumn.js | 19 +++++++------------
 1 file changed, 7 insertions(+), 12 deletions(-)

diff --git a/frontend/src/components/MainColumn.js b/frontend/src/components/MainColumn.js
index ec4862e..c5eebc9 100644
--- a/frontend/src/components/MainColumn.js
+++ b/frontend/src/components/MainColumn.js
@@ -1,17 +1,12 @@
-import { useState } from 'react';
 import Logo from './Logo';
-import StartBlock from './StartBlock';
 import ScanBlocks from './ScanBlocks';
 
-const MainColumn = () => {
-  const [scan, setScan] = useState(false);
-  return (
-    <div className="centerBlockOuter">
-      <div className="centerBlockInner">
-        <Logo />
-        {scan ? <ScanBlocks /> : <StartBlock setScan={setScan} />}
-      </div>
+const MainColumn = () => (
+  <div className="centerBlockOuter">
+    <div className="centerBlockInner">
+      <Logo />
+      <ScanBlocks />
     </div>
-  );
-};
+  </div>
+);
 export default MainColumn;

From 6f3cac484840be30316689bf6bc8f271942ba1cd Mon Sep 17 00:00:00 2001
From: z0ccc <z0cccccccc@gmail.com>
Date: Sun, 26 Sep 2021 14:41:00 -0400
Subject: [PATCH 31/54] Changed from 1 column to 2

---
 frontend/src/components/MainColumn.js |  8 ++++----
 frontend/src/components/ScanBlocks.js | 20 ++++++++++++--------
 frontend/src/styles/App.css           | 25 +++++++++++--------------
 3 files changed, 27 insertions(+), 26 deletions(-)

diff --git a/frontend/src/components/MainColumn.js b/frontend/src/components/MainColumn.js
index c5eebc9..1ab1a04 100644
--- a/frontend/src/components/MainColumn.js
+++ b/frontend/src/components/MainColumn.js
@@ -2,11 +2,11 @@ import Logo from './Logo';
 import ScanBlocks from './ScanBlocks';
 
 const MainColumn = () => (
-  <div className="centerBlockOuter">
-    <div className="centerBlockInner">
-      <Logo />
+  <>
+    <Logo />
+    <div className="centerBlockOuter">
       <ScanBlocks />
     </div>
-  </div>
+  </>
 );
 export default MainColumn;
diff --git a/frontend/src/components/ScanBlocks.js b/frontend/src/components/ScanBlocks.js
index b43c45c..703d4c5 100644
--- a/frontend/src/components/ScanBlocks.js
+++ b/frontend/src/components/ScanBlocks.js
@@ -14,14 +14,18 @@ import FiltersBlock from './FiltersBlock';
 
 const ScanBlocks = () => (
   <>
-    <IntlBlock />
-    <FingerprintBlock />
-    <LocationBlock />
-    <ConnectionBlock />
-    <NavigatorBlock />
-    <UserAgentBlock />
-    <ScreenBlock />
-    <OtherBlock />
+    <div className="centerBlockInner">
+      <IntlBlock />
+      <FingerprintBlock />
+      <NavigatorBlock />
+      <UserAgentBlock />
+    </div>
+    <div className="centerBlockInner">
+      <LocationBlock />
+      <ConnectionBlock />
+      <ScreenBlock />
+      <OtherBlock />
+    </div>
     {/* <FingerprintBlock />
     <LocationBlock />
     <ConnectionBlock />
diff --git a/frontend/src/styles/App.css b/frontend/src/styles/App.css
index 1feff72..5b7d00c 100644
--- a/frontend/src/styles/App.css
+++ b/frontend/src/styles/App.css
@@ -36,28 +36,25 @@
   right: 12px;
 }
 
-.centerBlockOuter {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  flex: 1 0 auto;
-  margin: 0 18px;
-}
-
-.centerBlockInner {
-  width: 650px;
-  margin: 24px 0 0 0;
-}
-
 .logoWrap {
   display: flex;
   align-items: center;
   justify-content: center;
+  margin: 13px 0;
 }
 
 .logo {
   width: 270px;
-  margin: 0 0 14px 0;
+}
+
+.centerBlockOuter {
+  display: flex;
+  justify-content: center;
+  gap: 24px;
+}
+
+.centerBlockInner {
+  width: 450px;
 }
 
 .contentBlock {

From fcafd1f7363a46aa43522f6d7f6420842b00208a Mon Sep 17 00:00:00 2001
From: z0ccc <z0cccccccc@gmail.com>
Date: Mon, 27 Sep 2021 12:10:31 -0400
Subject: [PATCH 32/54] Added utils folder and screen.js

---
 frontend/package.json                  |   1 +
 frontend/src/components/Github.js      |  20 ++--
 frontend/src/components/ScanBlocks.js  |   2 +-
 frontend/src/components/ScreenBlock.js |   2 +-
 frontend/src/components/main.js        | 156 -------------------------
 frontend/src/images/github.svg         |   5 -
 frontend/src/styles/App.css            |   9 +-
 frontend/src/utils/screen.js           | 131 +++++++++++++++++++++
 frontend/yarn.lock                     |  12 ++
 9 files changed, 160 insertions(+), 178 deletions(-)
 delete mode 100644 frontend/src/images/github.svg
 create mode 100644 frontend/src/utils/screen.js

diff --git a/frontend/package.json b/frontend/package.json
index 5f24c63..acf0bcc 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -15,6 +15,7 @@
     "html-react-parser": "^1.2.8",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
+    "react-github-btn": "^1.2.1",
     "react-modal": "^3.14.3",
     "react-scripts": "4.0.3",
     "react-webworker": "^2.1.0",
diff --git a/frontend/src/components/Github.js b/frontend/src/components/Github.js
index cc521b7..7557f28 100644
--- a/frontend/src/components/Github.js
+++ b/frontend/src/components/Github.js
@@ -1,15 +1,15 @@
-import { ReactComponent as GithubImg } from '../images/github.svg';
+import GitHubButton from 'react-github-btn';
 
 const Github = () => (
-  <a
-    href="https://github.com/z0ccc/Vytal"
-    className="github"
-    target="_blank"
-    rel="noreferrer"
-    alt="Link to Github page"
-  >
-    <GithubImg />
-  </a>
+  <div className="gitHubButton">
+    <GitHubButton
+      href="https://github.com/z0ccc/Vytal"
+      data-color-scheme="no-preference: light; light: light; dark: light;"
+      aria-label="Star z0ccc/Vytal on GitHub"
+    >
+      Star
+    </GitHubButton>
+  </div>
 );
 
 export default Github;
diff --git a/frontend/src/components/ScanBlocks.js b/frontend/src/components/ScanBlocks.js
index 703d4c5..3a7b834 100644
--- a/frontend/src/components/ScanBlocks.js
+++ b/frontend/src/components/ScanBlocks.js
@@ -15,10 +15,10 @@ import FiltersBlock from './FiltersBlock';
 const ScanBlocks = () => (
   <>
     <div className="centerBlockInner">
-      <IntlBlock />
       <FingerprintBlock />
       <NavigatorBlock />
       <UserAgentBlock />
+      <IntlBlock />
     </div>
     <div className="centerBlockInner">
       <LocationBlock />
diff --git a/frontend/src/components/ScreenBlock.js b/frontend/src/components/ScreenBlock.js
index 1bcef8a..007ba86 100644
--- a/frontend/src/components/ScreenBlock.js
+++ b/frontend/src/components/ScreenBlock.js
@@ -1,6 +1,6 @@
 import ScanBlock from './ScanBlock';
 import Table from './Table';
-import { getScreen } from './main';
+import getScreen from '../utils/screen';
 
 const ScreenBlock = () => (
   <ScanBlock>
diff --git a/frontend/src/components/main.js b/frontend/src/components/main.js
index 2de55a1..d727c65 100644
--- a/frontend/src/components/main.js
+++ b/frontend/src/components/main.js
@@ -6,8 +6,6 @@ export {
   getNavigator,
   checkNavigatorProperties,
   checkWebWorker,
-  getScreen,
-  checkScreenProperties,
   detectTor,
   getIntl,
 };
@@ -142,93 +140,6 @@ const getAppVersion = () => ({
   ],
 });
 
-const getProductSub = () => ({
-  key: 'productSub',
-  value: navigator.productSub,
-  issues: [
-    checkNavigatorProperties('productSub'),
-    checkNavigatorValue('productSub'),
-    checkNavigatorPrototype('productSub'),
-  ],
-});
-
-const getWidth = () => ({
-  key: 'width',
-  value: window.screen.width,
-  issues: [
-    checkScreenProperties('width'),
-    checkScreenValue('width'),
-    checkScreenPrototype('width'),
-    checkWidth(),
-  ],
-});
-
-const getOuterWidth = () => ({
-  key: 'outerWidth',
-  value: window.outerWidth,
-  // issues: checkWindowProperties('outerWidth'),
-  issues: [],
-});
-
-const getAvailWidth = () => ({
-  key: 'availWidth',
-  value: window.screen.availWidth,
-  issues: [
-    checkScreenProperties('availWidth'),
-    checkScreenValue('availWidth'),
-    checkScreenPrototype('availWidth'),
-    checkWidth(),
-  ],
-});
-
-const getHeight = () => ({
-  key: 'height',
-  value: window.screen.height,
-  issues: [
-    checkScreenProperties('height'),
-    checkScreenValue('height'),
-    checkScreenPrototype('height'),
-  ],
-});
-
-const getOuterHeight = () => ({
-  key: 'outerHeight',
-  value: window.outerHeight,
-  // issues: checkWindowProperties('outerHeight'),
-  issues: [],
-});
-
-const getAvailHeight = () => ({
-  key: 'availHeight',
-  value: window.screen.availHeight,
-  issues: [
-    checkScreenProperties('availHeight'),
-    checkScreenValue('availHeight'),
-    checkScreenPrototype('availHeight'),
-    checkHeight(),
-  ],
-});
-
-const getPixelDepth = () => ({
-  key: 'pixelDepth',
-  value: window.screen.pixelDepth,
-  issues: [
-    checkScreenProperties('pixelDepth'),
-    checkScreenValue('pixelDepth'),
-    checkScreenPrototype('pixelDepth'),
-  ],
-});
-
-const getColorDepth = () => ({
-  key: 'colorDepth',
-  value: window.screen.colorDepth,
-  issues: [
-    checkScreenProperties('colorDepth'),
-    checkScreenValue('colorDepth'),
-    checkScreenPrototype('colorDepth'),
-  ],
-});
-
 const getNavigator = () => [
   getDeviceMemory(),
   getHardwareConcurrency(),
@@ -243,18 +154,6 @@ const getNavigator = () => [
   getPlugins(),
   getVendor(),
   getAppVersion(),
-  getProductSub(),
-];
-
-const getScreen = () => [
-  getWidth(),
-  getAvailWidth(),
-  getOuterWidth(),
-  getHeight(),
-  getAvailHeight(),
-  getOuterHeight(),
-  getPixelDepth(),
-  getColorDepth(),
 ];
 
 // const getDateNow = () => ({
@@ -276,18 +175,6 @@ const getTimezone = () => ({
   issues: [],
 });
 
-// const getHourCycle = () => ({
-//   key: 'hourCycle',
-//   value: Intl.DateTimeFormat().resolvedOptions().hourCycle,
-//   issues: [],
-// });
-
-// const getCalendar = () => ({
-//   key: 'calendar',
-//   value: Intl.DateTimeFormat().resolvedOptions().calendar,
-//   issues: [],
-// });
-
 const getIntl = () => [getLocale(), getTimezone()];
 
 const detectTor = () => {
@@ -305,7 +192,6 @@ const detectTor = () => {
 
 // const getTimezoneOffset = () => ({
 //   key: 'timezoneOffset',
-//   title: 'Timezone offset',
 //   value: new Date().getTimezoneOffset(),
 //   issues: [],
 // });
@@ -374,48 +260,6 @@ const checkNavigatorPrototype = (key) => {
   return null;
 };
 
-const checkScreenProperties = (key) => {
-  if (Object.getOwnPropertyDescriptor(window.screen, key) !== undefined) {
-    return 'Failed undefined properties';
-  }
-  return null;
-};
-
-const checkScreenValue = (key) => {
-  if (
-    Object.getOwnPropertyDescriptor(Screen.prototype, key).value !== undefined
-  ) {
-    return 'Failed descriptor.value undefined';
-  }
-  return null;
-};
-
-const checkScreenPrototype = (key) => {
-  try {
-    // eslint-disable-next-line no-unused-vars
-    const check = Screen.prototype[key];
-    return 'Failed Navigator.prototype';
-  } catch (err) {
-    // eslint-disable-next-line no-unused-vars
-    const check = '';
-  }
-  return null;
-};
-
-const checkWidth = () => {
-  if (window.screen.availWidth > window.screen.width) {
-    return 'Avail width is wider then width';
-  }
-  return null;
-};
-
-const checkHeight = () => {
-  if (window.screen.availHeight > window.screen.height) {
-    return 'Avail height is wider then height';
-  }
-  return null;
-};
-
 const checkWebWorker = (key, setWorkerData) => {
   let w;
   if (typeof w === 'undefined') {
diff --git a/frontend/src/images/github.svg b/frontend/src/images/github.svg
deleted file mode 100644
index bc1ce35..0000000
--- a/frontend/src/images/github.svg
+++ /dev/null
@@ -1,5 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 496 512">
-  <g fill="#fff">
-    <path d="M165.9 397.4c0 2-2.3 3.6-5.2 3.6-3.3.3-5.6-1.3-5.6-3.6 0-2 2.3-3.6 5.2-3.6 3-.3 5.6 1.3 5.6 3.6zm-31.1-4.5c-.7 2 1.3 4.3 4.3 4.9 2.6 1 5.6 0 6.2-2s-1.3-4.3-4.3-5.2c-2.6-.7-5.5.3-6.2 2.3zm44.2-1.7c-2.9.7-4.9 2.6-4.6 4.9.3 2 2.9 3.3 5.9 2.6 2.9-.7 4.9-2.6 4.6-4.6-.3-1.9-3-3.2-5.9-2.9zM244.8 8C106.1 8 0 113.3 0 252c0 110.9 69.8 205.8 169.5 239.2 12.8 2.3 17.3-5.6 17.3-12.1 0-6.2-.3-40.4-.3-61.4 0 0-70 15-84.7-29.8 0 0-11.4-29.1-27.8-36.6 0 0-22.9-15.7 1.6-15.4 0 0 24.9 2 38.6 25.8 21.9 38.6 58.6 27.5 72.9 20.9 2.3-16 8.8-27.1 16-33.7-55.9-6.2-112.3-14.3-112.3-110.5 0-27.5 7.6-41.3 23.6-58.9-2.6-6.5-11.1-33.3 2.6-67.9 20.9-6.5 69 27 69 27 20-5.6 41.5-8.5 62.8-8.5s42.8 2.9 62.8 8.5c0 0 48.1-33.6 69-27 13.7 34.7 5.2 61.4 2.6 67.9 16 17.7 25.8 31.5 25.8 58.9 0 96.5-58.9 104.2-114.8 110.5 9.2 7.9 17 22.9 17 46.4 0 33.7-.3 75.4-.3 83.6 0 6.5 4.6 14.4 17.3 12.1C428.2 457.8 496 362.9 496 252 496 113.3 383.5 8 244.8 8zM97.2 352.9c-1.3 1-1 3.3.7 5.2 1.6 1.6 3.9 2.3 5.2 1 1.3-1 1-3.3-.7-5.2-1.6-1.6-3.9-2.3-5.2-1zm-10.8-8.1c-.7 1.3.3 2.9 2.3 3.9 1.6 1 3.6.7 4.3-.7.7-1.3-.3-2.9-2.3-3.9-2-.6-3.6-.3-4.3.7zm32.4 35.6c-1.6 1.3-1 4.3 1.3 6.2 2.3 2.3 5.2 2.6 6.5 1 1.3-1.3.7-4.3-1.3-6.2-2.2-2.3-5.2-2.6-6.5-1zm-11.4-14.7c-1.6 1-1.6 3.6 0 5.9 1.6 2.3 4.3 3.3 5.6 2.3 1.6-1.3 1.6-3.9 0-6.2-1.4-2.3-4-3.3-5.6-2z"/>
-  </g>
-</svg>
\ No newline at end of file
diff --git a/frontend/src/styles/App.css b/frontend/src/styles/App.css
index 5b7d00c..a702a74 100644
--- a/frontend/src/styles/App.css
+++ b/frontend/src/styles/App.css
@@ -29,8 +29,7 @@
   z-index: -1;
 }
 
-.github {
-  width: 36px;
+.gitHubButton {
   position: fixed;
   top: 12px;
   right: 12px;
@@ -40,11 +39,11 @@
   display: flex;
   align-items: center;
   justify-content: center;
-  margin: 13px 0;
+  margin: 20px 0;
 }
 
 .logo {
-  width: 270px;
+  width: 250px;
 }
 
 .centerBlockOuter {
@@ -54,7 +53,7 @@
 }
 
 .centerBlockInner {
-  width: 450px;
+  width: 500px;
 }
 
 .contentBlock {
diff --git a/frontend/src/utils/screen.js b/frontend/src/utils/screen.js
new file mode 100644
index 0000000..7426bd0
--- /dev/null
+++ b/frontend/src/utils/screen.js
@@ -0,0 +1,131 @@
+const getWidth = () => ({
+  key: 'width',
+  value: window.screen.width,
+  issues: [
+    checkScreenProperties('width'),
+    checkScreenValue('width'),
+    checkScreenPrototype('width'),
+    checkWidth(),
+  ],
+});
+
+const getOuterWidth = () => ({
+  key: 'outerWidth',
+  value: window.outerWidth,
+  // issues: checkWindowProperties('outerWidth'),
+  issues: [],
+});
+
+const getAvailWidth = () => ({
+  key: 'availWidth',
+  value: window.screen.availWidth,
+  issues: [
+    checkScreenProperties('availWidth'),
+    checkScreenValue('availWidth'),
+    checkScreenPrototype('availWidth'),
+    checkWidth(),
+  ],
+});
+
+const getHeight = () => ({
+  key: 'height',
+  value: window.screen.height,
+  issues: [
+    checkScreenProperties('height'),
+    checkScreenValue('height'),
+    checkScreenPrototype('height'),
+  ],
+});
+
+const getOuterHeight = () => ({
+  key: 'outerHeight',
+  value: window.outerHeight,
+  // issues: checkWindowProperties('outerHeight'),
+  issues: [],
+});
+
+const getAvailHeight = () => ({
+  key: 'availHeight',
+  value: window.screen.availHeight,
+  issues: [
+    checkScreenProperties('availHeight'),
+    checkScreenValue('availHeight'),
+    checkScreenPrototype('availHeight'),
+    checkHeight(),
+  ],
+});
+
+const getPixelDepth = () => ({
+  key: 'pixelDepth',
+  value: window.screen.pixelDepth,
+  issues: [
+    checkScreenProperties('pixelDepth'),
+    checkScreenValue('pixelDepth'),
+    checkScreenPrototype('pixelDepth'),
+  ],
+});
+
+const getColorDepth = () => ({
+  key: 'colorDepth',
+  value: window.screen.colorDepth,
+  issues: [
+    checkScreenProperties('colorDepth'),
+    checkScreenValue('colorDepth'),
+    checkScreenPrototype('colorDepth'),
+  ],
+});
+
+const checkScreenValue = (key) => {
+  if (
+    Object.getOwnPropertyDescriptor(Screen.prototype, key).value !== undefined
+  ) {
+    return 'Failed descriptor.value undefined';
+  }
+  return null;
+};
+
+const checkScreenPrototype = (key) => {
+  try {
+    // eslint-disable-next-line no-unused-vars
+    const check = Screen.prototype[key];
+    return 'Failed Navigator.prototype';
+  } catch (err) {
+    // eslint-disable-next-line no-unused-vars
+    const check = '';
+  }
+  return null;
+};
+
+const checkWidth = () => {
+  if (window.screen.availWidth > window.screen.width) {
+    return 'Avail width is wider then width';
+  }
+  return null;
+};
+
+const checkHeight = () => {
+  if (window.screen.availHeight > window.screen.height) {
+    return 'Avail height is wider then height';
+  }
+  return null;
+};
+
+const checkScreenProperties = (key) => {
+  if (Object.getOwnPropertyDescriptor(window.screen, key) !== undefined) {
+    return 'Failed undefined properties';
+  }
+  return null;
+};
+
+const getScreen = () => [
+  getWidth(),
+  getAvailWidth(),
+  getOuterWidth(),
+  getHeight(),
+  getAvailHeight(),
+  getOuterHeight(),
+  getPixelDepth(),
+  getColorDepth(),
+];
+
+export default getScreen;
diff --git a/frontend/yarn.lock b/frontend/yarn.lock
index b4f7e82..8b910e1 100644
--- a/frontend/yarn.lock
+++ b/frontend/yarn.lock
@@ -5205,6 +5205,11 @@ getpass@^0.1.1:
   dependencies:
     assert-plus "^1.0.0"
 
+github-buttons@^2.8.0:
+  version "2.19.1"
+  resolved "https://registry.yarnpkg.com/github-buttons/-/github-buttons-2.19.1.tgz#9703755a4da1c5b229d3f1d875c2f787efa59bd5"
+  integrity sha512-us6ZC0bFYLfBq2CkZJJRpdPP5JlB6+kWFTdw8iK3E7yoMKdoLhDkqQHelJ+39UVR2zQbfXN5gNt3cVYp4fAuXA==
+
 glob-parent@^3.1.0:
   version "3.1.0"
   resolved "https://registry.npmjs.org/glob-parent/-/glob-parent-3.1.0.tgz"
@@ -9039,6 +9044,13 @@ react-error-overlay@^6.0.9:
   resolved "https://registry.npmjs.org/react-error-overlay/-/react-error-overlay-6.0.9.tgz"
   integrity sha512-nQTTcUu+ATDbrSD1BZHr5kgSD4oF8OFjxun8uAaL8RwPBacGBNPf/yAuVVdx17N8XNzRDMrZ9XcKZHCjPW+9ew==
 
+react-github-btn@^1.2.1:
+  version "1.2.1"
+  resolved "https://registry.yarnpkg.com/react-github-btn/-/react-github-btn-1.2.1.tgz#ece93f609a4bad5e7eb9f47ae49bfaba69466dce"
+  integrity sha512-/gXD01mHAOhW0xYuNJFDn08OGjaMXOjcg6GCKVPdHvQcWzswH4aT85DLDAAJ6Zhw/71veSIH4Kx1BTBfy69SsA==
+  dependencies:
+    github-buttons "^2.8.0"
+
 react-is@^16.8.1:
   version "16.13.1"
   resolved "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz"

From 780eac5aac8b3d0cac2e1a56ade01a2b1bb0d444 Mon Sep 17 00:00:00 2001
From: z0ccc <z0cccccccc@gmail.com>
Date: Mon, 27 Sep 2021 16:10:40 -0400
Subject: [PATCH 33/54] Added connection block

---
 frontend/public/worker.js                  | 11 ++-
 frontend/src/components/ConnectionBlock.js | 42 ++++------
 frontend/src/components/LocationBlock.js   | 46 ++++-------
 frontend/src/components/ScanBlocks.js      | 66 ++++++++++------
 frontend/src/components/Table.js           | 29 +++----
 frontend/src/components/TableRow.js        | 86 +++++++--------------
 frontend/src/images/x.svg                  |  1 +
 frontend/src/utils/common.js               | 18 +++++
 frontend/src/utils/conenction.js           | 89 ++++++++++++++++++++++
 9 files changed, 225 insertions(+), 163 deletions(-)
 create mode 100644 frontend/src/images/x.svg
 create mode 100644 frontend/src/utils/common.js
 create mode 100644 frontend/src/utils/conenction.js

diff --git a/frontend/public/worker.js b/frontend/public/worker.js
index cf665fc..93b3fce 100644
--- a/frontend/public/worker.js
+++ b/frontend/public/worker.js
@@ -1,3 +1,10 @@
-onmessage = (e) => {
-  postMessage(navigator[e.data]);
+const data = {
+  locale: Intl.DateTimeFormat().resolvedOptions().locale,
+  timeZone: Intl.DateTimeFormat().resolvedOptions().timeZone,
+  timezoneOffset: new Date().getTimezoneOffset(),
+  date: new Date().toString(),
+  language: navigator.language,
+  languages: navigator.languages,
 };
+
+postMessage(data);
diff --git a/frontend/src/components/ConnectionBlock.js b/frontend/src/components/ConnectionBlock.js
index 64de5ea..aa0b993 100644
--- a/frontend/src/components/ConnectionBlock.js
+++ b/frontend/src/components/ConnectionBlock.js
@@ -1,32 +1,16 @@
-import { useState, useEffect } from 'react';
 import ScanBlock from './ScanBlock';
-import Table from './OldTable';
-import { fetchAPI, getConnection } from './mainOld';
+import Table from './Table';
+import { getConnection } from '../utils/conenction';
 
-const ConnectionBlock = () => {
-  const [data, setData] = useState('');
-  const [display, setDisplay] = useState('');
+const LocationBlock = ({ connectionData }) => (
+  <ScanBlock>
+    <h1>Connection</h1>
+    <Table data={getConnection(connectionData)} />
+    <p>
+      <b>Explanation:</b> Your IP address reveals information about your
+      connection. Using a VPN or Tor will hide your connection info.
+    </p>
+  </ScanBlock>
+);
 
-  useEffect(() => {
-    fetchAPI(setData, setDisplay);
-  }, []);
-
-  return (
-    <ScanBlock>
-      <h1>Connection</h1>
-      {display === 1 && <Table data={getConnection(data)} />}
-      {display === 0 && (
-        <div className="boxWrap">
-          Unable to fetch info. Adblock or content filter may have prevented
-          data from loading.
-        </div>
-      )}
-      <p>
-        <b>Explanation:</b> Your IP address reveals information about your
-        connection. Using a VPN or Tor will hide your connection info.
-      </p>
-    </ScanBlock>
-  );
-};
-
-export default ConnectionBlock;
+export default LocationBlock;
diff --git a/frontend/src/components/LocationBlock.js b/frontend/src/components/LocationBlock.js
index d03077e..46d090f 100644
--- a/frontend/src/components/LocationBlock.js
+++ b/frontend/src/components/LocationBlock.js
@@ -1,37 +1,17 @@
-import { useState, useEffect } from 'react';
 import ScanBlock from './ScanBlock';
-import Table from './OldTable';
-import { fetchAPI, getLocation, getMap } from './mainOld';
+import Table from './Table';
+import { getMap, getLocation } from '../utils/conenction';
 
-const LocationBlock = () => {
-  const [data, setData] = useState([]);
-  const [display, setDisplay] = useState('');
-
-  useEffect(() => {
-    fetchAPI(setData, setDisplay);
-  }, []);
-
-  return (
-    <ScanBlock>
-      <h1>Location</h1>
-      {display === 1 && (
-        <>
-          <img src={getMap(data)} alt="Map of current location" />
-          <Table data={getLocation(data)} />
-        </>
-      )}
-      {display === 0 && (
-        <div className="boxWrap">
-          Unable to fetch info. Adblock or content filter may have prevented
-          data from loading.
-        </div>
-      )}
-      <p>
-        <b>Explanation:</b> Your IP address can be used to determine your
-        location. Using a VPN or Tor will hide your true location.
-      </p>
-    </ScanBlock>
-  );
-};
+const LocationBlock = ({ connectionData, workerData }) => (
+  <ScanBlock>
+    <h1>Location</h1>
+    <img src={getMap(connectionData)} alt="Map of current location" />
+    <Table data={getLocation(connectionData, workerData)} />
+    <p>
+      <b>Explanation:</b> Your IP address can be used to determine your
+      location. Using a VPN or Tor will hide your true location.
+    </p>
+  </ScanBlock>
+);
 
 export default LocationBlock;
diff --git a/frontend/src/components/ScanBlocks.js b/frontend/src/components/ScanBlocks.js
index 3a7b834..f218d83 100644
--- a/frontend/src/components/ScanBlocks.js
+++ b/frontend/src/components/ScanBlocks.js
@@ -1,4 +1,5 @@
 /* eslint-disable no-unused-vars */
+import { useState, useEffect } from 'react';
 import UserAgentBlock from './UserAgentBlock';
 import IntlBlock from './IntlBlock';
 import OtherBlock from './OtherBlock';
@@ -11,29 +12,48 @@ import SoftwareBlock from './SoftwareBlock';
 import ConnectionBlock from './ConnectionBlock';
 import FiltersBlock from './FiltersBlock';
 // import FontsBlock from './FontsBlock';
+import { fetchAPI, getWebWorker } from '../utils/common';
 
-const ScanBlocks = () => (
-  <>
-    <div className="centerBlockInner">
-      <FingerprintBlock />
-      <NavigatorBlock />
-      <UserAgentBlock />
-      <IntlBlock />
-    </div>
-    <div className="centerBlockInner">
-      <LocationBlock />
-      <ConnectionBlock />
-      <ScreenBlock />
-      <OtherBlock />
-    </div>
-    {/* <FingerprintBlock />
-    <LocationBlock />
-    <ConnectionBlock />
-    <FiltersBlock />
-    <SoftwareBlock />
-    <HardwareBlock /> */}
-    {/* <FontsBlock /> */}
-  </>
-);
+const ScanBlocks = () => {
+  const [workerData, setWorkerData] = useState();
+  const [connectionData, setConnectionData] = useState('');
+
+  useEffect(() => {
+    getWebWorker().onmessage = (event) => {
+      setWorkerData(event.data);
+      fetchAPI(setConnectionData);
+    };
+  }, []);
+  return (
+    <>
+      {connectionData ? (
+        <>
+          <div className="centerBlockInner">
+            {/* <FingerprintBlock />
+            <NavigatorBlock />
+            <UserAgentBlock />
+            <IntlBlock /> */}
+          </div>
+          <div className="centerBlockInner">
+            <LocationBlock
+              workerData={workerData}
+              connectionData={connectionData}
+            />
+            <ConnectionBlock
+              workerData={workerData}
+              connectionData={connectionData}
+            />
+            {/* <ScreenBlock />
+            <OtherBlock /> */}
+          </div>
+        </>
+      ) : (
+        <div className="contentBlock">
+          <center>Loading...</center>
+        </div>
+      )}
+    </>
+  );
+};
 
 export default ScanBlocks;
diff --git a/frontend/src/components/Table.js b/frontend/src/components/Table.js
index 1295b6a..f0b5402 100644
--- a/frontend/src/components/Table.js
+++ b/frontend/src/components/Table.js
@@ -1,22 +1,15 @@
-/* eslint-disable no-unused-vars */
-import parse from 'html-react-parser';
-import { useState, useEffect } from 'react';
 import TableRow from './TableRow';
 
-const Table = ({ data }) => {
-  const [workerData, setWorkerData] = useState();
-
-  return (
-    <div className="tableWrap">
-      <table>
-        {data.map((item) => (
-          <tbody key={item.key}>
-            <TableRow item={item} />
-          </tbody>
-        ))}
-      </table>
-    </div>
-  );
-};
+const Table = ({ data }) => (
+  <div className="tableWrap">
+    <table>
+      {data.map((item) => (
+        <tbody key={item.key} title={item.code}>
+          <TableRow item={item} />
+        </tbody>
+      ))}
+    </table>
+  </div>
+);
 
 export default Table;
diff --git a/frontend/src/components/TableRow.js b/frontend/src/components/TableRow.js
index 39a5414..63cc417 100644
--- a/frontend/src/components/TableRow.js
+++ b/frontend/src/components/TableRow.js
@@ -1,19 +1,10 @@
-/* eslint-disable react/button-has-type */
-/* eslint-disable react/jsx-indent-props */
-/* eslint-disable no-return-assign */
-/* eslint-disable no-unused-vars */
-import parse from 'html-react-parser';
-import { useState, useEffect } from 'react';
 import Modal from 'react-modal';
-import {
-  checkNavigatorProperties,
-  checkWebWorker,
-  checkScreenProperties,
-} from './main';
+import { useState } from 'react';
 import { ReactComponent as XCircle } from '../images/xCircle.svg';
 import { ReactComponent as CheckCircle } from '../images/checkCircle.svg';
+import { ReactComponent as X } from '../images/x.svg';
 
-const customStyles = {
+const modalStyles = {
   content: {
     top: '50%',
     left: '50%',
@@ -21,74 +12,53 @@ const customStyles = {
     bottom: 'auto',
     marginRight: '-50%',
     transform: 'translate(-50%, -50%)',
+    padding: '18px',
+    border: '1px solid var(--border)',
+    borderRadius: '6px',
   },
 };
 
 Modal.setAppElement('#root');
 
 const TableRow = ({ item }) => {
-  const [workerData, setWorkerData] = useState('');
-  const [issues, setIssues] = useState(false);
+  const issues = item.issues.filter(Boolean).length !== 0;
   const [modalIsOpen, setIsOpen] = useState(false);
 
   const openModal = () => {
     if (issues) setIsOpen(true);
   };
 
-  const afterOpenModal = () => {};
-
   const closeModal = () => {
     setIsOpen(false);
   };
-
-  useEffect(() => {
-    if (item.issues.filter(Boolean).length !== 0) {
-      setIssues(true);
-    }
-    checkWebWorker(item.key, setWorkerData);
-  }, []);
-
-  useEffect(() => {
-    if (workerData !== '') {
-      setIssues(true);
-    }
-  }, [workerData]);
-
   return (
-    <>
-      <tr className={issues ? 'issue' : ''} onClick={openModal}>
-        <td>{item.key}</td>
-        <td>{item.value}</td>
-        <td>
-          {issues ? (
-            <>
-              <XCircle className="circleButton" />
-            </>
-          ) : (
-            <CheckCircle className="circleButton" />
-          )}
-        </td>
-      </tr>
+    <tr>
+      <td>{item.key}</td>
+      <td>{item.value}</td>
+      <td>
+        {issues ? (
+          <XCircle className="circleButton issueButton" onClick={openModal} />
+        ) : (
+          <CheckCircle className="circleButton" />
+        )}
+      </td>
       <Modal
         isOpen={modalIsOpen}
-        onAfterOpen={afterOpenModal}
         onRequestClose={closeModal}
-        style={customStyles}
-        contentLabel="Example Modal"
+        style={modalStyles}
+        contentLabel="Issues Modal"
       >
-        <button onClick={closeModal}>close</button>
-        <>
-          {item.issues.map((ele, index) => (
-            <div className="newline" key={index}>
-              {ele}
-            </div>
+        <div className="modalHeader">
+          <div className="modalTitle">{item.key} issues</div>
+          <X className="closeButton" onClick={closeModal} />
+        </div>
+        <ul>
+          {item.issues.filter(Boolean).map((ele, index) => (
+            <li key={index}>{ele}</li>
           ))}
-          <div className="newline">
-            {workerData && <>{`Did not match web worker (${workerData})`}</>}
-          </div>
-        </>
+        </ul>
       </Modal>
-    </>
+    </tr>
   );
 };
 
diff --git a/frontend/src/images/x.svg b/frontend/src/images/x.svg
new file mode 100644
index 0000000..c528bcd
--- /dev/null
+++ b/frontend/src/images/x.svg
@@ -0,0 +1 @@
+<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 320 512"><path d="M207.6 256l107.72-107.72c6.23-6.23 6.23-16.34 0-22.58l-25.03-25.03c-6.23-6.23-16.34-6.23-22.58 0L160 208.4 52.28 100.68c-6.23-6.23-16.34-6.23-22.58 0L4.68 125.7c-6.23 6.23-6.23 16.34 0 22.58L112.4 256 4.68 363.72c-6.23 6.23-6.23 16.34 0 22.58l25.03 25.03c6.23 6.23 16.34 6.23 22.58 0L160 303.6l107.72 107.72c6.23 6.23 16.34 6.23 22.58 0l25.03-25.03c6.23-6.23 6.23-16.34 0-22.58L207.6 256z"/></svg>
\ No newline at end of file
diff --git a/frontend/src/utils/common.js b/frontend/src/utils/common.js
new file mode 100644
index 0000000..b2b2473
--- /dev/null
+++ b/frontend/src/utils/common.js
@@ -0,0 +1,18 @@
+export { fetchAPI, getWebWorker };
+
+// Gets location values
+const fetchAPI = (setData) => {
+  fetch('https://api.vytal.io/ip/')
+    .then((response) => response.json())
+    .then((json) => {
+      setData(json);
+    });
+};
+
+const getWebWorker = () => {
+  let w;
+  if (typeof w === 'undefined') {
+    w = new Worker('worker.js');
+  }
+  return w;
+};
diff --git a/frontend/src/utils/conenction.js b/frontend/src/utils/conenction.js
new file mode 100644
index 0000000..32a1699
--- /dev/null
+++ b/frontend/src/utils/conenction.js
@@ -0,0 +1,89 @@
+export { getMap, getConnection, getLocation };
+
+const getMap = (data) =>
+  `https://maps.googleapis.com/maps/api/staticmap?center=${data.lat},${data.lon}&markers=color:red%7Clabel:%7C${data.lat},${data.lon}&size=500x200&zoom=10&key=AIzaSyB-YN-X8PGBSPd7NOaQu4csVhgJUnF3ZGk`;
+
+const compareTimeZone = (locationTimeZone, workerTimeZone) => {
+  if (locationTimeZone !== workerTimeZone) {
+    return "Location data doesn't match system data";
+  }
+  return null;
+};
+
+const checkProxy = (proxy) => {
+  if (proxy) {
+    return 'VPN/proxy has been detected';
+  }
+  return null;
+};
+
+// Returns object with location data
+const getLocation = (data, workerData) => {
+  const timeZoneIssue = compareTimeZone(data.timezone, workerData.timeZone);
+  const isProxy = checkProxy(data.proxy);
+  return [
+    {
+      key: 'Country',
+      value: data.country,
+      issues: [timeZoneIssue, isProxy],
+    },
+    {
+      key: 'Region',
+      value: data.regionName,
+      issues: [timeZoneIssue, isProxy],
+    },
+    {
+      key: 'City',
+      value: data.city,
+      issues: [timeZoneIssue, isProxy],
+    },
+    {
+      key: 'Time zone',
+      value: data.timezone,
+      issues: [timeZoneIssue, isProxy],
+    },
+    {
+      key: 'Zip code',
+      value: data.zip,
+      issues: [timeZoneIssue, isProxy],
+    },
+    {
+      key: 'Latitude',
+      value: data.lat,
+      issues: [timeZoneIssue, isProxy],
+    },
+    {
+      key: 'Longitude',
+      value: data.lon,
+      issues: [timeZoneIssue, isProxy],
+    },
+  ];
+};
+
+// Returns object with location data
+const getConnection = (data) => {
+  console.log(data);
+  const isProxy = checkProxy(data.proxy);
+  return [
+    {
+      key: 'IP address',
+      value: data.query,
+      issues: [isProxy],
+    },
+    {
+      key: 'ISP',
+      value: data.isp,
+      issues: [isProxy],
+    },
+    {
+      key: 'Organization',
+      value: data.org,
+      issues: [isProxy],
+    },
+    {
+      key: 'ASN',
+      value: data.as,
+      issues: [isProxy],
+    },
+  ];
+};

From e52a895d558341bf7a1c3c94b1c60d061b72ee79 Mon Sep 17 00:00:00 2001
From: z0ccc <z0cccccccc@gmail.com>
Date: Mon, 27 Sep 2021 19:29:23 -0400
Subject: [PATCH 34/54] Added navigator block

---
 frontend/.eslintrc.js                         |   1 +
 frontend/public/worker.js                     |   5 +
 .../src/components/{ScanBlock.js => Block.js} |   0
 .../components/{ScanBlocks.js => Blocks.js}   |  10 +-
 frontend/src/components/ConnectionBlock.js    |   2 +-
 frontend/src/components/FiltersBlock.js       |   2 +-
 frontend/src/components/FingerprintBlock.js   |   2 +-
 frontend/src/components/HardwareBlock.js      |   2 +-
 frontend/src/components/IntlBlock.js          |   2 +-
 frontend/src/components/LocationBlock.js      |   2 +-
 frontend/src/components/MainColumn.js         |   4 +-
 frontend/src/components/NavigatorBlock.js     |   8 +-
 frontend/src/components/OtherBlock.js         |   2 +-
 frontend/src/components/ScreenBlock.js        |   2 +-
 frontend/src/components/SoftwareBlock.js      |   2 +-
 frontend/src/components/UserAgentBlock.js     | 200 +++++++++---------
 frontend/src/utils/common.js                  |   9 +-
 frontend/src/utils/conenction.js              |   1 -
 frontend/src/utils/navigator.js               | 197 +++++++++++++++++
 19 files changed, 331 insertions(+), 122 deletions(-)
 rename frontend/src/components/{ScanBlock.js => Block.js} (100%)
 rename frontend/src/components/{ScanBlocks.js => Blocks.js} (89%)
 create mode 100644 frontend/src/utils/navigator.js

diff --git a/frontend/.eslintrc.js b/frontend/.eslintrc.js
index 417a8b0..6ab6eda 100644
--- a/frontend/.eslintrc.js
+++ b/frontend/.eslintrc.js
@@ -39,5 +39,6 @@ module.exports = {
     'react/react-in-jsx-scope': 'off',
     'no-bitwise': 'off',
     'react/no-array-index-key': 'off',
+    'dot-notation': 'off',
   },
 };
diff --git a/frontend/public/worker.js b/frontend/public/worker.js
index 93b3fce..51662e5 100644
--- a/frontend/public/worker.js
+++ b/frontend/public/worker.js
@@ -3,6 +3,11 @@ const data = {
   timeZone: Intl.DateTimeFormat().resolvedOptions().timeZone,
   timezoneOffset: new Date().getTimezoneOffset(),
   date: new Date().toString(),
+  deviceMemory: navigator.deviceMemory,
+  hardwareConcurrency: navigator.hardwareConcurrency,
+  platform: navigator.platform,
+  userAgent: navigator.userAgent,
+  appVersion: navigator.appVersion,
   language: navigator.language,
   languages: navigator.languages,
 };
diff --git a/frontend/src/components/ScanBlock.js b/frontend/src/components/Block.js
similarity index 100%
rename from frontend/src/components/ScanBlock.js
rename to frontend/src/components/Block.js
diff --git a/frontend/src/components/ScanBlocks.js b/frontend/src/components/Blocks.js
similarity index 89%
rename from frontend/src/components/ScanBlocks.js
rename to frontend/src/components/Blocks.js
index f218d83..1856a0b 100644
--- a/frontend/src/components/ScanBlocks.js
+++ b/frontend/src/components/Blocks.js
@@ -29,9 +29,9 @@ const ScanBlocks = () => {
       {connectionData ? (
         <>
           <div className="centerBlockInner">
-            {/* <FingerprintBlock />
-            <NavigatorBlock />
-            <UserAgentBlock />
+            {/* <FingerprintBlock /> */}
+            <NavigatorBlock workerData={workerData} />
+            {/* <UserAgentBlock />
             <IntlBlock /> */}
           </div>
           <div className="centerBlockInner">
@@ -43,8 +43,8 @@ const ScanBlocks = () => {
               workerData={workerData}
               connectionData={connectionData}
             />
-            {/* <ScreenBlock />
-            <OtherBlock /> */}
+            <ScreenBlock />
+            {/* <OtherBlock /> */}
           </div>
         </>
       ) : (
diff --git a/frontend/src/components/ConnectionBlock.js b/frontend/src/components/ConnectionBlock.js
index aa0b993..47eb338 100644
--- a/frontend/src/components/ConnectionBlock.js
+++ b/frontend/src/components/ConnectionBlock.js
@@ -1,4 +1,4 @@
-import ScanBlock from './ScanBlock';
+import ScanBlock from './Block';
 import Table from './Table';
 import { getConnection } from '../utils/conenction';
 
diff --git a/frontend/src/components/FiltersBlock.js b/frontend/src/components/FiltersBlock.js
index 03e7e1f..e00bea8 100644
--- a/frontend/src/components/FiltersBlock.js
+++ b/frontend/src/components/FiltersBlock.js
@@ -1,5 +1,5 @@
 import { useState, useEffect } from 'react';
-import ScanBlock from './ScanBlock';
+import ScanBlock from './Block';
 import Table from './Table';
 
 const FiltersBlock = () => {
diff --git a/frontend/src/components/FingerprintBlock.js b/frontend/src/components/FingerprintBlock.js
index 6db3228..94dfbac 100644
--- a/frontend/src/components/FingerprintBlock.js
+++ b/frontend/src/components/FingerprintBlock.js
@@ -1,5 +1,5 @@
 import { useState } from 'react';
-import ScanBlock from './ScanBlock';
+import ScanBlock from './Block';
 import Table from './Table';
 import {
   getHardware,
diff --git a/frontend/src/components/HardwareBlock.js b/frontend/src/components/HardwareBlock.js
index 02e5b92..12b68b6 100644
--- a/frontend/src/components/HardwareBlock.js
+++ b/frontend/src/components/HardwareBlock.js
@@ -1,5 +1,5 @@
 import { useState, useEffect } from 'react';
-import ScanBlock from './ScanBlock';
+import ScanBlock from './Block';
 import Table from './Table';
 import { getHardware, getWebGL, getBattery } from './mainOld';
 
diff --git a/frontend/src/components/IntlBlock.js b/frontend/src/components/IntlBlock.js
index 651b9be..ba90f36 100644
--- a/frontend/src/components/IntlBlock.js
+++ b/frontend/src/components/IntlBlock.js
@@ -1,6 +1,6 @@
 /* eslint-disable no-unused-vars */
 import { useState, useEffect } from 'react';
-import ScanBlock from './ScanBlock';
+import ScanBlock from './Block';
 import Table from './Table';
 import { getIntl } from './main';
 import { ReactComponent as CheckCircle } from '../images/checkCircle.svg';
diff --git a/frontend/src/components/LocationBlock.js b/frontend/src/components/LocationBlock.js
index 46d090f..f00a23e 100644
--- a/frontend/src/components/LocationBlock.js
+++ b/frontend/src/components/LocationBlock.js
@@ -1,4 +1,4 @@
-import ScanBlock from './ScanBlock';
+import ScanBlock from './Block';
 import Table from './Table';
 import { getMap, getLocation } from '../utils/conenction';
 
diff --git a/frontend/src/components/MainColumn.js b/frontend/src/components/MainColumn.js
index 1ab1a04..a90b114 100644
--- a/frontend/src/components/MainColumn.js
+++ b/frontend/src/components/MainColumn.js
@@ -1,11 +1,11 @@
 import Logo from './Logo';
-import ScanBlocks from './ScanBlocks';
+import Blocks from './Blocks';
 
 const MainColumn = () => (
   <>
     <Logo />
     <div className="centerBlockOuter">
-      <ScanBlocks />
+      <Blocks />
     </div>
   </>
 );
diff --git a/frontend/src/components/NavigatorBlock.js b/frontend/src/components/NavigatorBlock.js
index 863672b..5041b18 100644
--- a/frontend/src/components/NavigatorBlock.js
+++ b/frontend/src/components/NavigatorBlock.js
@@ -1,11 +1,11 @@
-import ScanBlock from './ScanBlock';
+import ScanBlock from './Block';
 import Table from './Table';
-import { getNavigator } from './main';
+import getNavigator from '../utils/navigator';
 
-const NavigatorBlock = () => (
+const NavigatorBlock = ({ workerData }) => (
   <ScanBlock>
     <h1>Navigator</h1>
-    <Table type="navigator" data={getNavigator()} />
+    <Table type="navigator" data={getNavigator(workerData)} />
     <p>
       <b>Explanation:</b> JavaScript can be used to find information about your
       hardware. This information can be used to create a fingerprint.
diff --git a/frontend/src/components/OtherBlock.js b/frontend/src/components/OtherBlock.js
index c73302c..69737bb 100644
--- a/frontend/src/components/OtherBlock.js
+++ b/frontend/src/components/OtherBlock.js
@@ -1,7 +1,7 @@
 /* eslint-disable arrow-body-style */
 /* eslint-disable no-unused-vars */
 import { useState, useEffect } from 'react';
-import ScanBlock from './ScanBlock';
+import ScanBlock from './Block';
 import { detectTor } from './main';
 
 const OtherBlock = () => {
diff --git a/frontend/src/components/ScreenBlock.js b/frontend/src/components/ScreenBlock.js
index 007ba86..8504921 100644
--- a/frontend/src/components/ScreenBlock.js
+++ b/frontend/src/components/ScreenBlock.js
@@ -1,4 +1,4 @@
-import ScanBlock from './ScanBlock';
+import ScanBlock from './Block';
 import Table from './Table';
 import getScreen from '../utils/screen';
 
diff --git a/frontend/src/components/SoftwareBlock.js b/frontend/src/components/SoftwareBlock.js
index cc2a713..7ecae12 100644
--- a/frontend/src/components/SoftwareBlock.js
+++ b/frontend/src/components/SoftwareBlock.js
@@ -1,4 +1,4 @@
-import ScanBlock from './ScanBlock';
+import ScanBlock from './Block';
 import Table from './Table';
 import { getSoftware } from './mainOld';
 
diff --git a/frontend/src/components/UserAgentBlock.js b/frontend/src/components/UserAgentBlock.js
index cb954c7..271f437 100644
--- a/frontend/src/components/UserAgentBlock.js
+++ b/frontend/src/components/UserAgentBlock.js
@@ -1,105 +1,105 @@
-/* eslint-disable no-unused-vars */
-import { useState, useEffect } from 'react';
-import Bowser from 'bowser';
-import ScanBlock from './ScanBlock';
-import Table from './Table';
-import {
-  checkNavigatorProperties,
-  checkWebWorker,
-  checkScreenProperties,
-} from './main';
-import { ReactComponent as CheckCircle } from '../images/checkCircle.svg';
+// /* eslint-disable no-unused-vars */
+// import { useState, useEffect } from 'react';
+// import Bowser from 'bowser';
+// import ScanBlock from './Block';
+// import Table from './Table';
+// import {
+//   checkNavigatorProperties,
+//   checkWebWorker,
+//   checkScreenProperties,
+// } from './main';
+// import { ReactComponent as CheckCircle } from '../images/checkCircle.svg';
 
-const UserAgentBlock = () => {
-  const [firstRender, setfirstRender] = useState(true);
-  const [workerData, setWorkerData] = useState('');
-  const [userAgent, setUserAgent] = useState();
+// const UserAgentBlock = () => {
+//   const [firstRender, setfirstRender] = useState(true);
+//   const [workerData, setWorkerData] = useState('');
+//   const [userAgent, setUserAgent] = useState();
 
-  useEffect(() => {
-    checkWebWorker('userAgent', setWorkerData);
-  }, []);
+//   useEffect(() => {
+//     checkWebWorker('userAgent', setWorkerData);
+//   }, []);
 
-  useEffect(() => {
-    if (!workerData) {
-      setUserAgent(Bowser.parse(navigator.userAgent));
-    } else {
-      setUserAgent(Bowser.parse(workerData));
-    }
-  }, [workerData]);
+//   useEffect(() => {
+//     if (!workerData) {
+//       setUserAgent(Bowser.parse(navigator.userAgent));
+//     } else {
+//       setUserAgent(Bowser.parse(workerData));
+//     }
+//   }, [workerData]);
 
-  return (
-    <ScanBlock>
-      <h1>User Agent</h1>
-      {userAgent && (
-        <div className="tableWrap">
-          <table>
-            <tbody>
-              <tr>
-                <td>Browser</td>
-                <td>{userAgent.browser.name}</td>
-                <td>
-                  <CheckCircle className="circleButton" />
-                </td>
-              </tr>
-            </tbody>
-            <tbody>
-              <tr>
-                <td>Browser version</td>
-                <td>{userAgent.browser.version}</td>
-                <td>
-                  <CheckCircle className="circleButton" />
-                </td>
-              </tr>
-            </tbody>
-            <tbody>
-              <tr>
-                <td>OS</td>
-                <td>
-                  {userAgent.os.name} {userAgent.os.versionName}
-                </td>
-                <td>
-                  <CheckCircle className="circleButton" />
-                </td>
-              </tr>
-            </tbody>
-            <tbody>
-              <tr>
-                <td>OS version</td>
-                <td>{userAgent.os.version}</td>
-                <td>
-                  <CheckCircle className="circleButton" />
-                </td>
-              </tr>
-            </tbody>
-            <tbody>
-              <tr>
-                <td>Engine</td>
-                <td>
-                  {userAgent.engine.name} {userAgent.engine.version}
-                </td>
-                <td>
-                  <CheckCircle className="circleButton" />
-                </td>
-              </tr>
-            </tbody>
-            <tbody>
-              <tr>
-                <td>Platform type</td>
-                <td>{userAgent.platform.type}</td>
-                <td>
-                  <CheckCircle className="circleButton" />
-                </td>
-              </tr>
-            </tbody>
-          </table>
-        </div>
-      )}
-      <p>
-        <b>Explanation:</b> JavaScript can be used to find information about
-        your hardware. This information can be used to create a fingerprint.
-      </p>
-    </ScanBlock>
-  );
-};
+//   return (
+//     <ScanBlock>
+//       <h1>User Agent</h1>
+//       {userAgent && (
+//         <div className="tableWrap">
+//           <table>
+//             <tbody>
+//               <tr>
+//                 <td>Browser</td>
+//                 <td>{userAgent.browser.name}</td>
+//                 <td>
+//                   <CheckCircle className="circleButton" />
+//                 </td>
+//               </tr>
+//             </tbody>
+//             <tbody>
+//               <tr>
+//                 <td>Browser version</td>
+//                 <td>{userAgent.browser.version}</td>
+//                 <td>
+//                   <CheckCircle className="circleButton" />
+//                 </td>
+//               </tr>
+//             </tbody>
+//             <tbody>
+//               <tr>
+//                 <td>OS</td>
+//                 <td>
+//                   {userAgent.os.name} {userAgent.os.versionName}
+//                 </td>
+//                 <td>
+//                   <CheckCircle className="circleButton" />
+//                 </td>
+//               </tr>
+//             </tbody>
+//             <tbody>
+//               <tr>
+//                 <td>OS version</td>
+//                 <td>{userAgent.os.version}</td>
+//                 <td>
+//                   <CheckCircle className="circleButton" />
+//                 </td>
+//               </tr>
+//             </tbody>
+//             <tbody>
+//               <tr>
+//                 <td>Engine</td>
+//                 <td>
+//                   {userAgent.engine.name} {userAgent.engine.version}
+//                 </td>
+//                 <td>
+//                   <CheckCircle className="circleButton" />
+//                 </td>
+//               </tr>
+//             </tbody>
+//             <tbody>
+//               <tr>
+//                 <td>Platform type</td>
+//                 <td>{userAgent.platform.type}</td>
+//                 <td>
+//                   <CheckCircle className="circleButton" />
+//                 </td>
+//               </tr>
+//             </tbody>
+//           </table>
+//         </div>
+//       )}
+//       <p>
+//         <b>Explanation:</b> JavaScript can be used to find information about
+//         your hardware. This information can be used to create a fingerprint.
+//       </p>
+//     </ScanBlock>
+//   );
+// };
 
-export default UserAgentBlock;
+// export default UserAgentBlock;
diff --git a/frontend/src/utils/common.js b/frontend/src/utils/common.js
index b2b2473..6333e17 100644
--- a/frontend/src/utils/common.js
+++ b/frontend/src/utils/common.js
@@ -1,4 +1,4 @@
-export { fetchAPI, getWebWorker };
+export { fetchAPI, checkWebWorker, getWebWorker };
 
 // Gets location values
 const fetchAPI = (setData) => {
@@ -9,6 +9,13 @@ const fetchAPI = (setData) => {
     });
 };
 
+const checkWebWorker = (key, worker) => {
+  if (key.toString() !== worker.toString()) {
+    return `Did not match web worker (${worker})`;
+  }
+  return null;
+};
+
 const getWebWorker = () => {
   let w;
   if (typeof w === 'undefined') {
diff --git a/frontend/src/utils/conenction.js b/frontend/src/utils/conenction.js
index 32a1699..a86c03f 100644
--- a/frontend/src/utils/conenction.js
+++ b/frontend/src/utils/conenction.js
@@ -62,7 +62,6 @@ const getLocation = (data, workerData) => {
 
 // Returns object with location data
 const getConnection = (data) => {
-  console.log(data);
   const isProxy = checkProxy(data.proxy);
   return [
     {
diff --git a/frontend/src/utils/navigator.js b/frontend/src/utils/navigator.js
new file mode 100644
index 0000000..8413e1d
--- /dev/null
+++ b/frontend/src/utils/navigator.js
@@ -0,0 +1,197 @@
+import { checkWebWorker } from './common';
+
+const getDeviceMemory = (key, worker) => ({
+  key,
+  value: navigator[key],
+  issues: [
+    checkNavigatorProperties(key),
+    checkNavigatorValue(key),
+    checkNavigatorPrototype(key),
+    checkWebWorker(navigator[key], worker),
+  ],
+});
+
+const getHardwareConcurrency = (key, worker) => ({
+  key,
+  value: navigator.hardwareConcurrency,
+  issues: [
+    checkNavigatorProperties(key),
+    checkNavigatorValue(key),
+    checkNavigatorPrototype(key),
+    checkWebWorker(navigator[key], worker),
+  ],
+});
+
+const getMaxTouchPoints = (key) => ({
+  key,
+  value: navigator.maxTouchPoints,
+  issues: [
+    checkNavigatorProperties(key),
+    checkNavigatorValue(key),
+    checkNavigatorPrototype(key),
+  ],
+});
+
+const getPlatform = (key, worker) => ({
+  key,
+  value: navigator.platform,
+  issues: [
+    checkNavigatorProperties(key),
+    checkNavigatorValue(key),
+    checkNavigatorPrototype(key),
+    checkWebWorker(navigator[key], worker),
+  ],
+});
+
+const getUserAgent = (key, worker) => ({
+  key,
+  value: navigator.userAgent,
+  issues: [
+    checkNavigatorProperties(key),
+    checkNavigatorValue(key),
+    checkNavigatorPrototype(key),
+    checkWebWorker(navigator[key], worker),
+  ],
+});
+
+const getAppVersion = (key, worker) => ({
+  key,
+  value: navigator.appVersion,
+  issues: [
+    checkNavigatorProperties(key),
+    checkNavigatorValue(key),
+    checkNavigatorPrototype(key),
+    checkWebWorker(navigator[key], worker),
+  ],
+});
+
+const getLanguage = (key, worker) => ({
+  key,
+  value: navigator.language,
+  issues: [
+    checkNavigatorProperties(key),
+    checkNavigatorValue(key),
+    checkNavigatorPrototype(key),
+    checkWebWorker(navigator[key], worker),
+  ],
+});
+
+const getLanguages = (key, worker) => ({
+  key,
+  value: navigator.languages,
+  issues: [
+    checkNavigatorProperties(key),
+    checkNavigatorValue(key),
+    checkNavigatorPrototype(key),
+    checkWebWorker(navigator[key], worker),
+  ],
+});
+
+const getCookieEnabled = (key) => ({
+  key,
+  value: navigator.cookieEnabled ? 'True' : 'False',
+  issues: [
+    checkNavigatorProperties(key),
+    checkNavigatorValue(key),
+    checkNavigatorPrototype(key),
+  ],
+});
+
+const getDoNotTrack = (key) => ({
+  key,
+  value: navigator.doNotTrack ? 'True' : 'False',
+  issues: [
+    checkNavigatorProperties(key),
+    checkNavigatorValue(key),
+    checkNavigatorPrototype(key),
+  ],
+});
+
+const getWebDriver = (key) => ({
+  key,
+  value: navigator.webdriver ? 'True' : 'False',
+  issues: [
+    checkNavigatorProperties(key),
+    checkNavigatorValue(key),
+    checkNavigatorPrototype(key),
+  ],
+});
+
+const getPlugins = (key) => ({
+  key,
+  value: sortPlugins(navigator.plugins),
+  issues: [
+    checkNavigatorProperties(key),
+    checkNavigatorValue(key),
+    checkNavigatorPrototype(key),
+  ],
+});
+
+const getVendor = (key) => ({
+  key,
+  value: navigator.vendor,
+  issues: [
+    checkNavigatorProperties(key),
+    checkNavigatorValue(key),
+    checkNavigatorPrototype(key),
+  ],
+});
+
+// sorts plugins object into comma separated list
+const sortPlugins = (data) => {
+  const { length } = data;
+
+  let list = '';
+  for (let i = 0; i < length; i++) {
+    if (i !== 0) list += ', ';
+    list += data[i].name;
+  }
+  return list;
+};
+
+const checkNavigatorProperties = (key) => {
+  if (Object.getOwnPropertyDescriptor(navigator, key) !== undefined) {
+    return 'Failed undefined properties';
+  }
+  return null;
+};
+
+const checkNavigatorValue = (key) => {
+  if (
+    Object.getOwnPropertyDescriptor(Navigator.prototype, key).value !==
+    undefined
+  ) {
+    return 'Failed descriptor.value undefined';
+  }
+  return null;
+};
+
+const checkNavigatorPrototype = (key) => {
+  try {
+    // eslint-disable-next-line no-unused-vars
+    const check = Navigator.prototype[key];
+    return 'Failed Navigator.prototype';
+  } catch (err) {
+    // eslint-disable-next-line no-unused-vars
+    const check = '';
+  }
+  return null;
+};
+
+const getNavigator = (workerData) => [
+  getDeviceMemory('deviceMemory', workerData.deviceMemory),
+  getHardwareConcurrency('hardwareConcurrency', workerData.hardwareConcurrency),
+  getMaxTouchPoints('maxTouchPoints'),
+  getPlatform('platform', workerData.platform),
+  getUserAgent('userAgent', workerData.userAgent),
+  getAppVersion('appVersion', workerData.appVersion),
+  getLanguage('language', workerData.language),
+  getLanguages('languages', workerData.languages),
+  getCookieEnabled('cookieEnabled'),
+  getDoNotTrack('doNotTrack'),
+  getWebDriver('webdriver'),
+  getPlugins('plugins'),
+  getVendor('vendor'),
+];
+
+export default getNavigator;

From 1ae29ac2a088830060733a819bf0c3823f0c7aea Mon Sep 17 00:00:00 2001
From: z0ccc <z0cccccccc@gmail.com>
Date: Mon, 27 Sep 2021 22:40:09 -0400
Subject: [PATCH 35/54] Added useragent block

---
 frontend/src/components/Blocks.js             |   4 +-
 frontend/src/components/ConnectionBlock.js    |   2 +-
 frontend/src/components/LocationBlock.js      |   2 +-
 frontend/src/components/NavigatorBlock.js     |   2 +-
 frontend/src/components/UserAgentBlock.js     | 118 +++---------------
 frontend/src/utils/common.js                  |   2 +-
 .../utils/{conenction.js => connection.js}    |   0
 frontend/src/utils/userAgent.js               |  53 ++++++++
 8 files changed, 74 insertions(+), 109 deletions(-)
 rename frontend/src/utils/{conenction.js => connection.js} (100%)
 create mode 100644 frontend/src/utils/userAgent.js

diff --git a/frontend/src/components/Blocks.js b/frontend/src/components/Blocks.js
index 1856a0b..8bef219 100644
--- a/frontend/src/components/Blocks.js
+++ b/frontend/src/components/Blocks.js
@@ -31,8 +31,8 @@ const ScanBlocks = () => {
           <div className="centerBlockInner">
             {/* <FingerprintBlock /> */}
             <NavigatorBlock workerData={workerData} />
-            {/* <UserAgentBlock />
-            <IntlBlock /> */}
+            <UserAgentBlock workerAgent={workerData.userAgent} />
+            {/* <IntlBlock /> */}
           </div>
           <div className="centerBlockInner">
             <LocationBlock
diff --git a/frontend/src/components/ConnectionBlock.js b/frontend/src/components/ConnectionBlock.js
index 47eb338..d2bc433 100644
--- a/frontend/src/components/ConnectionBlock.js
+++ b/frontend/src/components/ConnectionBlock.js
@@ -1,6 +1,6 @@
 import ScanBlock from './Block';
 import Table from './Table';
-import { getConnection } from '../utils/conenction';
+import { getConnection } from '../utils/connection';
 
 const LocationBlock = ({ connectionData }) => (
   <ScanBlock>
diff --git a/frontend/src/components/LocationBlock.js b/frontend/src/components/LocationBlock.js
index f00a23e..9fb484f 100644
--- a/frontend/src/components/LocationBlock.js
+++ b/frontend/src/components/LocationBlock.js
@@ -1,6 +1,6 @@
 import ScanBlock from './Block';
 import Table from './Table';
-import { getMap, getLocation } from '../utils/conenction';
+import { getMap, getLocation } from '../utils/connection';
 
 const LocationBlock = ({ connectionData, workerData }) => (
   <ScanBlock>
diff --git a/frontend/src/components/NavigatorBlock.js b/frontend/src/components/NavigatorBlock.js
index 5041b18..84ccc52 100644
--- a/frontend/src/components/NavigatorBlock.js
+++ b/frontend/src/components/NavigatorBlock.js
@@ -5,7 +5,7 @@ import getNavigator from '../utils/navigator';
 const NavigatorBlock = ({ workerData }) => (
   <ScanBlock>
     <h1>Navigator</h1>
-    <Table type="navigator" data={getNavigator(workerData)} />
+    <Table data={getNavigator(workerData)} />
     <p>
       <b>Explanation:</b> JavaScript can be used to find information about your
       hardware. This information can be used to create a fingerprint.
diff --git a/frontend/src/components/UserAgentBlock.js b/frontend/src/components/UserAgentBlock.js
index 271f437..3101290 100644
--- a/frontend/src/components/UserAgentBlock.js
+++ b/frontend/src/components/UserAgentBlock.js
@@ -1,105 +1,17 @@
-// /* eslint-disable no-unused-vars */
-// import { useState, useEffect } from 'react';
-// import Bowser from 'bowser';
-// import ScanBlock from './Block';
-// import Table from './Table';
-// import {
-//   checkNavigatorProperties,
-//   checkWebWorker,
-//   checkScreenProperties,
-// } from './main';
-// import { ReactComponent as CheckCircle } from '../images/checkCircle.svg';
+/* eslint-disable no-unused-vars */
+import ScanBlock from './Block';
+import Table from './Table';
+import getUserAgent from '../utils/userAgent';
 
-// const UserAgentBlock = () => {
-//   const [firstRender, setfirstRender] = useState(true);
-//   const [workerData, setWorkerData] = useState('');
-//   const [userAgent, setUserAgent] = useState();
+const UserAgentBlock = ({ workerAgent }) => (
+  <ScanBlock>
+    <h1>User Agent</h1>
+    <Table data={getUserAgent(workerAgent)} />
+    <p>
+      <b>Explanation:</b> JavaScript can be used to find information about your
+      hardware. This information can be used to create a fingerprint.
+    </p>
+  </ScanBlock>
+);
 
-//   useEffect(() => {
-//     checkWebWorker('userAgent', setWorkerData);
-//   }, []);
-
-//   useEffect(() => {
-//     if (!workerData) {
-//       setUserAgent(Bowser.parse(navigator.userAgent));
-//     } else {
-//       setUserAgent(Bowser.parse(workerData));
-//     }
-//   }, [workerData]);
-
-//   return (
-//     <ScanBlock>
-//       <h1>User Agent</h1>
-//       {userAgent && (
-//         <div className="tableWrap">
-//           <table>
-//             <tbody>
-//               <tr>
-//                 <td>Browser</td>
-//                 <td>{userAgent.browser.name}</td>
-//                 <td>
-//                   <CheckCircle className="circleButton" />
-//                 </td>
-//               </tr>
-//             </tbody>
-//             <tbody>
-//               <tr>
-//                 <td>Browser version</td>
-//                 <td>{userAgent.browser.version}</td>
-//                 <td>
-//                   <CheckCircle className="circleButton" />
-//                 </td>
-//               </tr>
-//             </tbody>
-//             <tbody>
-//               <tr>
-//                 <td>OS</td>
-//                 <td>
-//                   {userAgent.os.name} {userAgent.os.versionName}
-//                 </td>
-//                 <td>
-//                   <CheckCircle className="circleButton" />
-//                 </td>
-//               </tr>
-//             </tbody>
-//             <tbody>
-//               <tr>
-//                 <td>OS version</td>
-//                 <td>{userAgent.os.version}</td>
-//                 <td>
-//                   <CheckCircle className="circleButton" />
-//                 </td>
-//               </tr>
-//             </tbody>
-//             <tbody>
-//               <tr>
-//                 <td>Engine</td>
-//                 <td>
-//                   {userAgent.engine.name} {userAgent.engine.version}
-//                 </td>
-//                 <td>
-//                   <CheckCircle className="circleButton" />
-//                 </td>
-//               </tr>
-//             </tbody>
-//             <tbody>
-//               <tr>
-//                 <td>Platform type</td>
-//                 <td>{userAgent.platform.type}</td>
-//                 <td>
-//                   <CheckCircle className="circleButton" />
-//                 </td>
-//               </tr>
-//             </tbody>
-//           </table>
-//         </div>
-//       )}
-//       <p>
-//         <b>Explanation:</b> JavaScript can be used to find information about
-//         your hardware. This information can be used to create a fingerprint.
-//       </p>
-//     </ScanBlock>
-//   );
-// };
-
-// export default UserAgentBlock;
+export default UserAgentBlock;
diff --git a/frontend/src/utils/common.js b/frontend/src/utils/common.js
index 6333e17..a72cc3a 100644
--- a/frontend/src/utils/common.js
+++ b/frontend/src/utils/common.js
@@ -10,7 +10,7 @@ const fetchAPI = (setData) => {
 };
 
 const checkWebWorker = (key, worker) => {
-  if (key.toString() !== worker.toString()) {
+  if (`${key}` !== `${worker}`) {
     return `Did not match web worker (${worker})`;
   }
   return null;
diff --git a/frontend/src/utils/conenction.js b/frontend/src/utils/connection.js
similarity index 100%
rename from frontend/src/utils/conenction.js
rename to frontend/src/utils/connection.js
diff --git a/frontend/src/utils/userAgent.js b/frontend/src/utils/userAgent.js
new file mode 100644
index 0000000..9b19b98
--- /dev/null
+++ b/frontend/src/utils/userAgent.js
@@ -0,0 +1,53 @@
+/* eslint-disable no-unused-vars */
+/* eslint-disable import/prefer-default-export */
+
+import Bowser from 'bowser';
+import { checkWebWorker } from './common';
+
+const getUserAgentData = (key, userAgent, workerAgent) => ({
+  key,
+  value: userAgent || 'N/A',
+  issues: [checkWebWorker(userAgent, workerAgent)],
+});
+
+// Returns object with location data
+const getUserAgent = (workerAgent) => {
+  const userAgentParsed = Bowser.parse(navigator.userAgent);
+  const workerAgentParsed = Bowser.parse(workerAgent);
+  console.log(userAgentParsed, workerAgentParsed);
+  return [
+    getUserAgentData(
+      'Browser',
+      userAgentParsed.browser.name,
+      workerAgentParsed.browser.name
+    ),
+    getUserAgentData(
+      'Browser version',
+      userAgentParsed.browser.version,
+      workerAgentParsed.browser.version
+    ),
+    getUserAgentData('OS', userAgentParsed.os.name, workerAgentParsed.os.name),
+    getUserAgentData(
+      'OS version',
+      userAgentParsed.os.versionName,
+      workerAgentParsed.os.versionName
+    ),
+    getUserAgentData(
+      'Engine',
+      userAgentParsed.engine.name,
+      workerAgentParsed.engine.name
+    ),
+    getUserAgentData(
+      'Engine version',
+      userAgentParsed.engine.version,
+      workerAgentParsed.engine.version
+    ),
+    getUserAgentData(
+      'Platform type',
+      userAgentParsed.platform.type,
+      workerAgentParsed.platform.type
+    ),
+  ];
+};
+
+export default getUserAgent;

From 6f0f8bd8eec31db2aea635a9b59b7a311f59c8da Mon Sep 17 00:00:00 2001
From: z0ccc <z0cccccccc@gmail.com>
Date: Tue, 28 Sep 2021 10:49:18 -0400
Subject: [PATCH 36/54] Added other block

---
 frontend/src/components/Blocks.js           |  6 +-
 frontend/src/components/ConnectionBlock.js  |  6 +-
 frontend/src/components/FiltersBlock.js     |  6 +-
 frontend/src/components/FingerprintBlock.js |  6 +-
 frontend/src/components/FontsBlock.js       |  6 +-
 frontend/src/components/HardwareBlock.js    |  6 +-
 frontend/src/components/IntlBlock.js        |  6 +-
 frontend/src/components/LocationBlock.js    |  6 +-
 frontend/src/components/NavigatorBlock.js   |  6 +-
 frontend/src/components/OtherBloc2.js       | 77 +++++++++++++++++++++
 frontend/src/components/OtherBlock.js       | 76 ++++++--------------
 frontend/src/components/ScreenBlock.js      |  6 +-
 frontend/src/components/SoftwareBlock.js    |  6 +-
 frontend/src/components/StartBlock.js       |  6 +-
 frontend/src/components/UserAgentBlock.js   |  7 +-
 frontend/src/utils/other.js                 | 66 ++++++++++++++++++
 frontend/src/utils/userAgent.js             |  4 --
 17 files changed, 203 insertions(+), 99 deletions(-)
 create mode 100644 frontend/src/components/OtherBloc2.js
 create mode 100644 frontend/src/utils/other.js

diff --git a/frontend/src/components/Blocks.js b/frontend/src/components/Blocks.js
index 8bef219..7565a41 100644
--- a/frontend/src/components/Blocks.js
+++ b/frontend/src/components/Blocks.js
@@ -14,7 +14,7 @@ import FiltersBlock from './FiltersBlock';
 // import FontsBlock from './FontsBlock';
 import { fetchAPI, getWebWorker } from '../utils/common';
 
-const ScanBlocks = () => {
+const Blocks = () => {
   const [workerData, setWorkerData] = useState();
   const [connectionData, setConnectionData] = useState('');
 
@@ -44,7 +44,7 @@ const ScanBlocks = () => {
               connectionData={connectionData}
             />
             <ScreenBlock />
-            {/* <OtherBlock /> */}
+            <OtherBlock />
           </div>
         </>
       ) : (
@@ -56,4 +56,4 @@ const ScanBlocks = () => {
   );
 };
 
-export default ScanBlocks;
+export default Blocks;
diff --git a/frontend/src/components/ConnectionBlock.js b/frontend/src/components/ConnectionBlock.js
index d2bc433..479e3d7 100644
--- a/frontend/src/components/ConnectionBlock.js
+++ b/frontend/src/components/ConnectionBlock.js
@@ -1,16 +1,16 @@
-import ScanBlock from './Block';
+import Block from './Block';
 import Table from './Table';
 import { getConnection } from '../utils/connection';
 
 const LocationBlock = ({ connectionData }) => (
-  <ScanBlock>
+  <Block>
     <h1>Connection</h1>
     <Table data={getConnection(connectionData)} />
     <p>
       <b>Explanation:</b> Your IP address reveals information about your
       connection. Using a VPN or Tor will hide your connection info.
     </p>
-  </ScanBlock>
+  </Block>
 );
 
 export default LocationBlock;
diff --git a/frontend/src/components/FiltersBlock.js b/frontend/src/components/FiltersBlock.js
index e00bea8..44ecf52 100644
--- a/frontend/src/components/FiltersBlock.js
+++ b/frontend/src/components/FiltersBlock.js
@@ -1,5 +1,5 @@
 import { useState, useEffect } from 'react';
-import ScanBlock from './Block';
+import Block from './Block';
 import Table from './Table';
 
 const FiltersBlock = () => {
@@ -24,7 +24,7 @@ const FiltersBlock = () => {
   ];
 
   return (
-    <ScanBlock>
+    <Block>
       <h1>Content Filters</h1>
       <Table data={data} />
       <p>
@@ -32,7 +32,7 @@ const FiltersBlock = () => {
         you against certain methods of tracking, it can also be used as another
         identification metric.
       </p>
-    </ScanBlock>
+    </Block>
   );
 };
 
diff --git a/frontend/src/components/FingerprintBlock.js b/frontend/src/components/FingerprintBlock.js
index 94dfbac..805487e 100644
--- a/frontend/src/components/FingerprintBlock.js
+++ b/frontend/src/components/FingerprintBlock.js
@@ -1,5 +1,5 @@
 import { useState } from 'react';
-import ScanBlock from './Block';
+import Block from './Block';
 import Table from './Table';
 import {
   getHardware,
@@ -18,7 +18,7 @@ const FingerprintBlock = () => {
   const hash = getHash([...getHardware(), ...getWebGL(), ...getSoftware()]);
   getName(hash, setName, setLoad);
   return (
-    <ScanBlock>
+    <Block>
       <h1>Fingerprint</h1>
       {load && (
         <>
@@ -49,7 +49,7 @@ const FingerprintBlock = () => {
           <input type="submit" id="saveButton" value="Save" maxLength="100" />
         </form>
       )}
-    </ScanBlock>
+    </Block>
   );
 };
 
diff --git a/frontend/src/components/FontsBlock.js b/frontend/src/components/FontsBlock.js
index 1c85c35..ada90a2 100644
--- a/frontend/src/components/FontsBlock.js
+++ b/frontend/src/components/FontsBlock.js
@@ -1,5 +1,5 @@
 import { useEffect } from 'react';
-import ScanBlock from './ScanBlock';
+import Block from './Block';
 import fontList from '../fontList.json';
 
 const FontsBlock = () => {
@@ -45,7 +45,7 @@ const FontsBlock = () => {
   }, []);
 
   return (
-    <ScanBlock>
+    <Block>
       <h1>System Fonts</h1>
       <div className="fonts boxWrap" />
       <p>
@@ -54,7 +54,7 @@ const FontsBlock = () => {
         fonts that you have installed that aren&apos;t common for your system
         can make you easily identifiable.
       </p>
-    </ScanBlock>
+    </Block>
   );
 };
 
diff --git a/frontend/src/components/HardwareBlock.js b/frontend/src/components/HardwareBlock.js
index 12b68b6..bba5bf8 100644
--- a/frontend/src/components/HardwareBlock.js
+++ b/frontend/src/components/HardwareBlock.js
@@ -1,5 +1,5 @@
 import { useState, useEffect } from 'react';
-import ScanBlock from './Block';
+import Block from './Block';
 import Table from './Table';
 import { getHardware, getWebGL, getBattery } from './mainOld';
 
@@ -13,14 +13,14 @@ const HardwareBlock = () => {
   }, []);
 
   return (
-    <ScanBlock>
+    <Block>
       <h1>Hardware</h1>
       <Table data={data} />
       <p>
         <b>Explanation:</b> JavaScript can be used to find information about
         your hardware. This information can be used to create a fingerprint.
       </p>
-    </ScanBlock>
+    </Block>
   );
 };
 
diff --git a/frontend/src/components/IntlBlock.js b/frontend/src/components/IntlBlock.js
index ba90f36..4614869 100644
--- a/frontend/src/components/IntlBlock.js
+++ b/frontend/src/components/IntlBlock.js
@@ -1,12 +1,12 @@
 /* eslint-disable no-unused-vars */
 import { useState, useEffect } from 'react';
-import ScanBlock from './Block';
+import Block from './Block';
 import Table from './Table';
 import { getIntl } from './main';
 import { ReactComponent as CheckCircle } from '../images/checkCircle.svg';
 
 const DateBlock = () => (
-  <ScanBlock>
+  <Block>
     <h1>Intl</h1>
     <Table type="navigator" data={getIntl()} />
 
@@ -29,7 +29,7 @@ const DateBlock = () => (
       <b>Explanation:</b> JavaScript can be used to find information about your
       hardware. This information can be used to create a fingerprint.
     </p>
-  </ScanBlock>
+  </Block>
 );
 
 export default DateBlock;
diff --git a/frontend/src/components/LocationBlock.js b/frontend/src/components/LocationBlock.js
index 9fb484f..d9ef891 100644
--- a/frontend/src/components/LocationBlock.js
+++ b/frontend/src/components/LocationBlock.js
@@ -1,9 +1,9 @@
-import ScanBlock from './Block';
+import Block from './Block';
 import Table from './Table';
 import { getMap, getLocation } from '../utils/connection';
 
 const LocationBlock = ({ connectionData, workerData }) => (
-  <ScanBlock>
+  <Block>
     <h1>Location</h1>
     <img src={getMap(connectionData)} alt="Map of current location" />
     <Table data={getLocation(connectionData, workerData)} />
@@ -11,7 +11,7 @@ const LocationBlock = ({ connectionData, workerData }) => (
       <b>Explanation:</b> Your IP address can be used to determine your
       location. Using a VPN or Tor will hide your true location.
     </p>
-  </ScanBlock>
+  </Block>
 );
 
 export default LocationBlock;
diff --git a/frontend/src/components/NavigatorBlock.js b/frontend/src/components/NavigatorBlock.js
index 84ccc52..401a977 100644
--- a/frontend/src/components/NavigatorBlock.js
+++ b/frontend/src/components/NavigatorBlock.js
@@ -1,16 +1,16 @@
-import ScanBlock from './Block';
+import Block from './Block';
 import Table from './Table';
 import getNavigator from '../utils/navigator';
 
 const NavigatorBlock = ({ workerData }) => (
-  <ScanBlock>
+  <Block>
     <h1>Navigator</h1>
     <Table data={getNavigator(workerData)} />
     <p>
       <b>Explanation:</b> JavaScript can be used to find information about your
       hardware. This information can be used to create a fingerprint.
     </p>
-  </ScanBlock>
+  </Block>
 );
 
 export default NavigatorBlock;
diff --git a/frontend/src/components/OtherBloc2.js b/frontend/src/components/OtherBloc2.js
new file mode 100644
index 0000000..b6cc975
--- /dev/null
+++ b/frontend/src/components/OtherBloc2.js
@@ -0,0 +1,77 @@
+/* eslint-disable arrow-body-style */
+/* eslint-disable no-unused-vars */
+import { useState, useEffect } from 'react';
+import Block from './Block';
+import { detectTor } from './main';
+
+const OtherBlock = () => {
+  const [adBlockDetected, setAdBlockDetected] = useState(false);
+  const [batteryLevel, setBatteryLevel] = useState();
+  const [batteryStatus, setBatteryStatus] = useState();
+
+  useEffect(() => {
+    fetch('https://www3.doubleclick.net', {
+      method: 'HEAD',
+      mode: 'no-cors',
+      cache: 'no-store',
+    }).catch(() => {
+      setAdBlockDetected(true);
+    });
+
+    navigator.getBattery().then((res) => {
+      setBatteryLevel(`${Math.round(res.level * 100)}%`);
+      setBatteryStatus(res.charging ? 'Charging' : 'Not charging');
+    });
+  }, []);
+
+  return (
+    <Block>
+      <h1>Other</h1>
+      <div className="tableWrap">
+        <table>
+          <tbody>
+            <tr>
+              <td>Brave browser</td>
+              <td>{navigator.brave ? 'True' : 'False'}</td>
+            </tr>
+          </tbody>
+          <tbody>
+            <tr>
+              <td>Tor Browser</td>
+              <td>{detectTor() ? 'True' : 'False'}</td>
+            </tr>
+          </tbody>
+          <tbody>
+            <tr>
+              <td>Adblock</td>
+              <td>{adBlockDetected ? 'True' : 'False'}</td>
+            </tr>
+          </tbody>
+          <tbody>
+            <tr>
+              <td>Timezone offset</td>
+              <td>{new Date().getTimezoneOffset()}</td>
+            </tr>
+          </tbody>
+          <tbody>
+            <tr>
+              <td>Battery level</td>
+              <td>{batteryLevel}</td>
+            </tr>
+          </tbody>
+          <tbody>
+            <tr>
+              <td>Battery status</td>
+              <td>{batteryStatus}</td>
+            </tr>
+          </tbody>
+        </table>
+      </div>
+      <p>
+        <b>Explanation:</b> JavaScript can be used to find information about
+        your hardware. This information can be used to create a fingerprint.
+      </p>
+    </Block>
+  );
+};
+export default OtherBlock;
diff --git a/frontend/src/components/OtherBlock.js b/frontend/src/components/OtherBlock.js
index 69737bb..65914e0 100644
--- a/frontend/src/components/OtherBlock.js
+++ b/frontend/src/components/OtherBlock.js
@@ -1,77 +1,43 @@
-/* eslint-disable arrow-body-style */
 /* eslint-disable no-unused-vars */
 import { useState, useEffect } from 'react';
-import ScanBlock from './Block';
-import { detectTor } from './main';
 
-const OtherBlock = () => {
-  const [adBlockDetected, setAdBlockDetected] = useState(false);
-  const [batteryLevel, setBatteryLevel] = useState();
-  const [batteryStatus, setBatteryStatus] = useState();
+import Block from './Block';
+import Table from './Table';
+import getOther from '../utils/other';
+
+const OtherBlock = ({ workerAgent }) => {
+  const [adBlock, setAdBlock] = useState();
+  const [battery, setBattery] = useState();
 
   useEffect(() => {
     fetch('https://www3.doubleclick.net', {
       method: 'HEAD',
       mode: 'no-cors',
       cache: 'no-store',
-    }).catch(() => {
-      setAdBlockDetected(true);
-    });
-
+    })
+      .then(() => {
+        setAdBlock(false);
+      })
+      .catch(() => {
+        setAdBlock(true);
+      });
     navigator.getBattery().then((res) => {
-      setBatteryLevel(`${Math.round(res.level * 100)}%`);
-      setBatteryStatus(res.charging ? 'Charging' : 'Not charging');
+      setBattery(res);
     });
   }, []);
 
   return (
-    <ScanBlock>
+    <Block>
       <h1>Other</h1>
-      <div className="tableWrap">
-        <table>
-          <tbody>
-            <tr>
-              <td>Brave browser</td>
-              <td>{navigator.brave ? 'True' : 'False'}</td>
-            </tr>
-          </tbody>
-          <tbody>
-            <tr>
-              <td>Tor Browser</td>
-              <td>{detectTor() ? 'True' : 'False'}</td>
-            </tr>
-          </tbody>
-          <tbody>
-            <tr>
-              <td>Adblock</td>
-              <td>{adBlockDetected ? 'True' : 'False'}</td>
-            </tr>
-          </tbody>
-          <tbody>
-            <tr>
-              <td>Timezone offset</td>
-              <td>{new Date().getTimezoneOffset()}</td>
-            </tr>
-          </tbody>
-          <tbody>
-            <tr>
-              <td>Battery level</td>
-              <td>{batteryLevel}</td>
-            </tr>
-          </tbody>
-          <tbody>
-            <tr>
-              <td>Battery status</td>
-              <td>{batteryStatus}</td>
-            </tr>
-          </tbody>
-        </table>
-      </div>
+      {battery && adBlock !== undefined && (
+        <Table data={getOther(battery, adBlock)} />
+      )}
       <p>
         <b>Explanation:</b> JavaScript can be used to find information about
         your hardware. This information can be used to create a fingerprint.
       </p>
-    </ScanBlock>
+    </Block>
   );
 };
+
 export default OtherBlock;
diff --git a/frontend/src/components/ScreenBlock.js b/frontend/src/components/ScreenBlock.js
index 8504921..b5b2862 100644
--- a/frontend/src/components/ScreenBlock.js
+++ b/frontend/src/components/ScreenBlock.js
@@ -1,16 +1,16 @@
-import ScanBlock from './Block';
+import Block from './Block';
 import Table from './Table';
 import getScreen from '../utils/screen';
 
 const ScreenBlock = () => (
-  <ScanBlock>
+  <Block>
     <h1>Screen</h1>
     <Table type="screen" data={getScreen()} />
     <p>
       <b>Explanation:</b> JavaScript can be used to find information about your
       hardware. This information can be used to create a fingerprint.
     </p>
-  </ScanBlock>
+  </Block>
 );
 
 export default ScreenBlock;
diff --git a/frontend/src/components/SoftwareBlock.js b/frontend/src/components/SoftwareBlock.js
index 7ecae12..89af4c7 100644
--- a/frontend/src/components/SoftwareBlock.js
+++ b/frontend/src/components/SoftwareBlock.js
@@ -1,16 +1,16 @@
-import ScanBlock from './Block';
+import Block from './Block';
 import Table from './Table';
 import { getSoftware } from './mainOld';
 
 const SoftwareBlock = () => (
-  <ScanBlock>
+  <Block>
     <h1>Software</h1>
     <Table data={getSoftware()} />
     <p>
       <b>Explanation:</b> JavaScript can be used to find information about your
       software. This information can be used to create a fingerprint.
     </p>
-  </ScanBlock>
+  </Block>
 );
 
 export default SoftwareBlock;
diff --git a/frontend/src/components/StartBlock.js b/frontend/src/components/StartBlock.js
index 08db904..1e720d3 100644
--- a/frontend/src/components/StartBlock.js
+++ b/frontend/src/components/StartBlock.js
@@ -1,5 +1,5 @@
 import ContentList from './ContentList';
-import ScanBlock from './ScanBlock';
+import Block from './Block';
 
 const contentItems = [
   {
@@ -20,7 +20,7 @@ const contentItems = [
 ];
 
 const StartBlock = ({ setScan }) => (
-  <ScanBlock>
+  <Block>
     <h2>About</h2>
     <div className="contentBody">
       Vytal shows you what traces your browser leaves behind while surfing the
@@ -34,7 +34,7 @@ const StartBlock = ({ setScan }) => (
       id="scanButton"
       value="Scan Browser"
     />
-  </ScanBlock>
+  </Block>
 );
 
 export default StartBlock;
diff --git a/frontend/src/components/UserAgentBlock.js b/frontend/src/components/UserAgentBlock.js
index 3101290..92d357a 100644
--- a/frontend/src/components/UserAgentBlock.js
+++ b/frontend/src/components/UserAgentBlock.js
@@ -1,17 +1,16 @@
-/* eslint-disable no-unused-vars */
-import ScanBlock from './Block';
+import Block from './Block';
 import Table from './Table';
 import getUserAgent from '../utils/userAgent';
 
 const UserAgentBlock = ({ workerAgent }) => (
-  <ScanBlock>
+  <Block>
     <h1>User Agent</h1>
     <Table data={getUserAgent(workerAgent)} />
     <p>
       <b>Explanation:</b> JavaScript can be used to find information about your
       hardware. This information can be used to create a fingerprint.
     </p>
-  </ScanBlock>
+  </Block>
 );
 
 export default UserAgentBlock;
diff --git a/frontend/src/utils/other.js b/frontend/src/utils/other.js
new file mode 100644
index 0000000..a7780ea
--- /dev/null
+++ b/frontend/src/utils/other.js
@@ -0,0 +1,66 @@
+/* eslint-disable no-unused-vars */
+import { checkWebWorker } from './common';
+
+const detectTor = () => {
+  const date = new Date();
+  if (
+    navigator.plugins.length === 0 &&
+    date.getTimezoneOffset() === 0 &&
+    window.outerWidth === window.screen.availWidth &&
+    window.outerHeight === window.screen.availHeight
+  ) {
+    return true;
+  }
+  return false;
+};
+
+const checkDatePrototype = () => {
+  if (!Date.prototype.setDate.toString().includes('[native code]')) {
+    return 'Failed Date.prototype.setDate.toString()';
+  }
+  return null;
+};
+
+// Returns object with location data
+const getOther = (battery, adBlock) => {
+  const workerAgentParsed = 1;
+  return [
+    {
+      key: 'Brave browser',
+      value: navigator.brave ? 'True' : 'False',
+      issues: [],
+    },
+    {
+      key: 'Tor browser',
+      value: detectTor() ? 'True' : 'False',
+      issues: [],
+    },
+    {
+      key: 'Adblock',
+      value: adBlock ? 'True' : 'False',
+      issues: [],
+    },
+    {
+      key: 'Date',
+      value: new Date().toString(),
+      issues: [checkDatePrototype()],
+    },
+    {
+      key: 'Timezone offset',
+      value: new Date().getTimezoneOffset(),
+      issues: [checkDatePrototype()],
+    },
+    {
+      key: 'Battery level',
+      value: `${Math.round(battery.level * 100)}%`,
+      issues: [],
+    },
+    {
+      key: 'Battery status',
+      value: battery.charging ? 'Charging' : 'Not charging',
+      issues: [],
+    },
+  ];
+};
+
+export default getOther;
diff --git a/frontend/src/utils/userAgent.js b/frontend/src/utils/userAgent.js
index 9b19b98..7e2994d 100644
--- a/frontend/src/utils/userAgent.js
+++ b/frontend/src/utils/userAgent.js
@@ -1,6 +1,3 @@
-/* eslint-disable no-unused-vars */
-/* eslint-disable import/prefer-default-export */
-
 import Bowser from 'bowser';
 import { checkWebWorker } from './common';
 
@@ -14,7 +11,6 @@ const getUserAgentData = (key, userAgent, workerAgent) => ({
 const getUserAgent = (workerAgent) => {
   const userAgentParsed = Bowser.parse(navigator.userAgent);
   const workerAgentParsed = Bowser.parse(workerAgent);
-  console.log(userAgentParsed, workerAgentParsed);
   return [
     getUserAgentData(
       'Browser',

From 82b5a1c06ec3079b509ff84dba22b857e12386a0 Mon Sep 17 00:00:00 2001
From: z0ccc <z0cccccccc@gmail.com>
Date: Tue, 28 Sep 2021 11:03:06 -0400
Subject: [PATCH 37/54] Added issue detection to other block items

---
 frontend/src/components/Blocks.js     |  2 +-
 frontend/src/components/OtherBloc2.js | 77 ---------------------------
 frontend/src/components/OtherBlock.js |  4 +-
 frontend/src/utils/other.js           | 17 ++++--
 4 files changed, 16 insertions(+), 84 deletions(-)
 delete mode 100644 frontend/src/components/OtherBloc2.js

diff --git a/frontend/src/components/Blocks.js b/frontend/src/components/Blocks.js
index 7565a41..472cb24 100644
--- a/frontend/src/components/Blocks.js
+++ b/frontend/src/components/Blocks.js
@@ -44,7 +44,7 @@ const Blocks = () => {
               connectionData={connectionData}
             />
             <ScreenBlock />
-            <OtherBlock />
+            <OtherBlock workerData={workerData} />
           </div>
         </>
       ) : (
diff --git a/frontend/src/components/OtherBloc2.js b/frontend/src/components/OtherBloc2.js
deleted file mode 100644
index b6cc975..0000000
--- a/frontend/src/components/OtherBloc2.js
+++ /dev/null
@@ -1,77 +0,0 @@
-/* eslint-disable arrow-body-style */
-/* eslint-disable no-unused-vars */
-import { useState, useEffect } from 'react';
-import Block from './Block';
-import { detectTor } from './main';
-
-const OtherBlock = () => {
-  const [adBlockDetected, setAdBlockDetected] = useState(false);
-  const [batteryLevel, setBatteryLevel] = useState();
-  const [batteryStatus, setBatteryStatus] = useState();
-
-  useEffect(() => {
-    fetch('https://www3.doubleclick.net', {
-      method: 'HEAD',
-      mode: 'no-cors',
-      cache: 'no-store',
-    }).catch(() => {
-      setAdBlockDetected(true);
-    });
-
-    navigator.getBattery().then((res) => {
-      setBatteryLevel(`${Math.round(res.level * 100)}%`);
-      setBatteryStatus(res.charging ? 'Charging' : 'Not charging');
-    });
-  }, []);
-
-  return (
-    <Block>
-      <h1>Other</h1>
-      <div className="tableWrap">
-        <table>
-          <tbody>
-            <tr>
-              <td>Brave browser</td>
-              <td>{navigator.brave ? 'True' : 'False'}</td>
-            </tr>
-          </tbody>
-          <tbody>
-            <tr>
-              <td>Tor Browser</td>
-              <td>{detectTor() ? 'True' : 'False'}</td>
-            </tr>
-          </tbody>
-          <tbody>
-            <tr>
-              <td>Adblock</td>
-              <td>{adBlockDetected ? 'True' : 'False'}</td>
-            </tr>
-          </tbody>
-          <tbody>
-            <tr>
-              <td>Timezone offset</td>
-              <td>{new Date().getTimezoneOffset()}</td>
-            </tr>
-          </tbody>
-          <tbody>
-            <tr>
-              <td>Battery level</td>
-              <td>{batteryLevel}</td>
-            </tr>
-          </tbody>
-          <tbody>
-            <tr>
-              <td>Battery status</td>
-              <td>{batteryStatus}</td>
-            </tr>
-          </tbody>
-        </table>
-      </div>
-      <p>
-        <b>Explanation:</b> JavaScript can be used to find information about
-        your hardware. This information can be used to create a fingerprint.
-      </p>
-    </Block>
-  );
-};
-export default OtherBlock;
diff --git a/frontend/src/components/OtherBlock.js b/frontend/src/components/OtherBlock.js
index 65914e0..ae3efb0 100644
--- a/frontend/src/components/OtherBlock.js
+++ b/frontend/src/components/OtherBlock.js
@@ -5,7 +5,7 @@ import Block from './Block';
 import Table from './Table';
 import getOther from '../utils/other';
 
-const OtherBlock = ({ workerAgent }) => {
+const OtherBlock = ({ workerData }) => {
   const [adBlock, setAdBlock] = useState();
   const [battery, setBattery] = useState();
 
@@ -30,7 +30,7 @@ const OtherBlock = ({ workerAgent }) => {
     <Block>
       <h1>Other</h1>
       {battery && adBlock !== undefined && (
-        <Table data={getOther(battery, adBlock)} />
+        <Table data={getOther(battery, adBlock, workerData)} />
       )}
       <p>
         <b>Explanation:</b> JavaScript can be used to find information about
diff --git a/frontend/src/utils/other.js b/frontend/src/utils/other.js
index a7780ea..907df1f 100644
--- a/frontend/src/utils/other.js
+++ b/frontend/src/utils/other.js
@@ -22,13 +22,13 @@ const checkDatePrototype = () => {
 };
 
 // Returns object with location data
-const getOther = (battery, adBlock) => {
+const getOther = (battery, adBlock, workerData) => {
   const workerAgentParsed = 1;
   return [
     {
       key: 'Brave browser',
       value: navigator.brave ? 'True' : 'False',
-      issues: [],
+      issues: [checkWebWorker],
     },
     {
       key: 'Tor browser',
@@ -43,12 +43,21 @@ const getOther = (battery, adBlock) => {
     {
       key: 'Date',
       value: new Date().toString(),
-      issues: [checkDatePrototype()],
+      issues: [
+        checkDatePrototype(),
+        checkWebWorker(new Date().toString(), workerData.date),
+      ],
     },
     {
       key: 'Timezone offset',
       value: new Date().getTimezoneOffset(),
-      issues: [checkDatePrototype()],
+      issues: [
+        checkDatePrototype(),
+        checkWebWorker(
+          new Date().getTimezoneOffset(),
+          workerData.timezoneOffset
+        ),
+      ],
     },
     {
       key: 'Battery level',

From 9cf516f87b3f4d8285baaacde8d2e29940060458 Mon Sep 17 00:00:00 2001
From: z0ccc <z0cccccccc@gmail.com>
Date: Tue, 28 Sep 2021 12:41:13 -0400
Subject: [PATCH 38/54] Added intl block

---
 frontend/src/components/Blocks.js    |  2 +-
 frontend/src/components/IntlBlock.js | 26 ++++----------------------
 frontend/src/utils/intl.js           | 24 ++++++++++++++++++++++++
 3 files changed, 29 insertions(+), 23 deletions(-)
 create mode 100644 frontend/src/utils/intl.js

diff --git a/frontend/src/components/Blocks.js b/frontend/src/components/Blocks.js
index 472cb24..8901bed 100644
--- a/frontend/src/components/Blocks.js
+++ b/frontend/src/components/Blocks.js
@@ -32,7 +32,7 @@ const Blocks = () => {
             {/* <FingerprintBlock /> */}
             <NavigatorBlock workerData={workerData} />
             <UserAgentBlock workerAgent={workerData.userAgent} />
-            {/* <IntlBlock /> */}
+            <IntlBlock workerData={workerData} />
           </div>
           <div className="centerBlockInner">
             <LocationBlock
diff --git a/frontend/src/components/IntlBlock.js b/frontend/src/components/IntlBlock.js
index 4614869..549aa3f 100644
--- a/frontend/src/components/IntlBlock.js
+++ b/frontend/src/components/IntlBlock.js
@@ -1,30 +1,12 @@
 /* eslint-disable no-unused-vars */
-import { useState, useEffect } from 'react';
 import Block from './Block';
 import Table from './Table';
-import { getIntl } from './main';
-import { ReactComponent as CheckCircle } from '../images/checkCircle.svg';
+import getIntl from '../utils/intl';
 
-const DateBlock = () => (
+const IntlBlock = ({ workerData }) => (
   <Block>
     <h1>Intl</h1>
-    <Table type="navigator" data={getIntl()} />
-
-    {/* <div className="tableWrap">
-      <table>
-        {Object.entries(Intl.DateTimeFormat().resolvedOptions()).map((item) => (
-          <tbody key={item[0]}>
-            <tr>
-              <td>{item[0]}</td>
-              <td>{item[1]}</td>
-              <td>
-                <CheckCircle className="circleButton" />
-              </td>
-            </tr>
-          </tbody>
-        ))}
-      </table>
-    </div> */}
+    <Table data={getIntl(workerData)} />
     <p>
       <b>Explanation:</b> JavaScript can be used to find information about your
       hardware. This information can be used to create a fingerprint.
@@ -32,4 +14,4 @@ const DateBlock = () => (
   </Block>
 );
 
-export default DateBlock;
+export default IntlBlock;
diff --git a/frontend/src/utils/intl.js b/frontend/src/utils/intl.js
new file mode 100644
index 0000000..bb58eae
--- /dev/null
+++ b/frontend/src/utils/intl.js
@@ -0,0 +1,24 @@
+import { checkWebWorker } from './common';
+
+const getLocale = (locale) => ({
+  key: 'Locale',
+  value: Intl.DateTimeFormat().resolvedOptions().locale,
+  issues: [
+    checkWebWorker(Intl.DateTimeFormat().resolvedOptions().locale, locale),
+  ],
+});
+
+const getTimezone = (timeZone) => ({
+  key: 'Timezone',
+  value: Intl.DateTimeFormat().resolvedOptions().timeZone,
+  issues: [
+    checkWebWorker(Intl.DateTimeFormat().resolvedOptions().timeZone, timeZone),
+  ],
+});
+
+const getIntl = (workerData) => [
+  getLocale(workerData.locale),
+  getTimezone(workerData.timeZone),
+];
+
+export default getIntl;

From 71461592087f9be9e123eb009fb58d0d3404f520 Mon Sep 17 00:00:00 2001
From: z0ccc <z0cccccccc@gmail.com>
Date: Tue, 28 Sep 2021 15:56:04 -0400
Subject: [PATCH 39/54] Generating hash from data

---
 frontend/public/worker.js                    |  1 -
 frontend/src/components/Blocks.js            |  2 +-
 frontend/src/components/FingerprintBlock.js  | 46 ++--------
 frontend/src/components/FingerprintBlock2.js | 61 +++++++++++++
 frontend/src/utils/fingerprint.js            |  5 ++
 frontend/src/utils/other.js                  | 90 +++++++++-----------
 6 files changed, 115 insertions(+), 90 deletions(-)
 create mode 100644 frontend/src/components/FingerprintBlock2.js
 create mode 100644 frontend/src/utils/fingerprint.js

diff --git a/frontend/public/worker.js b/frontend/public/worker.js
index 51662e5..e988ea8 100644
--- a/frontend/public/worker.js
+++ b/frontend/public/worker.js
@@ -2,7 +2,6 @@ const data = {
   locale: Intl.DateTimeFormat().resolvedOptions().locale,
   timeZone: Intl.DateTimeFormat().resolvedOptions().timeZone,
   timezoneOffset: new Date().getTimezoneOffset(),
-  date: new Date().toString(),
   deviceMemory: navigator.deviceMemory,
   hardwareConcurrency: navigator.hardwareConcurrency,
   platform: navigator.platform,
diff --git a/frontend/src/components/Blocks.js b/frontend/src/components/Blocks.js
index 8901bed..36af9d2 100644
--- a/frontend/src/components/Blocks.js
+++ b/frontend/src/components/Blocks.js
@@ -29,7 +29,7 @@ const Blocks = () => {
       {connectionData ? (
         <>
           <div className="centerBlockInner">
-            {/* <FingerprintBlock /> */}
+            <FingerprintBlock workerData={workerData} />
             <NavigatorBlock workerData={workerData} />
             <UserAgentBlock workerAgent={workerData.userAgent} />
             <IntlBlock workerData={workerData} />
diff --git a/frontend/src/components/FingerprintBlock.js b/frontend/src/components/FingerprintBlock.js
index 805487e..a3e0bb9 100644
--- a/frontend/src/components/FingerprintBlock.js
+++ b/frontend/src/components/FingerprintBlock.js
@@ -1,54 +1,24 @@
+/* eslint-disable no-unused-vars */
 import { useState } from 'react';
 import Block from './Block';
 import Table from './Table';
-import {
-  getHardware,
-  getWebGL,
-  getSoftware,
-  getFingerprint,
-  getHash,
-  getName,
-  handleSave,
-} from './mainOld';
+import getHash from '../utils/fingerprint';
 
-const FingerprintBlock = () => {
-  const [name, setName] = useState('');
-  const [load, setLoad] = useState(false);
-  const [saved, setSaved] = useState('');
-  const hash = getHash([...getHardware(), ...getWebGL(), ...getSoftware()]);
-  getName(hash, setName, setLoad);
+const FingerprintBlock = ({ workerData }) => {
+  const hash = getHash(workerData);
+  console.log(hash);
   return (
     <Block>
       <h1>Fingerprint</h1>
-      {load && (
-        <>
-          {name ? (
-            <Table data={getFingerprint(name, hash)} />
-          ) : (
-            <div className="boxWrap">
-              <div className="hash">{hash}</div>
-            </div>
-          )}
-        </>
-      )}
+      <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
         use private mode the hash will stay the same. Enter your name below and
         reload the page in private mode to test it out.
       </p>
-      {saved ? (
-        <p>Success! Re-scan browser.</p>
-      ) : (
-        <form
-          onSubmit={(e) => {
-            handleSave(e, hash, setSaved);
-          }}
-        >
-          <input type="text" id="name" name="name" placeholder="Enter name" />
-          <input type="submit" id="saveButton" value="Save" maxLength="100" />
-        </form>
-      )}
     </Block>
   );
 };
diff --git a/frontend/src/components/FingerprintBlock2.js b/frontend/src/components/FingerprintBlock2.js
new file mode 100644
index 0000000..a67830f
--- /dev/null
+++ b/frontend/src/components/FingerprintBlock2.js
@@ -0,0 +1,61 @@
+import { useState } from 'react';
+import Block from './Block';
+import Table from './Table';
+import {
+  getHardware,
+  getWebGL,
+  getSoftware,
+  getFingerprint,
+  getHash,
+  getName,
+  handleSave,
+} from './mainOld';
+
+const FingerprintBlock = () => {
+  const [name, setName] = useState('');
+  const [load, setLoad] = useState(false);
+  const [saved, setSaved] = useState('');
+  const hash = getHash([...getHardware(), ...getWebGL(), ...getSoftware()]);
+  getName(hash, setName, setLoad);
+  return (
+    <Block>
+      <h1>Fingerprint</h1>
+      {load && (
+        <>
+          {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
+        use private mode the hash will stay the same. Enter your name below and
+        reload the page in private mode to test it out.
+      </p>
+      {saved ? (
+        <p>Success! Re-scan browser.</p>
+      ) : (
+        <form
+          onSubmit={(e) => {
+            handleSave(e, hash, setSaved);
+          }}
+        >
+          <input
+            type="text"
+            id="name"
+            name="name"
+            placeholder="Enter signature"
+          />
+          <input type="submit" id="saveButton" value="Save" maxLength="100" />
+        </form>
+      )}
+    </Block>
+  );
+};
+
+export default FingerprintBlock;
diff --git a/frontend/src/utils/fingerprint.js b/frontend/src/utils/fingerprint.js
new file mode 100644
index 0000000..7a4ea57
--- /dev/null
+++ b/frontend/src/utils/fingerprint.js
@@ -0,0 +1,5 @@
+import md5 from 'crypto-js/md5';
+
+const getHash = (data) => md5(JSON.stringify(data)).toString();
+
+export default getHash;
diff --git a/frontend/src/utils/other.js b/frontend/src/utils/other.js
index 907df1f..751860d 100644
--- a/frontend/src/utils/other.js
+++ b/frontend/src/utils/other.js
@@ -1,4 +1,3 @@
-/* eslint-disable no-unused-vars */
 import { checkWebWorker } from './common';
 
 const detectTor = () => {
@@ -22,54 +21,45 @@ const checkDatePrototype = () => {
 };
 
 // Returns object with location data
-const getOther = (battery, adBlock, workerData) => {
-  const workerAgentParsed = 1;
-  return [
-    {
-      key: 'Brave browser',
-      value: navigator.brave ? 'True' : 'False',
-      issues: [checkWebWorker],
-    },
-    {
-      key: 'Tor browser',
-      value: detectTor() ? 'True' : 'False',
-      issues: [],
-    },
-    {
-      key: 'Adblock',
-      value: adBlock ? 'True' : 'False',
-      issues: [],
-    },
-    {
-      key: 'Date',
-      value: new Date().toString(),
-      issues: [
-        checkDatePrototype(),
-        checkWebWorker(new Date().toString(), workerData.date),
-      ],
-    },
-    {
-      key: 'Timezone offset',
-      value: new Date().getTimezoneOffset(),
-      issues: [
-        checkDatePrototype(),
-        checkWebWorker(
-          new Date().getTimezoneOffset(),
-          workerData.timezoneOffset
-        ),
-      ],
-    },
-    {
-      key: 'Battery level',
-      value: `${Math.round(battery.level * 100)}%`,
-      issues: [],
-    },
-    {
-      key: 'Battery status',
-      value: battery.charging ? 'Charging' : 'Not charging',
-      issues: [],
-    },
-  ];
-};
+const getOther = (battery, adBlock, workerData) => [
+  {
+    key: 'Brave browser',
+    value: navigator.brave ? 'True' : 'False',
+    issues: [checkWebWorker],
+  },
+  {
+    key: 'Tor browser',
+    value: detectTor() ? 'True' : 'False',
+    issues: [],
+  },
+  {
+    key: 'Adblock',
+    value: adBlock ? 'True' : 'False',
+    issues: [],
+  },
+  {
+    key: 'Date',
+    value: new Date().toString(),
+    issues: [checkDatePrototype()],
+  },
+  {
+    key: 'Timezone offset',
+    value: new Date().getTimezoneOffset(),
+    issues: [
+      checkDatePrototype(),
+      checkWebWorker(new Date().getTimezoneOffset(), workerData.timezoneOffset),
+    ],
+  },
+  {
+    key: 'Battery level',
+    value: `${Math.round(battery.level * 100)}%`,
+    issues: [],
+  },
+  {
+    key: 'Battery status',
+    value: battery.charging ? 'Charging' : 'Not charging',
+    issues: [],
+  },
+];
 
 export default getOther;

From e4c7448b0b8114c5dd35dacbd8cb71437340b8c2 Mon Sep 17 00:00:00 2001
From: z0ccc <z0cccccccc@gmail.com>
Date: Tue, 28 Sep 2021 16:27:34 -0400
Subject: [PATCH 40/54] Added signature form

---
 frontend/src/components/FingerprintBlock.js | 16 +++++++++++++++-
 1 file changed, 15 insertions(+), 1 deletion(-)

diff --git a/frontend/src/components/FingerprintBlock.js b/frontend/src/components/FingerprintBlock.js
index a3e0bb9..59ae30f 100644
--- a/frontend/src/components/FingerprintBlock.js
+++ b/frontend/src/components/FingerprintBlock.js
@@ -5,8 +5,9 @@ import Table from './Table';
 import getHash from '../utils/fingerprint';
 
 const FingerprintBlock = ({ workerData }) => {
+  const [signature, setSignature] = useState();
+
   const hash = getHash(workerData);
-  console.log(hash);
   return (
     <Block>
       <h1>Fingerprint</h1>
@@ -19,6 +20,19 @@ const FingerprintBlock = ({ workerData }) => {
         use private mode the hash will stay the same. Enter your name below and
         reload the page in private mode to test it out.
       </p>
+      {signature ? (
+        <p>Success! Reload browser.</p>
+      ) : (
+        <form onSubmit={(e) => setSignature(e.target[0].value)}>
+          <input
+            type="text"
+            id="name"
+            name="name"
+            placeholder="Enter signature"
+          />
+          <input type="submit" id="saveButton" value="Save" maxLength="100" />
+        </form>
+      )}
     </Block>
   );
 };

From 64e30bc855d4421970ec407331cd81a999a2819d Mon Sep 17 00:00:00 2001
From: z0ccc <z0cccccccc@gmail.com>
Date: Tue, 28 Sep 2021 17:44:21 -0400
Subject: [PATCH 41/54] Finished fingerprint functionality on frontend

---
 frontend/src/components/FingerprintBlock.js | 33 +++++++++++++++----
 frontend/src/utils/fingerprint.js           | 36 ++++++++++++++++++++-
 2 files changed, 62 insertions(+), 7 deletions(-)

diff --git a/frontend/src/components/FingerprintBlock.js b/frontend/src/components/FingerprintBlock.js
index 59ae30f..48c3d3b 100644
--- a/frontend/src/components/FingerprintBlock.js
+++ b/frontend/src/components/FingerprintBlock.js
@@ -1,19 +1,40 @@
 /* eslint-disable no-unused-vars */
-import { useState } from 'react';
+import { useState, useEffect } from 'react';
 import Block from './Block';
 import Table from './Table';
-import getHash from '../utils/fingerprint';
+import {
+  getSignature,
+  postSignature,
+  getHash,
+  getFingerprint,
+} from '../utils/fingerprint';
 
 const FingerprintBlock = ({ workerData }) => {
   const [signature, setSignature] = useState();
 
+  useEffect(() => {
+    if (signature) {
+      postSignature(hash, signature);
+    } else {
+      console.log(signature);
+
+      getSignature(hash, setSignature);
+    }
+  }, [signature]);
+
   const hash = getHash(workerData);
   return (
     <Block>
       <h1>Fingerprint</h1>
-      <div className="boxWrap">
-        <div className="hash">{hash}</div>
-      </div>
+      <>
+        {signature ? (
+          <Table data={getFingerprint(signature, 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
@@ -21,7 +42,7 @@ const FingerprintBlock = ({ workerData }) => {
         reload the page in private mode to test it out.
       </p>
       {signature ? (
-        <p>Success! Reload browser.</p>
+        <p>Success! Reload page.</p>
       ) : (
         <form onSubmit={(e) => setSignature(e.target[0].value)}>
           <input
diff --git a/frontend/src/utils/fingerprint.js b/frontend/src/utils/fingerprint.js
index 7a4ea57..9ad6fe1 100644
--- a/frontend/src/utils/fingerprint.js
+++ b/frontend/src/utils/fingerprint.js
@@ -1,5 +1,39 @@
+import axios from 'axios';
 import md5 from 'crypto-js/md5';
 
+export { getSignature, postSignature, getHash, getFingerprint };
+
+const getSignature = (hash, setSignature) => {
+  console.log('1');
+  axios
+    .get(`https://api.vytal.io/fingerprint/?hash=${hash}`)
+    .then((response) => {
+      console.log(response.data[response.data.length - 1]);
+
+      if (response.data.length !== 0) {
+        setSignature(response.data[response.data.length - 1].name);
+      }
+    });
+};
+
+const postSignature = (hash, signature) => {
+  axios.post('https://api.vytal.io/fingerprint/', {
+    name: signature,
+    hash,
+  });
+};
+
 const getHash = (data) => md5(JSON.stringify(data)).toString();
 
-export default getHash;
+const getFingerprint = (signature, hash) => [
+  {
+    key: 'Signature',
+    value: signature,
+    issues: [],
+  },
+  {
+    key: 'Hash',
+    value: hash,
+    issues: [],
+  },
+];

From 213220e9fbd3f0e873a96eaf2e30f2641442204c Mon Sep 17 00:00:00 2001
From: z0ccc <z0cccccccc@gmail.com>
Date: Tue, 28 Sep 2021 19:44:44 -0400
Subject: [PATCH 42/54] Formatted fingerprint table

---
 frontend/src/components/FingerprintBlock.js | 28 +++++++++------------
 frontend/src/components/ScreenBlock.js      |  2 +-
 frontend/src/styles/App.css                 | 10 +++++---
 3 files changed, 19 insertions(+), 21 deletions(-)

diff --git a/frontend/src/components/FingerprintBlock.js b/frontend/src/components/FingerprintBlock.js
index 48c3d3b..ffc7d06 100644
--- a/frontend/src/components/FingerprintBlock.js
+++ b/frontend/src/components/FingerprintBlock.js
@@ -16,8 +16,6 @@ const FingerprintBlock = ({ workerData }) => {
     if (signature) {
       postSignature(hash, signature);
     } else {
-      console.log(signature);
-
       getSignature(hash, setSignature);
     }
   }, [signature]);
@@ -28,7 +26,9 @@ const FingerprintBlock = ({ workerData }) => {
       <h1>Fingerprint</h1>
       <>
         {signature ? (
-          <Table data={getFingerprint(signature, hash)} />
+          <div className="fingerprintTable">
+            <Table data={getFingerprint(signature, hash)} />
+          </div>
         ) : (
           <div className="boxWrap">
             <div className="hash">{hash}</div>
@@ -41,19 +41,15 @@ const FingerprintBlock = ({ workerData }) => {
         use private mode the hash will stay the same. Enter your name below and
         reload the page in private mode to test it out.
       </p>
-      {signature ? (
-        <p>Success! Reload page.</p>
-      ) : (
-        <form onSubmit={(e) => setSignature(e.target[0].value)}>
-          <input
-            type="text"
-            id="name"
-            name="name"
-            placeholder="Enter signature"
-          />
-          <input type="submit" id="saveButton" value="Save" maxLength="100" />
-        </form>
-      )}
+      <form onSubmit={(e) => setSignature(e.target[0].value)}>
+        <input
+          type="text"
+          id="name"
+          name="name"
+          placeholder="Enter signature"
+        />
+        <input type="submit" id="saveButton" value="Save" maxLength="100" />
+      </form>
     </Block>
   );
 };
diff --git a/frontend/src/components/ScreenBlock.js b/frontend/src/components/ScreenBlock.js
index b5b2862..fa547d7 100644
--- a/frontend/src/components/ScreenBlock.js
+++ b/frontend/src/components/ScreenBlock.js
@@ -5,7 +5,7 @@ import getScreen from '../utils/screen';
 const ScreenBlock = () => (
   <Block>
     <h1>Screen</h1>
-    <Table type="screen" data={getScreen()} />
+    <Table data={getScreen()} />
     <p>
       <b>Explanation:</b> JavaScript can be used to find information about your
       hardware. This information can be used to create a fingerprint.
diff --git a/frontend/src/styles/App.css b/frontend/src/styles/App.css
index a702a74..f1d82b7 100644
--- a/frontend/src/styles/App.css
+++ b/frontend/src/styles/App.css
@@ -146,12 +146,14 @@ td {
   padding: 12px;
 }
 
-td:nth-child(2):first-letter {
-  text-transform: uppercase;
+td:first-child {
+  width: 150px;
+  font-weight: 600;
+  word-break: normal;
 }
 
-td:first-child {
-  width: 180px;
+.fingerprintTable td:first-child {
+  width: 80px;
   font-weight: 600;
   word-break: normal;
 }

From 54a363e4f0e948d2600f0bb760fb2e1dca995576 Mon Sep 17 00:00:00 2001
From: z0ccc <z0cccccccc@gmail.com>
Date: Tue, 28 Sep 2021 21:41:55 -0400
Subject: [PATCH 43/54] Fixed fingerprint functionality

---
 frontend/src/components/FingerprintBlock.js | 38 ++++++++++-----------
 frontend/src/styles/App.css                 |  2 +-
 frontend/src/utils/fingerprint.js           |  6 ++--
 3 files changed, 21 insertions(+), 25 deletions(-)

diff --git a/frontend/src/components/FingerprintBlock.js b/frontend/src/components/FingerprintBlock.js
index ffc7d06..4c8e995 100644
--- a/frontend/src/components/FingerprintBlock.js
+++ b/frontend/src/components/FingerprintBlock.js
@@ -1,4 +1,3 @@
-/* eslint-disable no-unused-vars */
 import { useState, useEffect } from 'react';
 import Block from './Block';
 import Table from './Table';
@@ -11,37 +10,36 @@ import {
 
 const FingerprintBlock = ({ workerData }) => {
   const [signature, setSignature] = useState();
+  const [load, setload] = useState(false);
+  const hash = getHash(workerData);
 
   useEffect(() => {
-    if (signature) {
-      postSignature(hash, signature);
-    } else {
-      getSignature(hash, setSignature);
-    }
-  }, [signature]);
+    getSignature(hash, setSignature, setload);
+  }, []);
 
-  const hash = getHash(workerData);
   return (
     <Block>
       <h1>Fingerprint</h1>
-      <>
-        {signature ? (
-          <div className="fingerprintTable">
-            <Table data={getFingerprint(signature, hash)} />
-          </div>
-        ) : (
-          <div className="boxWrap">
-            <div className="hash">{hash}</div>
-          </div>
-        )}
-      </>
+      {load && (
+        <>
+          {signature !== undefined ? (
+            <div className="fingerprintTable">
+              <Table data={getFingerprint(signature, hash)} />
+            </div>
+          ) : (
+            <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
         use private mode the hash will stay the same. Enter your name below and
         reload the page in private mode to test it out.
       </p>
-      <form onSubmit={(e) => setSignature(e.target[0].value)}>
+      <form onSubmit={(e) => postSignature(hash, e.target[0].value)}>
         <input
           type="text"
           id="name"
diff --git a/frontend/src/styles/App.css b/frontend/src/styles/App.css
index f1d82b7..c8b3962 100644
--- a/frontend/src/styles/App.css
+++ b/frontend/src/styles/App.css
@@ -19,7 +19,7 @@
   position: fixed;
   width: 100%;
   height: 100%;
-  background: rgb(87, 35, 117);
+  background: var(--grey);
   background: linear-gradient(
     165deg,
     rgba(87, 35, 117, 1) 0%,
diff --git a/frontend/src/utils/fingerprint.js b/frontend/src/utils/fingerprint.js
index 9ad6fe1..92bec38 100644
--- a/frontend/src/utils/fingerprint.js
+++ b/frontend/src/utils/fingerprint.js
@@ -3,16 +3,14 @@ import md5 from 'crypto-js/md5';
 
 export { getSignature, postSignature, getHash, getFingerprint };
 
-const getSignature = (hash, setSignature) => {
-  console.log('1');
+const getSignature = (hash, setSignature, setload) => {
   axios
     .get(`https://api.vytal.io/fingerprint/?hash=${hash}`)
     .then((response) => {
-      console.log(response.data[response.data.length - 1]);
-
       if (response.data.length !== 0) {
         setSignature(response.data[response.data.length - 1].name);
       }
+      setload(true);
     });
 };
 

From ca934f0dd6c7ac934cefb951241be67c7575a451 Mon Sep 17 00:00:00 2001
From: z0ccc <z0cccccccc@gmail.com>
Date: Tue, 28 Sep 2021 21:44:49 -0400
Subject: [PATCH 44/54] Removed old/unneeded files

---
 frontend/src/components/Blocks.js            |   4 -
 frontend/src/components/ContentList.js       |  25 --
 frontend/src/components/FiltersBlock.js      |  39 ---
 frontend/src/components/FingerprintBlock2.js |  61 ----
 frontend/src/components/HardwareBlock.js     |  27 --
 frontend/src/components/OldTable.js          |  16 -
 frontend/src/components/SoftwareBlock.js     |  16 -
 frontend/src/components/StartBlock.js        |  40 ---
 frontend/src/components/main.js              | 277 ----------------
 frontend/src/components/mainOld.js           | 330 -------------------
 10 files changed, 835 deletions(-)
 delete mode 100644 frontend/src/components/ContentList.js
 delete mode 100644 frontend/src/components/FiltersBlock.js
 delete mode 100644 frontend/src/components/FingerprintBlock2.js
 delete mode 100644 frontend/src/components/HardwareBlock.js
 delete mode 100644 frontend/src/components/OldTable.js
 delete mode 100644 frontend/src/components/SoftwareBlock.js
 delete mode 100644 frontend/src/components/StartBlock.js
 delete mode 100644 frontend/src/components/main.js
 delete mode 100644 frontend/src/components/mainOld.js

diff --git a/frontend/src/components/Blocks.js b/frontend/src/components/Blocks.js
index 36af9d2..fb6d63d 100644
--- a/frontend/src/components/Blocks.js
+++ b/frontend/src/components/Blocks.js
@@ -1,4 +1,3 @@
-/* eslint-disable no-unused-vars */
 import { useState, useEffect } from 'react';
 import UserAgentBlock from './UserAgentBlock';
 import IntlBlock from './IntlBlock';
@@ -7,10 +6,7 @@ import NavigatorBlock from './NavigatorBlock';
 import ScreenBlock from './ScreenBlock';
 import FingerprintBlock from './FingerprintBlock';
 import LocationBlock from './LocationBlock';
-import HardwareBlock from './HardwareBlock';
-import SoftwareBlock from './SoftwareBlock';
 import ConnectionBlock from './ConnectionBlock';
-import FiltersBlock from './FiltersBlock';
 // import FontsBlock from './FontsBlock';
 import { fetchAPI, getWebWorker } from '../utils/common';
 
diff --git a/frontend/src/components/ContentList.js b/frontend/src/components/ContentList.js
deleted file mode 100644
index 5af1a5b..0000000
--- a/frontend/src/components/ContentList.js
+++ /dev/null
@@ -1,25 +0,0 @@
-import { ReactComponent as WifiIcon } from '../images/wifi.svg';
-import { ReactComponent as BrowserIcon } from '../images/browser.svg';
-import { ReactComponent as FingerprintIcon } from '../images/fingerprint.svg';
-
-const Icons = {
-  wifi: <WifiIcon />,
-  browser: <BrowserIcon />,
-  fingerprint: <FingerprintIcon />,
-};
-
-const ContentList = ({ items }) => (
-  <div className="contentList">
-    {items.map((item) => (
-      <div className="contentItem" key={item.title}>
-        <div className="contentIcon">{Icons[item.icon]}</div>
-        <div className="contentText">
-          <h2>{item.title}</h2>
-          <div className="contentBody">{item.body}</div>
-        </div>
-      </div>
-    ))}
-  </div>
-);
-
-export default ContentList;
diff --git a/frontend/src/components/FiltersBlock.js b/frontend/src/components/FiltersBlock.js
deleted file mode 100644
index 44ecf52..0000000
--- a/frontend/src/components/FiltersBlock.js
+++ /dev/null
@@ -1,39 +0,0 @@
-import { useState, useEffect } from 'react';
-import Block from './Block';
-import Table from './Table';
-
-const FiltersBlock = () => {
-  const [adBlockDetected, setAdBlockDetected] = useState(false);
-
-  useEffect(() => {
-    fetch('https://www3.doubleclick.net', {
-      method: 'HEAD',
-      mode: 'no-cors',
-      cache: 'no-store',
-    }).catch(() => {
-      setAdBlockDetected(true);
-    });
-  }, []);
-
-  const data = [
-    {
-      key: 'adBlock',
-      title: 'Adblock detected',
-      value: adBlockDetected ? 'True' : 'False',
-    },
-  ];
-
-  return (
-    <Block>
-      <h1>Content Filters</h1>
-      <Table data={data} />
-      <p>
-        <b>Explanation:</b> Although content filters like adblock can protect
-        you against certain methods of tracking, it can also be used as another
-        identification metric.
-      </p>
-    </Block>
-  );
-};
-
-export default FiltersBlock;
diff --git a/frontend/src/components/FingerprintBlock2.js b/frontend/src/components/FingerprintBlock2.js
deleted file mode 100644
index a67830f..0000000
--- a/frontend/src/components/FingerprintBlock2.js
+++ /dev/null
@@ -1,61 +0,0 @@
-import { useState } from 'react';
-import Block from './Block';
-import Table from './Table';
-import {
-  getHardware,
-  getWebGL,
-  getSoftware,
-  getFingerprint,
-  getHash,
-  getName,
-  handleSave,
-} from './mainOld';
-
-const FingerprintBlock = () => {
-  const [name, setName] = useState('');
-  const [load, setLoad] = useState(false);
-  const [saved, setSaved] = useState('');
-  const hash = getHash([...getHardware(), ...getWebGL(), ...getSoftware()]);
-  getName(hash, setName, setLoad);
-  return (
-    <Block>
-      <h1>Fingerprint</h1>
-      {load && (
-        <>
-          {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
-        use private mode the hash will stay the same. Enter your name below and
-        reload the page in private mode to test it out.
-      </p>
-      {saved ? (
-        <p>Success! Re-scan browser.</p>
-      ) : (
-        <form
-          onSubmit={(e) => {
-            handleSave(e, hash, setSaved);
-          }}
-        >
-          <input
-            type="text"
-            id="name"
-            name="name"
-            placeholder="Enter signature"
-          />
-          <input type="submit" id="saveButton" value="Save" maxLength="100" />
-        </form>
-      )}
-    </Block>
-  );
-};
-
-export default FingerprintBlock;
diff --git a/frontend/src/components/HardwareBlock.js b/frontend/src/components/HardwareBlock.js
deleted file mode 100644
index bba5bf8..0000000
--- a/frontend/src/components/HardwareBlock.js
+++ /dev/null
@@ -1,27 +0,0 @@
-import { useState, useEffect } from 'react';
-import Block from './Block';
-import Table from './Table';
-import { getHardware, getWebGL, getBattery } from './mainOld';
-
-const HardwareBlock = () => {
-  const [data, setData] = useState([]);
-
-  useEffect(() => {
-    getBattery().then((batteryInfo) => {
-      setData([...getHardware(), ...getWebGL(), ...batteryInfo]);
-    });
-  }, []);
-
-  return (
-    <Block>
-      <h1>Hardware</h1>
-      <Table data={data} />
-      <p>
-        <b>Explanation:</b> JavaScript can be used to find information about
-        your hardware. This information can be used to create a fingerprint.
-      </p>
-    </Block>
-  );
-};
-
-export default HardwareBlock;
diff --git a/frontend/src/components/OldTable.js b/frontend/src/components/OldTable.js
deleted file mode 100644
index cb8c3b4..0000000
--- a/frontend/src/components/OldTable.js
+++ /dev/null
@@ -1,16 +0,0 @@
-const Table = ({ data }) => (
-  <div className="tableWrap">
-    <table>
-      {data.map((item) => (
-        <tbody key={item.title}>
-          <tr>
-            <td>{item.title}</td>
-            <td>{item.value}</td>
-          </tr>
-        </tbody>
-      ))}
-    </table>
-  </div>
-);
-
-export default Table;
diff --git a/frontend/src/components/SoftwareBlock.js b/frontend/src/components/SoftwareBlock.js
deleted file mode 100644
index 89af4c7..0000000
--- a/frontend/src/components/SoftwareBlock.js
+++ /dev/null
@@ -1,16 +0,0 @@
-import Block from './Block';
-import Table from './Table';
-import { getSoftware } from './mainOld';
-
-const SoftwareBlock = () => (
-  <Block>
-    <h1>Software</h1>
-    <Table data={getSoftware()} />
-    <p>
-      <b>Explanation:</b> JavaScript can be used to find information about your
-      software. This information can be used to create a fingerprint.
-    </p>
-  </Block>
-);
-
-export default SoftwareBlock;
diff --git a/frontend/src/components/StartBlock.js b/frontend/src/components/StartBlock.js
deleted file mode 100644
index 1e720d3..0000000
--- a/frontend/src/components/StartBlock.js
+++ /dev/null
@@ -1,40 +0,0 @@
-import ContentList from './ContentList';
-import Block from './Block';
-
-const contentItems = [
-  {
-    title: 'Fingerprint',
-    icon: 'fingerprint',
-    body: 'Browsers reveal bits of identifiable information. This data can be combined into a digital fingerprint which can be used to follow you around the web.',
-  },
-  {
-    title: 'Connection',
-    icon: 'wifi',
-    body: 'Websites are able to access your IP address when you connect to their server. Your IP address exposes information about your connection and location.',
-  },
-  {
-    title: 'System Info',
-    icon: 'browser',
-    body: "JavaScript can be used to find data about your computer's software and hardware. This information can be used to create a fingerprint.",
-  },
-];
-
-const StartBlock = ({ setScan }) => (
-  <Block>
-    <h2>About</h2>
-    <div className="contentBody">
-      Vytal shows you what traces your browser leaves behind while surfing the
-      web. This scan allows you to understand how easy it is to identify and
-      track your browser even while using private mode.
-    </div>
-    <ContentList items={contentItems} />
-    <input
-      type="submit"
-      onClick={() => setScan(true)}
-      id="scanButton"
-      value="Scan Browser"
-    />
-  </Block>
-);
-
-export default StartBlock;
diff --git a/frontend/src/components/main.js b/frontend/src/components/main.js
deleted file mode 100644
index d727c65..0000000
--- a/frontend/src/components/main.js
+++ /dev/null
@@ -1,277 +0,0 @@
-/* eslint-disable no-unused-vars */
-/* eslint-disable dot-notation */
-// import Bowser from 'bowser';
-
-export {
-  getNavigator,
-  checkNavigatorProperties,
-  checkWebWorker,
-  detectTor,
-  getIntl,
-};
-
-const getDeviceMemory = () => ({
-  key: 'deviceMemory',
-  value: navigator.deviceMemory,
-  issues: [
-    checkNavigatorProperties('deviceMemory'),
-    checkNavigatorValue('deviceMemory'),
-    checkNavigatorPrototype('deviceMemory'),
-  ],
-});
-
-const getHardwareConcurrency = () => ({
-  key: 'hardwareConcurrency',
-  value: navigator.hardwareConcurrency,
-  issues: [
-    checkNavigatorProperties('hardwareConcurrency'),
-    checkNavigatorValue('hardwareConcurrency'),
-    checkNavigatorPrototype('hardwareConcurrency'),
-  ],
-});
-
-const getMaxTouchPoints = () => ({
-  key: 'maxTouchPoints',
-  value: navigator.maxTouchPoints,
-  issues: [
-    checkNavigatorProperties('maxTouchPoints'),
-    checkNavigatorValue('maxTouchPoints'),
-    checkNavigatorPrototype('maxTouchPoints'),
-  ],
-});
-
-const getPlatform = () => ({
-  key: 'platform',
-  value: navigator.platform,
-  issues: [
-    checkNavigatorProperties('platform'),
-    checkNavigatorValue('platform'),
-    checkNavigatorPrototype('platform'),
-  ],
-});
-
-const getUserAgent = () => ({
-  key: 'userAgent',
-  value: navigator.userAgent,
-  issues: [
-    checkNavigatorProperties('userAgent'),
-    checkNavigatorValue('userAgent'),
-    checkNavigatorPrototype('userAgent'),
-  ],
-});
-
-const getLanguage = () => ({
-  key: 'language',
-  value: navigator.language,
-  issues: [
-    checkNavigatorProperties('language'),
-    checkNavigatorValue('language'),
-    checkNavigatorPrototype('language'),
-  ],
-});
-
-const getLanguages = () => ({
-  key: 'languages',
-  value: navigator.languages,
-  issues: [
-    checkNavigatorProperties('languages'),
-    checkNavigatorValue('languages'),
-    checkNavigatorPrototype('languages'),
-  ],
-});
-
-const getCookieEnabled = () => ({
-  key: 'cookieEnabled',
-  value: navigator.cookieEnabled ? 'True' : 'False',
-  issues: [
-    checkNavigatorProperties('cookieEnabled'),
-    checkNavigatorValue('cookieEnabled'),
-    checkNavigatorPrototype('cookieEnabled'),
-  ],
-});
-
-const getDoNotTrack = () => ({
-  key: 'doNotTrack',
-  value: navigator.doNotTrack ? 'True' : 'False',
-  issues: [
-    checkNavigatorProperties('doNotTrack'),
-    checkNavigatorValue('doNotTrack'),
-    checkNavigatorPrototype('doNotTrack'),
-  ],
-});
-
-const getWebDriver = () => ({
-  key: 'webdriver',
-  value: navigator.webdriver ? 'True' : 'False',
-  issues: [
-    checkNavigatorProperties('webdriver'),
-    checkNavigatorValue('webdriver'),
-    checkNavigatorPrototype('webdriver'),
-  ],
-});
-
-const getPlugins = () => ({
-  key: 'plugins',
-  value: sortPlugins(navigator.plugins),
-  issues: [
-    checkNavigatorProperties('plugins'),
-    checkNavigatorValue('plugins'),
-    checkNavigatorPrototype('plugins'),
-  ],
-});
-
-const getVendor = () => ({
-  key: 'vendor',
-  value: navigator.vendor,
-  issues: [
-    checkNavigatorProperties('vendor'),
-    checkNavigatorValue('vendor'),
-    checkNavigatorPrototype('vendor'),
-  ],
-});
-
-const getAppVersion = () => ({
-  key: 'appVersion',
-  value: navigator.appVersion,
-  issues: [
-    checkNavigatorProperties('appVersion'),
-    checkNavigatorValue('appVersion'),
-    checkNavigatorPrototype('appVersion'),
-  ],
-});
-
-const getNavigator = () => [
-  getDeviceMemory(),
-  getHardwareConcurrency(),
-  getMaxTouchPoints(),
-  getPlatform(),
-  getUserAgent(),
-  getLanguage(),
-  getLanguages(),
-  getCookieEnabled(),
-  getDoNotTrack(),
-  getWebDriver(),
-  getPlugins(),
-  getVendor(),
-  getAppVersion(),
-];
-
-// const getDateNow = () => ({
-//   key: 'date',
-//   title: 'Date',
-//   value: Date.now(),
-//   issues: [],
-// });
-
-const getLocale = () => ({
-  key: 'locale',
-  value: Intl.DateTimeFormat().resolvedOptions().locale,
-  issues: [],
-});
-
-const getTimezone = () => ({
-  key: 'timezone',
-  value: Intl.DateTimeFormat().resolvedOptions().timeZone,
-  issues: [],
-});
-
-const getIntl = () => [getLocale(), getTimezone()];
-
-const detectTor = () => {
-  const date = new Date();
-  if (
-    navigator.plugins.length === 0 &&
-    date.getTimezoneOffset() === 0 &&
-    window.outerWidth === window.screen.availWidth &&
-    window.outerHeight === window.screen.availHeight
-  ) {
-    return true;
-  }
-  return false;
-};
-
-// const getTimezoneOffset = () => ({
-//   key: 'timezoneOffset',
-//   value: new Date().getTimezoneOffset(),
-//   issues: [],
-// });
-
-// const getTor = () => ({
-//   key: 'tor',
-//   title: 'Tor browser',
-//   value: detectTor() ? 'True' : 'False',
-//   issues: [],
-// });
-
-// const getAdblock = () => ({
-//   key: 'adblock',
-//   title: 'Adblock',
-//   value: Promise.resolve(detectAdblock()),
-//   issues: [],
-// });
-
-// const detectAdblock = () =>
-//   fetch('https://www3.doubleclick.net', {
-//     method: 'HEAD',
-//     mode: 'no-cors',
-//     cache: 'no-store',
-//   });
-
-// const getOther = () => [getBrave(), getTor(), getAdblock()];
-
-// sorts plugins object into comma separated list
-const sortPlugins = (data) => {
-  const { length } = data;
-
-  let list = '';
-  for (let i = 0; i < length; i++) {
-    if (i !== 0) list += ', ';
-    list += data[i].name;
-  }
-  return list;
-};
-
-const checkNavigatorProperties = (key) => {
-  if (Object.getOwnPropertyDescriptor(navigator, key) !== undefined) {
-    return 'Failed undefined properties';
-  }
-  return null;
-};
-
-const checkNavigatorValue = (key) => {
-  if (
-    Object.getOwnPropertyDescriptor(Navigator.prototype, key).value !==
-    undefined
-  ) {
-    return 'Failed descriptor.value undefined';
-  }
-  return null;
-};
-
-const checkNavigatorPrototype = (key) => {
-  try {
-    // eslint-disable-next-line no-unused-vars
-    const check = Navigator.prototype[key];
-    return 'Failed Navigator.prototype';
-  } catch (err) {
-    // eslint-disable-next-line no-unused-vars
-    const check = '';
-  }
-  return null;
-};
-
-const checkWebWorker = (key, setWorkerData) => {
-  let w;
-  if (typeof w === 'undefined') {
-    w = new Worker('/worker.js');
-  }
-  w.postMessage(key);
-  w.onmessage = (event) => {
-    if (
-      event.data !== undefined &&
-      event.data.toString() !== navigator[key].toString()
-    ) {
-      setWorkerData(event.data.toString());
-    }
-  };
-};
diff --git a/frontend/src/components/mainOld.js b/frontend/src/components/mainOld.js
deleted file mode 100644
index 33e9d3b..0000000
--- a/frontend/src/components/mainOld.js
+++ /dev/null
@@ -1,330 +0,0 @@
-import md5 from 'crypto-js/md5';
-import Bowser from 'bowser';
-import axios from 'axios';
-
-export {
-  fetchAPI,
-  getLocation,
-  getMap,
-  getConnection,
-  getSoftware,
-  getHardware,
-  getWebGL,
-  getBattery,
-  getFingerprint,
-  getHash,
-  getName,
-  handleSave,
-};
-
-const fetchAPI = (setData, setDisplay) => {
-  fetch('https://api.vytal.io/ip/')
-    .then((response) => response.json())
-    .then((json) => {
-      setData(json);
-      setDisplay(1);
-    })
-    .catch(() => {
-      setDisplay(0);
-    });
-};
-
-const getLocation = (json) => {
-  const data = [
-    {
-      key: 'country',
-      title: 'Country',
-      value: json.country,
-    },
-    {
-      key: 'regionName',
-      title: 'Region',
-      value: json.regionName,
-    },
-    {
-      key: 'lat',
-      title: 'City',
-      value: json.city,
-    },
-    {
-      key: 'zip',
-      title: 'Zip code',
-      value: json.zip,
-    },
-    {
-      key: 'lat',
-      title: 'Latitude',
-      value: json.lat,
-    },
-    {
-      key: 'lon',
-      title: 'Longitude',
-      value: json.lon,
-    },
-  ];
-  return data;
-};
-
-const getMap = (data) =>
-  `https://maps.googleapis.com/maps/api/staticmap?center=${data.lat},${data.lon}&markers=color:red%7Clabel:%7C${data.lat},${data.lon}&size=500x200&zoom=10&key=AIzaSyB-YN-X8PGBSPd7NOaQu4csVhgJUnF3ZGk`;
-
-const getConnection = (json) => {
-  const data = [
-    {
-      key: 'ipAddress',
-      title: 'IP address',
-      value: json.query,
-    },
-    {
-      key: 'isp',
-      title: 'ISP',
-      value: json.isp,
-    },
-    {
-      key: 'org',
-      title: 'Organization',
-      value: json.org,
-    },
-    {
-      key: 'asn',
-      title: 'ASN',
-      value: json.as,
-    },
-  ];
-  return data;
-};
-
-const getHardware = () => {
-  const data = [
-    {
-      key: 'screenResolution',
-      title: 'Screen resolution',
-      value: `${window.screen.width}x${window.screen.height}`,
-    },
-    {
-      key: 'colorResolution',
-      title: 'Color Resolution',
-      value: window.screen.colorDepth,
-    },
-    {
-      key: 'deviceMemory',
-      title: 'Device memory',
-      value: navigator.deviceMemory ? `${navigator.deviceMemory}GB` : 'N/A',
-    },
-    {
-      key: 'cpuCores',
-      title: '# of CPU cores',
-      value: navigator.hardwareConcurrency || 'N/A',
-    },
-    {
-      key: 'maxTouchpoints',
-      title: 'Max touchpoints',
-      value: navigator.maxTouchPoints || 0,
-    },
-  ];
-  return data;
-};
-
-const getBattery = async () => {
-  let level, status;
-  if ('getBattery' in navigator) {
-    await navigator.getBattery().then((res) => {
-      level = `${Math.round(res.level * 100)}%`;
-      status = res.charging ? 'Charging' : 'Not charging';
-    });
-  } else {
-    level = 'N/A';
-    status = 'N/A';
-  }
-  const data = [
-    {
-      key: 'batteryLevel',
-      title: 'Battery level',
-      value: level,
-    },
-    {
-      key: 'batteryStatus',
-      title: 'Battery status',
-      value: status,
-    },
-  ];
-  return data;
-};
-
-const getWebGL = () => {
-  const gl = document.createElement('canvas').getContext('webgl');
-  let ext;
-  if (gl) {
-    ext = gl.getExtension('WEBGL_debug_renderer_info');
-  } else {
-    ext = null;
-  }
-
-  const data = [
-    {
-      key: 'webGLVendor',
-      title: 'WebGL vendor',
-      value: ext ? gl.getParameter(ext.UNMASKED_VENDOR_WEBGL) : 'N/A',
-    },
-    {
-      key: 'webglRenderer',
-      title: 'WebGL renderer',
-      value: ext ? gl.getParameter(ext.UNMASKED_RENDERER_WEBGL) : 'N/A',
-    },
-  ];
-  return data;
-};
-
-const getSoftware = () => {
-  const uaResult = Bowser.parse(navigator.userAgent);
-  const date = new Date();
-  const data = [
-    {
-      key: 'browser',
-      title: 'Browser',
-      value: uaResult.browser.name,
-    },
-    {
-      key: 'browserVersion',
-      title: 'Browser version',
-      value: uaResult.browser.version,
-    },
-    {
-      key: 'browserEngine',
-      title: 'Browser engine',
-      value: uaResult.browser.engine || 'N/A',
-    },
-    {
-      key: 'os',
-      title: 'OS',
-      value: `${uaResult.os.name} ${uaResult.os.versionName}`,
-    },
-    {
-      key: 'osVersion',
-      title: 'OS version',
-      value: uaResult.os.version,
-    },
-    {
-      key: 'platform',
-      title: 'Platform',
-      value: navigator.platform,
-    },
-    {
-      key: 'systemType',
-      title: 'System type',
-      value: uaResult.platform.type,
-    },
-    {
-      key: 'userAgent',
-      title: 'User agent',
-      value: navigator.userAgent || 'N/A',
-    },
-    {
-      key: 'preferredLanguage',
-      title: 'Preferred language',
-      value: navigator.language || 'N/A',
-    },
-    // {
-    //   key: 'languages',
-    //   title: 'Languages',
-    //   value: sortArr(navigator.languages) || 'N/A',
-    // },
-    {
-      key: 'timezone',
-      title: 'Timezone',
-      value: Intl.DateTimeFormat().resolvedOptions().timeZone || 'N/A',
-    },
-    {
-      key: 'timezoneOffset',
-      title: 'Timezone offset',
-      value: date.getTimezoneOffset() || 'N/A',
-    },
-    {
-      key: 'cookiesEnabled',
-      title: 'Cookies enabled',
-      value: navigator.cookieEnabled ? 'True' : 'False',
-    },
-    {
-      key: 'javaEnabled',
-      title: 'Java enabled',
-      value: navigator.javaEnabled() ? 'True' : 'False',
-    },
-    {
-      key: 'dntHeader',
-      title: 'DNT header enabled',
-      value: navigator.doNotTrack ? 'True' : 'False',
-    },
-    {
-      key: 'automatedBrowser',
-      title: 'Automated browser',
-      value: navigator.webdriver ? 'True' : 'False',
-    },
-    {
-      key: 'plugins',
-      title: 'Plugins',
-      value: sortPlugins(navigator.plugins) || 'N/A',
-    },
-  ];
-  return data;
-};
-
-// sorts array into comma separated list
-// const sortArr = (arr) => {
-//   const arrLength = arr.length;
-//   let list = '';
-//   for (let i = 0; i < arrLength; i++) {
-//     if (i !== 0) list += ', ';
-//     list += arr[i];
-//   }
-//   return list;
-// };
-
-// sorts plugins object into comma separated list
-const sortPlugins = (data) => {
-  const { length } = data;
-
-  let list = '';
-  for (let i = 0; i < length; i++) {
-    if (i !== 0) list += ', ';
-    list += data[i].name;
-  }
-  return list;
-};
-
-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();
-
-const getName = (hash, setName, setLoad) => {
-  axios
-    .get(`https://api.vytal.io/fingerprint/?hash=${hash}`)
-    .then((response) => {
-      if (response.data.length !== 0) {
-        setName(response.data[response.data.length - 1].name);
-      }
-      setLoad(true);
-    });
-};
-
-const handleSave = (e, hash, setSaved) => {
-  e.preventDefault();
-  axios.post('https://api.vytal.io/fingerprint/', {
-    name: e.target[0].value,
-    hash,
-  });
-  setSaved(true);
-};

From 07c4d143129cb4c04239373184d951ebed4cccb7 Mon Sep 17 00:00:00 2001
From: z0ccc <z0cccccccc@gmail.com>
Date: Tue, 28 Sep 2021 23:23:56 -0400
Subject: [PATCH 45/54] Restructured css

---
 frontend/src/components/App.css              | 124 ++++++++
 frontend/src/components/App.js               |   2 +-
 frontend/src/components/Block.js             |   6 +-
 frontend/src/components/Blocks.css           |  20 ++
 frontend/src/components/Blocks.js            |   1 +
 frontend/src/components/FingerprintBlock.css |  42 +++
 frontend/src/components/FingerprintBlock.js  |  12 +-
 frontend/src/components/GitHub.css           |  18 ++
 frontend/src/components/Github.js            |   1 +
 frontend/src/components/IntlBlock.js         |   1 -
 frontend/src/components/Logo.css             |  10 +
 frontend/src/components/Logo.js              |   1 +
 frontend/src/components/MainColumn.css       |   5 +
 frontend/src/components/MainColumn.js        |   1 +
 frontend/src/components/OtherBlock.js        |   1 -
 frontend/src/components/Table.css            |  14 +
 frontend/src/components/Table.js             |   1 +
 frontend/src/components/TableRow.css         |  56 ++++
 frontend/src/components/TableRow.js          |  25 +-
 frontend/src/images/xCircle.svg              |   2 +-
 frontend/src/index.js                        |   1 -
 frontend/src/styles/App.css                  | 288 -------------------
 frontend/src/styles/index.css                |  14 -
 23 files changed, 320 insertions(+), 326 deletions(-)
 create mode 100644 frontend/src/components/App.css
 create mode 100644 frontend/src/components/Blocks.css
 create mode 100644 frontend/src/components/FingerprintBlock.css
 create mode 100644 frontend/src/components/GitHub.css
 create mode 100644 frontend/src/components/Logo.css
 create mode 100644 frontend/src/components/MainColumn.css
 create mode 100644 frontend/src/components/Table.css
 create mode 100644 frontend/src/components/TableRow.css
 delete mode 100644 frontend/src/styles/App.css
 delete mode 100644 frontend/src/styles/index.css

diff --git a/frontend/src/components/App.css b/frontend/src/components/App.css
new file mode 100644
index 0000000..48003a6
--- /dev/null
+++ b/frontend/src/components/App.css
@@ -0,0 +1,124 @@
+:root {
+  --main: #943ec5;
+  --grey: #9fa6b2;
+  --text: #4b5563;
+  --border: #ddd;
+  --issueBackground: #f8d7da;
+  --issueHover: #f4c1c6;
+  --issueBorder: #f5c6cb;
+  --issueText: #721c24;
+}
+
+body {
+  margin: 0;
+  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
+    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
+    sans-serif;
+  -webkit-font-smoothing: antialiased;
+  -moz-osx-font-smoothing: grayscale;
+  font-size: 15px;
+}
+
+.App {
+  min-height: 100vh;
+  display: flex;
+  flex-direction: column;
+}
+
+.background {
+  position: fixed;
+  width: 100%;
+  height: 100%;
+  background: var(--grey);
+  background: linear-gradient(
+    165deg,
+    rgba(87, 35, 117, 1) 0%,
+    rgba(148, 62, 197, 1) 55%,
+    rgba(211, 176, 231, 1) 100%
+  );
+  z-index: -1;
+}
+
+h1 {
+  margin: 0 0 12px 0;
+  font-weight: 600;
+  font-size: 19px;
+}
+
+h2 {
+  margin: 0 0 4px 0;
+  font-weight: 600;
+  font-size: 17px;
+}
+
+p {
+  margin: 12px 0 0 0;
+}
+
+b {
+  font-weight: 600;
+}
+
+img {
+  width: 100%;
+  border-radius: 6px;
+  border: 1px solid var(--border);
+  box-sizing: border-box;
+  display: block;
+  margin: 0 0 12px 0;
+}
+
+@media screen and (max-width: 500px) {
+  .github {
+    width: 24px;
+    position: absolute;
+    top: 8px;
+    right: 8px;
+  }
+
+  body {
+    font-size: 14px;
+  }
+
+  .contentBlock {
+    padding: 18px;
+    margin: 0 0 18px 0;
+  }
+
+  .centerBlockInner {
+    width: 650px;
+    margin: 12px 0 0 0;
+  }
+
+  .logo {
+    width: 185px;
+    margin: 0 0 8px 0;
+  }
+
+  h1 {
+    font-size: 16px;
+  }
+
+  h2 {
+    margin: 0 0 3px 0;
+    font-size: 15px;
+  }
+
+  .contentIcon {
+    flex: none;
+    margin: 0 18px 0 0;
+    width: 28px !important;
+  }
+
+  td:first-child {
+    width: 70px;
+  }
+
+  .boxWrap {
+    padding: 8px;
+  }
+
+  input[type='text'] {
+    width: calc(100% - 65px);
+  }
+}
diff --git a/frontend/src/components/App.js b/frontend/src/components/App.js
index f062a95..956339a 100644
--- a/frontend/src/components/App.js
+++ b/frontend/src/components/App.js
@@ -1,6 +1,6 @@
 import Github from './Github';
 import MainColumn from './MainColumn';
-import '../styles/App.css';
+import './App.css';
 
 const App = () => (
   <div className="App">
diff --git a/frontend/src/components/Block.js b/frontend/src/components/Block.js
index dc43139..1e35fa7 100644
--- a/frontend/src/components/Block.js
+++ b/frontend/src/components/Block.js
@@ -1,9 +1,5 @@
 const ContentBlock = ({ children }) => (
-  <div className="contentBlock">
-    <div className="contentItem">
-      <div className="contentText">{children}</div>
-    </div>
-  </div>
+  <div className="contentBlock">{children}</div>
 );
 
 export default ContentBlock;
diff --git a/frontend/src/components/Blocks.css b/frontend/src/components/Blocks.css
new file mode 100644
index 0000000..ba7595f
--- /dev/null
+++ b/frontend/src/components/Blocks.css
@@ -0,0 +1,20 @@
+.centerBlockInner {
+  width: 500px;
+}
+
+.contentBlock {
+  color: var(--text);
+  background-color: #fff;
+  border-radius: 6px;
+  box-sizing: border-box;
+  padding: 24px;
+  box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 12px;
+  margin: 0 0 24px 0;
+}
+
+@media screen and (max-width: 500px) {
+  .contentBlock {
+    padding: 18px;
+    margin: 0 0 18px 0;
+  }
+}
diff --git a/frontend/src/components/Blocks.js b/frontend/src/components/Blocks.js
index fb6d63d..fc20e4b 100644
--- a/frontend/src/components/Blocks.js
+++ b/frontend/src/components/Blocks.js
@@ -9,6 +9,7 @@ import LocationBlock from './LocationBlock';
 import ConnectionBlock from './ConnectionBlock';
 // import FontsBlock from './FontsBlock';
 import { fetchAPI, getWebWorker } from '../utils/common';
+import './Blocks.css';
 
 const Blocks = () => {
   const [workerData, setWorkerData] = useState();
diff --git a/frontend/src/components/FingerprintBlock.css b/frontend/src/components/FingerprintBlock.css
new file mode 100644
index 0000000..33e01c0
--- /dev/null
+++ b/frontend/src/components/FingerprintBlock.css
@@ -0,0 +1,42 @@
+.fingerprintTable td:first-child {
+  width: 80px;
+  font-weight: 600;
+  word-break: normal;
+}
+
+.boxWrap {
+  border: 1px solid var(--border);
+  border-radius: 6px;
+  padding: 12px;
+}
+
+.hash {
+  text-align: center;
+  font-weight: 600;
+}
+
+form {
+  margin: 12px 0 0 0;
+}
+
+.saveButton {
+  border: 1px solid var(--grey);
+  border-radius: 6px;
+  padding: 6px;
+  background-color: transparent;
+  cursor: pointer;
+  color: var(--text);
+  margin: 0 0 0 6px;
+}
+
+.saveButton:hover {
+  background-color: var(--border);
+}
+
+input[type='text'] {
+  border: 1px solid var(--grey);
+  border-radius: 6px;
+  padding: 6px;
+  width: 200px;
+  outline: none;
+}
diff --git a/frontend/src/components/FingerprintBlock.js b/frontend/src/components/FingerprintBlock.js
index 4c8e995..3a4a72e 100644
--- a/frontend/src/components/FingerprintBlock.js
+++ b/frontend/src/components/FingerprintBlock.js
@@ -1,3 +1,4 @@
+import './FingerprintBlock.css';
 import { useState, useEffect } from 'react';
 import Block from './Block';
 import Table from './Table';
@@ -42,11 +43,16 @@ const FingerprintBlock = ({ workerData }) => {
       <form onSubmit={(e) => postSignature(hash, e.target[0].value)}>
         <input
           type="text"
-          id="name"
-          name="name"
+          id="signature"
+          name="signature"
           placeholder="Enter signature"
         />
-        <input type="submit" id="saveButton" value="Save" maxLength="100" />
+        <input
+          type="submit"
+          className="saveButton"
+          value="Save"
+          maxLength="100"
+        />
       </form>
     </Block>
   );
diff --git a/frontend/src/components/GitHub.css b/frontend/src/components/GitHub.css
new file mode 100644
index 0000000..2c47124
--- /dev/null
+++ b/frontend/src/components/GitHub.css
@@ -0,0 +1,18 @@
+.gitHubButton {
+  position: fixed;
+  top: 12px;
+  right: 12px;
+}
+
+@media screen and (max-width: 900px) {
+  .gitHubButton {
+    position: absolute;
+  }
+}
+
+@media screen and (max-width: 500px) {
+  .gitHubButton {
+    top: 8px;
+    right: 8px;
+  }
+}
diff --git a/frontend/src/components/Github.js b/frontend/src/components/Github.js
index 7557f28..04dcdf8 100644
--- a/frontend/src/components/Github.js
+++ b/frontend/src/components/Github.js
@@ -1,3 +1,4 @@
+import './GitHub.css';
 import GitHubButton from 'react-github-btn';
 
 const Github = () => (
diff --git a/frontend/src/components/IntlBlock.js b/frontend/src/components/IntlBlock.js
index 549aa3f..85ae198 100644
--- a/frontend/src/components/IntlBlock.js
+++ b/frontend/src/components/IntlBlock.js
@@ -1,4 +1,3 @@
-/* eslint-disable no-unused-vars */
 import Block from './Block';
 import Table from './Table';
 import getIntl from '../utils/intl';
diff --git a/frontend/src/components/Logo.css b/frontend/src/components/Logo.css
new file mode 100644
index 0000000..7700579
--- /dev/null
+++ b/frontend/src/components/Logo.css
@@ -0,0 +1,10 @@
+.logoWrap {
+  display: flex;
+  align-items: center;
+  justify-content: center;
+  margin: 20px 0;
+}
+
+.logo {
+  width: 250px;
+}
diff --git a/frontend/src/components/Logo.js b/frontend/src/components/Logo.js
index d833a1d..c8f4a19 100644
--- a/frontend/src/components/Logo.js
+++ b/frontend/src/components/Logo.js
@@ -1,3 +1,4 @@
+import './Logo.css';
 import { ReactComponent as LogoImg } from '../images/logo.svg';
 
 const Logo = () => (
diff --git a/frontend/src/components/MainColumn.css b/frontend/src/components/MainColumn.css
new file mode 100644
index 0000000..9c71520
--- /dev/null
+++ b/frontend/src/components/MainColumn.css
@@ -0,0 +1,5 @@
+.centerBlockOuter {
+  display: flex;
+  justify-content: center;
+  gap: 24px;
+}
diff --git a/frontend/src/components/MainColumn.js b/frontend/src/components/MainColumn.js
index a90b114..d652664 100644
--- a/frontend/src/components/MainColumn.js
+++ b/frontend/src/components/MainColumn.js
@@ -1,3 +1,4 @@
+import './MainColumn.css';
 import Logo from './Logo';
 import Blocks from './Blocks';
 
diff --git a/frontend/src/components/OtherBlock.js b/frontend/src/components/OtherBlock.js
index ae3efb0..319c827 100644
--- a/frontend/src/components/OtherBlock.js
+++ b/frontend/src/components/OtherBlock.js
@@ -1,4 +1,3 @@
-/* eslint-disable no-unused-vars */
 import { useState, useEffect } from 'react';
 
 import Block from './Block';
diff --git a/frontend/src/components/Table.css b/frontend/src/components/Table.css
new file mode 100644
index 0000000..9af2b4a
--- /dev/null
+++ b/frontend/src/components/Table.css
@@ -0,0 +1,14 @@
+table {
+  width: 100%;
+  table-layout: fixed;
+  border-collapse: collapse;
+}
+
+.tableWrap {
+  border: 1px solid var(--border);
+  border-radius: 6px;
+}
+
+tbody:not(:last-child) {
+  border-bottom: 1px solid var(--border);
+}
diff --git a/frontend/src/components/Table.js b/frontend/src/components/Table.js
index f0b5402..ab50f27 100644
--- a/frontend/src/components/Table.js
+++ b/frontend/src/components/Table.js
@@ -1,3 +1,4 @@
+import './Table.css';
 import TableRow from './TableRow';
 
 const Table = ({ data }) => (
diff --git a/frontend/src/components/TableRow.css b/frontend/src/components/TableRow.css
new file mode 100644
index 0000000..414dc02
--- /dev/null
+++ b/frontend/src/components/TableRow.css
@@ -0,0 +1,56 @@
+td {
+  padding: 12px;
+}
+
+td:first-child {
+  width: 150px;
+  font-weight: 600;
+  word-break: normal;
+}
+
+td:nth-child(3) {
+  width: 40px;
+  font-weight: 600;
+  word-break: normal;
+}
+
+.circleButton {
+  display: flex;
+  width: 20px;
+}
+
+.issue {
+  cursor: pointer;
+}
+
+.issue:hover {
+  background-color: var(--issueBackground);
+  color: var(--issueText);
+}
+
+.modalHeader {
+  display: flex;
+  justify-content: space-between;
+  margin: 0 0 6px 0;
+}
+
+.modalTitle {
+  font-weight: 600;
+}
+
+.closeButton {
+  fill: var(--border);
+  display: flex;
+  width: 12px;
+  cursor: pointer;
+  margin: -12px 0 0 0;
+}
+
+.closeButton:hover {
+  fill: var(--grey);
+}
+
+ul {
+  padding-left: 20px;
+  margin: 0px;
+}
diff --git a/frontend/src/components/TableRow.js b/frontend/src/components/TableRow.js
index 63cc417..eaff169 100644
--- a/frontend/src/components/TableRow.js
+++ b/frontend/src/components/TableRow.js
@@ -1,3 +1,4 @@
+import './TableRow.css';
 import Modal from 'react-modal';
 import { useState } from 'react';
 import { ReactComponent as XCircle } from '../images/xCircle.svg';
@@ -32,16 +33,18 @@ const TableRow = ({ item }) => {
     setIsOpen(false);
   };
   return (
-    <tr>
-      <td>{item.key}</td>
-      <td>{item.value}</td>
-      <td>
-        {issues ? (
-          <XCircle className="circleButton issueButton" onClick={openModal} />
-        ) : (
-          <CheckCircle className="circleButton" />
-        )}
-      </td>
+    <>
+      <tr className={issues ? 'issue' : ''} onClick={openModal}>
+        <td>{item.key}</td>
+        <td>{item.value}</td>
+        <td>
+          {issues ? (
+            <XCircle className="circleButton" />
+          ) : (
+            <CheckCircle className="circleButton" />
+          )}
+        </td>
+      </tr>
       <Modal
         isOpen={modalIsOpen}
         onRequestClose={closeModal}
@@ -58,7 +61,7 @@ const TableRow = ({ item }) => {
           ))}
         </ul>
       </Modal>
-    </tr>
+    </>
   );
 };
 
diff --git a/frontend/src/images/xCircle.svg b/frontend/src/images/xCircle.svg
index 98a6d05..768426f 100644
--- a/frontend/src/images/xCircle.svg
+++ b/frontend/src/images/xCircle.svg
@@ -1,5 +1,5 @@
 <svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 512 512">
-  <g fill="#721c24">
+  <g fill="#f4c1c6">
     <path d="M256 8C119 8 8 119 8 256s111 248 248 248 248-111 248-248S393 8 256 8zm121.6 313.1c4.7 4.7 4.7 12.3 0 17L338 377.6c-4.7 4.7-12.3 4.7-17 0L256 312l-65.1 65.6c-4.7 4.7-12.3 4.7-17 0L134.4 338c-4.7-4.7-4.7-12.3 0-17l65.6-65-65.6-65.1c-4.7-4.7-4.7-12.3 0-17l39.6-39.6c4.7-4.7 12.3-4.7 17 0l65 65.7 65.1-65.6c4.7-4.7 12.3-4.7 17 0l39.6 39.6c4.7 4.7 4.7 12.3 0 17L312 256l65.6 65.1z"/>
   </g>
 </svg>
\ No newline at end of file
diff --git a/frontend/src/index.js b/frontend/src/index.js
index 5831441..4a6f683 100644
--- a/frontend/src/index.js
+++ b/frontend/src/index.js
@@ -1,6 +1,5 @@
 import React from 'react';
 import ReactDOM from 'react-dom';
-import './styles/index.css';
 import App from './components/App';
 import * as serviceWorker from './serviceWorker';
 
diff --git a/frontend/src/styles/App.css b/frontend/src/styles/App.css
deleted file mode 100644
index c8b3962..0000000
--- a/frontend/src/styles/App.css
+++ /dev/null
@@ -1,288 +0,0 @@
-:root {
-  --main: #943ec5;
-  --grey: #9fa6b2;
-  --text: #4b5563;
-  --border: #ddd;
-  --issueBackground: #f8d7da;
-  --issueHover: #f4c1c6;
-  --issueBorder: #f5c6cb;
-  --issueText: #721c24;
-}
-
-.App {
-  min-height: 100vh;
-  display: flex;
-  flex-direction: column;
-}
-
-.background {
-  position: fixed;
-  width: 100%;
-  height: 100%;
-  background: var(--grey);
-  background: linear-gradient(
-    165deg,
-    rgba(87, 35, 117, 1) 0%,
-    rgba(148, 62, 197, 1) 55%,
-    rgba(211, 176, 231, 1) 100%
-  );
-  z-index: -1;
-}
-
-.gitHubButton {
-  position: fixed;
-  top: 12px;
-  right: 12px;
-}
-
-.logoWrap {
-  display: flex;
-  align-items: center;
-  justify-content: center;
-  margin: 20px 0;
-}
-
-.logo {
-  width: 250px;
-}
-
-.centerBlockOuter {
-  display: flex;
-  justify-content: center;
-  gap: 24px;
-}
-
-.centerBlockInner {
-  width: 500px;
-}
-
-.contentBlock {
-  color: var(--text);
-  background-color: #fff;
-  border-radius: 6px;
-  box-sizing: border-box;
-  padding: 24px;
-  box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 12px;
-  margin: 0 0 24px 0;
-}
-
-.contentItem {
-  display: flex;
-}
-
-.contentItem:not(:last-child) {
-  margin: 0 0 24px 0;
-}
-
-.contentIcon {
-  flex: none;
-  margin: 0 24px 0 0;
-  width: 32px !important;
-}
-
-.contentText {
-  line-height: 24px;
-}
-
-h1 {
-  margin: 0 0 12px 0;
-  font-weight: 600;
-  font-size: 19px;
-}
-
-h2 {
-  margin: 0 0 4px 0;
-  font-weight: 600;
-  font-size: 17px;
-}
-
-.contentList {
-  margin: 24px 0 0 0;
-}
-
-#scanButton {
-  display: block;
-  background-color: var(--main);
-  color: #fff;
-  padding: 12px;
-  border-radius: 6px;
-  box-sizing: border-box;
-  text-align: center;
-  width: 100%;
-  border: none;
-  cursor: pointer;
-  margin: 24px 0 0 0;
-  font-family: inherit;
-  font-size: inherit;
-  -webkit-appearance: none;
-}
-
-#scanButton:hover {
-  opacity: 0.7;
-}
-
-.boxWrap {
-  border: 1px solid var(--border);
-  border-radius: 6px;
-  padding: 12px;
-}
-
-.tableWrap {
-  border: 1px solid var(--border);
-  border-radius: 6px;
-}
-
-table {
-  width: 100%;
-  table-layout: fixed;
-  border-collapse: collapse;
-}
-
-tbody:not(:last-child) {
-  border-bottom: 1px solid var(--border);
-}
-
-td {
-  padding: 12px;
-}
-
-td:first-child {
-  width: 150px;
-  font-weight: 600;
-  word-break: normal;
-}
-
-.fingerprintTable td:first-child {
-  width: 80px;
-  font-weight: 600;
-  word-break: normal;
-}
-
-td:nth-child(3) {
-  width: 40px;
-  font-weight: 600;
-  word-break: normal;
-}
-
-.circleButton {
-  display: flex;
-  width: 20px;
-}
-
-p {
-  margin: 12px 0 0 0;
-}
-
-b {
-  font-weight: 600;
-}
-
-img {
-  width: 100%;
-  border-radius: 6px;
-  border: 1px solid var(--border);
-  box-sizing: border-box;
-  display: block;
-  margin: 0 0 12px 0;
-}
-
-.hash {
-  text-align: center;
-  font-weight: 600;
-}
-
-form {
-  margin: 12px 0 0 0;
-}
-
-input[type='text'] {
-  border: 1px solid var(--grey);
-  border-radius: 6px;
-  padding: 6px;
-  width: 200px;
-  outline: none;
-}
-
-#saveButton {
-  border: 1px solid var(--grey);
-  border-radius: 6px;
-  padding: 6px;
-  background-color: transparent;
-  cursor: pointer;
-  color: var(--text);
-  margin: 0 0 0 6px;
-}
-
-#saveButton:hover {
-  background-color: var(--border);
-}
-
-.issue {
-  background-color: var(--issueBackground);
-  color: var(--issueText);
-  border: 1px solid var(--issueBorder);
-  cursor: pointer;
-}
-
-.issue:hover {
-  background-color: var(--issueHover);
-}
-
-.newline {
-  display: block;
-}
-
-@media screen and (max-width: 500px) {
-  .github {
-    width: 24px;
-    position: absolute;
-    top: 8px;
-    right: 8px;
-  }
-
-  body {
-    font-size: 14px;
-  }
-
-  .contentBlock {
-    padding: 18px;
-    margin: 0 0 18px 0;
-  }
-
-  .centerBlockInner {
-    width: 650px;
-    margin: 12px 0 0 0;
-  }
-
-  .logo {
-    width: 185px;
-    margin: 0 0 8px 0;
-  }
-
-  h1 {
-    font-size: 16px;
-  }
-
-  h2 {
-    margin: 0 0 3px 0;
-    font-size: 15px;
-  }
-
-  .contentIcon {
-    flex: none;
-    margin: 0 18px 0 0;
-    width: 28px !important;
-  }
-
-  td:first-child {
-    width: 70px;
-  }
-
-  .boxWrap {
-    padding: 8px;
-  }
-
-  input[type='text'] {
-    width: calc(100% - 65px);
-  }
-}
diff --git a/frontend/src/styles/index.css b/frontend/src/styles/index.css
deleted file mode 100644
index af471ba..0000000
--- a/frontend/src/styles/index.css
+++ /dev/null
@@ -1,14 +0,0 @@
-body {
-  margin: 0;
-  font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', 'Roboto', 'Oxygen',
-    'Ubuntu', 'Cantarell', 'Fira Sans', 'Droid Sans', 'Helvetica Neue',
-    sans-serif;
-  -webkit-font-smoothing: antialiased;
-  -moz-osx-font-smoothing: grayscale;
-  font-size: 15px;
-}
-
-code {
-  font-family: source-code-pro, Menlo, Monaco, Consolas, 'Courier New',
-    monospace;
-}

From 680d416ce0c6bd3edd8f2195ddc70d163afa61a6 Mon Sep 17 00:00:00 2001
From: z0ccc <z0cccccccc@gmail.com>
Date: Tue, 28 Sep 2021 23:42:06 -0400
Subject: [PATCH 46/54] Fixed brave glitch

---
 frontend/src/utils/other.js | 2 +-
 1 file changed, 1 insertion(+), 1 deletion(-)

diff --git a/frontend/src/utils/other.js b/frontend/src/utils/other.js
index 751860d..545b837 100644
--- a/frontend/src/utils/other.js
+++ b/frontend/src/utils/other.js
@@ -25,7 +25,7 @@ const getOther = (battery, adBlock, workerData) => [
   {
     key: 'Brave browser',
     value: navigator.brave ? 'True' : 'False',
-    issues: [checkWebWorker],
+    issues: [],
   },
   {
     key: 'Tor browser',

From f33c3686baa2108cce35471109b6424d9558e371 Mon Sep 17 00:00:00 2001
From: z0ccc <z0cccccccc@gmail.com>
Date: Wed, 29 Sep 2021 00:21:45 -0400
Subject: [PATCH 47/54] Fixed battery errors on firefox

---
 frontend/src/components/OtherBlock.js | 10 ++-
 frontend/src/utils/navigator.js       | 10 +--
 frontend/src/utils/other.js           | 95 +++++++++++++++------------
 3 files changed, 66 insertions(+), 49 deletions(-)

diff --git a/frontend/src/components/OtherBlock.js b/frontend/src/components/OtherBlock.js
index 319c827..fe2ade8 100644
--- a/frontend/src/components/OtherBlock.js
+++ b/frontend/src/components/OtherBlock.js
@@ -20,9 +20,13 @@ const OtherBlock = ({ workerData }) => {
       .catch(() => {
         setAdBlock(true);
       });
-    navigator.getBattery().then((res) => {
-      setBattery(res);
-    });
+    if ('getBattery' in navigator) {
+      navigator.getBattery().then((res) => {
+        setBattery(res);
+      });
+    } else {
+      setBattery('N/A');
+    }
   }, []);
 
   return (
diff --git a/frontend/src/utils/navigator.js b/frontend/src/utils/navigator.js
index 8413e1d..6c36c5b 100644
--- a/frontend/src/utils/navigator.js
+++ b/frontend/src/utils/navigator.js
@@ -157,11 +157,11 @@ const checkNavigatorProperties = (key) => {
 };
 
 const checkNavigatorValue = (key) => {
-  if (
-    Object.getOwnPropertyDescriptor(Navigator.prototype, key).value !==
-    undefined
-  ) {
-    return 'Failed descriptor.value undefined';
+  try {
+    // eslint-disable-next-line no-unused-vars
+    const { value } = Object.getOwnPropertyDescriptor(Navigator.prototype, key);
+  } catch (err) {
+    return 'Failed Navigator.prototype';
   }
   return null;
 };
diff --git a/frontend/src/utils/other.js b/frontend/src/utils/other.js
index 545b837..8396fd8 100644
--- a/frontend/src/utils/other.js
+++ b/frontend/src/utils/other.js
@@ -21,45 +21,58 @@ const checkDatePrototype = () => {
 };
 
 // Returns object with location data
-const getOther = (battery, adBlock, workerData) => [
-  {
-    key: 'Brave browser',
-    value: navigator.brave ? 'True' : 'False',
-    issues: [],
-  },
-  {
-    key: 'Tor browser',
-    value: detectTor() ? 'True' : 'False',
-    issues: [],
-  },
-  {
-    key: 'Adblock',
-    value: adBlock ? 'True' : 'False',
-    issues: [],
-  },
-  {
-    key: 'Date',
-    value: new Date().toString(),
-    issues: [checkDatePrototype()],
-  },
-  {
-    key: 'Timezone offset',
-    value: new Date().getTimezoneOffset(),
-    issues: [
-      checkDatePrototype(),
-      checkWebWorker(new Date().getTimezoneOffset(), workerData.timezoneOffset),
-    ],
-  },
-  {
-    key: 'Battery level',
-    value: `${Math.round(battery.level * 100)}%`,
-    issues: [],
-  },
-  {
-    key: 'Battery status',
-    value: battery.charging ? 'Charging' : 'Not charging',
-    issues: [],
-  },
-];
-
+const getOther = (battery, adBlock, workerData) => {
+  console.log(battery);
+  let batteryLevel, batteryStatus;
+  if (battery === 'N/A') {
+    batteryLevel = 'N/A';
+    batteryStatus = 'N/A';
+  } else {
+    batteryLevel = `${Math.round(battery.level * 100)}%`;
+    batteryStatus = battery.charging ? 'Charging' : 'Not charging';
+  }
+  return [
+    {
+      key: 'Brave browser',
+      value: navigator.brave ? 'True' : 'False',
+      issues: [],
+    },
+    {
+      key: 'Tor browser',
+      value: detectTor() ? 'True' : 'False',
+      issues: [],
+    },
+    {
+      key: 'Adblock',
+      value: adBlock ? 'True' : 'False',
+      issues: [],
+    },
+    {
+      key: 'Date',
+      value: new Date().toString(),
+      issues: [checkDatePrototype()],
+    },
+    {
+      key: 'Timezone offset',
+      value: new Date().getTimezoneOffset(),
+      issues: [
+        checkDatePrototype(),
+        checkWebWorker(
+          new Date().getTimezoneOffset(),
+          workerData.timezoneOffset
+        ),
+      ],
+    },
+    {
+      key: 'Battery level',
+      value: batteryLevel,
+      issues: [],
+    },
+    {
+      key: 'Battery status',
+      value: batteryStatus,
+      issues: [],
+    },
+  ];
+};
 export default getOther;

From 8222abffca3ca9420e8c377387fc43cb3ea47206 Mon Sep 17 00:00:00 2001
From: z0ccc <z0cccccccc@gmail.com>
Date: Wed, 29 Sep 2021 00:27:25 -0400
Subject: [PATCH 48/54] Display 'N/A' if value is undefined

---
 frontend/src/components/TableRow.js | 2 +-
 frontend/src/utils/other.js         | 6 +-----
 2 files changed, 2 insertions(+), 6 deletions(-)

diff --git a/frontend/src/components/TableRow.js b/frontend/src/components/TableRow.js
index eaff169..b0e4464 100644
--- a/frontend/src/components/TableRow.js
+++ b/frontend/src/components/TableRow.js
@@ -36,7 +36,7 @@ const TableRow = ({ item }) => {
     <>
       <tr className={issues ? 'issue' : ''} onClick={openModal}>
         <td>{item.key}</td>
-        <td>{item.value}</td>
+        <td>{item.value || 'N/A'}</td>
         <td>
           {issues ? (
             <XCircle className="circleButton" />
diff --git a/frontend/src/utils/other.js b/frontend/src/utils/other.js
index 8396fd8..9a6fd91 100644
--- a/frontend/src/utils/other.js
+++ b/frontend/src/utils/other.js
@@ -22,12 +22,8 @@ const checkDatePrototype = () => {
 
 // Returns object with location data
 const getOther = (battery, adBlock, workerData) => {
-  console.log(battery);
   let batteryLevel, batteryStatus;
-  if (battery === 'N/A') {
-    batteryLevel = 'N/A';
-    batteryStatus = 'N/A';
-  } else {
+  if (battery !== 'N/A') {
     batteryLevel = `${Math.round(battery.level * 100)}%`;
     batteryStatus = battery.charging ? 'Charging' : 'Not charging';
   }

From b198250fc02f8199fc7b40cebcb06e4722bf833c Mon Sep 17 00:00:00 2001
From: z0ccc <z0cccccccc@gmail.com>
Date: Wed, 29 Sep 2021 00:29:30 -0400
Subject: [PATCH 49/54] Increased loading block size to 500px

---
 frontend/src/components/Blocks.css | 1 +
 1 file changed, 1 insertion(+)

diff --git a/frontend/src/components/Blocks.css b/frontend/src/components/Blocks.css
index ba7595f..ebeefd9 100644
--- a/frontend/src/components/Blocks.css
+++ b/frontend/src/components/Blocks.css
@@ -10,6 +10,7 @@
   padding: 24px;
   box-shadow: rgba(0, 0, 0, 0.1) 0px 4px 12px;
   margin: 0 0 24px 0;
+  min-width: 500px;
 }
 
 @media screen and (max-width: 500px) {

From 9159590e1e36475ae92d560f94387f809b8d9751 Mon Sep 17 00:00:00 2001
From: z0ccc <z0cccccccc@gmail.com>
Date: Wed, 29 Sep 2021 10:49:46 -0400
Subject: [PATCH 50/54] Combine columns for mobile

---
 frontend/src/components/Blocks.css   | 16 ++++++++++++----
 frontend/src/components/Blocks.js    | 24 ++++++++----------------
 frontend/src/components/BlocksOne.js | 15 +++++++++++++++
 frontend/src/components/BlocksTwo.js | 15 +++++++++++++++
 4 files changed, 50 insertions(+), 20 deletions(-)
 create mode 100644 frontend/src/components/BlocksOne.js
 create mode 100644 frontend/src/components/BlocksTwo.js

diff --git a/frontend/src/components/Blocks.css b/frontend/src/components/Blocks.css
index ebeefd9..f2b0e75 100644
--- a/frontend/src/components/Blocks.css
+++ b/frontend/src/components/Blocks.css
@@ -2,6 +2,10 @@
   width: 500px;
 }
 
+.centerBlockMobile {
+  display: none;
+}
+
 .contentBlock {
   color: var(--text);
   background-color: #fff;
@@ -13,9 +17,13 @@
   min-width: 500px;
 }
 
-@media screen and (max-width: 500px) {
-  .contentBlock {
-    padding: 18px;
-    margin: 0 0 18px 0;
+@media screen and (max-width: 1200px) {
+  .centerBlockInner {
+    display: none;
+  }
+
+  .centerBlockMobile {
+    display: block;
+    max-width: 600px;
   }
 }
diff --git a/frontend/src/components/Blocks.js b/frontend/src/components/Blocks.js
index fc20e4b..2148b1d 100644
--- a/frontend/src/components/Blocks.js
+++ b/frontend/src/components/Blocks.js
@@ -1,12 +1,6 @@
 import { useState, useEffect } from 'react';
-import UserAgentBlock from './UserAgentBlock';
-import IntlBlock from './IntlBlock';
-import OtherBlock from './OtherBlock';
-import NavigatorBlock from './NavigatorBlock';
-import ScreenBlock from './ScreenBlock';
-import FingerprintBlock from './FingerprintBlock';
-import LocationBlock from './LocationBlock';
-import ConnectionBlock from './ConnectionBlock';
+import BlocksOne from './BlocksOne';
+import BlocksTwo from './BlocksTwo';
 // import FontsBlock from './FontsBlock';
 import { fetchAPI, getWebWorker } from '../utils/common';
 import './Blocks.css';
@@ -26,22 +20,20 @@ const Blocks = () => {
       {connectionData ? (
         <>
           <div className="centerBlockInner">
-            <FingerprintBlock workerData={workerData} />
-            <NavigatorBlock workerData={workerData} />
-            <UserAgentBlock workerAgent={workerData.userAgent} />
-            <IntlBlock workerData={workerData} />
+            <BlocksOne workerData={workerData} />
           </div>
           <div className="centerBlockInner">
-            <LocationBlock
+            <BlocksTwo
               workerData={workerData}
               connectionData={connectionData}
             />
-            <ConnectionBlock
+          </div>
+          <div className="centerBlockMobile">
+            <BlocksOne workerData={workerData} />
+            <BlocksTwo
               workerData={workerData}
               connectionData={connectionData}
             />
-            <ScreenBlock />
-            <OtherBlock workerData={workerData} />
           </div>
         </>
       ) : (
diff --git a/frontend/src/components/BlocksOne.js b/frontend/src/components/BlocksOne.js
new file mode 100644
index 0000000..638098f
--- /dev/null
+++ b/frontend/src/components/BlocksOne.js
@@ -0,0 +1,15 @@
+import UserAgentBlock from './UserAgentBlock';
+import IntlBlock from './IntlBlock';
+import NavigatorBlock from './NavigatorBlock';
+import FingerprintBlock from './FingerprintBlock';
+
+const BlocksOne = ({ workerData }) => (
+  <>
+    <FingerprintBlock workerData={workerData} />
+    <NavigatorBlock workerData={workerData} />
+    <UserAgentBlock workerAgent={workerData.userAgent} />
+    <IntlBlock workerData={workerData} />
+  </>
+);
+
+export default BlocksOne;
diff --git a/frontend/src/components/BlocksTwo.js b/frontend/src/components/BlocksTwo.js
new file mode 100644
index 0000000..abbe95b
--- /dev/null
+++ b/frontend/src/components/BlocksTwo.js
@@ -0,0 +1,15 @@
+import OtherBlock from './OtherBlock';
+import ScreenBlock from './ScreenBlock';
+import LocationBlock from './LocationBlock';
+import ConnectionBlock from './ConnectionBlock';
+
+const BlocksTwo = ({ workerData, connectionData }) => (
+  <>
+    <LocationBlock workerData={workerData} connectionData={connectionData} />
+    <ConnectionBlock workerData={workerData} connectionData={connectionData} />
+    <ScreenBlock />
+    <OtherBlock workerData={workerData} />
+  </>
+);
+
+export default BlocksTwo;

From 71e6303aa4a0b39045a4aab74156506961340494 Mon Sep 17 00:00:00 2001
From: z0ccc <z0cccccccc@gmail.com>
Date: Wed, 29 Sep 2021 14:02:58 -0400
Subject: [PATCH 51/54] Made site responsive

---
 frontend/src/components/App.css              | 40 -------------
 frontend/src/components/Blocks.css           | 11 +++-
 frontend/src/components/FingerprintBlock.css | 10 +++-
 frontend/src/components/Logo.css             | 10 +++-
 frontend/src/components/TableRow.css         | 18 +++++-
 frontend/src/utils/navigator.js              | 63 ++++++++++++--------
 6 files changed, 83 insertions(+), 69 deletions(-)

diff --git a/frontend/src/components/App.css b/frontend/src/components/App.css
index 48003a6..25580d4 100644
--- a/frontend/src/components/App.css
+++ b/frontend/src/components/App.css
@@ -69,32 +69,10 @@ img {
 }
 
 @media screen and (max-width: 500px) {
-  .github {
-    width: 24px;
-    position: absolute;
-    top: 8px;
-    right: 8px;
-  }
-
   body {
     font-size: 14px;
   }
 
-  .contentBlock {
-    padding: 18px;
-    margin: 0 0 18px 0;
-  }
-
-  .centerBlockInner {
-    width: 650px;
-    margin: 12px 0 0 0;
-  }
-
-  .logo {
-    width: 185px;
-    margin: 0 0 8px 0;
-  }
-
   h1 {
     font-size: 16px;
   }
@@ -103,22 +81,4 @@ img {
     margin: 0 0 3px 0;
     font-size: 15px;
   }
-
-  .contentIcon {
-    flex: none;
-    margin: 0 18px 0 0;
-    width: 28px !important;
-  }
-
-  td:first-child {
-    width: 70px;
-  }
-
-  .boxWrap {
-    padding: 8px;
-  }
-
-  input[type='text'] {
-    width: calc(100% - 65px);
-  }
 }
diff --git a/frontend/src/components/Blocks.css b/frontend/src/components/Blocks.css
index f2b0e75..f4891a2 100644
--- a/frontend/src/components/Blocks.css
+++ b/frontend/src/components/Blocks.css
@@ -24,6 +24,15 @@
 
   .centerBlockMobile {
     display: block;
-    max-width: 600px;
+    max-width: 650px;
+    padding: 0 12px;
+  }
+
+  .contentBlock {
+    min-width: 0;
+    padding: 18px;
   }
 }
+
+@media screen and (max-width: 500px) {
+}
diff --git a/frontend/src/components/FingerprintBlock.css b/frontend/src/components/FingerprintBlock.css
index 33e01c0..fc22102 100644
--- a/frontend/src/components/FingerprintBlock.css
+++ b/frontend/src/components/FingerprintBlock.css
@@ -1,7 +1,6 @@
 .fingerprintTable td:first-child {
   width: 80px;
   font-weight: 600;
-  word-break: normal;
 }
 
 .boxWrap {
@@ -40,3 +39,12 @@ input[type='text'] {
   width: 200px;
   outline: none;
 }
+@media screen and (max-width: 500px) {
+  .boxWrap {
+    padding: 8px;
+  }
+
+  input[type='text'] {
+    width: calc(100% - 70px);
+  }
+}
diff --git a/frontend/src/components/Logo.css b/frontend/src/components/Logo.css
index 7700579..23bebe7 100644
--- a/frontend/src/components/Logo.css
+++ b/frontend/src/components/Logo.css
@@ -2,9 +2,17 @@
   display: flex;
   align-items: center;
   justify-content: center;
-  margin: 20px 0;
 }
 
 .logo {
+  margin: 20px 0;
   width: 250px;
+  display: flex;
+}
+
+@media screen and (max-width: 500px) {
+  .logo {
+    width: 160px;
+    margin: 12px 0;
+  }
 }
diff --git a/frontend/src/components/TableRow.css b/frontend/src/components/TableRow.css
index 414dc02..839ad9f 100644
--- a/frontend/src/components/TableRow.css
+++ b/frontend/src/components/TableRow.css
@@ -1,5 +1,6 @@
 td {
   padding: 12px;
+  word-break: break-all;
 }
 
 td:first-child {
@@ -11,7 +12,6 @@ td:first-child {
 td:nth-child(3) {
   width: 40px;
   font-weight: 600;
-  word-break: normal;
 }
 
 .circleButton {
@@ -54,3 +54,19 @@ ul {
   padding-left: 20px;
   margin: 0px;
 }
+
+@media screen and (max-width: 500px) {
+  td {
+    padding: 8px;
+  }
+
+  td:first-child {
+    width: 70px;
+  }
+
+  td:nth-child(3) {
+    width: 20px;
+    font-weight: 600;
+    word-break: normal;
+  }
+}
diff --git a/frontend/src/utils/navigator.js b/frontend/src/utils/navigator.js
index 6c36c5b..f22b3d1 100644
--- a/frontend/src/utils/navigator.js
+++ b/frontend/src/utils/navigator.js
@@ -1,7 +1,8 @@
 import { checkWebWorker } from './common';
 
 const getDeviceMemory = (key, worker) => ({
-  key,
+  key: 'Device memory',
+  code: `navigator.${key}`,
   value: navigator[key],
   issues: [
     checkNavigatorProperties(key),
@@ -12,8 +13,9 @@ const getDeviceMemory = (key, worker) => ({
 });
 
 const getHardwareConcurrency = (key, worker) => ({
-  key,
-  value: navigator.hardwareConcurrency,
+  key: 'Hardware concurrency',
+  code: `navigator.${key}`,
+  value: navigator[key],
   issues: [
     checkNavigatorProperties(key),
     checkNavigatorValue(key),
@@ -23,8 +25,9 @@ const getHardwareConcurrency = (key, worker) => ({
 });
 
 const getMaxTouchPoints = (key) => ({
-  key,
-  value: navigator.maxTouchPoints,
+  key: 'Max touch points',
+  code: `navigator.${key}`,
+  value: navigator[key],
   issues: [
     checkNavigatorProperties(key),
     checkNavigatorValue(key),
@@ -33,8 +36,9 @@ const getMaxTouchPoints = (key) => ({
 });
 
 const getPlatform = (key, worker) => ({
-  key,
-  value: navigator.platform,
+  key: 'Platform',
+  code: `navigator.${key}`,
+  value: navigator[key],
   issues: [
     checkNavigatorProperties(key),
     checkNavigatorValue(key),
@@ -44,8 +48,9 @@ const getPlatform = (key, worker) => ({
 });
 
 const getUserAgent = (key, worker) => ({
-  key,
-  value: navigator.userAgent,
+  key: 'User agent',
+  code: `navigator.${key}`,
+  value: navigator[key],
   issues: [
     checkNavigatorProperties(key),
     checkNavigatorValue(key),
@@ -55,8 +60,9 @@ const getUserAgent = (key, worker) => ({
 });
 
 const getAppVersion = (key, worker) => ({
-  key,
-  value: navigator.appVersion,
+  key: 'App version',
+  code: `navigator.${key}`,
+  value: navigator[key],
   issues: [
     checkNavigatorProperties(key),
     checkNavigatorValue(key),
@@ -66,8 +72,9 @@ const getAppVersion = (key, worker) => ({
 });
 
 const getLanguage = (key, worker) => ({
-  key,
-  value: navigator.language,
+  key: 'Language',
+  code: `navigator.${key}`,
+  value: navigator[key],
   issues: [
     checkNavigatorProperties(key),
     checkNavigatorValue(key),
@@ -77,8 +84,9 @@ const getLanguage = (key, worker) => ({
 });
 
 const getLanguages = (key, worker) => ({
-  key,
-  value: navigator.languages,
+  key: 'Languages',
+  code: `navigator.${key}`,
+  value: navigator[key],
   issues: [
     checkNavigatorProperties(key),
     checkNavigatorValue(key),
@@ -88,8 +96,9 @@ const getLanguages = (key, worker) => ({
 });
 
 const getCookieEnabled = (key) => ({
-  key,
-  value: navigator.cookieEnabled ? 'True' : 'False',
+  key: 'Cookie enabled',
+  code: `navigator.${key}`,
+  value: navigator[key] ? 'True' : 'False',
   issues: [
     checkNavigatorProperties(key),
     checkNavigatorValue(key),
@@ -98,8 +107,9 @@ const getCookieEnabled = (key) => ({
 });
 
 const getDoNotTrack = (key) => ({
-  key,
-  value: navigator.doNotTrack ? 'True' : 'False',
+  key: 'Do not track',
+  code: `navigator.${key}`,
+  value: navigator[key] ? 'True' : 'False',
   issues: [
     checkNavigatorProperties(key),
     checkNavigatorValue(key),
@@ -108,8 +118,9 @@ const getDoNotTrack = (key) => ({
 });
 
 const getWebDriver = (key) => ({
-  key,
-  value: navigator.webdriver ? 'True' : 'False',
+  key: 'Web driver',
+  code: `navigator.${key}`,
+  value: navigator[key] ? 'True' : 'False',
   issues: [
     checkNavigatorProperties(key),
     checkNavigatorValue(key),
@@ -118,8 +129,9 @@ const getWebDriver = (key) => ({
 });
 
 const getPlugins = (key) => ({
-  key,
-  value: sortPlugins(navigator.plugins),
+  key: 'Plugins',
+  code: `navigator.${key}`,
+  value: sortPlugins(navigator[key]),
   issues: [
     checkNavigatorProperties(key),
     checkNavigatorValue(key),
@@ -128,8 +140,9 @@ const getPlugins = (key) => ({
 });
 
 const getVendor = (key) => ({
-  key,
-  value: navigator.vendor,
+  key: 'Vendor',
+  code: `navigator.${key}`,
+  value: navigator[key],
   issues: [
     checkNavigatorProperties(key),
     checkNavigatorValue(key),

From 1d15c17f73579646a8a52c9ad8078c2e7d0327c6 Mon Sep 17 00:00:00 2001
From: z0ccc <z0cccccccc@gmail.com>
Date: Wed, 29 Sep 2021 15:03:52 -0400
Subject: [PATCH 52/54] Added code data on row hover

---
 frontend/src/components/FingerprintBlock.js |  7 +-
 frontend/src/components/NavigatorBlock.js   |  4 +-
 frontend/src/components/UserAgentBlock.js   | 13 +++-
 frontend/src/utils/intl.js                  |  2 +
 frontend/src/utils/other.js                 |  3 +
 frontend/src/utils/screen.js                | 86 +++++++++++----------
 6 files changed, 67 insertions(+), 48 deletions(-)

diff --git a/frontend/src/components/FingerprintBlock.js b/frontend/src/components/FingerprintBlock.js
index 3a4a72e..afe2f17 100644
--- a/frontend/src/components/FingerprintBlock.js
+++ b/frontend/src/components/FingerprintBlock.js
@@ -35,10 +35,9 @@ const FingerprintBlock = ({ workerData }) => {
         </>
       )}
       <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
-        use private mode the hash will stay the same. Enter your name below and
-        reload the page in private mode to test it out.
+        <b>Explanation:</b> This hash is calculated from your device data. Even
+        if you clear cookies, change your IP or use private mode the hash will
+        stay the same. Enter a signature and turn on a VPN to test it out.
       </p>
       <form onSubmit={(e) => postSignature(hash, e.target[0].value)}>
         <input
diff --git a/frontend/src/components/NavigatorBlock.js b/frontend/src/components/NavigatorBlock.js
index 401a977..a9e4fde 100644
--- a/frontend/src/components/NavigatorBlock.js
+++ b/frontend/src/components/NavigatorBlock.js
@@ -7,8 +7,8 @@ const NavigatorBlock = ({ workerData }) => (
     <h1>Navigator</h1>
     <Table data={getNavigator(workerData)} />
     <p>
-      <b>Explanation:</b> JavaScript can be used to find information about your
-      hardware. This information can be used to create a fingerprint.
+      <b>Explanation:</b> The Navigator interface exposes info about your
+      computer.
     </p>
   </Block>
 );
diff --git a/frontend/src/components/UserAgentBlock.js b/frontend/src/components/UserAgentBlock.js
index 92d357a..7437262 100644
--- a/frontend/src/components/UserAgentBlock.js
+++ b/frontend/src/components/UserAgentBlock.js
@@ -7,8 +7,17 @@ const UserAgentBlock = ({ workerAgent }) => (
     <h1>User Agent</h1>
     <Table data={getUserAgent(workerAgent)} />
     <p>
-      <b>Explanation:</b> JavaScript can be used to find information about your
-      hardware. This information can be used to create a fingerprint.
+      <b>Explanation:</b> Your user agent can be parsed to determine information
+      about your browser or operating system.{' '}
+      <a
+        className="link"
+        target="_blank"
+        rel="noreferrer"
+        alt="Read more about user agent"
+        href="https://developer.mozilla.org/en-US/docs/Web/HTTP/Headers/User-Agent"
+      >
+        Read more
+      </a>
     </p>
   </Block>
 );
diff --git a/frontend/src/utils/intl.js b/frontend/src/utils/intl.js
index bb58eae..1106741 100644
--- a/frontend/src/utils/intl.js
+++ b/frontend/src/utils/intl.js
@@ -2,6 +2,7 @@ import { checkWebWorker } from './common';
 
 const getLocale = (locale) => ({
   key: 'Locale',
+  code: 'Intl.DateTimeFormat().resolvedOptions().locale',
   value: Intl.DateTimeFormat().resolvedOptions().locale,
   issues: [
     checkWebWorker(Intl.DateTimeFormat().resolvedOptions().locale, locale),
@@ -10,6 +11,7 @@ const getLocale = (locale) => ({
 
 const getTimezone = (timeZone) => ({
   key: 'Timezone',
+  code: 'Intl.DateTimeFormat().resolvedOptions().timeZone',
   value: Intl.DateTimeFormat().resolvedOptions().timeZone,
   issues: [
     checkWebWorker(Intl.DateTimeFormat().resolvedOptions().timeZone, timeZone),
diff --git a/frontend/src/utils/other.js b/frontend/src/utils/other.js
index 9a6fd91..627296e 100644
--- a/frontend/src/utils/other.js
+++ b/frontend/src/utils/other.js
@@ -30,6 +30,7 @@ const getOther = (battery, adBlock, workerData) => {
   return [
     {
       key: 'Brave browser',
+      code: 'navigator.brave',
       value: navigator.brave ? 'True' : 'False',
       issues: [],
     },
@@ -45,11 +46,13 @@ const getOther = (battery, adBlock, workerData) => {
     },
     {
       key: 'Date',
+      code: 'new Date().toString()',
       value: new Date().toString(),
       issues: [checkDatePrototype()],
     },
     {
       key: 'Timezone offset',
+      code: 'new Date().getTimezoneOffset()',
       value: new Date().getTimezoneOffset(),
       issues: [
         checkDatePrototype(),
diff --git a/frontend/src/utils/screen.js b/frontend/src/utils/screen.js
index 7426bd0..da3f8fa 100644
--- a/frontend/src/utils/screen.js
+++ b/frontend/src/utils/screen.js
@@ -1,6 +1,7 @@
-const getWidth = () => ({
-  key: 'width',
-  value: window.screen.width,
+const getWidth = (key) => ({
+  key: 'Width',
+  code: `window.screen.${key}`,
+  value: window.screen[key],
   issues: [
     checkScreenProperties('width'),
     checkScreenValue('width'),
@@ -9,16 +10,10 @@ const getWidth = () => ({
   ],
 });
 
-const getOuterWidth = () => ({
-  key: 'outerWidth',
-  value: window.outerWidth,
-  // issues: checkWindowProperties('outerWidth'),
-  issues: [],
-});
-
-const getAvailWidth = () => ({
-  key: 'availWidth',
-  value: window.screen.availWidth,
+const getAvailWidth = (key) => ({
+  key: 'Avail width',
+  code: `window.screen.${key}`,
+  value: window.screen[key],
   issues: [
     checkScreenProperties('availWidth'),
     checkScreenValue('availWidth'),
@@ -27,9 +22,17 @@ const getAvailWidth = () => ({
   ],
 });
 
-const getHeight = () => ({
-  key: 'height',
-  value: window.screen.height,
+const getOuterWidth = (key) => ({
+  key: 'Outer width',
+  code: `window.${key}`,
+  value: window[key],
+  issues: [],
+});
+
+const getHeight = (key) => ({
+  key: 'Height',
+  code: `window.screen.${key}`,
+  value: window.screen[key],
   issues: [
     checkScreenProperties('height'),
     checkScreenValue('height'),
@@ -37,16 +40,10 @@ const getHeight = () => ({
   ],
 });
 
-const getOuterHeight = () => ({
-  key: 'outerHeight',
-  value: window.outerHeight,
-  // issues: checkWindowProperties('outerHeight'),
-  issues: [],
-});
-
-const getAvailHeight = () => ({
-  key: 'availHeight',
-  value: window.screen.availHeight,
+const getAvailHeight = (key) => ({
+  key: 'Avail height',
+  code: `window.screen.${key}`,
+  value: window.screen[key],
   issues: [
     checkScreenProperties('availHeight'),
     checkScreenValue('availHeight'),
@@ -55,9 +52,17 @@ const getAvailHeight = () => ({
   ],
 });
 
-const getPixelDepth = () => ({
-  key: 'pixelDepth',
-  value: window.screen.pixelDepth,
+const getOuterHeight = (key) => ({
+  key: 'Outer height',
+  code: `window.${key}`,
+  value: window[key],
+  issues: [],
+});
+
+const getPixelDepth = (key) => ({
+  key: 'Pixel depth',
+  code: `window.screen.${key}`,
+  value: window.screen[key],
   issues: [
     checkScreenProperties('pixelDepth'),
     checkScreenValue('pixelDepth'),
@@ -65,9 +70,10 @@ const getPixelDepth = () => ({
   ],
 });
 
-const getColorDepth = () => ({
-  key: 'colorDepth',
-  value: window.screen.colorDepth,
+const getColorDepth = (key) => ({
+  key: 'Color depth',
+  code: `window.screen.${key}`,
+  value: window.screen[key],
   issues: [
     checkScreenProperties('colorDepth'),
     checkScreenValue('colorDepth'),
@@ -118,14 +124,14 @@ const checkScreenProperties = (key) => {
 };
 
 const getScreen = () => [
-  getWidth(),
-  getAvailWidth(),
-  getOuterWidth(),
-  getHeight(),
-  getAvailHeight(),
-  getOuterHeight(),
-  getPixelDepth(),
-  getColorDepth(),
+  getWidth('width'),
+  getAvailWidth('availWidth'),
+  getOuterWidth('outerWidth'),
+  getHeight('height'),
+  getAvailHeight('availHeight'),
+  getOuterHeight('outerHeight'),
+  getPixelDepth('pixelDepth'),
+  getColorDepth('colorDepth'),
 ];
 
 export default getScreen;

From 2a8597f213639cc50d36e0b2204fe918a613e887 Mon Sep 17 00:00:00 2001
From: z0ccc <z0cccccccc@gmail.com>
Date: Wed, 29 Sep 2021 15:16:11 -0400
Subject: [PATCH 53/54] Added Explanation text and read more links

---
 frontend/src/components/App.css            | 12 ++++++++++--
 frontend/src/components/ConnectionBlock.js | 11 ++++++++++-
 frontend/src/components/IntlBlock.js       | 12 ++++++++++--
 frontend/src/components/LocationBlock.js   | 11 ++++++++++-
 frontend/src/components/NavigatorBlock.js  | 11 ++++++++++-
 frontend/src/components/OtherBlock.js      |  4 ----
 frontend/src/components/ScreenBlock.js     | 12 ++++++++++--
 7 files changed, 60 insertions(+), 13 deletions(-)

diff --git a/frontend/src/components/App.css b/frontend/src/components/App.css
index 25580d4..7f3dacf 100644
--- a/frontend/src/components/App.css
+++ b/frontend/src/components/App.css
@@ -4,9 +4,8 @@
   --text: #4b5563;
   --border: #ddd;
   --issueBackground: #f8d7da;
-  --issueHover: #f4c1c6;
-  --issueBorder: #f5c6cb;
   --issueText: #721c24;
+  --link: #943ec5;
 }
 
 body {
@@ -68,6 +67,15 @@ img {
   margin: 0 0 12px 0;
 }
 
+.link {
+  color: var(--link);
+  text-decoration: none;
+}
+
+.link:hover {
+  text-decoration: underline;
+}
+
 @media screen and (max-width: 500px) {
   body {
     font-size: 14px;
diff --git a/frontend/src/components/ConnectionBlock.js b/frontend/src/components/ConnectionBlock.js
index 479e3d7..c138cdc 100644
--- a/frontend/src/components/ConnectionBlock.js
+++ b/frontend/src/components/ConnectionBlock.js
@@ -8,7 +8,16 @@ const LocationBlock = ({ connectionData }) => (
     <Table data={getConnection(connectionData)} />
     <p>
       <b>Explanation:</b> Your IP address reveals information about your
-      connection. Using a VPN or Tor will hide your connection info.
+      connection.{' '}
+      <a
+        className="link"
+        target="_blank"
+        rel="noreferrer"
+        alt="Read more about ip connection"
+        href="https://en.wikipedia.org/wiki/IP_address"
+      >
+        Read more
+      </a>
     </p>
   </Block>
 );
diff --git a/frontend/src/components/IntlBlock.js b/frontend/src/components/IntlBlock.js
index 85ae198..062c5df 100644
--- a/frontend/src/components/IntlBlock.js
+++ b/frontend/src/components/IntlBlock.js
@@ -7,8 +7,16 @@ const IntlBlock = ({ workerData }) => (
     <h1>Intl</h1>
     <Table data={getIntl(workerData)} />
     <p>
-      <b>Explanation:</b> JavaScript can be used to find information about your
-      hardware. This information can be used to create a fingerprint.
+      <b>Explanation:</b> The Intl object exposes info about your computer.{' '}
+      <a
+        className="link"
+        target="_blank"
+        rel="noreferrer"
+        alt="Read more about intl"
+        href="https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl"
+      >
+        Read more
+      </a>
     </p>
   </Block>
 );
diff --git a/frontend/src/components/LocationBlock.js b/frontend/src/components/LocationBlock.js
index d9ef891..6e7ef87 100644
--- a/frontend/src/components/LocationBlock.js
+++ b/frontend/src/components/LocationBlock.js
@@ -9,7 +9,16 @@ const LocationBlock = ({ connectionData, workerData }) => (
     <Table data={getLocation(connectionData, workerData)} />
     <p>
       <b>Explanation:</b> Your IP address can be used to determine your
-      location. Using a VPN or Tor will hide your true location.
+      location.{' '}
+      <a
+        className="link"
+        target="_blank"
+        rel="noreferrer"
+        alt="Read more about ip location"
+        href="https://en.wikipedia.org/wiki/IP_address"
+      >
+        Read more
+      </a>
     </p>
   </Block>
 );
diff --git a/frontend/src/components/NavigatorBlock.js b/frontend/src/components/NavigatorBlock.js
index a9e4fde..5a0841c 100644
--- a/frontend/src/components/NavigatorBlock.js
+++ b/frontend/src/components/NavigatorBlock.js
@@ -8,7 +8,16 @@ const NavigatorBlock = ({ workerData }) => (
     <Table data={getNavigator(workerData)} />
     <p>
       <b>Explanation:</b> The Navigator interface exposes info about your
-      computer.
+      computer.{' '}
+      <a
+        className="link"
+        target="_blank"
+        rel="noreferrer"
+        alt="Read more about navigator"
+        href="https://developer.mozilla.org/en-US/docs/Web/API/Navigator"
+      >
+        Read more
+      </a>
     </p>
   </Block>
 );
diff --git a/frontend/src/components/OtherBlock.js b/frontend/src/components/OtherBlock.js
index fe2ade8..3f269f3 100644
--- a/frontend/src/components/OtherBlock.js
+++ b/frontend/src/components/OtherBlock.js
@@ -35,10 +35,6 @@ const OtherBlock = ({ workerData }) => {
       {battery && adBlock !== undefined && (
         <Table data={getOther(battery, adBlock, workerData)} />
       )}
-      <p>
-        <b>Explanation:</b> JavaScript can be used to find information about
-        your hardware. This information can be used to create a fingerprint.
-      </p>
     </Block>
   );
 };
diff --git a/frontend/src/components/ScreenBlock.js b/frontend/src/components/ScreenBlock.js
index fa547d7..c2c4132 100644
--- a/frontend/src/components/ScreenBlock.js
+++ b/frontend/src/components/ScreenBlock.js
@@ -7,8 +7,16 @@ const ScreenBlock = () => (
     <h1>Screen</h1>
     <Table data={getScreen()} />
     <p>
-      <b>Explanation:</b> JavaScript can be used to find information about your
-      hardware. This information can be used to create a fingerprint.
+      <b>Explanation:</b> The Screen interface exposes info about your computer.{' '}
+      <a
+        className="link"
+        target="_blank"
+        rel="noreferrer"
+        alt="Read more about screen"
+        href="https://developer.mozilla.org/en-US/docs/Web/API/Screen"
+      >
+        Read more
+      </a>
     </p>
   </Block>
 );

From fa7913b2aa56200514e9680bebd971c1e71bcf07 Mon Sep 17 00:00:00 2001
From: z0ccc <z0cccccccc@gmail.com>
Date: Wed, 29 Sep 2021 15:30:57 -0400
Subject: [PATCH 54/54] Fixed loading block size

---
 frontend/src/components/Blocks.css | 11 ++++++++++-
 frontend/src/components/Blocks.js  |  2 +-
 2 files changed, 11 insertions(+), 2 deletions(-)

diff --git a/frontend/src/components/Blocks.css b/frontend/src/components/Blocks.css
index f4891a2..9bd94c4 100644
--- a/frontend/src/components/Blocks.css
+++ b/frontend/src/components/Blocks.css
@@ -29,10 +29,19 @@
   }
 
   .contentBlock {
-    min-width: 0;
     padding: 18px;
+    margin: 0 0 12px 0;
+    min-width: 400px;
+  }
+
+  .loadBlock {
+    margin: 0 12px;
   }
 }
 
 @media screen and (max-width: 500px) {
+  .contentBlock {
+    width: 100%;
+    min-width: 0;
+  }
 }
diff --git a/frontend/src/components/Blocks.js b/frontend/src/components/Blocks.js
index 2148b1d..dea9e15 100644
--- a/frontend/src/components/Blocks.js
+++ b/frontend/src/components/Blocks.js
@@ -37,7 +37,7 @@ const Blocks = () => {
           </div>
         </>
       ) : (
-        <div className="contentBlock">
+        <div className="contentBlock loadBlock">
           <center>Loading...</center>
         </div>
       )}