Add subscriber
This commit is contained in:
Arkadiusz Wieczorek
parent
fa441b5b81
commit
24da4a34dd
|
|
@ -0,0 +1,31 @@
|
|||
@import './../../styles/colors.scss';
|
||||
|
||||
.mail-container {
|
||||
box-shadow: rgba(12, 12, 13, 0.1) 0px 1px 4px 0px;
|
||||
background-color: #fff;
|
||||
max-width: 40rem;
|
||||
margin-top: 0.5rem;
|
||||
|
||||
&__header {
|
||||
display: flex;
|
||||
justify-content: flex-end;
|
||||
|
||||
&--control {
|
||||
}
|
||||
}
|
||||
|
||||
&__content {
|
||||
height: 75vh;
|
||||
overflow-y: scroll;
|
||||
padding: 1rem 2rem;
|
||||
color: $black-color;
|
||||
}
|
||||
|
||||
h2 {
|
||||
font-size: 1.125rem;
|
||||
}
|
||||
|
||||
p {
|
||||
font-size: 1rem;
|
||||
}
|
||||
}
|
||||
|
|
@ -4,6 +4,7 @@ import deduceProblems from './deduce-problems';
|
|||
import { Explainers } from './explainers';
|
||||
import { ParsedAnswers } from './parse-answers';
|
||||
import { v } from './verbs';
|
||||
import './email-content.scss';
|
||||
|
||||
declare var PLUGIN_NAME: string;
|
||||
declare var PLUGIN_URL: string;
|
||||
|
|
@ -27,32 +28,40 @@ export default function EmailContent({
|
|||
)
|
||||
).map((explainer_key) => Explainers[explainer_key]);
|
||||
return (
|
||||
<div style={{ padding: '1rem' }}>
|
||||
<pre>{JSON.stringify(answers, null, 3)}</pre>
|
||||
<p>Dzień dobry,</p>
|
||||
<p>
|
||||
w dniu {getDate()} {_('odwiedziłem')} stronę {visited_url}. Po podejrzeniu ruchu
|
||||
sieciowego generowanego przez tę stronę za pomocą wtyczki{' '}
|
||||
<a href={PLUGIN_URL}>{PLUGIN_NAME}</a> w przeglądarce Firefox {_('mam')} pytania
|
||||
dotyczące przetwarzania {_('moich')} danych osobowych, na które nie {_('znalazłem')}{' '}
|
||||
odpowiedzi nigdzie na Państwa stronie.
|
||||
</p>
|
||||
{problems.map((problem) => problem.getEmailContent())}
|
||||
{explainers.map((explainer) => explainer(answers.zaimek))}
|
||||
<h2>Państwa rola jako współadministratora danych osobowych</h2>
|
||||
<p>
|
||||
{_('Zwracam')} Państwa uwagę na fakt, że w myśl{' '}
|
||||
<a href="https://curia.europa.eu/juris/document/document.jsf?text=&docid=216555&pageIndex=0&doclang=PL&mode=lst&dir=&occ=first&part=1&cid=1254905">
|
||||
treści wyroku TSUE w sprawie C-40/17
|
||||
</a>{' '}
|
||||
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”).
|
||||
</p>
|
||||
<div className="mail-container">
|
||||
<div className="mail-container__header">
|
||||
<div className="mail-container__header--control">
|
||||
<button>Kopiuj</button>
|
||||
</div>
|
||||
</div>
|
||||
|
||||
{/* <pre>{JSON.stringify(answers, null, 3)}</pre> */}
|
||||
<article className="mail-container__content">
|
||||
<p>Dzień dobry,</p>
|
||||
<p>
|
||||
w dniu {getDate()} {_('odwiedziłem')} stronę {visited_url}. Po podejrzeniu ruchu
|
||||
sieciowego generowanego przez tę stronę za pomocą wtyczki{' '}
|
||||
<a href={PLUGIN_URL}>{PLUGIN_NAME}</a> w przeglądarce Firefox {_('mam')} pytania
|
||||
dotyczące przetwarzania {_('moich')} danych osobowych, na które nie{' '}
|
||||
{_('znalazłem')} odpowiedzi nigdzie na Państwa stronie.
|
||||
</p>
|
||||
{problems.map((problem) => problem.getEmailContent())}
|
||||
{explainers.map((explainer) => explainer(answers.zaimek))}
|
||||
<h2>Państwa rola jako współadministratora danych osobowych</h2>
|
||||
<p>
|
||||
{_('Zwracam')} Państwa uwagę na fakt, że w myśl{' '}
|
||||
<a href="https://curia.europa.eu/juris/document/document.jsf?text=&docid=216555&pageIndex=0&doclang=PL&mode=lst&dir=&occ=first&part=1&cid=1254905">
|
||||
treści wyroku TSUE w sprawie C-40/17
|
||||
</a>{' '}
|
||||
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”).
|
||||
</p>
|
||||
</article>
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
|
|
|||
|
|
@ -7,6 +7,7 @@ import './report-window.scss';
|
|||
import Questions from './questions';
|
||||
import EmailContent from './email-content';
|
||||
import { parseAnswers, ParsedAnswers } from './parse-answers';
|
||||
import ScreenshotGenerator from './screenshot-generator';
|
||||
|
||||
function Report() {
|
||||
try {
|
||||
|
|
@ -54,12 +55,17 @@ function Report() {
|
|||
.map((cluster) => cluster.id)}
|
||||
onComplete={(answers) => {
|
||||
setAnswers(parseAnswers(answers));
|
||||
setMode('preview');
|
||||
setMode('screenshots');
|
||||
}}
|
||||
></Questions>
|
||||
) : (
|
||||
''
|
||||
)}
|
||||
{mode === 'screenshots' ? (
|
||||
<ScreenshotGenerator {...{ visited_url, clusters }} />
|
||||
) : (
|
||||
''
|
||||
)}
|
||||
{mode === 'preview' ? <EmailContent {...{ answers, visited_url, clusters }} /> : ''}
|
||||
{/* <HARConverter {...{ entries }} /> */}
|
||||
</div>
|
||||
|
|
|
|||
|
|
@ -0,0 +1,83 @@
|
|||
import React, { Fragment } from 'react';
|
||||
import { RequestCluster } from '../../request-cluster';
|
||||
import './screenshot-generator.scss';
|
||||
|
||||
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,
|
||||
''
|
||||
)}`;
|
||||
}
|
||||
|
||||
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;
|
||||
}
|
||||
}
|
||||
|
||||
export default function ScreenshotGenerator({
|
||||
visited_url,
|
||||
clusters,
|
||||
}: {
|
||||
visited_url: string;
|
||||
clusters: Record<string, RequestCluster>;
|
||||
}) {
|
||||
const [isLoading, setLoading] = React.useState<boolean>(false);
|
||||
const [output, setOutput] = React.useState<string[]>([]);
|
||||
|
||||
return (
|
||||
<div className="generator-container">
|
||||
{!isLoading ? (
|
||||
<Fragment>
|
||||
<h1>Przygotowanie zrzutów ekranów</h1>
|
||||
<p>
|
||||
Dla potwierdzenia przechwyconych danych, warto załączyć zrzuty ekranów
|
||||
narzędzi deweloperskich do maila dla administratora oraz Urzędzu Ochrony
|
||||
Danych Osobowych.
|
||||
</p>
|
||||
<p>
|
||||
Jeżeli nie wiesz jak wykonać zrzuty ekranów, skorzystaj z{' '}
|
||||
<a href="">naszej instrukcji</a> lub wtyczka Rentgen może wygenerować je za
|
||||
Ciebie.
|
||||
</p>
|
||||
|
||||
<button>Pomiń</button>
|
||||
<button
|
||||
onClick={async () => {
|
||||
setLoading(true);
|
||||
const task = await createTask(visited_url, Object.keys(clusters));
|
||||
const response = await subscribe(task.url);
|
||||
|
||||
setOutput(response.files);
|
||||
console.log('output', response);
|
||||
}}
|
||||
>
|
||||
Wygeneruj
|
||||
</button>
|
||||
</Fragment>
|
||||
) : (
|
||||
<Fragment>
|
||||
<h1>Przygotowujemy zrzuty ekranów</h1>
|
||||
|
||||
<pre>{createTaskEndpoint(visited_url, Object.keys(clusters))}</pre>
|
||||
|
||||
{JSON.stringify(output)}
|
||||
<button>In progress</button>
|
||||
</Fragment>
|
||||
)}
|
||||
</div>
|
||||
);
|
||||
}
|
||||
|
|
@ -175,9 +175,8 @@ const Sidebar = () => {
|
|||
{infoDataDialogAck ? (
|
||||
<section className="dialog-container dialog-container--info">
|
||||
<span>
|
||||
<strong>Uwaga!</strong> Wtyczka Rentgen automatycznie zaznacza
|
||||
wybrane domeny, możesz teraz przejść do generowania raportu lub
|
||||
dokonać korekty.
|
||||
<strong>Rentgen automatycznie zaznacza wybrane domeny</strong>,
|
||||
możesz teraz przejść do generowania raportu lub dokonać korekty.
|
||||
</span>
|
||||
<button
|
||||
onClick={() => {
|
||||
|
|
|
|||
|
|
@ -1,5 +1,5 @@
|
|||
$ultra-black-color: #000;
|
||||
$black-color: hwb(217.5 18.4% 78.4%);
|
||||
$black-color: #1b1c1d;
|
||||
$disabled-grey: #8a949f;
|
||||
$light-grey: #d1d1d1;
|
||||
$ultra-light-grey: #ededed;
|
||||
|
|
|
|||
Loading…
Reference in New Issue