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

anastasis-webui: fix telephone input

Browse Source
This commit is contained in:
Florian Dold 2021-11-09 23:14:44 +01:00
parent 877117748d
commit 77070f9f74
No known key found for this signature in database
GPG Key ID: D2E4F00F29D02A4B
4 changed files with 34 additions and 27 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

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

@ -10,7 +10,7 @@ export interface TextInputProps {
bind: [string, (x: string) => void]; bind: [string, (x: string) => void];
} }
export function NumberInput(props: TextInputProps): VNode { export function PhoneNumberInput(props: TextInputProps): VNode {
const inputRef = useRef<HTMLInputElement>(null); const inputRef = useRef<HTMLInputElement>(null);
useLayoutEffect(() => { useLayoutEffect(() => {
if (props.grabFocus) { if (props.grabFocus) {
@ -18,26 +18,33 @@ export function NumberInput(props: TextInputProps): VNode {
} }
}, [props.grabFocus]); }, [props.grabFocus]);
const value = props.bind[0]; const value = props.bind[0];
const [dirty, setDirty] = useState(false) const [dirty, setDirty] = useState(false);
const showError = dirty && props.error const showError = dirty && props.error;
return (<div class="field"> return (
<label class="label"> <div class="field">
{props.label} <label class="label">
{props.tooltip && <span class="icon has-tooltip-right" data-tooltip={props.tooltip}> {props.label}
<i class="mdi mdi-information" /> {props.tooltip && (
</span>} <span class="icon has-tooltip-right" data-tooltip={props.tooltip}>
</label> <i class="mdi mdi-information" />
<div class="control has-icons-right"> </span>
<input )}
value={value} </label>
type="number" <div class="control has-icons-right">
placeholder={props.placeholder} <input
class={showError ? 'input is-danger' : 'input'} value={value}
onInput={(e) => {setDirty(true); props.bind[1]((e.target as HTMLInputElement).value)}} type="tel"
ref={inputRef} placeholder={props.placeholder}
style={{ display: "block" }} /> class={showError ? "input is-danger" : "input"}
onInput={(e) => {
setDirty(true);
props.bind[1]((e.target as HTMLInputElement).value);
}}
ref={inputRef}
style={{ display: "block" }}
/>
</div>
{showError && <p class="help is-danger">{props.error}</p>}
</div> </div>
{showError && <p class="help is-danger">{props.error}</p>}
</div>
); );
} }

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

@ -3,7 +3,7 @@ import { isAfter, parse } from "date-fns";
import { h, VNode } from "preact"; import { h, VNode } from "preact";
import { useState } from "preact/hooks"; import { useState } from "preact/hooks";
import { DateInput } from "../../components/fields/DateInput"; import { DateInput } from "../../components/fields/DateInput";
import { NumberInput } from "../../components/fields/NumberInput"; import { PhoneNumberInput } from "../../components/fields/NumberInput";
import { TextInput } from "../../components/fields/TextInput"; import { TextInput } from "../../components/fields/TextInput";
import { useAnastasisContext } from "../../context/anastasis"; import { useAnastasisContext } from "../../context/anastasis";
import { AnastasisClientFrame, withProcessLabel } from "./index"; import { AnastasisClientFrame, withProcessLabel } from "./index";
@ -95,7 +95,7 @@ function AttributeEntryField(props: AttributeEntryFieldProps): VNode {
bind={[props.value, props.setValue]} bind={[props.value, props.setValue]}
/>} />}
{props.spec.type === 'number' && {props.spec.type === 'number' &&
<NumberInput <PhoneNumberInput
grabFocus={props.isFirst} grabFocus={props.isFirst}
label={props.spec.label} label={props.spec.label}
error={props.errorMessage} error={props.errorMessage}

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

@ -1,7 +1,7 @@
import { h, VNode } from "preact"; import { h, VNode } from "preact";
import { useState } from "preact/hooks"; import { useState } from "preact/hooks";
import { AsyncButton } from "../../components/AsyncButton"; import { AsyncButton } from "../../components/AsyncButton";
import { NumberInput } from "../../components/fields/NumberInput"; import { PhoneNumberInput } from "../../components/fields/NumberInput";
import { useAnastasisContext } from "../../context/anastasis"; import { useAnastasisContext } from "../../context/anastasis";
import { AddingProviderScreen } from "./AddingProviderScreen"; import { AddingProviderScreen } from "./AddingProviderScreen";
import { AnastasisClientFrame } from "./index"; import { AnastasisClientFrame } from "./index";
@ -152,7 +152,7 @@ function SelectOtherVersionProviderScreen({ providers, provider, version, onConf
</div> </div>
</div> </div>
<div class="container"> <div class="container">
<NumberInput <PhoneNumberInput
label="Version" label="Version"
placeholder="version number to recover" placeholder="version number to recover"
grabFocus grabFocus

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

@ -5,7 +5,7 @@ import {
import { Fragment, h, VNode } from "preact"; import { Fragment, h, VNode } from "preact";
import { useLayoutEffect, useRef, useState } from "preact/hooks"; import { useLayoutEffect, useRef, useState } from "preact/hooks";
import { AuthMethodSetupProps } from "."; import { AuthMethodSetupProps } from ".";
import { NumberInput } from "../../../components/fields/NumberInput"; import { PhoneNumberInput } from "../../../components/fields/NumberInput";
import { AnastasisClientFrame } from "../index"; import { AnastasisClientFrame } from "../index";
export function AuthMethodSmsSetup({ addAuthMethod, cancel, configured }: AuthMethodSetupProps): VNode { export function AuthMethodSmsSetup({ addAuthMethod, cancel, configured }: AuthMethodSetupProps): VNode {
@ -33,7 +33,7 @@ export function AuthMethodSmsSetup({ addAuthMethod, cancel, configured }: AuthMe
receive via SMS. receive via SMS.
</p> </p>
<div class="container"> <div class="container">
<NumberInput <PhoneNumberInput
label="Mobile number" label="Mobile number"
placeholder="Your mobile number" placeholder="Your mobile number"
grabFocus grabFocus