diff options
Diffstat (limited to 'packages/challenger-ui/src/pages/AnswerChallenge.tsx')
| -rw-r--r-- | packages/challenger-ui/src/pages/AnswerChallenge.tsx | 44 |
1 files changed, 29 insertions, 15 deletions
diff --git a/packages/challenger-ui/src/pages/AnswerChallenge.tsx b/packages/challenger-ui/src/pages/AnswerChallenge.tsx index 62b7e775d..5e7973b3d 100644 --- a/packages/challenger-ui/src/pages/AnswerChallenge.tsx +++ b/packages/challenger-ui/src/pages/AnswerChallenge.tsx @@ -22,6 +22,7 @@ import { Attention, Button, LocalNotificationBanner, + RouteDefinition, ShowInputErrorLabel, useChallengerApiContext, useLocalNotificationHandler, @@ -36,9 +37,10 @@ export const EMAIL_REGEX = /^[\w-.]+@([\w-]+\.)+[\w-]{2,4}$/; type Props = { nonce: string; onComplete: () => void; + routeAsk: RouteDefinition<{ nonce: string }>; }; -export function AnswerChallenge({ nonce, onComplete }: Props): VNode { +export function AnswerChallenge({ nonce, onComplete, routeAsk }: Props): VNode { const { lib } = useChallengerApiContext(); const { i18n } = useTranslationContext(); const { state, accepted, completed } = useSessionState(); @@ -54,7 +56,9 @@ export function AnswerChallenge({ nonce, onComplete }: Props): VNode { ? undefined : !state.lastStatus ? undefined - : ((state.lastStatus.last_address as any)["email"] as string); + : !state.lastStatus.last_address + ? undefined + : state.lastStatus.last_address["email"]; const onSendAgain = !state || lastEmail === undefined @@ -62,7 +66,7 @@ export function AnswerChallenge({ nonce, onComplete }: Props): VNode { : withErrorHandler( async () => { if (!lastEmail) return; - return await lib.bank.challenge(nonce, { email: lastEmail }); + return await lib.challenger.challenge(nonce, { email: lastEmail }); }, (ok) => { if ("redirectURL" in ok.body) { @@ -93,11 +97,11 @@ export function AnswerChallenge({ nonce, onComplete }: Props): VNode { ); const onCheck = - lastTryError && lastTryError.exhausted + errors !== undefined || (lastTryError && lastTryError.exhausted) ? undefined : withErrorHandler( async () => { - return lib.bank.solve(nonce, { pin: pin! }); + return lib.challenger.solve(nonce, { pin: pin! }); }, (ok) => { completed(ok.body.redirectURL as URL); @@ -141,7 +145,7 @@ export function AnswerChallenge({ nonce, onComplete }: Props): VNode { <div class="mx-auto max-w-2xl text-center"> <h2 class="text-3xl font-bold tracking-tight text-gray-900 sm:text-4xl"> <i18n.Translate> - Please enter the TAN you received to authenticate. + Enter the TAN you received to authenticate. </i18n.Translate> </h2> <p class="mt-2 text-lg leading-8 text-gray-600"> @@ -220,15 +224,25 @@ export function AnswerChallenge({ nonce, onComplete }: Props): VNode { <i18n.Translate>Check</i18n.Translate> </Button> </div> - <div class="mt-10"> - <Button - type="submit" - disabled={!onSendAgain} - class="block w-full disabled:bg-gray-300 rounded-md bg-indigo-600 px-3.5 py-2.5 text-center text-sm font-semibold text-white shadow-sm hover:bg-indigo-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600" - handler={onSendAgain} - > - <i18n.Translate>Send again</i18n.Translate> - </Button> + <div class="mt-10 flex justify-between"> + <div> + <a + href={routeAsk.url({ nonce })} + class="relative disabled:bg-gray-100 disabled:text-gray-500 inline-flex items-center rounded-md bg-white px-3 py-2 text-sm font-semibold text-gray-900 ring-1 ring-inset ring-gray-300 hover:bg-gray-50 focus-visible:outline-offset-0" + > + <i18n.Translate>Change email</i18n.Translate> + </a> + </div> + <div> + <Button + type="submit" + disabled={!onSendAgain} + class="block w-full disabled:bg-gray-300 rounded-md bg-indigo-600 px-3.5 py-2.5 text-center text-sm font-semibold text-white shadow-sm hover:bg-indigo-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-indigo-600" + handler={onSendAgain} + > + <i18n.Translate>Send code again</i18n.Translate> + </Button> + </div> </div> </form> </div> |