Added userAgentBlock

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 = () => {

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 = () => {

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 />

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>

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;

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;
+// };