Added DateBlock

frontend/src/components/DateBlock.js

@@ -0,0 +1,16 @@
+import ScanBlock from './ScanBlock';
+import Table from './Table';
+import { getDate } from './main';
+
+const DateBlock = () => (
+  <ScanBlock>
+    <h1>Date</h1>
+    <Table type="navigator" data={getDate()} />
+    <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 DateBlock;

frontend/src/components/ScanBlocks.js

@@ -1,5 +1,6 @@
 /* eslint-disable no-unused-vars */
 import UserAgentBlock from './UserAgentBlock';
+import DateBlock from './DateBlock';
 import OtherBlock from './OtherBlock';
 import NavigatorBlock from './NavigatorBlock';
 import ScreenBlock from './ScreenBlock';
@@ -13,12 +14,14 @@ import FiltersBlock from './FiltersBlock';
 
 const ScanBlocks = () => (
   <>
-    <OtherBlock />
-    <UserAgentBlock />
-    <ScreenBlock />
-    <NavigatorBlock />
+    <DateBlock />
+    <FingerprintBlock />
     <LocationBlock />
     <ConnectionBlock />
+    <NavigatorBlock />
+    <UserAgentBlock />
+    <ScreenBlock />
+    <OtherBlock />
     {/* <FingerprintBlock />
     <LocationBlock />
     <ConnectionBlock />

frontend/src/components/UserAgentBlock.js

@@ -7,8 +7,8 @@ import {
   checkNavigatorProperties,
   checkWebWorker,
   checkScreenProperties,
-  getUserAgentData,
 } from './main';
+import { ReactComponent as CheckCircle } from '../images/checkCircle.svg';
 
 const UserAgentBlock = () => {
   const [firstRender, setfirstRender] = useState(true);
@@ -37,12 +37,18 @@ const UserAgentBlock = () => {
               <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>
@@ -51,12 +57,18 @@ const UserAgentBlock = () => {
                 <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>
@@ -65,12 +77,18 @@ const UserAgentBlock = () => {
                 <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>

frontend/src/components/main.js

@@ -9,6 +9,7 @@ export {
   getScreen,
   checkScreenProperties,
   detectTor,
+  getDate,
 };
 
 const getDeviceMemory = () => ({
@@ -278,6 +279,36 @@ const getScreen = () => [
   getColorDepth(),
 ];
 
+const getDateNow = () => ({
+  key: 'date',
+  title: 'Date',
+  value: Date.now(),
+  issues: [],
+});
+
+const getCalendar = () => ({
+  key: 'calendar',
+  title: 'Calendar',
+  value: Intl.DateTimeFormat().resolvedOptions().calendar,
+  issues: [],
+});
+
+const getTimezone = () => ({
+  key: 'timezone',
+  title: 'Timezone',
+  value: Intl.DateTimeFormat().resolvedOptions().timeZone,
+  issues: [],
+});
+
+const getTimezoneOffset = () => ({
+  key: 'timezoneOffset',
+  title: 'Timezone offset',
+  value: new Date().getTimezoneOffset(),
+  issues: [],
+});
+
+const getDate = () => [getCalendar(), getTimezone(), getTimezoneOffset()];
+
 const detectTor = () => {
   const date = new Date();
   if (