Added more software stuff

package-lock.json

@@ -9,6 +9,7 @@
       "version": "1.0.0",
       "license": "ISC",
       "dependencies": {
+        "bowser": "^2.11.0",
         "react": "^16.14.0",
         "react-dom": "^16.14.0",
         "react-flagpack": "^0.1.1",
@@ -3005,6 +3006,11 @@
         "multicast-dns-service-types": "^1.1.0"
       }
     },
+    "node_modules/bowser": {
+      "version": "2.11.0",
+      "resolved": "https://registry.npmjs.org/bowser/-/bowser-2.11.0.tgz",
+      "integrity": "sha512-AlcaJBi/pqqJBIQ8U9Mcpc9i8Aqxn88Skv5d+xBX006BY5u8N3mGLHa5Lgppa7L/HfwgwLgZ6NYs+Ag6uUmJRA=="
+    },
     "node_modules/brace-expansion": {
       "version": "1.1.11",
       "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz",
@@ -16726,6 +16732,11 @@
         "multicast-dns-service-types": "^1.1.0"
       }
     },
+    "bowser": {
+      "version": "2.11.0",
+      "resolved": "https://registry.npmjs.org/bowser/-/bowser-2.11.0.tgz",
+      "integrity": "sha512-AlcaJBi/pqqJBIQ8U9Mcpc9i8Aqxn88Skv5d+xBX006BY5u8N3mGLHa5Lgppa7L/HfwgwLgZ6NYs+Ag6uUmJRA=="
+    },
     "brace-expansion": {
       "version": "1.1.11",
       "resolved": "https://registry.npmjs.org/brace-expansion/-/brace-expansion-1.1.11.tgz",

package.json

@@ -38,6 +38,7 @@
     "webpack-dev-server": "^3.11.0"
   },
   "dependencies": {
+    "bowser": "^2.11.0",
     "react": "^16.14.0",
     "react-dom": "^16.14.0",
     "react-flagpack": "^0.1.1",

src/App.jsx

@@ -1,35 +1,13 @@
 import * as React from 'react';
 import { useState, useEffect } from 'react';
 import Flag from 'react-flagpack';
+import * as Bowser from 'bowser';
 import './App.css';
 
 const updateDOM = (id, text) => {
   document.getElementById(id).innerHTML += text;
 };
 
-const getBrowser = (userAgent) => {
-  if (
-    (userAgent.indexOf('Opera') ||
-      userAgent.indexOf('OPR')) !== -1
-  ) {
-    return 'Opera';
-  } if (userAgent.indexOf('Edg') !== -1) {
-    return 'Edge';
-  } if (userAgent.indexOf('Chrome') !== -1) {
-    return 'Chrome';
-  } if (userAgent.indexOf('Safari') !== -1) {
-    return 'Safari';
-  } if (userAgent.indexOf('Firefox') !== -1) {
-    return 'Firefox';
-  } if (
-    userAgent.indexOf('MSIE') !== -1 ||
-    !!document.documentMode === true
-  ) {
-    return 'IE';
-  }
-  return 'unknown';
-};
-
 const App = () => {
   const [country, setCountry] = useState('US');
   const [flag, setFlag] = useState(false);
@@ -48,9 +26,21 @@ const App = () => {
         updateDOM('provider', data.isp);
       });
 
-    updateDOM('browser', getBrowser(navigator.userAgent));
+    const uaResult = Bowser.parse(navigator.userAgent);
+    updateDOM('browser', uaResult.browser.name);
+    updateDOM('browserVersion', uaResult.browser.version);
+    updateDOM('browserEngine', uaResult.engine.name);
+    updateDOM('os', `${uaResult.os.name} ${uaResult.os.versionName}`);
 
+    updateDOM('language', navigator.language);
+    updateDOM('timezone', Intl.DateTimeFormat().resolvedOptions().timeZone);
+    updateDOM('cookies', navigator.cookieEnabled);
+    updateDOM('java', navigator.javaEnabled());
+    updateDOM('plugins', navigator.plugins);
+
+    updateDOM('platform', uaResult.platform.type);
     updateDOM('screenSize', `${window.screen.width}x${window.screen.height}`);
+    updateDOM('color', window.screen.colorDepth);
 
     navigator.getBattery().then((battery) => {
       updateDOM('batteryLevel', `${Math.round(battery.level * 100)}%`);
@@ -91,10 +81,40 @@ const App = () => {
       <div className="item" id="browser">
         Browser:{' '}
       </div>
+      <div className="item" id="browserVersion">
+        Browser version:{' '}
+      </div>
+      <div className="item" id="browserEngine">
+        Browser engine:{' '}
+      </div>
+      <div className="item" id="os">
+        Operating system:{' '}
+      </div>
+      <div className="item" id="language">
+        Language:{' '}
+      </div>
+      <div className="item" id="timezone">
+        Timezone:{' '}
+      </div>
+      <div className="item" id="cookies">
+        Cookies enabled:{' '}
+      </div>
+      <div className="item" id="java">
+        Java enabled:{' '}
+      </div>
+      <div className="item" id="plugins">
+        Plugins:{' '}
+      </div>
       <div className="title">Hardware</div>
+      <div className="item" id="platform">
+        Platform:{' '}
+      </div>
       <div className="item" id="screenSize">
         Screen resolution:{' '}
       </div>
+      <div className="item" id="color">
+        Color Resolution:{' '}
+      </div>
       <div className="item" id="batteryLevel">
         Battery level:{' '}
       </div>