me/vytal-redux
1
0
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Added utils folder and screen.js

Browse source
This commit is contained in:
z0ccc 2021-09-27 12:10:31 -04:00
parent 6f3cac4848
commit fcafd1f736
9 changed files with 160 additions and 178 deletions
Show stats Download patch file Download diff file Expand all files Collapse all files

1
frontend/package.json
View file

@ -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",

20
frontend/src/components/Github.js
View file

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

2
frontend/src/components/ScanBlocks.js
View file

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

2
frontend/src/components/ScreenBlock.js
View file

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

156
frontend/src/components/main.js
View file

@ -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') {

5
frontend/src/images/github.svg
View file

@ -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>
Side by side

Before

Width:  |  Height:  |  Size: 1.4 KiB

9
frontend/src/styles/App.css
View file

@ -29,8 +29,7 @@
z-index: -1;
}
.github {
width: 36px;
.gitHubButton {
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 {

131
frontend/src/utils/screen.js Normal file
View file

@ -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;

12
frontend/yarn.lock
View file

@ -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"