rentgen/sidebar/sidebar.tsx

228 lines
9.2 KiB
TypeScript
Raw Normal View History

import React, { Fragment, useEffect, useState } from 'react';
import ReactDOM from 'react-dom';
import Options from '../options';
import { StolenData } from './stolen-data';
2022-01-19 13:12:28 +01:00
import { getshorthost, useEmitter } from '../util';
import { getMemory } from '../memory';
2022-01-19 13:12:28 +01:00
import InfoCircleIcon from '../assets/icons/info_circle_outline.svg';
import SettingsIcon from '../assets/icons/settings.svg';
import TrashIcon from '../assets/icons/trash_full.svg';
import MailIcon from '../assets/icons/mail.svg';
import ShortLeftIcon from '../assets/icons/short_left.svg';
2022-01-23 21:42:49 +01:00
import CloseBigIcon from '../assets/icons/close_big.svg';
2022-01-27 22:30:57 +01:00
import CookiesIcon from '../assets/icons/cookie.svg';
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 './global.scss';
import './sidebar.scss';
2021-10-03 09:03:56 +02:00
const Sidebar = () => {
const [origin, setOrigin] = useState<string | null>(null);
const [minValueLength, setMinValueLength] = useState<number | null>(
localStorage.getItem('minValueLength') === null
? 7
: (localStorage.getItem('minValueLength') as unknown as number)
);
const [cookiesOnly, setCookiesOnly] = useState<boolean>(false);
const [stolenDataView, setStolenDataView] = useState<boolean>(true);
const [cookiesOrOriginOnly, setCookiesOrOriginOnly] =
useState<boolean>(false);
const [counter, setCounter] = useEmitter(getMemory());
2022-01-19 14:12:52 +01:00
const [marksOccurrence, setMarksOccurrence] = useState<boolean>(false);
2022-01-24 12:50:54 +01:00
const [warningDataDialogAck, setWarningDataDialogAck] = useState<boolean>(
localStorage.getItem('warningDataDialogAck') === null
? true
: localStorage.getItem('warningDataDialogAck') == 'true'
? true
: false
);
const [logoVisibility, setLogoVisibility] = useState<boolean>(
localStorage.getItem('logoVisibility') === null
? false
2022-01-24 12:50:54 +01:00
: localStorage.getItem('logoVisibility') == 'true'
? true
: false
2022-01-24 12:21:28 +01:00
);
2021-11-06 21:48:25 +01:00
useEffect(() => {
const listener = async (data: any) => {
console.log('tab change!');
const tab = await getCurrentTab();
const url = new URL(tab.url);
if (url.origin.startsWith('moz-extension')) {
return;
}
setOrigin(url.origin);
};
browser.tabs.onUpdated.addListener(listener);
return () => {
browser.tabs.onUpdated.removeListener(listener);
};
});
2021-11-06 21:48:25 +01:00
2022-01-19 14:12:52 +01:00
useEffect(() => {
for (const cluster of Object.values(
getMemory().getClustersForOrigin(origin)
)) {
if (cluster.hasMarks()) {
return setMarksOccurrence(true);
}
}
return setMarksOccurrence(false);
2022-01-19 14:17:13 +01:00
}, [counter, origin]);
2022-01-19 14:12:52 +01:00
return (
2022-01-20 19:03:03 +01:00
<div className="sidebar">
2022-01-24 12:50:54 +01:00
<header
className={
logoVisibility ? 'header' : 'header header--without-logo'
}
>
<img
src="../assets/logo-internet-czas-dzialac.svg"
2022-01-24 12:21:28 +01:00
height={40}
2022-01-24 12:50:54 +01:00
style={!logoVisibility ? { display: 'none' } : null}
></img>
2022-01-24 12:50:54 +01:00
<div
className={
logoVisibility
? 'webpage-metadata'
: 'webpage-metadata webpage-metadata--without-logo'
}
>
2022-01-24 12:21:28 +01:00
{origin ? (
<Fragment>
<span>Analiza strony</span>
<span className="webpage-metadata--hyperlink">
{origin}
</span>
</Fragment>
) : (
<span>Przejdź do wybranej strony internetowej</span>
)}
</div>
2022-01-19 13:12:28 +01:00
{stolenDataView ? (
<a href="https://internet-czas-dzialac.pl">
<InfoCircleIcon />
</a>
) : (
<button onClick={() => setStolenDataView(true)}>
<ShortLeftIcon />
</button>
)}
</header>
2022-01-23 21:42:49 +01:00
{stolenDataView ? (
<nav>
<button onClick={() => setStolenDataView(!stolenDataView)}>
<SettingsIcon width={20} height={20} />
2022-01-27 22:30:57 +01:00
<span>Ustawienia</span>
2022-01-23 21:42:49 +01:00
</button>
<button
onClick={() => {
getMemory().removeRequestsFor(origin);
setCounter((c) => c + 1);
setMarksOccurrence(false);
}}
>
<TrashIcon width={20} height={20} />
2022-01-27 22:30:57 +01:00
<span>Wyczyść historię wtyczki</span>
</button>
<button
onClick={() => {
getMemory().removeCookiesFor(origin);
setCounter((c) => c + 1);
setMarksOccurrence(false);
}}
>
<CookiesIcon width={20} height={20} />
2022-01-23 21:42:49 +01:00
<span>Wyczyść ciasteczka</span>
</button>
<button
disabled={!marksOccurrence}
title={
marksOccurrence
? 'Kliknij, aby wygenerować wiadomość'
: 'Zaznacz poniżej elementy, aby móc wygenerować wiadomość'
}
onClick={() => {
const params = [
'height=' + screen.height,
'width=' + screen.width,
'fullscreen=yes',
].join(',');
window.open(
`/report-window/report-window.html?origin=${origin}`,
'new_window',
params
);
}}
>
<MailIcon width={20} height={20} />
<span>Utwórz wiadomość dla administratora witryny</span>
2022-01-23 21:42:49 +01:00
</button>
</nav>
) : null}
<section>
{stolenDataView ? (
2022-01-23 21:42:49 +01:00
<Fragment>
2022-01-24 12:50:54 +01:00
{warningDataDialogAck ? (
2022-01-23 21:42:49 +01:00
<section className="warning-container">
<span>
<strong>Uwaga!</strong> Niekoniecznie każda
przechwycona 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={() => {
2022-01-24 12:50:54 +01:00
setWarningDataDialogAck(false);
2022-01-23 21:42:49 +01:00
localStorage.setItem(
2022-01-24 12:50:54 +01:00
'warningDataDialogAck',
false as unknown as string
2022-01-23 21:42:49 +01:00
);
}}
>
<CloseBigIcon width={16} height={16} />
</button>
</section>
) : null}
<StolenData
origin={origin}
refreshToken={counter}
refresh={() => setCounter((c) => c + 1)}
minValueLength={minValueLength}
cookiesOnly={cookiesOnly}
cookiesOrOriginOnly={cookiesOrOriginOnly}
/>
</Fragment>
) : (
<Options
minValueLength={minValueLength}
setMinValueLength={setMinValueLength}
cookiesOnly={cookiesOnly}
setCookiesOnly={setCookiesOnly}
cookiesOrOriginOnly={cookiesOrOriginOnly}
setCookiesOrOriginOnly={setCookiesOrOriginOnly}
2022-01-24 12:50:54 +01:00
warningDataDialogAck={warningDataDialogAck}
setWarningDataDialogAck={setWarningDataDialogAck}
2022-01-24 12:21:28 +01:00
logoVisibility={logoVisibility}
setLogoVisibility={setLogoVisibility}
/>
)}
</section>
2022-01-20 19:03:03 +01:00
</div>
);
2021-10-03 09:03:56 +02:00
};
ReactDOM.render(<Sidebar />, document.getElementById('app'));