1 files changed, 66 insertions, 0 deletions
diff --git a/packages/anastasis-webui/src/pages/home/SecretSelectionScreen.tsx b/packages/anastasis-webui/src/pages/home/SecretSelectionScreen.tsx
new file mode 100644
index 000000000..bbdcf8c2e
--- /dev/null
+++ b/packages/anastasis-webui/src/pages/home/SecretSelectionScreen.tsx
@@ -0,0 +1,66 @@
+/* eslint-disable @typescript-eslint/camelcase */
+import { h, VNode } from "preact";
+import { useState } from "preact/hooks";
+import { RecoveryReducerProps, AnastasisClientFrame } from "./index";
+
+export function SecretSelectionScreen(props: RecoveryReducerProps): VNode {
+  const { reducer, recoveryState } = props;
+  const [selectingVersion, setSelectingVersion] = useState<boolean>(false);
+  const [otherVersion, setOtherVersion] = useState<number>(
+    recoveryState.recovery_document?.version ?? 0
+  );
+  const recoveryDocument = recoveryState.recovery_document!;
+  const [otherProvider, setOtherProvider] = useState<string>("");
+  function selectVersion(p: string, n: number): void {
+    reducer.runTransaction(async (tx) => {
+      await tx.transition("change_version", {
+        version: n,
+        provider_url: p,
+      });
+      setSelectingVersion(false);
+    });
+  }
+  if (selectingVersion) {
+    return (
+      <AnastasisClientFrame hideNav title="Recovery: Select secret">
+        <p>Select a different version of the secret</p>
+        <select onChange={(e) => setOtherProvider((e.target as any).value)}>
+          {Object.keys(recoveryState.authentication_providers ?? {}).map(
+            (x, i) => (
+              <option key={i} selected={x === recoveryDocument.provider_url} value={x}>
+                {x}
+              </option>
+            )
+          )}
+        </select>
+        <div>
+          <input
+            value={otherVersion}
+            onChange={(e) => setOtherVersion(Number((e.target as HTMLInputElement).value))}
+            type="number" />
+          <button onClick={() => selectVersion(otherProvider, otherVersion)}>
+            Use this version
+          </button>
+        </div>
+        <div>
+          <button onClick={() => selectVersion(otherProvider, 0)}>
+            Use latest version
+          </button>
+        </div>
+        <div>
+          <button onClick={() => setSelectingVersion(false)}>Cancel</button>
+        </div>
+      </AnastasisClientFrame>
+    );
+  }
+  return (
+    <AnastasisClientFrame title="Recovery: Select secret">
+      <p>Provider: {recoveryDocument.provider_url}</p>
+      <p>Secret version: {recoveryDocument.version}</p>
+      <p>Secret name: {recoveryDocument.version}</p>
+      <button onClick={() => setSelectingVersion(true)}>
+        Select different secret
+      </button>
+    </AnastasisClientFrame>
+  );
+}