rentgen/components/toolbar/toolbar.tsx

243 lines
9.8 KiB
TypeScript
Raw Normal View History

2022-04-15 13:58:29 +02:00
import React, { Fragment } from 'react';
import ReactDOM from 'react-dom';
import { useEmitter } from '../../util';
import { getMemory } from '../../memory';
2021-10-03 09:03:56 +02:00
async function getCurrentTab() {
const [tab] = await browser.tabs.query({
active: true,
windowId: browser.windows.WINDOW_ID_CURRENT,
});
return tab;
2021-10-03 09:03:56 +02:00
}
import './../../styles/global.scss';
import './toolbar.scss';
const Toolbar = () => {
const [origin, setOrigin] = React.useState<string | null>(null);
const [stolenDataView, setStolenDataView] = React.useState<boolean>(true);
const [eventCounts, setEventCounts] = useEmitter(getMemory());
2022-04-15 10:34:29 +02:00
const [cookieDomainCopy, setCookieDomainCopy] = React.useState<string | null>(null);
2022-04-24 22:11:33 +02:00
const [marksOccurrence, setMarksOccurrence] = React.useState<boolean>(false);
2022-04-15 10:34:29 +02:00
const [exposedOriginDomainCopy, setExposedOriginDomainCopy] = React.useState<string | null>(
null
);
2021-11-06 21:48:25 +01:00
React.useEffect(() => {
const listener = async () => {
const tab = await getCurrentTab();
2022-04-22 13:00:02 +02:00
if (tab !== undefined) {
const url = new URL(tab.url);
if (url.origin.startsWith('moz-extension')) {
return;
}
setOrigin(url.origin);
} else {
console.warn('Out of the tab scope');
}
};
browser.tabs.onUpdated.addListener(listener);
listener();
return () => {
browser.tabs.onUpdated.removeListener(listener);
};
});
2021-11-06 21:48:25 +01:00
React.useEffect(() => {
2022-04-15 10:34:29 +02:00
const exposedOriginDomains = Object.values(getMemory().getClustersForOrigin(origin))
.filter((cluster) => cluster.exposesOrigin())
.map((cluster) => cluster.id);
setExposedOriginDomainCopy('');
2022-04-15 13:58:29 +02:00
const first_sentence = `Strona ${origin} wysłała informacje o części Twojej historii przeglądania do `;
2022-04-15 10:34:29 +02:00
switch (exposedOriginDomains.length) {
case 0:
return null;
case 1:
return setExposedOriginDomainCopy(first_sentence + `${exposedOriginDomains[0]}.`);
case 2:
return setExposedOriginDomainCopy(
first_sentence + `${exposedOriginDomains[0]} oraz ${exposedOriginDomains[1]}.`
);
case 3:
return setExposedOriginDomainCopy(
first_sentence +
`${exposedOriginDomains[0]}, ${exposedOriginDomains[1]} oraz ${exposedOriginDomains[2]}.`
);
default:
return setExposedOriginDomainCopy(
first_sentence +
`${exposedOriginDomains[0]}, ${exposedOriginDomains[1]} (i ${
exposedOriginDomains.length - 2 < 2
? 2
: exposedOriginDomains.length - 2
} innych).`
);
}
2022-04-15 10:34:29 +02:00
}, [eventCounts['*'], origin]);
2022-04-11 13:52:45 +02:00
2022-04-15 10:34:29 +02:00
React.useEffect(() => {
const cookieDomains = Object.values(getMemory().getClustersForOrigin(origin))
.filter((cluster) => cluster.hasCookies())
.map((cluster) => cluster.id);
2022-04-15 13:58:29 +02:00
setCookieDomainCopy('');
const first_sentence = `Strona ${origin} dokonała zapisu i odczytu plików Cookie dla domen `;
2022-04-15 10:34:29 +02:00
switch (cookieDomains.length) {
case 0:
return null;
case 1:
return setCookieDomainCopy(first_sentence + `${cookieDomains[0]}.`);
case 2:
return setCookieDomainCopy(
first_sentence + `${cookieDomains[0]} oraz ${cookieDomains[1]}.`
);
case 3:
return setCookieDomainCopy(
first_sentence +
`${cookieDomains[0]}, ${cookieDomains[1]} oraz ${cookieDomains[2]}.`
);
default:
return setCookieDomainCopy(
first_sentence +
2022-04-15 13:58:29 +02:00
`${cookieDomains[0]}, ${cookieDomains[1]} (i ${
2022-04-15 10:34:29 +02:00
cookieDomains.length - 2 < 2 ? 2 : cookieDomains.length - 2
} innych).`
);
}
}, [eventCounts['*'], origin]);
2022-01-19 14:12:52 +01:00
2022-04-24 22:11:33 +02:00
React.useEffect(() => {
for (const cluster of Object.values(getMemory().getClustersForOrigin(origin))) {
if (cluster.hasMarks()) {
return setMarksOccurrence(true);
}
}
return setMarksOccurrence(false);
}, [eventCounts['*']]);
function autoMark() {
for (const cluster of Object.values(getMemory().getClustersForOrigin(origin))) {
cluster.autoMark();
}
return setMarksOccurrence(true);
}
return (
<div className="toolbar">
2022-04-13 13:57:31 +02:00
<header className="header">
<img src="../../assets/icon-addon.svg" height={32}></img>
2022-04-15 10:34:29 +02:00
<div className="webpage-metadata">
{origin ? (
<>
<span>Analiza strony</span>
2022-02-02 10:33:09 +01:00
<span className="webpage-metadata--hyperlink">{origin}</span>
</>
2022-01-29 21:16:53 +01:00
) : (
<span>Przejdź do wybranej strony internetowej</span>
2022-01-29 21:16:53 +01:00
)}
</div>
{stolenDataView ? (
<a href="https://internet-czas-dzialac.pl">
2022-02-02 10:33:09 +01:00
<img src="/assets/icons/info_circle_outline.svg" width="20" height="20" />
</a>
) : (
<button onClick={() => setStolenDataView(true)}>
2022-02-02 10:33:09 +01:00
<img src="/assets/icons/short_left.svg" width="20" height="20" />
</button>
)}
</header>
2022-01-29 21:16:53 +01:00
2022-04-13 13:57:31 +02:00
<section className="summary">
2022-04-15 10:34:29 +02:00
<div className="counters-wrapper">
2022-04-13 13:57:31 +02:00
<div className="counters">
2022-04-15 10:34:29 +02:00
<div className="counter counter--browser-history">
2022-04-22 13:09:53 +02:00
<img src="/assets/icons/warning.svg#color" width="24" height="24" />
2022-04-15 10:34:29 +02:00
<span data-event={`${eventCounts['*']}`}>
{
Object.values(getMemory().getClustersForOrigin(origin)).filter(
(cluster) => cluster.exposesOrigin()
).length
}
</span>
</div>
<div className="counter counter--cookies">
2022-04-22 13:09:53 +02:00
<img src="/assets/icons/cookie.svg#color" width="24" height="24" />
2022-04-15 10:34:29 +02:00
<span data-event={`${eventCounts['*']}`}>
{
Object.values(getMemory().getClustersForOrigin(origin)).filter(
(cluster) => cluster.hasCookies()
).length
}
</span>
</div>
</div>
<div className="big-counter" data-event={`${eventCounts['*']}`}>
{Object.values(getMemory().getClustersForOrigin(origin)).length}
2022-04-13 13:57:31 +02:00
</div>
</div>
2022-04-15 10:34:29 +02:00
<span className="notice">Liczba wykrytych domen podmiotów trzecich</span>
2022-04-13 13:57:31 +02:00
</section>
2022-02-02 10:33:09 +01:00
2022-04-13 13:57:31 +02:00
<section className="details">
2022-04-15 13:58:29 +02:00
<p
data-event={`${eventCounts['*']}`}
title={Object.values(getMemory().getClustersForOrigin(origin))
.filter((cluster) => cluster.exposesOrigin())
.map((domain) => domain.id)
.join(', ')}
>
{exposedOriginDomainCopy}
</p>
<p
data-event={`${eventCounts['*']}`}
title={Object.values(getMemory().getClustersForOrigin(origin))
.filter((cluster) => cluster.hasCookies())
.map((domain) => domain.id)
.join(', ')}
>
{cookieDomainCopy}
</p>
2022-04-13 13:57:31 +02:00
</section>
2022-04-15 10:34:29 +02:00
{exposedOriginDomainCopy !== null || cookieDomainCopy !== null ? (
<Fragment>
<section className="about">
<p>
2022-04-15 13:58:29 +02:00
Takie przetwarzanie danych może być niezgodne z prawem. Kliknij
w przycisk Generuj raport, aby pomóc ustalić, czy ta strona nie
narusza RODO.
2022-04-15 10:34:29 +02:00
</p>
</section>
<section className="actions">
2022-04-15 13:58:29 +02:00
<button
className="button button--report"
onClick={() => {
const params = [
'height=' + screen.height,
'width=' + screen.width,
'fullscreen=yes',
].join(',');
2022-04-24 22:11:33 +02:00
autoMark();
2022-04-15 13:58:29 +02:00
window.open(
2022-05-02 13:46:53 +02:00
`/components/sidebar/sidebar.html?origin=${origin}`,
2022-04-15 13:58:29 +02:00
'new_window',
params
);
}}
>
Generuj raport
</button>
2022-04-15 10:34:29 +02:00
</section>
</Fragment>
) : null}
</div>
);
2021-10-03 09:03:56 +02:00
};
ReactDOM.render(<Toolbar />, document.getElementById('toolbar'));