diff options
author | Sebastian <sebasjm@gmail.com> | 2021-11-04 16:51:19 -0300 |
---|---|---|
committer | Sebastian <sebasjm@gmail.com> | 2021-11-04 16:51:54 -0300 |
commit | 3847f2ddb80c96a69caeeac5e312807c50f1dcbb (patch) | |
tree | bdfd72bda6407a64d9d2e6377d36cddbc175bbee | |
parent | 9e379ef399a032a3fbd86d18ede867aaf6a1821f (diff) | |
download | wallet-core-3847f2ddb80c96a69caeeac5e312807c50f1dcbb.tar.xz |
secret selecting
-rw-r--r-- | packages/anastasis-webui/src/pages/home/SecretSelectionScreen.tsx | 134 |
1 files changed, 68 insertions, 66 deletions
diff --git a/packages/anastasis-webui/src/pages/home/SecretSelectionScreen.tsx b/packages/anastasis-webui/src/pages/home/SecretSelectionScreen.tsx index e1aeb3939..e8af75229 100644 --- a/packages/anastasis-webui/src/pages/home/SecretSelectionScreen.tsx +++ b/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 { - if (!reducer) return; - reducer.runTransaction(async (tx) => { + async function selectVersion(p: string, n: number): Promise<void> { + if (!reducer) return Promise.resolve(); + 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> - <table class="table"> - <tr> - <td><b>Provider</b></td> - <td> - <select onChange={(e) => setOtherProvider((e.target as any).value)}> - {providerList.map(prov => ( - <option key={prov} selected={prov === recoveryDocument.provider_url} value={prov}> - {prov} - </option> - ))} - </select> - </td> - </tr> - <tr> - <td><b>Version</b></td> - <td> - <input - value={otherVersion} - onChange={(e) => setOtherVersion(Number((e.target as HTMLInputElement).value))} - type="number" /> - </td> - <td> - <a onClick={() => setOtherVersion(0)}>set to latest version</a> - </td> - </tr> - </table> - <div style={{ marginTop: '2em', display: 'flex', justifyContent: 'space-between' }}> - <button class="button" onClick={() => setSelectingVersion(false)}>Cancel</button> - <button class="button is-info" onClick={() => selectVersion(otherProvider, otherVersion)}>Confirm</button> + <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> ); } + + 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="box"> + <div class="column"> + <div class="box" style={{ border: '2px solid green' }}> <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="block"> + {currentVersion === 0 ? <p> + Set to recover the latest version + </p> : <p> + Set to recover the version number {currentVersion} + </p>} + </div> <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"> - <button class="button" disabled onClick={() => reducer.reset()}>Change provider</button> - </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 is-two-third"> + <div class="column"> <p>Secret found, you can select another version or continue to the challenges solving</p> </div> </div> |