commit 462e1f444fac4385b9f4c3e2677b6cfc38fa5655 parent ca11dd20231ad9f1c8e06b0e257061ccccc324d5 Author: Sebastian <sebasjm@gmail.com> Date: Fri, 14 Nov 2025 11:39:14 -0300 fix button behavior: browser default behavior is submit and we need all as button but some of them as submit that will trigger action on enter key pressed Diffstat:
45 files changed, 141 insertions(+), 119 deletions(-)
diff --git a/packages/merchant-backoffice-ui/src/Routing.tsx b/packages/merchant-backoffice-ui/src/Routing.tsx @@ -759,6 +759,7 @@ function BankAccountBanner(): VNode { <div class="buttons is-right"> <button class="button" + type="button" onClick={() => updatePref("hideMissingAccountUntil", tomorrow)} > <i18n.Translate>Hide for today</i18n.Translate> @@ -810,6 +811,7 @@ function KycBanner(): VNode { <div class="buttons is-right"> <button class="button" + type="button" onClick={() => updatePref("hideKycUntil", tomorrow)} > <i18n.Translate>Hide for today</i18n.Translate> diff --git a/packages/merchant-backoffice-ui/src/components/form/FormProvider.tsx b/packages/merchant-backoffice-ui/src/components/form/FormProvider.tsx @@ -59,11 +59,11 @@ export function FormProvider<T>({ return ( <FormContext.Provider value={value}> <form - class="field" - onSubmit={(e) => { - e.preventDefault(); - // if (valueHandler) valueHandler(object); - }} + // class="field" + // onSubmit={(e) => { + // // e.preventDefault(); + // // if (valueHandler) valueHandler(object); + // }} > {children} </form> diff --git a/packages/merchant-backoffice-ui/src/components/form/InputArray.tsx b/packages/merchant-backoffice-ui/src/components/form/InputArray.tsx @@ -105,8 +105,7 @@ export function InputArray<T>({ </p> {getSuggestion ? undefined : ( <p class="control"> - <button - class="button is-info has-tooltip-left" + <button type="button" class="button is-info has-tooltip-left" disabled={!currentValue} onClick={(): void => { const v = fromStr(currentValue); diff --git a/packages/merchant-backoffice-ui/src/components/form/InputDate.tsx b/packages/merchant-backoffice-ui/src/components/form/InputDate.tsx @@ -136,6 +136,7 @@ export function InputDate<T>({ } > <button + type="button" class="button is-info mr-3" onClick={() => onChange(undefined as any)} > @@ -146,6 +147,7 @@ export function InputDate<T>({ {withTimestampSupport && ( <span data-tooltip={i18n.str`Change value to never`}> <button + type="button" class="button is-info" onClick={() => onChange({ t_s: "never" } as any)} > diff --git a/packages/merchant-backoffice-ui/src/components/form/InputDuration.tsx b/packages/merchant-backoffice-ui/src/components/form/InputDuration.tsx @@ -162,6 +162,7 @@ export function InputDuration<T>({ {withForever && ( <span data-tooltip={i18n.str`Change value to never`}> <button + type="button" class="button is-info mr-3" onClick={() => onChange({ d_ms: "forever" } as any)} > @@ -172,6 +173,7 @@ export function InputDuration<T>({ {!readonly && !withoutClear && ( <span data-tooltip={i18n.str`Change value to empty`}> <button + type="button" class="button is-info " onClick={() => onChange(undefined as any)} > diff --git a/packages/merchant-backoffice-ui/src/components/form/InputGroup.tsx b/packages/merchant-backoffice-ui/src/components/form/InputGroup.tsx @@ -61,8 +61,7 @@ export function InputGroup<T>({ )} </p> {!fixed && ( - <button - class="card-header-icon" + <button type="button" class="card-header-icon" aria-label="more options" onClick={(): void => setActive(!active)} > diff --git a/packages/merchant-backoffice-ui/src/components/form/InputImage.tsx b/packages/merchant-backoffice-ui/src/components/form/InputImage.tsx @@ -118,8 +118,7 @@ export function InputImage<T>({ </button> )} {value && ( - <button - class="button" + <button type="button" class="button" onClick={() => { if (image.current) { image.current.value = ""; diff --git a/packages/merchant-backoffice-ui/src/components/form/InputSearchOnList.tsx b/packages/merchant-backoffice-ui/src/components/form/InputSearchOnList.tsx @@ -81,8 +81,7 @@ export function InputSearchOnList<T extends Entity>({ {selected.description} </p> <div class="buttons is-right mt-5"> - <button - class="button is-info" + <button type="button" class="button is-info" onClick={() => onChange(undefined)} > <i18n.Translate>Clear</i18n.Translate> diff --git a/packages/merchant-backoffice-ui/src/components/form/InputSecured.tsx b/packages/merchant-backoffice-ui/src/components/form/InputSecured.tsx @@ -75,8 +75,7 @@ export function InputSecured<T>({ {!active ? ( <Fragment> <div class="field has-addons"> - <button - class="button" + <button type="button" class="button" onClick={(): void => { setActive(!active); }} @@ -113,8 +112,7 @@ export function InputSecured<T>({ {help} </div> <div class="control"> - <button - class="button is-info" + <button type="button" class="button is-info" disabled={fromStr(newValue) === value} onClick={(): void => { onChange(fromStr(newValue)); @@ -146,8 +144,7 @@ export function InputSecured<T>({ <div class="level" style={{ width: "100%" }}> <div class="level-right is-flex-grow-1"> <div class="level-item"> - <button - class="button is-danger" + <button type="button" class="button is-danger" disabled={null === value || undefined === value} onClick={(): void => { onChange(null!); @@ -164,8 +161,7 @@ export function InputSecured<T>({ </button> </div> <div class="level-item"> - <button - class="button " + <button type="button" class="button " onClick={(): void => { onChange(initial!); setActive(!active); diff --git a/packages/merchant-backoffice-ui/src/components/form/InputStock.tsx b/packages/merchant-backoffice-ui/src/components/form/InputStock.tsx @@ -94,8 +94,7 @@ export function InputStock<T>({ <div class="field-body is-flex-grow-3"> <div class="field has-addons"> {!alreadyExist ? ( - <button - class="button" + <button type="button" class="button" data-tooltip={i18n.str`Click here to configure the product's stock. If left as is, the backend will not control stock.`} onClick={(): void => { valueHandler({ @@ -110,8 +109,7 @@ export function InputStock<T>({ </span> </button> ) : ( - <button - class="button" + <button type="button" class="button" data-tooltip={i18n.str`This product has been configured without stock control`} disabled > @@ -184,8 +182,7 @@ export function InputStock<T>({ name="current" label={i18n.str`Current`} side={ - <button - class="button is-danger" + <button type="button" class="button is-danger" data-tooltip={i18n.str`Remove stock control for this product`} onClick={(): void => { valueHandler(undefined as any); diff --git a/packages/merchant-backoffice-ui/src/components/form/InputTaxes.tsx b/packages/merchant-backoffice-ui/src/components/form/InputTaxes.tsx @@ -121,8 +121,7 @@ export function InputTaxes<T>({ name, label }: Props<keyof T>): VNode { /> <div class="buttons is-right mt-5"> - <button - class="button is-info" + <button type="button" class="button is-info" data-tooltip={i18n.str`Add tax to the tax list`} disabled={hasErrors} onClick={submit} diff --git a/packages/merchant-backoffice-ui/src/components/menu/LangSelector.tsx b/packages/merchant-backoffice-ui/src/components/menu/LangSelector.tsx @@ -52,8 +52,7 @@ export function LangSelector(): VNode { return ( <div class="dropdown is-active "> <div class="dropdown-trigger"> - <button - class="button has-tooltip-left" + <button type="button" class="button has-tooltip-left" data-tooltip="change language selection" aria-haspopup="true" aria-controls="dropdown-menu" diff --git a/packages/merchant-backoffice-ui/src/components/modal/index.tsx b/packages/merchant-backoffice-ui/src/components/modal/index.tsx @@ -37,6 +37,7 @@ import { useEffect, useRef, useState } from "preact/hooks"; import { DEFAULT_REQUEST_TIMEOUT } from "../../utils/constants.js"; import { Spinner } from "../exception/loading.js"; import { FormErrors } from "../form/FormProvider.js"; +import { doAutoFocus } from "../../../../web-util/src/components/utils.js"; interface Props { active?: boolean; @@ -75,7 +76,12 @@ export function ConfirmModal({ <b>{description}</b> </p> )} - <button class="delete " aria-label="close" onClick={onCancel} /> + <button + class="delete " + type="button" + aria-label="close" + onClick={onCancel} + /> </header> <section class="modal-card-body">{children}</section> <footer class="modal-card-foot"> @@ -83,12 +89,13 @@ export function ConfirmModal({ {confirm ? ( <Fragment> {onCancel && !noCancelButton ? ( - <button class="button " onClick={onCancel}> + <button class="button " type="button" onClick={onCancel}> <i18n.Translate>Cancel</i18n.Translate> </button> ) : undefined} <ButtonBetterBulma + type="submit" class={danger ? "button is-danger " : "button is-info "} onClick={confirm} > @@ -96,7 +103,7 @@ export function ConfirmModal({ </ButtonBetterBulma> </Fragment> ) : noCancelButton ? undefined : ( - <button class="button " onClick={onCancel}> + <button class="button " ref={doAutoFocus} onClick={onCancel}> <i18n.Translate>Close</i18n.Translate> </button> )} @@ -105,6 +112,7 @@ export function ConfirmModal({ </div> {noCancelButton ? undefined : ( <button + type="button" class="modal-close is-large " aria-label="close" onClick={onCancel} @@ -133,13 +141,19 @@ export function ContinueModal({ <section class="modal-card-body">{children}</section> <footer class="modal-card-foot"> <div class="buttons is-right" style={{ width: "100%" }}> - <ButtonBetterBulma class="button is-success " onClick={confirm}> + <ButtonBetterBulma + ref={doAutoFocus} + type="submit" + class="button is-success " + onClick={confirm} + > <i18n.Translate>Continue</i18n.Translate> </ButtonBetterBulma> </div> </footer> </div> <button + type="button" class="modal-close is-large " aria-label="close" onClick={onCancel} @@ -165,6 +179,8 @@ export function SimpleModal({ class="modal-close is-large " aria-label="close" onClick={onCancel} + type="submit" + ref={doAutoFocus} /> </div> ); @@ -190,6 +206,7 @@ export function ClearConfirmModal({ <footer class="modal-card-foot"> {onClear && ( <button + type="button" class="button is-danger" onClick={onClear} disabled={onClear === undefined} @@ -198,16 +215,22 @@ export function ClearConfirmModal({ </button> )} <div class="buttons is-right" style={{ width: "100%" }}> - <button class="button " onClick={onCancel}> + <button class="button " type="button" onClick={onCancel}> <i18n.Translate>Cancel</i18n.Translate> </button> - <ButtonBetterBulma class="button is-info" onClick={confirm}> + <ButtonBetterBulma + class="button is-info" + type="submit" + onClick={confirm} + ref={doAutoFocus} + > <i18n.Translate>Confirm</i18n.Translate> </ButtonBetterBulma> </div> </footer> </div> <button + type="button" class="modal-close is-large " aria-label="close" onClick={onCancel} @@ -651,6 +674,7 @@ export function LoadingModal({ onCancel }: { onCancel: () => void }): VNode { </footer> </div> <button + type="button" class="modal-close is-large " aria-label="close" onClick={onCancel} diff --git a/packages/merchant-backoffice-ui/src/components/notifications/index.tsx b/packages/merchant-backoffice-ui/src/components/notifications/index.tsx @@ -54,7 +54,7 @@ export function Notifications({ <article key={i} class={messageStyle(n.type)}> <div class="message-header"> <p>{n.message}</p> - <button + <button type="button" class="delete" onClick={() => removeNotification && removeNotification(n)} /> diff --git a/packages/merchant-backoffice-ui/src/components/picker/DurationPicker.tsx b/packages/merchant-backoffice-ui/src/components/picker/DurationPicker.tsx @@ -156,7 +156,7 @@ function DurationColumn({ <div class="rdp-column" style={{ top: 0 }}> <div class="rdp-cell" key={value - 2}> {onDecrease && ( - <button + <button type="button" style={{ width: "100%", textAlign: "center", margin: 5 }} onClick={onDecrease} > @@ -187,7 +187,7 @@ function DurationColumn({ <div class="rdp-cell" key={value + 2}> {onIncrease && ( - <button + <button type="button" style={{ width: "100%", textAlign: "center", margin: 5 }} onClick={onIncrease} > diff --git a/packages/merchant-backoffice-ui/src/components/product/NonInventoryProductForm.tsx b/packages/merchant-backoffice-ui/src/components/product/NonInventoryProductForm.tsx @@ -70,7 +70,7 @@ export function NonInventoryProductFrom({ return ( <Fragment> <div class="buttons"> - <button + <button type="button" class="button is-success" data-tooltip={i18n.str`Describe and add a product that is not in the inventory list`} onClick={() => setShowCreateProduct(true)} @@ -87,7 +87,7 @@ export function NonInventoryProductFrom({ <div class="modal-card"> <header class="modal-card-head"> <p class="modal-card-title">{i18n.str`Complete information of the product`}</p> - <button + <button type="button" class="delete " aria-label="close" onClick={() => setShowCreateProduct(false)} @@ -101,13 +101,13 @@ export function NonInventoryProductFrom({ </section> <footer class="modal-card-foot"> <div class="buttons is-right" style={{ width: "100%" }}> - <button + <button type="button" class="button " onClick={() => setShowCreateProduct(false)} > <i18n.Translate>Cancel</i18n.Translate> </button> - <button + <button type="button" class="button is-info " disabled={!submitForm} onClick={submitForm} @@ -117,7 +117,7 @@ export function NonInventoryProductFrom({ </div> </footer> </div> - <button + <button type="button" class="modal-close is-large " aria-label="close" onClick={() => setShowCreateProduct(false)} diff --git a/packages/merchant-backoffice-ui/src/paths/instance/accessTokens/create/CreatePage.tsx b/packages/merchant-backoffice-ui/src/paths/instance/accessTokens/create/CreatePage.tsx @@ -22,6 +22,7 @@ import { assertUnreachable, Duration, + HttpStatusCode, LoginTokenScope, TalerMerchantApi, } from "@gnu-taler/taler-util"; @@ -110,7 +111,16 @@ export function CreatePage({ onCreated, onBack }: Props): VNode { }), !!errors || !state.password ? undefined : [state.password, data, []], ); - + create.onFail = (fail) => { + switch (fail.case) { + case HttpStatusCode.Accepted: + return i18n.str`Second factor authentication required.`; + case HttpStatusCode.Unauthorized: + return i18n.str`Check the password.`; + case HttpStatusCode.NotFound: + return i18n.str`Instance not found.`; + } + }; create.onSuccess = onCreated; const retry = create.lambda((ids: string[]) => [ @@ -238,24 +248,25 @@ export function CreatePage({ onCreated, onBack }: Props): VNode { inputType="password" label={i18n.str`Current password`} /> + <div class="buttons is-right mt-5"> + {onBack && ( + <button class="button" type="button" onClick={onBack}> + <i18n.Translate>Cancel</i18n.Translate> + </button> + )} + <ButtonBetterBulma + type="submit" + data-tooltip={ + hasErrors + ? i18n.str`Please complete the marked fields` + : i18n.str`Confirm operation` + } + onClick={create} + > + <i18n.Translate>Confirm</i18n.Translate> + </ButtonBetterBulma> + </div> </FormProvider> - <div class="buttons is-right mt-5"> - {onBack && ( - <button class="button" onClick={onBack}> - <i18n.Translate>Cancel</i18n.Translate> - </button> - )} - <ButtonBetterBulma - data-tooltip={ - hasErrors - ? i18n.str`Please complete the marked fields` - : i18n.str`Confirm operation` - } - onClick={create} - > - <i18n.Translate>Confirm</i18n.Translate> - </ButtonBetterBulma> - </div> </div> <div class="column" /> </div> diff --git a/packages/merchant-backoffice-ui/src/paths/instance/accessTokens/create/index.tsx b/packages/merchant-backoffice-ui/src/paths/instance/accessTokens/create/index.tsx @@ -19,14 +19,8 @@ * @author Sebastian Javier Marchano (sebasjm) */ -import { - AbsoluteTime, - TalerMerchantApi -} from "@gnu-taler/taler-util"; -import { - Time, - useTranslationContext -} from "@gnu-taler/web-util/browser"; +import { AbsoluteTime, TalerMerchantApi } from "@gnu-taler/taler-util"; +import { Time, useTranslationContext } from "@gnu-taler/web-util/browser"; import { Fragment, VNode, h } from "preact"; import { useState } from "preact/hooks"; import { ConfirmModal, Row } from "../../../../components/modal/index.js"; diff --git a/packages/merchant-backoffice-ui/src/paths/instance/accessTokens/list/Table.tsx b/packages/merchant-backoffice-ui/src/paths/instance/accessTokens/list/Table.tsx @@ -114,7 +114,7 @@ function Table({ <Fragment> <div class="table-container"> {onLoadMoreBefore && ( - <button + <button type="button" class="button is-fullwidth" data-tooltip={i18n.str`Load more devices before the first one`} onClick={onLoadMoreBefore} @@ -201,7 +201,7 @@ function Table({ </tbody> </table> {onLoadMoreAfter && ( - <button + <button type="button" class="button is-fullwidth" data-tooltip={i18n.str`Load more devices after the last one`} onClick={onLoadMoreAfter} diff --git a/packages/merchant-backoffice-ui/src/paths/instance/categories/list/Table.tsx b/packages/merchant-backoffice-ui/src/paths/instance/categories/list/Table.tsx @@ -135,7 +135,7 @@ function Table({ return ( <div class="table-container"> {onLoadMoreBefore && ( - <button + <button type="button" class="button is-fullwidth" data-tooltip={i18n.str`Load more devices before the first one`} onClick={onLoadMoreBefore} @@ -197,7 +197,7 @@ function Table({ </tbody> </table> {onLoadMoreAfter && ( - <button + <button type="button" class="button is-fullwidth" data-tooltip={i18n.str`Load more devices after the last one`} onClick={onLoadMoreAfter} diff --git a/packages/merchant-backoffice-ui/src/paths/instance/categories/update/UpdatePage.tsx b/packages/merchant-backoffice-ui/src/paths/instance/categories/update/UpdatePage.tsx @@ -286,7 +286,7 @@ function Table({ </tbody> </table> {onLoadMoreAfter && ( - <button + <button type="button" class="button is-fullwidth" data-tooltip={i18n.str`Load more products after the last one`} onClick={onLoadMoreAfter} diff --git a/packages/merchant-backoffice-ui/src/paths/instance/orders/create/CreatePage.tsx b/packages/merchant-backoffice-ui/src/paths/instance/orders/create/CreatePage.tsx @@ -591,7 +591,7 @@ export function CreatePage({ tooltip={i18n.str`Time for the customer to pay before the offer expires. Inventory products will be reserved until this deadline. The time starts after the order is created.`} side={ <span> - <button + <button type="button" class="button" onClick={() => { const c = { @@ -626,7 +626,7 @@ export function CreatePage({ tooltip={i18n.str`Time while the order can be refunded by the merchant. Time starts after the order is created.`} side={ <span> - <button + <button type="button" class="button" onClick={() => { valueHandler({ @@ -661,7 +661,7 @@ export function CreatePage({ tooltip={i18n.str`Time for the exchange to make the wire transfer. Time starts after the order is created.`} side={ <span> - <button + <button type="button" class="button" onClick={() => { valueHandler({ @@ -743,7 +743,7 @@ export function CreatePage({ label={key} tooltip={i18n.str`You must enter a value in JavaScript Object Notation (JSON).`} side={ - <button + <button type="button" class="button" onClick={(e) => { if ( @@ -787,7 +787,7 @@ export function CreatePage({ </p> </div> </div> - <button + <button type="button" class="button" onClick={(e) => { setNewField(""); diff --git a/packages/merchant-backoffice-ui/src/paths/instance/orders/details/DetailPage.tsx b/packages/merchant-backoffice-ui/src/paths/instance/orders/details/DetailPage.tsx @@ -504,7 +504,7 @@ function PaidPage({ : i18n.str`Not refundable` } > - <button + <button type="button" class="button is-danger" disabled={!refundable} onClick={() => onRefund(id)} diff --git a/packages/merchant-backoffice-ui/src/paths/instance/orders/list/Table.tsx b/packages/merchant-backoffice-ui/src/paths/instance/orders/list/Table.tsx @@ -241,7 +241,7 @@ function Table({ </tbody> </table> {onLoadMoreAfter && ( - <button + <button type="button" class="button is-fullwidth" data-tooltip={i18n.str`Load more orders after the last one`} onClick={onLoadMoreAfter} diff --git a/packages/merchant-backoffice-ui/src/paths/instance/otp_devices/create/CreatePage.tsx b/packages/merchant-backoffice-ui/src/paths/instance/otp_devices/create/CreatePage.tsx @@ -145,7 +145,7 @@ export function CreatePage({ onCreated, onBack }: Props): VNode { </span> } side={ - <button + <button type="button" data-tooltip={i18n.str`Generate random secret key`} class="button is-info mr-3" onClick={(e) => { diff --git a/packages/merchant-backoffice-ui/src/paths/instance/otp_devices/list/Table.tsx b/packages/merchant-backoffice-ui/src/paths/instance/otp_devices/list/Table.tsx @@ -126,7 +126,7 @@ function Table({ return ( <div class="table-container"> {onLoadMoreBefore && ( - <button + <button type="button" class="button is-fullwidth" data-tooltip={i18n.str`Load more devices before the first one`} onClick={onLoadMoreBefore} @@ -179,7 +179,7 @@ function Table({ </tbody> </table> {onLoadMoreAfter && ( - <button + <button type="button" class="button is-fullwidth" data-tooltip={i18n.str`Load more devices after the last one`} onClick={onLoadMoreAfter} diff --git a/packages/merchant-backoffice-ui/src/paths/instance/otp_devices/update/UpdatePage.tsx b/packages/merchant-backoffice-ui/src/paths/instance/otp_devices/update/UpdatePage.tsx @@ -144,7 +144,7 @@ export function UpdatePage({ device, onUpdated, onBack }: Props): VNode { } side={ state.otp_key === undefined ? ( - <button + <button type="button" onClick={() => { setState((s) => ({ ...s, otp_key: "" })); }} @@ -153,7 +153,7 @@ export function UpdatePage({ device, onUpdated, onBack }: Props): VNode { <i18n.Translate>Change key</i18n.Translate> </button> ) : ( - <button + <button type="button" data-tooltip={i18n.str`Generate random secret key`} class="button is-info mr-3" onClick={() => { diff --git a/packages/merchant-backoffice-ui/src/paths/instance/products/list/Table.tsx b/packages/merchant-backoffice-ui/src/paths/instance/products/list/Table.tsx @@ -350,7 +350,7 @@ function Table({ </tbody> </table> {onLoadMoreAfter && ( - <button + <button type="button" class="button is-fullwidth" data-tooltip={i18n.str`Load more products after the last one`} onClick={onLoadMoreAfter} @@ -400,14 +400,14 @@ function FastProductWithInfiniteStockUpdateForm({ <div class="buttons is-expanded"> <div class="buttons is-right mt-5"> - <button class="button" onClick={onCancel}> + <button type="button"class="button" onClick={onCancel}> <i18n.Translate>Cancel</i18n.Translate> </button> <span class="has-tooltip-left" data-tooltip={i18n.str`Update product with new price`} > - <button + <button type="button" class="button is-info" onClick={() => onUpdate({ @@ -479,7 +479,7 @@ function FastProductWithManagedStockUpdateForm({ </FormProvider> <div class="buttons is-right mt-5"> - <button class="button" onClick={onCancel}> + <button type="button"class="button" onClick={onCancel}> <i18n.Translate>Cancel</i18n.Translate> </button> <span @@ -490,7 +490,7 @@ function FastProductWithManagedStockUpdateForm({ : i18n.str`Update product with new stock and price` } > - <button + <button type="button" class="button is-info" disabled={hasErrors} onClick={() => diff --git a/packages/merchant-backoffice-ui/src/paths/instance/products/update/UpdatePage.tsx b/packages/merchant-backoffice-ui/src/paths/instance/products/update/UpdatePage.tsx @@ -91,7 +91,7 @@ export function UpdatePage({ product, onBack, onConfirm }: Props): VNode { <div class="buttons is-right mt-5"> {onBack && ( - <button class="button" onClick={onBack}> + <button type="button"class="button" onClick={onBack}> <i18n.Translate>Cancel</i18n.Translate> </button> )} diff --git a/packages/merchant-backoffice-ui/src/paths/instance/templates/create/CreatePage.tsx b/packages/merchant-backoffice-ui/src/paths/instance/templates/create/CreatePage.tsx @@ -298,7 +298,7 @@ export function CreatePage({ onCreated, onBack }: Props): VNode { <div class="buttons is-right mt-5"> {onBack && ( - <button class="button" onClick={onBack}> + <button type="button"class="button" onClick={onBack}> <i18n.Translate>Cancel</i18n.Translate> </button> )} diff --git a/packages/merchant-backoffice-ui/src/paths/instance/templates/list/Table.tsx b/packages/merchant-backoffice-ui/src/paths/instance/templates/list/Table.tsx @@ -122,7 +122,7 @@ function Table({ return ( <div class="table-container"> {onLoadMoreBefore && ( - <button + <button type="button" class="button is-fullwidth" data-tooltip={i18n.str`Load more templates before the first one`} onClick={onLoadMoreBefore} @@ -160,21 +160,21 @@ function Table({ </td> <td class="is-actions-cell right-sticky"> <div class="buttons is-right"> - <button + <button type="button" class="button is-danger is-small has-tooltip-left" data-tooltip={i18n.str`Delete selected templates from the database`} onClick={() => onDelete(i)} > <i18n.Translate>Delete</i18n.Translate> </button> - <button + <button type="button" class="button is-info is-small has-tooltip-left" data-tooltip={i18n.str`Use template to create new order`} onClick={() => onNewOrder(i)} > <i18n.Translate>Use template</i18n.Translate> </button> - <button + <button type="button" class="button is-info is-small has-tooltip-left" data-tooltip={i18n.str`Generate a QR code for the template.`} onClick={() => onQR(i)} @@ -189,7 +189,7 @@ function Table({ </tbody> </table> {onLoadMoreAfter && ( - <button + <button type="button" class="button is-fullwidth" data-tooltip={i18n.str`Load more templates after the last one`} onClick={onLoadMoreAfter} diff --git a/packages/merchant-backoffice-ui/src/paths/instance/templates/qr/QrPage.tsx b/packages/merchant-backoffice-ui/src/paths/instance/templates/qr/QrPage.tsx @@ -67,11 +67,11 @@ export function QrPage({ id: templateId, onBack }: Props): VNode { <div class="column is-four-fifths"> <div class="buttons is-right mt-5"> {onBack && ( - <button class="button" onClick={onBack}> + <button type="button"class="button" onClick={onBack}> <i18n.Translate>Cancel</i18n.Translate> </button> )} - <button + <button type="button" class="button is-info" onClick={() => saveAsPDF(templateId)} > diff --git a/packages/merchant-backoffice-ui/src/paths/instance/templates/update/UpdatePage.tsx b/packages/merchant-backoffice-ui/src/paths/instance/templates/update/UpdatePage.tsx @@ -366,7 +366,7 @@ export function UpdatePage({ template, onUpdated, onBack }: Props): VNode { <div class="buttons is-right mt-5"> {onBack && ( - <button class="button" onClick={onBack}> + <button type="button"class="button" onClick={onBack}> <i18n.Translate>Cancel</i18n.Translate> </button> )} diff --git a/packages/merchant-backoffice-ui/src/paths/instance/templates/use/UsePage.tsx b/packages/merchant-backoffice-ui/src/paths/instance/templates/use/UsePage.tsx @@ -166,7 +166,7 @@ export function UsePage({ <div class="buttons is-right mt-5"> {onBack && ( - <button class="button" onClick={onBack}> + <button type="button"class="button" onClick={onBack}> <i18n.Translate>Cancel</i18n.Translate> </button> )} diff --git a/packages/merchant-backoffice-ui/src/paths/instance/tokenfamilies/create/CreatePage.tsx b/packages/merchant-backoffice-ui/src/paths/instance/tokenfamilies/create/CreatePage.tsx @@ -166,7 +166,7 @@ export function CreatePage({ onCreated, onBack }: Props): VNode { <div class="buttons is-right mt-5"> {onBack && ( - <button class="button" onClick={onBack}> + <button type="button"class="button" onClick={onBack}> <i18n.Translate>Cancel</i18n.Translate> </button> )} diff --git a/packages/merchant-backoffice-ui/src/paths/instance/tokenfamilies/update/UpdatePage.tsx b/packages/merchant-backoffice-ui/src/paths/instance/tokenfamilies/update/UpdatePage.tsx @@ -142,7 +142,7 @@ export function UpdatePage({ onUpdated, onBack, tokenFamily }: Props) { <div class="buttons is-right mt-5"> {onBack && ( - <button class="button" onClick={onBack}> + <button type="button"class="button" onClick={onBack}> <i18n.Translate>Cancel</i18n.Translate> </button> )} diff --git a/packages/merchant-backoffice-ui/src/paths/instance/transfers/create/CreatePage.tsx b/packages/merchant-backoffice-ui/src/paths/instance/transfers/create/CreatePage.tsx @@ -143,7 +143,7 @@ export function CreatePage({ accounts, onCreated, onBack }: Props): VNode { <div class="buttons is-right mt-5"> {onBack && ( - <button class="button" onClick={onBack}> + <button type="button"class="button" onClick={onBack}> <i18n.Translate>Cancel</i18n.Translate> </button> )} diff --git a/packages/merchant-backoffice-ui/src/paths/instance/transfers/list/Table.tsx b/packages/merchant-backoffice-ui/src/paths/instance/transfers/list/Table.tsx @@ -66,7 +66,7 @@ export function CardTable({ class="has-tooltip-left" data-tooltip={i18n.str`Add new transfer`} > - <button class="button is-info" type="button" onClick={onCreate}> + <button type="button" class="button is-info" onClick={onCreate}> <span class="icon is-small"> <i class="mdi mdi-plus mdi-36px" /> </span> @@ -115,7 +115,7 @@ function Table({ return ( <div class="table-container"> {onLoadMoreBefore && ( - <button + <button type="button" class="button is-fullwidth" data-tooltip={i18n.str`Load more wire transfers preceding the first one`} onClick={onLoadMoreBefore} @@ -164,7 +164,7 @@ function Table({ </td> <td> {i.verified !== true ? ( - <button + <button type="button" class="button is-danger is-small has-tooltip-left" data-tooltip={i18n.str`Delete selected transfer from the database`} onClick={() => onDelete(i)} @@ -179,7 +179,7 @@ function Table({ </tbody> </table> {onLoadMoreAfter && ( - <button + <button type="button" class="button is-fullwidth" data-tooltip={i18n.str`Load more transfers after the last one`} onClick={onLoadMoreAfter} diff --git a/packages/merchant-backoffice-ui/src/paths/instance/update/UpdatePage.tsx b/packages/merchant-backoffice-ui/src/paths/instance/update/UpdatePage.tsx @@ -195,7 +195,7 @@ export function UpdatePage({ </FormProvider> <div class="buttons is-right mt-4"> - <button + <button type="button" class="button" onClick={onBack} data-tooltip="cancel operation" diff --git a/packages/merchant-backoffice-ui/src/paths/instance/update/index.tsx b/packages/merchant-backoffice-ui/src/paths/instance/update/index.tsx @@ -109,7 +109,7 @@ function CommonUpdate( <div class="columns"> <div class="column" /> <div class="column is-four-fifths"> - <button + <button type="button" class="button " onClick={() => { setDeleting(true); diff --git a/packages/merchant-backoffice-ui/src/paths/instance/webhooks/create/CreatePage.tsx b/packages/merchant-backoffice-ui/src/paths/instance/webhooks/create/CreatePage.tsx @@ -266,7 +266,7 @@ export function CreatePage({ onCreate, onBack }: Props): VNode { <div class="buttons is-right mt-5"> {onBack && ( - <button class="button" onClick={onBack}> + <button type="button"class="button" onClick={onBack}> <i18n.Translate>Cancel</i18n.Translate> </button> )} diff --git a/packages/merchant-backoffice-ui/src/paths/instance/webhooks/list/Table.tsx b/packages/merchant-backoffice-ui/src/paths/instance/webhooks/list/Table.tsx @@ -143,7 +143,7 @@ function Table({ return ( <div class="table-container"> {onLoadMoreBefore && ( - <button + <button type="button" class="button is-fullwidth" data-tooltip={i18n.str`Load more webhooks before the first one`} onClick={onLoadMoreBefore} @@ -196,7 +196,7 @@ function Table({ </tbody> </table> {onLoadMoreAfter && ( - <button + <button type="button" class="button is-fullwidth" data-tooltip={i18n.str`Load more webhooks after the last one`} onClick={onLoadMoreAfter} diff --git a/packages/merchant-backoffice-ui/src/paths/instance/webhooks/update/UpdatePage.tsx b/packages/merchant-backoffice-ui/src/paths/instance/webhooks/update/UpdatePage.tsx @@ -210,7 +210,7 @@ export function UpdatePage({ webhook, onConfirm, onBack }: Props): VNode { <div class="buttons is-right mt-5"> {onBack && ( - <button class="button" onClick={onBack}> + <button type="button"class="button" onClick={onBack}> <i18n.Translate>Cancel</i18n.Translate> </button> )} diff --git a/packages/merchant-backoffice-ui/src/paths/resetAccount/index.tsx b/packages/merchant-backoffice-ui/src/paths/resetAccount/index.tsx @@ -181,7 +181,7 @@ export function ResetAccount({ borderTop: 0, }} > - <button class="button" onClick={onCancel}> + <button type="button"class="button" onClick={onCancel}> <i18n.Translate>Cancel</i18n.Translate> </button> <ButtonBetterBulma onClick={reset}> diff --git a/packages/merchant-backoffice-ui/src/paths/settings/index.tsx b/packages/merchant-backoffice-ui/src/paths/settings/index.tsx @@ -136,7 +136,7 @@ export function Settings({ onClose }: { onClose?: () => void }): VNode { </section> {onClose && ( <section class="section is-main-section"> - <button class="button" onClick={onClose}> + <button type="button" class="button" onClick={onClose}> <i18n.Translate>Close</i18n.Translate> </button> </section>