rentgen/components/sidebar/sidebar.tsx

238 lines
11 KiB
TypeScript
Raw Permalink Blame History

This file contains invisible Unicode characters

This file contains invisible Unicode characters that are indistinguishable to humans but may be processed differently by a computer. If you think that this is intentional, you can safely ignore this warning. Use the Escape button to reveal them.

import React from 'react';
import ReactDOM from 'react-dom';
import { getMemory } from '../../memory';
import Options from '../../options';
import { useEmitter } from '../../util';
import './../../styles/global.scss';
import './sidebar.scss';
import { StolenData } from './stolen-data';
const Sidebar = () => {
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);
const [cookiesOrOriginOnly, setCookiesOrOriginOnly] = React.useState<boolean>(false);
const [eventCounts] = useEmitter(getMemory());
const [_, setMarksOccurrence] = React.useState<boolean>(false);
const [infoDataDialogAck, setInfoDataDialogAck] = React.useState<boolean>(
localStorage.getItem('infoDataDialogAck') === null
? true
: localStorage.getItem('infoDataDialogAck') == 'true'
? true
: false
);
const [warningDataDialogAck, setWarningDataDialogAck] = React.useState<boolean>(
localStorage.getItem('warningDataDialogAck') === null
? true
: localStorage.getItem('warningDataDialogAck') == 'true'
? true
: false
);
const [detailsVisibility, setDetailsVisibility] = React.useState<boolean>(
localStorage.getItem('detailsVisibility') === null
? false
: localStorage.getItem('detailsVisibility') == 'true'
? true
: false
);
React.useEffect(() => {
if (!origin) return;
for (const cluster of Object.values(getMemory().getClustersForOrigin(origin))) {
if (cluster.hasMarks()) {
return setMarksOccurrence(true);
}
}
return setMarksOccurrence(false);
}, [eventCounts['*']]);
if (!origin) return <div>Błąd: Brak parametru "origin"</div>;
return (
<div className="sidebar">
<header className="header">
<img src="../../assets/icon-addon.svg" height={32}></img>
<div className="webpage-metadata">
{origin ? (
<>
<span>Analiza strony</span>
<span className="webpage-metadata--hyperlink">{origin}</span>
</>
) : (
<span>Przejdź do wybranej strony internetowej</span>
)}
</div>
<button
className="button button--report"
onClick={() => {
window.open(
`/components/report-window/report-window.html?origin=${origin}`,
'new_tab'
);
}}
>
Generuj raport
</button>
</header>
{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={() => {
setDetailsVisibility(!detailsVisibility);
}}
>
<img
src={
detailsVisibility
? '/assets/icons/file_minus.svg'
: '/assets/icons/file_find.svg'
}
width="20"
height="20"
/>
<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>
{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)'
)
) {
let deep_copy = JSON.parse(
JSON.stringify(
Object.values(
getMemory().getClustersForOrigin(origin)
).map((domain) => domain.id)
)
);
for (const domain of deep_copy) {
window.open(`https://${domain}`);
}
}
}}
>
<img src="/assets/icons/bulb.svg" width="20" height="20" />
<span>Odwiedź wszystkie domeny</span>
</button>
) : null}
</nav>
) : null}
<section>
{stolenDataView ? (
<>
{infoDataDialogAck ? (
<section className="dialog-container dialog-container--info">
<span>
<strong>
Rentgen automatycznie zaznacza wybrane domeny na podstawie
zebranych danych.
</strong>{' '}
Możesz teraz przejść do generowania raportu lub dokonać korekty.
</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 ? (
<section className="dialog-container dialog-container--warning">
<span>
<strong>Uwaga!</strong> Niekoniecznie każda przesłana poniżej
informacja jest daną osobową. Niektóre z podanych domen mogą
należeć do właściciela strony i nie reprezentować podmiotów
trzecich.
</span>
<button
onClick={() => {
setWarningDataDialogAck(false);
localStorage.setItem(
'warningDataDialogAck',
false as unknown as string
);
}}
>
<img src="/assets/icons/close_big.svg" width="16" height="16" />
</button>
</section>
) : null}
<StolenData
origin={origin}
eventCounts={eventCounts}
minValueLength={minValueLength === null ? 7 : minValueLength}
cookiesOnly={cookiesOnly}
cookiesOrOriginOnly={cookiesOrOriginOnly}
detailsVisibility={detailsVisibility}
/>
</>
) : (
<Options
minValueLength={minValueLength === null ? 7 : minValueLength}
setMinValueLength={setMinValueLength}
cookiesOnly={cookiesOnly}
setCookiesOnly={setCookiesOnly}
cookiesOrOriginOnly={cookiesOrOriginOnly}
setCookiesOrOriginOnly={setCookiesOrOriginOnly}
warningDataDialogAck={warningDataDialogAck}
setWarningDataDialogAck={setWarningDataDialogAck}
detailsVisibility={detailsVisibility}
setDetailsVisibility={setDetailsVisibility}
setStolenDataView={setStolenDataView}
removeCookies={() => {
getMemory().removeCookiesFor(origin);
getMemory().emit('change', origin);
setMarksOccurrence(false);
}}
removeRequests={() => {
getMemory().removeRequestsFor(origin);
getMemory().emit('change', origin);
setMarksOccurrence(false);
}}
/>
)}
</section>
</div>
);
};
ReactDOM.render(<Sidebar />, document.getElementById('app'));