diff options
author | Sebastian <sebasjm@gmail.com> | 2021-11-04 12:37:27 -0300 |
---|---|---|
committer | Sebastian <sebasjm@gmail.com> | 2021-11-04 12:37:58 -0300 |
commit | 4ac0b23793417536281f7d3c67c4c954da795f88 (patch) | |
tree | 8f793d8d8cd6b9f4755d3cdcb3a1fe1f00ec1fba /packages/anastasis-webui/src/pages/home/AuthenticationEditorScreen.tsx | |
parent | c87be3707efe7a675599b37f9327c6810d5fc011 (diff) | |
download | wallet-core-4ac0b23793417536281f7d3c67c4c954da795f88.tar.xz |
testing provider screen
Diffstat (limited to 'packages/anastasis-webui/src/pages/home/AuthenticationEditorScreen.tsx')
-rw-r--r-- | packages/anastasis-webui/src/pages/home/AuthenticationEditorScreen.tsx | 89 |
1 files changed, 53 insertions, 36 deletions
diff --git a/packages/anastasis-webui/src/pages/home/AuthenticationEditorScreen.tsx b/packages/anastasis-webui/src/pages/home/AuthenticationEditorScreen.tsx index ab482044f..b95d3f1e3 100644 --- a/packages/anastasis-webui/src/pages/home/AuthenticationEditorScreen.tsx +++ b/packages/anastasis-webui/src/pages/home/AuthenticationEditorScreen.tsx @@ -1,7 +1,8 @@ /* eslint-disable @typescript-eslint/camelcase */ import { AuthMethod } from "anastasis-core"; -import { ComponentChildren, h, VNode } from "preact"; +import { ComponentChildren, Fragment, h, VNode } from "preact"; import { useState } from "preact/hooks"; +import { TextInput } from "../../components/fields/TextInput"; import { useAnastasisContext } from "../../context/anastasis"; import { authMethods, KnownAuthMethods } from "./authMethod"; import { AnastasisClientFrame } from "./index"; @@ -13,6 +14,7 @@ const getKeys = Object.keys as <T extends object>(obj: T) => Array<keyof T> export function AuthenticationEditorScreen(): VNode { const [noProvidersAck, setNoProvidersAck] = useState(false) const [selectedMethod, setSelectedMethod] = useState<KnownAuthMethods | undefined>(undefined); + const [addingProvider, setAddingProvider] = useState<string | undefined>(undefined) const reducer = useAnastasisContext() if (!reducer) { @@ -62,36 +64,58 @@ export function AuthenticationEditorScreen(): VNode { }; const AuthSetup = authMethods[selectedMethod].screen ?? AuthMethodNotImplemented; - return ( + return (<Fragment> <AuthSetup cancel={cancel} configured={camByType[selectedMethod] || []} addAuthMethod={addMethod} method={selectedMethod} /> + + {!authAvailableSet.has(selectedMethod) && <ConfirmModal active + onCancel={cancel} description="No providers founds" label="Add a provider manually" + onConfirm={() => { + null + }} + > + We have found no trusted cloud providers for your recovery secret. You can add a provider manually. + To add a provider you must know the provider URL (e.g. https://provider.com) + <p> + <a>More about cloud providers</a> + </p> + </ConfirmModal>} + + </Fragment> ); } + + if (addingProvider !== undefined) { + return <div /> + } + function MethodButton(props: { method: KnownAuthMethods }): VNode { + if (authMethods[props.method].skip) return <div /> + return ( <div class="block"> <button style={{ justifyContent: 'space-between' }} class="button is-fullwidth" onClick={() => { - if (!authAvailableSet.has(props.method)) { - //open add sms dialog - } else { - setSelectedMethod(props.method); - } - if (reducer) reducer.dismissError(); + setSelectedMethod(props.method); }} > <div style={{ display: 'flex' }}> <span class="icon "> {authMethods[props.method].icon} </span> - <span> - {authMethods[props.method].label} - </span> + {authAvailableSet.has(props.method) ? + <span> + Add a {authMethods[props.method].label} challenge + </span> : + <span> + Add a {authMethods[props.method].label} provider + </span> + } </div> {!authAvailableSet.has(props.method) && <span class="icon has-text-danger" > @@ -111,41 +135,34 @@ export function AuthenticationEditorScreen(): VNode { return ( <AnastasisClientFrame title="Backup: Configure Authentication Methods" hideNext={errors}> <div class="columns"> - <div class="column is-half"> + <div class="column one-third"> <div> {getKeys(authMethods).map(method => <MethodButton key={method} method={method} />)} </div> - {authAvailableSet.size === 0 && <ConfirmModal active={!noProvidersAck} onCancel={() => setNoProvidersAck(true)} description="No providers founds" label="Add a provider manually"> + {authAvailableSet.size === 0 && <ConfirmModal active={!noProvidersAck} + onCancel={() => setNoProvidersAck(true)} description="No providers founds" label="Add a provider manually" + onConfirm={() => { + null + }} + > We have found no trusted cloud providers for your recovery secret. You can add a provider manually. To add a provider you must know the provider URL (e.g. https://provider.com) <p> <a>More about cloud providers</a> </p> </ConfirmModal>} - - {/* {haveMethodsConfigured && ( - configuredAuthMethods.map((x, i) => { - return ( - <p key={i}> - {x.type} ({x.instructions}){" "} - <button class="button is-danger is-small" - onClick={() => reducer.transition("delete_authentication", { - authentication_method: i, - })} - > - Remove - </button> - </p> - ); - }) - )} */} </div> - <div class="column is-half"> - When recovering your wallet, you will be asked to verify your identity via the methods you configure here. - - <b>Explain the exclamation marks</b> - - <a>Explain how to add providers</a> + <div class="column two-third"> + <p class="block"> + When recovering your wallet, you will be asked to verify your identity via the methods you configure here. + The list of authentication method is defined by the backup provider list. + </p> + <p class="block"> + <button class="button is-info">Manage the backup provider's list</button> + </p> + {authAvailableSet.size > 0 && <p class="block"> + We couldn't find provider for some of the authentication methods. + </p>} </div> </div> </AnastasisClientFrame> |