diff options
Diffstat (limited to 'packages/bank-ui')
-rw-r--r-- | packages/bank-ui/src/pages/account/ShowAccountDetails.tsx | 186 |
1 files changed, 122 insertions, 64 deletions
diff --git a/packages/bank-ui/src/pages/account/ShowAccountDetails.tsx b/packages/bank-ui/src/pages/account/ShowAccountDetails.tsx index 0e2144d77..2d6b88863 100644 --- a/packages/bank-ui/src/pages/account/ShowAccountDetails.tsx +++ b/packages/bank-ui/src/pages/account/ShowAccountDetails.tsx @@ -22,7 +22,7 @@ import { TalerErrorCode, TranslatedString, assertUnreachable, - parsePaytoUri + parsePaytoUri, } from "@gnu-taler/taler-util"; import { CopyButton, @@ -202,16 +202,18 @@ export function ShowAccountDetails({ const url = bank.getRevenueAPI(account); const baseURL = url.href; - const revenueURL = new URL(baseURL) + const revenueURL = new URL(baseURL); revenueURL.username = account; - revenueURL.password = creds?.token ?? "" + revenueURL.password; const ac = parsePaytoUri(result.body.payto_uri); const payto = !ac?.isKnown ? undefined : ac; - const accountLetter : AccountLetter | undefined = !payto + const accountLetter: AccountLetter | undefined = !payto ? undefined : { - accountURI: result.body.payto_uri, infoURL: revenueURL.href - } + accountURI: result.body.payto_uri, + infoURL: revenueURL.href, + accountToken: creds?.token, + }; return ( <Fragment> @@ -339,15 +341,21 @@ export function ShowAccountDetails({ {i18n.str`IBAN`} </label> <div class="mt-2"> - <input - type="text" - class="block w-full disabled:bg-gray-100 rounded-md border-0 py-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 data-[error=true]:ring-red-500 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6" - name="iban" - id="iban" - disabled={true} - value={payto.iban} - autocomplete="off" - /> + <div class="flex justify-between"> + <input + type="text" + class="block w-full disabled:bg-gray-100 rounded-md border-0 py-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 data-[error=true]:ring-red-500 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6" + name="iban" + id="iban" + disabled={true} + value={payto.iban} + autocomplete="off" + /> + <CopyButton + class="p-2 rounded-full text-black shadow-sm focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 " + getContent={() => payto.iban} + /> + </div> </div> <p class="mt-2 text-sm text-gray-500"> <i18n.Translate> @@ -359,30 +367,70 @@ export function ShowAccountDetails({ } case "x-taler-bank": { return ( - <div class="sm:col-span-5"> - <label - class="block text-sm font-medium leading-6 text-gray-900" - for="account-name" - > - {i18n.str`Account name`} - </label> - <div class="mt-2"> - <input - type="text" - class="block w-full disabled:bg-gray-100 rounded-md border-0 py-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 data-[error=true]:ring-red-500 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6" - name="account-name" - id="account-name" - disabled={true} - value={payto.account} - autocomplete="off" - /> + <Fragment> + <div class="sm:col-span-5"> + <label + class="block text-sm font-medium leading-6 text-gray-900" + for="account-host" + > + {i18n.str`Account name`} + </label> + <div class="mt-2"> + <div class="flex justify-between"> + <input + type="text" + class="block w-full disabled:bg-gray-100 rounded-md border-0 py-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 data-[error=true]:ring-red-500 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6" + name="account-host" + id="account-host" + disabled={true} + value={payto.host} + autocomplete="off" + /> + </div> + <CopyButton + class="p-2 rounded-full text-black shadow-sm focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 " + getContent={() => payto.host} + /> + </div> + + <p class="mt-2 text-sm text-gray-500"> + <i18n.Translate> + Bank host where the service is located. + </i18n.Translate> + </p> </div> - <p class="mt-2 text-sm text-gray-500"> - <i18n.Translate> - Bank account identifier for wire transfers. - </i18n.Translate> - </p> - </div> + <div class="sm:col-span-5"> + <label + class="block text-sm font-medium leading-6 text-gray-900" + for="account-name" + > + {i18n.str`Account name`} + </label> + <div class="mt-2"> + <div class="flex justify-between"> + <input + type="text" + class="block w-full disabled:bg-gray-100 rounded-md border-0 py-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 data-[error=true]:ring-red-500 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6" + name="account-name" + id="account-name" + disabled={true} + value={payto.account} + autocomplete="off" + /> + </div> + <CopyButton + class="p-2 rounded-full text-black shadow-sm focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 " + getContent={() => payto.account} + /> + </div> + + <p class="mt-2 text-sm text-gray-500"> + <i18n.Translate> + Bank account identifier for wire transfers. + </i18n.Translate> + </p> + </div> + </Fragment> ); } case "bitcoin": { @@ -401,9 +449,13 @@ export function ShowAccountDetails({ name="iban" id="iban" disabled={true} - value={"DE1231231231"} + value={"asd"} autocomplete="off" /> + <CopyButton + class="p-2 rounded-full text-black shadow-sm focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 " + getContent={() => "Asd"} + /> </div> <p class="mt-2 text-sm text-gray-500"> <i18n.Translate> @@ -424,15 +476,21 @@ export function ShowAccountDetails({ {i18n.str`Owner's name`} </label> <div class="mt-2"> - <input - type="text" - class="block w-full disabled:bg-gray-100 rounded-md border-0 py-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 data-[error=true]:ring-red-500 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6" - name="iban" - id="iban" - disabled={true} - value={result.body.name} - autocomplete="off" - /> + <div class="flex justify-between"> + <input + type="text" + class="block w-full disabled:bg-gray-100 rounded-md border-0 py-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 data-[error=true]:ring-red-500 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6" + name="iban" + id="iban" + disabled={true} + value={result.body.name} + autocomplete="off" + /> + <CopyButton + class="p-2 rounded-full text-black shadow-sm focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 " + getContent={() => result.body.name} + /> + </div> </div> <p class="mt-2 text-sm text-gray-500"> <i18n.Translate> @@ -448,15 +506,21 @@ export function ShowAccountDetails({ {i18n.str`Account info URL`} </label> <div class="mt-2"> - <input - type="text" - class="block w-full disabled:bg-gray-100 rounded-md border-0 py-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 data-[error=true]:ring-red-500 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6" - name="iban" - id="iban" - disabled={true} - value={baseURL} - autocomplete="off" - /> + <div class="flex justify-between"> + <input + type="text" + class="block w-full disabled:bg-gray-100 rounded-md border-0 py-1.5 text-gray-900 shadow-sm ring-1 ring-inset ring-gray-300 data-[error=true]:ring-red-500 placeholder:text-gray-400 focus:ring-2 focus:ring-inset focus:ring-indigo-600 sm:text-sm sm:leading-6" + name="iban" + id="iban" + disabled={true} + value={baseURL} + autocomplete="off" + /> + <CopyButton + class="p-2 rounded-full text-black shadow-sm focus-visible:outline focus-visible:outline-2 focus-visible:outline-offset-2 " + getContent={() => baseURL} + /> + </div> </div> <p class="mt-2 text-sm text-gray-500"> <i18n.Translate> @@ -475,12 +539,7 @@ export function ShowAccountDetails({ > <i18n.Translate>Cancel</i18n.Translate> </a> - <CopyButton - getContent={() => !accountLetter ? "" : JSON.stringify(accountLetter)} - class="flex text-center disabled:opacity-50 disabled:cursor-default cursor-pointer rounded-md bg-indigo-600 px-3 py-2 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" - > - <i18n.Translate>Copy</i18n.Translate> - </CopyButton> + <span></span> </div> </div> )} @@ -488,4 +547,3 @@ export function ShowAccountDetails({ </Fragment> ); } - |