secret selecting

packages/anastasis-webui/src/pages/home/SecretSelectionScreen.tsx

@@ -1,6 +1,9 @@
 /* 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";
+import { NumberInput } from "../../components/fields/NumberInput";
 import { useAnastasisContext } from "../../context/anastasis";
 import { AnastasisClientFrame } from "./index";
 
@@ -9,11 +12,11 @@ export function SecretSelectionScreen(): VNode {
   const [otherProvider, setOtherProvider] = useState<string>("");
   const reducer = useAnastasisContext()
 
-  const currentVersion = reducer?.currentReducerState
+  const currentVersion = (reducer?.currentReducerState
     && ("recovery_document" in reducer.currentReducerState)
-    && reducer.currentReducerState.recovery_document?.version;
+    && reducer.currentReducerState.recovery_document?.version) || 0;
 
-  const [otherVersion, setOtherVersion] = useState<number>(currentVersion || 0);
+  const [otherVersion, setOtherVersion] = useState("");
 
   if (!reducer) {
     return <div>no reducer in context</div>
@@ -22,15 +25,15 @@ export function SecretSelectionScreen(): VNode {
     return <div>invalid state</div>
   }
 
-  function selectVersion(p: string, n: number): void {
+  async function selectVersion(p: string, n: number): Promise<void> {
-    if (!reducer) return;
+    if (!reducer) return Promise.resolve();
-    reducer.runTransaction(async (tx) => {
+    return reducer.runTransaction(async (tx) => {
       await tx.transition("change_version", {
         version: n,
         provider_url: p,
       });
+      setSelectingVersion(false);
     });
-    setSelectingVersion(false);
   }
 
   const providerList = Object.keys(reducer.currentReducerState.authentication_providers ?? {})
@@ -60,78 +63,77 @@ export function SecretSelectionScreen(): VNode {
   if (selectingVersion) {
     return (
       <AnastasisClientFrame hideNav title="Recovery: Select secret">
-        <p>Select a different version of the secret</p>
+        <div class="columns">
-        <table class="table">
+          <div class="column">
-          <tr>
+            <div class="box">
-            <td><b>Provider</b></td>
+              <h1 class="subtitle">Provider {recoveryDocument.provider_url}</h1>
-            <td>
+              <div class="block">
-              <select onChange={(e) => setOtherProvider((e.target as any).value)}>
+                {currentVersion === 0 ? <p>
-                {providerList.map(prov => (
+                  Set to recover the latest version
-                  <option key={prov} selected={prov === recoveryDocument.provider_url} value={prov}>
+                </p> : <p>
-                    {prov}
+                  Set to recover the version number {currentVersion}
-                  </option>
+                </p>}
-                ))}
+                <p>Specify other version below or use the latest</p>
-              </select>
+              </div>
-            </td>
+              <div class="container">
-          </tr>
+                <NumberInput
-          <tr>
+                  label="Version"
-            <td><b>Version</b></td>
+                  placeholder="version number to recover"
-            <td>
+                  grabFocus
-              <input
+                  bind={[otherVersion, setOtherVersion]} />
-                value={otherVersion}
+              </div>
-                onChange={(e) => setOtherVersion(Number((e.target as HTMLInputElement).value))}
+            </div>
-                type="number" />
+            <div style={{ marginTop: '2em', display: 'flex', justifyContent: 'space-between' }}>
-            </td>
+              <button class="button" onClick={() => setSelectingVersion(false)}>Cancel</button>
-            <td>
+              <div class="buttons">
-              <a onClick={() => setOtherVersion(0)}>set to latest version</a>
+                <button class="button " onClick={() => selectVersion(otherProvider, 0)}>Use latest</button>
-            </td>
+                <AsyncButton onClick={() => selectVersion(otherProvider, parseInt(otherVersion, 10))}>Confirm</AsyncButton>
-          </tr>
+              </div>
-        </table>
+            </div>
-        <div style={{ marginTop: '2em', display: 'flex', justifyContent: 'space-between' }}>
+          </div>
-          <button class="button" onClick={() => setSelectingVersion(false)}>Cancel</button>
+          <div class="column">
-          <button class="button is-info" onClick={() => selectVersion(otherProvider, otherVersion)}>Confirm</button>
+            .
+          </div>
         </div>
 
       </AnastasisClientFrame>
     );
   }
+
+  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>
+  }
+
   return (
     <AnastasisClientFrame title="Recovery: Select secret">
       <div class="columns">
-        <div class="column is-half">
+        <div class="column">
-          <div class="box">
+          <div class="box" style={{ border: '2px solid green' }}>
             <h1 class="subtitle">{recoveryDocument.provider_url}</h1>
-            <table class="table">
+            <div class="block">
-              <tr>
+              {currentVersion === 0 ? <p>
-                <td>
+                Set to recover the latest version
-                  <b>Secret version</b>
+              </p> : <p>
-                  <span class="icon has-tooltip-right" data-tooltip="Secret version to be recovered">
+                Set to recover the version number {currentVersion}
-                    <i class="mdi mdi-information" />
+              </p>}
-                  </span>
+            </div>
-                </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>
+              <button class="button" onClick={(e) => setSelectingVersion(true)}>Change secret's version</button>
             </div>
           </div>
-          <div class="buttons is-right">
+          <p class="block">
-            <button class="button" disabled onClick={() => reducer.reset()}>Change provider</button>
+            Or you can use another provider
-          </div>
+          </p>
+          {providerList.map(prov => {
+            if (recoveryDocument.provider_url === prov) return;
+            return <ProviderCard key={prov} provider={prov} />
+          })}
         </div>
-        <div class="column is-two-third">
+        <div class="column">
           <p>Secret found, you can select another version or continue to the challenges solving</p>
         </div>
       </div>