diff options
Diffstat (limited to 'packages/demobank-ui/src/pages/SolveChallengePage.tsx')
-rw-r--r-- | packages/demobank-ui/src/pages/SolveChallengePage.tsx | 53 |
1 files changed, 35 insertions, 18 deletions
diff --git a/packages/demobank-ui/src/pages/SolveChallengePage.tsx b/packages/demobank-ui/src/pages/SolveChallengePage.tsx index 8c39b8d94..4d3169390 100644 --- a/packages/demobank-ui/src/pages/SolveChallengePage.tsx +++ b/packages/demobank-ui/src/pages/SolveChallengePage.tsx @@ -78,7 +78,7 @@ export function SolveChallengePage({ const ch = bankState.currentChallenge; const errors = undefinedIfEmpty({ - code: !code ? i18n.str`required` : undefined, + code: !code ? i18n.str`Required` : undefined, }); async function startChallenge() { @@ -255,6 +255,10 @@ export function SolveChallengePage({ <ChallengeDetails challenge={bankState.currentChallenge} onStart={startChallenge} + onCancel={() => { + updateBankState("currentChallenge", undefined); + onChallengeCompleted(); + }} /> {ch.info && ( <div class="mt-3 text-sm leading-6"> @@ -325,9 +329,11 @@ export function SolveChallengePage({ function ChallengeDetails({ challenge, onStart, + onCancel, }: { challenge: ChallengeInProgess; onStart: () => void; + onCancel: () => void; }): VNode { const { i18n, dateLocale } = useTranslationContext(); const { config } = useBankCoreApiContext(); @@ -335,7 +341,15 @@ function ChallengeDetails({ return ( <div class="px-4 mt-4 "> <div class="w-full"> - <div class="flex justify-center"> + <div class="flex justify-between"> + <button + type="button" + // class="disabled:opacity-50 disabled:cursor-default cursor-pointer rounded-md px-3 py-2 text-sm font-semibold text-black shadow-sm hover:bg-red-500 focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 focus-visible:outline-red-600" + class="text-sm font-semibold leading-6 text-gray-900" + onClick={onCancel} + > + <i18n.Translate>Cancel</i18n.Translate> + </button> {challenge.info ? ( <button type="submit" @@ -376,7 +390,7 @@ function ChallengeDetails({ return ( <div class="px-4 py-2 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-0"> <dt class="text-sm font-medium leading-6 text-gray-900"> - Account + <i18n.Translate>Account</i18n.Translate> </dt> <dd class="mt-1 text-sm leading-6 text-gray-700 sm:col-span-2 sm:mt-0"> {challenge.request} @@ -390,7 +404,7 @@ function ChallengeDetails({ {challenge.request.amount && ( <div class="px-4 py-2 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-0"> <dt class="text-sm font-medium leading-6 text-gray-900"> - Amount + <i18n.Translate>Amount</i18n.Translate> </dt> <dd class="mt-1 text-sm leading-6 text-gray-700 sm:col-span-2 sm:mt-0"> <RenderAmount @@ -405,7 +419,7 @@ function ChallengeDetails({ {payto.isKnown && payto.targetType === "iban" && ( <div class="px-4 py-2 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-0"> <dt class="text-sm font-medium leading-6 text-gray-900"> - To account + <i18n.Translate>To account</i18n.Translate> </dt> <dd class="mt-1 text-sm leading-6 text-gray-700 sm:col-span-2 sm:mt-0"> {payto.iban} @@ -426,7 +440,7 @@ function ChallengeDetails({ {challenge.request.cashout_payto_uri !== undefined && ( <div class="px-4 py-2 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-0"> <dt class="text-sm font-medium leading-6 text-gray-900"> - Cashout account + <i18n.Translate>Cashout account</i18n.Translate> </dt> <dd class="mt-1 text-sm leading-6 text-gray-700 sm:col-span-2 sm:mt-0"> {challenge.request.cashout_payto_uri} @@ -436,7 +450,7 @@ function ChallengeDetails({ {challenge.request.contact_data?.email !== undefined && ( <div class="px-4 py-2 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-0"> <dt class="text-sm font-medium leading-6 text-gray-900"> - Email + <i18n.Translate>Email</i18n.Translate> </dt> <dd class="mt-1 text-sm leading-6 text-gray-700 sm:col-span-2 sm:mt-0"> {challenge.request.contact_data?.email} @@ -446,7 +460,7 @@ function ChallengeDetails({ {challenge.request.contact_data?.phone !== undefined && ( <div class="px-4 py-2 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-0"> <dt class="text-sm font-medium leading-6 text-gray-900"> - Phone + <i18n.Translate>Phone</i18n.Translate> </dt> <dd class="mt-1 text-sm leading-6 text-gray-700 sm:col-span-2 sm:mt-0"> {challenge.request.contact_data?.phone} @@ -456,7 +470,7 @@ function ChallengeDetails({ {challenge.request.debit_threshold !== undefined && ( <div class="px-4 py-2 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-0"> <dt class="text-sm font-medium leading-6 text-gray-900"> - Debit threshold + <i18n.Translate>Debit threshold</i18n.Translate> </dt> <dd class="mt-1 text-sm leading-6 text-gray-700 sm:col-span-2 sm:mt-0"> <RenderAmount @@ -471,17 +485,17 @@ function ChallengeDetails({ {challenge.request.is_public !== undefined && ( <div class="px-4 py-2 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-0"> <dt class="text-sm font-medium leading-6 text-gray-900"> - Is this account public? + <i18n.Translate>Is this account public?</i18n.Translate> </dt> <dd class="mt-1 text-sm leading-6 text-gray-700 sm:col-span-2 sm:mt-0"> - {challenge.request.is_public ? "enable" : "disable"} + {challenge.request.is_public ? i18n.str`Enable` : i18n.str`Disable`} </dd> </div> )} {challenge.request.name !== undefined && ( <div class="px-4 py-2 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-0"> <dt class="text-sm font-medium leading-6 text-gray-900"> - Name + <i18n.Translate>Name</i18n.Translate> </dt> <dd class="mt-1 text-sm leading-6 text-gray-700 sm:col-span-2 sm:mt-0"> {challenge.request.name} @@ -491,10 +505,10 @@ function ChallengeDetails({ {challenge.request.tan_channel !== undefined && ( <div class="px-4 py-2 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-0"> <dt class="text-sm font-medium leading-6 text-gray-900"> - Authentication channel + <i18n.Translate>Authentication channel</i18n.Translate> </dt> <dd class="mt-1 text-sm leading-6 text-gray-700 sm:col-span-2 sm:mt-0"> - {challenge.request.tan_channel} + {challenge.request.tan_channel ?? i18n.str`Remove`} </dd> </div> )} @@ -506,7 +520,7 @@ function ChallengeDetails({ <Fragment> <div class="px-4 py-2 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-0"> <dt class="text-sm font-medium leading-6 text-gray-900"> - New password + <i18n.Translate>New password</i18n.Translate> </dt> <dd class="mt-1 text-sm leading-6 text-gray-700 sm:col-span-2 sm:mt-0"> {challenge.request.new_password} @@ -570,6 +584,7 @@ function ChallengeDetails({ function ShowWithdrawalDetails({ id }: { id: string }): VNode { const details = useWithdrawalDetails(id); + const { i18n } = useTranslationContext(); const { config } = useBankCoreApiContext(); if (!details) { return <Loading />; @@ -601,7 +616,7 @@ function ShowWithdrawalDetails({ id }: { id: string }): VNode { {details.body.selected_reserve_pub !== undefined && ( <div class="px-4 py-2 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-0"> <dt class="text-sm font-medium leading-6 text-gray-900"> - Withdraw id + <i18n.Translate>Withdraw id</i18n.Translate> </dt> <dd class="mt-1 text-sm leading-6 text-gray-700 sm:col-span-2 sm:mt-0" @@ -614,7 +629,7 @@ function ShowWithdrawalDetails({ id }: { id: string }): VNode { {details.body.selected_exchange_account !== undefined && ( <div class="px-4 py-2 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-0"> <dt class="text-sm font-medium leading-6 text-gray-900"> - To account + <i18n.Translate>To account</i18n.Translate> </dt> <dd class="mt-1 text-sm leading-6 text-gray-700 sm:col-span-2 sm:mt-0"> {details.body.selected_exchange_account} @@ -658,7 +673,9 @@ function ShowCashoutDetails({ <Fragment> {request.subject !== undefined && ( <div class="px-4 py-2 sm:grid sm:grid-cols-3 sm:gap-4 sm:px-0"> - <dt class="text-sm font-medium leading-6 text-gray-900">Subject</dt> + <dt class="text-sm font-medium leading-6 text-gray-900"> + <i18n.Translate>Subject</i18n.Translate> + </dt> <dd class="mt-1 text-sm leading-6 text-gray-700 sm:col-span-2 sm:mt-0"> {request.subject} </dd> |