fix example of successful recovery so the content of the secret can be decoded correctly

2 files changed, 31 insertions, 19 deletions

diff --git a/packages/anastasis-webui/src/pages/home/RecoveryFinishedScreen.stories.tsx b/packages/anastasis-webui/src/pages/home/RecoveryFinishedScreen.stories.tsx
index 47860db29..1c05cd6e1 100644
--- a/packages/anastasis-webui/src/pages/home/RecoveryFinishedScreen.stories.tsx
+++ b/packages/anastasis-webui/src/pages/home/RecoveryFinishedScreen.stories.tsx
@@ -1,4 +1,3 @@
-/* eslint-disable @typescript-eslint/camelcase */
 /*
  This file is part of GNU Taler
  (C) 2021 Taler Systems S.A.
@@ -20,6 +19,7 @@
  * @author Sebastian Javier Marchano (sebasjm)
  */
 
+import { encodeCrock, stringToBytes } from "@gnu-taler/taler-util";
 import { ReducerState } from "anastasis-core";
 import { createExample, reducerStatesExample } from "../../utils";
 import { RecoveryFinishedScreen as TestedComponent } from "./RecoveryFinishedScreen";
@@ -38,7 +38,15 @@ export default {
 
 export const GoodEnding = createExample(TestedComponent, {
   ...reducerStatesExample.recoveryFinished,
-  core_secret: { mime: "text/plain", value: "hello" },
+  recovery_document: {
+    secret_name: "the_name_of_the_secret",
+  },
+  core_secret: {
+    mime: "text/plain",
+    value: encodeCrock(
+      stringToBytes("hello this is my secret, don't tell anybody"),
+    ),
+  },
 } as ReducerState);
 
 export const BadEnding = createExample(
diff --git a/packages/anastasis-webui/src/pages/home/RecoveryFinishedScreen.tsx b/packages/anastasis-webui/src/pages/home/RecoveryFinishedScreen.tsx
index dba2aa446..d83482559 100644
--- a/packages/anastasis-webui/src/pages/home/RecoveryFinishedScreen.tsx
+++ b/packages/anastasis-webui/src/pages/home/RecoveryFinishedScreen.tsx
@@ -1,18 +1,19 @@
-import { bytesToString, decodeCrock } from "@gnu-taler/taler-util";
+import { bytesToString, decodeCrock, encodeCrock } from "@gnu-taler/taler-util";
 import { h, VNode } from "preact";
 import { useEffect, useState } from "preact/hooks";
+import { stringToBytes } from "qrcode-generator";
 import { QR } from "../../components/QR";
 import { useAnastasisContext } from "../../context/anastasis";
 import { AnastasisClientFrame } from "./index";
 
 export function RecoveryFinishedScreen(): VNode {
   const reducer = useAnastasisContext();
-  const [copied, setCopied] = useState(false)
+  const [copied, setCopied] = useState(false);
   useEffect(() => {
     setTimeout(() => {
-      setCopied(false)
-    },1000)
-  }, [copied])
+      setCopied(false);
+    }, 1000);
+  }, [copied]);
 
   if (!reducer) {
     return <div>no reducer in context</div>;
@@ -44,29 +45,32 @@ export function RecoveryFinishedScreen(): VNode {
     );
   }
   const secret = bytesToString(decodeCrock(encodedSecret.value));
-  const contentURI = `data:${encodedSecret.mime},${secret}`
+  const contentURI = `data:${encodedSecret.mime},${secret}`;
   // const fileName = encodedSecret['filename']
   // data:plain/text;base64,asdasd
   return (
     <AnastasisClientFrame title="Recovery Success" hideNav>
       <h2 class="subtitle">Your secret was recovered</h2>
-      {secretName && <p class="block">
-        <b>Secret name:</b> {secretName}
-      </p>}
+      {secretName && (
+        <p class="block">
+          <b>Secret name:</b> {secretName}
+        </p>
+      )}
       <div class="block buttons" disabled={copied}>
-        <button class="button" onClick={() => {
-          navigator.clipboard.writeText(secret); 
-          setCopied(true)
-        }}>
-          { !copied ? 'Copy' : 'Copied'}
+        <button
+          class="button"
+          onClick={() => {
+            navigator.clipboard.writeText(secret);
+            setCopied(true);
+          }}
+        >
+          {!copied ? "Copy" : "Copied"}
         </button>
         <a class="button is-info" download="secret.txt" href={contentURI}>
           <div class="icon is-small ">
             <i class="mdi mdi-download" />
           </div>
-          <span>
-            Save as
-          </span>
+          <span>Save as</span>
         </a>
       </div>
       <div class="block">