taler/wallet-core
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Activity

selecting provider

Browse Source
This commit is contained in:
Sebastian 2021-11-05 11:17:42 -03:00
parent 6fc3aa0b31
commit 543ed2a106
No known key found for this signature in database
GPG Key ID: BE4FF68352439FC1
5 changed files with 109 additions and 86 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

4
packages/anastasis-webui/src/components/AsyncButton.tsx
View File

@ -41,8 +41,8 @@ export function AsyncButton({ onClick, disabled, children, ...rest }: Props): VN
return <button class="button">Loading...</button>;
}
return <span {...rest}>
<button class="button is-info" onClick={request} disabled={disabled}>
return <span data-tooltip={rest['data-tooltip']} style={{marginLeft: 5}}>
<button {...rest} onClick={request} disabled={disabled}>
{children}
</button>
</span>;

3
packages/anastasis-webui/src/pages/home/SecretSelectionScreen.stories.tsx
View File

@ -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,
},

180
packages/anastasis-webui/src/pages/home/SecretSelectionScreen.tsx
View File

@ -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<boolean>(false);
const [otherProvider, setOtherProvider] = useState<string>("");
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 <div>no reducer in context</div>
}
@ -25,7 +20,7 @@ export function SecretSelectionScreen(): VNode {
return <div>invalid state</div>
}
async function selectVersion(p: string, n: number): Promise<void> {
async function doSelectVersion(p: string, n: number): Promise<void> {
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 (
<AnastasisClientFrame hideNext="Recovery document not found" title="Recovery: Problem">
<p>No recovery document found, try with another provider</p>
<table class="table">
<tr>
<td><b>Provider</b></td>
<td>
<select onChange={(e) => setOtherProvider((e.target as any).value)}>
<option key="none" disabled selected > Choose another provider </option>
{providerList.map(prov => (
<option key={prov} value={prov}>
{prov}
</option>
))}
</select>
</td>
</tr>
</table>
</AnastasisClientFrame>
)
return <ChooseAnotherProviderScreen
providers={providerList} selected=""
onChange={(newProv) => doSelectVersion(newProv, 0)}
/>
}
if (selectingVersion) {
return (
<AnastasisClientFrame hideNav title="Recovery: Select secret">
<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 <SelectOtherVersionProviderScreen providers={providerList}
provider={recoveryDocument.provider_url} version={recoveryDocument.version}
onCancel={() => setSelectingVersion(false)}
onConfirm={doSelectVersion}
/>
}
return (
@ -125,13 +66,6 @@ export function SecretSelectionScreen(): VNode {
<button class="button" onClick={(e) => setSelectingVersion(true)}>Change secret's version</button>
</div>
</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">
<p>Secret found, you can select another version or continue to the challenges solving</p>
@ -140,3 +74,93 @@ export function SecretSelectionScreen(): VNode {
</AnastasisClientFrame>
);
}
function ChooseAnotherProviderScreen({ providers, selected, onChange }: { selected: string; providers: string[]; onChange: (prov: string) => void }): VNode {
return (
<AnastasisClientFrame hideNext="Recovery document not found" title="Recovery: Problem">
<p>No recovery document found, try with another provider</p>
<div class="field">
<label class="label">Provider</label>
<div class="control is-expanded has-icons-left">
<div class="select is-fullwidth">
<select onChange={(e) => onChange(e.currentTarget.value)} value={selected}>
<option key="none" disabled selected value=""> Choose a provider </option>
{providers.map(prov => (
<option key={prov} value={prov}>
{prov}
</option>
))}
</select>
<div class="icon is-small is-left">
<i class="mdi mdi-earth" />
</div>
</div>
</div>
</div>
</AnastasisClientFrame>
);
}
function SelectOtherVersionProviderScreen({ providers, provider, version, onConfirm, onCancel }: { onCancel: () => void; provider: string; version: number; providers: string[]; onConfirm: (prov: string, v: number) => Promise<void>; }): VNode {
const [otherProvider, setOtherProvider] = useState<string>(provider);
const [otherVersion, setOtherVersion] = useState(`${version}`);
return (
<AnastasisClientFrame hideNav title="Recovery: Select secret">
<div class="columns">
<div class="column">
<div class="box">
<h1 class="subtitle">Provider {otherProvider}</h1>
<div class="block">
{version === 0 ? <p>
Set to recover the latest version
</p> : <p>
Set to recover the version number {version}
</p>}
<p>Specify other version below or use the latest</p>
</div>
<div class="field">
<label class="label">Provider</label>
<div class="control is-expanded has-icons-left">
<div class="select is-fullwidth">
<select onChange={(e) => setOtherProvider(e.currentTarget.value)} value={otherProvider}>
<option key="none" disabled selected value=""> Choose a provider </option>
{providers.map(prov => (
<option key={prov} value={prov}>
{prov}
</option>
))}
</select>
<div class="icon is-small is-left">
<i class="mdi mdi-earth" />
</div>
</div>
</div>
</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={onCancel}>Cancel</button>
<div class="buttons">
<AsyncButton class="button" onClick={() => onConfirm(otherProvider, 0)}>Use latest</AsyncButton>
<AsyncButton class="button is-info" onClick={() => onConfirm(otherProvider, parseInt(otherVersion, 10))}>Confirm</AsyncButton>
</div>
</div>
</div>
<div class="column">
.
</div>
</div>
</AnastasisClientFrame>
);
}

2
packages/anastasis-webui/src/pages/home/SolveScreen.tsx
View File

@ -137,7 +137,7 @@ export function SolveScreen(): VNode {
<button class="button" onClick={onCancel}>
Cancel
</button>
<AsyncButton onClick={onNext} disabled={false}>
<AsyncButton class="button is-info" onClick={onNext}>
Confirm
</AsyncButton>
</div>

6
packages/anastasis-webui/src/pages/home/index.tsx
View File

@ -120,7 +120,7 @@ export function AnastasisClientFrame(props: AnastasisClientFrameProps): VNode {
{!props.hideNav ? (
<div style={{ marginTop: '2em', display: 'flex', justifyContent: 'space-between' }}>
<button class="button" onClick={() => reducer.back()}>Back</button>
<AsyncButton data-tooltip={props.hideNext} onClick={next} disabled={props.hideNext !== undefined}>Next</AsyncButton>
<AsyncButton class="button is-info" data-tooltip={props.hideNext} onClick={next} disabled={props.hideNext !== undefined}>Next</AsyncButton>
</div>
) : null}
</section>
@ -140,7 +140,7 @@ const AnastasisClient: FunctionalComponent = () => {
);
};
const AnastasisClientImpl: FunctionalComponent = () => {
function AnastasisClientImpl(): VNode {
const reducer = useAnastasisContext()
if (!reducer) {
return <p>Fatal: Reducer must be in context.</p>;
@ -228,7 +228,7 @@ const AnastasisClientImpl: FunctionalComponent = () => {
</div>
</AnastasisClientFrame>
);
};
}
/**
* Show a dismissible error banner if there is a current error.