Add option to include a screenshot of the popup

report-window/email-template.tsx

@@ -1,7 +1,7 @@
 import React, { useState } from "react";
 import { RequestCluster } from "../request-cluster";
 import { StolenDataEntry } from "../stolen-data-entry";
-import { getDate } from "../util";
+import { getDate, toBase64 } from "../util";
 import DomainSummary from "./domain-summary";
 
 type PopupState = "not_clicked" | "clicked_but_invalid";
@@ -17,6 +17,8 @@ export default function EmailTemplate({
   const [acceptAllName, setAcceptAllName] = useState<string>(
     "Zaakceptuj wszystkie"
   );
+  const [popupScreenshotBase64, setPopupScreenshotBase64] =
+    useState<string>(null);
 
   return (
     <div>
@@ -30,18 +32,35 @@ export default function EmailTemplate({
         <option value="clicked_but_invalid">Kliknięte, ale nieważne</option>
       </select>
       {popupState === "clicked_but_invalid" ? (
-        <div>
+        <>
-          <label htmlFor="acceptAllName">
+          <div>
-            Tekst na przycisku do zatwierdzania wszystkich zgód:
+            <label htmlFor="acceptAllName">
-          </label>
+              Tekst na przycisku do zatwierdzania wszystkich zgód:
-          <input
+            </label>
-            {...{
+            <input
-              type: "text",
+              {...{
-              value: acceptAllName,
+                type: "text",
-              onChange: (e) => setAcceptAllName(e.target.value),
+                value: acceptAllName,
-            }}
+                onChange: (e) => setAcceptAllName(e.target.value),
-          />
+              }}
-        </div>
+            />
+          </div>
+          <div>
+            <label htmlFor="popup-screenshot">
+              Zrzut ekranu z tego, jak wyglądał popup przed kliknięciem „
+              {acceptAllName}”:
+            </label>
+            <input
+              {...{
+                type: "file",
+                id: "popup-screenshot",
+                onChange: async (e) => {
+                  setPopupScreenshotBase64(await toBase64(e.target.files[0]));
+                },
+              }}
+            />
+          </div>
+        </>
       ) : null}
       <p>
         Dzień dobry, w dniu {getDate()} odwiedziłem stronę{" "}
@@ -76,6 +95,7 @@ export default function EmailTemplate({
             2016/679 z dnia 27 kwietnia 2016
           </em>
           ).
+          {<img {...{ src: popupScreenshotBase64 }} />}
         </p>
       ) : null}
       <p>

util.ts

@@ -128,3 +128,13 @@ export function getDate() {
     .toString()
     .padStart(2, "0")}-${d.getDate().toString().padStart(2, "0")}`;
 }
+
+export function toBase64(file: File): Promise<string> {
+  return new Promise((resolve) => {
+    const FR = new FileReader();
+    FR.addEventListener("load", (e) => {
+      resolve(e.target.result as string);
+    });
+    FR.readAsDataURL(file);
+  });
+}