selecting provider

5 files changed, 109 insertions, 86 deletions

diff --git a/packages/anastasis-webui/src/components/AsyncButton.tsx b/packages/anastasis-webui/src/components/AsyncButton.tsx
index bb2cc0fd8..92bef2219 100644
--- a/packages/anastasis-webui/src/components/AsyncButton.tsx
+++ b/packages/anastasis-webui/src/components/AsyncButton.tsx
@@ -41,8 +41,8 @@ export function AsyncButton({ onClick, disabled, children, ...rest }: Props): VN
     return <button class="button">Loading...</button>;
   }
 
-  return <span {...rest}>
-    <button class="button is-info" onClick={request} disabled={disabled}>
+  return <span data-tooltip={rest['data-tooltip']} style={{marginLeft: 5}}>
+    <button {...rest} onClick={request} disabled={disabled}>
       {children}
     </button>
   </span>;
diff --git a/packages/anastasis-webui/src/pages/home/SecretSelectionScreen.stories.tsx b/packages/anastasis-webui/src/pages/home/SecretSelectionScreen.stories.tsx
index f56939090..6919eebad 100644
--- a/packages/anastasis-webui/src/pages/home/SecretSelectionScreen.stories.tsx
+++ b/packages/anastasis-webui/src/pages/home/SecretSelectionScreen.stories.tsx
@@ -1,4 +1,3 @@
-/* eslint-disable @typescript-eslint/camelcase */
 /*
  This file is part of GNU Taler
  (C) 2021 Taler Systems S.A.
@@ -40,7 +39,7 @@ export default {
 export const Example = createExample(TestedComponent, {
   ...reducerStatesExample.secretSelection,
   recovery_document: {
-    provider_url: 'http://anastasis.url/',
+    provider_url: 'https://kudos.demo.anastasis.lu/',
     secret_name: 'secretName',
     version: 1,
   },
diff --git a/packages/anastasis-webui/src/pages/home/SecretSelectionScreen.tsx b/packages/anastasis-webui/src/pages/home/SecretSelectionScreen.tsx
index e8af75229..8aa5ed2f7 100644
--- a/packages/anastasis-webui/src/pages/home/SecretSelectionScreen.tsx
+++ b/packages/anastasis-webui/src/pages/home/SecretSelectionScreen.tsx
@@ -1,5 +1,3 @@
-/* eslint-disable @typescript-eslint/camelcase */
-import { RecoveryInternalData } from "anastasis-core";
 import { h, VNode } from "preact";
 import { useState } from "preact/hooks";
 import { AsyncButton } from "../../components/AsyncButton";
@@ -9,15 +7,12 @@ import { AnastasisClientFrame } from "./index";
 
 export function SecretSelectionScreen(): VNode {
   const [selectingVersion, setSelectingVersion] = useState<boolean>(false);
-  const [otherProvider, setOtherProvider] = useState<string>("");
   const reducer = useAnastasisContext()
 
   const currentVersion = (reducer?.currentReducerState
     && ("recovery_document" in reducer.currentReducerState)
     && reducer.currentReducerState.recovery_document?.version) || 0;
 
-  const [otherVersion, setOtherVersion] = useState("");
-
   if (!reducer) {
     return <div>no reducer in context</div>
   }
@@ -25,7 +20,7 @@ export function SecretSelectionScreen(): VNode {
     return <div>invalid state</div>
   }
 
-  async function selectVersion(p: string, n: number): Promise<void> {
+  async function doSelectVersion(p: string, n: number): Promise<void> {
     if (!reducer) return Promise.resolve();
     return reducer.runTransaction(async (tx) => {
       await tx.transition("change_version", {
@@ -38,74 +33,20 @@ export function SecretSelectionScreen(): VNode {
 
   const providerList = Object.keys(reducer.currentReducerState.authentication_providers ?? {})
   const recoveryDocument = reducer.currentReducerState.recovery_document
-  if (!recoveryDocument) {
-    return (
-      <AnastasisClientFrame hideNext="Recovery document not found" title="Recovery: Problem">
-        <p>No recovery document found, try with another provider</p>
-        <table class="table">
-          <tr>
-            <td><b>Provider</b></td>
-            <td>
-              <select onChange={(e) => setOtherProvider((e.target as any).value)}>
-                <option key="none" disabled selected > Choose another provider </option>
-                {providerList.map(prov => (
-                  <option key={prov} value={prov}>
-                    {prov}
-                  </option>
-                ))}
-              </select>
-            </td>
-          </tr>
-        </table>
-      </AnastasisClientFrame>
-    )
-  }
-  if (selectingVersion) {
-    return (
-      <AnastasisClientFrame hideNav title="Recovery: Select secret">
-        <div class="columns">
-          <div class="column">
-            <div class="box">
-              <h1 class="subtitle">Provider {recoveryDocument.provider_url}</h1>
-              <div class="block">
-                {currentVersion === 0 ? <p>
-                  Set to recover the latest version
-                </p> : <p>
-                  Set to recover the version number {currentVersion}
-                </p>}
-                <p>Specify other version below or use the latest</p>
-              </div>
-              <div class="container">
-                <NumberInput
-                  label="Version"
-                  placeholder="version number to recover"
-                  grabFocus
-                  bind={[otherVersion, setOtherVersion]} />
-              </div>
-            </div>
-            <div style={{ marginTop: '2em', display: 'flex', justifyContent: 'space-between' }}>
-              <button class="button" onClick={() => setSelectingVersion(false)}>Cancel</button>
-              <div class="buttons">
-                <button class="button " onClick={() => selectVersion(otherProvider, 0)}>Use latest</button>
-                <AsyncButton onClick={() => selectVersion(otherProvider, parseInt(otherVersion, 10))}>Confirm</AsyncButton>
-              </div>
-            </div>
-          </div>
-          <div class="column">
-            .
-          </div>
-        </div>
 
-      </AnastasisClientFrame>
-    );
+  if (!recoveryDocument) {
+    return <ChooseAnotherProviderScreen
+      providers={providerList} selected=""
+      onChange={(newProv) => doSelectVersion(newProv, 0)}
+    />
   }
 
-  function ProviderCard({ provider, selected }: { selected?: boolean; provider: string }): VNode {
-    return <button key={provider} class="button block is-fullwidth" style={{ border: selected ? '2px solid green' : undefined }}
-      onClick={(e) => selectVersion(provider, currentVersion)}
-    >
-      {provider}
-    </button>
+  if (selectingVersion) {
+    return <SelectOtherVersionProviderScreen providers={providerList}
+      provider={recoveryDocument.provider_url} version={recoveryDocument.version}
+      onCancel={() => setSelectingVersion(false)}
+      onConfirm={doSelectVersion}
+    />
   }
 
   return (
@@ -125,13 +66,6 @@ export function SecretSelectionScreen(): VNode {
               <button class="button" onClick={(e) => setSelectingVersion(true)}>Change secret's version</button>
             </div>
           </div>
-          <p class="block">
-            Or you can use another provider
-          </p>
-          {providerList.map(prov => {
-            if (recoveryDocument.provider_url === prov) return;
-            return <ProviderCard key={prov} provider={prov} />
-          })}
         </div>
         <div class="column">
           <p>Secret found, you can select another version or continue to the challenges solving</p>
@@ -140,3 +74,93 @@ export function SecretSelectionScreen(): VNode {
     </AnastasisClientFrame>
   );
 }
+
+
+function ChooseAnotherProviderScreen({ providers, selected, onChange }: { selected: string; providers: string[]; onChange: (prov: string) => void }): VNode {
+  return (
+    <AnastasisClientFrame hideNext="Recovery document not found" title="Recovery: Problem">
+      <p>No recovery document found, try with another provider</p>
+      <div class="field">
+        <label class="label">Provider</label>
+        <div class="control is-expanded has-icons-left">
+          <div class="select is-fullwidth">
+            <select onChange={(e) => onChange(e.currentTarget.value)} value={selected}>
+              <option key="none" disabled selected value=""> Choose a provider </option>
+              {providers.map(prov => (
+                <option key={prov} value={prov}>
+                  {prov}
+                </option>
+              ))}
+            </select>
+            <div class="icon is-small is-left">
+              <i class="mdi mdi-earth" />
+            </div>
+          </div>
+        </div>
+      </div>
+    </AnastasisClientFrame>
+  );
+}
+
+function SelectOtherVersionProviderScreen({ providers, provider, version, onConfirm, onCancel }: { onCancel: () => void; provider: string; version: number; providers: string[]; onConfirm: (prov: string, v: number) => Promise<void>; }): VNode {
+  const [otherProvider, setOtherProvider] = useState<string>(provider);
+  const [otherVersion, setOtherVersion] = useState(`${version}`);
+
+  return (
+    <AnastasisClientFrame hideNav title="Recovery: Select secret">
+      <div class="columns">
+        <div class="column">
+          <div class="box">
+            <h1 class="subtitle">Provider {otherProvider}</h1>
+            <div class="block">
+              {version === 0 ? <p>
+                Set to recover the latest version
+              </p> : <p>
+                Set to recover the version number {version}
+              </p>}
+              <p>Specify other version below or use the latest</p>
+            </div>
+
+            <div class="field">
+              <label class="label">Provider</label>
+              <div class="control is-expanded has-icons-left">
+                <div class="select is-fullwidth">
+                  <select onChange={(e) => setOtherProvider(e.currentTarget.value)} value={otherProvider}>
+                    <option key="none" disabled selected value=""> Choose a provider </option>
+                    {providers.map(prov => (
+                      <option key={prov} value={prov}>
+                        {prov}
+                      </option>
+                    ))}
+                  </select>
+                  <div class="icon is-small is-left">
+                    <i class="mdi mdi-earth" />
+                  </div>
+                </div>
+              </div>
+            </div>
+            <div class="container">
+              <NumberInput
+                label="Version"
+                placeholder="version number to recover"
+                grabFocus
+                bind={[otherVersion, setOtherVersion]} />
+            </div>
+          </div>
+          <div style={{ marginTop: '2em', display: 'flex', justifyContent: 'space-between' }}>
+            <button class="button" onClick={onCancel}>Cancel</button>
+            <div class="buttons">
+              <AsyncButton class="button" onClick={() => onConfirm(otherProvider, 0)}>Use latest</AsyncButton>
+              <AsyncButton class="button is-info" onClick={() => onConfirm(otherProvider, parseInt(otherVersion, 10))}>Confirm</AsyncButton>
+            </div>
+          </div>
+        </div>
+        <div class="column">
+          .
+        </div>
+      </div>
+
+    </AnastasisClientFrame>
+  );
+
+}
diff --git a/packages/anastasis-webui/src/pages/home/SolveScreen.tsx b/packages/anastasis-webui/src/pages/home/SolveScreen.tsx
index fae1b5631..bc1a88db3 100644
--- a/packages/anastasis-webui/src/pages/home/SolveScreen.tsx
+++ b/packages/anastasis-webui/src/pages/home/SolveScreen.tsx
@@ -137,7 +137,7 @@ export function SolveScreen(): VNode {
         <button class="button" onClick={onCancel}>
           Cancel
         </button>
-        <AsyncButton onClick={onNext} disabled={false}>
+        <AsyncButton class="button is-info" onClick={onNext}>
           Confirm
         </AsyncButton>
       </div>
diff --git a/packages/anastasis-webui/src/pages/home/index.tsx b/packages/anastasis-webui/src/pages/home/index.tsx
index 6ebc2a6e9..07bc7c604 100644
--- a/packages/anastasis-webui/src/pages/home/index.tsx
+++ b/packages/anastasis-webui/src/pages/home/index.tsx
@@ -120,7 +120,7 @@ export function AnastasisClientFrame(props: AnastasisClientFrameProps): VNode {
           {!props.hideNav ? (
             <div style={{ marginTop: '2em', display: 'flex', justifyContent: 'space-between' }}>
               <button class="button" onClick={() => reducer.back()}>Back</button>
-              <AsyncButton data-tooltip={props.hideNext} onClick={next} disabled={props.hideNext !== undefined}>Next</AsyncButton>
+              <AsyncButton class="button is-info" data-tooltip={props.hideNext} onClick={next} disabled={props.hideNext !== undefined}>Next</AsyncButton>
             </div>
           ) : null}
         </section>
@@ -140,7 +140,7 @@ const AnastasisClient: FunctionalComponent = () => {
   );
 };
 
-const AnastasisClientImpl: FunctionalComponent = () => {
+function AnastasisClientImpl(): VNode {
   const reducer = useAnastasisContext()
   if (!reducer) {
     return <p>Fatal: Reducer must be in context.</p>;
@@ -228,7 +228,7 @@ const AnastasisClientImpl: FunctionalComponent = () => {
       </div>
     </AnastasisClientFrame>
   );
-};
+}
 
 /**
  * Show a dismissible error banner if there is a current error.