2022-05-21 14:42:15 +02:00
|
|
|
|
import React, { Fragment } from 'react';
|
|
|
|
|
import { RequestCluster } from '../../request-cluster';
|
|
|
|
|
import './screenshot-generator.scss';
|
|
|
|
|
|
2022-05-22 16:49:24 +02:00
|
|
|
|
enum taskState {
|
|
|
|
|
WAITING = 'waiting',
|
|
|
|
|
RUNNING = 'running',
|
|
|
|
|
FINISHED = 'finished',
|
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
interface screenshotTask {
|
|
|
|
|
url: string;
|
|
|
|
|
domains: string[];
|
|
|
|
|
id: string;
|
|
|
|
|
status: taskState;
|
|
|
|
|
output: string;
|
|
|
|
|
files: string[];
|
|
|
|
|
}
|
|
|
|
|
|
2022-05-21 14:42:15 +02:00
|
|
|
|
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' });
|
|
|
|
|
}
|
|
|
|
|
|
2022-05-22 16:49:24 +02:00
|
|
|
|
function pollTask(path: string): Promise<Response> {
|
|
|
|
|
return fetch(path, { method: 'GET' });
|
2022-05-21 14:42:15 +02:00
|
|
|
|
}
|
|
|
|
|
|
|
|
|
|
export default function ScreenshotGenerator({
|
|
|
|
|
visited_url,
|
|
|
|
|
clusters,
|
2022-05-22 16:49:24 +02:00
|
|
|
|
setReportWindowMode,
|
2022-05-21 14:42:15 +02:00
|
|
|
|
}: {
|
|
|
|
|
visited_url: string;
|
|
|
|
|
clusters: Record<string, RequestCluster>;
|
2022-05-22 16:49:24 +02:00
|
|
|
|
setReportWindowMode: Function;
|
2022-05-21 14:42:15 +02:00
|
|
|
|
}) {
|
2022-05-22 16:49:24 +02:00
|
|
|
|
const [mode, setMode] = React.useState<string>('idle');
|
|
|
|
|
const [images, setImages] = React.useState<string[]>([]);
|
|
|
|
|
const [taskId, setTaskId] = React.useState<string>(null);
|
|
|
|
|
|
|
|
|
|
async function subscribeTask(path: string): Promise<screenshotTask> {
|
|
|
|
|
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;
|
|
|
|
|
}
|
2022-05-21 14:42:15 +02:00
|
|
|
|
|
|
|
|
|
return (
|
|
|
|
|
<div className="generator-container">
|
2022-05-22 16:49:24 +02:00
|
|
|
|
{mode === 'idle' ? (
|
2022-05-21 14:42:15 +02:00
|
|
|
|
<Fragment>
|
|
|
|
|
<h1>Przygotowanie zrzutów ekranów</h1>
|
|
|
|
|
<p>
|
|
|
|
|
Dla potwierdzenia przechwyconych danych, warto załączyć zrzuty ekranów
|
2022-05-22 16:49:24 +02:00
|
|
|
|
narzędzi deweloperskich do maila dla administratora oraz Urzędu Ochrony
|
2022-05-21 14:42:15 +02:00
|
|
|
|
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
|
2022-05-22 16:49:24 +02:00
|
|
|
|
className="sv_prev_btn"
|
|
|
|
|
onClick={() => {
|
|
|
|
|
setReportWindowMode('preview');
|
|
|
|
|
}}
|
|
|
|
|
>
|
|
|
|
|
Pomiń
|
|
|
|
|
</button>
|
|
|
|
|
<button
|
|
|
|
|
className="sv_next_btn"
|
2022-05-21 14:42:15 +02:00
|
|
|
|
onClick={async () => {
|
2022-05-22 16:49:24 +02:00
|
|
|
|
setMode('in_progress');
|
2022-05-21 14:42:15 +02:00
|
|
|
|
const task = await createTask(visited_url, Object.keys(clusters));
|
2022-05-22 16:49:24 +02:00
|
|
|
|
const urlArr = task.url.split('/');
|
|
|
|
|
setTaskId(urlArr[urlArr.length - 1]);
|
|
|
|
|
const response = await subscribeTask(task.url);
|
|
|
|
|
setImages(response.files);
|
2022-05-21 14:42:15 +02:00
|
|
|
|
console.log('output', response);
|
|
|
|
|
}}
|
|
|
|
|
>
|
|
|
|
|
Wygeneruj
|
|
|
|
|
</button>
|
|
|
|
|
</Fragment>
|
2022-05-22 16:49:24 +02:00
|
|
|
|
) : null}
|
|
|
|
|
|
|
|
|
|
{mode === 'in_progress' || mode === 'finished' ? (
|
2022-05-21 14:42:15 +02:00
|
|
|
|
<Fragment>
|
|
|
|
|
<h1>Przygotowujemy zrzuty ekranów</h1>
|
|
|
|
|
|
2022-05-22 16:49:24 +02:00
|
|
|
|
<div className="images">
|
|
|
|
|
{images.map((filename: string) => {
|
|
|
|
|
return (
|
|
|
|
|
<div
|
|
|
|
|
className="browser browser--filled"
|
|
|
|
|
style={{
|
|
|
|
|
backgroundImage: `url(http://65.108.60.135:3000/static/${taskId}/${filename})`,
|
|
|
|
|
}}
|
|
|
|
|
>
|
|
|
|
|
<div className="browser__header">
|
|
|
|
|
<div className="browser__header--address-bar">
|
|
|
|
|
{filename}
|
|
|
|
|
</div>
|
|
|
|
|
<div className="browser__header--controls">· · ·</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div className="browser__content"></div>
|
|
|
|
|
</div>
|
|
|
|
|
);
|
|
|
|
|
})}
|
2022-05-21 14:42:15 +02:00
|
|
|
|
|
2022-05-22 16:49:24 +02:00
|
|
|
|
{mode === 'in_progress' ? (
|
|
|
|
|
<div className="browser">
|
|
|
|
|
<div className="browser__header">
|
|
|
|
|
<div className="browser__header--address-bar"></div>
|
|
|
|
|
<div className="browser__header--controls">· · ·</div>
|
|
|
|
|
</div>
|
|
|
|
|
<div className="browser__content"></div>
|
|
|
|
|
</div>
|
|
|
|
|
) : null}
|
|
|
|
|
</div>
|
|
|
|
|
{mode === 'finished' ? (
|
|
|
|
|
<button className="sv_next_btn">Pobierz zrzuty ekranów</button>
|
|
|
|
|
) : null}
|
2022-05-21 14:42:15 +02:00
|
|
|
|
</Fragment>
|
2022-05-22 16:49:24 +02:00
|
|
|
|
) : null}
|
2022-05-21 14:42:15 +02:00
|
|
|
|
</div>
|
|
|
|
|
);
|
|
|
|
|
}
|