diff options
Diffstat (limited to 'packages/anastasis-webui/src/pages/home/authMethod/AuthMethodSmsSolve.tsx')
-rw-r--r-- | packages/anastasis-webui/src/pages/home/authMethod/AuthMethodSmsSolve.tsx | 16 |
1 files changed, 14 insertions, 2 deletions
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> )} |