fix #7059

packages/anastasis-webui/src/components/AsyncButton.tsx

@@ -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>

packages/anastasis-webui/src/components/fields/DateInput.tsx

@@ -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);

packages/anastasis-webui/src/components/fields/EmailInput.tsx

@@ -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);

packages/anastasis-webui/src/components/fields/NumberInput.tsx

@@ -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);

packages/anastasis-webui/src/components/fields/TextInput.tsx

@@ -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);

packages/anastasis-webui/src/pages/home/AttributeEntryScreen.tsx

@@ -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]}
         />

packages/anastasis-webui/src/pages/home/ConfirmModal.tsx

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

packages/anastasis-webui/src/pages/home/SecretEditorScreen.tsx

@@ -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
+    setSecretValue(""); // reset secret value when uploading a file
-    _setSecretFile(v)
+    _setSecretFile(v);
   }
 
   const currentSecretName =
@@ -34,14 +36,16 @@ export function SecretEditorScreen(): VNode {
   }
 
   const secretNext = async (): Promise<void> => {
-    const secret = secretFile ? {
+    const secret = secretFile
-      value: encodeCrock(stringToBytes(secretValue)),
+      ? {
-      filename: secretFile.name,
+          value: encodeCrock(stringToBytes(secretValue)),
-      mime: secretFile.type,
+          filename: secretFile.name,
-    } : {
+          mime: secretFile.type,
-      value: encodeCrock(stringToBytes(secretValue)),
+        }
-      mime: "text/plain",
+      : {
-    }
+          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' : (
+  const errors = !secretName
-    (!secretValue && !secretFile) ? 'Add a secret value or a choose a file to upload' : undefined
+    ? "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>
+        {secretFile && (
-          Uploading secret file <b>{secretFile.name}</b> <a onClick={() => setSecretFile(undefined)}>cancel</a>
+          <div>
-        </div>
+            Uploading secret file <b>{secretFile.name}</b>{" "}
-        }
+            <a onClick={() => setSecretFile(undefined)}>cancel</a>
+          </div>
+        )}
       </div>
     </AnastasisClientFrame>
   );

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

@@ -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]}
         />

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

@@ -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>".
+        message has and identification code and recovery code that starts with "
-        Wait the message to arrive and the enter the recovery code below.
+        <b>A-</b>". Wait the message to arrive and the enter the recovery code
+        below.
       </p>
-      {!expanded ? <p>
+      {!expanded ? (
-        The identification code in the email should start with "{selectedUuid.substring(0, 10)}"
+        <p>
-        <span class="icon has-tooltip-top" data-tooltip="click to expand" onClick={() => setExpanded(e => !e)}>
+          The identification code in the email should start with "
-          <i class="mdi mdi-information" />
+          {selectedUuid.substring(0, 10)}"
-        </span>
+          <span
-      </p>
+            class="icon has-tooltip-top"
-        : <p>
+            data-tooltip="click to expand"
-        The identification code in the email is "{selectedUuid}"
+            onClick={() => setExpanded((e) => !e)}
-        <span class="icon has-tooltip-top" data-tooltip="click to show less code" onClick={() => setExpanded(e => !e)}>
+          >
-          <i class="mdi mdi-information" />
+            <i class="mdi mdi-information" />
-        </span>
+          </span>
-        </p>}
+        </p>
-      <TextInput label="Answer"
+      ) : (
+        <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"
       />

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

@@ -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>

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

@@ -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 && (

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

@@ -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={{

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

@@ -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]}
           />

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

@@ -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>
+      <pre>{selectedChallenge.instructions}</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={{

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

@@ -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]}
           />

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

@@ -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>".
+        message has and identification code and recovery code that starts with "
-        Wait the message to arrive and the enter the recovery code below.
+        <b>A-</b>". Wait the message to arrive and the enter the recovery code
+        below.
       </p>
-      {!expanded ? <p>
+      {!expanded ? (
-        The identification code in the SMS should start with "{selectedUuid.substring(0, 10)}"
+        <p>
-        <span class="icon has-tooltip-top" data-tooltip="click to expand" onClick={() => setExpanded(e => !e)}>
+          The identification code in the SMS should start with "
-          <i class="mdi mdi-information" />
+          {selectedUuid.substring(0, 10)}"
-        </span>
+          <span
-      </p>
+            class="icon has-tooltip-top"
-        : <p>
+            data-tooltip="click to expand"
-        The identification code in the SMS is "{selectedUuid}"
+            onClick={() => setExpanded((e) => !e)}
-        <span class="icon has-tooltip-top" data-tooltip="click to show less code" onClick={() => setExpanded(e => !e)}>
+          >
-          <i class="mdi mdi-information" />
+            <i class="mdi mdi-information" />
-        </span>
+          </span>
-        </p>}
+        </p>
-      <TextInput label="Answer"
+      ) : (
+        <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"
       />

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

@@ -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>

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

@@ -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={{

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

@@ -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>