diff options
author | Sebastian <sebasjm@gmail.com> | 2021-10-19 10:56:52 -0300 |
---|---|---|
committer | Sebastian <sebasjm@gmail.com> | 2021-10-19 11:05:32 -0300 |
commit | 5883d42d800c7b444c59d626bcaa5abca7dc83d0 (patch) | |
tree | ac42ad7b9e26c4dd2145a31101305884906a543e /packages/anastasis-webui/src/pages/home/AuthenticationEditorScreen.tsx | |
parent | 269022a526b670d602ca146f4df02850983bb72e (diff) | |
download | wallet-core-5883d42d800c7b444c59d626bcaa5abca7dc83d0.tar.xz |
add template from merchant backoffice
Diffstat (limited to 'packages/anastasis-webui/src/pages/home/AuthenticationEditorScreen.tsx')
-rw-r--r-- | packages/anastasis-webui/src/pages/home/AuthenticationEditorScreen.tsx | 116 |
1 files changed, 116 insertions, 0 deletions
diff --git a/packages/anastasis-webui/src/pages/home/AuthenticationEditorScreen.tsx b/packages/anastasis-webui/src/pages/home/AuthenticationEditorScreen.tsx new file mode 100644 index 000000000..5357891a9 --- /dev/null +++ b/packages/anastasis-webui/src/pages/home/AuthenticationEditorScreen.tsx @@ -0,0 +1,116 @@ +/* eslint-disable @typescript-eslint/camelcase */ +import { h, VNode } from "preact"; +import { useState } from "preact/hooks"; +import { AuthMethod, ReducerStateBackup } from "anastasis-core"; +import { AnastasisReducerApi } from "../../hooks/use-anastasis-reducer"; +import { AuthMethodEmailSetup } from "./AuthMethodEmailSetup"; +import { AuthMethodPostSetup } from "./AuthMethodPostSetup"; +import { AuthMethodQuestionSetup } from "./AuthMethodQuestionSetup"; +import { AuthMethodSmsSetup } from "./AuthMethodSmsSetup"; +import { AnastasisClientFrame } from "./index"; + +export function AuthenticationEditorScreen(props: AuthenticationEditorProps): VNode { + const [selectedMethod, setSelectedMethod] = useState<string | undefined>( + undefined + ); + const { reducer, backupState } = props; + const providers = backupState.authentication_providers!; + const authAvailableSet = new Set<string>(); + for (const provKey of Object.keys(providers)) { + const p = providers[provKey]; + if ("http_status" in p && (!("error_code" in p)) && p.methods) { + for (const meth of p.methods) { + authAvailableSet.add(meth.type); + } + } + } + if (selectedMethod) { + const cancel = (): void => setSelectedMethod(undefined); + const addMethod = (args: any): void => { + reducer.transition("add_authentication", args); + setSelectedMethod(undefined); + }; + const methodMap: Record< + string, (props: AuthMethodSetupProps) => h.JSX.Element + > = { + sms: AuthMethodSmsSetup, + question: AuthMethodQuestionSetup, + email: AuthMethodEmailSetup, + post: AuthMethodPostSetup, + }; + const AuthSetup = methodMap[selectedMethod] ?? AuthMethodNotImplemented; + return ( + <AuthSetup + cancel={cancel} + addAuthMethod={addMethod} + method={selectedMethod} /> + ); + } + function MethodButton(props: { method: string; label: string }): VNode { + return ( + <button + disabled={!authAvailableSet.has(props.method)} + onClick={() => { + setSelectedMethod(props.method); + reducer.dismissError(); + }} + > + {props.label} + </button> + ); + } + const configuredAuthMethods: AuthMethod[] = backupState.authentication_methods ?? []; + const haveMethodsConfigured = configuredAuthMethods.length; + return ( + <AnastasisClientFrame title="Backup: Configure Authentication Methods"> + <div> + <MethodButton method="sms" label="SMS" /> + <MethodButton method="email" label="Email" /> + <MethodButton method="question" label="Question" /> + <MethodButton method="post" label="Physical Mail" /> + <MethodButton method="totp" label="TOTP" /> + <MethodButton method="iban" label="IBAN" /> + </div> + <h2>Configured authentication methods</h2> + {haveMethodsConfigured ? ( + configuredAuthMethods.map((x, i) => { + return ( + <p key={i}> + {x.type} ({x.instructions}){" "} + <button + onClick={() => reducer.transition("delete_authentication", { + authentication_method: i, + })} + > + Delete + </button> + </p> + ); + }) + ) : ( + <p>No authentication methods configured yet.</p> + )} + </AnastasisClientFrame> + ); +} + +interface AuthMethodSetupProps { + method: string; + addAuthMethod: (x: any) => void; + cancel: () => void; +} + +function AuthMethodNotImplemented(props: AuthMethodSetupProps): VNode { + return ( + <AnastasisClientFrame hideNav title={`Add ${props.method} authentication`}> + <p>This auth method is not implemented yet, please choose another one.</p> + <button onClick={() => props.cancel()}>Cancel</button> + </AnastasisClientFrame> + ); +} + +interface AuthenticationEditorProps { + reducer: AnastasisReducerApi; + backupState: ReducerStateBackup; +} + |