Added utils folder and screen.js

frontend/package.json

@@ -15,6 +15,7 @@
     "html-react-parser": "^1.2.8",
     "react": "^17.0.2",
     "react-dom": "^17.0.2",
+    "react-github-btn": "^1.2.1",
     "react-modal": "^3.14.3",
     "react-scripts": "4.0.3",
     "react-webworker": "^2.1.0",

frontend/src/components/Github.js

@@ -1,15 +1,15 @@
-import { ReactComponent as GithubImg } from '../images/github.svg';
+import GitHubButton from 'react-github-btn';
 
 const Github = () => (
-  <a
+  <div className="gitHubButton">
-    href="https://github.com/z0ccc/Vytal"
+    <GitHubButton
-    className="github"
+      href="https://github.com/z0ccc/Vytal"
-    target="_blank"
+      data-color-scheme="no-preference: light; light: light; dark: light;"
-    rel="noreferrer"
+      aria-label="Star z0ccc/Vytal on GitHub"
-    alt="Link to Github page"
+    >
-  >
+      Star
-    <GithubImg />
+    </GitHubButton>
-  </a>
+  </div>
 );
 
 export default Github;

frontend/src/components/ScanBlocks.js

@@ -15,10 +15,10 @@ import FiltersBlock from './FiltersBlock';
 const ScanBlocks = () => (
   <>
     <div className="centerBlockInner">
-      <IntlBlock />
       <FingerprintBlock />
       <NavigatorBlock />
       <UserAgentBlock />
+      <IntlBlock />
     </div>
     <div className="centerBlockInner">
       <LocationBlock />

frontend/src/components/ScreenBlock.js

@@ -1,6 +1,6 @@
 import ScanBlock from './ScanBlock';
 import Table from './Table';
-import { getScreen } from './main';
+import getScreen from '../utils/screen';
 
 const ScreenBlock = () => (
   <ScanBlock>

frontend/src/components/main.js

@@ -6,8 +6,6 @@ export {
   getNavigator,
   checkNavigatorProperties,
   checkWebWorker,
-  getScreen,
-  checkScreenProperties,
   detectTor,
   getIntl,
 };
@@ -142,93 +140,6 @@ const getAppVersion = () => ({
   ],
 });
 
-const getProductSub = () => ({
-  key: 'productSub',
-  value: navigator.productSub,
-  issues: [
-    checkNavigatorProperties('productSub'),
-    checkNavigatorValue('productSub'),
-    checkNavigatorPrototype('productSub'),
-  ],
-});
-
-const getWidth = () => ({
-  key: 'width',
-  value: window.screen.width,
-  issues: [
-    checkScreenProperties('width'),
-    checkScreenValue('width'),
-    checkScreenPrototype('width'),
-    checkWidth(),
-  ],
-});
-
-const getOuterWidth = () => ({
-  key: 'outerWidth',
-  value: window.outerWidth,
-  // issues: checkWindowProperties('outerWidth'),
-  issues: [],
-});
-
-const getAvailWidth = () => ({
-  key: 'availWidth',
-  value: window.screen.availWidth,
-  issues: [
-    checkScreenProperties('availWidth'),
-    checkScreenValue('availWidth'),
-    checkScreenPrototype('availWidth'),
-    checkWidth(),
-  ],
-});
-
-const getHeight = () => ({
-  key: 'height',
-  value: window.screen.height,
-  issues: [
-    checkScreenProperties('height'),
-    checkScreenValue('height'),
-    checkScreenPrototype('height'),
-  ],
-});
-
-const getOuterHeight = () => ({
-  key: 'outerHeight',
-  value: window.outerHeight,
-  // issues: checkWindowProperties('outerHeight'),
-  issues: [],
-});
-
-const getAvailHeight = () => ({
-  key: 'availHeight',
-  value: window.screen.availHeight,
-  issues: [
-    checkScreenProperties('availHeight'),
-    checkScreenValue('availHeight'),
-    checkScreenPrototype('availHeight'),
-    checkHeight(),
-  ],
-});
-
-const getPixelDepth = () => ({
-  key: 'pixelDepth',
-  value: window.screen.pixelDepth,
-  issues: [
-    checkScreenProperties('pixelDepth'),
-    checkScreenValue('pixelDepth'),
-    checkScreenPrototype('pixelDepth'),
-  ],
-});
-
-const getColorDepth = () => ({
-  key: 'colorDepth',
-  value: window.screen.colorDepth,
-  issues: [
-    checkScreenProperties('colorDepth'),
-    checkScreenValue('colorDepth'),
-    checkScreenPrototype('colorDepth'),
-  ],
-});
-
 const getNavigator = () => [
   getDeviceMemory(),
   getHardwareConcurrency(),
@@ -243,18 +154,6 @@ const getNavigator = () => [
   getPlugins(),
   getVendor(),
   getAppVersion(),
-  getProductSub(),
-];
-
-const getScreen = () => [
-  getWidth(),
-  getAvailWidth(),
-  getOuterWidth(),
-  getHeight(),
-  getAvailHeight(),
-  getOuterHeight(),
-  getPixelDepth(),
-  getColorDepth(),
 ];
 
 // const getDateNow = () => ({
@@ -276,18 +175,6 @@ const getTimezone = () => ({
   issues: [],
 });
 
-// const getHourCycle = () => ({
-//   key: 'hourCycle',
-//   value: Intl.DateTimeFormat().resolvedOptions().hourCycle,
-//   issues: [],
-// });
-
-// const getCalendar = () => ({
-//   key: 'calendar',
-//   value: Intl.DateTimeFormat().resolvedOptions().calendar,
-//   issues: [],
-// });
-
 const getIntl = () => [getLocale(), getTimezone()];
 
 const detectTor = () => {
@@ -305,7 +192,6 @@ const detectTor = () => {
 
 // const getTimezoneOffset = () => ({
 //   key: 'timezoneOffset',
-//   title: 'Timezone offset',
 //   value: new Date().getTimezoneOffset(),
 //   issues: [],
 // });
@@ -374,48 +260,6 @@ const checkNavigatorPrototype = (key) => {
   return null;
 };
 
-const checkScreenProperties = (key) => {
-  if (Object.getOwnPropertyDescriptor(window.screen, key) !== undefined) {
-    return 'Failed undefined properties';
-  }
-  return null;
-};
-
-const checkScreenValue = (key) => {
-  if (
-    Object.getOwnPropertyDescriptor(Screen.prototype, key).value !== undefined
-  ) {
-    return 'Failed descriptor.value undefined';
-  }
-  return null;
-};
-
-const checkScreenPrototype = (key) => {
-  try {
-    // eslint-disable-next-line no-unused-vars
-    const check = Screen.prototype[key];
-    return 'Failed Navigator.prototype';
-  } catch (err) {
-    // eslint-disable-next-line no-unused-vars
-    const check = '';
-  }
-  return null;
-};
-
-const checkWidth = () => {
-  if (window.screen.availWidth > window.screen.width) {
-    return 'Avail width is wider then width';
-  }
-  return null;
-};
-
-const checkHeight = () => {
-  if (window.screen.availHeight > window.screen.height) {
-    return 'Avail height is wider then height';
-  }
-  return null;
-};
-
 const checkWebWorker = (key, setWorkerData) => {
   let w;
   if (typeof w === 'undefined') {

frontend/src/images/github.svg

@@ -1,5 +0,0 @@
-<svg xmlns="http://www.w3.org/2000/svg" viewBox="0 0 496 512">
-  <g fill="#fff">
-    <path d="M165.9 397.4c0 2-2.3 3.6-5.2 3.6-3.3.3-5.6-1.3-5.6-3.6 0-2 2.3-3.6 5.2-3.6 3-.3 5.6 1.3 5.6 3.6zm-31.1-4.5c-.7 2 1.3 4.3 4.3 4.9 2.6 1 5.6 0 6.2-2s-1.3-4.3-4.3-5.2c-2.6-.7-5.5.3-6.2 2.3zm44.2-1.7c-2.9.7-4.9 2.6-4.6 4.9.3 2 2.9 3.3 5.9 2.6 2.9-.7 4.9-2.6 4.6-4.6-.3-1.9-3-3.2-5.9-2.9zM244.8 8C106.1 8 0 113.3 0 252c0 110.9 69.8 205.8 169.5 239.2 12.8 2.3 17.3-5.6 17.3-12.1 0-6.2-.3-40.4-.3-61.4 0 0-70 15-84.7-29.8 0 0-11.4-29.1-27.8-36.6 0 0-22.9-15.7 1.6-15.4 0 0 24.9 2 38.6 25.8 21.9 38.6 58.6 27.5 72.9 20.9 2.3-16 8.8-27.1 16-33.7-55.9-6.2-112.3-14.3-112.3-110.5 0-27.5 7.6-41.3 23.6-58.9-2.6-6.5-11.1-33.3 2.6-67.9 20.9-6.5 69 27 69 27 20-5.6 41.5-8.5 62.8-8.5s42.8 2.9 62.8 8.5c0 0 48.1-33.6 69-27 13.7 34.7 5.2 61.4 2.6 67.9 16 17.7 25.8 31.5 25.8 58.9 0 96.5-58.9 104.2-114.8 110.5 9.2 7.9 17 22.9 17 46.4 0 33.7-.3 75.4-.3 83.6 0 6.5 4.6 14.4 17.3 12.1C428.2 457.8 496 362.9 496 252 496 113.3 383.5 8 244.8 8zM97.2 352.9c-1.3 1-1 3.3.7 5.2 1.6 1.6 3.9 2.3 5.2 1 1.3-1 1-3.3-.7-5.2-1.6-1.6-3.9-2.3-5.2-1zm-10.8-8.1c-.7 1.3.3 2.9 2.3 3.9 1.6 1 3.6.7 4.3-.7.7-1.3-.3-2.9-2.3-3.9-2-.6-3.6-.3-4.3.7zm32.4 35.6c-1.6 1.3-1 4.3 1.3 6.2 2.3 2.3 5.2 2.6 6.5 1 1.3-1.3.7-4.3-1.3-6.2-2.2-2.3-5.2-2.6-6.5-1zm-11.4-14.7c-1.6 1-1.6 3.6 0 5.9 1.6 2.3 4.3 3.3 5.6 2.3 1.6-1.3 1.6-3.9 0-6.2-1.4-2.3-4-3.3-5.6-2z"/>
-  </g>
-</svg>

frontend/src/styles/App.css

@@ -29,8 +29,7 @@
   z-index: -1;
 }
 
-.github {
+.gitHubButton {
-  width: 36px;
   position: fixed;
   top: 12px;
   right: 12px;
@@ -40,11 +39,11 @@
   display: flex;
   align-items: center;
   justify-content: center;
-  margin: 13px 0;
+  margin: 20px 0;
 }
 
 .logo {
-  width: 270px;
+  width: 250px;
 }
 
 .centerBlockOuter {
@@ -54,7 +53,7 @@
 }
 
 .centerBlockInner {
-  width: 450px;
+  width: 500px;
 }
 
 .contentBlock {

frontend/src/utils/screen.js

@@ -0,0 +1,131 @@
+const getWidth = () => ({
+  key: 'width',
+  value: window.screen.width,
+  issues: [
+    checkScreenProperties('width'),
+    checkScreenValue('width'),
+    checkScreenPrototype('width'),
+    checkWidth(),
+  ],
+});
+
+const getOuterWidth = () => ({
+  key: 'outerWidth',
+  value: window.outerWidth,
+  // issues: checkWindowProperties('outerWidth'),
+  issues: [],
+});
+
+const getAvailWidth = () => ({
+  key: 'availWidth',
+  value: window.screen.availWidth,
+  issues: [
+    checkScreenProperties('availWidth'),
+    checkScreenValue('availWidth'),
+    checkScreenPrototype('availWidth'),
+    checkWidth(),
+  ],
+});
+
+const getHeight = () => ({
+  key: 'height',
+  value: window.screen.height,
+  issues: [
+    checkScreenProperties('height'),
+    checkScreenValue('height'),
+    checkScreenPrototype('height'),
+  ],
+});
+
+const getOuterHeight = () => ({
+  key: 'outerHeight',
+  value: window.outerHeight,
+  // issues: checkWindowProperties('outerHeight'),
+  issues: [],
+});
+
+const getAvailHeight = () => ({
+  key: 'availHeight',
+  value: window.screen.availHeight,
+  issues: [
+    checkScreenProperties('availHeight'),
+    checkScreenValue('availHeight'),
+    checkScreenPrototype('availHeight'),
+    checkHeight(),
+  ],
+});
+
+const getPixelDepth = () => ({
+  key: 'pixelDepth',
+  value: window.screen.pixelDepth,
+  issues: [
+    checkScreenProperties('pixelDepth'),
+    checkScreenValue('pixelDepth'),
+    checkScreenPrototype('pixelDepth'),
+  ],
+});
+
+const getColorDepth = () => ({
+  key: 'colorDepth',
+  value: window.screen.colorDepth,
+  issues: [
+    checkScreenProperties('colorDepth'),
+    checkScreenValue('colorDepth'),
+    checkScreenPrototype('colorDepth'),
+  ],
+});
+
+const checkScreenValue = (key) => {
+  if (
+    Object.getOwnPropertyDescriptor(Screen.prototype, key).value !== undefined
+  ) {
+    return 'Failed descriptor.value undefined';
+  }
+  return null;
+};
+
+const checkScreenPrototype = (key) => {
+  try {
+    // eslint-disable-next-line no-unused-vars
+    const check = Screen.prototype[key];
+    return 'Failed Navigator.prototype';
+  } catch (err) {
+    // eslint-disable-next-line no-unused-vars
+    const check = '';
+  }
+  return null;
+};
+
+const checkWidth = () => {
+  if (window.screen.availWidth > window.screen.width) {
+    return 'Avail width is wider then width';
+  }
+  return null;
+};
+
+const checkHeight = () => {
+  if (window.screen.availHeight > window.screen.height) {
+    return 'Avail height is wider then height';
+  }
+  return null;
+};
+
+const checkScreenProperties = (key) => {
+  if (Object.getOwnPropertyDescriptor(window.screen, key) !== undefined) {
+    return 'Failed undefined properties';
+  }
+  return null;
+};
+
+const getScreen = () => [
+  getWidth(),
+  getAvailWidth(),
+  getOuterWidth(),
+  getHeight(),
+  getAvailHeight(),
+  getOuterHeight(),
+  getPixelDepth(),
+  getColorDepth(),
+];
+
+export default getScreen;

frontend/yarn.lock

@@ -5205,6 +5205,11 @@ getpass@^0.1.1:
   dependencies:
     assert-plus "^1.0.0"
 
+github-buttons@^2.8.0:
+  version "2.19.1"
+  resolved "https://registry.yarnpkg.com/github-buttons/-/github-buttons-2.19.1.tgz#9703755a4da1c5b229d3f1d875c2f787efa59bd5"
+  integrity sha512-us6ZC0bFYLfBq2CkZJJRpdPP5JlB6+kWFTdw8iK3E7yoMKdoLhDkqQHelJ+39UVR2zQbfXN5gNt3cVYp4fAuXA==
+
 glob-parent@^3.1.0:
   version "3.1.0"
   resolved "https://registry.npmjs.org/glob-parent/-/glob-parent-3.1.0.tgz"
@@ -9039,6 +9044,13 @@ react-error-overlay@^6.0.9:
   resolved "https://registry.npmjs.org/react-error-overlay/-/react-error-overlay-6.0.9.tgz"
   integrity sha512-nQTTcUu+ATDbrSD1BZHr5kgSD4oF8OFjxun8uAaL8RwPBacGBNPf/yAuVVdx17N8XNzRDMrZ9XcKZHCjPW+9ew==
 
+react-github-btn@^1.2.1:
+  version "1.2.1"
+  resolved "https://registry.yarnpkg.com/react-github-btn/-/react-github-btn-1.2.1.tgz#ece93f609a4bad5e7eb9f47ae49bfaba69466dce"
+  integrity sha512-/gXD01mHAOhW0xYuNJFDn08OGjaMXOjcg6GCKVPdHvQcWzswH4aT85DLDAAJ6Zhw/71veSIH4Kx1BTBfy69SsA==
+  dependencies:
+    github-buttons "^2.8.0"
+
 react-is@^16.8.1:
   version "16.13.1"
   resolved "https://registry.npmjs.org/react-is/-/react-is-16.13.1.tgz"