diff options
Diffstat (limited to 'packages/challenger-ui/src/pages')
-rw-r--r-- | packages/challenger-ui/src/pages/AnswerChallenge.tsx | 22 | ||||
-rw-r--r-- | packages/challenger-ui/src/pages/AskChallenge.tsx | 4 |
2 files changed, 25 insertions, 1 deletions
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} |