Added hardware functions to main

frontend/.eslintrc.js

@@ -22,6 +22,9 @@ module.exports = {
     'linebreak-style': 'off',
     'react/jsx-filename-extension': [1, { extensions: ['.jsx', '.js'] }],
     'jsx-a11y/label-has-associated-control': 'off',
+    'one-var': 'off',
+    'one-var-declaration-per-line': 'off',
+    'object-curly-newline': 'off',
     'import/extensions': [
       'error',
       'ignorePackages',
@@ -33,6 +36,6 @@ module.exports = {
     'react/jsx-one-expression-per-line': 'off',
     'react/prop-types': 'off',
     'react/react-in-jsx-scope': 'off',
-    'no-bitwise': 'off'
+    'no-bitwise': 'off',
   },
 };

frontend/src/components/FingerprintBlock.js

@@ -1,8 +1,8 @@
-import md5 from 'crypto-js/md5';
 import { useState, useEffect } from 'react';
 import axios from 'axios';
 import ScanBlock from './ScanBlock';
 import Table from './Table';
+import { getHash } from './main';
 
 const FingerprintBlock = () => {
   const [name, setName] = useState('');
@@ -106,7 +106,7 @@ const FingerprintBlock = () => {
     },
   ];
 
-  const hash = md5(JSON.stringify(fingerprintData)).toString();
+  const hash = getHash(fingerprintData);
 
   const tableData = [
     {

frontend/src/components/HardwareBlock.js

@@ -1,75 +1,18 @@
+/* eslint-disable no-unused-vars */
 import { useState, useEffect } from 'react';
 import ScanBlock from './ScanBlock';
 import Table from './Table';
+import { getHardware, getWebGL, getBattery } from './main';
 
 const HardwareBlock = () => {
-  const [batLevel, setBatLevel] = useState('');
+  const [data, setData] = useState([]);
-  const [batStatus, setBatStatus] = useState('');
 
   useEffect(() => {
-    // waits for battery info to resolve and then updates
+    getBattery().then((batteryInfo) => {
-    if ('getBattery' in navigator) {
+      setData([...getHardware(), ...getWebGL(), ...batteryInfo]);
-      navigator.getBattery().then((res) => {
+    });
-        setBatLevel(`${Math.round(res.level * 100)}%`);
-        setBatStatus(res.charging ? 'Charging' : 'Not charging');
-      });
-    } else {
-      setBatLevel('N/A');
-      setBatStatus('N/A');
-    }
   }, []);
 
-  const gl = document.createElement('canvas').getContext('webgl');
-  const ext = gl.getExtension('WEBGL_debug_renderer_info');
-
-  // Hardware table items
-  const data = [
-    {
-      key: 'screenResolution',
-      title: 'Screen resolution',
-      value: `${window.screen.width}x${window.screen.height}`,
-    },
-    {
-      key: 'colorResolution',
-      title: 'Color Resolution',
-      value: window.screen.colorDepth,
-    },
-    {
-      key: 'batteryLevel',
-      title: 'Battery level',
-      value: batLevel,
-    },
-    {
-      key: 'batteryStatus',
-      title: 'Battery status',
-      value: batStatus,
-    },
-    {
-      key: 'deviceMemory',
-      title: 'Device memory',
-      value: navigator.deviceMemory ? `${navigator.deviceMemory}GB` : 'N/A',
-    },
-    {
-      key: 'cpuCores',
-      title: '# of CPU cores',
-      value: navigator.hardwareConcurrency || 'N/A',
-    },
-    {
-      key: 'maxTouchpoints',
-      title: 'Max touchpoints',
-      value: navigator.maxTouchPoints || 0,
-    },
-    {
-      key: 'webGLVendor',
-      title: 'WebGL vendor',
-      value: gl.getParameter(ext.UNMASKED_VENDOR_WEBGL),
-    },
-    {
-      key: 'webglRenderer',
-      title: 'WebGL renderer',
-      value: gl.getParameter(ext.UNMASKED_RENDERER_WEBGL),
-    },
-  ];
   return (
     <ScanBlock>
       <h1>Hardware</h1>

frontend/src/components/main.js

@@ -1,5 +1,82 @@
+/* eslint-disable import/prefer-default-export */
 import md5 from 'crypto-js/md5';
 
 const getHash = (data) => md5(JSON.stringify(data)).toString();
 
-export { getHash as default };
+// Hardware table items
+const getHardware = () => {
+  const data = [
+    {
+      key: 'screenResolution',
+      title: 'Screen resolution',
+      value: `${window.screen.width}x${window.screen.height}`,
+    },
+    {
+      key: 'colorResolution',
+      title: 'Color Resolution',
+      value: window.screen.colorDepth,
+    },
+    {
+      key: 'deviceMemory',
+      title: 'Device memory',
+      value: navigator.deviceMemory ? `${navigator.deviceMemory}GB` : 'N/A',
+    },
+    {
+      key: 'cpuCores',
+      title: '# of CPU cores',
+      value: navigator.hardwareConcurrency || 'N/A',
+    },
+    {
+      key: 'maxTouchpoints',
+      title: 'Max touchpoints',
+      value: navigator.maxTouchPoints || 0,
+    },
+  ];
+  return data;
+};
+
+const getBattery = async () => {
+  let level, status;
+  if ('getBattery' in navigator) {
+    await navigator.getBattery().then((res) => {
+      level = `${Math.round(res.level * 100)}%`;
+      status = res.charging ? 'Charging' : 'Not charging';
+    });
+  } else {
+    level = 'N/A';
+    status = 'N/A';
+  }
+  const data = [
+    {
+      key: 'batteryLevel',
+      title: 'Battery level',
+      value: level,
+    },
+    {
+      key: 'batteryStatus',
+      title: 'Battery status',
+      value: status,
+    },
+  ];
+  return data;
+};
+
+const getWebGL = () => {
+  const gl = document.createElement('canvas').getContext('webgl');
+  const ext = gl.getExtension('WEBGL_debug_renderer_info');
+  const data = [
+    {
+      key: 'webGLVendor',
+      title: 'WebGL vendor',
+      value: gl.getParameter(ext.UNMASKED_VENDOR_WEBGL),
+    },
+    {
+      key: 'webglRenderer',
+      title: 'WebGL renderer',
+      value: gl.getParameter(ext.UNMASKED_RENDERER_WEBGL),
+    },
+  ];
+  return data;
+};
+
+export { getHash, getHardware, getWebGL, getBattery };