diff options
Diffstat (limited to 'packages')
-rw-r--r-- | packages/bank-ui/src/pages/SolveChallengePage.tsx | 52 |
1 files changed, 48 insertions, 4 deletions
diff --git a/packages/bank-ui/src/pages/SolveChallengePage.tsx b/packages/bank-ui/src/pages/SolveChallengePage.tsx index 528cc12df..592379dfa 100644 --- a/packages/bank-ui/src/pages/SolveChallengePage.tsx +++ b/packages/bank-ui/src/pages/SolveChallengePage.tsx @@ -49,6 +49,8 @@ import { undefinedIfEmpty } from "../utils.js"; import { RenderAmount } from "./PaytoWireTransferForm.js"; import { OperationNotFound } from "./WithdrawalQRCode.js"; +const TAN_PREFIX = "T-"; +const TAN_REGEX = /^([Tt](-)?)?[0-9]*$/; export function SolveChallengePage({ onChallengeCompleted, routeClose, @@ -82,7 +84,11 @@ export function SolveChallengePage({ const ch = bankState.currentChallenge; const errors = undefinedIfEmpty({ - code: !code ? i18n.str`Required` : undefined, + code: !code + ? i18n.str`Required` + : !TAN_REGEX.test(code) + ? i18n.str`Confirmation codes are numerical, possibly beginning with 'T-.'` + : undefined, }); async function startChallenge() { @@ -133,11 +139,12 @@ export function SolveChallengePage({ async function completeChallenge() { if (!creds || !code) return; + const tan = code.toUpperCase().startsWith(TAN_PREFIX) + ? code.substring(TAN_PREFIX.length) + : code; await handleError(async () => { { - const resp = await api.confirmChallenge(creds, ch.id, { - tan: code, - }); + const resp = await api.confirmChallenge(creds, ch.id, { tan }); if (resp.type === "fail") { setCode(""); switch (resp.case) { @@ -303,6 +310,17 @@ export function SolveChallengePage({ class="block w-full rounded-md border-0 py-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6" value={code ?? ""} required + onPaste={(e) => { + e.preventDefault(); + const pasted = e.clipboardData?.getData("text/plain"); + if (!pasted) return; + if (pasted.toUpperCase().startsWith(TAN_PREFIX)) { + const sub = pasted.substring(TAN_PREFIX.length); + setCode(sub); + return; + } + setCode(pasted); + }} name="answer" id="answer" autocomplete="off" @@ -316,6 +334,32 @@ export function SolveChallengePage({ isDirty={code !== undefined} /> </div> + <p class="mt-2 text-sm text-gray-500"> + {((ch: TalerCorebankApi.TanChannel): VNode => { + switch (ch) { + case TalerCorebankApi.TanChannel.SMS: + return ( + <i18n.Translate> + You should have received a code in your phone. + </i18n.Translate> + ); + case TalerCorebankApi.TanChannel.EMAIL: + return ( + <i18n.Translate> + You should have received a code in your email. + </i18n.Translate> + ); + default: + assertUnreachable(ch); + } + })(ch.info.tan_channel)} + </p> + <p class="mt-2 text-sm text-gray-500"> + <i18n.Translate> + The confirmation code starts with "{TAN_PREFIX}" followed + by numbers. + </i18n.Translate> + </p> </div> <div class="flex items-center justify-between border-gray-900/10 px-4 py-4 "> <div /> |