diff options
| -rw-r--r-- | packages/anastasis-webui/src/pages/home/RecoveryFinishedScreen.stories.tsx | 12 | ||||
| -rw-r--r-- | packages/anastasis-webui/src/pages/home/RecoveryFinishedScreen.tsx | 38 |
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"> |