Added useragent block

frontend/src/components/Blocks.js

@@ -31,8 +31,8 @@ const ScanBlocks = () => {
           <div className="centerBlockInner">
             {/* <FingerprintBlock /> */}
             <NavigatorBlock workerData={workerData} />
-            {/* <UserAgentBlock />
+            <UserAgentBlock workerAgent={workerData.userAgent} />
-            <IntlBlock /> */}
+            {/* <IntlBlock /> */}
           </div>
           <div className="centerBlockInner">
             <LocationBlock

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>

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>

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.

frontend/src/components/UserAgentBlock.js

@@ -1,105 +1,17 @@
-// /* eslint-disable no-unused-vars */
+/* eslint-disable no-unused-vars */
-// import { useState, useEffect } from 'react';
+import ScanBlock from './Block';
-// import Bowser from 'bowser';
+import Table from './Table';
-// import ScanBlock from './Block';
+import getUserAgent from '../utils/userAgent';
-// import Table from './Table';
-// import {
-//   checkNavigatorProperties,
-//   checkWebWorker,
-//   checkScreenProperties,
-// } from './main';
-// import { ReactComponent as CheckCircle } from '../images/checkCircle.svg';
 
-// const UserAgentBlock = () => {
+const UserAgentBlock = ({ workerAgent }) => (
-//   const [firstRender, setfirstRender] = useState(true);
+  <ScanBlock>
-//   const [workerData, setWorkerData] = useState('');
+    <h1>User Agent</h1>
-//   const [userAgent, setUserAgent] = useState();
+    <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(() => {
+export default UserAgentBlock;
-//     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;

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;

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;