rentgen/components/toolbar/toolbar.tsx

239 lines
9.5 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
2022-06-29 19:31:20 +02:00
const first_sentence_cookie = 'Strona dokonała zapisu i odczytu plików Cookie dla domen ';
const first_sentence_history =
'Część informacji o Twojej historii przeglądania została wysłana do ';
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('');
switch (exposedOriginDomains.length) {
case 0:
return null;
case 1:
2022-06-29 19:31:20 +02:00
return setExposedOriginDomainCopy(`${exposedOriginDomains[0]}.`);
2022-04-15 10:34:29 +02:00
case 2:
return setExposedOriginDomainCopy(
2022-06-29 19:31:20 +02:00
`${exposedOriginDomains[0]} oraz ${exposedOriginDomains[1]}.`
2022-04-15 10:34:29 +02:00
);
case 3:
return setExposedOriginDomainCopy(
2022-06-29 19:31:20 +02:00
`${exposedOriginDomains[0]}, ${exposedOriginDomains[1]} oraz ${exposedOriginDomains[2]}.`
2022-04-15 10:34:29 +02:00
);
default:
return setExposedOriginDomainCopy(
2022-06-29 19:31:20 +02:00
`${exposedOriginDomains[0]}, ${exposedOriginDomains[1]} (i ${
exposedOriginDomains.length - 2 < 2 ? 2 : exposedOriginDomains.length - 2
} innych).`
2022-04-15 10:34:29 +02:00
);
}
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('');
2022-04-15 10:34:29 +02:00
switch (cookieDomains.length) {
case 0:
return null;
case 1:
2022-06-29 19:31:20 +02:00
return setCookieDomainCopy(`${cookieDomains[0]}.`);
2022-04-15 10:34:29 +02:00
case 2:
2022-06-29 19:31:20 +02:00
return setCookieDomainCopy(`${cookieDomains[0]} oraz ${cookieDomains[1]}.`);
2022-04-15 10:34:29 +02:00
case 3:
return setCookieDomainCopy(
2022-06-29 19:31:20 +02:00
`${cookieDomains[0]}, ${cookieDomains[1]} oraz ${cookieDomains[2]}.`
2022-04-15 10:34:29 +02:00
);
default:
return setCookieDomainCopy(
2022-06-29 19:31:20 +02:00
`${cookieDomains[0]}, ${cookieDomains[1]} (i ${
cookieDomains.length - 2 < 2 ? 2 : cookieDomains.length - 2
} innych).`
2022-04-15 10:34:29 +02:00
);
}
}, [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>
2022-07-06 19:03:15 +02:00
{origin ? (
<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>
2022-07-06 19:03:15 +02:00
) : null}
</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">
<div className="counter counter--cookies">
<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()
2022-04-15 10:34:29 +02:00
).length
}
</span>
</div>
<div className="counter counter--browser-history">
<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()
2022-04-15 10:34:29 +02:00
).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">
{cookieDomainCopy ? (
2022-06-29 19:31:20 +02:00
<p
data-event={`${eventCounts['*']}`}
title={Object.values(getMemory().getClustersForOrigin(origin))
.filter((cluster) => cluster.hasCookies())
2022-06-29 19:31:20 +02:00
.map((domain) => domain.id)
.join(', ')}
>
{first_sentence_cookie}
<strong>{cookieDomainCopy}</strong>
2022-06-29 19:31:20 +02:00
</p>
) : null}
{exposedOriginDomainCopy ? (
2022-06-29 19:31:20 +02:00
<p
data-event={`${eventCounts['*']}`}
title={Object.values(getMemory().getClustersForOrigin(origin))
.filter((cluster) => cluster.exposesOrigin())
2022-06-29 19:31:20 +02:00
.map((domain) => domain.id)
.join(', ')}
>
{first_sentence_history}
<strong>{exposedOriginDomainCopy}</strong>
2022-06-29 19:31:20 +02:00
</p>
) : null}
2022-04-13 13:57:31 +02:00
</section>
2022-06-29 19:31:20 +02:00
{exposedOriginDomainCopy || cookieDomainCopy ? (
2022-04-15 10:34:29 +02:00
<Fragment>
<section className="about">
<p>
2022-07-06 18:50:35 +02:00
Takie przetwarzanie danych może być niezgodne z prawem. Przejdź do
analizy 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={() => {
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-05-22 17:29:10 +02:00
'new_tab'
2022-04-15 13:58:29 +02:00
);
2022-05-22 17:29:10 +02:00
window.close(); // close toolbar popup
2022-04-15 13:58:29 +02:00
}}
>
2022-07-06 18:50:35 +02:00
Przejdź do analizy
2022-04-15 13:58:29 +02:00
</button>
2022-04-15 10:34:29 +02:00
</section>
</Fragment>
2022-06-29 19:31:20 +02:00
) : (
<Fragment>
<section className="about about__no-errors">
<p>Nie znaleziono problemów na tej stronie.</p>
</section>
</Fragment>
)}
</div>
);
2021-10-03 09:03:56 +02:00
};
ReactDOM.render(<Toolbar />, document.getElementById('toolbar'));