Add subscriber

components/report-window/email-content.scss

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

components/report-window/email-content.tsx

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

components/report-window/report-window.tsx

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

components/report-window/screenshot-generator.tsx

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

components/sidebar/sidebar.tsx

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

styles/colors.scss

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