Add subscriber

This commit is contained in:
Arkadiusz Wieczorek 2022-05-21 14:42:15 +02:00
parent fa441b5b81
commit 24da4a34dd
7 changed files with 159 additions and 31 deletions

View File

@ -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;
}
}

View File

@ -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,15 +28,22 @@ export default function EmailContent({
)
).map((explainer_key) => Explainers[explainer_key]);
return (
<div style={{ padding: '1rem' }}>
<pre>{JSON.stringify(answers, null, 3)}</pre>
<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 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.
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))}
@ -47,12 +55,13 @@ export default function EmailContent({
</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).
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>
);
}

View File

@ -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>

View File

@ -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>
);
}

View File

@ -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={() => {

View File

@ -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;