From 7a2122089e1214bacfe221506131a5eb09345f52 Mon Sep 17 00:00:00 2001 From: Arkadiusz Wieczorek Date: Sun, 22 May 2022 16:49:24 +0200 Subject: [PATCH] Generating screenshots --- components/report-window/email-content.scss | 2 +- components/report-window/email-content.tsx | 75 +++++++----- components/report-window/report-window.scss | 5 +- components/report-window/report-window.tsx | 19 +-- .../report-window/screenshot-generator.scss | 66 ++++++++++ .../report-window/screenshot-generator.tsx | 115 ++++++++++++++---- 6 files changed, 201 insertions(+), 81 deletions(-) diff --git a/components/report-window/email-content.scss b/components/report-window/email-content.scss index 3fa4b50..a375007 100644 --- a/components/report-window/email-content.scss +++ b/components/report-window/email-content.scss @@ -15,7 +15,7 @@ } &__content { - height: 75vh; + height: 70vh; overflow-y: scroll; padding: 1rem 2rem; color: $black-color; diff --git a/components/report-window/email-content.tsx b/components/report-window/email-content.tsx index 85aa4a3..a3879f4 100644 --- a/components/report-window/email-content.tsx +++ b/components/report-window/email-content.tsx @@ -5,6 +5,7 @@ import { Explainers } from './explainers'; import { ParsedAnswers } from './parse-answers'; import { v } from './verbs'; import './email-content.scss'; +import { Fragment } from 'react'; declare var PLUGIN_NAME: string; declare var PLUGIN_URL: string; @@ -28,40 +29,48 @@ export default function EmailContent({ ) ).map((explainer_key) => Explainers[explainer_key]); return ( -
-
-
- + +

Treść maila

+

+ Lorem ipsum dolor sit amet consectetur, adipisicing elit. Iure dolore, pariatur ab + eius expedita maxime alias esse quis possimus rem aliquid dicta laudantium rerum + libero enim cumque. Aperiam, enim aliquid. +

+
+
+
+ +
-
- {/* 
{JSON.stringify(answers, null, 3)}
*/} -
-

Dzień dobry,

-

- w dniu {getDate()} {_('odwiedziłem')} stronę {visited_url}. Po podejrzeniu ruchu - sieciowego generowanego przez tę stronę za pomocą wtyczki{' '} - {PLUGIN_NAME} w przeglądarce Firefox {_('mam')} pytania - dotyczące przetwarzania {_('moich')} danych osobowych, na które nie{' '} - {_('znalazłem')} odpowiedzi nigdzie na Państwa stronie. -

- {problems.map((problem) => problem.getEmailContent())} - {explainers.map((explainer) => explainer(answers.zaimek))} -

Państwa rola jako współadministratora danych osobowych

-

- {_('Zwracam')} Państwa uwagę na fakt, że w myśl{' '} - - treści wyroku TSUE w sprawie C-40/17 - {' '} - poprzez wysyłanie moich danych w wyżej opisanym zakresie stają się Państwo - współadministratorem moich danych osobowych, dlatego ciąży na Państwu obowiązek - odpowiedzi na moje pytania na mocy Art. 12 i 13 Rozporządzenia 2016/679 - Parlamentu Europejskiego i Rady (UE) z dnia 27 kwietnia 2016 r. w sprawie - ochrony osób fizycznych w związku z przetwarzaniem danych osobowych i w sprawie - swobodnego przepływu takich danych oraz uchylenia dyrektywy 95/46/WE (ogólne - rozporządzenie o ochronie danych, dalej: „RODO”). -

-
-
+ {/* 
{JSON.stringify(answers, null, 3)}
*/} +
+

Dzień dobry,

+

+ w dniu {getDate()} {_('odwiedziłem')} stronę {visited_url}. Po podejrzeniu + ruchu sieciowego generowanego przez tę stronę za pomocą wtyczki{' '} + {PLUGIN_NAME} w przeglądarce Firefox {_('mam')}{' '} + pytania dotyczące przetwarzania {_('moich')} danych osobowych, na które nie{' '} + {_('znalazłem')} odpowiedzi nigdzie na Państwa stronie. +

+ {problems.map((problem) => problem.getEmailContent())} + {explainers.map((explainer) => explainer(answers.zaimek))} +

Państwa rola jako współadministratora danych osobowych

+

+ {_('Zwracam')} Państwa uwagę na fakt, że w myśl{' '} + + treści wyroku TSUE w sprawie C-40/17 + {' '} + poprzez wysyłanie moich danych w wyżej opisanym zakresie stają się Państwo + współadministratorem moich danych osobowych, dlatego ciąży na Państwu + obowiązek odpowiedzi na moje pytania na mocy Art. 12 i 13 Rozporządzenia + 2016/679 Parlamentu Europejskiego i Rady (UE) z dnia 27 kwietnia 2016 r. w + sprawie ochrony osób fizycznych w związku z przetwarzaniem danych osobowych + i w sprawie swobodnego przepływu takich danych oraz uchylenia dyrektywy + 95/46/WE (ogólne rozporządzenie o ochronie danych, dalej: „RODO”). +

+
+
+ ); } diff --git a/components/report-window/report-window.scss b/components/report-window/report-window.scss index baa49fb..14e4c04 100644 --- a/components/report-window/report-window.scss +++ b/components/report-window/report-window.scss @@ -1,6 +1,7 @@ @import './../../styles/colors.scss'; * { + box-sizing: border-box; font-family: 'OpenSans' !important; } @@ -44,10 +45,8 @@ h3 { align-items: center; max-height: 3.5rem; min-height: 3.5rem; - // border-bottom: 1px solid $light-grey; position: sticky; top: 0; - // background: #ffffff; z-index: 1; .webpage-metadata { @@ -75,7 +74,6 @@ h3 { background-color: transparent; .sv_p_root { & > .sv_row:nth-child(2n) { - // background-color: hsl(217.5, 7.8%, 96%); background-color: #fff; } @@ -84,7 +82,6 @@ h3 { } & > .sv_row { - // border-bottom: 1px solid #d1d1d1; border-bottom: none; background-color: #fff; box-shadow: rgba(12, 12, 13, 0.1) 0px 1px 4px 0px; diff --git a/components/report-window/report-window.tsx b/components/report-window/report-window.tsx index ff281ca..b48d237 100644 --- a/components/report-window/report-window.tsx +++ b/components/report-window/report-window.tsx @@ -19,21 +19,6 @@ function Report() { ); const [mode, setMode] = React.useState(url.searchParams.get('mode') || 'survey'); const clusters = getMemory().getClustersForOrigin(origin); - /* const [entries, setEntries] = React.useState([]); */ - /* React.useEffect(() => { - * setEntries( - * Object.values(clusters) - * .map((cluster) => { - * cluster.calculateRepresentativeStolenData(); - * return cluster.representativeStolenData; - * }) - * .reduce(reduceConcat, []) - * .filter((entry) => entry.isMarked) - * ); - * }, []); */ - /* if (entries.length == 0) { - * return <>Wczytywanie...; - * } */ React.useEffect(() => { const url = new URL(document.location.toString()); @@ -62,7 +47,9 @@ function Report() { '' )} {mode === 'screenshots' ? ( - + ) : ( '' )} diff --git a/components/report-window/screenshot-generator.scss b/components/report-window/screenshot-generator.scss index e69de29..297335c 100644 --- a/components/report-window/screenshot-generator.scss +++ b/components/report-window/screenshot-generator.scss @@ -0,0 +1,66 @@ +@import './../../styles/colors.scss'; + +.images { + display: flex; + grid-gap: 1rem; + flex-wrap: wrap; + margin: 2rem 0; +} + +.browser { + height: 9.667rem; + width: 16rem; + font-weight: 800 !important; + // box-shadow: rgba(12, 12, 13, 0.1) 0px 1px 4px 0px; + color: $disabled-grey !important; + border: 1px solid $disabled-grey; + background-image: linear-gradient(to bottom, $icd-rentgen-color 20%, #fff 20%, #fff 100%); + animation: xray 2s cubic-bezier(0, 1.43, 0.39, 1.43) infinite; + + &--filled { + background-size: contain; + background-position-y: 18px; + animation: none; + + .browser__header { + background-color: #fff; + } + } + + @keyframes xray { + to { + background-position-y: 11.1rem; + } + } + + &__header { + height: 1.667rem; + width: 100%; + display: flex; + justify-content: space-between; + align-items: center; + + padding: 0 0.5rem; + font-size: 1.25rem; + border-bottom: 1px solid $disabled-grey; + + &--address-bar { + border: 1px solid $disabled-grey; + height: 1rem; + width: 10rem; + font-size: 0.667rem; + font-weight: 400; + padding-left: 0.25rem; + color: #000; + } + + &--controls { + padding-bottom: 0.25rem; + font-weight: 900; + } + } + + &__content { + height: 7.667rem; + } +} diff --git a/components/report-window/screenshot-generator.tsx b/components/report-window/screenshot-generator.tsx index 03ed9cc..af0142d 100644 --- a/components/report-window/screenshot-generator.tsx +++ b/components/report-window/screenshot-generator.tsx @@ -2,6 +2,21 @@ import React, { Fragment } from 'react'; import { RequestCluster } from '../../request-cluster'; import './screenshot-generator.scss'; +enum taskState { + WAITING = 'waiting', + RUNNING = 'running', + FINISHED = 'finished', +} + +interface screenshotTask { + url: string; + domains: string[]; + id: string; + status: taskState; + output: string; + files: string[]; +} + function createTaskEndpoint(visited_url: string, domains: string[]) { return `http://65.108.60.135:3000/api/requests?url=${visited_url}${domains.reduce( (prev: string, curr: string) => prev + '&domains[]=' + curr, @@ -13,39 +28,45 @@ function createTask(visited_url: string, domains: string[]) { return fetch(createTaskEndpoint(visited_url, domains), { method: 'POST' }); } -async function subscribe(path: string) { - let request = await fetch(path, { method: 'GET' }); - const response = await request.json(); - - if (response.status === 'running' || response.status === 'waiting') { - console.debug(response.status); - - await new Promise((resolve) => setTimeout(resolve, 1000)); - await subscribe(path); - } else if (response.status === 'finished') { - console.log('response', response); - return response; - } +function pollTask(path: string): Promise { + return fetch(path, { method: 'GET' }); } export default function ScreenshotGenerator({ visited_url, clusters, + setReportWindowMode, }: { visited_url: string; clusters: Record; + setReportWindowMode: Function; }) { - const [isLoading, setLoading] = React.useState(false); - const [output, setOutput] = React.useState([]); + const [mode, setMode] = React.useState('idle'); + const [images, setImages] = React.useState([]); + const [taskId, setTaskId] = React.useState(null); + + async function subscribeTask(path: string): Promise { + let response = { status: taskState.WAITING }; + while (response.status === taskState.WAITING || response.status === taskState.RUNNING) { + await new Promise((resolve) => setTimeout(resolve, 1000)); + response = await (await pollTask(path)).json(); + setImages((response as screenshotTask)?.files); + } + + if (response.status === taskState.FINISHED) { + setMode('finished'); + } + return response as screenshotTask; + } return (
- {!isLoading ? ( + {mode === 'idle' ? (

Przygotowanie zrzutów ekranów

Dla potwierdzenia przechwyconych danych, warto załączyć zrzuty ekranów - narzędzi deweloperskich do maila dla administratora oraz Urzędzu Ochrony + narzędzi deweloperskich do maila dla administratora oraz Urzędu Ochrony Danych Osobowych.

@@ -54,30 +75,70 @@ export default function ScreenshotGenerator({ Ciebie.

- + - ) : ( + ) : null} + + {mode === 'in_progress' || mode === 'finished' ? (

Przygotowujemy zrzuty ekranów

- 
{createTaskEndpoint(visited_url, Object.keys(clusters))}
+
+ {images.map((filename: string) => { + return ( +
+
+
+ {filename} +
+
· · ·
+
+
+
+ ); + })} - {JSON.stringify(output)} - + {mode === 'in_progress' ? ( +
+
+
+
· · ·
+
+
+
+ ) : null} +
+ {mode === 'finished' ? ( + + ) : null} - )} + ) : null}
); }