diff options
author | Sebastian <sebasjm@gmail.com> | 2024-02-05 14:58:05 -0300 |
---|---|---|
committer | Sebastian <sebasjm@gmail.com> | 2024-02-05 14:58:05 -0300 |
commit | 58d45fc8aef174027b2855a3cd24b0eb73d6de2e (patch) | |
tree | 5d532a466685ffd450baa07c15df1a1875391f0c /packages/demobank-ui/src | |
parent | 285d287640c3e4b376978e12e70f46d03742855c (diff) |
some fixes from the last QC meeting
Diffstat (limited to 'packages/demobank-ui/src')
18 files changed, 165 insertions, 161 deletions
diff --git a/packages/demobank-ui/src/components/Transactions/views.tsx b/packages/demobank-ui/src/components/Transactions/views.tsx index 1d63cc2cb..f4f6f66ba 100644 --- a/packages/demobank-ui/src/components/Transactions/views.tsx +++ b/packages/demobank-ui/src/components/Transactions/views.tsx @@ -49,7 +49,7 @@ export function ReadyView({ <div class="sm:flex sm:items-center"> <div class="sm:flex-auto"> <h1 class="text-base font-semibold leading-6 text-gray-900"> - <i18n.Translate>Latest transactions</i18n.Translate> + <i18n.Translate>Transactions history</i18n.Translate> </h1> </div> </div> @@ -93,8 +93,8 @@ export function ReadyView({ item.when.t_ms === "never" ? "" : format(item.when.t_ms, "HH:mm:ss", { - locale: dateLocale, - }); + locale: dateLocale, + }); return ( <tr key={idx} @@ -124,7 +124,7 @@ export function ReadyView({ </span> ) : ( <span style={{ color: "grey" }}> - <{i18n.str`invalid value`}> + <{i18n.str`Invalid value`}> </span> )} </dd> @@ -163,7 +163,7 @@ export function ReadyView({ /> ) : ( <span style={{ color: "grey" }}> - <{i18n.str`invalid value`}> + <{i18n.str`Invalid value`}> </span> )} </td> diff --git a/packages/demobank-ui/src/context/config.ts b/packages/demobank-ui/src/context/config.ts index f2e37a15f..5d8a5c73f 100644 --- a/packages/demobank-ui/src/context/config.ts +++ b/packages/demobank-ui/src/context/config.ts @@ -134,7 +134,7 @@ export const BankCoreApiProvider = ({ children: h( "div", {}, - i18n.str`the bank backend is not supported. supported version "${checked.supported}", server version "${checked.result.version}"`, + i18n.str`The bank backend is not supported. Supported version "${checked.supported}", server version "${checked.result.version}"`, ), }); } diff --git a/packages/demobank-ui/src/pages/BankFrame.tsx b/packages/demobank-ui/src/pages/BankFrame.tsx index a106f370d..35cb30065 100644 --- a/packages/demobank-ui/src/pages/BankFrame.tsx +++ b/packages/demobank-ui/src/pages/BankFrame.tsx @@ -86,9 +86,9 @@ export function BankFrame({ backend.state.status !== "loggedIn" ? undefined : () => { - backend.logOut(); - resetBankState(); - } + backend.logOut(); + resetBankState(); + } } sites={ !settings.topNavSites ? [] : Object.entries(settings.topNavSites) @@ -174,16 +174,26 @@ export function BankFrame({ ); } -function WelcomeAccount({ account: accountName }: { account: string }): VNode { +function WelcomeAccount({ account }: { account: string }): VNode { const { i18n } = useTranslationContext(); + const result = useAccountDetails(account) + if (!result) { + return <Loading />; + } + if (result instanceof TalerError) { + return <div />; + } + if (result.type === "fail") { + return <a href={privatePages.myAccountDetails.url({})} class="underline underline-offset-2" > + <i18n.Translate>Welcome</i18n.Translate> + </a>; + } return ( <a href={privatePages.myAccountDetails.url({})} class="underline underline-offset-2" > - <i18n.Translate> - Welcome, <span class="whitespace-nowrap">{accountName}</span> - </i18n.Translate> + <i18n.Translate>Welcome, <span class="whitespace-nowrap">{result.body.name}</span></i18n.Translate> </a> ); } diff --git a/packages/demobank-ui/src/pages/DownloadStats.tsx b/packages/demobank-ui/src/pages/DownloadStats.tsx index d149a0d9f..2a876d233 100644 --- a/packages/demobank-ui/src/pages/DownloadStats.tsx +++ b/packages/demobank-ui/src/pages/DownloadStats.tsx @@ -269,9 +269,7 @@ export function DownloadStats({ routeCancel }: Props): VNode { class="text-sm text-black font-medium leading-6 " id="availability-label" > - <i18n.Translate> - Add previous metric for compare - </i18n.Translate> + <i18n.Translate>Add previous metric for compare</i18n.Translate> </span> </span> <button @@ -378,10 +376,7 @@ export function DownloadStats({ routeCancel }: Props): VNode { }} > <span class="absolute inset-0 flex items-center justify-center text-xs font-semibold text-white"> - <i18n.Translate> - downloading...{" "} - {Math.round((lastStep.step / lastStep.total) * 100)} - </i18n.Translate> + <i18n.Translate>downloading...{" "}{Math.round((lastStep.step / lastStep.total) * 100)}</i18n.Translate> </span> </div> </div> @@ -397,9 +392,7 @@ export function DownloadStats({ routeCancel }: Props): VNode { download={"bank-stats.csv"} > <Attention title={i18n.str`Download completed`}> - <i18n.Translate> - click here to save the file in your computer - </i18n.Translate> + <i18n.Translate>Click here to save the file in your computer.</i18n.Translate> </Attention> </a> )} diff --git a/packages/demobank-ui/src/pages/LoginForm.tsx b/packages/demobank-ui/src/pages/LoginForm.tsx index 83aaff9fa..9816972ac 100644 --- a/packages/demobank-ui/src/pages/LoginForm.tsx +++ b/packages/demobank-ui/src/pages/LoginForm.tsx @@ -153,7 +153,7 @@ export function LoginForm({ enterkeyhint="next" placeholder="identification" autocomplete="username" - title={i18n.str`username of the account`} + title={i18n.str`Username of the account`} required onInput={(e): void => { setUsername(e.currentTarget.value); @@ -185,7 +185,7 @@ export function LoginForm({ enterkeyhint="send" value={password ?? ""} placeholder="Password" - title={i18n.str`password of the account`} + title={i18n.str`Password of the account`} required onInput={(e): void => { setPassword(e.currentTarget.value); diff --git a/packages/demobank-ui/src/pages/PaymentOptions.tsx b/packages/demobank-ui/src/pages/PaymentOptions.tsx index 51a6a17a9..9fa30cc41 100644 --- a/packages/demobank-ui/src/pages/PaymentOptions.tsx +++ b/packages/demobank-ui/src/pages/PaymentOptions.tsx @@ -47,7 +47,7 @@ function ShowOperationPendingTag({ woid, onOperationAlreadyCompleted }: { woid: > <circle cx="3" cy="3" r="3" /> </svg> - <i18n.Translate>operation ready</i18n.Translate> + <i18n.Translate>Operation ready</i18n.Translate> </span> } @@ -100,9 +100,7 @@ export function PaymentOptions({ <span class="flex"> <div class="text-4xl mr-4 my-auto">💵</div> <span class="grow self-center text-lg text-gray-900 align-middle text-center"> - <i18n.Translate> - to a <b>Taler</b> wallet - </i18n.Translate> + <i18n.Translate>to a <b>Taler</b> wallet</i18n.Translate> </span> <svg class="self-center flex-none h-5 w-5 text-indigo-600" diff --git a/packages/demobank-ui/src/pages/PaytoWireTransferForm.tsx b/packages/demobank-ui/src/pages/PaytoWireTransferForm.tsx index 2259929e7..ffcf9eb8b 100644 --- a/packages/demobank-ui/src/pages/PaytoWireTransferForm.tsx +++ b/packages/demobank-ui/src/pages/PaytoWireTransferForm.tsx @@ -87,19 +87,19 @@ export function PaytoWireTransferForm({ const errorsWire = undefinedIfEmpty({ iban: !iban - ? i18n.str`required` + ? i18n.str`Required` : !IBAN_REGEX.test(iban) ? i18n.str`IBAN should have just uppercased letters and numbers` : validateIBAN(iban, i18n), - subject: !subject ? i18n.str`required` : undefined, + subject: !subject ? i18n.str`Required` : undefined, amount: !trimmedAmountStr - ? i18n.str`required` + ? i18n.str`Required` : !parsedAmount - ? i18n.str`not valid` + ? i18n.str`Not valid` : Amounts.isZero(parsedAmount) - ? i18n.str`should be greater than 0` + ? i18n.str`Should be greater than 0` : Amounts.cmp(limit, parsedAmount) === -1 - ? i18n.str`balance is not enough` + ? i18n.str`Balance is not enough` : undefined, }); @@ -107,17 +107,17 @@ export function PaytoWireTransferForm({ const errorsPayto = undefinedIfEmpty({ rawPaytoInput: !rawPaytoInput - ? i18n.str`required` + ? i18n.str`Required` : !parsed - ? i18n.str`does not follow the pattern` + ? i18n.str`Does not follow the pattern` : !parsed.isKnown || parsed.targetType !== "iban" - ? i18n.str`only "IBAN" target are supported` + ? i18n.str`Only "IBAN" target are supported` : !parsed.params.amount - ? i18n.str`use the "amount" parameter to specify the amount to be transferred` + ? i18n.str`Use the "amount" parameter to specify the amount to be transferred` : Amounts.parse(parsed.params.amount) === undefined - ? i18n.str`the amount is not valid` + ? i18n.str`The amount is not valid` : !parsed.params.message - ? i18n.str`use the "message" parameter to specify a reference text for the transfer` + ? i18n.str`Use the "message" parameter to specify a reference text for the transfer` : !IBAN_REGEX.test(parsed.iban) ? i18n.str`IBAN should have just uppercased letters and numbers` : validateIBAN(parsed.iban, i18n), @@ -356,9 +356,7 @@ export function PaytoWireTransferForm({ /> </div> <p class="mt-2 text-sm text-gray-500"> - <i18n.Translate> - IBAN of the recipient's account - </i18n.Translate> + <i18n.Translate>IBAN of the recipient's account</i18n.Translate> </p> </div> @@ -374,7 +372,7 @@ export function PaytoWireTransferForm({ name="subject" id="subject" autocomplete="off" - placeholder={i18n.str`subject`} + placeholder={i18n.str`Subject`} value={subject ?? ""} required onInput={(e): void => { @@ -387,9 +385,7 @@ export function PaytoWireTransferForm({ /> </div> <p class="mt-2 text-sm text-gray-500"> - <i18n.Translate> - some text to identify the transfer - </i18n.Translate> + <i18n.Translate>Some text to identify the transfer</i18n.Translate> </p> </div> @@ -412,7 +408,7 @@ export function PaytoWireTransferForm({ isDirty={trimmedAmountStr !== undefined} /> <p class="mt-2 text-sm text-gray-500"> - <i18n.Translate>amount to transfer</i18n.Translate> + <i18n.Translate>Amount to transfer</i18n.Translate> </p> </div> </div> @@ -422,7 +418,7 @@ export function PaytoWireTransferForm({ <label for="address" class="block text-sm font-medium leading-6 text-gray-900" - >{i18n.str`payto URI:`}</label> + >{i18n.str`Payto URI:`}</label> <div class="mt-2"> <textarea ref={focus ? doAutoFocus : undefined} @@ -433,7 +429,7 @@ export function PaytoWireTransferForm({ class="block overflow-hidden w-44 sm:w-96 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={rawPaytoInput ?? ""} required - title={i18n.str`uniform resource identifier of the target account`} + title={i18n.str`Uniform resource identifier of the target account`} placeholder={i18n.str`payto://iban/[receiver-iban]?message=[subject]&amount=[${limit.currency}:X.Y]`} onInput={(e): void => { rawPaytoInputSetter(e.currentTarget.value); @@ -538,13 +534,13 @@ export function InputAmount( if ( sep_pos !== -1 && l - sep_pos - 1 > - config.currency_specification.num_fractional_input_digits + config.currency_specification.num_fractional_input_digits ) { e.currentTarget.value = e.currentTarget.value.substring( 0, sep_pos + - config.currency_specification.num_fractional_input_digits + - 1, + config.currency_specification.num_fractional_input_digits + + 1, ); } onChange(e.currentTarget.value); diff --git a/packages/demobank-ui/src/pages/RegistrationPage.tsx b/packages/demobank-ui/src/pages/RegistrationPage.tsx index 931a9b700..cbf5758aa 100644 --- a/packages/demobank-ui/src/pages/RegistrationPage.tsx +++ b/packages/demobank-ui/src/pages/RegistrationPage.tsx @@ -218,7 +218,7 @@ function RegistrationForm({ ? "123" : getRandomPassword(); const username = `_${user.first}-${user.second}_`; - const name = `${user.first}, ${user.second}`; + const name = `${capitalizeFirstLetter(user.first)} ${capitalizeFirstLetter(user.second)}`; await doRegistrationAndLogin(name, username, password, () => { onRegistrationSuccesful(username, password); }); @@ -248,7 +248,7 @@ function RegistrationForm({ for="username" class="block text-sm font-medium leading-6 text-gray-900" > - <i18n.Translate>Username</i18n.Translate> + <i18n.Translate>Login username</i18n.Translate> <b style={{ color: "red" }}> *</b> </label> <div class="mt-2"> @@ -260,7 +260,7 @@ function RegistrationForm({ 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={username ?? ""} enterkeyhint="next" - placeholder="identification" + placeholder="account identification to login" autocomplete="username" required onInput={(e): void => { @@ -344,7 +344,7 @@ function RegistrationForm({ for="name" class="block text-sm font-medium leading-6 text-gray-900" > - <i18n.Translate>Name</i18n.Translate> + <i18n.Translate>Full name</i18n.Translate> <b style={{ color: "red" }}> *</b> </label> </div> @@ -357,7 +357,7 @@ function RegistrationForm({ 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={name ?? ""} enterkeyhint="next" - placeholder="your name" + placeholder="John Doe" autocomplete="name" required onInput={(e): void => { @@ -463,3 +463,7 @@ function RegistrationForm({ </Fragment> ); } + +function capitalizeFirstLetter(str: string) { + return str.charAt(0).toUpperCase() + str.slice(1); +} 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> diff --git a/packages/demobank-ui/src/pages/WalletWithdrawForm.tsx b/packages/demobank-ui/src/pages/WalletWithdrawForm.tsx index 9f7f46c4f..c9c2f174e 100644 --- a/packages/demobank-ui/src/pages/WalletWithdrawForm.tsx +++ b/packages/demobank-ui/src/pages/WalletWithdrawForm.tsx @@ -117,11 +117,11 @@ function OldWithdrawalForm({ const errors = undefinedIfEmpty({ amount: trimmedAmountStr == null - ? i18n.str`required` + ? i18n.str`Required` : !parsedAmount - ? i18n.str`invalid` + ? i18n.str`Invalid` : Amounts.cmp(limit, parsedAmount) === -1 - ? i18n.str`balance is not enough` + ? i18n.str`Balance is not enough` : undefined, }); diff --git a/packages/demobank-ui/src/pages/account/ShowAccountDetails.tsx b/packages/demobank-ui/src/pages/account/ShowAccountDetails.tsx index 9f8fb72bc..8fec0f682 100644 --- a/packages/demobank-ui/src/pages/account/ShowAccountDetails.tsx +++ b/packages/demobank-ui/src/pages/account/ShowAccountDetails.tsx @@ -61,7 +61,7 @@ export function ShowAccountDetails({ ? credentials.username === account : false; - const [update, setUpdate] = useState(false); + // const [update, setUpdate] = useState(false); const [submitAccount, setSubmitAccount] = useState< TalerCorebankApi.AccountReconfiguration | undefined >(); @@ -86,13 +86,12 @@ export function ShowAccountDetails({ } async function doUpdate() { - if (!update || !submitAccount || !creds) return; + if (!submitAccount || !creds) return; await handleError(async () => { - const resp = await api.updateAccount( - { - token: creds.token, - username: account, - }, + const resp = await api.updateAccount({ + token: creds.token, + username: account, + }, submitAccount, ); @@ -190,7 +189,7 @@ export function ShowAccountDetails({ <i18n.Translate>Change details</i18n.Translate> </span> </span> - <button + {/* <button type="button" data-enabled={!update} class="bg-indigo-600 data-[enabled=true]:bg-gray-200 relative inline-flex h-5 w-10 flex-shrink-0 cursor-pointer rounded-full ring-2 border-gray-600 transition-colors duration-200 ease-in-out focus:outline-none focus:ring-2 focus:ring-indigo-600 focus:ring-offset-2" @@ -207,16 +206,16 @@ export function ShowAccountDetails({ data-enabled={!update} class="translate-x-5 data-[enabled=true]:translate-x-0 pointer-events-none inline-block h-5 w-5 transform rounded-full bg-white shadow ring-0 transition duration-200 ease-in-out" ></span> - </button> + </button> */} </div> </h2> </div> <AccountForm - focus={update} + focus={true} username={account} template={result.body} - purpose={update ? "update" : "show"} + purpose="update" onChange={(a) => setSubmitAccount(a)} > <div class="flex items-center justify-between gap-x-6 border-t border-gray-900/10 px-4 py-4 sm:px-8"> @@ -229,7 +228,7 @@ export function ShowAccountDetails({ <button type="submit" class="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" - disabled={!update || !submitAccount} + disabled={!submitAccount} onClick={doUpdate} > <i18n.Translate>Update</i18n.Translate> diff --git a/packages/demobank-ui/src/pages/account/UpdateAccountPassword.tsx b/packages/demobank-ui/src/pages/account/UpdateAccountPassword.tsx index 3b35c1fe1..4dcce599d 100644 --- a/packages/demobank-ui/src/pages/account/UpdateAccountPassword.tsx +++ b/packages/demobank-ui/src/pages/account/UpdateAccountPassword.tsx @@ -69,13 +69,13 @@ export function UpdateAccountPassword({ current: !accountIsTheCurrentUser ? undefined : !current - ? i18n.str`required` + ? i18n.str`Required` : undefined, - password: !password ? i18n.str`required` : undefined, + password: !password ? i18n.str`Required` : undefined, repeat: !repeat - ? i18n.str`required` + ? i18n.str`Required` : password !== repeat - ? i18n.str`password doesn't match` + ? i18n.str`Repeated password doesn't match` : undefined, }); const [notification, notify, handleError] = useLocalNotification(); @@ -214,7 +214,7 @@ export function UpdateAccountPassword({ /> </div> <p class="mt-2 text-sm text-gray-500"> - <i18n.Translate>repeat the same password</i18n.Translate> + <i18n.Translate>Repeat the same password</i18n.Translate> </p> </div> @@ -246,7 +246,7 @@ export function UpdateAccountPassword({ </div> <p class="mt-2 text-sm text-gray-500"> <i18n.Translate> - your current password, for security + Your current password, for security </i18n.Translate> </p> </div> diff --git a/packages/demobank-ui/src/pages/admin/AccountForm.tsx b/packages/demobank-ui/src/pages/admin/AccountForm.tsx index 8465a3d8f..300508abe 100644 --- a/packages/demobank-ui/src/pages/admin/AccountForm.tsx +++ b/packages/demobank-ui/src/pages/admin/AccountForm.tsx @@ -128,6 +128,8 @@ export function AccountForm<PurposeType extends keyof ChangeByPurposeType>({ const editableName = purpose === "create" || (purpose === "update" && (config.allow_edit_name || userIsAdmin)); + + const isCashoutEnabled = config.allow_conversion const editableCashout = showingCurrentUserInfo && (purpose === "create" || @@ -162,9 +164,9 @@ export function AccountForm<PurposeType extends keyof ChangeByPurposeType>({ : !editableCashout ? undefined : !cashoutParsed - ? i18n.str`it doesn't have the pattern of an IBAN number` + ? i18n.str`Doesn't have the pattern of an IBAN number` : !cashoutParsed.isKnown || cashoutParsed.targetType !== "iban" - ? i18n.str`only "IBAN" target are supported` + ? i18n.str`Only "IBAN" target are supported` : !IBAN_REGEX.test(cashoutParsed.iban) ? i18n.str`IBAN should have just uppercased letters and numbers` : validateIBAN(cashoutParsed.iban, i18n), @@ -173,40 +175,40 @@ export function AccountForm<PurposeType extends keyof ChangeByPurposeType>({ : !editableAccount ? undefined : !internalParsed - ? i18n.str`it doesn't have the pattern of an IBAN number` + ? i18n.str`Doesn't have the pattern of an IBAN number` : !internalParsed.isKnown || internalParsed.targetType !== "iban" - ? i18n.str`only "IBAN" target are supported` + ? i18n.str`Only "IBAN" target are supported` : !IBAN_REGEX.test(internalParsed.iban) ? i18n.str`IBAN should have just uppercased letters and numbers` : validateIBAN(internalParsed.iban, i18n), email: !newForm.email ? undefined : !EMAIL_REGEX.test(newForm.email) - ? i18n.str`it doesn't have the pattern of an email` + ? i18n.str`Doesn't have the pattern of an email` : undefined, phone: !newForm.phone ? undefined : !newForm.phone.startsWith("+") // FIXME: better phone number check - ? i18n.str`should start with +` + ? i18n.str`Should start with +` : !REGEX_JUST_NUMBERS_REGEX.test(newForm.phone) - ? i18n.str`phone number can't have other than numbers` + ? i18n.str`Phone number can't have other than numbers` : undefined, debit_threshold: !editableThreshold ? undefined : !trimmedAmountStr ? undefined : !parsedAmount - ? i18n.str`not valid` + ? i18n.str`Not valid` : undefined, name: !editableName ? undefined // disabled : !newForm.name - ? i18n.str`required` + ? i18n.str`Required` : undefined, username: !editableUsername ? undefined : !newForm.username - ? i18n.str`required` + ? i18n.str`Required` : undefined, }); setErrors(errors); @@ -246,8 +248,8 @@ export function AccountForm<PurposeType extends keyof ChangeByPurposeType>({ debit_threshold: threshold ?? config.default_debit_threshold, cashout_payto_uri: cashoutURI, payto_uri: internalURI, - is_public: !!newForm.isPublic, - is_taler_exchange: !!newForm.isExchange, + is_public: newForm.isPublic, + is_taler_exchange: newForm.isExchange, tan_channel: newForm.tan_channel === "remove" ? undefined @@ -263,11 +265,11 @@ export function AccountForm<PurposeType extends keyof ChangeByPurposeType>({ const result: TalerCorebankApi.AccountReconfiguration = { cashout_payto_uri: cashoutURI, contact_data: undefinedIfEmpty({ - email: newForm.email ?? template?.contact_data?.email, - phone: newForm.phone ?? template?.contact_data?.phone, + email: newForm.email, + phone: newForm.phone, }), debit_threshold: threshold, - is_public: !!newForm.isPublic, + is_public: newForm.isPublic, name: newForm.name, tan_channel: newForm.tan_channel === "remove" ? null : newForm.tan_channel, @@ -300,7 +302,7 @@ export function AccountForm<PurposeType extends keyof ChangeByPurposeType>({ class="block text-sm font-medium leading-6 text-gray-900" for="username" > - {i18n.str`Username`} + {i18n.str`Login username`} {editableUsername && <b style={{ color: "red" }}> *</b>} </label> <div class="mt-2"> @@ -326,9 +328,7 @@ export function AccountForm<PurposeType extends keyof ChangeByPurposeType>({ /> </div> <p class="mt-2 text-sm text-gray-500"> - <i18n.Translate> - account identification in the bank - </i18n.Translate> + <i18n.Translate>Account identification</i18n.Translate> </p> </div> @@ -337,7 +337,7 @@ export function AccountForm<PurposeType extends keyof ChangeByPurposeType>({ class="block text-sm font-medium leading-6 text-gray-900" for="name" > - {i18n.str`Name`} + {i18n.str`Full name`} {editableName && <b style={{ color: "red" }}> *</b>} </label> <div class="mt-2"> @@ -362,9 +362,7 @@ export function AccountForm<PurposeType extends keyof ChangeByPurposeType>({ /> </div> <p class="mt-2 text-sm text-gray-500"> - <i18n.Translate> - name of the person owner the account - </i18n.Translate> + <i18n.Translate>Name of the account holder</i18n.Translate> </p> </div> @@ -374,8 +372,8 @@ export function AccountForm<PurposeType extends keyof ChangeByPurposeType>({ label={i18n.str`Internal IBAN`} help={ purpose === "create" - ? i18n.str`if empty a random account number will be assigned` - : i18n.str`account identification for bank transfer` + ? i18n.str`If empty a random account number will be assigned` + : i18n.str`Account number for bank transfers` } value={(form.payto_uri ?? defaultValue.payto_uri) as PaytoString} disabled={!editableAccount} @@ -444,12 +442,12 @@ export function AccountForm<PurposeType extends keyof ChangeByPurposeType>({ </div> </div> - {showingCurrentUserInfo && ( + {showingCurrentUserInfo && isCashoutEnabled && ( <PaytoField type="iban" name="cashout-account" label={i18n.str`Cashout IBAN`} - help={i18n.str`account number where the money is going to be sent when doing cashouts`} + help={i18n.str`External account number where the money is going to be sent when doing cashouts`} value={ (form.cashout_payto_uri ?? defaultValue.cashout_payto_uri) as PaytoString @@ -492,7 +490,7 @@ export function AccountForm<PurposeType extends keyof ChangeByPurposeType>({ /> <p class="mt-2 text-sm text-gray-500"> <i18n.Translate> - how much is user able to transfer after zero balance + How much is user able to transfer after zero balance </i18n.Translate> </p> </div> @@ -539,19 +537,8 @@ export function AccountForm<PurposeType extends keyof ChangeByPurposeType>({ </div> )} {/* channel, not shown if old cashout api */} - {OLD_CASHOUT_API ? undefined : config.supported_tan_channels - .length === 0 ? ( - <div class="sm:col-span-5"> - <Attention - type="warning" - title={i18n.str`No cashout channel available`} - > - <i18n.Translate> - This server doesn't support second factor authentication. - </i18n.Translate> - </Attention> - </div> - ) : ( + {OLD_CASHOUT_API || config.supported_tan_channels + .length === 0 ? undefined : ( <div class="sm:col-span-5"> <label class="block text-sm font-medium leading-6 text-gray-900" @@ -597,7 +584,7 @@ export function AccountForm<PurposeType extends keyof ChangeByPurposeType>({ </span> {purpose !== "show" && !hasEmail && - i18n.str`add a email in your profile to enable this option`} + i18n.str`Add a email in your profile to enable this option`} </span> </span> <svg @@ -655,7 +642,7 @@ export function AccountForm<PurposeType extends keyof ChangeByPurposeType>({ </span> {purpose !== "show" && !hasPhone && - i18n.str`add a phone number in your profile to enable this option`} + i18n.str`Add a phone number in your profile to enable this option`} </span> </span> <svg @@ -702,7 +689,7 @@ export function AccountForm<PurposeType extends keyof ChangeByPurposeType>({ aria-labelledby="availability-label" aria-describedby="availability-description" onClick={() => { - form.isPublic = !form.isPublic; + form.isPublic = !(form.isPublic ?? defaultValue.isPublic); updateForm(structuredClone(form)); }} > @@ -717,7 +704,7 @@ export function AccountForm<PurposeType extends keyof ChangeByPurposeType>({ </div> <p class="mt-2 text-sm text-gray-500"> <i18n.Translate> - public accounts have their balance publicly accessible + Public accounts have their balance publicly accessible </i18n.Translate> </p> </div> diff --git a/packages/demobank-ui/src/pages/admin/AccountList.tsx b/packages/demobank-ui/src/pages/admin/AccountList.tsx index 1cee4c58a..41d54c43d 100644 --- a/packages/demobank-ui/src/pages/admin/AccountList.tsx +++ b/packages/demobank-ui/src/pages/admin/AccountList.tsx @@ -149,7 +149,7 @@ export function AccountList({ class="whitespace-nowrap px-3 py-4 text-sm text-gray-500 data-[negative=false]:text-green-600 data-[negative=true]:text-red-600 " > {!balance ? ( - i18n.str`unknown` + i18n.str`Unknown` ) : ( <span class="amount"> <RenderAmount @@ -167,7 +167,7 @@ export function AccountList({ })} class="text-indigo-600 hover:text-indigo-900" > - <i18n.Translate>change password</i18n.Translate> + <i18n.Translate>Change password</i18n.Translate> </a> <br /> <a @@ -176,7 +176,7 @@ export function AccountList({ })} class="text-indigo-600 hover:text-indigo-900" > - <i18n.Translate>cashouts</i18n.Translate> + <i18n.Translate>Cashouts</i18n.Translate> </a> <br /> {noBalance ? ( @@ -186,7 +186,7 @@ export function AccountList({ })} class="text-indigo-600 hover:text-indigo-900" > - <i18n.Translate>remove</i18n.Translate> + <i18n.Translate>Remove</i18n.Translate> </a> ) : undefined} </td> diff --git a/packages/demobank-ui/src/pages/admin/AdminHome.tsx b/packages/demobank-ui/src/pages/admin/AdminHome.tsx index 84cc982af..d6276e050 100644 --- a/packages/demobank-ui/src/pages/admin/AdminHome.tsx +++ b/packages/demobank-ui/src/pages/admin/AdminHome.tsx @@ -385,7 +385,7 @@ function Metrics(): VNode { href={privatePages.statsDownload.url({})} class="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>download stats as CSV</i18n.Translate> + <i18n.Translate>Download stats as CSV</i18n.Translate> </a> </div> </Fragment> diff --git a/packages/demobank-ui/src/pages/admin/RemoveAccount.tsx b/packages/demobank-ui/src/pages/admin/RemoveAccount.tsx index 36e1a4eac..e62b6dc03 100644 --- a/packages/demobank-ui/src/pages/admin/RemoveAccount.tsx +++ b/packages/demobank-ui/src/pages/admin/RemoveAccount.tsx @@ -165,9 +165,9 @@ export function RemoveAccount({ const errors = undefinedIfEmpty({ accountName: !accountName - ? i18n.str`required` + ? i18n.str`Required` : account !== accountName - ? i18n.str`name doesn't match` + ? i18n.str`Name doesn't match` : undefined, }); @@ -229,7 +229,7 @@ export function RemoveAccount({ </div> <p class="mt-2 text-sm text-gray-500"> <i18n.Translate> - enter the account name that is going to be deleted + Enter the account name that is going to be deleted </i18n.Translate> </p> </div> diff --git a/packages/demobank-ui/src/pages/business/CreateCashout.tsx b/packages/demobank-ui/src/pages/business/CreateCashout.tsx index 46da5c847..050c1069e 100644 --- a/packages/demobank-ui/src/pages/business/CreateCashout.tsx +++ b/packages/demobank-ui/src/pages/business/CreateCashout.tsx @@ -212,19 +212,19 @@ export function CreateCashout({ setForm(newForm); } const errors = undefinedIfEmpty<ErrorFrom<typeof form>>({ - subject: !form.subject ? i18n.str`required` : undefined, + subject: !form.subject ? i18n.str`Required` : undefined, amount: !form.amount - ? i18n.str`required` + ? i18n.str`Required` : !inputAmount - ? i18n.str`invalid` + ? i18n.str`Invalid` : Amounts.cmp(limit, calc.debit) === -1 - ? i18n.str`balance is not enough` + ? i18n.str`Balance is not enough` : Amounts.cmp(calc.credit, sellFee) === -1 - ? i18n.str`need to be higher due to fees` + ? i18n.str`Need to be higher due to fees` : Amounts.isZero(calc.credit) - ? i18n.str`the total transfer at destination will be zero` + ? i18n.str`The total transfer at destination will be zero` : undefined, - channel: OLD_CASHOUT_API && !form.channel ? i18n.str`required` : undefined, + channel: OLD_CASHOUT_API && !form.channel ? i18n.str`Required` : undefined, }); const trimmedAmountStr = form.amount?.trim(); @@ -598,7 +598,7 @@ export function CreateCashout({ <i18n.Translate>Email</i18n.Translate> </span> {!resultAccount.body.contact_data?.email && - i18n.str`add a email in your profile to enable this option`} + i18n.str`Add a email in your profile to enable this option`} </span> </span> <svg @@ -646,7 +646,7 @@ export function CreateCashout({ <i18n.Translate>SMS</i18n.Translate> </span> {!resultAccount.body.contact_data?.phone && - i18n.str`add a phone number in your profile to enable this option`} + i18n.str`Add a phone number in your profile to enable this option`} </span> </span> <svg diff --git a/packages/demobank-ui/src/pages/business/ShowCashoutDetails.tsx b/packages/demobank-ui/src/pages/business/ShowCashoutDetails.tsx index 589e29793..7b251d3ca 100644 --- a/packages/demobank-ui/src/pages/business/ShowCashoutDetails.tsx +++ b/packages/demobank-ui/src/pages/business/ShowCashoutDetails.tsx @@ -46,7 +46,7 @@ export function ShowCashoutDetails({ id, routeClose }: Props): VNode { return ( <Attention type="danger" - title={i18n.str`cashout id should be a number`} + title={i18n.str`Cashout id should be a number`} /> ); } |