Add checkboxes for domains
This commit is contained in:
Arkadiusz Wieczorek
parent
1dd756f1fa
commit
1961d072bf
@ -83,9 +83,7 @@
|
||||
}
|
||||
}
|
||||
|
||||
.warning-container {
|
||||
background-color: $pale-yellow;
|
||||
border-left: 4px solid $contrast-yellow;
|
||||
.dialog-container {
|
||||
margin-top: 0.5rem;
|
||||
font-size: 0.875rem;
|
||||
display: grid;
|
||||
@ -107,8 +105,17 @@
|
||||
display: flex;
|
||||
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 {
|
||||
border: 0;
|
||||
@ -119,14 +126,14 @@
|
||||
height: 2.5rem;
|
||||
cursor: pointer;
|
||||
background-color: #000 !important;
|
||||
|
||||
|
||||
&--report {
|
||||
font-weight: 800;
|
||||
padding: 0 1.5rem;
|
||||
margin-left: 0.5rem;
|
||||
background-color: #000;
|
||||
color: #fff;
|
||||
|
||||
|
||||
&:hover {
|
||||
color: $icd-rentgen-color;
|
||||
background-image: linear-gradient(
|
||||
|
||||
@ -30,6 +30,13 @@ const Sidebar = () => {
|
||||
const [cookiesOrOriginOnly, setCookiesOrOriginOnly] = React.useState<boolean>(false);
|
||||
const [eventCounts, setEventCounts] = useEmitter(getMemory());
|
||||
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>(
|
||||
localStorage.getItem('warningDataDialogAck') === null
|
||||
? true
|
||||
@ -165,12 +172,32 @@ const Sidebar = () => {
|
||||
<section>
|
||||
{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 ? (
|
||||
<section className="warning-container">
|
||||
<section className="dialog-container dialog-container--warning">
|
||||
<span>
|
||||
<strong>Uwaga!</strong> Niekoniecznie każda przechwycona poniżej
|
||||
informacja jest daną osobową. Niektóre z podanych domen mogą
|
||||
należeć do właściciela strony i nie reprezentować podmiotów
|
||||
informacja jest daną osobową. Niektóre z podanych domen mogą
|
||||
należeć do właściciela strony i nie reprezentować podmiotów
|
||||
trzecich.
|
||||
</span>
|
||||
<button
|
||||
|
||||
@ -7,11 +7,16 @@
|
||||
flex-flow: column;
|
||||
border-bottom: none;
|
||||
|
||||
.domain-checkbox {
|
||||
margin-right: 0.5rem;
|
||||
width: 0.875rem;
|
||||
}
|
||||
|
||||
.domain {
|
||||
color: $ultra-black-color;
|
||||
font-size: 0.875rem;
|
||||
font-weight: 600;
|
||||
text-decoration: none;
|
||||
text-decoration: underline;
|
||||
}
|
||||
|
||||
.subdomains-container {
|
||||
|
||||
@ -39,6 +39,21 @@ function StolenDataRow({ entry }: { entry: StolenDataEntry }) {
|
||||
data-version={version}
|
||||
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>
|
||||
<td className="icons">
|
||||
{entry.source === 'cookie' ? (
|
||||
@ -107,15 +122,30 @@ export default function StolenDataCluster({
|
||||
}) {
|
||||
const cluster = getMemory().getClustersForOrigin(origin)[shorthost];
|
||||
const fullHosts = cluster.getFullHosts();
|
||||
const [version] = useEmitter(cluster);
|
||||
|
||||
/* console.log('Stolen data cluster!', shorthost, refreshToken); */
|
||||
|
||||
console.log(cluster.getMarkedEntries());
|
||||
|
||||
return (
|
||||
<div className="stolen-data-cluster-container">
|
||||
<header className="domains-container">
|
||||
<a className="domain" href={'https://' + cluster.id}>
|
||||
{cluster.id}
|
||||
</a>
|
||||
<div>
|
||||
<input
|
||||
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">
|
||||
{fullHosts.map((host, index) => (
|
||||
<a className="subdomain" key={host} href={`https://${host}`}>
|
||||
|
||||
@ -136,21 +136,12 @@ body {
|
||||
line-height: 0.875rem;
|
||||
cursor: pointer;
|
||||
|
||||
&--details {
|
||||
margin-right: 0.5rem;
|
||||
color: #000;
|
||||
text-decoration:underline;
|
||||
background-color: #fff;
|
||||
font-weight: 700;
|
||||
}
|
||||
|
||||
&--report {
|
||||
font-weight: 800;
|
||||
padding: 0 1.5rem;
|
||||
margin-left: 0.5rem;
|
||||
background-color: #000;
|
||||
color: #fff;
|
||||
|
||||
|
||||
&:hover {
|
||||
color: $icd-rentgen-color;
|
||||
background-image: linear-gradient(
|
||||
|
||||
@ -214,24 +214,6 @@ const Toolbar = () => {
|
||||
</p>
|
||||
</section>
|
||||
<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
|
||||
className="button button--report"
|
||||
onClick={() => {
|
||||
@ -242,7 +224,7 @@ const Toolbar = () => {
|
||||
].join(',');
|
||||
autoMark();
|
||||
window.open(
|
||||
`/components/report-window/report-window.html?origin=${origin}`,
|
||||
`/components/sidebar/sidebar.html?origin=${origin}`,
|
||||
'new_window',
|
||||
params
|
||||
);
|
||||
|
||||
@ -174,4 +174,11 @@ export class RequestCluster extends EventEmitter {
|
||||
entry.autoMark();
|
||||
});
|
||||
}
|
||||
|
||||
undoMark() {
|
||||
this.calculateRepresentativeStolenData();
|
||||
this.representativeStolenData.forEach((entry) => {
|
||||
entry.unmark();
|
||||
});
|
||||
}
|
||||
}
|
||||
|
||||
@ -6,10 +6,11 @@ $ultra-light-grey: #ededed;
|
||||
$blue: #0048d9;
|
||||
$icd-yellow: #ffee2c;
|
||||
$icd-rentgen-color: #99ffdd;
|
||||
$contrast-icd-rentgen-color: #33f9b7;
|
||||
$highlight-color: #ccffee;
|
||||
$row-color: hsl(160, 100%, 94%);
|
||||
$pale-yellow: #fff8e5;
|
||||
$pale-red: hsl(10.8, 100%, 94.9%);
|
||||
$contrast-yellow: #ffb900;
|
||||
$contrast-red: #ff726b;
|
||||
$dark-red: hsl(2.8, 100%, 34%);
|
||||
$dark-red: hsl(2.8, 100%, 34%);
|
||||
|
||||
Loading…
Reference in New Issue
Block a user