Add surveyjs

package-lock.json

@@ -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",

package.json

@@ -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": [

report-window/data-preview.tsx

@@ -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>
+    );
+}

report-window/email-template-3-controls.tsx

@@ -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,
 }: {

report-window/report-window.html

@@ -1,20 +1,17 @@
 <!DOCTYPE html>
 <html>
-
+    <head>
-<head>
         <meta charset="utf-8" />
         <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>
         <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>

report-window/report-window.tsx

@@ -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');

tsconfig.json

@@ -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",