import React, { Fragment } from 'react'; import { RequestCluster } from '../../request-cluster'; import './screenshot-generator.scss'; const SS_URL = 'http://65.108.60.135:3000'; enum taskState { WAITING = 'waiting', RUNNING = 'running', FINISHED = 'finished', } type Screenshot = { url: string; domain: string; found_headers: string[]; }; interface screenshotTask { url: string; domains: string[]; id: string; status: taskState; output: string; images: Screenshot[]; } function createTaskEndpoint(visited_url: string, domains: string[]) { return `${SS_URL}/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' }); } function pollTask(path: string): Promise { return fetch(path, { method: 'GET' }); } export default function ScreenshotGenerator({ visited_url, clusters, setReportWindowMode, }: { visited_url: string; clusters: Record; setReportWindowMode: Function; }) { const [mode, setMode] = React.useState('idle'); const [images, setImages] = React.useState([]); const [taskId, setTaskId] = React.useState(null); async function subscribeTask(path: string): Promise { 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)?.images); document.querySelector('.images').scrollTo({ top: document.querySelector('.images').scrollHeight, behavior: 'smooth', }); } if (response.status === taskState.FINISHED) { setMode('finished'); } return response as screenshotTask; } function downloadFiles() { const urls = images.map((el) => `${SS_URL}${el}`); 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'); } return (
{mode === 'idle' ? (

Przygotowanie zrzutów ekranów

Notka informacyjna

Dla potwierdzenia przechwyconych danych, warto załączyć zrzuty ekranów narzędzi deweloperskich do maila dla administratora oraz Urzędu Ochrony Danych Osobowych.

Jeżeli nie wiesz jak wykonać zrzuty ekranów, skorzystaj z{' '} naszej instrukcji lub wtyczka Rentgen może wygenerować je za Ciebie.

) : null} {mode === 'in_progress' || mode === 'finished' ? (

Przygotowanie zrzutów ekranów

{mode === 'in_progress' ? (

To może chwilkę zająć...

Nasz serwer właśnie odwiedza wskazaną przez Ciebie stronę i przygotowuje zrzuty ekranów narzędzi deweloperskich.

) : null} {mode === 'finished' ? (

Gotowe!

Zrzuty ekranów narzędzi deweloperskich są gotowe do pobrania.

) : null}
{images.map((screenshot) => { return (
{screenshot.url.split('-').slice(-2).join('-')}
· · ·
); })} {mode === 'in_progress' ? (
· · ·
) : null}
{mode === 'finished' ? ( ) : null}
) : null}
); }