diff options
author | Sebastian <sebasjm@gmail.com> | 2024-04-22 12:55:27 -0300 |
---|---|---|
committer | Sebastian <sebasjm@gmail.com> | 2024-04-22 12:55:27 -0300 |
commit | f817371e336564d71639a3f8f7ac956cbbd53df5 (patch) | |
tree | 7a8e9733feedc0e214754fa0a1e2fceed8960dc4 | |
parent | 82b8e83ca635bd27954565e2c29c77e0a75b3fc0 (diff) | |
download | wallet-core-f817371e336564d71639a3f8f7ac956cbbd53df5.tar.xz |
fix #8423
-rw-r--r-- | packages/challenger-ui/src/Routing.tsx | 2 | ||||
-rw-r--r-- | packages/challenger-ui/src/pages/AnswerChallenge.tsx | 22 | ||||
-rw-r--r-- | packages/challenger-ui/src/pages/AskChallenge.tsx | 4 |
3 files changed, 27 insertions, 1 deletions
diff --git a/packages/challenger-ui/src/Routing.tsx b/packages/challenger-ui/src/Routing.tsx index 6711e4cae..6166f159a 100644 --- a/packages/challenger-ui/src/Routing.tsx +++ b/packages/challenger-ui/src/Routing.tsx @@ -200,6 +200,7 @@ function PublicRounting(): VNode { }} > <AskChallenge + focus nonce={location.values.nonce} routeSolveChallenge={publicPages.answer} onSendSuccesful={() => { @@ -233,6 +234,7 @@ function PublicRounting(): VNode { }} > <AnswerChallenge + focus nonce={location.values.nonce} routeAsk={publicPages.ask} onComplete={() => { diff --git a/packages/challenger-ui/src/pages/AnswerChallenge.tsx b/packages/challenger-ui/src/pages/AnswerChallenge.tsx index 5e7973b3d..73a79c51f 100644 --- a/packages/challenger-ui/src/pages/AnswerChallenge.tsx +++ b/packages/challenger-ui/src/pages/AnswerChallenge.tsx @@ -36,11 +36,12 @@ export const EMAIL_REGEX = /^[\w-.]+@([\w-]+\.)+[\w-]{2,4}$/; type Props = { nonce: string; + focus?: boolean; onComplete: () => void; routeAsk: RouteDefinition<{ nonce: string }>; }; -export function AnswerChallenge({ nonce, onComplete, routeAsk }: Props): VNode { +export function AnswerChallenge({ focus, nonce, onComplete, routeAsk }: Props): VNode { const { lib } = useChallengerApiContext(); const { i18n } = useTranslationContext(); const { state, accepted, completed } = useSessionState(); @@ -189,6 +190,8 @@ export function AnswerChallenge({ nonce, onComplete, routeAsk }: Props): VNode { </label> <div class="mt-2.5"> <input + autoFocus + ref={focus ? doAutoFocus : undefined} type="number" name="pin" id="pin" @@ -250,6 +253,23 @@ export function AnswerChallenge({ nonce, onComplete, routeAsk }: Props): VNode { ); } +/** + * Show the element when the load ended + * @param element + */ +export function doAutoFocus(element: HTMLElement | null): void { + if (element) { + setTimeout(() => { + element.focus({ preventScroll: true }); + element.scrollIntoView({ + behavior: "smooth", + block: "center", + inline: "center", + }); + }, 100); + } +} + export function undefinedIfEmpty<T extends object>(obj: T): T | undefined { return Object.keys(obj).some( (k) => (obj as Record<string, T>)[k] !== undefined, diff --git a/packages/challenger-ui/src/pages/AskChallenge.tsx b/packages/challenger-ui/src/pages/AskChallenge.tsx index aaca51db7..30b50d707 100644 --- a/packages/challenger-ui/src/pages/AskChallenge.tsx +++ b/packages/challenger-ui/src/pages/AskChallenge.tsx @@ -27,6 +27,7 @@ import { import { Fragment, VNode, h } from "preact"; import { useState } from "preact/hooks"; import { useSessionState } from "../hooks/session.js"; +import { doAutoFocus } from "./AnswerChallenge.js"; type Form = { email: string; @@ -37,12 +38,14 @@ type Props = { nonce: string; onSendSuccesful: () => void; routeSolveChallenge: RouteDefinition<{ nonce: string }>; + focus?: boolean; }; export function AskChallenge({ nonce, onSendSuccesful, routeSolveChallenge, + focus, }: Props): VNode { const { state, accepted, completed } = useSessionState(); const status = state?.lastStatus; @@ -162,6 +165,7 @@ export function AskChallenge({ type="email" name="email" id="email" + ref={focus ? doAutoFocus : undefined} maxLength={512} autocomplete="email" value={email} |