Update
This commit is contained in:
Arkadiusz Wieczorek
parent
51dc008aa7
commit
d759727208
3
assets/icons/bulb.svg
Normal file
3
assets/icons/bulb.svg
Normal file
@ -0,0 +1,3 @@
|
||||
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M15 22H9V20H15V22ZM15 19H9L8.777 17C8.65703 16.3385 8.45863 15.6936 8.186 15.079C7.832 14.579 7.463 14.152 7.106 13.735C5.79411 12.5053 5.03465 10.7978 5 9C5 5.13401 8.13401 2 12 2C15.866 2 19 5.13401 19 9C18.9593 10.7868 18.2057 12.4831 16.907 13.711L16.89 13.731C16.534 14.148 16.166 14.58 15.819 15.075C15.5466 15.6912 15.3476 16.3373 15.226 17L15 19ZM12 4C9.23995 4.00331 7.00331 6.23995 7 9C7 10.544 7.644 11.293 8.618 12.428C8.988 12.86 9.408 13.348 9.818 13.919C10.3156 14.8858 10.6555 15.9259 10.825 17H13.176C13.3499 15.929 13.6892 14.8916 14.182 13.925C14.582 13.354 15.001 12.863 15.37 12.431L15.385 12.413C16.357 11.273 17 10.52 17 9C16.9967 6.23995 14.7601 4.00331 12 4Z" fill="#2E3A59"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 814 B |
3
assets/icons/file_find.svg
Normal file
3
assets/icons/file_find.svg
Normal file
@ -0,0 +1,3 @@
|
||||
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M18 22H6C4.89543 22 4 21.1046 4 20V4.00001C4 2.89544 4.89543 2.00001 6 2.00001H13C13.2654 1.99907 13.5201 2.10462 13.707 2.29301L19.707 8.29301C19.8954 8.47994 20.0009 8.73462 20 9.00001V20C20 21.1046 19.1046 22 18 22ZM6 4.00001V20H16.586L14.02 17.434C13.4101 17.8017 12.7121 17.9973 12 18C10.1612 18.0199 8.54049 16.7967 8.05545 15.0229C7.57041 13.2491 8.34318 11.3714 9.93625 10.4529C11.5293 9.53434 13.5415 9.80626 14.8337 11.1147C16.1258 12.4231 16.3724 14.4386 15.434 16.02L18 18.588V9.41401L12.586 4.00001H6ZM12 12C10.8954 12 10 12.8954 10 14C10 15.1046 10.8954 16 12 16C13.1046 16 14 15.1046 14 14C14 12.8954 13.1046 12 12 12Z" fill="#2E3A59"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 764 B |
3
assets/icons/file_minus.svg
Normal file
3
assets/icons/file_minus.svg
Normal file
@ -0,0 +1,3 @@
|
||||
<svg width="24" height="24" viewBox="0 0 24 24" fill="none" xmlns="http://www.w3.org/2000/svg">
|
||||
<path d="M18 22H6C4.89543 22 4 21.1046 4 20V4C4 2.89543 4.89543 2 6 2H13C13.0109 2.00047 13.0217 2.00249 13.032 2.006C13.0418 2.00902 13.0518 2.01103 13.062 2.012C13.1502 2.01765 13.2373 2.0348 13.321 2.063L13.349 2.072C13.3717 2.07968 13.3937 2.08904 13.415 2.1C13.5239 2.14842 13.6232 2.21618 13.708 2.3L19.708 8.3C19.7918 8.38479 19.8596 8.48406 19.908 8.593C19.918 8.615 19.925 8.638 19.933 8.661L19.942 8.687C19.9699 8.77039 19.9864 8.85718 19.991 8.945C19.9926 8.95418 19.9949 8.96322 19.998 8.972C19.9998 8.98122 20.0004 8.99062 20.0001 9V20C20.0001 21.1046 19.1046 22 18 22ZM6 4V20H18V10H13C12.4477 10 12 9.55228 12 9V4H6ZM14 5.414V8H16.586L14 5.414ZM15 16H9V14H15V16Z" fill="#2E3A59"/>
|
||||
</svg>
|
||||
|
After Width: | Height: | Size: 798 B |
@ -3,7 +3,7 @@
|
||||
.sidebar {
|
||||
.header {
|
||||
display: grid;
|
||||
grid-template-columns: 6.67rem 1fr 1.25rem;
|
||||
grid-template-columns: 1.75rem 1fr 1.25rem;
|
||||
align-items: center;
|
||||
max-height: 3.5rem;
|
||||
min-height: 3.5rem;
|
||||
|
||||
@ -13,7 +13,6 @@ async function getCurrentTab() {
|
||||
return tab;
|
||||
}
|
||||
|
||||
|
||||
import './../../styles/global.scss';
|
||||
import './sidebar.scss';
|
||||
|
||||
@ -39,16 +38,14 @@ const Sidebar = () => {
|
||||
? true
|
||||
: false
|
||||
);
|
||||
const [logoVisibility, setLogoVisibility] = React.useState<boolean>(
|
||||
localStorage.getItem('logoVisibility') === null
|
||||
const [detailsVisibility, setDetailsVisibility] = React.useState<boolean>(
|
||||
localStorage.getItem('detailsVisibility') === null
|
||||
? false
|
||||
: localStorage.getItem('logoVisibility') == 'true'
|
||||
: localStorage.getItem('detailsVisibility') == 'true'
|
||||
? true
|
||||
: false
|
||||
);
|
||||
|
||||
|
||||
|
||||
React.useEffect(() => {
|
||||
for (const cluster of Object.values(getMemory().getClustersForOrigin(origin))) {
|
||||
if (cluster.hasMarks()) {
|
||||
@ -61,19 +58,9 @@ const Sidebar = () => {
|
||||
|
||||
return (
|
||||
<div className="sidebar">
|
||||
<header className={logoVisibility ? 'header' : 'header header--without-logo'}>
|
||||
<img
|
||||
src="../assets/logo-internet-czas-dzialac.svg"
|
||||
height={40}
|
||||
style={!logoVisibility ? { display: 'none' } : null}
|
||||
></img>
|
||||
<div
|
||||
className={
|
||||
logoVisibility
|
||||
? 'webpage-metadata'
|
||||
: 'webpage-metadata webpage-metadata--without-logo'
|
||||
}
|
||||
>
|
||||
<header className="header">
|
||||
<img src="../../assets/icon-addon.svg" height={32}></img>
|
||||
<div className="webpage-metadata">
|
||||
{origin ? (
|
||||
<>
|
||||
<span>Analiza strony</span>
|
||||
@ -121,39 +108,51 @@ const Sidebar = () => {
|
||||
<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
|
||||
);
|
||||
setDetailsVisibility(!detailsVisibility);
|
||||
}}
|
||||
>
|
||||
<svg
|
||||
<img
|
||||
src={
|
||||
detailsVisibility
|
||||
? '/assets/icons/file_minus.svg'
|
||||
: '/assets/icons/file_find.svg'
|
||||
}
|
||||
width="20"
|
||||
height="20"
|
||||
viewBox="0 0 24 24"
|
||||
fill="none"
|
||||
xmlns="http://www.w3.org/2000/svg"
|
||||
>
|
||||
<path
|
||||
d="M20 20H4C2.89543 20 2 19.1046 2 18V5.913C2.04661 4.84255 2.92853 3.99899 4 4H20C21.1046 4 22 4.89543 22 6V18C22 19.1046 21.1046 20 20 20ZM4 7.868V18H20V7.868L12 13.2L4 7.868ZM4.8 6L12 10.8L19.2 6H4.8Z"
|
||||
fill="#2E3A59"
|
||||
/>
|
||||
</svg>
|
||||
/>
|
||||
|
||||
<span>Utwórz wiadomość dla administratora witryny</span>
|
||||
<span>
|
||||
{detailsVisibility ? 'Ukryj szczegóły' : 'Wyświetlaj szczegóły'}
|
||||
</span>
|
||||
</button>
|
||||
<button
|
||||
onClick={async () => {
|
||||
if (
|
||||
window.confirm(
|
||||
'Czy chcesz wczytać wszystkie domeny w celu „splamienia” twojej przeglądarki? (Ten krok jest opcjonalny)'
|
||||
)
|
||||
) {
|
||||
let deep_copy = JSON.parse(
|
||||
JSON.stringify(
|
||||
Object.values(getMemory().getClustersForOrigin(origin)).map(
|
||||
(domain) => domain.id
|
||||
)
|
||||
)
|
||||
);
|
||||
console.log('deep_copy', deep_copy);
|
||||
for (const domain of deep_copy) {
|
||||
const win = window.open(
|
||||
`https://${domain}`,
|
||||
'_blank',
|
||||
`width=400,height=450,screenX=300,screenY=200`
|
||||
);
|
||||
}
|
||||
}
|
||||
}}
|
||||
>
|
||||
<img src="/assets/icons/bulb.svg" width="20" height="20" />
|
||||
<span>Odwiedź wszystkie domeny</span>
|
||||
</button>
|
||||
</nav>
|
||||
) : null}
|
||||
@ -188,6 +187,7 @@ const Sidebar = () => {
|
||||
minValueLength={minValueLength}
|
||||
cookiesOnly={cookiesOnly}
|
||||
cookiesOrOriginOnly={cookiesOrOriginOnly}
|
||||
detailsVisibility={detailsVisibility}
|
||||
/>
|
||||
</>
|
||||
) : (
|
||||
@ -200,8 +200,8 @@ const Sidebar = () => {
|
||||
setCookiesOrOriginOnly={setCookiesOrOriginOnly}
|
||||
warningDataDialogAck={warningDataDialogAck}
|
||||
setWarningDataDialogAck={setWarningDataDialogAck}
|
||||
logoVisibility={logoVisibility}
|
||||
setLogoVisibility={setLogoVisibility}
|
||||
detailsVisibility={detailsVisibility}
|
||||
setDetailsVisibility={setDetailsVisibility}
|
||||
/>
|
||||
)}
|
||||
</section>
|
||||
|
||||
@ -125,6 +125,7 @@ export default function StolenDataCluster({
|
||||
cookiesOnly,
|
||||
refreshToken,
|
||||
cookiesOrOriginOnly,
|
||||
detailsVisibility,
|
||||
}: {
|
||||
origin: string;
|
||||
shorthost: string;
|
||||
@ -132,6 +133,7 @@ export default function StolenDataCluster({
|
||||
minValueLength: number;
|
||||
cookiesOnly: boolean;
|
||||
cookiesOrOriginOnly: boolean;
|
||||
detailsVisibility: boolean;
|
||||
}) {
|
||||
const cluster = getMemory().getClustersForOrigin(origin)[shorthost];
|
||||
const fullHosts = cluster.getFullHosts();
|
||||
@ -152,33 +154,36 @@ export default function StolenDataCluster({
|
||||
))}
|
||||
</div>
|
||||
</header>
|
||||
<section>
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th className="table-header" colSpan={4}>
|
||||
Wysłane dane:
|
||||
</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{cluster
|
||||
.calculateRepresentativeStolenData({
|
||||
minValueLength,
|
||||
cookiesOnly,
|
||||
cookiesOrOriginOnly,
|
||||
})
|
||||
.map((entry) => (
|
||||
<StolenDataRow
|
||||
{...{
|
||||
entry,
|
||||
key: entry.id,
|
||||
}}
|
||||
/>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
</section>
|
||||
|
||||
{detailsVisibility ? (
|
||||
<section>
|
||||
<table>
|
||||
<thead>
|
||||
<tr>
|
||||
<th className="table-header" colSpan={4}>
|
||||
Wysłane dane:
|
||||
</th>
|
||||
</tr>
|
||||
</thead>
|
||||
<tbody>
|
||||
{cluster
|
||||
.calculateRepresentativeStolenData({
|
||||
minValueLength,
|
||||
cookiesOnly,
|
||||
cookiesOrOriginOnly,
|
||||
})
|
||||
.map((entry) => (
|
||||
<StolenDataRow
|
||||
{...{
|
||||
entry,
|
||||
key: entry.id,
|
||||
}}
|
||||
/>
|
||||
))}
|
||||
</tbody>
|
||||
</table>
|
||||
</section>
|
||||
) : null}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
||||
@ -11,12 +11,14 @@ export function StolenData({
|
||||
eventCounts,
|
||||
cookiesOnly,
|
||||
cookiesOrOriginOnly,
|
||||
detailsVisibility,
|
||||
}: {
|
||||
origin: string;
|
||||
eventCounts: Record<string, number>;
|
||||
minValueLength: number;
|
||||
cookiesOnly: boolean;
|
||||
cookiesOrOriginOnly: boolean;
|
||||
detailsVisibility: boolean;
|
||||
}) {
|
||||
if (!origin) {
|
||||
return (
|
||||
@ -33,7 +35,7 @@ export function StolenData({
|
||||
);
|
||||
return (
|
||||
<div className="stolen-data-container">
|
||||
<span>Domeny oraz przesłane informacje</span>
|
||||
<span>Domeny{detailsVisibility ? ' oraz przesłane informacje' : null}</span>
|
||||
|
||||
{clusters.map((cluster) => {
|
||||
return (
|
||||
@ -45,6 +47,7 @@ export function StolenData({
|
||||
minValueLength={minValueLength}
|
||||
cookiesOnly={cookiesOnly}
|
||||
cookiesOrOriginOnly={cookiesOrOriginOnly}
|
||||
detailsVisibility={detailsVisibility}
|
||||
/>
|
||||
);
|
||||
})}
|
||||
|
||||
@ -1,4 +1,4 @@
|
||||
import React, { Fragment, ReactElement } from 'react';
|
||||
import React, { Fragment } from 'react';
|
||||
import ReactDOM from 'react-dom';
|
||||
import { useEmitter } from '../../util';
|
||||
import { getMemory } from '../../memory';
|
||||
@ -44,9 +44,8 @@ const Toolbar = () => {
|
||||
const exposedOriginDomains = Object.values(getMemory().getClustersForOrigin(origin))
|
||||
.filter((cluster) => cluster.exposesOrigin())
|
||||
.map((cluster) => cluster.id);
|
||||
|
||||
setExposedOriginDomainCopy('');
|
||||
const first_sentence = `Strona ${origin} wysłała informacje o części Twojej historii przeglądania do `;
|
||||
const first_sentence = `Strona ${origin} wysłała informacje o części Twojej historii przeglądania do `;
|
||||
|
||||
switch (exposedOriginDomains.length) {
|
||||
case 0:
|
||||
@ -78,7 +77,8 @@ const Toolbar = () => {
|
||||
const cookieDomains = Object.values(getMemory().getClustersForOrigin(origin))
|
||||
.filter((cluster) => cluster.hasCookies())
|
||||
.map((cluster) => cluster.id);
|
||||
const first_sentence = `Strona ${origin} dokonała zapisu i odczytu plików Cookie dla domen `;
|
||||
setCookieDomainCopy('');
|
||||
const first_sentence = `Strona ${origin} dokonała zapisu i odczytu plików Cookie dla domen `;
|
||||
|
||||
switch (cookieDomains.length) {
|
||||
case 0:
|
||||
@ -97,7 +97,7 @@ const Toolbar = () => {
|
||||
default:
|
||||
return setCookieDomainCopy(
|
||||
first_sentence +
|
||||
`${cookieDomains[0]}, ${cookieDomains[1]} (i ${
|
||||
`${cookieDomains[0]}, ${cookieDomains[1]} (i ${
|
||||
cookieDomains.length - 2 < 2 ? 2 : cookieDomains.length - 2
|
||||
} innych).`
|
||||
);
|
||||
@ -161,17 +161,33 @@ const Toolbar = () => {
|
||||
</section>
|
||||
|
||||
<section className="details">
|
||||
<p>{exposedOriginDomainCopy}</p>
|
||||
<p>{cookieDomainCopy}</p>
|
||||
<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>
|
||||
</section>
|
||||
|
||||
{exposedOriginDomainCopy !== null || cookieDomainCopy !== null ? (
|
||||
<Fragment>
|
||||
<section className="about">
|
||||
<p>
|
||||
Takie przetwarzanie danych może być niezgodne z prawem. Kliknij w
|
||||
przycisk „Generuj raport”, aby pomóc ustalić, czy ta strona nie narusza
|
||||
RODO.
|
||||
Takie przetwarzanie danych może być niezgodne z prawem. Kliknij
|
||||
w przycisk „Generuj raport”, aby pomóc ustalić, czy ta strona nie
|
||||
narusza RODO.
|
||||
</p>
|
||||
</section>
|
||||
<section className="actions">
|
||||
@ -192,7 +208,23 @@ const Toolbar = () => {
|
||||
>
|
||||
Pokaż szczegóły
|
||||
</button>
|
||||
<button className="button button--report">Generuj raport</button>
|
||||
<button
|
||||
className="button button--report"
|
||||
onClick={() => {
|
||||
const params = [
|
||||
'height=' + screen.height,
|
||||
'width=' + screen.width,
|
||||
'fullscreen=yes',
|
||||
].join(',');
|
||||
window.open(
|
||||
`/report-window/report-window.html?origin=${origin}`,
|
||||
'new_window',
|
||||
params
|
||||
);
|
||||
}}
|
||||
>
|
||||
Generuj raport
|
||||
</button>
|
||||
</section>
|
||||
</Fragment>
|
||||
) : null}
|
||||
|
||||
@ -17,9 +17,13 @@
|
||||
.label-checkbox {
|
||||
cursor: pointer;
|
||||
margin-left: 0.5rem;
|
||||
font-size: 0.875rem;
|
||||
font-weight: 500;
|
||||
}
|
||||
|
||||
.input-container {
|
||||
font-size: 0.875rem;
|
||||
font-weight: 500;
|
||||
padding-bottom: 0.25rem;
|
||||
}
|
||||
|
||||
|
||||
42
options.tsx
42
options.tsx
@ -10,8 +10,8 @@ export default function Options({
|
||||
setCookiesOrOriginOnly,
|
||||
warningDataDialogAck,
|
||||
setWarningDataDialogAck,
|
||||
logoVisibility,
|
||||
setLogoVisibility,
|
||||
detailsVisibility,
|
||||
setDetailsVisibility,
|
||||
}: {
|
||||
minValueLength: number;
|
||||
setMinValueLength: (n: number) => void;
|
||||
@ -21,8 +21,8 @@ export default function Options({
|
||||
setCookiesOrOriginOnly: (b: boolean) => void;
|
||||
warningDataDialogAck: boolean;
|
||||
setWarningDataDialogAck: (b: boolean) => void;
|
||||
logoVisibility: boolean;
|
||||
setLogoVisibility: (b: boolean) => void;
|
||||
detailsVisibility: boolean;
|
||||
setDetailsVisibility: (b: boolean) => void;
|
||||
}) {
|
||||
return (
|
||||
<div className="options-container">
|
||||
@ -31,18 +31,18 @@ export default function Options({
|
||||
<div className="input-container">
|
||||
<input
|
||||
type="checkbox"
|
||||
id="logoVisibility"
|
||||
checked={logoVisibility}
|
||||
id="detailsVisibility"
|
||||
checked={detailsVisibility}
|
||||
onChange={(e) => {
|
||||
setLogoVisibility(e.target.checked);
|
||||
setDetailsVisibility(e.target.checked);
|
||||
localStorage.setItem(
|
||||
'logoVisibility',
|
||||
'detailsVisibility',
|
||||
e.target.checked as unknown as string
|
||||
);
|
||||
}}
|
||||
/>
|
||||
<label className="label-checkbox" htmlFor="logoVisibility">
|
||||
Wyświetlaj logo <i>Internet. Czas działać!</i>
|
||||
<label className="label-checkbox" htmlFor="detailsVisibility">
|
||||
Wyświetlaj szczegóły pozyskanych danych
|
||||
</label>
|
||||
</div>
|
||||
<div className="input-container">
|
||||
@ -58,10 +58,7 @@ export default function Options({
|
||||
);
|
||||
}}
|
||||
/>
|
||||
<label
|
||||
className="label-checkbox"
|
||||
htmlFor="warningDataDialogAck"
|
||||
>
|
||||
<label className="label-checkbox" htmlFor="warningDataDialogAck">
|
||||
Wyświetlaj komunikat o pozyskiwanych danych
|
||||
</label>
|
||||
</div>
|
||||
@ -78,10 +75,7 @@ export default function Options({
|
||||
value={minValueLength}
|
||||
onChange={(e) => {
|
||||
setMinValueLength(parseInt(e.target.value));
|
||||
localStorage.setItem(
|
||||
'minValueLength',
|
||||
e.target.value
|
||||
);
|
||||
localStorage.setItem('minValueLength', e.target.value);
|
||||
}}
|
||||
/>
|
||||
</div>
|
||||
@ -101,16 +95,10 @@ export default function Options({
|
||||
type="checkbox"
|
||||
id="cookiesOrOriginOnly"
|
||||
checked={cookiesOrOriginOnly}
|
||||
onChange={(e) =>
|
||||
setCookiesOrOriginOnly(e.target.checked)
|
||||
}
|
||||
onChange={(e) => setCookiesOrOriginOnly(e.target.checked)}
|
||||
/>
|
||||
<label
|
||||
className="label-checkbox"
|
||||
htmlFor="cookiesOrOriginOnly"
|
||||
>
|
||||
Pokazuj tylko dane z cookiesów lub z częścią historii
|
||||
przeglądania
|
||||
<label className="label-checkbox" htmlFor="cookiesOrOriginOnly">
|
||||
Pokazuj tylko dane z cookiesów lub z częścią historii przeglądania
|
||||
</label>
|
||||
</div>
|
||||
</fieldset>
|
||||
|
||||
Loading…
Reference in New Issue
Block a user