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

secret selecting

Browse Source
This commit is contained in:
Sebastian 2021-11-04 16:51:19 -03:00
parent 9e379ef399
commit 3847f2ddb8
No known key found for this signature in database
GPG Key ID: BE4FF68352439FC1
1 changed files with 68 additions and 66 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -1,6 +1,9 @@
/* 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";
import { NumberInput } from "../../components/fields/NumberInput";
import { useAnastasisContext } from "../../context/anastasis";
import { AnastasisClientFrame } from "./index";
@ -9,11 +12,11 @@ export function SecretSelectionScreen(): VNode {
const [otherProvider, setOtherProvider] = useState<string>("");
const reducer = useAnastasisContext()
const currentVersion = reducer?.currentReducerState
const currentVersion = (reducer?.currentReducerState
&& ("recovery_document" in reducer.currentReducerState)
&& reducer.currentReducerState.recovery_document?.version;
&& reducer.currentReducerState.recovery_document?.version) || 0;
const [otherVersion, setOtherVersion] = useState<number>(currentVersion || 0);
const [otherVersion, setOtherVersion] = useState("");
if (!reducer) {
return <div>no reducer in context</div>
@ -22,15 +25,15 @@ export function SecretSelectionScreen(): VNode {
return <div>invalid state</div>
}
function selectVersion(p: string, n: number): void {
if (!reducer) return;
reducer.runTransaction(async (tx) => {
async function selectVersion(p: string, n: number): Promise<void> {
if (!reducer) return Promise.resolve();
return reducer.runTransaction(async (tx) => {
await tx.transition("change_version", {
version: n,
provider_url: p,
});
setSelectingVersion(false);
});
setSelectingVersion(false);
}
const providerList = Object.keys(reducer.currentReducerState.authentication_providers ?? {})
@ -60,78 +63,77 @@ export function SecretSelectionScreen(): VNode {
if (selectingVersion) {
return (
<AnastasisClientFrame hideNav title="Recovery: Select secret">
<p>Select a different version of the secret</p>
<table class="table">
<tr>
<td><b>Provider</b></td>
<td>
<select onChange={(e) => setOtherProvider((e.target as any).value)}>
{providerList.map(prov => (
<option key={prov} selected={prov === recoveryDocument.provider_url} value={prov}>
{prov}
</option>
))}
</select>
</td>
</tr>
<tr>
<td><b>Version</b></td>
<td>
<input
value={otherVersion}
onChange={(e) => setOtherVersion(Number((e.target as HTMLInputElement).value))}
type="number" />
</td>
<td>
<a onClick={() => setOtherVersion(0)}>set to latest version</a>
</td>
</tr>
</table>
<div style={{ marginTop: '2em', display: 'flex', justifyContent: 'space-between' }}>
<button class="button" onClick={() => setSelectingVersion(false)}>Cancel</button>
<button class="button is-info" onClick={() => selectVersion(otherProvider, otherVersion)}>Confirm</button>
<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 (
<AnastasisClientFrame title="Recovery: Select secret">
<div class="columns">
<div class="column is-half">
<div class="box">
<div class="column">
<div class="box" style={{ border: '2px solid green' }}>
<h1 class="subtitle">{recoveryDocument.provider_url}</h1>
<table class="table">
<tr>
<td>
<b>Secret version</b>
<span class="icon has-tooltip-right" data-tooltip="Secret version to be recovered">
<i class="mdi mdi-information" />
</span>
</td>
<td>{recoveryDocument.version}</td>
<td><a onClick={() => setSelectingVersion(true)}>use another version</a></td>
</tr>
<tr>
<td>
<b>Secret name</b>
<span class="icon has-tooltip-right" data-tooltip="Secret identifier">
<i class="mdi mdi-information" />
</span>
</td>
<td>{recoveryDocument.secret_name}</td>
<td> </td>
</tr>
</table>
<div class="block">
{currentVersion === 0 ? <p>
Set to recover the latest version
</p> : <p>
Set to recover the version number {currentVersion}
</p>}
</div>
<div class="buttons is-right">
<button class="button" disabled onClick={() => reducer.reset()}>Use this provider</button>
<button class="button" onClick={(e) => setSelectingVersion(true)}>Change secret's version</button>
</div>
</div>
<div class="buttons is-right">
<button class="button" disabled onClick={() => reducer.reset()}>Change provider</button>
</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 is-two-third">
<div class="column">
<p>Secret found, you can select another version or continue to the challenges solving</p>
</div>
</div>