Add list hosts before survey

This commit is contained in:
Arkadiusz Wieczorek 2022-04-27 18:32:54 +02:00
parent 7cf70b0b0c
commit 9f81fae747
4 changed files with 73 additions and 30 deletions

View File

@ -13,6 +13,10 @@ export class UnlawfulCookieAccess extends Problem {
static qualifies(answers: ParsedAnswers, clusters: RequestCluster[]): boolean { static qualifies(answers: ParsedAnswers, clusters: RequestCluster[]): boolean {
// są cookiesy, nie było zgody, nie są konieczne do działania strony // są cookiesy, nie było zgody, nie są konieczne do działania strony
const cookie_clusters = Object.values(clusters).filter((c) => c.hasMarkedCookies()); const cookie_clusters = Object.values(clusters).filter((c) => c.hasMarkedCookies());
console.log(answers, cookie_clusters, clusters);
// tutaj jest problem z answerami vs to co jest w clusters
return cookie_clusters.some((cluster) => { return cookie_clusters.some((cluster) => {
const hostAnswers = answers.hosts[cluster.id]; const hostAnswers = answers.hosts[cluster.id];
return ( return (

View File

@ -3,7 +3,7 @@
<head> <head>
<meta charset="utf-8" /> <meta charset="utf-8" />
<title>Treść maila do zgłoszenia</title> <title>Rentgen — Generowanie raportu</title>
<link <link
rel="stylesheet" rel="stylesheet"
href="/lib/styles/fonts.css" href="/lib/styles/fonts.css"

View File

@ -8,7 +8,14 @@ import Questions from './questions';
import EmailContent from './email-content'; import EmailContent from './email-content';
import { parseAnswers, ParsedAnswers } from './parse-answers'; import { parseAnswers, ParsedAnswers } from './parse-answers';
interface Host {
[name: string]: boolean;
}
function Report() { function Report() {
const [hosts, setHosts] = React.useState<Host>({});
const [surveyMode, setSurveyMode] = React.useState<boolean>(false);
try { try {
const url = new URL(document.location.toString()); const url = new URL(document.location.toString());
const origin = url.searchParams.get('origin'); const origin = url.searchParams.get('origin');
@ -18,21 +25,6 @@ function Report() {
); );
const [mode, setMode] = React.useState(url.searchParams.get('mode') || 'survey'); const [mode, setMode] = React.useState(url.searchParams.get('mode') || 'survey');
const clusters = getMemory().getClustersForOrigin(origin); const clusters = getMemory().getClustersForOrigin(origin);
/* const [entries, setEntries] = React.useState<StolenDataEntry[]>([]); */
/* React.useEffect(() => {
* setEntries(
* Object.values(clusters)
* .map((cluster) => {
* cluster.calculateRepresentativeStolenData();
* return cluster.representativeStolenData;
* })
* .reduce(reduceConcat, [])
* .filter((entry) => entry.isMarked)
* );
* }, []); */
/* if (entries.length == 0) {
* return <>Wczytywanie...</>;
* } */
React.useEffect(() => { React.useEffect(() => {
const url = new URL(document.location.toString()); const url = new URL(document.location.toString());
@ -40,7 +32,15 @@ function Report() {
url.searchParams.set('answers', JSON.stringify(answers)); url.searchParams.set('answers', JSON.stringify(answers));
url.searchParams.set('mode', mode); url.searchParams.set('mode', mode);
history.pushState({}, 'Rentgen', url.toString()); history.pushState({}, 'Rentgen', url.toString());
setHosts(
Object.fromEntries(
Object.values(clusters)
.filter((cluster) => cluster.getMarkedRequests().length > 0)
.map((cluster) => [cluster.id, true])
)
);
}, [mode, answers, origin]); }, [mode, answers, origin]);
const visited_url = Object.values(clusters) const visited_url = Object.values(clusters)
.find((cluster) => cluster.getMarkedRequests().length > 0) .find((cluster) => cluster.getMarkedRequests().length > 0)
?.getMarkedRequests()[0].originalURL; ?.getMarkedRequests()[0].originalURL;
@ -49,9 +49,12 @@ function Report() {
<div {...{ 'data-version': counter }}> <div {...{ 'data-version': counter }}>
{mode === 'survey' ? ( {mode === 'survey' ? (
<Questions <Questions
hosts={Object.values(clusters) // hosts={Object.values(clusters)
.filter((cluster) => cluster.getMarkedRequests().length > 0) // .filter((cluster) => cluster.getMarkedRequests().length > 0)
.map((cluster) => cluster.id)} // .map((cluster) => cluster.id)}
hosts={Object.entries(hosts)
.filter((host) => host[1])
.map((host) => host[0])}
onComplete={(answers) => { onComplete={(answers) => {
setAnswers(parseAnswers(answers)); setAnswers(parseAnswers(answers));
setMode('preview'); setMode('preview');
@ -64,23 +67,58 @@ function Report() {
{/* <HARConverter {...{ entries }} /> */} {/* <HARConverter {...{ entries }} /> */}
</div> </div>
); );
function markHost(name: string) {
const clone_hosts = Object.assign({}, hosts);
clone_hosts[name] = !clone_hosts[name];
setHosts(clone_hosts);
console.log(hosts);
}
return ( return (
<Fragment> <div>
<header className="header"> <header className="header">
<img src="../../assets/icon-addon.svg" height={32}></img> <img src="../../assets/icon-addon.svg" height={32}></img>
<div className="webpage-metadata"> <div className="webpage-metadata">
{origin ? ( <span>Generowanie raportu </span>
<> <span className="webpage-metadata--hyperlink">{origin}</span>
<span>Generowanie raportu </span>
<span className="webpage-metadata--hyperlink">{origin}</span>
</>
) : (
<span>Przejdź do wybranej strony internetowej</span>
)}
</div> </div>
</header> </header>
<section>{result}</section> {surveyMode ? (
</Fragment> <section>{result}</section>
) : (
<section>
Wybór hostów
<ul>
{
// Object.values(clusters)
// .filter((cluster) => cluster.getMarkedRequests().length > 0)
// .map((cluster) => cluster.id)
Object.keys(hosts).map((host) => {
return (
<li key={host}>
<label htmlFor={host} onClick={() => markHost(host)}>
<input
name={host}
type="checkbox"
// onChange={() => markHost(host)}
readOnly={true}
checked={hosts[host]}
></input>
{host}
</label>
</li>
);
})
}
{/* */}
</ul>
<button onClick={() => setSurveyMode(true)}>Zatwierdź</button>
</section>
)}
</div>
); );
} catch (e) { } catch (e) {
console.error(e); console.error(e);

View File

@ -2,6 +2,7 @@
<html> <html>
<head> <head>
<title>Rentgen — Widok szczegółowy</title>
<meta charset="utf-8" /> <meta charset="utf-8" />
<link <link
rel="stylesheet" rel="stylesheet"