fix #8930

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>
   );
 }
-