diff options
author | Sebastian <sebasjm@gmail.com> | 2024-03-12 12:04:59 -0300 |
---|---|---|
committer | Sebastian <sebasjm@gmail.com> | 2024-03-12 12:04:59 -0300 |
commit | f93a18dcbb089988be7c539022e5dff3dd57f515 (patch) | |
tree | b3f83797dec993b3dcbf9fd2039a24d29b5be671 | |
parent | 6af708aa26396667078a8da3d3fca4e894998b5d (diff) | |
download | wallet-core-f93a18dcbb089988be7c539022e5dff3dd57f515.tar.xz |
better form
-rw-r--r-- | packages/bank-ui/src/pages/SolveChallengePage.tsx | 108 |
1 files changed, 64 insertions, 44 deletions
diff --git a/packages/bank-ui/src/pages/SolveChallengePage.tsx b/packages/bank-ui/src/pages/SolveChallengePage.tsx index 592379dfa..8e639335d 100644 --- a/packages/bank-ui/src/pages/SolveChallengePage.tsx +++ b/packages/bank-ui/src/pages/SolveChallengePage.tsx @@ -244,23 +244,6 @@ export function SolveChallengePage({ }); } - const subtitle = ((op): TranslatedString => { - switch (op) { - case "delete-account": - return i18n.str`Account delete`; - case "update-account": - return i18n.str`Account update`; - case "update-password": - return i18n.str`Password update`; - case "create-transaction": - return i18n.str`Wire transfer`; - case "confirm-withdrawal": - return i18n.str`Withdrawal`; - case "create-cashout": - return i18n.str`Cashout`; - } - })(ch.operation); - return ( <Fragment> <LocalNotificationBanner notification={notification} /> @@ -274,7 +257,14 @@ export function SolveChallengePage({ <i18n.Translate>Confirm the operation</i18n.Translate> </span> </h2> - <span>{subtitle}</span> + <p class="mt-2 text-sm text-gray-500"> + <i18n.Translate> + This operation is protected with second factor authentication. In + order to complete it we need to verify your identity using the + authentication channel you provided. + </i18n.Translate> + </p> + <span></span> </div> <div class="bg-white shadow-sm ring-1 ring-gray-900/5 sm:rounded-xl md:col-span-2"> @@ -403,31 +393,60 @@ function ChallengeDetails({ onStart(); } }, []); + + const subtitle = ((op): TranslatedString => { + switch (op) { + case "delete-account": + return i18n.str`Removing account`; + case "update-account": + return i18n.str`Updating account values`; + case "update-password": + return i18n.str`Updating password`; + case "create-transaction": + return i18n.str`Making a wire transfer`; + case "confirm-withdrawal": + return i18n.str`Confirming withdrawal`; + case "create-cashout": + return i18n.str`Making a cashout`; + } + })(challenge.operation); + return ( <div class="px-4 mt-4 "> <div class="w-full"> <div class="border-gray-100"> - <h2 class="text-base font-semibold leading-7 text-gray-900"> - <span - class="text-sm text-black font-semibold leading-6 " - id="availability-label" - > - <i18n.Translate>Operation details</i18n.Translate> - </span> + <h2 class="text-base font-semibold leading-10 text-gray-900"> + <span class=" text-black font-semibold leading-6 "> + <i18n.Translate>Operation:</i18n.Translate> + </span>{" "} + + <span class=" text-black font-normal leading-6 ">{subtitle}</span> </h2> <dl class="divide-y divide-gray-100"> {((): VNode => { switch (challenge.operation) { case "delete-account": 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"> - <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} - </dd> - </div> + <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"> + <i18n.Translate>Type</i18n.Translate> + </dt> + <dd class="mt-1 text-sm leading-6 text-gray-700 sm:col-span-2 sm:mt-0"> + <i18n.Translate> + Updating account settings + </i18n.Translate> + </dd> + </div> + <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"> + <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} + </dd> + </div> + </Fragment> ); case "create-transaction": { const payto = parsePaytoUri(challenge.request.payto_uri)!; @@ -571,17 +590,18 @@ function ChallengeDetails({ assertUnreachable(challenge); } })()} - - {challenge.info && ( - <h2 class="text-base font-semibold leading-7 text-gray-900"> - <span - class="text-sm text-black font-semibold leading-6 " - id="availability-label" - > - <i18n.Translate>Challenge details</i18n.Translate> - </span> - </h2> - )} + </dl> + {challenge.info && ( + <h2 class="text-base font-semibold leading-7 text-gray-900 mt-4"> + <span + class="text-sm text-black font-semibold leading-6 " + id="availability-label" + > + <i18n.Translate>Challenge details</i18n.Translate> + </span> + </h2> + )} + <dl class="divide-y divide-gray-100"> {challenge.sent.t_ms !== "never" && ( <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"> |