diff options
author | Sebastian <sebasjm@gmail.com> | 2022-04-15 13:07:03 -0300 |
---|---|---|
committer | Sebastian <sebasjm@gmail.com> | 2022-04-15 13:08:25 -0300 |
commit | b3b1329acf9072e9a727b548d9d1b316ca396c33 (patch) | |
tree | 36a546e6ddac5910b2d99cbd20d5a81764b337d9 /packages/anastasis-webui/src/pages/home | |
parent | 5a4b6c7eb6d29872d936cc329f5bbb95204ff37b (diff) | |
download | wallet-core-b3b1329acf9072e9a727b548d9d1b316ca396c33.tar.xz |
show an error message when the input has more than 21 chars
Diffstat (limited to 'packages/anastasis-webui/src/pages/home')
3 files changed, 45 insertions, 11 deletions
diff --git a/packages/anastasis-webui/src/pages/home/authMethod/AuthMethodEmailSolve.tsx b/packages/anastasis-webui/src/pages/home/authMethod/AuthMethodEmailSolve.tsx index d7b5f31f7..2ec27b8fc 100644 --- a/packages/anastasis-webui/src/pages/home/authMethod/AuthMethodEmailSolve.tsx +++ b/packages/anastasis-webui/src/pages/home/authMethod/AuthMethodEmailSolve.tsx @@ -17,14 +17,13 @@ /** * Imports. */ -import { - ChallengeInfo, -} from "@gnu-taler/anastasis-core"; +import { ChallengeInfo } from "@gnu-taler/anastasis-core"; import { h, VNode } from "preact"; import { useState } from "preact/hooks"; import { AsyncButton } from "../../../components/AsyncButton"; import { TextInput } from "../../../components/fields/TextInput"; import { useAnastasisContext } from "../../../context/anastasis"; +import { useTranslator } from "../../../i18n"; import { AnastasisClientFrame } from "../index"; import { SolveOverviewFeedbackDisplay } from "../SolveScreen"; import { shouldHideConfirm } from "./helpers"; @@ -48,12 +47,13 @@ export function AuthMethodEmailSolve({ id }: AuthMethodSolveProps): VNode { result += `-${unformatted.substring(8, 12)}`; } if (unformatted.length > 12) { - result += `-${unformatted.substring(12, 16)}`; + result += `-${unformatted.substring(12)}`; } _setAnswer(result); } const [expanded, setExpanded] = useState(false); + const i18n = useTranslator(); const reducer = useAnastasisContext(); if (!reducer) { @@ -66,7 +66,7 @@ export function AuthMethodEmailSolve({ id }: AuthMethodSolveProps): VNode { if (reducer.currentReducerState?.reducer_type !== "recovery") { return ( <AnastasisClientFrame hideNav title="Recovery problem"> - <div>invalid state</div> + <div>invalid state, no recovery state</div> </AnastasisClientFrame> ); } @@ -84,7 +84,7 @@ export function AuthMethodEmailSolve({ id }: AuthMethodSolveProps): VNode { if (!reducer.currentReducerState.selected_challenge_uuid) { return ( <AnastasisClientFrame hideNav title="Recovery problem"> - <div>invalid state</div> + <div>invalid state, no challenge id</div> <div style={{ marginTop: "2em", @@ -122,6 +122,11 @@ export function AuthMethodEmailSolve({ id }: AuthMethodSolveProps): VNode { reducer?.back(); } + const error = + answer.length > 21 + ? i18n`The answer should not be greater than 21 characters.` + : undefined; + return ( <AnastasisClientFrame hideNav title="Email challenge"> <SolveOverviewFeedbackDisplay feedback={feedback} /> @@ -160,6 +165,7 @@ export function AuthMethodEmailSolve({ id }: AuthMethodSolveProps): VNode { grabFocus onConfirm={onNext} bind={[answer, setAnswer]} + error={error} placeholder="A-12345-678-1234-5678" /> @@ -174,7 +180,11 @@ export function AuthMethodEmailSolve({ id }: AuthMethodSolveProps): VNode { Cancel </button> {!shouldHideConfirm(feedback) && ( - <AsyncButton class="button is-info" onClick={onNext}> + <AsyncButton + class="button is-info" + onClick={onNext} + disabled={!!error} + > Confirm </AsyncButton> )} diff --git a/packages/anastasis-webui/src/pages/home/authMethod/AuthMethodPostSolve.tsx b/packages/anastasis-webui/src/pages/home/authMethod/AuthMethodPostSolve.tsx index 382ffa00a..9766703b2 100644 --- a/packages/anastasis-webui/src/pages/home/authMethod/AuthMethodPostSolve.tsx +++ b/packages/anastasis-webui/src/pages/home/authMethod/AuthMethodPostSolve.tsx @@ -7,6 +7,7 @@ import { useState } from "preact/hooks"; import { AsyncButton } from "../../../components/AsyncButton"; import { TextInput } from "../../../components/fields/TextInput"; import { useAnastasisContext } from "../../../context/anastasis"; +import { useTranslator } from "../../../i18n"; import { AnastasisClientFrame } from "../index"; import { SolveOverviewFeedbackDisplay } from "../SolveScreen"; import { shouldHideConfirm } from "./helpers"; @@ -30,11 +31,12 @@ export function AuthMethodPostSolve({ id }: AuthMethodSolveProps): VNode { result += `-${unformatted.substring(8, 12)}`; } if (unformatted.length > 12) { - result += `-${unformatted.substring(12, 16)}`; + result += `-${unformatted.substring(12)}`; } _setAnswer(result); } + const i18n = useTranslator(); const reducer = useAnastasisContext(); if (!reducer) { @@ -103,6 +105,11 @@ export function AuthMethodPostSolve({ id }: AuthMethodSolveProps): VNode { reducer?.back(); } + const error = + answer.length > 21 + ? i18n`The answer should not be greater than 21 characters.` + : undefined; + return ( <AnastasisClientFrame hideNav title="Postal Challenge"> <SolveOverviewFeedbackDisplay feedback={feedback} /> @@ -112,6 +119,7 @@ export function AuthMethodPostSolve({ id }: AuthMethodSolveProps): VNode { label="Answer" grabFocus placeholder="A-12345-678-1234-5678" + error={error} bind={[answer, setAnswer]} /> @@ -126,7 +134,11 @@ export function AuthMethodPostSolve({ id }: AuthMethodSolveProps): VNode { Cancel </button> {!shouldHideConfirm(feedback) && ( - <AsyncButton class="button is-info" onClick={onNext}> + <AsyncButton + class="button is-info" + onClick={onNext} + disabled={!!error} + > Confirm </AsyncButton> )} diff --git a/packages/anastasis-webui/src/pages/home/authMethod/AuthMethodSmsSolve.tsx b/packages/anastasis-webui/src/pages/home/authMethod/AuthMethodSmsSolve.tsx index f3d304c74..041d9c124 100644 --- a/packages/anastasis-webui/src/pages/home/authMethod/AuthMethodSmsSolve.tsx +++ b/packages/anastasis-webui/src/pages/home/authMethod/AuthMethodSmsSolve.tsx @@ -7,6 +7,7 @@ import { useState } from "preact/hooks"; import { AsyncButton } from "../../../components/AsyncButton"; import { TextInput } from "../../../components/fields/TextInput"; import { useAnastasisContext } from "../../../context/anastasis"; +import { useTranslator } from "../../../i18n"; import { AnastasisClientFrame } from "../index"; import { SolveOverviewFeedbackDisplay } from "../SolveScreen"; import { shouldHideConfirm } from "./helpers"; @@ -30,11 +31,12 @@ export function AuthMethodSmsSolve({ id }: AuthMethodSolveProps): VNode { result += `-${unformatted.substring(8, 12)}`; } if (unformatted.length > 12) { - result += `-${unformatted.substring(12, 16)}`; + result += `-${unformatted.substring(12)}`; } _setAnswer(result); } + const i18n = useTranslator(); const [expanded, setExpanded] = useState(false); const reducer = useAnastasisContext(); @@ -104,6 +106,11 @@ export function AuthMethodSmsSolve({ id }: AuthMethodSolveProps): VNode { reducer?.back(); } + const error = + answer.length > 21 + ? i18n`The answer should not be greater than 21 characters.` + : undefined; + return ( <AnastasisClientFrame hideNav title="SMS Challenge"> <SolveOverviewFeedbackDisplay feedback={feedback} /> @@ -142,6 +149,7 @@ export function AuthMethodSmsSolve({ id }: AuthMethodSolveProps): VNode { grabFocus onConfirm={onNext} bind={[answer, setAnswer]} + error={error} placeholder="A-12345-678-1234-5678" /> @@ -156,7 +164,11 @@ export function AuthMethodSmsSolve({ id }: AuthMethodSolveProps): VNode { Cancel </button> {!shouldHideConfirm(feedback) && ( - <AsyncButton class="button is-info" onClick={onNext}> + <AsyncButton + class="button is-info" + onClick={onNext} + disabled={!!error} + > Confirm </AsyncButton> )} |