diff options
author | Sebastian <sebasjm@gmail.com> | 2021-11-11 13:22:14 -0300 |
---|---|---|
committer | Sebastian <sebasjm@gmail.com> | 2021-11-11 13:22:20 -0300 |
commit | 4a83e9639d59d4a3116d17d8633ea0d8c69aaa62 (patch) | |
tree | 1f14196c392be1224f76d496c68ebd74176e433d /packages/anastasis-webui/src/pages/home/SecretSelectionScreen.tsx | |
parent | 0ac7433ea7fa952c46062daef1c3de535d92b7f3 (diff) | |
download | wallet-core-4a83e9639d59d4a3116d17d8633ea0d8c69aaa62.tar.xz |
changes from feedback
better backup and recovery ending screen
async button on modal and solve challenges
use providers name when possible
Diffstat (limited to 'packages/anastasis-webui/src/pages/home/SecretSelectionScreen.tsx')
-rw-r--r-- | packages/anastasis-webui/src/pages/home/SecretSelectionScreen.tsx | 42 |
1 files changed, 24 insertions, 18 deletions
diff --git a/packages/anastasis-webui/src/pages/home/SecretSelectionScreen.tsx b/packages/anastasis-webui/src/pages/home/SecretSelectionScreen.tsx index 4000f9bfe..7e517abfe 100644 --- a/packages/anastasis-webui/src/pages/home/SecretSelectionScreen.tsx +++ b/packages/anastasis-webui/src/pages/home/SecretSelectionScreen.tsx @@ -1,3 +1,4 @@ +import { AuthenticationProviderStatus, AuthenticationProviderStatusOk } from "anastasis-core"; import { h, VNode } from "preact"; import { useState } from "preact/hooks"; import { AsyncButton } from "../../components/AsyncButton"; @@ -38,15 +39,13 @@ export function SecretSelectionScreen(): VNode { }); } - const providerList = Object.keys( - reducer.currentReducerState.authentication_providers ?? {}, - ); + const provs = reducer.currentReducerState.authentication_providers ?? {}; const recoveryDocument = reducer.currentReducerState.recovery_document; if (!recoveryDocument) { return ( <ChooseAnotherProviderScreen - providers={providerList} + providers={provs} selected="" onChange={(newProv) => doSelectVersion(newProv, 0)} /> @@ -56,7 +55,7 @@ export function SecretSelectionScreen(): VNode { if (selectingVersion) { return ( <SelectOtherVersionProviderScreen - providers={providerList} + providers={provs} provider={recoveryDocument.provider_url} version={recoveryDocument.version} onCancel={() => setSelectingVersion(false)} @@ -69,12 +68,15 @@ export function SecretSelectionScreen(): VNode { return <AddingProviderScreen onCancel={() => setManageProvider(false)} />; } + const provierInfo = provs[recoveryDocument.provider_url] as AuthenticationProviderStatusOk return ( <AnastasisClientFrame title="Recovery: Select secret"> <div class="columns"> <div class="column"> <div class="box" style={{ border: "2px solid green" }}> - <h1 class="subtitle">{recoveryDocument.provider_url}</h1> + <h1 class="subtitle"> + {provierInfo.business_name} + </h1> <div class="block"> {currentVersion === 0 ? ( <p>Set to recover the latest version</p> @@ -111,7 +113,7 @@ function ChooseAnotherProviderScreen({ onChange, }: { selected: string; - providers: string[]; + providers: { [url: string]: AuthenticationProviderStatus }; onChange: (prov: string) => void; }): VNode { return ( @@ -132,11 +134,13 @@ function ChooseAnotherProviderScreen({ {" "} Choose a provider{" "} </option> - {providers.map((prov) => ( - <option key={prov} value={prov}> - {prov} + {Object.keys(providers).map((url) => { + const p = providers[url] + if (!("methods" in p)) return null + return <option key={url} value={url}> + {p.business_name} </option> - ))} + })} </select> <div class="icon is-small is-left"> <i class="mdi mdi-earth" /> @@ -158,20 +162,21 @@ function SelectOtherVersionProviderScreen({ onCancel: () => void; provider: string; version: number; - providers: string[]; + providers: { [url: string]: AuthenticationProviderStatus }; onConfirm: (prov: string, v: number) => Promise<void>; }): VNode { const [otherProvider, setOtherProvider] = useState<string>(provider); const [otherVersion, setOtherVersion] = useState( version > 0 ? String(version) : "", ); + const otherProviderInfo = providers[otherProvider] as AuthenticationProviderStatusOk return ( <AnastasisClientFrame hideNav title="Recovery: Select secret"> <div class="columns"> <div class="column"> <div class="box"> - <h1 class="subtitle">Provider {otherProvider}</h1> + <h1 class="subtitle">Provider {otherProviderInfo.business_name}</h1> <div class="block"> {version === 0 ? ( <p>Set to recover the latest version</p> @@ -193,11 +198,13 @@ function SelectOtherVersionProviderScreen({ {" "} Choose a provider{" "} </option> - {providers.map((prov) => ( - <option key={prov} value={prov}> - {prov} + {Object.keys(providers).map((url) => { + const p = providers[url] + if (!("methods" in p)) return null + return <option key={url} value={url}> + {p.business_name} </option> - ))} + })} </select> <div class="icon is-small is-left"> <i class="mdi mdi-earth" /> @@ -242,7 +249,6 @@ function SelectOtherVersionProviderScreen({ </div> </div> </div> - <div class="column">.</div> </div> </AnastasisClientFrame> ); |