Add checkboxes for domains

This commit is contained in:
Arkadiusz Wieczorek 2022-05-02 13:46:53 +02:00
parent 1dd756f1fa
commit 1961d072bf
8 changed files with 93 additions and 43 deletions

View File

@ -83,9 +83,7 @@
} }
} }
.warning-container { .dialog-container {
background-color: $pale-yellow;
border-left: 4px solid $contrast-yellow;
margin-top: 0.5rem; margin-top: 0.5rem;
font-size: 0.875rem; font-size: 0.875rem;
display: grid; display: grid;
@ -107,8 +105,17 @@
display: flex; display: flex;
align-self: flex-start; align-self: flex-start;
} }
}
&--info {
background-color: $row-color;
border-left: 4px solid $contrast-icd-rentgen-color;
}
&--warning {
background-color: $pale-yellow;
border-left: 4px solid $contrast-yellow;
}
}
.button { .button {
border: 0; border: 0;
@ -119,14 +126,14 @@
height: 2.5rem; height: 2.5rem;
cursor: pointer; cursor: pointer;
background-color: #000 !important; background-color: #000 !important;
&--report { &--report {
font-weight: 800; font-weight: 800;
padding: 0 1.5rem; padding: 0 1.5rem;
margin-left: 0.5rem; margin-left: 0.5rem;
background-color: #000; background-color: #000;
color: #fff; color: #fff;
&:hover { &:hover {
color: $icd-rentgen-color; color: $icd-rentgen-color;
background-image: linear-gradient( background-image: linear-gradient(

View File

@ -30,6 +30,13 @@ const Sidebar = () => {
const [cookiesOrOriginOnly, setCookiesOrOriginOnly] = React.useState<boolean>(false); const [cookiesOrOriginOnly, setCookiesOrOriginOnly] = React.useState<boolean>(false);
const [eventCounts, setEventCounts] = useEmitter(getMemory()); const [eventCounts, setEventCounts] = useEmitter(getMemory());
const [marksOccurrence, setMarksOccurrence] = React.useState<boolean>(false); const [marksOccurrence, setMarksOccurrence] = React.useState<boolean>(false);
const [infoDataDialogAck, setInfoDataDialogAck] = React.useState<boolean>(
localStorage.getItem('infoDataDialogAck') === null
? true
: localStorage.getItem('infoDataDialogAck') == 'true'
? true
: false
);
const [warningDataDialogAck, setWarningDataDialogAck] = React.useState<boolean>( const [warningDataDialogAck, setWarningDataDialogAck] = React.useState<boolean>(
localStorage.getItem('warningDataDialogAck') === null localStorage.getItem('warningDataDialogAck') === null
? true ? true
@ -165,12 +172,32 @@ const Sidebar = () => {
<section> <section>
{stolenDataView ? ( {stolenDataView ? (
<> <>
{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.
</span>
<button
onClick={() => {
setInfoDataDialogAck(false);
localStorage.setItem(
'infoDataDialogAck',
false as unknown as string
);
}}
>
<img src="/assets/icons/close_big.svg" width="16" height="16" />
</button>
</section>
) : null}
{warningDataDialogAck ? ( {warningDataDialogAck ? (
<section className="warning-container"> <section className="dialog-container dialog-container--warning">
<span> <span>
<strong>Uwaga!</strong> Niekoniecznie każda przechwycona poniżej <strong>Uwaga!</strong> Niekoniecznie każda przechwycona poniżej
informacja jest daną osobową. Niektóre z podanych domen mogą informacja jest daną osobową. Niektóre z podanych domen mogą
należeć do właściciela strony i nie reprezentować podmiotów należeć do właściciela strony i nie reprezentować podmiotów
trzecich. trzecich.
</span> </span>
<button <button

View File

@ -7,11 +7,16 @@
flex-flow: column; flex-flow: column;
border-bottom: none; border-bottom: none;
.domain-checkbox {
margin-right: 0.5rem;
width: 0.875rem;
}
.domain { .domain {
color: $ultra-black-color; color: $ultra-black-color;
font-size: 0.875rem; font-size: 0.875rem;
font-weight: 600; font-weight: 600;
text-decoration: none; text-decoration: underline;
} }
.subdomains-container { .subdomains-container {

View File

@ -39,6 +39,21 @@ function StolenDataRow({ entry }: { entry: StolenDataEntry }) {
data-version={version} data-version={version}
className={`${entry.isMarked ? 'toggled' : 'untoggled'}`} className={`${entry.isMarked ? 'toggled' : 'untoggled'}`}
> >
<td className="checkbox">
<input
type="checkbox"
checked={entry.isMarked}
onChange={() => {
entry.toggleMark();
getMemory().emit(
'change',
false,
entry.request.shorthost,
'clicked checkbox'
);
}}
/>
</td>
<th title={`Nazwa: ${entry.name}\nŹródło: ${entry.source}`}>{entry.name}</th> <th title={`Nazwa: ${entry.name}\nŹródło: ${entry.source}`}>{entry.name}</th>
<td className="icons"> <td className="icons">
{entry.source === 'cookie' ? ( {entry.source === 'cookie' ? (
@ -107,15 +122,30 @@ export default function StolenDataCluster({
}) { }) {
const cluster = getMemory().getClustersForOrigin(origin)[shorthost]; const cluster = getMemory().getClustersForOrigin(origin)[shorthost];
const fullHosts = cluster.getFullHosts(); const fullHosts = cluster.getFullHosts();
const [version] = useEmitter(cluster);
/* console.log('Stolen data cluster!', shorthost, refreshToken); */ /* console.log('Stolen data cluster!', shorthost, refreshToken); */
console.log(cluster.getMarkedEntries());
return ( return (
<div className="stolen-data-cluster-container"> <div className="stolen-data-cluster-container">
<header className="domains-container"> <header className="domains-container">
<a className="domain" href={'https://' + cluster.id}> <div>
{cluster.id} <input
</a> type="checkbox"
className="domain-checkbox"
data-version={version}
checked={cluster.hasMarks()}
onChange={() => {
cluster.hasMarks() ? cluster.undoMark() : cluster.autoMark();
getMemory().emit('change', true, cluster.id, 'clicked checkbox');
}}
/>
<a className="domain" href={'https://' + cluster.id}>
{cluster.id}
</a>
</div>
<div className="subdomains-container"> <div className="subdomains-container">
{fullHosts.map((host, index) => ( {fullHosts.map((host, index) => (
<a className="subdomain" key={host} href={`https://${host}`}> <a className="subdomain" key={host} href={`https://${host}`}>

View File

@ -136,21 +136,12 @@ body {
line-height: 0.875rem; line-height: 0.875rem;
cursor: pointer; cursor: pointer;
&--details {
margin-right: 0.5rem;
color: #000;
text-decoration:underline;
background-color: #fff;
font-weight: 700;
}
&--report { &--report {
font-weight: 800; font-weight: 800;
padding: 0 1.5rem; padding: 0 1.5rem;
margin-left: 0.5rem;
background-color: #000; background-color: #000;
color: #fff; color: #fff;
&:hover { &:hover {
color: $icd-rentgen-color; color: $icd-rentgen-color;
background-image: linear-gradient( background-image: linear-gradient(

View File

@ -214,24 +214,6 @@ const Toolbar = () => {
</p> </p>
</section> </section>
<section className="actions"> <section className="actions">
<button
className="button button--details"
onClick={() => {
const params = [
'height=' + screen.height,
'width=' + screen.width,
'fullscreen=yes',
].join(',');
autoMark();
window.open(
`/components/sidebar/sidebar.html?origin=${origin}`,
'new_window',
params
);
}}
>
Pokaż szczegóły
</button>
<button <button
className="button button--report" className="button button--report"
onClick={() => { onClick={() => {
@ -242,7 +224,7 @@ const Toolbar = () => {
].join(','); ].join(',');
autoMark(); autoMark();
window.open( window.open(
`/components/report-window/report-window.html?origin=${origin}`, `/components/sidebar/sidebar.html?origin=${origin}`,
'new_window', 'new_window',
params params
); );

View File

@ -174,4 +174,11 @@ export class RequestCluster extends EventEmitter {
entry.autoMark(); entry.autoMark();
}); });
} }
undoMark() {
this.calculateRepresentativeStolenData();
this.representativeStolenData.forEach((entry) => {
entry.unmark();
});
}
} }

View File

@ -6,10 +6,11 @@ $ultra-light-grey: #ededed;
$blue: #0048d9; $blue: #0048d9;
$icd-yellow: #ffee2c; $icd-yellow: #ffee2c;
$icd-rentgen-color: #99ffdd; $icd-rentgen-color: #99ffdd;
$contrast-icd-rentgen-color: #33f9b7;
$highlight-color: #ccffee; $highlight-color: #ccffee;
$row-color: hsl(160, 100%, 94%); $row-color: hsl(160, 100%, 94%);
$pale-yellow: #fff8e5; $pale-yellow: #fff8e5;
$pale-red: hsl(10.8, 100%, 94.9%); $pale-red: hsl(10.8, 100%, 94.9%);
$contrast-yellow: #ffb900; $contrast-yellow: #ffb900;
$contrast-red: #ff726b; $contrast-red: #ff726b;
$dark-red: hsl(2.8, 100%, 34%); $dark-red: hsl(2.8, 100%, 34%);