async, onInput, and some fixes

18 files changed, 85 insertions, 72 deletions

diff --git a/packages/anastasis-webui/src/components/AsyncButton.tsx b/packages/anastasis-webui/src/components/AsyncButton.tsx
index 5602715e4..af85016e8 100644
--- a/packages/anastasis-webui/src/components/AsyncButton.tsx
+++ b/packages/anastasis-webui/src/components/AsyncButton.tsx
@@ -37,9 +37,7 @@ export function AsyncButton({ onClick, disabled, children, ...rest }: Props): VN
   // if (isSlow) {
   //   return <LoadingModal onCancel={cancel} />;
   // }
-  console.log(isLoading)
-  if (isLoading) {
-    
+  if (isLoading) {    
     return <button class="button">Loading...</button>;
   }
 
diff --git a/packages/anastasis-webui/src/components/fields/DateInput.tsx b/packages/anastasis-webui/src/components/fields/DateInput.tsx
index c406b85d1..3148c953f 100644
--- a/packages/anastasis-webui/src/components/fields/DateInput.tsx
+++ b/packages/anastasis-webui/src/components/fields/DateInput.tsx
@@ -41,7 +41,7 @@ export function DateInput(props: DateInputProps): VNode {
             type="text"
             class={showError ? 'input is-danger' : 'input'}
             value={value}
-            onChange={(e) => {
+            onInput={(e) => {
               const text = e.currentTarget.value
               setDirty(true)
               props.bind[1](text);
diff --git a/packages/anastasis-webui/src/components/fields/EmailInput.tsx b/packages/anastasis-webui/src/components/fields/EmailInput.tsx
index e0fca0f46..e21418fea 100644
--- a/packages/anastasis-webui/src/components/fields/EmailInput.tsx
+++ b/packages/anastasis-webui/src/components/fields/EmailInput.tsx
@@ -34,7 +34,7 @@ export function EmailInput(props: TextInputProps): VNode {
         placeholder={props.placeholder}
         type="email"
         class={showError ? 'input is-danger' : 'input'}
-        onChange={(e) => {setDirty(true); props.bind[1]((e.target as HTMLInputElement).value)}}
+        onInput={(e) => {setDirty(true); props.bind[1]((e.target as HTMLInputElement).value)}}
         ref={inputRef}
         style={{ display: "block" }} />
     </div>
diff --git a/packages/anastasis-webui/src/components/fields/NumberInput.tsx b/packages/anastasis-webui/src/components/fields/NumberInput.tsx
index 2b6cdcd2c..2afb242b8 100644
--- a/packages/anastasis-webui/src/components/fields/NumberInput.tsx
+++ b/packages/anastasis-webui/src/components/fields/NumberInput.tsx
@@ -33,7 +33,7 @@ export function NumberInput(props: TextInputProps): VNode {
         type="number"
         placeholder={props.placeholder}
         class={showError ? 'input is-danger' : 'input'}
-        onChange={(e) => {setDirty(true); props.bind[1]((e.target as HTMLInputElement).value)}}
+        onInput={(e) => {setDirty(true); props.bind[1]((e.target as HTMLInputElement).value)}}
         ref={inputRef}
         style={{ display: "block" }} />
     </div>
diff --git a/packages/anastasis-webui/src/components/fields/TextInput.tsx b/packages/anastasis-webui/src/components/fields/TextInput.tsx
index 4bb785cd3..c093689c5 100644
--- a/packages/anastasis-webui/src/components/fields/TextInput.tsx
+++ b/packages/anastasis-webui/src/components/fields/TextInput.tsx
@@ -32,7 +32,7 @@ export function TextInput(props: TextInputProps): VNode {
         value={value}
         placeholder={props.placeholder}
         class={showError ? 'input is-danger' : 'input'}
-        onChange={(e) => {setDirty(true); props.bind[1]((e.target as HTMLInputElement).value)}}
+        onInput={(e) => {setDirty(true); props.bind[1]((e.target as HTMLInputElement).value)}}
         ref={inputRef}
         style={{ display: "block" }} />
     </div>
diff --git a/packages/anastasis-webui/src/components/picker/DatePicker.tsx b/packages/anastasis-webui/src/components/picker/DatePicker.tsx
index a94b3708e..eb5d8145d 100644
--- a/packages/anastasis-webui/src/components/picker/DatePicker.tsx
+++ b/packages/anastasis-webui/src/components/picker/DatePicker.tsx
@@ -214,7 +214,7 @@ export class DatePicker extends Component<Props, State> {
     // }
   }
 
-  constructor(props) {
+  constructor(props: any) {
     super(props);
 
     this.closeDatePicker = this.closeDatePicker.bind(this);
diff --git a/packages/anastasis-webui/src/hooks/async.ts b/packages/anastasis-webui/src/hooks/async.ts
index f142a5dc5..ea3ff6acf 100644
--- a/packages/anastasis-webui/src/hooks/async.ts
+++ b/packages/anastasis-webui/src/hooks/async.ts
@@ -43,14 +43,14 @@ export function useAsync<T>(fn?: (...args: any) => Promise<T>, { slowTolerance:
   const request = async (...args: any) => {
     if (!fn) return;
     setLoading(true);
-    console.log("loading true")
     const handler = setTimeout(() => {
       setSlow(true)
     }, tooLong)
 
     try {
+      console.log("calling async", args)
       const result = await fn(...args);
-      console.log(result)
+      console.log("async back", result)
       setData(result);
     } catch (error) {
       setError(error);
diff --git a/packages/anastasis-webui/src/pages/home/AttributeEntryScreen.tsx b/packages/anastasis-webui/src/pages/home/AttributeEntryScreen.tsx
index 52046b216..f86994c97 100644
--- a/packages/anastasis-webui/src/pages/home/AttributeEntryScreen.tsx
+++ b/packages/anastasis-webui/src/pages/home/AttributeEntryScreen.tsx
@@ -48,10 +48,10 @@ export function AttributeEntryScreen(): VNode {
       })}
     >
       <div class="columns" style={{ maxWidth: 'unset' }}>
-        <div class="column is-one-third">
+        <div class="column is-half">
           {fieldList}
         </div>
-        <div class="column is-two-third" >
+        <div class="column is-is-half" >
           <p>This personal information will help to locate your secret.</p>
           <h1 class="title">This stays private</h1>
           <p>The information you have entered here:</p>
diff --git a/packages/anastasis-webui/src/pages/home/AuthenticationEditorScreen.tsx b/packages/anastasis-webui/src/pages/home/AuthenticationEditorScreen.tsx
index b95d3f1e3..93ca81194 100644
--- a/packages/anastasis-webui/src/pages/home/AuthenticationEditorScreen.tsx
+++ b/packages/anastasis-webui/src/pages/home/AuthenticationEditorScreen.tsx
@@ -135,7 +135,7 @@ export function AuthenticationEditorScreen(): VNode {
   return (
     <AnastasisClientFrame title="Backup: Configure Authentication Methods" hideNext={errors}>
       <div class="columns">
-        <div class="column one-third">
+        <div class="column is-half">
           <div>
             {getKeys(authMethods).map(method => <MethodButton key={method} method={method} />)}
           </div>
@@ -152,7 +152,7 @@ export function AuthenticationEditorScreen(): VNode {
             </p>
           </ConfirmModal>}
         </div>
-        <div class="column two-third">
+        <div class="column is-half">
           <p class="block">
             When recovering your wallet, you will be asked to verify your identity via the methods you configure here.
             The list of authentication method is defined by the backup provider list.
diff --git a/packages/anastasis-webui/src/pages/home/ChallengeOverviewScreen.tsx b/packages/anastasis-webui/src/pages/home/ChallengeOverviewScreen.tsx
index 7bafbe06a..ed34bbde2 100644
--- a/packages/anastasis-webui/src/pages/home/ChallengeOverviewScreen.tsx
+++ b/packages/anastasis-webui/src/pages/home/ChallengeOverviewScreen.tsx
@@ -1,4 +1,3 @@
-/* eslint-disable @typescript-eslint/camelcase */
 import { ChallengeFeedback, ChallengeFeedbackStatus } from "anastasis-core";
 import { h, VNode } from "preact";
 import { useAnastasisContext } from "../../context/anastasis";
diff --git a/packages/anastasis-webui/src/pages/home/ContinentSelectionScreen.tsx b/packages/anastasis-webui/src/pages/home/ContinentSelectionScreen.tsx
index 4ab0e6a9b..0e43f982d 100644
--- a/packages/anastasis-webui/src/pages/home/ContinentSelectionScreen.tsx
+++ b/packages/anastasis-webui/src/pages/home/ContinentSelectionScreen.tsx
@@ -1,5 +1,4 @@
 /* eslint-disable @typescript-eslint/camelcase */
-import { BackupStates, ContinentInfo, RecoveryStates } from "anastasis-core";
 import { h, VNode } from "preact";
 import { useState } from "preact/hooks";
 import { useAnastasisContext } from "../../context/anastasis";
@@ -9,7 +8,8 @@ export function ContinentSelectionScreen(): VNode {
   const reducer = useAnastasisContext()
 
   //FIXME: remove this when #7056 is fixed
-  const [countryCode, setCountryCode] = useState("")
+  const countryFromReducer = (reducer?.currentReducerState as any).selected_country || "" 
+  const [countryCode, setCountryCode] = useState( countryFromReducer )
 
   if (!reducer || !reducer.currentReducerState || !("continents" in reducer.currentReducerState)) {
     return <div />
diff --git a/packages/anastasis-webui/src/pages/home/RecoveryFinishedScreen.tsx b/packages/anastasis-webui/src/pages/home/RecoveryFinishedScreen.tsx
index bbcaa10a5..3740592b1 100644
--- a/packages/anastasis-webui/src/pages/home/RecoveryFinishedScreen.tsx
+++ b/packages/anastasis-webui/src/pages/home/RecoveryFinishedScreen.tsx
@@ -29,6 +29,9 @@ export function RecoveryFinishedScreen(): VNode {
       <p>
         Secret: {secret}
       </p>
+      <div style={{ marginTop: '2em', display: 'flex', justifyContent: 'space-between' }}>
+        <button class="button" onClick={() => reducer.back()}>Back</button>
+      </div>
     </AnastasisClientFrame>
   );
 }
diff --git a/packages/anastasis-webui/src/pages/home/SecretEditorScreen.tsx b/packages/anastasis-webui/src/pages/home/SecretEditorScreen.tsx
index 915465c3f..1b36a1b21 100644
--- a/packages/anastasis-webui/src/pages/home/SecretEditorScreen.tsx
+++ b/packages/anastasis-webui/src/pages/home/SecretEditorScreen.tsx
@@ -4,7 +4,8 @@ import { h, VNode } from "preact";
 import { useState } from "preact/hooks";
 import { useAnastasisContext } from "../../context/anastasis";
 import {
-  AnastasisClientFrame} from "./index";
+  AnastasisClientFrame
+} from "./index";
 import { TextInput } from "../../components/fields/TextInput";
 import { FileInput } from "../../components/fields/FileInput";
 
@@ -12,12 +13,12 @@ export function SecretEditorScreen(): VNode {
   const reducer = useAnastasisContext()
   const [secretValue, setSecretValue] = useState("");
 
-  const currentSecretName = reducer?.currentReducerState 
-    && ("secret_name" in reducer.currentReducerState) 
+  const currentSecretName = reducer?.currentReducerState
+    && ("secret_name" in reducer.currentReducerState)
     && reducer.currentReducerState.secret_name;
 
   const [secretName, setSecretName] = useState(currentSecretName || "");
-  
+
   if (!reducer) {
     return <div>no reducer in context</div>
   }
@@ -25,8 +26,8 @@ export function SecretEditorScreen(): VNode {
     return <div>invalid state</div>
   }
 
-  const secretNext = (): void => {
-    reducer.runTransaction(async (tx) => {
+  const secretNext = async (): Promise<void> => {
+    return reducer.runTransaction(async (tx) => {
       await tx.transition("enter_secret_name", {
         name: secretName,
       });
@@ -44,25 +45,29 @@ export function SecretEditorScreen(): VNode {
   };
   return (
     <AnastasisClientFrame
-      title="Backup: Provide secret"
+      title="Backup: Provide secret to backup"
       onNext={() => secretNext()}
     >
       <div>
         <TextInput
-          label="Secret Name:"
+          label="Secret's name:"
           grabFocus
           bind={[secretName, setSecretName]}
         />
       </div>
       <div>
         <TextInput
-          label="Secret Value:"
-          bind={[secretValue, setSecretValue]}
-        /> or import a file
-        <FileInput 
-          label="Open file from your device"
+          label="Enter the secret as text:"
           bind={[secretValue, setSecretValue]}
         />
+        <div style={{display:'flex',}}>
+          or&nbsp; 
+          <FileInput
+            label="click here"
+            bind={[secretValue, setSecretValue]}
+          />
+          &nbsp;to import a file
+        </div>
       </div>
     </AnastasisClientFrame>
   );
diff --git a/packages/anastasis-webui/src/pages/home/SecretSelectionScreen.tsx b/packages/anastasis-webui/src/pages/home/SecretSelectionScreen.tsx
index d0b83bda5..e1aeb3939 100644
--- a/packages/anastasis-webui/src/pages/home/SecretSelectionScreen.tsx
+++ b/packages/anastasis-webui/src/pages/home/SecretSelectionScreen.tsx
@@ -97,39 +97,44 @@ export function SecretSelectionScreen(): VNode {
   }
   return (
     <AnastasisClientFrame title="Recovery: Select secret">
-      <p>Secret found, you can select another version or continue to the challenges solving</p>
-      <table class="table">
-        <tr>
-          <td>
-            <b>Provider</b>
-            <span class="icon has-tooltip-right" data-tooltip="Service provider backing up your secret">
-              <i class="mdi mdi-information" />
-            </span>
-          </td>
-          <td>{recoveryDocument.provider_url}</td>
-          <td><a onClick={() => setSelectingVersion(true)}>use another provider</a></td>
-        </tr>
-        <tr>
-          <td>
-            <b>Secret version</b>
-            <span class="icon has-tooltip-right" data-tooltip="Secret version to be recovered">
-              <i class="mdi mdi-information" />
-            </span>
-          </td>
-          <td>{recoveryDocument.version}</td>
-          <td><a onClick={() => setSelectingVersion(true)}>use another version</a></td>
-        </tr>
-        <tr>
-          <td>
-            <b>Secret name</b>
-            <span class="icon has-tooltip-right" data-tooltip="Secret identifier">
-              <i class="mdi mdi-information" />
-            </span>
-          </td>
-          <td>{recoveryDocument.secret_name}</td>
-          <td> </td>
-        </tr>
-      </table>
+      <div class="columns">
+        <div class="column is-half">
+          <div class="box">
+            <h1 class="subtitle">{recoveryDocument.provider_url}</h1>
+            <table class="table">
+              <tr>
+                <td>
+                  <b>Secret version</b>
+                  <span class="icon has-tooltip-right" data-tooltip="Secret version to be recovered">
+                    <i class="mdi mdi-information" />
+                  </span>
+                </td>
+                <td>{recoveryDocument.version}</td>
+                <td><a onClick={() => setSelectingVersion(true)}>use another version</a></td>
+              </tr>
+              <tr>
+                <td>
+                  <b>Secret name</b>
+                  <span class="icon has-tooltip-right" data-tooltip="Secret identifier">
+                    <i class="mdi mdi-information" />
+                  </span>
+                </td>
+                <td>{recoveryDocument.secret_name}</td>
+                <td> </td>
+              </tr>
+            </table>
+            <div class="buttons is-right">
+              <button class="button" disabled onClick={() => reducer.reset()}>Use this provider</button>
+            </div>
+          </div>
+          <div class="buttons is-right">
+            <button class="button" disabled onClick={() => reducer.reset()}>Change provider</button>
+          </div>
+        </div>
+        <div class="column is-two-third">
+          <p>Secret found, you can select another version or continue to the challenges solving</p>
+        </div>
+      </div>
     </AnastasisClientFrame>
   );
 }
diff --git a/packages/anastasis-webui/src/pages/home/SolveScreen.tsx b/packages/anastasis-webui/src/pages/home/SolveScreen.tsx
index d4d9271b4..df55de6ab 100644
--- a/packages/anastasis-webui/src/pages/home/SolveScreen.tsx
+++ b/packages/anastasis-webui/src/pages/home/SolveScreen.tsx
@@ -77,6 +77,9 @@ export function SolveScreen(): VNode {
     return (
       <AnastasisClientFrame hideNav title="Recovery problem">
         <div>invalid state</div>
+        <div style={{ marginTop: '2em', display: 'flex', justifyContent: 'space-between' }}>
+        <button class="button" onClick={() => reducer.back()}>Back</button>
+      </div>
       </AnastasisClientFrame>
     );
   }
diff --git a/packages/anastasis-webui/src/pages/home/index.tsx b/packages/anastasis-webui/src/pages/home/index.tsx
index 415cf6e98..346738c26 100644
--- a/packages/anastasis-webui/src/pages/home/index.tsx
+++ b/packages/anastasis-webui/src/pages/home/index.tsx
@@ -96,12 +96,12 @@ export function AnastasisClientFrame(props: AnastasisClientFrameProps): VNode {
     return <p>Fatal: Reducer must be in context.</p>;
   }
   const next = async (): Promise<void> => {
-    return new Promise((res, rej) => {
+    return new Promise(async (res, rej) => {
       try {
         if (props.onNext) {
-          props.onNext();
+          await props.onNext();
         } else {
-          reducer.transition("next", {});
+          await reducer.transition("next", {});
         }
         res()
       } catch {
diff --git a/packages/anastasis-webui/src/utils/index.tsx b/packages/anastasis-webui/src/utils/index.tsx
index 244be8af8..9c01aa6ba 100644
--- a/packages/anastasis-webui/src/utils/index.tsx
+++ b/packages/anastasis-webui/src/utils/index.tsx
@@ -8,13 +8,13 @@ export function createExample<Props>(Component: FunctionalComponent<Props>, curr
     return <AnastasisProvider value={{
       currentReducerState,
       currentError: undefined,
-      back: () => { null },
-      dismissError: () => { null },
+      back: async () => { null },
+      dismissError: async () => { null },
       reset: () => { null },
-      runTransaction: () => { null },
+      runTransaction: async () => { null },
       startBackup: () => { null },
       startRecover: () => { null },
-      transition: () => { null },
+      transition: async () => { null },
     }}>
       <Component {...args} />
     </AnastasisProvider>
diff --git a/packages/taler-wallet-webextension/package.json b/packages/taler-wallet-webextension/package.json
index 4023e4ebd..3a43f1e76 100644
--- a/packages/taler-wallet-webextension/package.json
+++ b/packages/taler-wallet-webextension/package.json
@@ -45,7 +45,7 @@
     "@storybook/preact": "^6.2.9",
     "@testing-library/preact": "^2.0.1",
     "@types/chrome": "^0.0.128",
-    "@types/enzyme": "^3.10.8",
+    "@types/enzyme": "^3.10.10",
     "@types/history": "^4.7.8",
     "@types/jest": "^26.0.23",
     "@types/node": "^14.14.22",
@@ -80,4 +80,4 @@
       "\\.(jpg|jpeg|png|gif|eot|otf|webp|svg|ttf|woff|woff2|mp4|webm|wav|mp3|m4a|aac|oga|po)$": "<rootDir>/tests/__mocks__/fileTransformer.js"
     }
   }
-}
\ No newline at end of file
+}