rentgen/components/sidebar/sidebar.tsx

238 lines
11 KiB
TypeScript
Raw Normal View History

import React from 'react';
import ReactDOM from 'react-dom';
2022-07-09 15:51:34 +02:00
import { getMemory } from '../../memory';
2022-07-09 15:28:37 +02:00
import Options from '../../options';
import { useEmitter } from '../../util';
import './../../styles/global.scss';
import './sidebar.scss';
2022-07-09 15:28:37 +02:00
import { StolenData } from './stolen-data';
2021-10-03 09:03:56 +02:00
const Sidebar = () => {
2022-04-15 10:34:29 +02:00
const url = new URL(document.location.toString());
const origin = url.searchParams.get('origin');
const [minValueLength, setMinValueLength] = React.useState<number | null>(
localStorage.getItem('minValueLength') === null
? 7
: (localStorage.getItem('minValueLength') as unknown as number)
);
const [cookiesOnly, setCookiesOnly] = React.useState<boolean>(false);
const [stolenDataView, setStolenDataView] = React.useState<boolean>(true);
2022-02-02 10:33:09 +01:00
const [cookiesOrOriginOnly, setCookiesOrOriginOnly] = React.useState<boolean>(false);
2022-07-09 15:28:37 +02:00
const [eventCounts] = useEmitter(getMemory());
const [_, setMarksOccurrence] = React.useState<boolean>(false);
2022-05-02 13:46:53 +02:00
const [infoDataDialogAck, setInfoDataDialogAck] = React.useState<boolean>(
localStorage.getItem('infoDataDialogAck') === null
? true
: localStorage.getItem('infoDataDialogAck') == 'true'
? true
: false
);
2022-02-02 10:33:09 +01:00
const [warningDataDialogAck, setWarningDataDialogAck] = React.useState<boolean>(
localStorage.getItem('warningDataDialogAck') === null
? true
: localStorage.getItem('warningDataDialogAck') == 'true'
? true
: false
);
2022-04-15 13:58:29 +02:00
const [detailsVisibility, setDetailsVisibility] = React.useState<boolean>(
localStorage.getItem('detailsVisibility') === null
? false
2022-04-15 13:58:29 +02:00
: localStorage.getItem('detailsVisibility') == 'true'
? true
: false
);
2021-11-06 21:48:25 +01:00
React.useEffect(() => {
2022-07-09 15:28:37 +02:00
if (!origin) return;
2022-02-02 10:33:09 +01:00
for (const cluster of Object.values(getMemory().getClustersForOrigin(origin))) {
if (cluster.hasMarks()) {
return setMarksOccurrence(true);
2022-01-19 14:12:52 +01:00
}
}
2022-04-11 13:52:45 +02:00
return setMarksOccurrence(false);
2022-04-15 10:34:29 +02:00
}, [eventCounts['*']]);
2022-01-19 14:12:52 +01:00
2022-07-09 15:28:37 +02:00
if (!origin) return <div>Błąd: Brak parametru "origin"</div>;
return (
<div className="sidebar">
2022-04-15 13:58:29 +02:00
<header className="header">
<img src="../../assets/icon-addon.svg" height={32}></img>
<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-04-24 22:11:33 +02:00
<button
className="button button--report"
onClick={() => {
window.open(
`/components/report-window/report-window.html?origin=${origin}`,
2022-05-22 17:29:10 +02:00
'new_tab'
2022-04-24 22:11:33 +02:00
);
}}
>
Generuj raport
</button>
</header>
2022-01-29 21:16:53 +01:00
{stolenDataView ? (
<nav>
<button
onClick={() => {
window.open(
`/components/report-window/report-window.html?origin=${origin}`,
'new_tab'
);
}}
>
<img src="/assets/icons/report.svg" width="20" height="20" />
<span>Generuj raport</span>
</button>
<button
onClick={() => {
2022-04-15 13:58:29 +02:00
setDetailsVisibility(!detailsVisibility);
}}
>
2022-04-15 13:58:29 +02:00
<img
src={
detailsVisibility
? '/assets/icons/file_minus.svg'
: '/assets/icons/file_find.svg'
}
width="20"
height="20"
2022-04-15 13:58:29 +02:00
/>
2022-02-02 10:33:09 +01:00
2022-04-15 13:58:29 +02:00
<span>
{detailsVisibility ? 'Ukryj szczegóły' : 'Wyświetlaj szczegóły'}
</span>
</button>
<button onClick={() => setStolenDataView(!stolenDataView)}>
<img src="/assets/icons/settings.svg" width="20" height="20" />
<span>Ustawienia</span>
</button>
2022-04-24 22:11:33 +02:00
{localStorage.getItem('blottingBrowser') ===
'nikttakniesplamitwojejprzeglądarkijakspidersweb' ? (
<button
onClick={() => {
if (
window.confirm(
'Czy chcesz wczytać wszystkie domeny w celu „splamienia” twojej przeglądarki? Uwaga przeglądarka może zablokować otwieranie nowych kart. (Ten krok jest opcjonalny)'
2022-04-15 13:58:29 +02:00
)
2022-04-24 22:11:33 +02:00
) {
let deep_copy = JSON.parse(
JSON.stringify(
Object.values(
getMemory().getClustersForOrigin(origin)
).map((domain) => domain.id)
)
2022-04-15 13:58:29 +02:00
);
2022-04-24 22:11:33 +02:00
for (const domain of deep_copy) {
window.open(`https://${domain}`);
}
2022-04-15 13:58:29 +02:00
}
2022-04-24 22:11:33 +02:00
}}
>
<img src="/assets/icons/bulb.svg" width="20" height="20" />
<span>Odwiedź wszystkie domeny</span>
</button>
) : null}
</nav>
) : null}
<section>
{stolenDataView ? (
<>
2022-05-02 13:46:53 +02:00
{infoDataDialogAck ? (
<section className="dialog-container dialog-container--info">
<span>
2022-07-06 18:50:35 +02:00
<strong>
Rentgen automatycznie zaznacza wybrane domeny na podstawie
zebranych danych.
</strong>{' '}
Możesz teraz przejść do generowania raportu lub dokonać korekty.
2022-05-02 13:46:53 +02:00
</span>
<button
onClick={() => {
setInfoDataDialogAck(false);
localStorage.setItem(
'infoDataDialogAck',
false as unknown as string
);
}}
>
<img src="/assets/icons/close_big.svg" width="16" height="16" />
</button>
</section>
) : null}
{warningDataDialogAck ? (
2022-05-02 13:46:53 +02:00
<section className="dialog-container dialog-container--warning">
<span>
2022-07-06 18:50:35 +02:00
<strong>Uwaga!</strong> Niekoniecznie każda przesłana poniżej
2022-05-02 13:46:53 +02:00
informacja jest daną osobową. Niektóre z podanych domen mogą
należeć do właściciela strony i nie reprezentować podmiotów
2022-02-02 10:33:09 +01:00
trzecich.
</span>
<button
onClick={() => {
setWarningDataDialogAck(false);
localStorage.setItem(
'warningDataDialogAck',
false as unknown as string
);
}}
>
2022-02-02 10:33:09 +01:00
<img src="/assets/icons/close_big.svg" width="16" height="16" />
</button>
</section>
) : null}
<StolenData
origin={origin}
eventCounts={eventCounts}
2022-07-09 15:28:37 +02:00
minValueLength={minValueLength === null ? 7 : minValueLength}
2022-01-23 21:42:49 +01:00
cookiesOnly={cookiesOnly}
cookiesOrOriginOnly={cookiesOrOriginOnly}
2022-04-15 13:58:29 +02:00
detailsVisibility={detailsVisibility}
2022-01-23 21:42:49 +01:00
/>
</>
) : (
<Options
2022-07-09 15:28:37 +02:00
minValueLength={minValueLength === null ? 7 : minValueLength}
setMinValueLength={setMinValueLength}
cookiesOnly={cookiesOnly}
setCookiesOnly={setCookiesOnly}
cookiesOrOriginOnly={cookiesOrOriginOnly}
setCookiesOrOriginOnly={setCookiesOrOriginOnly}
warningDataDialogAck={warningDataDialogAck}
setWarningDataDialogAck={setWarningDataDialogAck}
2022-04-15 13:58:29 +02:00
detailsVisibility={detailsVisibility}
setDetailsVisibility={setDetailsVisibility}
2022-04-24 22:11:33 +02:00
setStolenDataView={setStolenDataView}
removeCookies={() => {
getMemory().removeCookiesFor(origin);
getMemory().emit('change', origin);
setMarksOccurrence(false);
}}
removeRequests={() => {
getMemory().removeRequestsFor(origin);
getMemory().emit('change', origin);
setMarksOccurrence(false);
}}
/>
)}
</section>
</div>
);
2021-10-03 09:03:56 +02:00
};
ReactDOM.render(<Sidebar />, document.getElementById('app'));