Added other block

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;

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;

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>
   );
 };
 

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>
   );
 };
 

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>
   );
 };
 

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>
   );
 };
 

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;

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;

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;

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;

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 = () => {
+import Block from './Block';
-  const [adBlockDetected, setAdBlockDetected] = useState(false);
+import Table from './Table';
-  const [batteryLevel, setBatteryLevel] = useState();
+import getOther from '../utils/other';
-  const [batteryStatus, setBatteryStatus] = useState();
+
+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)}%`);
+      setBattery(res);
-      setBatteryStatus(res.charging ? 'Charging' : 'Not charging');
     });
   }, []);
 
   return (
-    <ScanBlock>
+    <Block>
       <h1>Other</h1>
-      <div className="tableWrap">
+      {battery && adBlock !== undefined && (
-        <table>
+        <Table data={getOther(battery, adBlock)} />
-          <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>
-    </ScanBlock>
+    </Block>
   );
 };
+
 export default OtherBlock;

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;

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;

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;

frontend/src/components/UserAgentBlock.js

@@ -1,17 +1,16 @@
-/* eslint-disable no-unused-vars */
+import Block from './Block';
-import ScanBlock 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;

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;

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',