show an error message when the input has more than 21 chars

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>
         )}

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>
         )}

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>
         )}

packages/anastasis-webui/src/utils/index.tsx

@@ -222,6 +222,7 @@ export const reducerStatesExample = {
   } as ReducerState,
   challengeSolving: {
     ...base,
+    reducer_type: "recovery",
     recovery_state: RecoveryStates.ChallengeSolving,
   } as ReducerStateRecovery,
   challengePaying: {