From 543ed2a106f3bab28bc0f4b97ade00afb524b4ee Mon Sep 17 00:00:00 2001 From: Sebastian Date: Fri, 5 Nov 2021 11:17:42 -0300 Subject: selecting provider --- .../anastasis-webui/src/components/AsyncButton.tsx | 4 +- .../pages/home/SecretSelectionScreen.stories.tsx | 3 +- .../src/pages/home/SecretSelectionScreen.tsx | 180 ++++++++++++--------- .../anastasis-webui/src/pages/home/SolveScreen.tsx | 2 +- packages/anastasis-webui/src/pages/home/index.tsx | 6 +- 5 files changed, 109 insertions(+), 86 deletions(-) diff --git a/packages/anastasis-webui/src/components/AsyncButton.tsx b/packages/anastasis-webui/src/components/AsyncButton.tsx index bb2cc0fd8..92bef2219 100644 --- a/packages/anastasis-webui/src/components/AsyncButton.tsx +++ b/packages/anastasis-webui/src/components/AsyncButton.tsx @@ -41,8 +41,8 @@ export function AsyncButton({ onClick, disabled, children, ...rest }: Props): VN return ; } - return - ; diff --git a/packages/anastasis-webui/src/pages/home/SecretSelectionScreen.stories.tsx b/packages/anastasis-webui/src/pages/home/SecretSelectionScreen.stories.tsx index f56939090..6919eebad 100644 --- a/packages/anastasis-webui/src/pages/home/SecretSelectionScreen.stories.tsx +++ b/packages/anastasis-webui/src/pages/home/SecretSelectionScreen.stories.tsx @@ -1,4 +1,3 @@ -/* eslint-disable @typescript-eslint/camelcase */ /* This file is part of GNU Taler (C) 2021 Taler Systems S.A. @@ -40,7 +39,7 @@ export default { export const Example = createExample(TestedComponent, { ...reducerStatesExample.secretSelection, recovery_document: { - provider_url: 'http://anastasis.url/', + provider_url: 'https://kudos.demo.anastasis.lu/', secret_name: 'secretName', version: 1, }, diff --git a/packages/anastasis-webui/src/pages/home/SecretSelectionScreen.tsx b/packages/anastasis-webui/src/pages/home/SecretSelectionScreen.tsx index e8af75229..8aa5ed2f7 100644 --- a/packages/anastasis-webui/src/pages/home/SecretSelectionScreen.tsx +++ b/packages/anastasis-webui/src/pages/home/SecretSelectionScreen.tsx @@ -1,5 +1,3 @@ -/* 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"; @@ -9,15 +7,12 @@ import { AnastasisClientFrame } from "./index"; export function SecretSelectionScreen(): VNode { const [selectingVersion, setSelectingVersion] = useState(false); - const [otherProvider, setOtherProvider] = useState(""); const reducer = useAnastasisContext() const currentVersion = (reducer?.currentReducerState && ("recovery_document" in reducer.currentReducerState) && reducer.currentReducerState.recovery_document?.version) || 0; - const [otherVersion, setOtherVersion] = useState(""); - if (!reducer) { return
no reducer in context
} @@ -25,7 +20,7 @@ export function SecretSelectionScreen(): VNode { return
invalid state
} - async function selectVersion(p: string, n: number): Promise { + async function doSelectVersion(p: string, n: number): Promise { if (!reducer) return Promise.resolve(); return reducer.runTransaction(async (tx) => { await tx.transition("change_version", { @@ -38,74 +33,20 @@ export function SecretSelectionScreen(): VNode { const providerList = Object.keys(reducer.currentReducerState.authentication_providers ?? {}) const recoveryDocument = reducer.currentReducerState.recovery_document - if (!recoveryDocument) { - return ( - -

No recovery document found, try with another provider

- - - - - -
Provider - -
- - ) - } - if (selectingVersion) { - return ( - -
-
-
-

Provider {recoveryDocument.provider_url}

-
- {currentVersion === 0 ?

- Set to recover the latest version -

:

- Set to recover the version number {currentVersion} -

} -

Specify other version below or use the latest

-
-
- -
-
-
- -
- - selectVersion(otherProvider, parseInt(otherVersion, 10))}>Confirm -
-
-
-
- . -
-
- - ); + if (!recoveryDocument) { + return doSelectVersion(newProv, 0)} + /> } - function ProviderCard({ provider, selected }: { selected?: boolean; provider: string }): VNode { - return + if (selectingVersion) { + return setSelectingVersion(false)} + onConfirm={doSelectVersion} + /> } return ( @@ -125,13 +66,6 @@ export function SecretSelectionScreen(): VNode { -

- Or you can use another provider -

- {providerList.map(prov => { - if (recoveryDocument.provider_url === prov) return; - return - })}

Secret found, you can select another version or continue to the challenges solving

@@ -140,3 +74,93 @@ export function SecretSelectionScreen(): VNode { ); } + + +function ChooseAnotherProviderScreen({ providers, selected, onChange }: { selected: string; providers: string[]; onChange: (prov: string) => void }): VNode { + return ( + +

No recovery document found, try with another provider

+
+ +
+
+ +
+ +
+
+
+
+ + ); +} + +function SelectOtherVersionProviderScreen({ providers, provider, version, onConfirm, onCancel }: { onCancel: () => void; provider: string; version: number; providers: string[]; onConfirm: (prov: string, v: number) => Promise; }): VNode { + const [otherProvider, setOtherProvider] = useState(provider); + const [otherVersion, setOtherVersion] = useState(`${version}`); + + return ( + +
+
+
+

Provider {otherProvider}

+
+ {version === 0 ?

+ Set to recover the latest version +

:

+ Set to recover the version number {version} +

} +

Specify other version below or use the latest

+
+ +
+ +
+
+ +
+ +
+
+
+
+
+ +
+
+
+ +
+ onConfirm(otherProvider, 0)}>Use latest + onConfirm(otherProvider, parseInt(otherVersion, 10))}>Confirm +
+
+
+
+ . +
+
+ + + ); + +} diff --git a/packages/anastasis-webui/src/pages/home/SolveScreen.tsx b/packages/anastasis-webui/src/pages/home/SolveScreen.tsx index fae1b5631..bc1a88db3 100644 --- a/packages/anastasis-webui/src/pages/home/SolveScreen.tsx +++ b/packages/anastasis-webui/src/pages/home/SolveScreen.tsx @@ -137,7 +137,7 @@ export function SolveScreen(): VNode { - + Confirm
diff --git a/packages/anastasis-webui/src/pages/home/index.tsx b/packages/anastasis-webui/src/pages/home/index.tsx index 6ebc2a6e9..07bc7c604 100644 --- a/packages/anastasis-webui/src/pages/home/index.tsx +++ b/packages/anastasis-webui/src/pages/home/index.tsx @@ -120,7 +120,7 @@ export function AnastasisClientFrame(props: AnastasisClientFrameProps): VNode { {!props.hideNav ? (
- Next + Next
) : null} @@ -140,7 +140,7 @@ const AnastasisClient: FunctionalComponent = () => { ); }; -const AnastasisClientImpl: FunctionalComponent = () => { +function AnastasisClientImpl(): VNode { const reducer = useAnastasisContext() if (!reducer) { return

Fatal: Reducer must be in context.

; @@ -228,7 +228,7 @@ const AnastasisClientImpl: FunctionalComponent = () => { ); -}; +} /** * Show a dismissible error banner if there is a current error. -- cgit v1.2.3