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

fix #7059

Browse Source
This commit is contained in:
Sebastian 2021-11-12 13:12:27 -03:00
parent 377e78e854
commit 38b84bb805
No known key found for this signature in database
GPG Key ID: BE4FF68352439FC1
20 changed files with 225 additions and 67 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -20,6 +20,7 @@
*/
import { ComponentChildren, h, VNode } from "preact";
import { useLayoutEffect, useRef } from "preact/hooks";
// import { LoadingModal } from "../modal";
import { useAsync } from "../hooks/async";
// import { Translate } from "../../i18n";
@ -28,17 +29,26 @@ type Props = {
children: ComponentChildren;
disabled?: boolean;
onClick?: () => Promise<void>;
grabFocus?: boolean;
[rest: string]: any;
};
export function AsyncButton({
onClick,
grabFocus,
disabled,
children,
...rest
}: Props): VNode {
const { isLoading, request } = useAsync(onClick);
const buttonRef = useRef<HTMLButtonElement>(null);
useLayoutEffect(() => {
if (grabFocus) {
buttonRef.current?.focus();
}
}, [grabFocus]);
// if (isSlow) {
// return <LoadingModal onCancel={cancel} />;
// }
@ -48,7 +58,7 @@ export function AsyncButton({
return (
<span data-tooltip={rest["data-tooltip"]} style={{ marginLeft: 5 }}>
<button {...rest} onClick={request} disabled={disabled}>
<button {...rest} ref={buttonRef} onClick={request} disabled={disabled}>
{children}
</button>
</span>

10
packages/anastasis-webui/src/components/fields/DateInput.tsx
View File

@ -1,4 +1,4 @@
import { format, isAfter, parse, sub, subYears } from "date-fns";
import { format, subYears } from "date-fns";
import { h, VNode } from "preact";
import { useLayoutEffect, useRef, useState } from "preact/hooks";
import { DatePicker } from "../picker/DatePicker";
@ -9,6 +9,7 @@ export interface DateInputProps {
tooltip?: string;
error?: string;
years?: Array<number>;
onConfirm?: () => void;
bind: [string, (x: string) => void];
}
@ -44,7 +45,12 @@ export function DateInput(props: DateInputProps): VNode {
type="text"
class={showError ? "input is-danger" : "input"}
value={value}
onInput={(e) => {
onKeyPress={(e) => {
if (e.key === 'Enter' && props.onConfirm) {
props.onConfirm()
}
}}
onInput={(e) => {
const text = e.currentTarget.value;
setDirty(true);
props.bind[1](text);

6
packages/anastasis-webui/src/components/fields/EmailInput.tsx
View File

@ -7,6 +7,7 @@ export interface TextInputProps {
error?: string;
placeholder?: string;
tooltip?: string;
onConfirm?: () => void;
bind: [string, (x: string) => void];
}
@ -37,6 +38,11 @@ export function EmailInput(props: TextInputProps): VNode {
placeholder={props.placeholder}
type="email"
class={showError ? "input is-danger" : "input"}
onKeyPress={(e) => {
if (e.key === 'Enter' && props.onConfirm) {
props.onConfirm()
}
}}
onInput={(e) => {
setDirty(true);
props.bind[1]((e.target as HTMLInputElement).value);

6
packages/anastasis-webui/src/components/fields/NumberInput.tsx
View File

@ -7,6 +7,7 @@ export interface TextInputProps {
error?: string;
placeholder?: string;
tooltip?: string;
onConfirm?: () => void;
bind: [string, (x: string) => void];
}
@ -36,6 +37,11 @@ export function PhoneNumberInput(props: TextInputProps): VNode {
type="tel"
placeholder={props.placeholder}
class={showError ? "input is-danger" : "input"}
onKeyPress={(e) => {
if (e.key === 'Enter' && props.onConfirm) {
props.onConfirm()
}
}}
onInput={(e) => {
setDirty(true);
props.bind[1]((e.target as HTMLInputElement).value);

6
packages/anastasis-webui/src/components/fields/TextInput.tsx
View File

@ -8,6 +8,7 @@ export interface TextInputProps {
error?: string;
placeholder?: string;
tooltip?: string;
onConfirm?: () => void;
bind: [string, (x: string) => void];
}
@ -37,6 +38,11 @@ export function TextInput(props: TextInputProps): VNode {
disabled={props.disabled}
placeholder={props.placeholder}
class={showError ? "input is-danger" : "input"}
onKeyPress={(e) => {
if (e.key === 'Enter' && props.onConfirm) {
props.onConfirm()
}
}}
onInput={(e) => {
setDirty(true);
props.bind[1]((e.target as HTMLInputElement).value);

9
packages/anastasis-webui/src/pages/home/AttributeEntryScreen.tsx
View File

@ -44,6 +44,11 @@ export function AttributeEntryScreen(): VNode {
setValue={(v: string) => setAttrs({ ...attrs, [spec.name]: v })}
spec={spec}
errorMessage={error}
onConfirm={() => {
if (!hasErrors) {
setAskUserIfSure(true)
}
}}
value={value}
/>
);
@ -104,6 +109,7 @@ interface AttributeEntryFieldProps {
setValue: (newValue: string) => void;
spec: UserAttributeSpec;
errorMessage: string | undefined;
onConfirm: () => void;
}
const possibleBirthdayYear: Array<number> = [];
for (let i = 0; i < 100; i++) {
@ -117,6 +123,7 @@ function AttributeEntryField(props: AttributeEntryFieldProps): VNode {
grabFocus={props.isFirst}
label={props.spec.label}
years={possibleBirthdayYear}
onConfirm={props.onConfirm}
error={props.errorMessage}
bind={[props.value, props.setValue]}
/>
@ -125,6 +132,7 @@ function AttributeEntryField(props: AttributeEntryFieldProps): VNode {
<PhoneNumberInput
grabFocus={props.isFirst}
label={props.spec.label}
onConfirm={props.onConfirm}
error={props.errorMessage}
bind={[props.value, props.setValue]}
/>
@ -133,6 +141,7 @@ function AttributeEntryField(props: AttributeEntryFieldProps): VNode {
<TextInput
grabFocus={props.isFirst}
label={props.spec.label}
onConfirm={props.onConfirm}
error={props.errorMessage}
bind={[props.value, props.setValue]}
/>

9
packages/anastasis-webui/src/pages/home/ConfirmModal.tsx
View File

@ -1,4 +1,6 @@
import { differenceInBusinessDays } from "date-fns";
import { ComponentChildren, h, VNode } from "preact";
import { useLayoutEffect, useRef } from "preact/hooks";
import { AsyncButton } from "../../components/AsyncButton";
export interface ConfirmModelProps {
@ -17,7 +19,7 @@ export function ConfirmModal({
active, description, onCancel, onConfirm, children, danger, disabled, label = "Confirm", cancelLabel = "Dismiss"
}: ConfirmModelProps): VNode {
return (
<div class={active ? "modal is-active" : "modal"}>
<div class={active ? "modal is-active" : "modal"} >
<div class="modal-background " onClick={onCancel} />
<div class="modal-card" style={{ maxWidth: 700 }}>
<header class="modal-card-head">
@ -33,8 +35,11 @@ export function ConfirmModal({
<button class="button" onClick={onCancel}>
{cancelLabel}
</button>
<div class="buttons is-right" style={{ width: "100%" }}>
<div class="buttons is-right" style={{ width: "100%" }} onKeyDown={(e) => {
if (e.key === 'Escape' && onCancel) onCancel()
}}>
<AsyncButton
grabFocus
class={danger ? "button is-danger " : "button is-info "}
disabled={disabled}
onClick={onConfirm}

49
packages/anastasis-webui/src/pages/home/SecretEditorScreen.tsx
View File

@ -10,10 +10,12 @@ import { FileInput, FileTypeContent } from "../../components/fields/FileInput";
export function SecretEditorScreen(): VNode {
const reducer = useAnastasisContext();
const [secretValue, setSecretValue] = useState("");
const [secretFile, _setSecretFile] = useState<FileTypeContent | undefined>(undefined);
const [secretFile, _setSecretFile] = useState<FileTypeContent | undefined>(
undefined,
);
function setSecretFile(v) {
setSecretValue("") // reset secret value when uploading a file
_setSecretFile(v)
setSecretValue(""); // reset secret value when uploading a file
_setSecretFile(v);
}
const currentSecretName =
@ -34,14 +36,16 @@ export function SecretEditorScreen(): VNode {
}
const secretNext = async (): Promise<void> => {
const secret = secretFile ? {
value: encodeCrock(stringToBytes(secretValue)),
filename: secretFile.name,
mime: secretFile.type,
} : {
value: encodeCrock(stringToBytes(secretValue)),
mime: "text/plain",
}
const secret = secretFile
? {
value: encodeCrock(stringToBytes(secretValue)),
filename: secretFile.name,
mime: secretFile.type,
}
: {
value: encodeCrock(stringToBytes(secretValue)),
mime: "text/plain",
};
return reducer.runTransaction(async (tx) => {
await tx.transition("enter_secret_name", {
name: secretName,
@ -55,9 +59,14 @@ export function SecretEditorScreen(): VNode {
await tx.transition("next", {});
});
};
const errors = !secretName ? 'Add a secret name' : (
(!secretValue && !secretFile) ? 'Add a secret value or a choose a file to upload' : undefined
)
const errors = !secretName
? "Add a secret name"
: !secretValue && !secretFile
? "Add a secret value or a choose a file to upload"
: undefined;
function goNextIfNoErrors(): void {
if (!errors) secretNext();
}
return (
<AnastasisClientFrame
hideNext={errors}
@ -69,12 +78,14 @@ export function SecretEditorScreen(): VNode {
label="Secret name:"
tooltip="The secret name allows you to identify your secret when restoring it. It is a label that you can choose freely."
grabFocus
onConfirm={goNextIfNoErrors}
bind={[secretName, setSecretName]}
/>
</div>
<div class="block">
<TextInput
disabled={!!secretFile}
onConfirm={goNextIfNoErrors}
label="Enter the secret as text:"
bind={[secretValue, setSecretValue]}
/>
@ -82,10 +93,12 @@ export function SecretEditorScreen(): VNode {
<div class="block">
Or upload a secret file
<FileInput label="Choose file" onChange={setSecretFile} />
{secretFile && <div>
Uploading secret file <b>{secretFile.name}</b> <a onClick={() => setSecretFile(undefined)}>cancel</a>
</div>
}
{secretFile && (
<div>
Uploading secret file <b>{secretFile.name}</b>{" "}
<a onClick={() => setSecretFile(undefined)}>cancel</a>
</div>
)}
</div>
</AnastasisClientFrame>
);

4
packages/anastasis-webui/src/pages/home/authMethod/AuthMethodEmailSetup.tsx
View File

@ -26,6 +26,9 @@ export function AuthMethodEmailSetup({
: undefined;
const errors = !email ? "Add your email" : emailError;
function goNextIfNoErrors(): void {
if (!errors) addEmailAuth();
}
return (
<AnastasisClientFrame hideNav title="Add email authentication">
<p>
@ -37,6 +40,7 @@ export function AuthMethodEmailSetup({
<EmailInput
label="Email address"
error={emailError}
onConfirm={goNextIfNoErrors}
placeholder="email@domain.com"
bind={[email, setEmail]}
/>

47
packages/anastasis-webui/src/pages/home/authMethod/AuthMethodEmailSolve.tsx
View File

@ -10,7 +10,7 @@ import { AuthMethodSolveProps } from "./index";
export function AuthMethodEmailSolve({ id }: AuthMethodSolveProps): VNode {
const [answer, setAnswer] = useState("");
const [expanded, setExpanded] = useState(false)
const [expanded, setExpanded] = useState(false);
const reducer = useAnastasisContext();
if (!reducer) {
@ -91,23 +91,38 @@ export function AuthMethodEmailSolve({ id }: AuthMethodSolveProps): VNode {
<SolveOverviewFeedbackDisplay feedback={feedback} />
<p>
An email has been sent to "<b>{selectedChallenge.instructions}</b>". The
message has and identification code and recovery code that starts with "<b>A-</b>".
Wait the message to arrive and the enter the recovery code below.
message has and identification code and recovery code that starts with "
<b>A-</b>". Wait the message to arrive and the enter the recovery code
below.
</p>
{!expanded ? <p>
The identification code in the email should start with "{selectedUuid.substring(0, 10)}"
<span class="icon has-tooltip-top" data-tooltip="click to expand" onClick={() => setExpanded(e => !e)}>
<i class="mdi mdi-information" />
</span>
</p>
: <p>
The identification code in the email is "{selectedUuid}"
<span class="icon has-tooltip-top" data-tooltip="click to show less code" onClick={() => setExpanded(e => !e)}>
<i class="mdi mdi-information" />
</span>
</p>}
<TextInput label="Answer"
{!expanded ? (
<p>
The identification code in the email should start with "
{selectedUuid.substring(0, 10)}"
<span
class="icon has-tooltip-top"
data-tooltip="click to expand"
onClick={() => setExpanded((e) => !e)}
>
<i class="mdi mdi-information" />
</span>
</p>
) : (
<p>
The identification code in the email is "{selectedUuid}"
<span
class="icon has-tooltip-top"
data-tooltip="click to show less code"
onClick={() => setExpanded((e) => !e)}
>
<i class="mdi mdi-information" />
</span>
</p>
)}
<TextInput
label="Answer"
grabFocus
onConfirm={onNext}
bind={[answer, setAnswer]}
placeholder="A-1234567812345678"
/>

5
packages/anastasis-webui/src/pages/home/authMethod/AuthMethodIbanSetup.tsx
View File

@ -36,6 +36,9 @@ export function AuthMethodIbanSetup({
: !account
? "Add an account IBAN number"
: undefined;
function goNextIfNoErrors(): void {
if (!errors) addIbanAuth();
}
return (
<AnastasisClientFrame hideNav title="Add bank transfer authentication">
<p>
@ -49,11 +52,13 @@ export function AuthMethodIbanSetup({
label="Bank account holder name"
grabFocus
placeholder="John Smith"
onConfirm={goNextIfNoErrors}
bind={[name, setName]}
/>
<TextInput
label="IBAN"
placeholder="DE91100000000123456789"
onConfirm={goNextIfNoErrors}
bind={[account, setAccount]}
/>
</div>

35
packages/anastasis-webui/src/pages/home/authMethod/AuthMethodPostSetup.tsx
View File

@ -48,6 +48,10 @@ export function AuthMethodPostSetup({
: !country
? "The country is missing"
: undefined;
function goNextIfNoErrors(): void {
if (!errors) addPostAuth();
}
return (
<AnastasisClientFrame hideNav title="Add postal authentication">
<p>
@ -56,19 +60,40 @@ export function AuthMethodPostSetup({
will receive in a letter to that address.
</p>
<div>
<TextInput grabFocus label="Full Name" bind={[fullName, setFullName]} />
<TextInput
grabFocus
label="Full Name"
bind={[fullName, setFullName]}
onConfirm={goNextIfNoErrors}
/>
</div>
<div>
<TextInput label="Street" bind={[street, setStreet]} />
<TextInput
onConfirm={goNextIfNoErrors}
label="Street"
bind={[street, setStreet]}
/>
</div>
<div>
<TextInput label="City" bind={[city, setCity]} />
<TextInput
onConfirm={goNextIfNoErrors}
label="City"
bind={[city, setCity]}
/>
</div>
<div>
<TextInput label="Postal Code" bind={[postcode, setPostcode]} />
<TextInput
onConfirm={goNextIfNoErrors}
label="Postal Code"
bind={[postcode, setPostcode]}
/>
</div>
<div>
<TextInput label="Country" bind={[country, setCountry]} />
<TextInput
onConfirm={goNextIfNoErrors}
label="Country"
bind={[country, setCountry]}
/>
</div>
{configured.length > 0 && (

7
packages/anastasis-webui/src/pages/home/authMethod/AuthMethodPostSolve.tsx
View File

@ -89,7 +89,12 @@ export function AuthMethodPostSolve({ id }: AuthMethodSolveProps): VNode {
<AnastasisClientFrame hideNav title="Postal Challenge">
<SolveOverviewFeedbackDisplay feedback={feedback} />
<p>Wait for the answer</p>
<TextInput label="Answer" grabFocus bind={[answer, setAnswer]} />
<TextInput
onConfirm={onNext}
label="Answer"
grabFocus
bind={[answer, setAnswer]}
/>
<div
style={{

5
packages/anastasis-webui/src/pages/home/authMethod/AuthMethodQuestionSetup.tsx
View File

@ -26,6 +26,9 @@ export function AuthMethodQuestionSetup({
: !answerText
? "Add the answer to your question"
: undefined;
function goNextIfNoErrors(): void {
if (!errors) addQuestionAuth();
}
return (
<AnastasisClientFrame hideNav title="Add Security Question">
<div>
@ -39,6 +42,7 @@ export function AuthMethodQuestionSetup({
<TextInput
label="Security question"
grabFocus
onConfirm={goNextIfNoErrors}
placeholder="Your question"
bind={[questionText, setQuestionText]}
/>
@ -46,6 +50,7 @@ export function AuthMethodQuestionSetup({
<div>
<TextInput
label="Answer"
onConfirm={goNextIfNoErrors}
placeholder="Your answer"
bind={[answerText, setAnswerText]}
/>

11
packages/anastasis-webui/src/pages/home/authMethod/AuthMethodQuestionSolve.tsx
View File

@ -91,11 +91,14 @@ export function AuthMethodQuestionSolve({ id }: AuthMethodSolveProps): VNode {
<p>
In this challenge you need to provide the answer for the next question:
</p>
<pre>
{selectedChallenge.instructions}
</pre>
<pre>{selectedChallenge.instructions}</pre>
<p>Type the answer below</p>
<TextInput label="Answer" grabFocus bind={[answer, setAnswer]} />
<TextInput
label="Answer"
onConfirm={onNext}
grabFocus
bind={[answer, setAnswer]}
/>
<div
style={{

4
packages/anastasis-webui/src/pages/home/authMethod/AuthMethodSmsSetup.tsx
View File

@ -25,6 +25,9 @@ export function AuthMethodSmsSetup({
inputRef.current?.focus();
}, []);
const errors = !mobileNumber ? "Add a mobile number" : undefined;
function goNextIfNoErrors(): void {
if (!errors) addSmsAuth();
}
return (
<AnastasisClientFrame hideNav title="Add SMS authentication">
<div>
@ -37,6 +40,7 @@ export function AuthMethodSmsSetup({
<PhoneNumberInput
label="Mobile number"
placeholder="Your mobile number"
onConfirm={goNextIfNoErrors}
grabFocus
bind={[mobileNumber, setMobileNumber]}
/>

47
packages/anastasis-webui/src/pages/home/authMethod/AuthMethodSmsSolve.tsx
View File

@ -11,7 +11,7 @@ import { AuthMethodSolveProps } from "./index";
export function AuthMethodSmsSolve({ id }: AuthMethodSolveProps): VNode {
const [answer, setAnswer] = useState("");
const [expanded, setExpanded] = useState(false)
const [expanded, setExpanded] = useState(false);
const reducer = useAnastasisContext();
if (!reducer) {
return (
@ -91,23 +91,38 @@ export function AuthMethodSmsSolve({ id }: AuthMethodSolveProps): VNode {
<SolveOverviewFeedbackDisplay feedback={feedback} />
<p>
An sms has been sent to "<b>{selectedChallenge.instructions}</b>". The
message has and identification code and recovery code that starts with "<b>A-</b>".
Wait the message to arrive and the enter the recovery code below.
message has and identification code and recovery code that starts with "
<b>A-</b>". Wait the message to arrive and the enter the recovery code
below.
</p>
{!expanded ? <p>
The identification code in the SMS should start with "{selectedUuid.substring(0, 10)}"
<span class="icon has-tooltip-top" data-tooltip="click to expand" onClick={() => setExpanded(e => !e)}>
<i class="mdi mdi-information" />
</span>
</p>
: <p>
The identification code in the SMS is "{selectedUuid}"
<span class="icon has-tooltip-top" data-tooltip="click to show less code" onClick={() => setExpanded(e => !e)}>
<i class="mdi mdi-information" />
</span>
</p>}
<TextInput label="Answer"
{!expanded ? (
<p>
The identification code in the SMS should start with "
{selectedUuid.substring(0, 10)}"
<span
class="icon has-tooltip-top"
data-tooltip="click to expand"
onClick={() => setExpanded((e) => !e)}
>
<i class="mdi mdi-information" />
</span>
</p>
) : (
<p>
The identification code in the SMS is "{selectedUuid}"
<span
class="icon has-tooltip-top"
data-tooltip="click to show less code"
onClick={() => setExpanded((e) => !e)}
>
<i class="mdi mdi-information" />
</span>
</p>
)}
<TextInput
label="Answer"
grabFocus
onConfirm={onNext}
bind={[answer, setAnswer]}
placeholder="A-1234567812345678"
/>

9
packages/anastasis-webui/src/pages/home/authMethod/AuthMethodTotpSetup.tsx
View File

@ -38,6 +38,9 @@ export function AuthMethodTotpSetup({
: !testCodeMatches
? "The test code doesnt match"
: undefined;
function goNextIfNoErrors(): void {
if (!errors) addTotpAuth();
}
return (
<AnastasisClientFrame hideNav title="Add TOTP authentication">
<p>
@ -54,7 +57,11 @@ export function AuthMethodTotpSetup({
<p>
After scanning the code with your TOTP App, test it in the input below.
</p>
<TextInput label="Test code" bind={[test, setTest]} />
<TextInput
label="Test code"
onConfirm={goNextIfNoErrors}
bind={[test, setTest]}
/>
{configured.length > 0 && (
<section class="section">
<div class="block">Your TOTP numbers:</div>

7
packages/anastasis-webui/src/pages/home/authMethod/AuthMethodTotpSolve.tsx
View File

@ -89,7 +89,12 @@ export function AuthMethodTotpSolve({ id }: AuthMethodSolveProps): VNode {
<AnastasisClientFrame hideNav title="TOTP Challenge">
<SolveOverviewFeedbackDisplay feedback={feedback} />
<p>enter the totp solution</p>
<TextInput label="Answer" grabFocus bind={[answer, setAnswer]} />
<TextInput
label="Answer"
onConfirm={onNext}
grabFocus
bind={[answer, setAnswer]}
/>
<div
style={{

4
packages/anastasis-webui/src/pages/home/authMethod/AuthMethodVideoSetup.tsx
View File

@ -20,6 +20,9 @@ export function AuthMethodVideoSetup({
},
});
};
function goNextIfNoErrors(): void {
addVideoAuth();
}
return (
<AnastasisClientFrame hideNav title="Add video authentication">
<p>
@ -32,6 +35,7 @@ export function AuthMethodVideoSetup({
<ImageInput
label="Choose photograph"
grabFocus
onConfirm={goNextIfNoErrors}
bind={[image, setImage]}
/>
</div>