Add surveyjs

This commit is contained in:
Kuba Orlik 2022-02-03 22:20:07 +01:00
parent 3736d7332f
commit d9cacab0a7
7 changed files with 188 additions and 83 deletions

27
package-lock.json generated
View File

@ -14,6 +14,8 @@
"events": "^3.3.0", "events": "^3.3.0",
"react": "^17.0.2", "react": "^17.0.2",
"react-dom": "^17.0.2", "react-dom": "^17.0.2",
"survey-core": "^1.9.8",
"survey-react": "^1.9.8",
"tai-password-strength": "^1.1.3" "tai-password-strength": "^1.1.3"
}, },
"devDependencies": { "devDependencies": {
@ -6421,6 +6423,20 @@
"node": ">=8" "node": ">=8"
} }
}, },
"node_modules/survey-core": {
"version": "1.9.8",
"resolved": "https://registry.npmjs.org/survey-core/-/survey-core-1.9.8.tgz",
"integrity": "sha512-NniKOrmlKM7nGDuM0xvwDSDK5MiVdZr7IHySqWuPWJ1YcFAPy4FqXq920wkAwfqEuKFBh16IUwzat73/nfmuRg=="
},
"node_modules/survey-react": {
"version": "1.9.8",
"resolved": "https://registry.npmjs.org/survey-react/-/survey-react-1.9.8.tgz",
"integrity": "sha512-Mcq5mRDLXORjZOHaybeYyuy/wlf3P4Z97GXdLk94NObVpo4u5iovCdmLAaqD7xsO5L89T+CkHBT7MhPV50NfpA==",
"peerDependencies": {
"react": "^16.5.0 || ^17.0.1",
"react-dom": "^16.5.0 || ^17.0.1"
}
},
"node_modules/tai-password-strength": { "node_modules/tai-password-strength": {
"version": "1.1.3", "version": "1.1.3",
"resolved": "https://registry.npmjs.org/tai-password-strength/-/tai-password-strength-1.1.3.tgz", "resolved": "https://registry.npmjs.org/tai-password-strength/-/tai-password-strength-1.1.3.tgz",
@ -12470,6 +12486,17 @@
"has-flag": "^4.0.0" "has-flag": "^4.0.0"
} }
}, },
"survey-core": {
"version": "1.9.8",
"resolved": "https://registry.npmjs.org/survey-core/-/survey-core-1.9.8.tgz",
"integrity": "sha512-NniKOrmlKM7nGDuM0xvwDSDK5MiVdZr7IHySqWuPWJ1YcFAPy4FqXq920wkAwfqEuKFBh16IUwzat73/nfmuRg=="
},
"survey-react": {
"version": "1.9.8",
"resolved": "https://registry.npmjs.org/survey-react/-/survey-react-1.9.8.tgz",
"integrity": "sha512-Mcq5mRDLXORjZOHaybeYyuy/wlf3P4Z97GXdLk94NObVpo4u5iovCdmLAaqD7xsO5L89T+CkHBT7MhPV50NfpA==",
"requires": {}
},
"tai-password-strength": { "tai-password-strength": {
"version": "1.1.3", "version": "1.1.3",
"resolved": "https://registry.npmjs.org/tai-password-strength/-/tai-password-strength-1.1.3.tgz", "resolved": "https://registry.npmjs.org/tai-password-strength/-/tai-password-strength-1.1.3.tgz",

View File

@ -24,6 +24,8 @@
"events": "^3.3.0", "events": "^3.3.0",
"react": "^17.0.2", "react": "^17.0.2",
"react-dom": "^17.0.2", "react-dom": "^17.0.2",
"survey-core": "^1.9.8",
"survey-react": "^1.9.8",
"tai-password-strength": "^1.1.3" "tai-password-strength": "^1.1.3"
}, },
"keywords": [ "keywords": [

View File

@ -0,0 +1,69 @@
import { Classifications, StolenDataEntry } from '../stolen-data-entry';
export function DataPreview({
entries,
refresh,
}: {
entries: StolenDataEntry[];
refresh: () => void;
}) {
// currently not used, maybe scraped entirely in the future
return (
<table>
<thead>
<tr>
<th>Adres docelowy</th>
<th>Źródło danych</th>
<th>Treść danych</th>
<th>Klasyfikacja</th>
</tr>
</thead>
<tbody>
{entries.map((entry) => (
<tr
key={entry.id}
style={{
backgroundColor: entry.classification == 'id' ? 'yellow' : 'white',
}}
>
<td>{entry.request.shorthost}</td>
<td style={{ overflowWrap: 'anywhere' }}>
{entry.source}:{entry.name}
</td>
<td
style={{
width: '400px',
overflowWrap: 'anywhere',
backgroundColor: entry.isRelatedToID() ? '#ffff0054' : 'white',
}}
>
{entry.getValuePreview()}
{/* always gonna have
one key, because unwrapEntry is called above */}
</td>
<td>
<select
value={entry.classification}
onChange={(e) => {
entry.classification = e.target
.value as keyof typeof Classifications;
refresh();
}}
>
{[
['history', 'Historia przeglądania'],
['id', 'Identyfikator internetowy'],
['location', 'Lokalizacja'],
].map(([key, name]) => (
<option key={key} value={key}>
{name}
</option>
))}
</select>
</td>
</tr>
))}
</tbody>
</table>
);
}

View File

@ -1,10 +1,82 @@
import React from 'react'; import React from 'react';
import * as Survey from 'survey-react';
import { toBase64 } from '../util'; import { toBase64 } from '../util';
import ConsentProblems from './consent-problems';
import emailHostSettings from './email-host-settings'; import emailHostSettings from './email-host-settings';
import { EmailTemplate3Config } from './email-template-3'; import { EmailTemplate3Config } from './email-template-3';
export default function EmailTemplate3Controls({ var json = {
showQuestionNumbers: 'off',
elements: [
{
type: 'radiogroup',
name: 'haveKids',
title: 'Do you have a kid(s)?',
isRequired: true,
choices: ['Yes', 'No'],
colCount: 0,
},
{
type: 'dropdown',
name: 'kids',
title: 'How many kids do you have',
visibleIf: "{haveKids}='Yes'",
isRequired: true,
choices: [1, 2, 3, 4, 5],
},
{
type: 'dropdown',
name: 'kid1Age',
title: 'The first kid age:',
visibleIf: "{haveKids}='Yes' and {kids} >= 1",
isRequired: true,
choicesMax: 18,
},
{
type: 'dropdown',
name: 'kid2Age',
title: 'The second kid age:',
visibleIf: "{haveKids}='Yes' and {kids} >= 2",
isRequired: true,
startWithNewLine: false,
choicesMax: 18,
},
{
type: 'dropdown',
name: 'kid3Age',
title: 'The third kid age:',
visibleIf: "{haveKids}='Yes' and {kids} >= 3",
isRequired: true,
startWithNewLine: false,
choicesMax: 18,
},
{
type: 'dropdown',
name: 'kid4Age',
title: 'The fourth kid age:',
visibleIf: "{haveKids}='Yes' and {kids} >= 4",
isRequired: true,
startWithNewLine: false,
choicesMax: 18,
},
{
type: 'dropdown',
name: 'kid5Age',
title: 'The fifth kid age:',
visibleIf: "{haveKids}='Yes' and {kids} >= 5",
isRequired: true,
startWithNewLine: false,
choicesMax: 18,
},
],
};
const survey = new Survey.Model(json);
export default function EmailTemplate3Controls() {
return <Survey.Survey model={survey} />;
}
export function _EmailTemplate3Controls({
config, config,
setConfig, setConfig,
}: { }: {

View File

@ -1,13 +1,11 @@
<!DOCTYPE html> <!DOCTYPE html>
<html> <html>
<head> <head>
<meta charset="utf-8" /> <meta charset="utf-8" />
<title>Treść maila do zgłoszenia</title> <title>Treść maila do zgłoszenia</title>
<link <link rel="stylesheet" href="/lib/report-window/report-window.css" />
rel="stylesheet" <link rel="stylesheet" href="/node_modules/survey-react/survey.css" />
href="/lib/report-window/report-window.css" <link rel="stylesheet" href="/node_modules/survey-react/modern.css" />
>
</head> </head>
<body> <body>
@ -16,5 +14,4 @@
<script src="/node_modules/react-dom/umd/react-dom.development.js"></script> <script src="/node_modules/react-dom/umd/react-dom.development.js"></script>
<script src="/lib/report-window/report-window.js"></script> <script src="/lib/report-window/report-window.js"></script>
</body> </body>
</html> </html>

View File

@ -1,75 +1,12 @@
import React from 'react'; import React from 'react';
import ReactDOM from 'react-dom'; import ReactDOM from 'react-dom';
import { getMemory } from '../memory'; import { getMemory } from '../memory';
import { Classifications, StolenDataEntry } from '../stolen-data-entry'; import { StolenDataEntry } from '../stolen-data-entry';
import { reduceConcat, useEmitter } from '../util'; import { reduceConcat, useEmitter } from '../util';
import EmailTemplate from './email-template'; import EmailTemplate from './email-template';
import HARConverter from './har-converter';
import './report-window.scss'; import './report-window.scss';
function DataPreview({ entries, refresh }: { entries: StolenDataEntry[]; refresh: () => void }) {
// currently not used, maybe scraped entirely in the future
return (
<table>
<thead>
<tr>
<th>Adres docelowy</th>
<th>Źródło danych</th>
<th>Treść danych</th>
<th>Klasyfikacja</th>
</tr>
</thead>
<tbody>
{entries.map((entry) => (
<tr
key={entry.id}
style={{
backgroundColor: entry.classification == 'id' ? 'yellow' : 'white',
}}
>
<td>{entry.request.shorthost}</td>
<td style={{ overflowWrap: 'anywhere' }}>
{entry.source}:{entry.name}
</td>
<td
style={{
width: '400px',
overflowWrap: 'anywhere',
backgroundColor: entry.isRelatedToID() ? '#ffff0054' : 'white',
}}
>
{entry.getValuePreview()}
{/* always gonna have
one key, because unwrapEntry is called above */}
</td>
<td>
<select
value={entry.classification}
onChange={(e) => {
entry.classification = e.target
.value as keyof typeof Classifications;
refresh();
}}
>
{[
['history', 'Historia przeglądania'],
['id', 'Identyfikator internetowy'],
['location', 'Lokalizacja'],
].map(([key, name]) => (
<option key={key} value={key}>
{name}
</option>
))}
</select>
</td>
</tr>
))}
</tbody>
</table>
);
}
function Report() { function Report() {
try { try {
const origin = new URL(document.location.toString()).searchParams.get('origin'); const origin = new URL(document.location.toString()).searchParams.get('origin');

View File

@ -3,6 +3,7 @@
"jsx": "react-jsx", "jsx": "react-jsx",
"noImplicitAny": true, "noImplicitAny": true,
"esModuleInterop": true, "esModuleInterop": true,
"moduleResolution": "node",
"lib": ["es2017", "dom", "es2019"], "lib": ["es2017", "dom", "es2019"],
"typeRoots": ["node_modules/@types", "node_modules/web-ext-types"], "typeRoots": ["node_modules/@types", "node_modules/web-ext-types"],
"target": "es2019", "target": "es2019",