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 = () => (
<>
+
- {/*
- */}
+
+
{/*
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 }) => {
{data.map((item) => (
-
+
))}
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 (
+
+ User Agent
+ {userAgent && (
+
+
+
+
+ | Browser |
+ {userAgent.browser.name} |
+
+
+
+
+ | Browser version |
+ {userAgent.browser.version} |
+
+
+
+
+ | OS |
+
+ {userAgent.os.name} {userAgent.os.versionName}
+ |
+
+
+
+
+ | OS version |
+ {userAgent.os.version} |
+
+
+
+
+ | Engine |
+
+ {userAgent.engine.name} {userAgent.engine.version}
+ |
+
+
+
+
+ | Platform type |
+ {userAgent.platform.type} |
+
+
+
+
+ )}
+
+ Explanation: JavaScript can be used to find information about
+ your hardware. This information can be used to create a fingerprint.
+
+
+ );
+};
+
+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;
+// };