rentgen/components/report-window/screenshot-generator.tsx

200 lines
8.0 KiB
TypeScript
Raw Normal View History

2022-05-21 14:42:15 +02:00
import React, { Fragment } from 'react';
import { RequestCluster } from '../../request-cluster';
import './screenshot-generator.scss';
2022-06-17 11:47:51 +02:00
const SS_URL = 'http://65.108.60.135:3000';
2022-05-22 16:49:24 +02:00
enum taskState {
WAITING = 'waiting',
RUNNING = 'running',
FINISHED = 'finished',
}
2022-06-17 11:47:51 +02:00
type Screenshot = {
url: string;
domain: string;
found_headers: string[];
};
2022-05-22 16:49:24 +02:00
interface screenshotTask {
url: string;
domains: string[];
id: string;
status: taskState;
output: string;
2022-06-17 11:47:51 +02:00
images: Screenshot[];
2022-05-22 16:49:24 +02:00
}
2022-05-21 14:42:15 +02:00
function createTaskEndpoint(visited_url: string, domains: string[]) {
2022-06-17 11:47:51 +02:00
return `${SS_URL}/api/requests?url=${visited_url}${domains.reduce(
2022-05-21 14:42:15 +02:00
(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');
2022-06-17 11:47:51 +02:00
const [images, setImages] = React.useState<Screenshot[]>([]);
2022-05-22 16:49:24 +02:00
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();
2022-06-17 11:47:51 +02:00
setImages((response as screenshotTask)?.images);
document.querySelector('.images').scrollTo({
top: document.querySelector('.images').scrollHeight,
behavior: 'smooth',
});
2022-05-22 16:49:24 +02:00
}
if (response.status === taskState.FINISHED) {
setMode('finished');
}
return response as screenshotTask;
}
2022-05-21 14:42:15 +02:00
2022-05-22 17:29:10 +02:00
function downloadFiles() {
2022-06-17 11:47:51 +02:00
const urls = images.map((el) => `${SS_URL}${el}`);
2022-05-22 17:29:10 +02:00
for (const url of urls) {
let a = document.createElement('a');
a.setAttribute('href', url);
a.setAttribute('download', '');
a.setAttribute('target', '_blank');
a.click();
}
setReportWindowMode('preview');
}
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>
2022-05-22 18:16:14 +02:00
<div className="container">
<h2>Notka informacyjna</h2>
<p>
Dla potwierdzenia przechwyconych danych, warto załączyć zrzuty ekranów
narzędzi deweloperskich do maila dla administratora oraz Urzędu 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>
</div>
2022-05-21 14:42:15 +02:00
2022-05-22 18:16:14 +02:00
<div className="buttons-container">
<button
className="sv_prev_btn"
onClick={() => {
setReportWindowMode('preview');
}}
>
Pomiń
</button>
<button
className="sv_next_btn"
onClick={async () => {
setMode('in_progress');
const task = await createTask(visited_url, Object.keys(clusters));
const urlArr = task.url.split('/');
setTaskId(urlArr[urlArr.length - 1]);
const response = await subscribeTask(task.url);
2022-06-17 11:47:51 +02:00
setImages(response.images);
console.log('response.images', response.images);
2022-05-22 18:16:14 +02:00
console.log('output', response);
}}
>
Wygeneruj
</button>
</div>
2022-05-21 14:42:15 +02:00
</Fragment>
2022-05-22 16:49:24 +02:00
) : null}
{mode === 'in_progress' || mode === 'finished' ? (
2022-05-21 14:42:15 +02:00
<Fragment>
2022-07-03 19:35:36 +02:00
<h1>Przygotowanie zrzutów ekranów</h1>
2022-05-22 18:16:14 +02:00
<div className="container">
2022-07-03 19:35:36 +02:00
{mode === 'in_progress' ? (
<Fragment>
<h2>To może chwilkę zająć...</h2>
<p>
Nasz serwer właśnie odwiedza wskazaną przez Ciebie stronę
i przygotowuje zrzuty ekranów narzędzi deweloperskich.
</p>
</Fragment>
) : null}
{mode === 'finished' ? (
<Fragment>
<h2>Gotowe!</h2>
<p>Zrzuty ekranów narzędzi deweloperskich gotowe do pobrania.</p>
</Fragment>
) : null}
2022-05-21 14:42:15 +02:00
2022-05-22 18:16:14 +02:00
<div className="images">
2022-06-17 11:47:51 +02:00
{images.map((screenshot) => {
2022-05-22 18:16:14 +02:00
return (
<div
2022-06-17 11:47:51 +02:00
key={`${taskId}_${screenshot.url}`}
2022-05-22 18:16:14 +02:00
className="browser browser--filled"
style={{
2022-06-17 11:47:51 +02:00
backgroundImage: `url(${SS_URL}${screenshot.url})`,
2022-05-22 18:16:14 +02:00
}}
>
<div className="browser__header">
<div className="browser__header--address-bar">
{screenshot.url.split('-').slice(-2).join('-')}
2022-05-22 18:16:14 +02:00
</div>
<div className="browser__header--controls">···</div>
2022-05-22 16:49:24 +02:00
</div>
2022-05-22 18:16:14 +02:00
<div className="browser__content"></div>
</div>
);
})}
{mode === 'in_progress' ? (
<div className="browser">
<div className="browser__header">
<div className="browser__header--address-bar"></div>
2022-05-22 16:49:24 +02:00
<div className="browser__header--controls">···</div>
</div>
<div className="browser__content"></div>
</div>
2022-05-22 18:16:14 +02:00
) : null}
</div>
</div>
<div className="buttons-container">
{mode === 'finished' ? (
2022-07-03 19:35:36 +02:00
<Fragment>
<button className="sv_next_btn" onClick={() => downloadFiles()}>
Pobierz zrzuty ekranów i przejdź dalej
</button>
</Fragment>
2022-05-22 16:49:24 +02:00
) : null}
</div>
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>
);
}