fix #7090 dowload personal info as PDF

4 files changed, 42 insertions, 19 deletions

diff --git a/packages/anastasis-webui/clean_and_build.sh b/packages/anastasis-webui/clean_and_build.sh
index c0e93e47d..5f308e67c 100755
--- a/packages/anastasis-webui/clean_and_build.sh
+++ b/packages/anastasis-webui/clean_and_build.sh
@@ -54,12 +54,11 @@ if [ "WATCH" == "$1" ]; then
   echo watch mode
   echo Writting any file in the src directory will trigger a browser reload.
   echo Be sure that the watcher server is running.
+  echo ./watch/serve.sh
   inotifywait -e close_write -r src -q -m | while read line; do
     echo $(date) $line
     build_js src/main.ts
     bundle ui-dev
-    #CONTENT=$(echo 'alert("hola")' | base64)
     ./watch/send.sh '{"type":"RELOAD"}'
-    #./watch/send.sh '{"type":"UPDATE","content":"'$CONTENT'"}'
   done;
 fi
diff --git a/packages/anastasis-webui/html/ui-dev.html b/packages/anastasis-webui/html/ui-dev.html
index 5b1dd31cf..2790d5678 100644
--- a/packages/anastasis-webui/html/ui-dev.html
+++ b/packages/anastasis-webui/html/ui-dev.html
@@ -14,7 +14,7 @@
       href="data:;base64,AAABAAEAEBAAAAEAIABoBAAAFgAAACgAAAAQAAAAIAAAAAEAIAAAAAAAAAQAABILAAASCwAAAAAAAAAAAAD///////////////////////////////////////////////////////////////////////////////////////////////////7//v38//78/P/+/fz//vz7///+/v/+/f3//vz7///+/v/+/fz//v38///////////////////////+/v3///7+/////////////////////////////////////////////////////////v3//v79///////+/v3///////r28v/ct5//06SG/9Gffv/Xqo7/7N/V/9e2nf/bsJb/6uDW/9Sskf/euKH/+/j2///////+/v3//////+3azv+/eE3/2rWd/9Kkhv/Vr5T/48i2/8J+VP/Qn3//3ryn/795Tf/WrpP/2LCW/8B6T//w4Nb///////Pn4P+/d0v/9u3n/+7d0v/EhV7//v///+HDr//fxLD/zph2/+TJt//8/Pv/woBX//Lm3f/y5dz/v3hN//bu6f/JjGn/4sW0///////Df1j/8OLZ//v6+P+/elH/+vj1//jy7f+/elL//////+zYzP/Eg13//////967p//MlHT/wn5X///////v4Nb/yY1s///////jw7H/06KG////////////z5t9/+fNvf//////x4pn//Pp4v/8+vn/w39X/8WEX///////5s/A/9CbfP//////27Oc/9y2n////////////9itlf/gu6f//////86Vdf/r2Mz//////8SCXP/Df1j//////+7d0v/KkG7//////+HBrf/VpYr////////////RnoH/5sq6///////Ii2n/8ubf//39/P/Cf1j/xohk/+bNvv//////wn5W//Tq4//58/D/wHxV//7+/f/59fH/v3xU//39/P/w4Nf/xIFb///////hw7H/yo9t/+/f1f/AeU3/+/n2/+nSxP/FhmD//////9qzm//Upon/4MSx/96+qf//////xINc/+3bz//48e3/v3hN//Pn3///////6M+//752S//gw6//06aK/8J+VP/kzLr/zZd1/8OCWv/q18r/17KZ/9Ooi//fv6r/v3dK/+vWyP///////v39///////27un/1aeK/9Opjv/m1cf/1KCC/9a0nP/n08T/0Jx8/82YdP/QnHz/16yR//jx7P///////v39///////+/f3///7+///////+//7//v7+///////+/v7//v/+/////////////////////////v7//v79///////////////////+/v/+/Pv//v39///+/v/+/Pv///7+//7+/f/+/Pv//v39//79/P/+/Pv///7+////////////AAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAAA=="
     />
     <link rel="shortcut icon" href="data:image/x-icon;," type="image/x-icon" />
-    <style type="text/css">
+    <style id="style-id" type="text/css">
       /* <![CDATA[ */
       ANASTASIS_STYLE_CONTENT
       /* <![CDATA[ */
@@ -29,7 +29,7 @@
     <script type="application/javascript">
       function setupLiveReload() {
         const socketPath = `ws://localhost:8003/socket`;
-        console.log("connecting to ", socketPath)
+        console.log("connecting to ", socketPath);
         const ws = new WebSocket(socketPath);
         ws.onmessage = (message) => {
           const event = JSON.parse(message.data);
@@ -40,23 +40,23 @@
             window.location.reload();
           }
           if (event.type === "UPDATE") {
-            document.body.removeChild(document.getElementById("container"))
-            const d = document.createElement('div')
-            d.setAttribute('id',"container")
-            d.setAttribute('class',"anastasis-container");
-            document.body.appendChild(d)
-            const s = document.createElement('script')
-            s.setAttribute('id',"code")
-            s.setAttribute('type',"application/javascript");
-            s.textContent = atob(event.content)
-            document.body.appendChild(s)
+            document.body.removeChild(document.getElementById("container"));
+            const d = document.createElement("div");
+            d.setAttribute("id", "container");
+            d.setAttribute("class", "anastasis-container");
+            document.body.appendChild(d);
+            const s = document.createElement("script");
+            s.setAttribute("id", "code");
+            s.setAttribute("type", "application/javascript");
+            s.textContent = atob(event.content);
+            document.body.appendChild(s);
           }
         };
         ws.onerror = (error) => {
           console.error(error);
         };
         ws.onclose = (e) => {
-          setTimeout(setupLiveReload, 500)
+          setTimeout(setupLiveReload, 500);
         };
       }
       setupLiveReload();
diff --git a/packages/anastasis-webui/package.json b/packages/anastasis-webui/package.json
index 551ae54bc..949440bc7 100644
--- a/packages/anastasis-webui/package.json
+++ b/packages/anastasis-webui/package.json
@@ -6,7 +6,7 @@
   "scripts": {
     "build": "./clean_and_build.sh",
     "compile": "tsc",
-    "dev": "./dev.mjs",
+    "dev": "./clean_and_build.sh WATCH",
     "prepare": "pnpm compile",
     "lint": "eslint 'src/**/*.{js,jsx,ts,tsx}'",
     "test": "mocha --enable-source-maps 'dist/**/*test.js'",
@@ -49,4 +49,4 @@
     "typescript": "^4.5.4",
     "ws": "7.4.5"
   }
-}
+}
\ No newline at end of file
diff --git a/packages/anastasis-webui/src/pages/home/AttributeEntryScreen.tsx b/packages/anastasis-webui/src/pages/home/AttributeEntryScreen.tsx
index ed46aa095..228186a2d 100644
--- a/packages/anastasis-webui/src/pages/home/AttributeEntryScreen.tsx
+++ b/packages/anastasis-webui/src/pages/home/AttributeEntryScreen.tsx
@@ -94,6 +94,25 @@ export function AttributeEntryScreen(): VNode {
     });
   };
 
+  function saveAsPDF(): void {
+    const printWindow = window.open("", "", "height=400,width=800");
+    const divContents = document.getElementById("printThis");
+    const styleContents = document.getElementById("style-id");
+
+    if (!printWindow || !divContents || !styleContents) return;
+    printWindow.document.write(
+      "<html><head><title>Anastasis Recovery Document</title><style>",
+    );
+    printWindow.document.write(styleContents.innerHTML);
+    printWindow.document.write("</style></head><body>&nbsp;</body></html>");
+    printWindow.document.close();
+    printWindow.document.body.appendChild(divContents.cloneNode(true));
+    printWindow.addEventListener("load", () => {
+      printWindow.print();
+      printWindow.close();
+    });
+  }
+
   return (
     <AnastasisClientFrame
       title={withProcessLabel(reducer, "Who are you?")}
@@ -112,11 +131,16 @@ export function AttributeEntryScreen(): VNode {
           You personal information is used to define the location where your
           secret will be safely stored. If you forget what you have entered or
           if there is a misspell you will be unable to recover your secret.
+          <p>
+            <a onClick={saveAsPDF}>Save the personal information as PDF</a>
+          </p>
         </ConfirmModal>
-      ) : null}
+      ) : undefined}
 
       <div class="columns" style={{ maxWidth: "unset" }}>
-        <div class="column">{fieldList}</div>
+        <div class="column" id="printThis">
+          {fieldList}
+        </div>
         <div class="column">
           <p>This personal information will help to locate your secret.</p>
           <h1 class="title">This stays private</h1>