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",
"react": "^17.0.2",
"react-dom": "^17.0.2",
"survey-core": "^1.9.8",
"survey-react": "^1.9.8",
"tai-password-strength": "^1.1.3"
},
"devDependencies": {
@ -6421,6 +6423,20 @@
"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": {
"version": "1.1.3",
"resolved": "https://registry.npmjs.org/tai-password-strength/-/tai-password-strength-1.1.3.tgz",
@ -12470,6 +12486,17 @@
"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": {
"version": "1.1.3",
"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",
"react": "^17.0.2",
"react-dom": "^17.0.2",
"survey-core": "^1.9.8",
"survey-react": "^1.9.8",
"tai-password-strength": "^1.1.3"
},
"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 * as Survey from 'survey-react';
import { toBase64 } from '../util';
import ConsentProblems from './consent-problems';
import emailHostSettings from './email-host-settings';
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,
setConfig,
}: {

View File

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

View File

@ -1,75 +1,12 @@
import React from 'react';
import ReactDOM from 'react-dom';
import { getMemory } from '../memory';
import { Classifications, StolenDataEntry } from '../stolen-data-entry';
import { StolenDataEntry } from '../stolen-data-entry';
import { reduceConcat, useEmitter } from '../util';
import EmailTemplate from './email-template';
import HARConverter from './har-converter';
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() {
try {
const origin = new URL(document.location.toString()).searchParams.get('origin');

View File

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