implement the simplest recovery function

4 files changed, 110 insertions, 5 deletions

diff --git a/packages/taler-wallet-webextension/src/wallet/Application.tsx b/packages/taler-wallet-webextension/src/wallet/Application.tsx
index f8b2f3ec8..5934dec00 100644
--- a/packages/taler-wallet-webextension/src/wallet/Application.tsx
+++ b/packages/taler-wallet-webextension/src/wallet/Application.tsx
@@ -64,6 +64,7 @@ import { TransferCreatePage } from "../cta/TransferCreate/index.js";
 import { InvoiceCreatePage } from "../cta/InvoiceCreate/index.js";
 import { TransferPickupPage } from "../cta/TransferPickup/index.js";
 import { InvoicePayPage } from "../cta/InvoicePay/index.js";
+import { RecoveryPage } from "../cta/Recovery/index.js";
 
 export function Application(): VNode {
   const [globalNotification, setGlobalNotification] = useState<
@@ -328,6 +329,12 @@ export function Application(): VNode {
                   redirectTo(Pages.balanceTransaction({ tid }))
                 }
               />
+              <Route
+                path={Pages.ctaRecovery}
+                component={RecoveryPage}
+                onCancel={() => redirectTo(Pages.balance)}
+                onSuccess={() => redirectTo(Pages.backup)}
+              />
 
               {/**
                * NOT FOUND
diff --git a/packages/taler-wallet-webextension/src/wallet/Backup.stories.tsx b/packages/taler-wallet-webextension/src/wallet/Backup.stories.tsx
index 1b54dbfa5..b12f5e5f6 100644
--- a/packages/taler-wallet-webextension/src/wallet/Backup.stories.tsx
+++ b/packages/taler-wallet-webextension/src/wallet/Backup.stories.tsx
@@ -21,7 +21,10 @@
 
 import { ProviderPaymentType } from "@gnu-taler/taler-wallet-core";
 import { addDays } from "date-fns";
-import { BackupView as TestedComponent } from "./BackupPage.js";
+import {
+  BackupView as TestedComponent,
+  ShowRecoveryInfo,
+} from "./BackupPage.js";
 import { createExample } from "../test-utils.js";
 import { TalerProtocolTimestamp } from "@gnu-taler/taler-util";
 
@@ -194,3 +197,7 @@ export const OneProvider = createExample(TestedComponent, {
 export const Empty = createExample(TestedComponent, {
   providers: [],
 });
+
+export const Recovery = createExample(ShowRecoveryInfo, {
+  info: "taler://recovery/ASLDKJASLKDJASD",
+});
diff --git a/packages/taler-wallet-webextension/src/wallet/BackupPage.tsx b/packages/taler-wallet-webextension/src/wallet/BackupPage.tsx
index 3f948d37b..bba8b5964 100644
--- a/packages/taler-wallet-webextension/src/wallet/BackupPage.tsx
+++ b/packages/taler-wallet-webextension/src/wallet/BackupPage.tsx
@@ -14,12 +14,17 @@
  GNU Taler; see the file COPYING.  If not, see <http://www.gnu.org/licenses/>
  */
 
-import { AbsoluteTime } from "@gnu-taler/taler-util";
+import {
+  AbsoluteTime,
+  BackupRecovery,
+  constructRecoveryUri,
+} from "@gnu-taler/taler-util";
 import {
   ProviderInfo,
   ProviderPaymentPaid,
   ProviderPaymentStatus,
   ProviderPaymentType,
+  WalletApiOperation,
 } from "@gnu-taler/taler-wallet-core";
 import {
   differenceInMonths,
@@ -37,20 +42,78 @@ import {
   RowBorderGray,
   SmallLightText,
   SmallText,
+  WarningBox,
 } from "../components/styled/index.js";
 import { useTranslationContext } from "../context/translation.js";
 import { useAsyncAsHook } from "../hooks/useAsyncAsHook.js";
 import { Button } from "../mui/Button.js";
 import { Pages } from "../NavigationBar.js";
 import * as wxApi from "../wxApi.js";
+import { wxClient } from "../wxApi.js";
+import { useEffect, useState } from "preact/hooks";
+import { QR } from "../components/QR.js";
 
 interface Props {
   onAddProvider: () => Promise<void>;
 }
 
+export function ShowRecoveryInfo({
+  info,
+  onClose,
+}: {
+  info: string;
+  onClose: () => Promise<void>;
+}): VNode {
+  const [display, setDisplay] = useState(false);
+  const [copied, setCopied] = useState(false);
+  async function copyText(): Promise<void> {
+    navigator.clipboard.writeText(info);
+    setCopied(true);
+  }
+  useEffect(() => {
+    if (copied) {
+      setTimeout(() => {
+        setCopied(false);
+      }, 1000);
+    }
+  }, [copied]);
+  return (
+    <Fragment>
+      <h2>Wallet Recovery</h2>
+      <WarningBox>Do not share this QR or URI with anyone</WarningBox>
+      <section>
+        <p>
+          The qr code can be scanned by another wallet to keep synchronized with
+          this wallet.
+        </p>
+        <Button variant="contained" onClick={async () => setDisplay((d) => !d)}>
+          {display ? "Hide" : "Show"} QR code
+        </Button>
+        {display && <QR text={JSON.stringify(info)} />}
+      </section>
+
+      <section>
+        <p>You can also use the string version</p>
+        <Button variant="contained" disabled={copied} onClick={copyText}>
+          Copy recovery URI
+        </Button>
+      </section>
+      <footer>
+        <div></div>
+        <div>
+          <Button variant="contained" onClick={onClose}>
+            Close
+          </Button>
+        </div>
+      </footer>
+    </Fragment>
+  );
+}
+
 export function BackupPage({ onAddProvider }: Props): VNode {
   const { i18n } = useTranslationContext();
   const status = useAsyncAsHook(wxApi.getBackupInfo);
+  const [recoveryInfo, setRecoveryInfo] = useState<string>("");
   if (!status) {
     return <Loading />;
   }
@@ -63,6 +126,12 @@ export function BackupPage({ onAddProvider }: Props): VNode {
     );
   }
 
+  async function getRecoveryInfo(): Promise<void> {
+    const r = await wxClient.call(WalletApiOperation.ExportBackupRecovery, {});
+    const str = constructRecoveryUri(r);
+    setRecoveryInfo(str);
+  }
+
   const providers = status.response.providers.sort((a, b) => {
     if (
       a.paymentStatus.type === ProviderPaymentType.Paid &&
@@ -75,11 +144,21 @@ export function BackupPage({ onAddProvider }: Props): VNode {
     );
   });
 
+  if (recoveryInfo) {
+    return (
+      <ShowRecoveryInfo
+        info={recoveryInfo}
+        onClose={async () => setRecoveryInfo("")}
+      />
+    );
+  }
+
   return (
     <BackupView
       providers={providers}
       onAddProvider={onAddProvider}
       onSyncAll={wxApi.syncAllProviders}
+      onShowInfo={getRecoveryInfo}
     />
   );
 }
@@ -88,12 +167,14 @@ export interface ViewProps {
   providers: ProviderInfo[];
   onAddProvider: () => Promise<void>;
   onSyncAll: () => Promise<void>;
+  onShowInfo: () => Promise<void>;
 }
 
 export function BackupView({
   providers,
   onAddProvider,
   onSyncAll,
+  onShowInfo,
 }: ViewProps): VNode {
   const { i18n } = useTranslationContext();
   return (
@@ -128,7 +209,11 @@ export function BackupView({
       </section>
       {!!providers.length && (
         <footer>
-          <div />
+          <div>
+            <Button variant="contained" onClick={onShowInfo}>
+              Show recovery
+            </Button>
+          </div>
           <div>
             <Button variant="contained" onClick={onSyncAll}>
               {providers.length > 1 ? (
diff --git a/packages/taler-wallet-webextension/src/wallet/ProviderAddPage.tsx b/packages/taler-wallet-webextension/src/wallet/ProviderAddPage.tsx
index 37d54eedc..e0bdeec5f 100644
--- a/packages/taler-wallet-webextension/src/wallet/ProviderAddPage.tsx
+++ b/packages/taler-wallet-webextension/src/wallet/ProviderAddPage.tsx
@@ -19,6 +19,7 @@ import {
   BackupBackupProviderTerms,
   canonicalizeBaseUrl,
 } from "@gnu-taler/taler-util";
+import { WalletApiOperation } from "@gnu-taler/taler-wallet-core";
 import { Fragment, h, VNode } from "preact";
 import { useEffect, useState } from "preact/hooks";
 import { Checkbox } from "../components/Checkbox.js";
@@ -34,6 +35,7 @@ import { useTranslationContext } from "../context/translation.js";
 import { Button } from "../mui/Button.js";
 import { queryToSlashConfig } from "../utils/index.js";
 import * as wxApi from "../wxApi.js";
+import { wxClient } from "../wxApi.js";
 
 interface Props {
   currency: string;
@@ -69,8 +71,12 @@ export function ProviderAddPage({ onBack }: Props): VNode {
         setVerifying(undefined);
       }}
       onConfirm={() => {
-        return wxApi
-          .addBackupProvider(verifying.url, verifying.name)
+        return wxClient
+          .call(WalletApiOperation.AddBackupProvider, {
+            backupProviderBaseUrl: verifying.url,
+            name: verifying.name,
+            activate: true,
+          })
           .then(onBack);
       }}
     />